fix(zkgm): test play

unionlabs · Dec 5, 2024 · 843e5cc · 843e5cc
1 parent bd33ecd
commit 843e5cc
Showing 1 changed file with 57 additions and 32 deletions.
diff --git a/zkgm-dev/src/routes/+page.svelte b/zkgm-dev/src/routes/+page.svelte
@@ -8,17 +8,29 @@
   let video: HTMLVideoElement | null = $state(null);
   let overlay: boolean = $state(true);
 
+  function handleTouch() {
+    if (!isPlaying) {
+      startVideo();
+    }
+  }
+
   async function startVideo() {
     if (video) {
+      // Reset video state
       video.muted = true;
       video.currentTime = 0;
-      video.preload = "metadata";
+      video.playsInline = true;
+      video.load();
 
       try {
         await video.play();
-        video.muted = false;
-        isPlaying = true;
-        overlay = false;
+        setTimeout(() => {
+          if (video) {
+            video.muted = false;
+            isPlaying = true;
+            overlay = false;
+          }
+        }, 100);
       } catch (error) {
         console.error('Error playing video:', error);
         isPlaying = false;
@@ -28,34 +40,47 @@
   }
 </script>
 
-<video
-        bind:this={video}
-        id="glitch-video"
-        loop
-        playsinline
-        preload="metadata"
-        class="fixed inset-0 w-full h-full object-cover -z-10"
-        data-video="glitch"
+<div
+        role="presentation"
+        ontouchstart={handleTouch}
+        class="w-full h-full"
 >
-  <track kind="captions" src="dsa">
-  <source src="https://pub-32dd1494f0fa423cb1013941269ecce9.r2.dev/zkgm-v1.mp4" type="video/webm"/>
-</video>
+  <video
+          bind:this={video}
+          id="glitch-video"
+          loop
+          playsinline
+          muted
+          preload="auto"
+          class="fixed inset-0 w-full h-full object-cover -z-10"
+          data-video="glitch"
+  >
+    <source
+            src="https://pub-32dd1494f0fa423cb1013941269ecce9.r2.dev/zkgm-v1.mp4"
+            type="video/mp4"
+    />
+  </video>
 
-{#if overlay}
-  <div class="fixed inset-0 bg-black flex items-center justify-center">
-    <button class="text-union-accent-500" onclick={startVideo} aria-label="Play video">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-24">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-        <path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z" />
-      </svg>
-    </button>
-  </div>
-{/if}
+  {#if overlay}
+    <div class="fixed inset-0 bg-black flex items-center justify-center">
+      <button
+              class="text-union-accent-500"
+              onclick={startVideo}
+              aria-label="Play video"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+          <path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z" />
+        </svg>
+      </button>
+    </div>
+  {/if}
 
-{#if isPlaying}
-  <div class="h-svh w-full flex flex-col justify-between items-center relative" in:fade>
-    <Bar/>
-    <Glitch text="ZKGM"/>
-    <Agents/>
-  </div>
-{/if}
+  {#if isPlaying}
+    <div class="h-svh w-full flex flex-col justify-between items-center relative" in:fade>
+      <Bar/>
+      <Glitch text="ZKGM"/>
+      <Agents/>
+    </div>
+  {/if}
+</div>