From 9d2b5414faef1caf9df52ce3a3b2fb54de12d898 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20P=C5=82aczek?=
 <krzysztof.placzek@eobuwie.com.pl>
Date: Wed, 26 Apr 2023 19:24:52 +0200
Subject: [PATCH] Added controll for video playback speed that is saven to
 localstorage.

---
 resources/views/chapter/index.blade.php | 36 +++++++++++++++++++++----
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/resources/views/chapter/index.blade.php b/resources/views/chapter/index.blade.php
index c54e240..1fe57c3 100644
--- a/resources/views/chapter/index.blade.php
+++ b/resources/views/chapter/index.blade.php
@@ -1,4 +1,5 @@
 <x-layout>
+
     <h1>
         <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>
@@ -18,10 +19,18 @@
                 </div>
                 <div class="col">
                     @if($videoUrl)
-                        <div class="d-flex justify-content-center">
-                            <video class="mx-auto" width="500" controls>
-                                <source src="{{ $videoUrl }}" type="video/mp4"/>
-                            </video>
+                        <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
@@ -32,7 +41,8 @@
                             @foreach($chapters as $courseChapter)
                                 <tr class="@if($courseChapter->id === $chapter->id)table-dark @endif">
                                     <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 class="text-end">{{ $courseChapter->duration }}</td>
                                 </tr>
@@ -53,4 +63,20 @@
 
         </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>