Member Since 1 Year Ago

Cd.Obregón, Sonora

Experience Points
28,650
Total
Experience

1,350 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
158
Lessons
Completed
Best Reply Awards
2
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

  • Community Pillar

    Earned once your experience points ranks in the top 10 of all Laracasts users.

Level 6
28,650 XP
Apr
15
1 day ago
Activity icon

Started a new Conversation Keyword Queries For Http Get Requests

I wish to capture a given keyword from a text field, whatever is in the field, it should then be stored in a variable that will be passed to another one, the last of which will be searching the key for this associated keyword, and it should respond with an associative array.

Below im making that Http get request and im binding the $keyword variable into the URL

    public function keywordSearch($keyword)
    {          
        $keywordVideos = Http::get('http://thvid-api.herokuapp.com/videos/keyword/'. $keyword)->json();
        
        $keywordVideo = $keywordVideos[0];

        return view ('videos.keyword', compact('keywordVideo'));
    }

Once it finds something valid, this should be able to be passed to a URL. The URL created will be validated against an if statement like this:

@if ($search === $keyword)
	<a href="videos/keyword/{{ $keyword }}/{{ $key }}">

For example, user typed: "proskater",

@if ($search === 'proskater')
	<a href="videos/keyword/proskater/{{ $key }}">

Example response:

    {
        "_id": "605a43ea667cd39060f43687",
        "Title": "Buck - \"Proskater\" (THUG Pro 2019)",
        "Game": "THUG Pro",
        "ID": "5W-jnqHqVNM",
        "Thumbnail": "https://i.ytimg.com/vi_webp/5W-jnqHqVNM/maxresdefault.webp",
        "newduration": "00:05:36"
    },

How can I build this? Do you use the Spatie Query Builder library? or Laravel Macros? Ultimately I wish the URL would get created even if the user types half of the keyword. Thanks!

Apr
14
2 days ago
Activity icon

Replied to Only Getting The Initial Position From An Associative Array

I was just watching this: https://laracasts.com/series/php-for-beginners/episodes/7 and it came clear that what I have is an associative array, that has a key associated with a value. The only problem though, is that when the $key hits the variable from the controller inside of the view where im introducing the youtube link, the position doesn't move from 0.

Can I do a if statement that checks if the position is 0 or not?

If the $key == 0 && its the first resource? then do nothing, but if the $key > 0 && != first position, then $key++ or go to the next number. Is this a valid procedure?

Activity icon

Started a new Conversation Only Getting The Initial Position From An Associative Array

I can't make a youtube link to be dynamic by passing the position of their array's location in the Collection.

First, I make a GET request to an API like this:

    public function thps4($id)
    {
        $id++;
        $thps4Videos = Http::get('http://thvid-api.herokuapp.com/videos/game/THPS4/$id/1')->json();
    
        $thps4Video = $thps4Videos[0];
    
        return view ('videos.thps4', compact('thps4Video'));
    }

In a forelse I iterate through the information but also I pass this data with a $key variable, and I have an href=""

<a class="relative bottom-4" href="videos/thps4/{{ $key }}">

This URL, it displays something like this: thps4/videos/0 and that should point to the array in the 0 position, and this number changes for other items currently being displayed.

On the end point of this URL I am passing the variable $thps4Video and I use the ID column and insert it on the Youtube URL like this:

	"src": "http://www.youtube.com/watch?v={{ $thps4Video['ID'] }}"}],

It is a json object that accepts many properties, one of them being a Youtube link, if more info should be provided do tell please.

I should be able to see a different video everytime I click on a link provided by that href but I always see the same one.

It's a Laravel 8 project and im using VideoJS version 7.11.8 with the Youtube extension (wonderful)

A little bit about the API

This API actually fetches data from Youtube videos and fetches that metadata to it's own endpoint (http://thvid-api.herokuapp.com) so any column that exists here also does on Youtube. They all have a column named "_id", but also one called "ID" which is the ID that corresponds for every video, the former seems to be the id of the array, I think.

Activity icon

Replied to Display 1 Video From A Collection Inside A View

Yea, a little tough since it was more of a progression ! But I will try my best.

Activity icon

Replied to Display 1 Video From A Collection Inside A View

Oh that's awesome, check this, so now my URL's are pointing to an array, and it matches! https://imgur.com/62leXW0 :-)

Did you also get to watch a video? Maybe you couldn't do that since you probably don't have the plug-in but I do get a 404 when I click on the href, thanks for guiding me I appreciate all and any help I can get :-)

Activity icon

Replied to Display 1 Video From A Collection Inside A View

Videos show is where I have to pass the variable of $thps4 you've already seen it, it's this part:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <script src="{{ asset('js/app.js') }}" defer></script>
    <title>Document</title>
    <style>
    .video-js .vjs-big-play-button {
        display: none;
    }
    .vjs-waiting .vjs-loading-spinner {
        display: none;
    }
    </style>
