1,350 experience to go until the next level!
In case you were wondering, you earn Laracasts experience when you:
Earned once you have completed your first Laracasts lesson.
Earned once you have earned your first 1000 experience points.
Earned when you have been with Laracasts for 1 year.
Earned when you have been with Laracasts for 2 years.
Earned when you have been with Laracasts for 3 years.
Earned when you have been with Laracasts for 4 years.
Earned when you have been with Laracasts for 5 years.
Earned when at least one Laracasts series has been fully completed.
Earned after your first post on the Laracasts forum.
Earned once 100 Laracasts lessons have been completed.
Earned once you receive your first "Best Reply" award on the Laracasts forum.
Earned if you are a paying Laracasts subscriber.
Earned if you have a lifetime subscription to Laracasts.
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.
Earned once you have achieved 500 forum replies.
Earned once your experience points passes 100,000.
Earned once your experience points hits 10,000.
Earned once 1000 Laracasts lessons have been completed.
Earned once your "Best Reply" award count is 100 or more.
Earned once your experience points passes 1 million.
Earned once your experience points ranks in the top 50 of all Laracasts users.
Earned once your experience points ranks in the top 10 of all Laracasts users.
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!
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?
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)
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.
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.
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 :-)
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>
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?
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
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...
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?
Replied to Display 1 Video From A Collection Inside A View
@neilstee The <a href="">
is inside the Livewire component.
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.
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
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
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
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.
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'] }}
´´´
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>
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>
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!
Replied to Npm Run Build Not Found
Updating nodeJS worked, sorry for all the confusion thanks @sr57 and @phillipkregg
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?
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:
npm install videojs-youtube
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
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.
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>
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.
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
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>
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?
Replied to Npm Run Build Not Found
@sr57 I installed Videjo.js through npm https://github.com/videojs/video.js
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"
Replied to Alerts Sticky Bar On Top Of Site
This one seems really nice, https://codeseven.github.io/toastr/
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.
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
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.
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.
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>
Replied to Writing Laravel Tests After Developing The Entire App
Where can I know more about testing and TDD? Will check Laracasts
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 !
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>
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>
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?
Replied to Is It Possible To Check If An Asset Is Empty?
Cool I will give it a try. Thanks @neilstee :-)
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
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:
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!
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.