Merge branch 'ceremony-terminal' of ssh://github.com/unionlabs/union …

…into ceremony-terminal
unionlabs · Sep 26, 2024 · 68c6e1d · 68c6e1d
2 parents b95010a + 1f9262e
commit 68c6e1d
Showing 1 changed file with 64 additions and 38 deletions.
diff --git a/ceremony/src/routes/+layout.svelte b/ceremony/src/routes/+layout.svelte
@@ -8,8 +8,8 @@ import { start } from "$lib/client"
 import Timer from "$lib/components/Terminal/Timer.svelte"
 
 import "../styles/tailwind.css"
-import {onMount} from "svelte";
-import {getAverageTimes} from "$lib/supabase";
+import { onMount } from "svelte";
+import { getAverageTimes } from "$lib/supabase";
 
 let { children } = $props()
 
@@ -38,45 +38,71 @@ watch(
     contributor.setUserId(user.session?.user.id)
   }
 )
-</script>
+let showBootSequence = $state(true)
+let bootSeuenceVideoElement = $state<HTMLVideoElement | null>(null)
 
-<video 
-  loop
-  muted
-  autoplay
-  playsinline
-  oncanplay={function() {
-    this.autoplay = true
-  }}
-  onloadeddata={function() {
-    this.autoplay = true
-  }}
-  onloadedmetadata={function() {
-    this.muted = true
-  }}
-  data-video=""
->
-  <source src="https://pub-32dd1494f0fa423cb1013941269ecce9.r2.dev/glitch.webm" type="video/webm" />
-</video>
+onMount(() => bootSeuenceVideoElement?.play())
 
-<main class="flex w-full h-full overflow-hidden content flex-col items-center justify-center gap-4">
-  <Terminal>
-    {@render children()}
-  </Terminal>
-  <Timer />
-</main>
+const hideBootSequenceVideo= () => showBootSequence = false
+</script>
 
+{#if showBootSequence}
+  <video
+    muted
+    autoplay
+    playsinline
+    data-video="bootsequence"
+    onended={hideBootSequenceVideo}
+    bind:this={bootSeuenceVideoElement}
+    oncanplay={function() {
+      this.autoplay = true
+    }}
+    onloadeddata={function() {
+      this.autoplay = true
+    }}
+    onloadedmetadata={function() {
+      this.muted = true
+    }}
+  >
+    <source src="https://pub-32dd1494f0fa423cb1013941269ecce9.r2.dev/glitchboot.webm" type="video/webm" />
+  </video>
+{:else}
+  <video
+    loop
+    muted
+    autoplay
+    playsinline
+    data-video="glitch"
+    oncanplay={function() {
+      this.autoplay = true
+    }}
+    onloadeddata={function() {
+      this.autoplay = true
+    }}
+    onloadedmetadata={function() {
+      this.muted = true
+    }}
+  >
+    <source src="https://pub-32dd1494f0fa423cb1013941269ecce9.r2.dev/glitch.webm" type="video/webm" />
+  </video>
+  <main class="flex w-full h-full overflow-hidden content flex-col items-center justify-center gap-4">
+    <Terminal>
+      {@render children()}
+    </Terminal>
+    <Timer />
+  </main>
+{/if}
 
 <style lang="postcss">
-video[data-video] {
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-  width: 100vw;
-  height: 100vh;
-  min-width: 100%;
-  position: fixed;
-  min-height: 100%;
-  object-fit: cover;
-}
+  video[data-video] {
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    width: 100vw;
+    height: 100vh;
+    min-width: 100%;
+    position: fixed;
+    min-height: 100%;
+    object-fit: cover;
+  }
 </style>