</head>
<body class="bg-black">

    <div class="pt-20 h-full w-screen">
        <video
            id="vid1"
            class="video-js"
            controls
            autoplay="true"
            preload="auto"
        >
      </video>

        <div
            x-data="{close: true}"
            x-show="close"
            class="text-center"
        >
            <p class="text-sm text-gray-500">
              Mute is enabled by default, sorry for the inconveniences
            </p>
            <p 
                x-on:click="close = false"
                class="text-green-500 text-sm cursor-pointer"
            >
                close
            </p>
        </div> {{-- inconveniences message --}}

    </div>
    
    <!-- videojs -->
    <script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
    <script src="{{ asset ('/js/Youtube.min.js') }}"></script>
    
        <script>
            var player = videojs('vid1', { 
                "techOrder": ["youtube"], 
                "sources": [{ "type": "video/youtube", 
                "src": "https://www.youtube.com/watch?v={{ $thps4Video->first()['ID'] }}"}], 
                "fluid": true,
                "autoplay": true
            });
            player.ready(function() {
                setTimeout(function() {
                    player.autoplay('muted');
                    player.volume(0.5);
                    player.fluid('true')
                }, 2000);
            });
        </script>

</body>
</html>
Activity icon

Replied to Display 1 Video From A Collection Inside A View

The only thing I have regarding that is this: Route::get('/play', [PlayVideosController::class, 'show'])->name('videos.show'); how should I work with this?

Activity icon

Replied to Display 1 Video From A Collection Inside A View

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Http;

class Thps4 extends Component
{
    public $thps4Results = [];

    public function loadTHPS4()
    {
        $response = Http::get('http://thvid-api.herokuapp.com/videos/game/THPS4/1/21')->json();
        $this->thps4Results = collect($response);
    }

    public function render()
    {
        return view('livewire.thps4');
    }
}

This is the view:

        @forelse ($thps4Results as $thps4)
            <div wire:key="results-{{ $thps4['_id'] }}">
                <img
                    src="{{ $thps4['Thumbnail'] }}">
                    <div>
                        <a href="play/{{$thps4['ID']}}">
                            <svg>
                            </svg>
                        </a>

                        <p>
                            {{ $thps4['Title'] }}
                        </p>
                    </div>
            </div>
        @empty
            @foreach (range(1,6) as $thumbnail)
                <div>
                    <p>loading</p>
                </div>
            @endforeach
        @endforelse
Activity icon

Replied to Display 1 Video From A Collection Inside A View

@neilstee Can I show you what I already have in the Livewire? Having difficulties understanding how to reformat what's already in there...

Activity icon

Replied to Display 1 Video From A Collection Inside A View

On that livewire component I already have this: <a class="relative bottom-4" href="play/{{$thps4['ID']}}"> ok..

Do you see any issues if you use the index instead of ID?

Not sure I follow, the index method instead of the ID column?

Activity icon

Replied to Display 1 Video From A Collection Inside A View

@neilstee The <a href=""> is inside the Livewire component.

Activity icon

Replied to Display 1 Video From A Collection Inside A View

Yea that seems more like it, but I have one question the $id is it that like a reference to the actual column on the collection from the API or should it come from the index? I don't know what to put in index()... Im not storing them anywhere, they are coming from the API.

Activity icon

Replied to Display 1 Video From A Collection Inside A View

Sorry for that, yes I would like to view any video in this page whenever a user clicks on a button, it should see this variable and then be able to watch that.

This is the result of that:

Call to a member function first() on array 
Activity icon

Replied to Display 1 Video From A Collection Inside A View

I get this:

Call to a member function first() on string

Is it because I have to pass a variable first on the a tag? How else would it know which video I want to select from the collection? This is my foreach:

    @foreach($thps4Video as $thps4)
        <script>
            var player = videojs('vid1', { 
                "techOrder": ["youtube"], 
                "sources": [{ "type": "video/youtube", 
                "src": "https://www.youtube.com/watch?v={{ $thps4->first()['ID'] }}"}], 
                "fluid": true,
                "autoplay": true
            });
            player.ready(function() {
                setTimeout(function() {
                    player.autoplay('muted');
                    player.volume(0.5);
                    player.fluid('true')
                }, 2000);
            });
        </script>
    @endforeach
Activity icon

Replied to Display 1 Video From A Collection Inside A View

I probably should @neilstee

This line will iterate through all from that get request?

$thps4Video = $thps4Videos[0]['ID'];

What value should then get passed in the href, I probably should have mentioned this, because I am already displaying information about the video inside a foreach, and its coming from a different component, Livewire.

Then I think all I would have to do is to change the variable, for example this is that component:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Http;

class Thps4 extends Component
{
    public $thps4Results = [];

    public function loadTHPS4()
    {
        $response = Http::get('http://thvid-api.herokuapp.com/videos/game/THPS4/1/21')->json();
        $this->thps4Results = collect($response);
    }

    public function render()
    {
        return view('livewire.thps4');
    }
}

Thanks, I will try

Activity icon

Replied to Display 1 Video From A Collection Inside A View

Ok, so from this list of videos that I get from this API, I want to be able to view just 1 video. Very similar to when you make a list of posts and you pass the ID or the slug of the post, and you use this value (either the Id or the slug) inside an href and you pass the variable, then when you're on the show.blade.php you can view that single post.

Activity icon

Started a new Conversation Display 1 Video From A Collection Inside A View

I want to be able to pass the location of a resource, it could be 0, 1, 2, 3, store it inside an href and check it against a foreach loop.

 0 => array:8 [▶]
  1 => array:6 [▶]
  2 => array:6 [▶]
  3 => array:6 [▶]

The foreach loop will most likely have 1 value, a dynamic youtube url with the ID as the dynamic content. But I can't wrap my head around the concept, it might be simple for some. I have a Controller with a function and im attempting to fetch this array like this:

    public function show()
    {
        $thps4Videos = Http::get('http://thvid-api.herokuapp.com/videos/game/THPS4')->json();
        dd($thps4Videos);

        return view ('videos.show', compact('thps4Videos'));
    }

