Merge branch 'main' into feature/film-timeline

app/static/css/partials/_menu.scss

@@ -1,6 +1,6 @@
 
 .topnav {
-  background-color: #333;
+  background-color: #333e;
   position: relative;
   height: 68px;
   padding: var(--spacing-2);

app/static/css/partials/_titleanimation.scss

@@ -1,4 +1,9 @@
-
+:root {
+	--animated-title-color-1: #6666ff;
+	--animated-title-color-2: #0099ff;
+	--animated-title-color-3: #ffff00;
+	--animated-title-color-4: #ff3399;
+}
 @keyframes animated_title_animation {
     0%,100% {
         background-position: 0 0;
@@ -12,7 +17,8 @@
 .animated-title {
   .text {
     //background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
-    background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
+    background: linear-gradient(to right, var(--animated-title-color-1), var(--animated-title-color-2) , var(--animated-title-color-3), var(--animated-title-color-4));
+    -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     animation: animated_title_animation 60s ease-in-out infinite;

app/static/js/animation.js

@@ -8,5 +8,5 @@ document.querySelectorAll('.animated-title').forEach(element => {
     var randomDuration = Math.random() * animationDuration;
     element.querySelectorAll('.text').forEach(text => {
         text.style.animationDelay = -randomDuration + 's';
-    }
+    })
 })

app/static/js/ascroll.js

@@ -2,6 +2,7 @@ var cache = cache || {}
 var layer = 'descriptions'
 var baseURL = 'https://pad.ma'
 var imageResolution = 480
+var videoExtension
 
 async function pandoraAPI(action, data) {
     var url = baseURL + '/api/'
@@ -21,13 +22,29 @@ async function pandoraAPI(action, data) {
     return cache[key]
 }
 
+function setVideoSrc(video, src) {
+    var ext
+    if (!videoExtension) {
+        [
+            ['video/mp4; codecs="avc1.42E01E, mp4a.40.2"', '.mp4'],
+            ['video/webm; codecs="vp8, vorbis"', '.webm'],
+        ].forEach(opt => {
+            if (videoExtension) { return }
+            if (video.canPlayType(opt[0]).replace('no', '')) {
+                videoExtension = opt[1]
+            }
+        })
+    }
+    video.src = src.replace('.webm', videoExtension)
+}
+
 function updatePlayer(video, frame, currentTime, out, src) {
     var rect = frame.getBoundingClientRect();
     video.style.opacity = 0
     video.style.top =  (rect.top + window.scrollY) + 'px'
     video.style.display = 'block';
     if (src) {
-        video.src = src
+        setVideoSrc(video, src)
     }
     //video.poster = frame.querySelector('img').src
     var muted = video.muted
@@ -225,7 +242,7 @@ function loadItem(config) {
         var video = document.createElement('video')
         video.classList.add('player')
         video.muted = true
-        video.src = `${baseURL}/${config.item}/480p.webm`
+        setVideoSrc(video, `${baseURL}/${config.item}/480p.webm`)
         video.addEventListener('timeupdate', timeupdate)
         video.addEventListener('touchstart', showOverlay)
         video.addEventListener('mouseover', showOverlay)

app/static/js/film.js

@@ -1,7 +1,28 @@
+var videoExtension
+
+function setVideoSrc(video, src) {
+    var ext
+    if (!videoExtension) {
+        [
+            ['video/mp4; codecs="avc1.42E01E, mp4a.40.2"', '.mp4'],
+            ['video/webm; codecs="vp8, vorbis"', '.webm'],
+        ].forEach(opt => {
+            if (videoExtension) { return }
+            if (video.canPlayType(opt[0]).replace('no', '')) {
+                videoExtension = opt[1]
+            }
+        })
+    }
+    video.src = src.replace('.webm', videoExtension)
+}
+
 document.querySelector('a#play-fullscreen').addEventListener('click', event => {
+    event.preventDefault()
+    event.stopPropagation()
     var video = document.createElement('video')
     video.classList.add('player')
-    video.src = 'https://pad.ma/' + film.id + '/480p.webm'
+    setVideoSrc(video, 'https://pad.ma/' + film.id + '/480p.webm')
+    console.log(video.src)
     video.controls = true
     document.querySelector('main').appendChild(video)
     video.style.display = 'none'
@@ -32,7 +53,4 @@ document.querySelector('a#play-fullscreen').addEventListener('click', event => {
         }
     });
     video.play()
-    
-    event.preventDefault()
-    event.stopPropagation()
 })