85 lines
4.0 KiB
PHP
85 lines
4.0 KiB
PHP
<x-layout>
|
|
|
|
<h1>
|
|
<a href="/" class="text-decoration-none">List</a> » <a class="text-decoration-none"
|
|
href="{{ route('course.index', ['course' => $chapter->course_id]) }}">{{ $chapter->course->name }}</a>
|
|
<br>
|
|
<small class="text-muted">{{ $chapter->title }}</small>
|
|
</h1>
|
|
<div>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col">
|
|
@if($prev)
|
|
<div class="float-start m-2"><a
|
|
href="{{ route('course.chapter', ['course' => $chapter->course_id, 'chapter' => $prev->order]) }}"
|
|
class="btn btn-primary">Prev</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="col">
|
|
@if($videoUrl)
|
|
<div class="d-flex justify-content-center flex-column">
|
|
<div class="p-2">
|
|
|
|
<video class="mx-auto" width="500" controls>
|
|
<source src="{{ $videoUrl }}" type="video/mp4"/>
|
|
</video>
|
|
</div>
|
|
<div class="p-2">
|
|
<input type="range" id="playback_range" min="0.5" max="4" value="1" step="0.25">
|
|
<label for="cowbell">playback speed</label>
|
|
<span id="playback"> </span>
|
|
</div>
|
|
</div>
|
|
@else
|
|
no video
|
|
@endif
|
|
|
|
<div>
|
|
<table class="table table-sm">
|
|
@foreach($chapters as $courseChapter)
|
|
<tr class="@if($courseChapter->id === $chapter->id)table-dark @endif">
|
|
<td><a href="{{ route('course.chapter.complete_toggle', ['course' => $courseChapter->course->id, 'chapter' => $courseChapter->id]) }}" class="text-decoration-none"><span class="icon-check {{ $courseChapter->is_complete?'text-info':'text-dark' }}"></span></a></td>
|
|
<td>
|
|
<a href="{{ route('course.chapter', ['course' => $courseChapter->course_id, 'chapter' => $courseChapter->order ]) }}"
|
|
class="text-decoration-none">{{ $courseChapter->title }}</a>
|
|
</td>
|
|
<td class="text-end">{{ $courseChapter->duration }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col">
|
|
@if($next)
|
|
<div class="float-end m-2"><a
|
|
href="{{ route('course.chapter', ['course' => $chapter->course_id, 'chapter' => $next->order]) }}"
|
|
class="btn btn-primary">Next</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const value = document.querySelector("#playback")
|
|
const input = document.querySelector("#playback_range")
|
|
document.querySelector('body').onload = function () {
|
|
const playbackRate = localStorage['playback'] || 1;
|
|
document.querySelector('video').playbackRate = playbackRate;
|
|
document.querySelector('#playback_range').value = playbackRate;
|
|
value.textContent = 'x' + playbackRate;
|
|
};
|
|
|
|
value.textContent = 'x' + input.value
|
|
input.addEventListener("input", (event) => {
|
|
localStorage['playback'] = event.target.value;
|
|
value.textContent = 'x' + event.target.value;
|
|
document.querySelector('video').playbackRate = event.target.value;
|
|
})
|
|
</script>
|
|
</x-layout>
|