feat(frontend): VideoPage react-player v3, fix data.videos, route /video/:id

2026-03-14 08:12:08 +01:00
parent 5d4bab7d99
commit 87d076313c
5 changed files with 751 additions and 6 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,6 +10,7 @@
      "dependencies": {
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
+        "react-player": "^3.4.0",
        "react-router-dom": "^6.23.0"
      },
      "devDependencies": {
@@ -759,6 +760,74 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@mux/mux-data-google-ima": {
+      "version": "0.3.15",
+      "resolved": "https://registry.npmjs.org/@mux/mux-data-google-ima/-/mux-data-google-ima-0.3.15.tgz",
+      "integrity": "sha512-5u5VIWI6V0urhrZzka3nZdCcVL/po2LxWO7lW3QHeWmCjpkudY+OmLqzdbLLcqEXHsURRM2+M6O2k6LNVFNnLw==",
+      "license": "MIT",
+      "dependencies": {
+        "mux-embed": "5.17.10"
+      }
+    },
+    "node_modules/@mux/mux-player": {
+      "version": "3.11.5",
+      "resolved": "https://registry.npmjs.org/@mux/mux-player/-/mux-player-3.11.5.tgz",
+      "integrity": "sha512-VIgYxaTxmBQG4XkeLhV6DzUx+wPa3m3QkV2CFmf8CiilFIlFp4RC2sMA+XVchifBsR2HK72YKPP5ar20Hijgpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@mux/mux-video": "0.30.3",
+        "@mux/playback-core": "0.33.2",
+        "media-chrome": "~4.17.2",
+        "player.style": "^0.3.0"
+      }
+    },
+    "node_modules/@mux/mux-player-react": {
+      "version": "3.11.5",
+      "resolved": "https://registry.npmjs.org/@mux/mux-player-react/-/mux-player-react-3.11.5.tgz",
+      "integrity": "sha512-Ijs6HP1JwFD+I48u6pkP6MUXCHxbk4zbtz0Dyo9OKg2Qr0Z3OZWZt8JzxCRQzOvhtIY5AG2z5fGsyT5H0+BYBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@mux/mux-player": "3.11.5",
+        "@mux/playback-core": "0.33.2",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^17.0.0-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0",
+        "react": "^17.0.2 || ^17.0.0-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0",
+        "react-dom": "^17.0.2 || ^17.0.2-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mux/mux-video": {
+      "version": "0.30.3",
+      "resolved": "https://registry.npmjs.org/@mux/mux-video/-/mux-video-0.30.3.tgz",
+      "integrity": "sha512-EHlv/AjcfQadZeASM7wjjGBlVVXjMa/UP+/cRqbojF6F5JlADfQAHsAtwAisIQ7uCHy3GmdE4EwEIWNv/YZ5kA==",
+      "license": "MIT",
+      "dependencies": {
+        "@mux/mux-data-google-ima": "^0.3.4",
+        "@mux/playback-core": "0.33.2",
+        "castable-video": "~1.1.11",
+        "custom-media-element": "~1.4.5",
+        "media-tracks": "~0.3.4"
+      }
+    },
+    "node_modules/@mux/playback-core": {
+      "version": "0.33.2",
+      "resolved": "https://registry.npmjs.org/@mux/playback-core/-/playback-core-0.33.2.tgz",
+      "integrity": "sha512-4g8b92vuiSWXJ+4qEufGZYk6tInmJ8dJStTV4VO6Rub93l7d9vNEDR/nryMuSQ54g2fMHN57F/2fuVaiVdRgSg==",
+      "license": "MIT",
+      "dependencies": {
+        "hls.js": "~1.6.15",
+        "mux-embed": "^5.16.1"
+      }
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1163,6 +1232,129 @@
        "win32"
      ]
    },
