Add screen video

src/lib/components/Product.svelte

@@ -163,8 +163,6 @@
   }
 
   .preview {
-    border: 1px solid rgba(0, 0, 0, 0.12);
-
     & img {
       display: block;
       margin: 0 auto;

src/lib/data/products.js

@@ -11,7 +11,7 @@ export const products = {
       "/src/lib/images/products/comma-four/four_angled.png",
       "/src/lib/images/products/comma-four/four_back.png",
       "/src/lib/images/products/comma-four/four_side.png",
-      "/src/lib/images/products/comma-four/remount2.png"
+      "/src/lib/images/products/comma-four/remount.png"
     ],
     notes: [],
     description: `

src/routes/+page.svelte

@@ -8,7 +8,7 @@
   import Grid from "$lib/components/Grid.svelte";
   import { vehicleCountText } from '$lib/constants/vehicles.js';
 
-  import DeviceImage from "$lib/images/products/comma-four/four_screen_on.png";
+  import DeviceImage from "$lib/images/products/comma-four/four_dark.png";
   import LaneCenteringIcon from "$lib/icons/features/lane-centering.svg?raw";
   import AdaptiveCruiseIcon from "$lib/icons/features/adaptive-cruise.svg?raw";
   import OtaUpdatesIcon from "$lib/icons/features/ota-updates.svg?raw";
@@ -17,35 +17,54 @@
   import RecordingsIcon from "$lib/icons/features/recordings.svg?raw";
 
   const HeroVideo = "/videos/hero-landscape/hero-landscape.m3u8";
+  const ScreenVideo = "/videos/screen-video/screen-video.m3u8";
 
   let videoElement;
   let videoReady = false;
+  let screenVideoElement;
+  let screenVideoReady = false;
 
   // Hardcode GitHub star count (similar to contributors on openpilot page)
   const githubStars = 50000;
 
+  function initializeHLS(videoEl, src, onReady) {
+    if (Hls.isSupported()) {
+      const hls = new Hls();
+      hls.loadSource(src);
+      hls.attachMedia(videoEl);
+      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+        if (onReady) onReady();
+      });
+      return hls;
+    } else if (videoEl.canPlayType('application/vnd.apple.mpegurl')) {
+      videoEl.src = src;
+      videoEl.addEventListener('loadedmetadata', () => {
+        if (onReady) onReady();
+      });
+      return null;
+    }
+    return null;
+  }
+
   onMount(async () => {
-    // Initialize HLS.js
+    // Initialize landscape video
     if (videoElement) {
-      // Show video once it starts playing
       videoElement.addEventListener('playing', () => {
         videoReady = true;
       });
+      initializeHLS(videoElement, HeroVideo, () => {
+        videoElement.play();
+      });
+    }
 
-      if (Hls.isSupported()) {
-        const hls = new Hls();
-        hls.loadSource(HeroVideo);
-        hls.attachMedia(videoElement);
-        hls.on(Hls.Events.MANIFEST_PARSED, () => {
-          videoElement.play();
-        });
-      } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
-        // Native HLS support (Safari)
-        videoElement.src = HeroVideo;
-        videoElement.addEventListener('loadedmetadata', () => {
-          videoElement.play();
-        });
-      }
+    // Initialize screen video
+    if (screenVideoElement) {
+      screenVideoElement.addEventListener('playing', () => {
+        screenVideoReady = true;
+      });
+      initializeHLS(screenVideoElement, ScreenVideo, () => {
+        screenVideoElement.play();
+      });
     }
   });
 
@@ -77,11 +96,23 @@
     <h1>comma four</h1>
     <h2 class="muted">An AI upgrade for your car</h2>
     <Grid columns={2} rowGap="3rem">
-      <img
-        src={DeviceImage}
-        loading="lazy"
-        alt="comma four device"
-      />
+      <div class="device-image-container">
+        <img
+          src={DeviceImage}
+          alt="comma four device"
+        />
+        <video
+          bind:this={screenVideoElement}
+          class:ready={screenVideoReady}
+          poster="/videos/screen-video/poster.jpg"
+          autoplay
+          muted
+          loop
+          playsinline
+          draggable="false"
+          class="screen-video-overlay"
+        />
+      </div>
       <div>
         <div class="mb-2">
           <Grid columns={2} columnGap="1rem" rowGap="1.25rem" size="small" wrapMode="none">
@@ -323,4 +354,31 @@
       }
     }
   }
+
+  .device-image-container {
+    position: relative;
+    display: inline-block;
+    margin: 0 -2rem 0;
+
+    & img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+
+    & .screen-video-overlay {
+      position: absolute;
+      left: 23.21%; /* 780 / 3360 */
+      top: 63.97%; /* 1433 / 2240 */
+      width: 40.21%; /* 1351 / 3360 */
+      height: 25.80%; /* 578 / 2240 */
+      mix-blend-mode: screen;
+      opacity: 0;
+      transition: opacity 0.3s ease-in;
+
+      &.ready {
+        opacity: 1;
+      }
+    }
+  }
 </style>

static/videos/screen-video/screen-video.m3u8

@@ -0,0 +1,76 @@
+#EXTM3U
+#EXT-X-VERSION:3
+#EXT-X-MEDIA-SEQUENCE:0
+#EXT-X-ALLOW-CACHE:YES
+#EXT-X-TARGETDURATION:3
+#EXTINF:2.050000,
+part_c6d9f059_000.ts
+#EXTINF:2.000000,
+part_c6d9f059_001.ts
+#EXTINF:2.000000,
+part_c6d9f059_002.ts
+#EXTINF:2.000000,
+part_c6d9f059_003.ts
+#EXTINF:2.000000,
+part_c6d9f059_004.ts
+#EXTINF:2.000000,
+part_c6d9f059_005.ts
+#EXTINF:2.000000,
+part_c6d9f059_006.ts
+#EXTINF:2.000000,
+part_c6d9f059_007.ts
+#EXTINF:2.000000,
+part_c6d9f059_008.ts
+#EXTINF:2.000000,
+part_c6d9f059_009.ts
+#EXTINF:2.000000,
+part_c6d9f059_010.ts
+#EXTINF:2.000000,
+part_c6d9f059_011.ts
+#EXTINF:2.000000,
+part_c6d9f059_012.ts
+#EXTINF:2.000000,
+part_c6d9f059_013.ts
+#EXTINF:2.000000,
+part_c6d9f059_014.ts
+#EXTINF:2.000000,
+part_c6d9f059_015.ts
+#EXTINF:2.000000,
+part_c6d9f059_016.ts
+#EXTINF:2.000000,
+part_c6d9f059_017.ts
+#EXTINF:2.000000,
+part_c6d9f059_018.ts
+#EXTINF:2.000000,
+part_c6d9f059_019.ts
+#EXTINF:2.000000,
+part_c6d9f059_020.ts
+#EXTINF:2.000000,
+part_c6d9f059_021.ts
+#EXTINF:2.000000,
+part_c6d9f059_022.ts
+#EXTINF:2.000000,
+part_c6d9f059_023.ts
+#EXTINF:2.000000,
+part_c6d9f059_024.ts
+#EXTINF:2.000000,
+part_c6d9f059_025.ts
+#EXTINF:2.000000,
+part_c6d9f059_026.ts
+#EXTINF:2.000000,
+part_c6d9f059_027.ts
+#EXTINF:2.000000,
+part_c6d9f059_028.ts
+#EXTINF:2.000000,
+part_c6d9f059_029.ts
+#EXTINF:2.000000,
+part_c6d9f059_030.ts
+#EXTINF:2.000000,
+part_c6d9f059_031.ts
+#EXTINF:2.000000,
+part_c6d9f059_032.ts
+#EXTINF:2.000000,
+part_c6d9f059_033.ts
+#EXTINF:1.666667,
+part_c6d9f059_034.ts
+#EXT-X-ENDLIST