From: Stephen Cameron <stephen@cubedesigners.com>
Date: Mon, 20 Dec 2021 15:46:45 +0000 (+0100)
Subject: Done #4816 @1.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=07752310550b775fbbac3fc2a4c2de13827f5720;p=odl.git

Done #4816 @1.5
---

diff --git a/public/images/splash.mp4 b/public/images/splash.mp4
new file mode 100644
index 0000000..3468e54
Binary files /dev/null and b/public/images/splash.mp4 differ
diff --git a/resources/views/front/splash.blade.php b/resources/views/front/splash.blade.php
index 6c91bd4..d853bb9 100644
--- a/resources/views/front/splash.blade.php
+++ b/resources/views/front/splash.blade.php
@@ -9,22 +9,24 @@
 
     {{-- Title + Illustration --}}
     <div x-data="{ shown: false }" x-intersect="shown = true"
-         class="h-screen flex items-center"
+         class="h-screen flex items-center z-10"
          x-cloak>
 
-        {{-- Background Image --}}
-        <div x-show="shown"
-             x-transition:enter="ease-out-quint"
-             x-transition:enter-start="translate-y-full"
-             x-transition:enter-end="translate-y-0"
-             class="absolute w-full h-full -z-1 bg-bottom bg-no-repeat"
-             style="background-image: url({{ asset('images/splash-bg.jpg') }});
-                    background-size: 100% auto;
-                    transition-duration: 2500ms;
-                    transition-delay: 900ms;">
+        {{-- Background Video --}}
+        <div class="absolute w-full h-screen top-0 left-0 -z-1">
+            <video playsinline
+                   muted
+                   preload="auto"
+                   data-delay="1000" {{-- How long in milliseconds to wait before starting the video --}}
+                   id="background_video"
+                   class="w-full absolute left-0 bottom-0">
+                <source src="{{ asset('images/splash.mp4') }}" type="video/mp4">
+            </video>
         </div>
 
-        <x-link href="/accueil" class="w-full max-h-[90vh] flex flex-col items-center justify-around">
+        <x-link href="/accueil"
+                id="home_link"
+                class="w-full max-h-[90vh] flex flex-col items-center justify-around">
             <img x-show="shown"
                  x-transition.opacity.scale.75.origin.bottom.duration.1000ms
                  class="max-w-[488px] mb-16"
@@ -40,3 +42,27 @@
     </div>
 
 @endsection
+
+@push('after_scripts')
+    <script>
+        // Delay start of video
+        const startVideo = async (video) => {
+            try {
+                await video.play();
+                video.setAttribute('autoplay', true);
+            } catch (err) {
+                console.warn(err, 'Error playing video');
+            }
+        }
+
+        //========================================================
+
+        const video = document.querySelector('#background_video');
+
+        // Trigger click on main link when video ends
+        video.addEventListener('ended', () => document.querySelector('#home_link').click());
+
+        // Start video after a certain delay
+        setTimeout(() => startVideo(video), video.dataset?.delay);
+    </script>
+@endpush