wtf

Author: ProkopRandacek

static/kvh/app.js

@@ -1,23 +1,31 @@
-async function fetchNthVideo(index) {
-    try {
-        const response = await fetch();
-        if (response.ok) {
-            const blob = await response.blob();
-            return URL.createObjectURL(blob);
-        } 
-    } catch (error) { }
-    return null; // No more videos
-}
 
 function loadVideo(src) {
     return new Promise((resolve, reject) => {
         const video = document.createElement('video');
+
+        // Enhanced mobile video attributes
         video.autoplay = true;
         video.loop = true;
         video.muted = true;
         video.playsInline = true;
-        video.onloadeddata = () => resolve(video);
-        video.onerror = reject;
+        video.controls = false;
+        video.preload = 'metadata';
+
+        // Add webkit-specific attributes for iOS
+        video.setAttribute('webkit-playsinline', 'true');
+        video.setAttribute('x-webkit-airplay', 'allow');
+
+        // Enhanced error handling and loading events
+        video.onloadeddata = () => {
+            // Force play on mobile devices
+            video.play().catch(() => {});
+            resolve(video);
+        };
+
+        video.onerror = (e) => {
+            reject(e);
+        };
+
         video.src = src;
     });
 }
@@ -76,6 +84,17 @@ function spawnVideo(video) {
     video.style.top = y + 'px';
     setBallSize(video, radius);
 
+    // Add additional mobile-specific styling
+    video.style.zIndex = '1';
+    video.style.display = 'block';
+
+    // Ensure video plays after being added to DOM
+    setTimeout(() => {
+        if (video.paused) {
+            video.play().catch(() => {});
+        }
+    }, 100);
+
     physicsData.push({
         x: x,
         y: y,
@@ -92,12 +111,14 @@ function spawnVideo(video) {
 let currentIndex = 0;
 
 async function startNextDownload(i) {
-    loadVideo(`/api/videos/${i}`)
-        .then(spawnVideo)
-        .then(function() { setTimeout(function(){startNextDownload(i+1);},2000);})
-        .catch((error) => {
-            setTimeout( function() { startNextDownload(i); }, 2000);
-        });
+    try {
+        const video = await loadVideo(`/api/videos/${i}`);
+        spawnVideo(video);
+        setTimeout(() => startNextDownload(i + 1), 2000);
+    } catch (error) {
+        // Always retry the same video after 2 seconds
+        setTimeout(() => startNextDownload(i), 2000);
+    }
 }
 
 function updatePhysics() {
@@ -261,6 +282,39 @@ function updateBallRadius() {
 
 window.addEventListener('resize', updateBallRadius);
 
+// Mobile-specific initialization
+function initializeMobileSupport() {
+    // Add touch event to enable video playback on mobile
+    const enableVideoPlayback = () => {
+        // Try to play any existing videos
+        const videos = document.querySelectorAll('video');
+        videos.forEach(video => {
+            if (video.paused) {
+                video.play().catch(() => {});
+            }
+        });
+        // Remove the event listeners after first interaction
+        document.removeEventListener('touchstart', enableVideoPlayback);
+        document.removeEventListener('click', enableVideoPlayback);
+    };
+
+    // Listen for first user interaction
+    document.addEventListener('touchstart', enableVideoPlayback, { once: true });
+    document.addEventListener('click', enableVideoPlayback, { once: true });
+
+    // Prevent default touch behaviors that might interfere
+    document.addEventListener('touchmove', (e) => {
+        e.preventDefault();
+    }, { passive: false });
+
+    document.addEventListener('touchend', (e) => {
+        e.preventDefault();
+    }, { passive: false });
+}
+
+// Initialize mobile support
+initializeMobileSupport();
+
 // Initialize the app
 startNextDownload(0);
 setInterval(updatePhysics, 16);

static/kvh/index.html

@@ -34,6 +34,15 @@
 				border-radius: 50%;
 				object-fit: cover;
 				pointer-events: none;
+				/* Mobile-specific video fixes */
+				-webkit-transform: translateZ(0);
+				transform: translateZ(0);
+				backface-visibility: hidden;
+				-webkit-backface-visibility: hidden;
+				/* Ensure video content is visible */
+				background: transparent;
+				/* Force hardware acceleration */
+				will-change: transform;
 			}
 		</style>
 	</head>