+    "node_modules/@svta/cml-608": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-608/-/cml-608-1.0.1.tgz",
+      "integrity": "sha512-Y/Ier9VPUSOBnf0bJqdDyTlPrt4dDB+jk5mYHa1bnD2kcRl8qn7KkW3PRuj4w1aVN+BS2eHmsLxodt7P2hylUg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@svta/cml-cmcd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-cmcd/-/cml-cmcd-1.0.1.tgz",
+      "integrity": "sha512-eox305g+QUJgXqOLVrbgxeQHCgl90ewwQ9O2bIoo7m+hanR8Xswu5CknFnT5qqIbLOHfw80ug+raycoAFHTQ+w==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-cta": "1.0.1",
+        "@svta/cml-structured-field-values": "1.0.1",
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
+    "node_modules/@svta/cml-cmsd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-cmsd/-/cml-cmsd-1.0.1.tgz",
+      "integrity": "sha512-+nIB8PuSfb/qw+xGaArPhNqPm84tBJUbe3H1DnPL5QUsjSUI7mUIUQwAtRV1ZdEu0+80g9i0op79woB0OIwr/g==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-cta": "1.0.1",
+        "@svta/cml-structured-field-values": "1.0.1",
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
+    "node_modules/@svta/cml-cta": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-cta/-/cml-cta-1.0.1.tgz",
+      "integrity": "sha512-jcXqNIPv26bmFxIOFh8/c3+6WLH4qBjKpq9qTQcggDPoHuV1YBydMsJLOnYPDeK8rNMKcAkFLbnDRvyJthu5yw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-structured-field-values": "1.0.1",
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
+    "node_modules/@svta/cml-dash": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-dash/-/cml-dash-1.0.1.tgz",
+      "integrity": "sha512-lYnD1I7FUbbQND+xICI+kcRaRXuT+whKk27R8m8me5VMVu2sMsAMc7Yui6l9sxw2cBKt8pSETPYRm/1+n4LZkw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
+    "node_modules/@svta/cml-id3": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-id3/-/cml-id3-1.0.1.tgz",
+      "integrity": "sha512-90fGlL1qRI88CcaB89k6NG6cC3kky4Eu2jwqU4HefqK+S5k2OASUxf8JXkGz+DsdaiY7sh51vGPYdolfBZS7ug==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
+    "node_modules/@svta/cml-request": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-request/-/cml-request-1.0.1.tgz",
+      "integrity": "sha512-enL19BuXUjFkDDDF9jdNwUclMNPRsagnjGAetVC7xcmpDMpEx+ZLgsDip6BFNg5p6izSEk/OyujTWW1r8bDNiA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-utils": "1.0.1",
+        "@svta/cml-xml": "1.0.1"
+      }
+    },
+    "node_modules/@svta/cml-structured-field-values": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-structured-field-values/-/cml-structured-field-values-1.0.1.tgz",
+      "integrity": "sha512-Kibciki59Pon3Pn/sl5uyrbJcSpZQDKqdCfDrokBvOdLoqqcd0oFrkEPsZBiuuIODX1CB80612xe8hopeFDyBA==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
+    "node_modules/@svta/cml-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-utils/-/cml-utils-1.0.1.tgz",
+      "integrity": "sha512-kso3curTJfp00I1mKFoBliBApjn4aPE+wF8cPucf7TrSDVWZDeLLuF14ASmUE9m7rnrqTTK4878VvmXaXcCCfQ==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@svta/cml-xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-xml/-/cml-xml-1.0.1.tgz",
+      "integrity": "sha512-11LkJa5kDEcsRMWkVI1ABH3KLCxGoiSVe4kQ293ItVj8ncTTQ7htmCGiJDjS+Cmy35UgF3e/vc0ysJIiWRTx2g==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
    "node_modules/@types/babel__core": {
      "version": "7.20.5",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1219,14 +1411,12 @@
      "version": "15.7.15",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/@types/react": {
      "version": "18.3.28",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz",
      "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@types/prop-types": "*",
@@ -1243,6 +1433,16 @@
        "@types/react": "^18.0.0"
      }
    },
+    "node_modules/@vimeo/player": {
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/@vimeo/player/-/player-2.29.0.tgz",
+      "integrity": "sha512-9JjvjeqUndb9otCCFd0/+2ESsLk7VkDE6sxOBy9iy2ukezuQbplVRi+g9g59yAurKofbmTi/KcKxBGO/22zWRw==",
+      "license": "MIT",
+      "dependencies": {
+        "native-promise-only": "0.8.1",
+        "weakmap-polyfill": "2.0.4"
+      }
+    },
    "node_modules/@vitejs/plugin-react": {
      "version": "4.7.0",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -1342,6 +1542,45 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/bcp-47": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-2.1.0.tgz",
+      "integrity": "sha512-9IIS3UPrvIa1Ej+lVDdDwO7zLehjqsaByECw0bu2RRGP73jALm6FYbzI5gWbgHLvNdkvfXB5YrSbocZdOS0c0w==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/bcp-47-match": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz",
+      "integrity": "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/bcp-47-normalize": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/bcp-47-normalize/-/bcp-47-normalize-2.3.0.tgz",
+      "integrity": "sha512-8I/wfzqQvttUFz7HVJgIZ7+dj3vUaIyIxYXaTRP1YWoSDfzt6TUmxaKZeuXR62qBmYr+nvuWINFRl6pZ5DlN4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "bcp-47": "^2.0.0",
+        "bcp-47-match": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/binary-extensions": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -1433,6 +1672,24 @@
      ],
      "license": "CC-BY-4.0"
    },
