fix: async script loading, update examples

muxinc · Jul 26, 2022 · a755efb · a755efb · vercel · Jul 26, 2022
1 parent 3069f5b
commit a755efb
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 136 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "daily"
+      interval: 'daily'
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
@@ -11,10 +11,10 @@ on:
         required: true
         description: Version
         options:
-        - conventional
-        - patch
-        - minor
-        - major
+          - conventional
+          - patch
+          - minor
+          - major
 
 jobs:
   deploy:

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,14 +1,9 @@
 ## 0.1.1 (2022-07-26)
 
-
 ### Bug Fixes
 
-* waiting bug ([d4a3eb8](https://github.com/luwes/media-group/commit/d4a3eb8e5710a8b4a243c44f723993add2fcfde0))
-
+- waiting bug ([d4a3eb8](https://github.com/luwes/media-group/commit/d4a3eb8e5710a8b4a243c44f723993add2fcfde0))
 
 ### Features
 
-* add media group 🌱 ([fad7f15](https://github.com/luwes/media-group/commit/fad7f15372c8da9eb20cd78b6de355fc1896ca47))
-
-
-
+- add media group 🌱 ([fad7f15](https://github.com/luwes/media-group/commit/fad7f15372c8da9eb20cd78b6de355fc1896ca47))
diff --git a/examples/index.html b/examples/index.html
@@ -12,7 +12,7 @@
       href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css"
     />
     <link rel="stylesheet" href="./style.css" />
-    <script src="../dist/index.js"></script>
+    <script id="media-group-script" type="module" src="../dist/index.js"></script>
     <script
       defer
       src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"
@@ -22,11 +22,27 @@
     <h1>Syncing Language Audio</h1>
     <br />
 
-    <video preload="none" id="video" group="madmax" controls playsinline muted style="width: 100%;">
-      <source src="https://api.playerx.io/mad-max-fury-road-video-avc.mp4">
-    </video>
+    <div class="example">
+  <video
+    id="video"
+    group="madmax"
+    controls
+    playsinline
+    muted
+    style="width: 100%"
+  >
+    <source src="https://api.playerx.io/mad-max-fury-road-video-avc.mp4" />
+  </video>
 
-    <audio id="audiofr" group="madmax" controls playsinline src="https://api.playerx.io/mad-max-fury-road-audio-fr.m4a" style="width: 100%;"></audio>
+  <audio
+    id="audiofr"
+    group="madmax"
+    controls
+    playsinline
+    src="https://api.playerx.io/mad-max-fury-road-audio-fr.m4a"
+    style="width: 100%"
+  ></audio>
+    </div>
 
     <br />
     <br />
@@ -38,55 +54,61 @@ <h1>Syncing Language Audio</h1>
       <button id="languagebtn">Change to English</button>
     </div>
 
+    <br />
+    <br />
+
     <script>
-      let controller = video.groupController;
+      let controller;
+      document.querySelector('#media-group-script').addEventListener('load', () => {
+        controller = video.groupController;
 
-      controller.addEventListener('play', (e) => {
-        console.log(e.type);
-        playbtn.textContent = 'Pause';
-      });
+        controller.addEventListener('play', (e) => {
+          console.log(e.type);
+          playbtn.textContent = 'Pause';
+        });
 
-      controller.addEventListener('playing', (e) => {
-        console.log(e.type);
-        playbtn.textContent = 'Pause';
-      });
+        controller.addEventListener('playing', (e) => {
+          console.log(e.type);
+          playbtn.textContent = 'Pause';
+        });
 
-      controller.addEventListener('pause', (e) => {
-        console.log(e.type);
-        playbtn.textContent = 'Play';
-      });
+        controller.addEventListener('pause', (e) => {
+          console.log(e.type);
+          playbtn.textContent = 'Play';
+        });
 
-      controller.addEventListener('seeking', (e) => {
-        console.log(e.type);
-      });
+        controller.addEventListener('seeking', (e) => {
+          console.log(e.type);
+        });
 
-      controller.addEventListener('seeked', (e) => {
-        console.log(e.type);
-      });
+        controller.addEventListener('seeked', (e) => {
+          console.log(e.type);
+        });
 
-      controller.addEventListener('waiting', (e) => {
-        console.log(e.type);
-      });
+        controller.addEventListener('waiting', (e) => {
+          console.log(e.type);
+        });
 
-      playbtn.onclick = () => {
-        if (controller.playbackState === 'waiting') {
-          controller.play()
-          return
-        }
-        controller.paused ? controller.play() : controller.pause();
-      }
-
-      languagebtn.onclick = () => {
-        if (languagebtn.textContent === 'Change to English') {
-          video.muted = false;
-          audiofr.muted = true;
-          languagebtn.textContent = 'Change to French';
-        } else {
-          video.muted = true;
-          audiofr.muted = false;
-          languagebtn.textContent = 'Change to English';
-        }
-      }
+        playbtn.onclick = () => {
+          if (controller.playbackState === 'waiting') {
+            controller.play();
+            return;
+          }
+          controller.paused ? controller.play() : controller.pause();
+        };
+
+        languagebtn.onclick = () => {
+          if (languagebtn.textContent === 'Change to English') {
+            video.muted = false;
+            audiofr.muted = true;
+            languagebtn.textContent = 'Change to French';
+          } else {
+            video.muted = true;
+            audiofr.muted = false;
+            languagebtn.textContent = 'Change to English';
+          }
+        };
+      });
 
       fetch('./nav.html')
         .then((res) => res.text())
@@ -96,11 +118,11 @@ <h1>Syncing Language Audio</h1>
           document.body.prepend(tmp.content);
         });
 
-      // let tmp = document.createElement('template');
-      // tmp.innerHTML = `<pre class="language-html"><code></code></pre>`;
-      // let code = tmp.content.querySelector('code');
-      // code.textContent = document.querySelector('jam-video').outerHTML;
-      // document.body.append(tmp.content);
+      let tmp = document.createElement('template');
+      tmp.innerHTML = `<pre class="language-html"><code></code></pre>`;
+      let code = tmp.content.querySelector('code');
+      code.textContent = document.querySelector('.example').innerHTML;
+      document.body.append(tmp.content);
     </script>
   </body>
 </html>
diff --git a/examples/sign-language.html b/examples/sign-language.html
@@ -12,7 +12,7 @@
       href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css"
     />
     <link rel="stylesheet" href="./style.css" />
-    <script src="../dist/index.js"></script>
+    <script id="media-group-script" type="module" src="../dist/index.js"></script>
     <script
       defer
       src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"
@@ -50,26 +50,26 @@
     <h1>Sign Language (ASL)</h1>
     <br />
 
-    <div class="group-player">
-      <youtube-video
-        id="video"
-        group="asl"
-        src="https://www.youtube.com/watch?v=C7dPqrmDWxs"
-        controls
-        playsinline
-      ></youtube-video>
-
-      <div class="dock">
-        <youtube-video
-          class="asl-video"
-          group="asl"
-          data-group-seek-precision="0.5"
-          src="https://www.youtube.com/watch?v=H3KSKS3TTbc"
-          controls
-          playsinline
-          muted
-        ></youtube-video>
-      </div>
+    <div class="example group-player">
+  <youtube-video
+    id="video"
+    group="asl"
+    src="https://www.youtube.com/watch?v=C7dPqrmDWxs"
+    controls
+    playsinline
+  ></youtube-video>
+
+  <div class="dock">
+    <youtube-video
+      class="asl-video"
+      group="asl"
+      data-group-seek-precision="0.5"
+      src="https://www.youtube.com/watch?v=H3KSKS3TTbc"
+      controls
+      playsinline
+      muted
+    ></youtube-video>
+  </div>
     </div>
 
     <br />
@@ -80,47 +80,54 @@ <h1>Sign Language (ASL)</h1>
       <button onclick="controller.currentTime -= 10">-10s</button>
     </div>
 
+    <br />
+
+    <p>You can even create media groups with YouTube videos by using the <a href="https://github.com/luwes/youtube-video-element"><code>&lt;youtube-video&gt;</code></a> webcomponent with a HTMLMediaElement compatible API.</p>
+
     <script>
-      let controller = video.groupController;
+      let controller;
+      document.querySelector('#media-group-script').addEventListener('load', () => {
+        controller = video.groupController;
 
-      controller.addEventListener('play', (e) => {
-        console.log(e.type);
-        console.log('paused', controller.paused);
-        playbtn.textContent = 'Pause';
-      });
+        controller.addEventListener('play', (e) => {
+          console.log(e.type);
+          console.log('paused', controller.paused);
+          playbtn.textContent = 'Pause';
+        });
 
-      controller.addEventListener('playing', (e) => {
-        console.log(e.type);
-        console.log('paused', controller.paused);
-        playbtn.textContent = 'Pause';
-      });
+        controller.addEventListener('playing', (e) => {
+          console.log(e.type);
+          console.log('paused', controller.paused);
+          playbtn.textContent = 'Pause';
+        });
 
-      controller.addEventListener('pause', (e) => {
-        console.log(e.type);
-        console.log('paused', controller.paused);
-        playbtn.textContent = 'Play';
-      });
+        controller.addEventListener('pause', (e) => {
+          console.log(e.type);
+          console.log('paused', controller.paused);
+          playbtn.textContent = 'Play';
+        });
 
-      controller.addEventListener('seeking', (e) => {
-        console.log(e.type);
-      });
+        controller.addEventListener('seeking', (e) => {
+          console.log(e.type);
+        });
 
-      controller.addEventListener('seeked', (e) => {
-        console.log(e.type);
-      });
+        controller.addEventListener('seeked', (e) => {
+          console.log(e.type);
+        });
 
-      controller.addEventListener('waiting', (e) => {
-        console.log(e.type);
-      });
+        controller.addEventListener('waiting', (e) => {
+          console.log(e.type);
+        });
 
-      playbtn.onclick = async () => {
-        if (controller.playbackState === 'waiting') {
-          controller.play();
-          return;
-        }
-        await (controller.paused ? controller.play() : controller.pause());
-        console.log('controller.paused state', controller.paused);
-      };
+        playbtn.onclick = async () => {
+          if (controller.playbackState === 'waiting') {
+            controller.play();
+            return;
+          }
+          await (controller.paused ? controller.play() : controller.pause());
+          console.log('controller.paused state', controller.paused);
+        };
+      });
 
       fetch('./nav.html')
         .then((res) => res.text())
@@ -130,11 +137,11 @@ <h1>Sign Language (ASL)</h1>
           document.body.prepend(tmp.content);
         });
 
-      // let tmp = document.createElement('template');
-      // tmp.innerHTML = `<pre class="language-html"><code></code></pre>`;
-      // let code = tmp.content.querySelector('code');
-      // code.textContent = document.querySelector('jam-video').outerHTML;
-      // document.body.append(tmp.content);
+      let tmp = document.createElement('template');
+      tmp.innerHTML = `<pre class="language-html"><code></code></pre>`;
+      let code = tmp.content.querySelector('code');
+      code.textContent = document.querySelector('.example').innerHTML;
+      document.body.append(tmp.content);
     </script>
   </body>
 </html>
diff --git a/examples/style.css b/examples/style.css
@@ -24,7 +24,7 @@ jam-video {
   }
 }
 
-pre[class^=language-] {
+pre[class^='language-'] {
   font-size: 13px;
   padding: 0;
   box-sizing: border-box;

diff --git a/package.json b/package.json
@@ -4,7 +4,8 @@
   "description": "Resurrection of mediagroup/MediaController which can be used to sync and control multiple audio / video elements.",
   "type": "module",
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "files": [
     "src",
     "dist"
@@ -13,8 +14,11 @@
     "format": "prettier --write .",
     "lint": "eslint src/*",
     "test": "npm run lint",
-    "dev": "esbuild src/index.ts --bundle --outdir=dist --servedir=.",
-    "build": "esbuild src/index.ts --bundle --minify --sourcemap --outdir=dist"
+    "dev": "esbuild src/index.ts --bundle --format=esm --outdir=dist --servedir=.",
+    "build": "npm run build:iife && npm run build:esm && npm run build:types",
+    "build:iife": "esbuild src/index.ts --bundle --minify --sourcemap --outfile=dist/index.iife.js",
+    "build:esm": "esbuild src/index.ts --bundle --format=esm --minify --sourcemap --outdir=dist",
+    "build:types": "tsc --declaration --emitDeclarationOnly --outDir dist/types"
   },
   "repository": "luwes/media-group",
   "author": "Wesley Luyten <[email protected]> (https://wesleyluyten.com)",