krzysiej/symfonycast.local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added controll for video playback speed that is saven to localstorage.

Browse Source
This commit is contained in:
Krzysztof Płaczek
2023-04-26 19:24:52 +02:00
parent cfc84a1d4d
commit 9d2b5414fa
1 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
resources/views/chapter/index.blade.php
View File

@@ -1,4 +1,5 @@
<x-layout> <x-layout>
<h1> <h1>
<a href="/" class="text-decoration-none">List</a> &raquo; <a class="text-decoration-none" <a href="/" class="text-decoration-none">List</a> &raquo; <a class="text-decoration-none"
href="{{ route('course.index', ['course' => $chapter->course_id]) }}">{{ $chapter->course->name }}</a> href="{{ route('course.index', ['course' => $chapter->course_id]) }}">{{ $chapter->course->name }}</a>
@@ -18,11 +19,19 @@
</div> </div>
<div class="col"> <div class="col">
@if($videoUrl) @if($videoUrl)
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center flex-column">
<div class="p-2">
<video class="mx-auto" width="500" controls> <video class="mx-auto" width="500" controls>
<source src="{{ $videoUrl }}" type="video/mp4"/> <source src="{{ $videoUrl }}" type="video/mp4"/>
</video> </video>
</div> </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 @else
no video no video
@endif @endif
@@ -32,7 +41,8 @@
@foreach($chapters as $courseChapter) @foreach($chapters as $courseChapter)
<tr class="@if($courseChapter->id === $chapter->id)table-dark @endif"> <tr class="@if($courseChapter->id === $chapter->id)table-dark @endif">
<td> <td>
<a href="{{ route('course.chapter', ['course' => $courseChapter->course_id, 'chapter' => $courseChapter->order ]) }}" class="text-decoration-none">{{ $courseChapter->title }}</a> <a href="{{ route('course.chapter', ['course' => $courseChapter->course_id, 'chapter' => $courseChapter->order ]) }}"
class="text-decoration-none">{{ $courseChapter->title }}</a>
</td> </td>
<td class="text-end">{{ $courseChapter->duration }}</td> <td class="text-end">{{ $courseChapter->duration }}</td>
</tr> </tr>
@@ -53,4 +63,20 @@
</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;
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> </x-layout>