+    "node_modules/castable-video": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/castable-video/-/castable-video-1.1.11.tgz",
+      "integrity": "sha512-LCRTK6oe7SB1SiUQFzZCo6D6gcEzijqBTVIuj3smKpQdesXM18QTbCVqWgh9MfOeQgTx/i9ji5jGcdqNPeWg2g==",
+      "license": "MIT",
+      "dependencies": {
+        "custom-media-element": "~1.4.5"
+      }
+    },
+    "node_modules/ce-la-react": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/ce-la-react/-/ce-la-react-0.3.2.tgz",
+      "integrity": "sha512-QJ6k4lOD/btI08xG8jBPxRCGXvCnusGGkTsiXk0u3NqUu/W+BXRnFD4PYjwtqh8AWmGa5LDbGk0fLQsqr0nSMA==",
+      "license": "BSD-3-Clause",
+      "peerDependencies": {
+        "react": ">=17.0.0"
+      }
+    },
    "node_modules/chokidar": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -1471,6 +1728,18 @@
        "node": ">= 6"
      }
    },
+    "node_modules/cloudflare-video-element": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/cloudflare-video-element/-/cloudflare-video-element-1.3.5.tgz",
+      "integrity": "sha512-zj9gjJa6xW8MNrfc4oKuwgGS0njRLpOlQjdifbuNxvy8k4Y3pKCyKCMG2XIsjd2iQGhgjS57b1P5VWdJlxcXBw==",
+      "license": "MIT"
+    },
+    "node_modules/codem-isoboxer": {
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/codem-isoboxer/-/codem-isoboxer-0.3.10.tgz",
+      "integrity": "sha512-eNk3TRV+xQMJ1PEj0FQGY8KD4m0GPxT487XJ+Iftm7mVa9WpPFDMWqPt+46buiP5j5Wzqe5oMIhqBcAeKfygSA==",
+      "license": "MIT"
+    },
    "node_modules/commander": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1505,9 +1774,49 @@
      "version": "3.2.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
      "license": "MIT"
    },
