From 2d3bcb7b7233860f37cff31b2dbe124e545cff6d Mon Sep 17 00:00:00 2001
From: abourtnik <contact@antonbourtnik.fr>
Date: Thu, 7 Nov 2024 13:51:16 +0100
Subject: [PATCH] Add autoplay checkbox

---
 resources/js/app.js                           | 28 ++++++--
 resources/sass/swith.scss                     | 16 ++---
 .../views/layouts/menus/account.blade.php     |  6 +-
 .../layouts/menus/sidebars/front.blade.php    | 72 +++++++++++++------
 resources/views/videos/show.blade.php         |  9 ++-
 5 files changed, 91 insertions(+), 40 deletions(-)

diff --git a/resources/js/app.js b/resources/js/app.js
index 90b6abb3..51b51584 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -90,21 +90,39 @@ ajaxButtons.map(element => element.addEventListener('click', async e => {
 
 // THEME
 
-const switchers = [...document.getElementsByClassName('theme-switcher')];
+const themesSwitchers = [...document.getElementsByClassName('theme-switcher')];
 
 const theme = localStorage.getItem("theme");
 if (theme && theme === 'dark') {
-    if (switchers) {
-        switchers.forEach(switcher => switcher.checked = true)
+    if (themesSwitchers) {
+        themesSwitchers.forEach(switcher => switcher.checked = true)
     }
     document.documentElement.setAttribute('data-bs-theme', 'dark')
 }
 
-switchers.forEach(switcher =>  {
+themesSwitchers.forEach(switcher =>  {
     switcher.addEventListener('change', e => {
         const theme = e.currentTarget.checked ? 'dark' : 'light';
         document.documentElement.setAttribute('data-bs-theme', theme)
         localStorage.setItem("theme", theme);
-        switchers.filter(switcher => switcher.id !== e.currentTarget.id).forEach(switcher => switcher.checked = e.currentTarget.checked)
+        themesSwitchers.filter(switcher => switcher.id !== e.currentTarget.id).forEach(switcher => switcher.checked = e.currentTarget.checked)
+    })
+})
+
+// AUTOPLAY
+
+const autoplaySwitchers = [...document.getElementsByClassName('autoplay-switcher')];
+
+const autoplay = JSON.parse(localStorage.getItem("autoplay-video") || true);
+if (autoplay) {
+    if (autoplaySwitchers) {
+        autoplaySwitchers.forEach(switcher => switcher.checked = true)
+    }
+}
+
+autoplaySwitchers.forEach(switcher =>  {
+    switcher.addEventListener('change', e => {
+        localStorage.setItem("autoplay-video", e.currentTarget.checked);
+        autoplaySwitchers.filter(switcher => switcher.id !== e.currentTarget.id).forEach(switcher => switcher.checked = e.currentTarget.checked)
     })
 })
diff --git a/resources/sass/swith.scss b/resources/sass/swith.scss
index b34c887f..7c15729b 100644
--- a/resources/sass/swith.scss
+++ b/resources/sass/swith.scss
@@ -1,4 +1,4 @@
-.theme-switch {
+.input-switch {
     input {
         position: absolute;
         top: 0;
@@ -48,28 +48,28 @@
         opacity: 1;
         transition: .3s;
     }
-    .icon-moon {
+    .icon-on {
         color: #d4dcff;
     }
 }
 
-.theme-switch input:checked+label .switch::before {
+.input-switch input:checked+label .switch::before {
     transform: translateX(31px);
     background: #5396e7 !important;
 }
 
-.theme-switch input:checked+label .switch {
-    background: #0f1224 !important;
+.input-switch input:checked+label .switch {
+    background: var(--bs-primary-bg-subtle) !important
 }
 
-.theme-switch input:not(:checked)+label .icon-moon {
+.input-switch input:not(:checked)+label .icon-on {
     opacity: 0;
 }
 
-.theme-switch input:checked+label .icon-sun {
+.input-switch input:checked+label .icon-off {
     opacity: 0;
 }
 
-.theme-switch input:checked+label .icon {
+.input-switch input:checked+label .icon {
     transform: translateX(31px);
 }
diff --git a/resources/views/layouts/menus/account.blade.php b/resources/views/layouts/menus/account.blade.php
index db65e3d3..ef357206 100644
--- a/resources/views/layouts/menus/account.blade.php
+++ b/resources/views/layouts/menus/account.blade.php
@@ -56,14 +56,14 @@
                     @endforeach
                 </select>
             </form>
-            <div class="theme-switch d-inline-block position-relative cursor-pointer">
+            <div class="input-switch d-inline-block position-relative cursor-pointer">
                 <input type="checkbox" id="theme-switcher-account" class="theme-switcher" aria-label="Changer de thème">
                 <label for="theme-switcher-account">
                     <span class="switch"></span>
-                    <svg class="icon icon-moon" fill="currentColor" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <svg class="icon icon-on" fill="currentColor" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                         <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/>
                     </svg>
-                    <svg class="icon icon-sun" fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" id="sun" data-name="Line Color" xmlns="http://www.w3.org/2000/svg">
+                    <svg class="icon icon-off" fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" id="sun" data-name="Line Color" xmlns="http://www.w3.org/2000/svg">
                         <path d="M12,3V4M5.64,5.64l.7.7M3,12H4m1.64,6.36.7-.7M12,21V20m6.36-1.64-.7-.7M21,12H20M18.36,5.64l-.7.7" style="fill: none; stroke: rgb(44, 169, 188); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
                         <circle cx="12" cy="12" r="4" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></circle>
                     </svg>
diff --git a/resources/views/layouts/menus/sidebars/front.blade.php b/resources/views/layouts/menus/sidebars/front.blade.php
index ffc68511..6f357aac 100644
--- a/resources/views/layouts/menus/sidebars/front.blade.php
+++ b/resources/views/layouts/menus/sidebars/front.blade.php
@@ -143,32 +143,60 @@
                 <ul class="nav nav-pills flex-column text-center">
                     <x-sidebar-item route="{{route('pages.premium')}}" class="fw-bold bg-warning" color="white">
                         <i style="width: 24px" class="fa-solid fa-star"></i>
-                        <span class="text-sm">Premium</span>
+                        <span class="text-sm">{{config('app.name')}} Premium</span>
                     </x-sidebar-item>
                 </ul>
             @endif
             <hr class="w-90">
-            <div class="d-flex align-items-center gap-2 justify-content-evenly">
-                <form action="{{route('lang.update')}}" method="POST">
-                    @csrf()
-                    <select onchange="this.form.submit()" class="form-select form-select-sm text-sm" aria-label="Locale" name="locale">
-                        @foreach(config('languages') as $lang => $info)
-                            <option @selected(App::currentLocale() === $lang) value="{{$lang}}">{{$info['emoji']}} {{$info['label']}}</option>
-                        @endforeach
-                    </select>
-                </form>
-                <div class="theme-switch d-inline-block position-relative cursor-pointer">
-                    <input type="checkbox" id="theme-switcher-global" class="theme-switcher" aria-label="Changer de thème">
-                    <label for="theme-switcher-global">
-                        <span class="switch"></span>
-                        <svg class="icon icon-moon" fill="currentColor" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/>
-                        </svg>
-                        <svg class="icon icon-sun" fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" id="sun" data-name="Line Color" xmlns="http://www.w3.org/2000/svg">
-                            <path  d="M12,3V4M5.64,5.64l.7.7M3,12H4m1.64,6.36.7-.7M12,21V20m6.36-1.64-.7-.7M21,12H20M18.36,5.64l-.7.7" style="fill: none; stroke: rgb(44, 169, 188); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
-                            <circle cx="12" cy="12" r="4" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></circle>
-                        </svg>
-                    </label>
+            <div class="d-flex flex-column gap-3">
+                <div class="d-flex gap-2 align-items-center justify-content-evenly">
+                    <form action="{{route('lang.update')}}" method="POST">
+                        @csrf()
+                        <select onchange="this.form.submit()" class="form-select form-select-sm text-sm" aria-label="Locale" name="locale">
+                            @foreach(config('languages') as $lang => $info)
+                                <option @selected(App::currentLocale() === $lang) value="{{$lang}}">{{$info['emoji']}} {{$info['label']}}</option>
+                            @endforeach
+                        </select>
+                    </form>
+                    <div class="input-switch d-inline-block position-relative cursor-pointer">
+                        <input type="checkbox" id="theme-switcher-global" class="theme-switcher" aria-label="Changer de thème">
+                        <label for="theme-switcher-global">
+                            <span class="switch"></span>
+                            <svg class="icon icon-on" fill="currentColor" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/>
+                            </svg>
+                            <svg class="icon icon-off" fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" id="sun" data-name="Line Color" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M12,3V4M5.64,5.64l.7.7M3,12H4m1.64,6.36.7-.7M12,21V20m6.36-1.64-.7-.7M21,12H20M18.36,5.64l-.7.7" style="fill: none; stroke: rgb(44, 169, 188); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
+                                <circle cx="12" cy="12" r="4" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></circle>
+                            </svg>
+                        </label>
+                    </div>
+                </div>
+                <div class="d-flex gap-2 align-items-center justify-content-evenly">
+                    <span class="text-sm text-black">Videos auto-play</span>
+                    <div class="input-switch d-inline-block position-relative cursor-pointer">
+                        <input type="checkbox" id="autoplay-video" aria-label="Activer la lecture automatique" class="autoplay-switcher">
+                        <label for="autoplay-video">
+                            <span class="switch"></span>
+                            <svg
+                                class="icon icon-on"
+                                fill="currentColor"
+                                width="800px"
+                                height="800px"
+                                viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path d="M18.54,9,8.88,3.46a3.42,3.42,0,0,0-5.13,3V17.58A3.42,3.42,0,0,0,7.17,21a3.43,3.43,0,0,0,1.71-.46L18.54,15a3.42,3.42,0,0,0,0-5.92Zm-1,4.19L7.88,18.81a1.44,1.44,0,0,1-1.42,0,1.42,1.42,0,0,1-.71-1.23V6.42a1.42,1.42,0,0,1,.71-1.23A1.51,1.51,0,0,1,7.17,5a1.54,1.54,0,0,1,.71.19l9.66,5.58a1.42,1.42,0,0,1,0,2.46Z"/>
+                            </svg>
+                            <svg class="icon icon-off" fill="#000000" width="800px" height="800px" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M6.04995 2.74998C6.04995 2.44623 5.80371 2.19998 5.49995 2.19998C5.19619 2.19998 4.94995 2.44623 4.94995 2.74998V12.25C4.94995 12.5537 5.19619 12.8 5.49995 12.8C5.80371 12.8 6.04995 12.5537 6.04995 12.25V2.74998ZM10.05 2.74998C10.05 2.44623 9.80371 2.19998 9.49995 2.19998C9.19619 2.19998 8.94995 2.44623 8.94995 2.74998V12.25C8.94995 12.5537 9.19619 12.8 9.49995 12.8C9.80371 12.8 10.05 12.5537 10.05 12.25V2.74998Z"
+                                    fill="#000000"
+                                />
+                            </svg>
+                        </label>
+                    </div>
                 </div>
             </div>
             <hr class="w-90">
diff --git a/resources/views/videos/show.blade.php b/resources/views/videos/show.blade.php
index 39741157..4eadf08f 100644
--- a/resources/views/videos/show.blade.php
+++ b/resources/views/videos/show.blade.php
@@ -35,7 +35,6 @@ class="w-100 border border-1 rounded"
                         controlsList="nodownload"
                         poster="{{$video->thumbnail_url}}"
                         oncontextmenu="return false;"
-                        autoplay
                         playsinline
                     >
                         <source src="{{$video->file_url}}#t={{$t}}" type="{{Video::MIMETYPE}}">
@@ -427,7 +426,7 @@ class="btn btn-danger"
 
         // Autoplay
 
-        let autoplay = ((localStorage.getItem('autoplay') || false)  === 'true');
+        let autoplay = JSON.parse(localStorage.getItem('autoplay') || false);
 
         document.getElementById('autoplay').checked = autoplay;
 
@@ -456,5 +455,11 @@ function time (timecode) {
             })
         }
 
+        // Video autoplay
+        let autoplayVideo = JSON.parse(localStorage.getItem('autoplay-video') || true);
+
+        if (autoplayVideo) {
+            video.autoplay = true
+        }
     </script>
 @endPushIf