So anytime this gets a request I will only get the column for the "id" value, I'd have to associate it with the location from the collection array, and display it on this view, videos.show by associating the position and the value of the column id.

The goal is to display 1 video for each array from the collection in 1 page.

This is one example of 1 array:

  0 => array:8 [▼
    "_id" => "605a43ea667cd39060f435ac"
    "Title" => "THPS4 Rewind: Summer Of 2003 Unreleased (Edited by Maxfli)"
    "Game" => "THPS4"
    "ID" => "Qxd7D1KN1No"
    "Thumbnail" => "https://i.ytimg.com/vi_webp/Qxd7D1KN1No/maxresdefault.webp"
    "newduration" => "00:22:53"
    "category" => "gameplay"
    "updatedAt" => "2021-04-12T17:45:27.167Z"
  ]

The column that can bring me to the video is ID, so the dynamic URL would have to be something like this:

https://www.youtube.com/watch?v={{ $thps4Videos['ID'] }}
´´´
Apr
13
3 days ago
Activity icon

Replied to If Statement That Checks If A Blade Component Was Found Or Finished Loading?

<script>
  window.configureLoading = function() {
      return {
          loaded: false,
          load: function() {
            loaded: true
          }
      }
  }
</script>
Activity icon

Replied to If Statement That Checks If A Blade Component Was Found Or Finished Loading?

Thanks @devingray_ so all I need to do now is to reinitialize the VideoJS object after the window gets loaded using the function that you provided, so I have a few ideas one of them could be to grab the video tag by it's id and then add an event listener with 'load', and Im thinking I could do this all in a method on the object, something along these lines:

<script>
  window.configureLoading = function() {
      return {
          loaded: false,
          loadAfter: function() {
            console.log('function started!');
/*             document.getElementById('#vid1');
            addEventListener('load', configureLoading);
            loaded: true */
          }
      }
  }
</script>

I may be skipping over something because if I call loadAfter in the console, it says:

Uncaught ReferenceError: loadAfter is not defined
    <anonymous> debugger eval code:1

What do you think?

EDIT

Or maybe use a const variable so I can call that variable and use the loadAfter method...

<script>
  const vjs = window.configureLoading = () => {
      return {
          loaded: false,
          loadAfter: function() {
            console.log(this);
/*             document.getElementById('#vid1');
            addEventListener('load', configureLoading);
            loaded: true */
          }
      }
  }
</script>
Apr
12
4 days ago
Activity icon

Started a new Conversation If Statement That Checks If A Blade Component Was Found Or Finished Loading?

I want to have a loading screen whenever a Blade component is in the process of rendering, but how can I target a Blade component ? Something like:

@if ( {{--- is the component done loading? ---}} )
	<x-main-slider/>   
@else
      <div 
        style="height: 600px; width:1230px;" 
        class="animate-pulse mb-12 mx-auto rounded-md bg-gray-700"
      >
      </div>
@endif

So either if its done loading or if it exists I want to display some feedback to the user. This is what the component has so maybe I can target something from the inside as well.

<div class="mb-12 border mx-auto rounded-md border-gray-700">
    <video
      id="vid1"
      class="video-js"
      controls
      autoplay
      preload="auto"
      height="600px"
      width="1230px"
      poster='https://picsum.photos/1230/600'
      data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=zY5nYmTUfnQ"}], "responsive": "true" }'
    >
  </video>
</div>

The most important thing of this component is the video url, and at a later time I think I will be storing the URL on a database so I can target this more dynamically. Thanks!

Activity icon

Replied to Npm Run Build Not Found

Updating nodeJS worked, sorry for all the confusion thanks @sr57 and @phillipkregg

Activity icon

Replied to Npm Run Build Not Found

@phillipkregg as you mentioned:

Error: You are using an unsupported version of Node. Please update to at least Node v12.14

So I will try that and see what happens, also does this mean I don't need to install the Youtube extension from the NPM? Since it comes with it's own files, I think I should still reference them on my views, and that should still work, right?

Activity icon

Replied to Npm Run Build Not Found

Ah, ok.. I ran npm run build because Video.js has an extension which is installed through NPM so heres that extension: https://github.com/videojs/videojs-youtube and on the installation set up this reads:

You can use bower (bower install videojs-youtube), npm (npm install videojs-youtube) or the source and build it using npm run build. Then, the only file you need is dist/Youtube.min.js.

If I understand correctly, I should do this:

  1. npm install videojs-youtube
  2. npm run build

Of course I think you have to run: npm install --save-dev video.js, first in order to have the extension working. https://videojs.com/getting-started

Activity icon

Replied to Npm Run Build Not Found

Where did I ran this code, it was on the Laragon terminal @sr57 which is where I run all of my Laravel commands.

Activity icon

Awarded Best Reply on Lost Flickity's Script On A Livewire Component

Hey @wakanda, I was able to fix this problem. I should update this answer.

I had to use AlpineJS to initialize flickity and set it to null and after doing this, start the Livewire component, and then start Flickity. To me it seemed as if both Flickity and Livewire scripts were overlapping at run-time, when the page would load, flickity would load, but then Livewire would do that too so it became that sort of thing.

To be honest this went beyond my understanding so I had to reach to other people and below im leaving that code as it is with their original comments, hope it helps somebody when they're trying to initialize a script inside of a Livewire component. I'll leave the full component with the same variables I used.