+    "node_modules/custom-media-element": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/custom-media-element/-/custom-media-element-1.4.5.tgz",
+      "integrity": "sha512-cjrsQufETwxjvwZbYbKBCJNvmQ2++G9AvT45zDi7NXL9k2PdVcs2h0jQz96J6G4TMKRCcEsoJ+QTgQD00Igtjw==",
+      "license": "MIT"
+    },
+    "node_modules/dash-video-element": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/dash-video-element/-/dash-video-element-0.3.1.tgz",
+      "integrity": "sha512-KSdCd6lqjum4LizHLtB2EGvaGr7YJU7SZekTTDHixRondaRNcm0t9W2V3I7/itNBzQwdDbC1cKkXryc8I8IViA==",
+      "license": "MIT",
+      "dependencies": {
+        "custom-media-element": "^1.4.5",
+        "dashjs": "^5.0.3",
+        "media-tracks": "^0.3.4"
+      }
+    },
+    "node_modules/dashjs": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/dashjs/-/dashjs-5.1.1.tgz",
+      "integrity": "sha512-BzNXlUgzEjhuZ5M5hlSp1qIyQHZ7NpXAR0loP9DAAFVZj/ntL1DHeZ7qp/L3bvI4rq50X5indkAZQ3zEHWJoCA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@svta/cml-608": "1.0.1",
+        "@svta/cml-cmcd": "1.0.1",
+        "@svta/cml-cmsd": "1.0.1",
+        "@svta/cml-dash": "1.0.1",
+        "@svta/cml-id3": "1.0.1",
+        "@svta/cml-request": "1.0.1",
+        "@svta/cml-xml": "1.0.1",
+        "bcp-47-match": "^2.0.3",
+        "bcp-47-normalize": "^2.3.0",
+        "codem-isoboxer": "0.3.10",
+        "fast-deep-equal": "3.1.3",
+        "html-entities": "^2.5.2",
+        "imsc": "^1.1.5",
+        "localforage": "^1.10.0",
+        "path-browserify": "^1.0.1",
+        "ua-parser-js": "^1.0.37"
+      }
+    },
    "node_modules/debug": {
      "version": "4.4.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -1596,6 +1905,12 @@
        "node": ">=6"
      }
    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
    "node_modules/fast-glob": {
      "version": "3.3.3",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -1724,6 +2039,78 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/hls-video-element": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/hls-video-element/-/hls-video-element-1.5.10.tgz",
+      "integrity": "sha512-FruzD03CaQlPlNKfXO1njPbo3jCSImAtFwX1OqgFbMllTQzdYqAHODiWan0q3mr1cYCONOWiAz2/nX+2qHHC+g==",
+      "license": "MIT",
+      "dependencies": {
+        "custom-media-element": "^1.4.5",
+        "hls.js": "^1.6.5",
+        "media-tracks": "^0.3.4"
+      }
+    },
+    "node_modules/hls.js": {
+      "version": "1.6.15",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz",
+      "integrity": "sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/html-entities": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz",
+      "integrity": "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
+    "node_modules/imsc": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/imsc/-/imsc-1.1.5.tgz",
+      "integrity": "sha512-V8je+CGkcvGhgl2C1GlhqFFiUOIEdwXbXLiu1Fcubvvbo+g9inauqT3l0pNYXGoLPBj3jxtZz9t+wCopMkwadQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "sax": "1.2.1"
+      }
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/is-binary-path": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1753,6 +2140,16 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -1828,6 +2225,15 @@
        "node": ">=6"
      }
    },
+    "node_modules/lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
    "node_modules/lilconfig": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -1848,6 +2254,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lie": "3.1.1"
+      }
+    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -1870,6 +2285,27 @@
        "yallist": "^3.0.2"
      }
    },
+    "node_modules/media-chrome": {
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/media-chrome/-/media-chrome-4.17.2.tgz",
+      "integrity": "sha512-o/IgiHx0tdSVwRxxqF5H12FK31A/A8T71sv3KdAvh7b6XeBS9dXwqvIFwlR9kdEuqg3n7xpmRIuL83rmYq8FTg==",
+      "license": "MIT",
+      "dependencies": {
+        "ce-la-react": "^0.3.2"
+      }
+    },
+    "node_modules/media-played-ranges-mixin": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/media-played-ranges-mixin/-/media-played-ranges-mixin-0.1.0.tgz",
+      "integrity": "sha512-zTsvkleu5sAyTsPVxDI+KUbCwy/lXwHgOPi3ER9S3lhtAWhGTQH6qxvfrVMym1cvoLU36SPbVr6Qe8Zxyc0WpA==",
+      "license": "MIT"
+    },
+    "node_modules/media-tracks": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/media-tracks/-/media-tracks-0.3.4.tgz",
+      "integrity": "sha512-5SUElzGMYXA7bcyZBL1YzLTxH9Iyw1AeYNJxzByqbestrrtB0F3wfiWUr7aROpwodO4fwnxOt78Xjb3o3ONNQg==",
+      "license": "MIT"
+    },
    "node_modules/merge2": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -1901,6 +2337,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/mux-embed": {
+      "version": "5.17.10",
+      "resolved": "https://registry.npmjs.org/mux-embed/-/mux-embed-5.17.10.tgz",
+      "integrity": "sha512-i+eaoezVxIEliYGWPsjQztrWbA8A3Rzwqhwv1WGuRrl2npx85jFYJV5y+cjh7FASPOjT+7zJTYCJfxmcbgM7Hg==",
+      "license": "MIT"
+    },
    "node_modules/mz": {
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -1932,6 +2374,12 @@
        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
      }
    },
+    "node_modules/native-promise-only": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/native-promise-only/-/native-promise-only-0.8.1.tgz",
+      "integrity": "sha512-zkVhZUA3y8mbz652WrL5x0fB0ehrBkulWT3TomAQ9iDtyXZvzKeEA6GPxAItBYeNYl5yngKRX612qHOhvMkDeg==",
+      "license": "MIT"
+    },
    "node_modules/node-releases": {
      "version": "2.0.36",
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.36.tgz",
@@ -1953,7 +2401,6 @@
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -1969,6 +2416,12 @@
        "node": ">= 6"
      }
    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "license": "MIT"
