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!

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?

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.

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

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 :-)

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>

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

<?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

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

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?

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

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.

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 

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

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

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.

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'] }}
´´´

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

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>

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!

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

@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?

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

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

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>

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.

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

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>

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?

True.

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

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

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"

This one seems really nice, https://codeseven.github.io/toastr/

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.

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

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

Apply json_decode to both responses?

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.

@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.

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>

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

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 !

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>

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>

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?

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

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

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!

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