<div 
    x-data="{ flkty: null }"
    wire:init="loadTHPS4"
    x-init="
        flkty = new Flickity($refs.carousel, { imagesLoaded: true, cellAlign: 'left', contain: true, wrapAround: true, pageDots: false, groupCells: true });

        Livewire.hook('message.processed', (message, component) => {
        // Check to make sure received message is for this Livewire component and return if not
        if(component != @this.__instance) return

        // Need to delete this otherwise flickity thinks it is already initialised and won't reinitalise
        delete $refs.carousel.flickityGUID

        // Reinitalise flickity
        flkty = new Flickity($refs.carousel, { imagesLoaded: true, cellAlign: 'left', contain: true, wrapAround: true, pageDots: false, groupCells: true })
        })
    "
    class="mb-8 py-2" 
>
    <div 
        x-ref="carousel"
        class="m-4 h-40"
    >

        @forelse ($thps4Results as $thps4)
            <div 
                class="box w-full h-full relative pb-44 px-1 opacity-60 hover:opacity-100"
                x-data="{show: false}"
                x-on:mouseenter="show = true"
                x-on:mouseleave="show = false"
                wire:key="results-{{ $thps4['_id'] }}"
            >
                <img 
                    class="carousel-cell hover:rounded-md rounded-sm object-contain"
                    src="{{ $thps4['Thumbnail'] }}"
                    alt=""
                >
                    <div
                        class="video-info relative bottom-0 w-full h-full p-1 flex items-center justify-center rounded-md rounded-t-none bg-green-700"
                        x-show="show"
                        x-transition:enter="transition ease-out duration-500"
                        x-transition:enter-start="opacity-0 transform scale-90"
                        x-transition:enter-end="opacity-100 transform scale-100"
                        x-transition:leave="transition ease-in duration-300"
                        x-transition:leave-start="opacity-100 transform scale-100"
                        x-transition:leave-end="opacity-0 transform scale-90"
                    >
                        <svg
                            fill="currentColor"
                            class="absolute left-2 w-8 h-8 cursor-pointer hover:bg-red-700 rounded-full"
                            viewBox="0 0 20 20" 
                            version="1.1" 
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                        >
                            <g id="Page-1" stroke="none" stroke-width="1" fill="white" fill-rule="evenodd">
                                <g id="icon-shape">
                                    <path d="svg mathemathics" id="Combined-Shape"
                                    ></path>
                                </g>
                            </g>
                        </svg>

                        <p class="text-sm font-semibold ml-14">
                            {{ $thps4['Title'] }}
                        </p>
                    </div>
            </div>
        @empty
            @foreach (range(1,6) as $thumbnail)
                <div class="animate-pulse mx-auto w-full h-full" wire:key="empty-{{ $thumbnail }}">
                    <p class="flex bg-gray-700 rounded-sm mb-2 mr-2 w-full h-full"></p>
                </div>
            @endforeach
        @endforelse
    </div>
</div>
Activity icon

Replied to Npm Run Build Not Found

Also, build is usually tied to a webpack config file. Are you using React or something that needs to have a build process with webpack/babel or something? App.tsx is a TypeScript file. It's generally the entry point to a single page app that is built with something like React and written with TypeScript instead of regular JavaScript.

@phillipkregg From that answer, I got the impression that I would only need to add a new "build" command in that file but I just wasn't sure and I did not trusted the solution enough on that answer because that person was indeed using something like Netlify, so I preferred to ask here before comiting to it. Im not using React, it's a Laravel 8 project.

Activity icon

Replied to Npm Run Build Not Found

I can try that as well, would make sense, when I first installed Laragon it was running on a 7.2 version of PHP luckily it was not difficult to perform an update. Thanks @phillipkregg

@sr57 the command I did was npm run build this is the complete log, since I already had googled the problem I found that somebody on StackOverflow had the same issue, so I didn't published the full error, figured it would be a matter of adding a "build" line on the package.json but anyway, enough chit-chat, this is the full error I get:

λ npm run build
npm ERR! missing script: build

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\USER\AppData\Roaming\npm-cache\_logs21-04-12T19_47_59_965Z-debug.log
Activity icon

Replied to Lost Flickity's Script On A Livewire Component

Hey @wakanda, I was able to fix this problem. I should update this answer.

I had to use AlpineJS to initialize flickity and set it to null and after doing this, start the Livewire component, and then start Flickity. To me it seemed as if both Flickity and Livewire scripts were overlapping at run-time, when the page would load, flickity would load, but then Livewire would do that too so it became that sort of thing.

To be honest this went beyond my understanding so I had to reach to other people and below im leaving that code as it is with their original comments, hope it helps somebody when they're trying to initialize a script inside of a Livewire component. I'll leave the full component with the same variables I used.

<div 
    x-data="{ flkty: null }"
    wire:init="loadTHPS4"
    x-init="
        flkty = new Flickity($refs.carousel, { imagesLoaded: true, cellAlign: 'left', contain: true, wrapAround: true, pageDots: false, groupCells: true });

        Livewire.hook('message.processed', (message, component) => {
        // Check to make sure received message is for this Livewire component and return if not
        if(component != @this.__instance) return

        // Need to delete this otherwise flickity thinks it is already initialised and won't reinitalise
        delete $refs.carousel.flickityGUID

        // Reinitalise flickity
        flkty = new Flickity($refs.carousel, { imagesLoaded: true, cellAlign: 'left', contain: true, wrapAround: true, pageDots: false, groupCells: true })
        })
    "
    class="mb-8 py-2" 
