Good evening. I’m coming to you because I’m facing an issue with my project.
I’m developing a courses web site and everything is working great, except when changing courses lessons. I mean, if I start playing a video on the platform, it does it just one time, for example, from lesson 1 to lesson 2, or 2 to 1. But it does it just one time, then it doesn’t change video,
lesson name, description etc.
This is my Livewire Controller/Model.
<?php
namespace AppLivewire;
use LivewireComponent;
use AppModelsCourse;
use AppModelsLesson;
use IlluminateFoundationAuthAccessAuthorizesRequests;
class CourseStatus extends Component
{
use AuthorizesRequests;
public $course, $current;
public function mount(Course $course)
{
$this->course = $course;
foreach ($course->lessons as $lesson) {
if (!$lesson->completed) {
$this->current = $lesson;
break;
}
}
if (!$this->current) {
$this->current = $course->lessons->last();
}
$this->authorize('enrolled', $course);
}
public function render()
{
return view('livewire.course-status');
}
// Métodos
public function changeLesson(Lesson $lesson)
{
$this->current = $lesson;
}
public function completed()
{
if ($this->current->completed) {
// Eliminar registro
$this->current->users()->detach(auth()->user()->id);
} else {
// Agregar registro
$this->current->users()->attach(auth()->user()->id);
}
$this->current = Lesson::find($this->current->id);
$this->course = Course::find($this->course->id);
}
// Propiedades computadas
public function getIndexProperty()
{
return $this->course->lessons->pluck('id')->search($this->current->id);
}
public function getPreviousProperty()
{
if ($this->index == 0) {
return null;
} else {
return $this->course->lessons[$this->index - 1];
}
}
public function getNextProperty()
{
if ($this->index == $this->course->lessons->count() - 1) {
return null;
} else {
return $this->course->lessons[$this->index + 1];
}
}
public function getAdvanceProperty()
{
$i = 0;
foreach ($this->course->lessons as $lesson) {
if ($lesson->completed) {
$i++;
}
}
$advance = ($i * 100) / ($this->course->lessons->count());
return round($advance, 2);
}
public function download()
{
return response()->download(storage_path('app/' . $this->current->resource->url));
}
}
This is where I get the course id and of course the lesson id. With this I change the lesson with the Next and Previous stuff. Download lesson content and everything related to the play lesson view.
Observer: Lesson Observer
This is where I Create, Update and Delete a Lesson.
<?php
namespace AppObservers;
use AppModelsLesson;
use AppModelsCourse;
use IlluminateSupportFacadesStorage;
class LessonOberver
{
public function creating(Lesson $lesson)
{
$url = $lesson->video_path;
$lesson->video_frame = '<video x-ref="player" playsinline controls data-poster=""><source src="'. $url .'" type="video/mp4" /></video>';
}
public function updating(Lesson $lesson)
{
$url = $lesson->video_path;
$lesson->video_frame = '<video x-ref="player" playsinline controls data-poster=""><source src="'. $url .'" type="video/mp4" /></video>';
}
public function deleting(Lesson $lesson)
{
if ($lesson->resource) {
Storage::delete($lesson->resource->image_path);
$lesson->resource->delete();
}
}
}
Finally, my view:
<div class="mt-8">
@push('stylesheets')
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
@endpush
<div class="container grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="lg:col-span-2">
{{-- Reproductor de video --}}
<div class="">
@if ($current->video_path)
<div>
<div x-data x-init="let player = new Plyr($refs.player)">
{!! $current->video_frame !!}
</div>
</div>
@endif
</div>
<h1 class="text-3xl text-gray-600 font-bold mt-4">
{{ $current->name }}
</h1>
@if ($current->description)
<div class="text-gray-600 mt-2">
<p class="text-slate-600">{{ $current->description->name }}</p>
</div>
@endif
{{-- Marcar como culminado --}}
<div class="flex justify-between mt-4">
<div class="flex items-center" wire:click="completed">
@if ($current->completed)
<i class="fas fa-toggle-on text-green-500 text-2xl cursor-pointer transition duration-150 ease-out"></i>
@else
<i class="fas fa-toggle-off text-neutral-400 text-2xl cursor-pointer transition duration-150 ease-out"></i>
@endif
<p class="text-sm ml-2 dark:text-neutral-200">Marcar esta unidad como culminada</p>
</div>
@if ($current->resource)
<div wire:click="download" class="flex items-center">
<i class="fa-solid fa-cloud-arrow-down text-neutral-500 hover:text-green-500 text-lg cursor-pointer transition duration-150 ease-out mr-3"></i>
<p class="text-slate-600 hover:text-green-500 transition duration-150 ease-out cursor-pointer">Descargar recurso</p>
</div>
@endif
</div>
<div class="card mt-4">
<div class="card-body flex text-gray-500 font-semibold items-center">
@if ($this->previous)
<a wire:click="changeLesson({{ $this->previous }})" class="cursor-pointer text-sm md:text-base">Lección anterior</a>
@endif
@if ($this->next)
<a wire:click="changeLesson({{ $this->next }})" class="ml-auto cursor-pointer text-sm md:text-base">Siguiente lección</a>
@endif
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h1 class="text-2xl lead-8 text-center mb-4">{{ $course->title }}</h1>
<div class="flex items-center">
<figure>
<img class="w-12 h-12 object-cover rounded-full mr-4" src="{{ $course->teacher->profile_photo_url }}" alt="">
</figure>
<div>
<p>{{ $course->teacher->name }}</p>
<a class="text-blue-500 text-sm" href="">{{ '@' . Str::slug($course->teacher->name, '') }}</a>
</div>
</div>
<p class="text-neutral-600 text-sm mt-3">{{ $this->advance . '%' }} completado</p>
<div class="relative pt-2">
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-200">
<div style="width:{{ $this->advance . '%' }}" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500 transition-all duration-1000"></div>
</div>
</div>
<ul>
@foreach ($course->sections as $section)
<li class="text-gray-600 mb-4">
<a class="font-bold text-base inline-block mb-2" href="">{{ $section->name }}</a>
<ul>
@foreach ($section->lessons as $lesson)
<li class="flex mb-1">
<div>
@if ($lesson->completed)
@if ($current->id == $lesson->id)
<span class="inline-block w-4 h-4 border-2 border-green-300 rounded-full mr-2 mt-1 transition-all duration-1000"></span>
@else
<span class="inline-block w-4 h-4 bg-green-300 rounded-full mr-2 mt-1 transition-all duration-1000"></span>
@endif
@else
@if ($current->id == $lesson->id)
<span class="inline-block w-4 h-4 border-2 border-gray-500 rounded-full mr-2 mt-1 transition-all duration-1000"></span>
@else
<span class="inline-block w-4 h-4 bg-gray-500 rounded-full mr-2 mt-1 transition-all duration-1000"></span>
@endif
@endif
</div>
<a class="cursor-pointer" wire:click="changeLesson({{ $lesson }})">{{ $lesson->name }}</a>
</li>
@endforeach
</ul>
</li>
@endforeach
</ul>
</div>
</div>
</div>
@push('js')
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script>
const player = new Plyr('#player');
</script>
@endpush
</div>
Here’s a video to show you what I meaning:
https://drive.google.com/file/d/1OyOeITIILcwz8UTWqhyP1zhswfixS3iT/view?usp=sharing
Thanks in advance.