+    },
    "node_modules/path-parse": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -2016,6 +2469,31 @@
        "node": ">= 6"
      }
    },
+    "node_modules/player.style": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/player.style/-/player.style-0.3.1.tgz",
+      "integrity": "sha512-z/T8hJGaTkHT9vdXgWdOgF37eB1FV7/j52VXQZ2lgEhpru9oT8TaUWIxp6GoxTnhPBM4X6nSbpkAHrT7UTjUKg==",
+      "license": "MIT",
+      "workspaces": [
+        ".",
+        "site",
+        "examples/*",
+        "scripts/*",
+        "themes/*"
+      ],
+      "dependencies": {
+        "media-chrome": "~4.16.1"
+      }
+    },
+    "node_modules/player.style/node_modules/media-chrome": {
+      "version": "4.16.1",
+      "resolved": "https://registry.npmjs.org/media-chrome/-/media-chrome-4.16.1.tgz",
+      "integrity": "sha512-qtFlsy0lNDVCyVo//ZCAfRPKwgehfOYp6rThZzDUuZ5ypv41yqUfAxK+P9TOs+XSVWXATPTT2WRV0fbW0BH4vQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ce-la-react": "^0.3.2"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.5.8",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
@@ -2179,6 +2657,17 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
    "node_modules/queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2225,6 +2714,35 @@
        "react": "^18.3.1"
      }
    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-player": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-3.4.0.tgz",
+      "integrity": "sha512-QpQSHXtnMBKjQVNeaCYMtTVcynWQ0DDDhz/FJu1OR9PHLC1Aih94UqNstywzSHbJ6Oc7lI8/7kDDqcIvyTI6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@mux/mux-player-react": "^3.8.0",
+        "cloudflare-video-element": "^1.3.4",
+        "dash-video-element": "^0.3.0",
+        "hls-video-element": "^1.5.9",
+        "spotify-audio-element": "^1.0.3",
+        "tiktok-video-element": "^0.1.1",
+        "twitch-video-element": "^0.1.5",
+        "vimeo-video-element": "^1.6.1",
+        "wistia-video-element": "^1.3.5",
+        "youtube-video-element": "^1.8.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18 || ^19",
+        "react": "^17.0.2 || ^18 || ^19",
+        "react-dom": "^17.0.2 || ^18 || ^19"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.17.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -2391,6 +2909,12 @@
        "queue-microtask": "^1.2.2"
      }
    },
+    "node_modules/sax": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
+      "integrity": "sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==",
+      "license": "ISC"
+    },
    "node_modules/scheduler": {
      "version": "0.23.2",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -2420,6 +2944,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/spotify-audio-element": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/spotify-audio-element/-/spotify-audio-element-1.0.4.tgz",
+      "integrity": "sha512-QdKrJPkYCzaNwwz2vN2eDGyoW0KmQFmnwVprB41mpMzj4qujbqr6pegEchQeTn0b5PceKiLoVu0pp2QDpTcWnw==",
+      "license": "MIT"
+    },
    "node_modules/sucrase": {
      "version": "3.35.1",
      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
@@ -2443,6 +2973,12 @@
        "node": ">=16 || 14 >=14.17"
      }
    },
+    "node_modules/super-media-element": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/super-media-element/-/super-media-element-1.4.2.tgz",
+      "integrity": "sha512-9pP/CVNp4NF2MNlRzLwQkjiTgKKe9WYXrLh9+8QokWmMxz+zt2mf1utkWLco26IuA3AfVcTb//qtlTIjY3VHxA==",
+      "license": "MIT"
+    },
    "node_modules/supports-preserve-symlinks-flag": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -2517,6 +3053,12 @@
        "node": ">=0.8"
      }
    },
+    "node_modules/tiktok-video-element": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tiktok-video-element/-/tiktok-video-element-0.1.2.tgz",
+      "integrity": "sha512-w6TboLm236XJKKiIXIhCbYCnUxbixBbaAoty0etaEAZ/2kHkVIdfZdv2oouMU/HGMsWCHI/VjQ3wU3MJ+s192Q==",
+      "license": "MIT"
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.15",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -2585,6 +3127,12 @@
      "dev": true,
      "license": "Apache-2.0"
    },
