From 8713443665bc12bf60c7e4778776f457125fcb67 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Tue, 30 Jun 2026 10:52:07 +0200
Subject: [PATCH] feat(video): use Plyr for the gallery video player

Swaps the bare <video> element for a Plyr-wrapped player so playback controls match a consistent, cleaner skin. The instance is created per source and destroyed on unmount, so the lightbox stops playback when you navigate away.
---
 client/package.json                           |  1 +
 client/src/components/Journey/VideoPlayer.tsx | 45 ++++++++++-------
 package-lock.json                             | 49 +++++++++++++++++++
 3 files changed, 78 insertions(+), 17 deletions(-)

diff --git a/client/package.json b/client/package.json
index d2c72c09f..435bed13f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -38,6 +38,7 @@
     "mapbox-gl": "^3.22.0",
     "maplibre-gl": "^5.24.0",
     "marked": "^18.0.0",
+    "plyr": "^3.8.4",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-dropzone": "^14.4.1",
diff --git a/client/src/components/Journey/VideoPlayer.tsx b/client/src/components/Journey/VideoPlayer.tsx
index 3bf5342fc..98a643161 100644
--- a/client/src/components/Journey/VideoPlayer.tsx
+++ b/client/src/components/Journey/VideoPlayer.tsx
@@ -1,11 +1,13 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
 
 /**
- * Lightweight video player for gallery/lightbox playback (#823). Uses the native
- * <video> element with controls — local videos stream with HTTP Range (seeking
- * works out of the box) and the source carries the correct video MIME from the
- * server. Kept as a thin wrapper so the player can later be re-skinned (e.g. Plyr)
- * without touching every call site.
+ * Video player for gallery/lightbox playback (#823), built on Plyr over a native
+ * <video>. Local videos stream with HTTP Range (seeking works out of the box) and
+ * the source carries the correct video MIME from the server. The Plyr instance is
+ * created once per mounted source and destroyed on unmount, so navigating away in
+ * the lightbox stops playback.
  */
 export default function VideoPlayer({
   src,
@@ -18,23 +20,32 @@ export default function VideoPlayer({
   autoPlay?: boolean
   style?: React.CSSProperties
 }): React.ReactElement {
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    const el = videoRef.current
+    if (!el) return
+    const player = new Plyr(el, {
+      controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
+      autoplay: autoPlay,
+      // Keep playback inline so the lightbox stays in control on mobile.
+      clickToPlay: true,
+    })
+    return () => { try { player.destroy() } catch { /* already torn down */ } }
+  }, [src, autoPlay])
+
   return (
-    <video
-      key={src}
-      src={src}
-      poster={poster}
-      controls
-      playsInline
-      autoPlay={autoPlay}
-      preload="metadata"
+    <div
       style={{
-        maxWidth: '92vw',
+        width: 'min(92vw, 1100px)',
         maxHeight: '92vh',
         borderRadius: 4,
-        background: '#000',
+        overflow: 'hidden',
         animation: 'fadeIn 0.15s ease',
         ...style,
       }}
-    />
+    >
+      <video ref={videoRef} src={src} poster={poster} playsInline controls preload="metadata" />
+    </div>
   )
 }
diff --git a/package-lock.json b/package-lock.json
index a9f1d51d4..3711a56ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
         "mapbox-gl": "^3.22.0",
         "maplibre-gl": "^5.24.0",
         "marked": "^18.0.0",
+        "plyr": "^3.8.4",
         "react": "^19.2.6",
         "react-dom": "^19.2.6",
         "react-dropzone": "^14.4.1",
@@ -9439,6 +9440,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/core-js": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz",
+      "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.49.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.49.0.tgz",
@@ -9564,6 +9576,12 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==",
+      "license": "MIT"
+    },
     "node_modules/data-urls": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
@@ -13484,6 +13502,12 @@
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       }
     },
+    "node_modules/loadjs": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.3.0.tgz",
+      "integrity": "sha512-vNX4ZZLJBeDEOBvdr2v/F+0aN5oMuPu7JTqrMwp+DtgK+AryOlpy6Xtm2/HpNr+azEa828oQjOtWsB6iDtSfSQ==",
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -15769,6 +15793,19 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/plyr": {
+      "version": "3.8.4",
+      "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.8.4.tgz",
+      "integrity": "sha512-DrzLbK9Wol3zeiuZCleD9aUOl0KAaBHR9H6WVVVYPZ4Ya+LYxUFTgSF1jooHcMQCv96Ws96wCaZzIoP3bES8pQ==",
+      "license": "MIT",
+      "dependencies": {
+        "core-js": "^3.45.1",
+        "custom-event-polyfill": "^1.0.7",
+        "loadjs": "^4.3.0",
+        "rangetouch": "^2.0.1",
+        "url-polyfill": "^1.1.13"
+      }
+    },
     "node_modules/png-js": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/png-js/-/png-js-2.0.0.tgz",
@@ -16562,6 +16599,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/rangetouch": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz",
+      "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==",
+      "license": "MIT"
+    },
     "node_modules/raw-body": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
@@ -19703,6 +19746,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-polyfill": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.14.tgz",
+      "integrity": "sha512-p4f3TTAG6ADVF3mwbXw7hGw+QJyw5CnNGvYh5fCuQQZIiuKUswqcznyV3pGDP9j0TSmC4UvRKm8kl1QsX1diiQ==",
+      "license": "MIT"
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",