feat(demo): switch between videojs 6-8 and hls/mp4

Extend the demo to support: * Switching between videojs versions 6, 7 and 8. * Switching between HLS and regular mp4 files.
silvermine · Feb 28, 2024 · 9bb77d6 · 9bb77d6
1 parent c32be6f
commit 9bb77d6
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 22 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,5 +1,6 @@
 {
 
-   "extends": "@silvermine/eslint-config/node"
+   "extends": "@silvermine/eslint-config/node",
+   "ignorePatterns": ["node_modules", "**/dist/*.js"]
 
 }
diff --git a/docs/demo/.eslintrc.json b/docs/demo/.eslintrc.json
@@ -0,0 +1,8 @@
+{
+    "env": {
+        "browser": true
+    },
+    "globals": {
+        "videojs": true
+    }
+}
diff --git a/docs/demo/index.html b/docs/demo/index.html
@@ -3,33 +3,25 @@
 <head>
    <meta charset=utf-8 />
    <title>silvermine-videojs-chromecast Demo</title>
-   <link href="https://unpkg.com/[email protected]/dist/video-js.css" rel="stylesheet">
-   <script src="https://unpkg.com/[email protected]/dist/video.js"></script>
-   <script src="/dist/silvermine-videojs-chromecast.min.js"></script>
-   <link href="/dist/silvermine-videojs-chromecast.css" rel="stylesheet">
-   <script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
 </head>
 <body>
    <h1>Demo of <code>silvermine-videojs-chromecast</code></h1>
 
-   <video id="video_1" class="video-js vjs-default-skin" controls preload="auto">
-      <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
-   </video>
-
-   <script>
-      var options;
+   <select id="video-selector" style="margin-bottom: 20px;">
+      <option value="mp4">mp4</option>
+      <option value="hls-mp4">HLS (fragmented mp4)</option>
+   </select>
 
-      options = {
-         fluid: true,
-         techOrder: [ 'chromecast', 'html5' ],
-      };
+   <select id="videojs-selector" style="margin-bottom: 20px;">
+      <option value="6">videojs 6</option>
+      <option value="7">videojs 7</option>
+      <option value="8">videojs 8</option>
+   </select>
 
-      videojs('video_1', options, function() {
-         var player = this;
+   <video id="video_1" class="video-js vjs-default-skin" controls preload="auto" width="auto">
+   </video>
 
-         player.chromecast();
-      });
-   </script>
+   <script src="/main.js"></script>
 
 </body>
 </html>
diff --git a/docs/demo/main.js b/docs/demo/main.js
@@ -0,0 +1,121 @@
+'use strict';
+
+const videos = {
+   'hls-mp4': {
+      poster: 'https://peertube.cpy.re/lazy-static/previews/da2b08d4-a242-4170-b32a-4ec8cbdca701.jpg',
+      source: 'https://peertube.cpy.re/static/streaming-playlists/hls/da2b08d4-a242-4170-b32a-4ec8cbdca701/96b8a08d-4c01-4be6-81f4-c115b8a7bd97-master.m3u8',
+      modifyLoadRequestFn: function(loadRequest) {
+         loadRequest.media.hlsSegmentFormat = 'fmp4';
+         loadRequest.media.hlsVideoSegmentFormat = 'fmp4';
+         return loadRequest;
+      },
+      type: 'application/x-mpegURL',
+   },
+   mp4: {
+      source: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+      type: 'video/mp4',
+      poster: 'https://media.w3.org/2010/05/sintel/poster.png',
+   },
+};
+
+const videojsOptions = {
+   fluid: true,
+   techOrder: [ 'chromecast', 'html5' ],
+   plugins: {
+      chromecast: {},
+   },
+};
+
+const loadScriptsAndStyles = async (videojsVersion) => {
+   const scripts = [
+      `https://unpkg.com/video.js@${videojsVersion}/dist/video.js`,
+      '/dist/silvermine-videojs-chromecast.min.js',
+      'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
+   ];
+
+   const styles = [
+      `https://unpkg.com/video.js@${videojsVersion}/dist/video-js.css`,
+      '/dist/silvermine-videojs-chromecast.css',
+   ];
+
+   styles.forEach((style) => {
+      const elem = document.createElement('link');
+
+      elem.rel = 'stylesheet';
+      elem.href = style;
+
+      document.body.append(elem);
+   });
+
+   for (let i = 0; i < scripts.length; i++) {
+      const elem = document.createElement('script');
+
+      await new Promise((resolve) => {
+         elem.src = scripts[i];
+         elem.type = 'text/javascript';
+         elem.onload = resolve;
+
+         document.body.append(elem);
+      });
+   }
+};
+
+const loadVideo = (video) => {
+   const player = videojs('video_1');
+
+   player.src({
+      src: video.source,
+      type: video.type,
+   });
+
+   player.poster(video.poster);
+
+   player.options({
+      ...videojsOptions,
+      chromecast: {
+         ...videojsOptions.chromecast,
+         modifyLoadRequestFn: video.modifyLoadRequestFn,
+      },
+   });
+};
+
+const init = async () => {
+   const videojsSelector = document.querySelector('#videojs-selector');
+
+   const videoSelector = document.querySelector('#video-selector');
+
+   const searchParams = new URLSearchParams(window.location.search);
+
+   videojsSelector.value = searchParams.get('videojsVersion') || '8';
+   videoSelector.value = searchParams.get('videoType') || 'mp4';
+
+   await loadScriptsAndStyles(videojsSelector.value);
+   videojs('video_1', videojsOptions, function() {
+      this.chromecast();
+      loadVideo(videos[videoSelector.value]);
+   });
+
+   videojsSelector.onchange = (event) => {
+      const version = event.target.value;
+
+      const params = new URLSearchParams(window.location.search);
+
+      params.set('videojsVersion', version);
+      window.location.search = params.toString();
+   };
+
+   videoSelector.onchange = (event) => {
+      const videoType = event.target.value;
+
+      const video = videos[videoType];
+
+      const params = new URLSearchParams(window.location.search);
+
+      params.set('videoType', videoType);
+      window.history.pushState('', '', '?' + params.toString());
+
+      loadVideo(video);
+   };
+};
+
+init();
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "commitlint": "commitlint --from 5ed6165",
     "test": "check-node-version --npm 8.5.5 && nyc mocha -- -R spec 'tests/**/*.test.js'",
     "stylelint": "stylelint './src/scss/**/*.scss'",
-    "eslint": "eslint '{,!(node_modules|dist|docs/demo/dist)/**/}*.js'",
+    "eslint": "eslint .",
     "markdownlint": "markdownlint-cli2",
     "standards": "npm run commitlint && npm run markdownlint && npm run stylelint && npm run eslint",
     "release:preview": "node ./node_modules/@silvermine/standardization/scripts/release.js preview",