+    "node_modules/twitch-video-element": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/twitch-video-element/-/twitch-video-element-0.1.6.tgz",
+      "integrity": "sha512-X7l8gy+DEFKJ/EztUwaVnAYwQN9fUJxPkOVJj2sE62sGvGU4DNLyvmOsmVulM+8Plc5dMg6hYIMNRAPaH+39Uw==",
+      "license": "MIT"
+    },
    "node_modules/typescript": {
      "version": "5.9.3",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
@@ -2599,6 +3147,32 @@
        "node": ">=14.17"
      }
    },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.41",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.41.tgz",
+      "integrity": "sha512-LbBDqdIC5s8iROCUjMbW1f5dJQTEFB1+KO9ogbvlb3nm9n4YHa5p4KTvFPWvh2Hs8gZMBuiB1/8+pdfe/tDPug==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "ua-parser-js": "script/cli.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/update-browserslist-db": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -2637,6 +3211,16 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/vimeo-video-element": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/vimeo-video-element/-/vimeo-video-element-1.7.0.tgz",
+      "integrity": "sha512-UydSgi8svX7Iwd7yInAJVzcGKPv3E705sjCjnevQSNlJBmLcitx4aq0IBczopK6zw0OFJPWd8Qqby0Yflkz42w==",
+      "license": "MIT",
+      "dependencies": {
+        "@vimeo/player": "2.29.0",
+        "media-played-ranges-mixin": "^0.1.0"
+      }
+    },
    "node_modules/vite": {
      "version": "5.4.21",
      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
@@ -2697,12 +3281,39 @@
        }
      }
    },
+    "node_modules/weakmap-polyfill": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/weakmap-polyfill/-/weakmap-polyfill-2.0.4.tgz",
+      "integrity": "sha512-ZzxBf288iALJseijWelmECm/1x7ZwQn3sMYIkDr2VvZp7r6SEKuT8D0O9Wiq6L9Nl5mazrOMcmiZE/2NCenaxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/wistia-video-element": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/wistia-video-element/-/wistia-video-element-1.3.6.tgz",
+      "integrity": "sha512-wPizIpXDaCs6fvDzhU3MBtEpxIqhgXlu00kSrKgmjPb5DRqZt927xZZjE1qm81Df40d445u4a/mRKX5I66zaYA==",
+      "license": "MIT",
+      "dependencies": {
+        "super-media-element": "~1.4.2"
+      }
+    },
    "node_modules/yallist": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
      "dev": true,
      "license": "ISC"