>
    <div 
        x-ref="carousel"
        class="m-4 h-40"
    >

        @forelse ($thps4Results as $thps4)
            <div 
                class="box w-full h-full relative pb-44 px-1 opacity-60 hover:opacity-100"
                x-data="{show: false}"
                x-on:mouseenter="show = true"
                x-on:mouseleave="show = false"
                wire:key="results-{{ $thps4['_id'] }}"
            >
                <img 
                    class="carousel-cell hover:rounded-md rounded-sm object-contain"
                    src="{{ $thps4['Thumbnail'] }}"
                    alt=""
                >
                    <div
                        class="video-info relative bottom-0 w-full h-full p-1 flex items-center justify-center rounded-md rounded-t-none bg-green-700"
                        x-show="show"
                        x-transition:enter="transition ease-out duration-500"
                        x-transition:enter-start="opacity-0 transform scale-90"
                        x-transition:enter-end="opacity-100 transform scale-100"
                        x-transition:leave="transition ease-in duration-300"
                        x-transition:leave-start="opacity-100 transform scale-100"
                        x-transition:leave-end="opacity-0 transform scale-90"
                    >
                        <svg
                            fill="currentColor"
                            class="absolute left-2 w-8 h-8 cursor-pointer hover:bg-red-700 rounded-full"
                            viewBox="0 0 20 20" 
                            version="1.1" 
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                        >
                            <g id="Page-1" stroke="none" stroke-width="1" fill="white" fill-rule="evenodd">
                                <g id="icon-shape">
                                    <path d="svg mathemathics" id="Combined-Shape"
                                    ></path>
                                </g>
                            </g>
                        </svg>

                        <p class="text-sm font-semibold ml-14">
                            {{ $thps4['Title'] }}
                        </p>
                    </div>
            </div>
        @empty
            @foreach (range(1,6) as $thumbnail)
                <div class="animate-pulse mx-auto w-full h-full" wire:key="empty-{{ $thumbnail }}">
                    <p class="flex bg-gray-700 rounded-sm mb-2 mr-2 w-full h-full"></p>
                </div>
            @endforeach
        @endforelse
    </div>
</div>
Activity icon

Replied to Npm Run Build Not Found

This is the error log:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\laragon\bin\nodejs\node-v12\node.exe',
1 verbose cli   'C:\laragon\bin\nodejs\node-v12\node_modules\npm\bin\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: missing script: build
4 verbose stack     at run (C:\laragon\bin\nodejs\node-v12\node_modules\npm\lib\run-script.js:155:19)
4 verbose stack     at C:\laragon\bin\nodejs\node-v12\node_modules\npm\lib\run-script.js:63:5
4 verbose stack     at C:\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\read-package-json\read-json.js:115:5
4 verbose stack     at C:\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\read-package-json\read-json.js:418:5
4 verbose stack     at checkBinReferences_ (C:\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\read-package-json\read-json.js:373:45)
4 verbose stack     at final (C:\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\read-package-json\read-json.js:416:3)
4 verbose stack     at then (C:\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\read-package-json\read-json.js:160:5)
4 verbose stack     at C:\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\read-package-json\read-json.js:364:12
4 verbose stack     at C:\laragon\bin\nodejs\node-v12\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:90:16
4 verbose stack     at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:61:3)
5 verbose cwd C:\laragon\www\videotheque
6 verbose Windows_NT 10.0.19042
7 verbose argv "C:\laragon\bin\nodejs\node-v12\node.exe" "C:\laragon\bin\nodejs\node-v12\node_modules\npm\bin\npm-cli.js" "run" "build"
8 verbose node v12.5.0
9 verbose npm  v6.9.0
10 error missing script: build
11 verbose exit [ 1, true ]

EDIT: Not sure if I have npm-cli installed... is that needed?

Activity icon

Replied to Npm Run Build Not Found

True.

Activity icon

Replied to Npm Run Build Not Found

Oh, im using Laragon yeah I did ran that command.

Activity icon

Replied to Npm Run Build Not Found

@sr57 I installed Videjo.js through npm https://github.com/videojs/video.js

Activity icon

Started a new Conversation Npm Run Build Not Found

Im trying to runnpm run build but I get an error:

λ npm run build 
npm ERR! missing script: build

These are the scripts inside of package.json and guess what, no "build",

    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },

According to this question: https://stackoverflow.com/questions/61516683/npm-run-build-missing-script , that is where you set it up but I just wanted to be 100% sure because I sincerely don't know how that stuff works and I don't want to break or mis-configure something I won't be able to repair later. Thanks!

PLUS: In the question that person uses some files im not familiar with, for example "app.tsx":

"build": "webpack-cli app.tsx --config webpack-config.js"

Apr
10
6 days ago
Activity icon

Replied to Livewire Click Event Not Working

Normally when this happens to me it's because somewhere in my project I added a few lines of code that is still relatable, meaning it produces some kind of "collateral effect" for example when this works, what happens next? Are you trying to send a POST request? If that's the case then check that logic and compare it to this component. Or if that's not the case check if the place of residence (wow what a term) for this code is somehow being affected. meaning check the layout in which this code is inside, like I said when this happens to me, it's because somewhere or around where this component is being, there was a "change" that produces this glitch/bug/error.

I'll start with checking the other pieces of code that are built around this code, whether it's before or after. I hope that makes sense, seriously.

Activity icon

Replied to Is It Possible To Check If An Asset Is Empty?

No, I will probably use AlpineJs and do it with a x-show or an x-if else but I can't figure out how to do that. I think I have to use templates tag and for the component im already using a template tag so I don't how that's supposed to look and what it's expected. @neilstee

Activity icon

Replied to Making 2 API GET Requests

I see, it worked just fine with the json() thanks!

Activity icon

Replied to Making 2 API GET Requests

Apply json_decode to both responses?

Apr
09
1 week ago
Activity icon

Started a new Conversation Making 2 API GET Requests

Hey guys how can I make 2 requests for 2 different end points on a URL that comes from an API?

    public $search;
    public $searchResults = [];
    
    public function updatedSearch($newValue)
    {
        if(strlen($this->search) < 3) {
            $this->searchResults = [];
            return;
        }

        $response = Http::get('http://thvid-api.herokuapp.com/videos/game/'.$this->search)->json();
        
        $this->searchResults = $response;
    }

This works fine but I wish to make another query in the same component but to another URL. Is that possible? Does a method exists for this? Thanks.

Activity icon

Replied to Trying To Run Laravel On Windows

@sourcefli Getting to install Laravel through this method was painful for me mainly because of 2 things but I don't need to get into it, mainly because I was frustrated and just wanted to overcome this challenge since I didn't know when I was going to get the Mac back. Eventually @lemmon showed me the ultimate basics and that was a heaven sent, installing Wamp is probably the most straight forward method there is, at least to get your feet wet.

Laragon would've seem like a great choice as you say is very "laravel-esque" but I use this Windows Machine for gaming, had nothing about web dev in here.

Activity icon

Started a new Conversation Lost Flickity's Script On A Livewire Component

Hey guys, this one is a thinker. I was implementing a Javascript image slider library https://flickity.metafizzy.co/ and until I moved my html structure to a Livewire component I seem to have lost the functionality of the package,

livewire/thps4.blade.php

<div
    wire:init="loadTHPS4"
    class="thps-carousel mb-8 py-2" 
    data-flickity='{ "cellAlign": "left", "contain": true, "wrapAround": true, "pageDots": false, "groupCells": true }'>
    @forelse ($thps4Results as $thps4)
        <div
            class="tailwindcss classes"
            x-data="{show: false}"
            x-on:mouseenter="show = true" 
            x-on:mouseleave="show = false"
        >
            <img
                class="px-2 pt-2"
                src="{{ $thps4['Thumbnail'] }}" 
                alt=""
            >
            <div 
                class="relative h-14 p-2 grid grid-cols-2 items-center rounded-t-none rounded-md"
                x-show="show"
            >
                <svg
                    fill="currentColor"
                    class="w-8 h-8 cursor-pointer"
                    viewBox="0 0 20 20" 
                    version="1.1" 
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                    <g id="Page-1" stroke="none" stroke-width="1" fill="white" fill-rule="evenodd">
                        <g id="icon-shape">
                            <path d="s.v.g." id="Combined-Shape"></path>
                        </g>
                    </g>
                </svg>
                
                <p class="text-sm font-semibold absolute ml-11">
                    {{ $thps4['Title'] }}
                </p>
            </div>
        </div>
    @empty
        @foreach (range(1,6) as $thumbnail)
            <div class="animate-pulse mx-auto pl-2">
                <p class="flex bg-gray-700 rounded-sm h-32 mb-2 mr-2 w-44"></p>
            </div>
        @endforeach
    @endforelse
</div>

I have a master.blade.php component that Im using as a layout reference in components/master.blade.php folder and I am using this one for my "welcome" page. How can I use the library which I was pulling from a CDN originally, and have the same working on the livewire view component? As you can see below, I was utilizing the slider through html data attributes and that was all regarding it,

 class="mb-8 py-2" 
    data-flickity='{ "cellAlign": "left", "contain": true, "wrapAround": true, "pageDots": false, "groupCells": true }'>

Example of Livewire usage:

		    <div class="px-16">

            <h2 class="text-gray-500 font-semibold pl-4 mb-4">THPS4</h2>
            
            @livewire('thps4')

            </div>

Apr
08
1 week ago
Activity icon

Replied to Writing Laravel Tests After Developing The Entire App

Where can I know more about testing and TDD? Will check Laracasts

Activity icon

Commented on Search Dropdown

hahahaha! Caught me off guard. Love it. Where can I learn more about tests? I found a bug I could not replicate, mainly because it happened "randomly", sometimes I would type something and then erase it very quickly, and I would get a 500, but other times I tried doing the same with no error happening. Thanks for the lesson @drehimself !

Activity icon

Awarded Best Reply on Can't Get The Updated Results In View

I solved it haha im so excited :-) Issue was that the input (wire:model) and the unorganized list which is where im displaying the results, they were not in the same component, I was trying to implement only the unorganized list in the Blade and the Livewire component separate.

Livewire component:

<div>
    <input
        wire:model.debounce.300ms="search"
        id="search"
        type="search"
        autocomplete="off"
        placeholder="Type game title or THPS player"
        class="relative top-2 w-full text-white pl-8 p-2 text-sm bg-gray-600 rounded-lg placeholder-gray-400 placeholder-opacity-100"
    >
    <svg
        class="absolute ml-1 top-24 text-white"
        xmlns="http://www.w3.org/2000/svg" 
        height="24" 
        viewBox="0 0 24 24" 
        width="24"
    >
        <path d="M0 0h24v24H0V0z" fill="none"></path>
        <path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
    </svg>
    <main class="flex items-center flex-col text-white relative ">
        <ul class="h-auto rounded-md p-2 mt-4 mb-4">
            @foreach($searchResults as $result)
                <li class="w-full h-20 flex items-center px-2 space-x-4 mb-4 
                            border-b-2 rounded-sm border-gray-500 border-opacity-40
                            hover:border-opacity-0 hover:rounded-b-2xl hover:bg-green-500 hover:bg-opacity-70 
                            transition ease-in-out"
                >
                    <img 
                        class="p-2 w-8"
                        src="{{ $result['Thumbnail'] }}"
                        alt="search results"
                    >
                    <p class="text-sm font-extrabold ">{{ $result['Title'] }}</p>
                    <p class="text-sm">{{ $result['Game'] }}</p>
                    <p class="text-sm">{{ $result['newduration'] }}</p>
                </li>
            @endforeach
        </ul> <!-- results -->
    </main>
</div>

Blade component

            <div class="bg-gray-800">
                <div class="p-2">

                    <div class="flex justify-between p-4">
                        <h3 class="font-semibold text-lg italic tracking-wide text-white">Search</h3>
                        <a 
                            href="#" 
                            class="p-2 transition-all duration-200 hover:bg-gray-700 rounded-md bg-gray-600"
                        >
                            <svg
                                fill="currentColor"
                                xmlns="http://www.w3.org/2000/svg" 
                                height="24" 
                                viewBox="0 0 24 24" 
                                width="24"
                            >
                                <path d="M0 0h24v24H0V0z" fill="none"></path>
                                <path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"></path>
                            </svg>
                        </a> <!-- close button -->
                    </div>
                
                    @livewire('search-drop-down')
                    
                </div>
            </div>

I am rendering this anon Blade component into my master.blade.php which is a layout like this:

        <x-search-modal name="search">
            
        </x-search-modal>
Activity icon

Replied to Can't Get The Updated Results In View

I solved it haha im so excited :-) Issue was that the input (wire:model) and the unorganized list which is where im displaying the results, they were not in the same component, I was trying to implement only the unorganized list in the Blade and the Livewire component separate.

Livewire component:

<div>
    <input
        wire:model.debounce.300ms="search"
        id="search"
        type="search"
        autocomplete="off"
        placeholder="Type game title or THPS player"
        class="relative top-2 w-full text-white pl-8 p-2 text-sm bg-gray-600 rounded-lg placeholder-gray-400 placeholder-opacity-100"
    >
    <svg
        class="absolute ml-1 top-24 text-white"
        xmlns="http://www.w3.org/2000/svg" 
        height="24" 
        viewBox="0 0 24 24" 
        width="24"
    >
        <path d="M0 0h24v24H0V0z" fill="none"></path>
        <path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
    </svg>
    <main class="flex items-center flex-col text-white relative ">
        <ul class="h-auto rounded-md p-2 mt-4 mb-4">
            @foreach($searchResults as $result)
                <li class="w-full h-20 flex items-center px-2 space-x-4 mb-4 
                            border-b-2 rounded-sm border-gray-500 border-opacity-40
                            hover:border-opacity-0 hover:rounded-b-2xl hover:bg-green-500 hover:bg-opacity-70 
                            transition ease-in-out"
                >
                    <img 
                        class="p-2 w-8"
                        src="{{ $result['Thumbnail'] }}"
                        alt="search results"
                    >
                    <p class="text-sm font-extrabold ">{{ $result['Title'] }}</p>
                    <p class="text-sm">{{ $result['Game'] }}</p>
                    <p class="text-sm">{{ $result['newduration'] }}</p>
                </li>
            @endforeach
        </ul> <!-- results -->
    </main>
</div>

Blade component

            <div class="bg-gray-800">
                <div class="p-2">

                    <div class="flex justify-between p-4">
                        <h3 class="font-semibold text-lg italic tracking-wide text-white">Search</h3>
                        <a 
                            href="#" 
                            class="p-2 transition-all duration-200 hover:bg-gray-700 rounded-md bg-gray-600"
                        >
                            <svg
                                fill="currentColor"
                                xmlns="http://www.w3.org/2000/svg" 
                                height="24" 
                                viewBox="0 0 24 24" 
                                width="24"
                            >
                                <path d="M0 0h24v24H0V0z" fill="none"></path>
                                <path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"></path>
                            </svg>
                        </a> <!-- close button -->
                    </div>
                
                    @livewire('search-drop-down')
                    
                </div>
            </div>

I am rendering this anon Blade component into my master.blade.php which is a layout like this:

        <x-search-modal name="search">
            
        </x-search-modal>
Activity icon

Started a new Conversation Can't Get The Updated Results In View

Hi guys im implementing a live-search component in Livewire using an API with a GET request but I can't display that data, I was able to dd the results and that gives me an array, so the API response is doing fine the only thing it's not is how to translate that to the view by using an empty array as the vehicle.

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Http;

class SearchDropDown extends Component
{
    public $search;
    public $searchResults = [];
    
    public function updatedSearch($newValue)
    {
        $response = Http::get('http://thvid-api.herokuapp.com/videos/game/'.$this->search)->json();
        
        $this->searchResults = $response;
    }

    public function render()
    {
        return view('livewire.search-drop-down');
    }
}