+    },
+    "node_modules/youtube-video-element": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/youtube-video-element/-/youtube-video-element-1.9.0.tgz",
+      "integrity": "sha512-Hh0dbQM+FVlUaYUbpYkZNUvdKxTNcSNvTGzkQKYShltnX+LRHEp2eYvC2Zm43eU8Np+CBZuoNR2i+seCYzzAyg==",
+      "license": "MIT",
+      "dependencies": {
+        "media-played-ranges-mixin": "^0.1.0"
+      }
    }
  }
 }
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
+    "react-player": "^3.4.0",
    "react-router-dom": "^6.23.0"
  },
  "devDependencies": {
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Layout from './components/layout/Layout';
 import HomePage from './pages/HomePage';
 import CallbackPage from './pages/CallbackPage';
+import VideoPage from './pages/VideoPage';

 type Theme = 'dark' | 'light';

@@ -23,6 +24,7 @@ function App() {
      <Routes>
        <Route element={<Layout theme={theme} onToggleTheme={toggleTheme} />}>
          <Route path="/" element={<HomePage />} />
+          <Route path="/video/:id" element={<VideoPage />} />
          <Route path="/callback" element={<CallbackPage />} />
        </Route>
      </Routes>
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -13,7 +13,7 @@ interface Video {

 interface VideosResponse {
  success: boolean;
-  data: Video[];
+  data: { videos: Video[] };
 }

 export default function HomePage() {
@@ -22,7 +22,7 @@ export default function HomePage() {

  useEffect(() => {
    apiFetch<VideosResponse>('/videos')
-      .then((res) => setVideos(res.data))
+      .then((res) => setVideos(res.data.videos))
      .catch(() => setVideos([]))
      .finally(() => setLoading(false));
  }, []);
--- a/frontend/src/pages/VideoPage.tsx
+++ b/frontend/src/pages/VideoPage.tsx
@@ -0,0 +1,131 @@
+import { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import ReactPlayer from 'react-player';
+import { apiFetch } from '../lib/api';
+
+interface Video {
+  id: number;
+  title: string;
+  description: string;
+  duration?: number;
+  storageType: 'youtube' | 's3' | 'local';
+  storageKey: string;
+  thumbnailUrl?: string;
+  requiredLevel: number;
+  locked: boolean;
+}
+
+interface VideoResponse {
+  success: boolean;
+  data: { video: Video };
+}
+
+function buildPlayerUrl(storageType: Video['storageType'], storageKey: string): string {
+  switch (storageType) {
+    case 'youtube': return `https://www.youtube.com/watch?v=${storageKey}`;
+    case 's3':      return storageKey; // URL S3 complète attendue dans storageKey
+    case 'local':   return `${import.meta.env.VITE_API_URL}/stream/${storageKey}`;
+  }
+}
+
+export default function VideoPage() {
+  const { id } = useParams<{ id: string }>();
+  const [video, setVideo]   = useState<Video | null>(null);
+  const [error, setError]   = useState<'not_found' | 'forbidden' | 'unknown' | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!id) return;
+
+    apiFetch<VideoResponse>(`/videos/${id}`)
+      .then((res) => setVideo(res.data.video))
+      .catch((err: Error) => {
+        if (err.message.includes('403')) setError('forbidden');
+        else if (err.message.includes('404')) setError('not_found');
+        else setError('unknown');
+      })
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="aspect-video w-full rounded bg-od-surface-hi animate-pulse" />
+        <div className="h-5 w-1/2 rounded bg-od-surface-hi animate-pulse" />
+        <div className="h-3 w-3/4 rounded bg-od-surface-hi animate-pulse" />
+      </div>
+    );
+  }
+
+  if (error === 'forbidden') {
+    return (
+      <div className="flex flex-col items-center gap-4 pt-16 text-center">
+        <span className="font-mono text-3xl text-od-accent">⊘</span>
+        <p className="text-od-text font-medium">Contenu premium</p>
+        <p className="text-sm text-od-muted">Cette vidéo nécessite un abonnement supérieur.</p>
+        <Link to="/" className="font-mono text-xs text-od-muted hover:text-od-text transition-colors">
+          ← Retour
+        </Link>
+      </div>
+    );
+  }
+
+  if (error || !video) {
+    return (
+      <div className="flex flex-col items-center gap-4 pt-16">
+        <p className="text-sm text-od-muted">Vidéo introuvable.</p>
+        <Link to="/" className="font-mono text-xs text-od-muted hover:text-od-text transition-colors">
+          ← Retour
+        </Link>
+      </div>
+    );
+  }
+
+  const playerUrl = buildPlayerUrl(video.storageType, video.storageKey);
+
+  return (
+    <div className="flex flex-col gap-6">
+
+      {/* Player */}
+      <div className="overflow-hidden rounded border border-od-border bg-od-surface">
+        <div className="aspect-video w-full">
+          <ReactPlayer
+            src={playerUrl}
+            width="100%"
+            height="100%"
+            controls
+          />
+        </div>
+      </div>
+
+      {/* Meta */}
+      <div className="flex flex-col gap-2">
+        <h1 className="text-xl font-semibold text-od-text">{video.title}</h1>
+        {video.description && (
+          <p className="text-sm text-od-muted leading-relaxed">{video.description}</p>
+        )}
+        <div className="flex items-center gap-3 pt-1">
+          {video.requiredLevel === 0 ? (
+            <span className="rounded border border-od-border px-2 py-0.5 font-mono text-xs text-od-muted">
+              Libre
+            </span>
+          ) : (
+            <span className="rounded border border-od-accent px-2 py-0.5 font-mono text-xs text-od-accent">
+              Premium · niveau {video.requiredLevel}
+            </span>
+          )}
+          {video.duration && (
+            <span className="font-mono text-xs text-od-muted">
+              {Math.floor(video.duration / 60)}:{String(video.duration % 60).padStart(2, '0')}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <Link to="/" className="self-start font-mono text-xs text-od-muted hover:text-od-text transition-colors">
+        ← Retour aux vidéos
+      </Link>
+
+    </div>
+  );
+}