Because im setting a public property to an empty array, I want to be able to send the response that I receive from the API, stored in $response to $searchResults. I have tried various ways, ultimately I would like to use this variable of $searchResults in a foreach, like this:

            <main class="flex items-center flex-col text-white relative ">
                <ul class="h-auto rounded-md p-2 mt-4 mb-4">
                    @foreach($searchResults as $result)
                        <li class="w-full h-20 flex items-center px-2 space-x-4 mb-4 
                                    border-b-2 rounded-sm border-gray-500 border-opacity-40
                                    hover:border-opacity-0 hover:rounded-b-2xl hover:bg-green-500 hover:bg-opacity-70 
                                    transition ease-in-out"
                        >
                            <img 
                                class="p-2"
                                src="{{ $result['Thumbnail'] }}"
                                alt="search results"
                            >
                            <p class="text-sm font-extrabold ">{{ $result['Title'] }}</p>
                            <p class="text-sm">{{ $result['Game'] }}</p>
                            <p class="text-sm">{{ $result['newduration'] }}</p>
                        </li>
                    @endforeach
                </ul> <!-- results -->
            </main>

livewire.search-drop-down

<input
    wire:model.debounce.300ms="search"
    id="search"
    type="search"
    autocomplete="off"
    placeholder="Type game title or THPS player"
    class="relative top-2 w-full text-white pl-8 p-2 text-sm bg-gray-600 rounded-lg placeholder-gray-400 placeholder-opacity-100"
>

what am I missing?

Apr
07
1 week ago
Activity icon

Replied to Is It Possible To Check If An Asset Is Empty?

Cool I will give it a try. Thanks @neilstee :-)

Activity icon

Started a new Conversation Is It Possible To Check If An Asset Is Empty?

I want to have a loading animation for when the page is loading assets, and other dynamic contents. While I do have a few dynamic content, there are times where I don't for example I have 5 boxes and each are containing an image asset, coming from my public images folder, is it possible to check if that asset has been loaded? if not show this:

@if () 
        @else
        @foreach (range(0, 0) as $slide)
            <div class="mb-12">
                <div class="splide">
                    <div class="splide__track">
                        <div class="animate-pulse text-transparent rounded-md bg-gray-700 w-full h-96">
                            track
                        </div>
                        <ul class="splide__list">
                        </ul>
                    </div>
                </div>
            </div> 
        @endforeach
        @endif

All that does is show something like this: https://tailwindcss.com/docs/animation#pulse

Activity icon

Started a new Conversation Suggestion For FrontEnd Lessons Here In Laracasts

Hey guys I just have a suggestion for future lessons, in terms of new content for what potentially be a new lesson, and that's about working with images, creating an image slider and having it all in a good working dynamically, reusable component. TLDR: You can implement a JS library like Flickity inside your foreach and that will have you running images in no time, but it would be cool to see a Laravel solution (possibly with Alpine or Livewire?) that can make this happen.

Not long ago I implemented an image slider using vanilla Javascript and one of the initial walls I hit was, how do I work with my images, more precisely, how do I render an array of images in to the page and then navigate through them?

Initially I kept having troubles with rendering my images and this was mostly because I had an anon Blade component and I was trying to use the property on itself, but that never would've worked unless I had made that a global variable, probably with the help of a View composer. But anyway I found that I couldn't use {{ $images }} inside of the component, so I opted for using it directly on the page. With this I learnt that it is not recommended to use Model instances on the views, at least it's not that recommended or not willingly, probably due to security concerns? but that was my impression. In my case the matter was a bit more complicated because I was using Livewire and that added a layer of complexity because I had to discern when I was working with Livewire and when I was working with a Laravel Controller, I was using the data (once stored via a Controller) inside a Livewire view component. Again very complicated for my first attempt, I was also rendering this Livewire component inside index.blade.php which was the view attached to the index(). DId not used any variables for the Livewire component on the index, but it made things difficult for me. I realize Livewire might be out of the scope of learning about sliders, but I was trying to implement it in a Datatable.

So after I figured how to use that variable, I then started to think how I would show the images, I knew I had to use Javascript but on the first few attempts I remember using the Blade's loop variables, this because Blade provides the user with variables that can be implemented to an array. So I used a ternary operator and some variables like $loop->index, $loop->count, $loop->first and many more, my goal was to hide or show a specific position with Tailwind's hidden and, with a custom class, coming from the initial attempts from the Javascript I ended up using. But this "class-swap" also didn't worked.

What worked eventually was using good old Javascript and that's it, after reviewing and researching the almighty Google, I finally had come to a conclusion. I didn't used any JS libraries but I could've, and that would've been super helpful, but anway before I wrap this up, I must say that I had an image slider, but what about making it reusable? Yes, more work. I pulled it through with the help of someone on StackOverflow and finally the component was done, but:

  1. If you ask me, I wouldn't do this again: I don't think it's a simple task, your best bet is to use a library like Flickity, or Splide, or Glide.

Anyway I was pretty happy with the results. I don't want to keep the post any longer than what it already is but I just hope someone considers this because it is very common thing to see on a webpage and I don't think there's one lesson about this on Laracasts also sliders, or carousels are pretty cool :-) I'd recommend anyone to checkout Flickity, it's super convenient, you can use HTML data-attributes so you don't need any Javascript.

Thanks for reading!

Apr
04
1 week ago
Activity icon

Replied to Creating A Database On Windows Setup For Laravel

Yes, I hope I don't encounter new problems regarding OS duties. :-) your help greatly improved the project.