fix: seek on custom media w/o readyState

fix muxinc#858
luwes · Mar 22, 2024 · 11dcf38 · 11dcf38
1 parent 737cf45
commit 11dcf38
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 5 deletions.
diff --git a/examples/vanilla/index.html b/examples/vanilla/index.html
@@ -34,6 +34,7 @@ <h2>Media element examples</h2>
       <li><a href="media-elements/videojs.html">Video.js Media Element</a></li>
       <li><a href="media-elements/jwplayer.html">JW Player Media Element</a></li>
       <li><a href="media-elements/wistia.html">Wistia Media Element</a></li>
+      <li><a href="media-elements/spotify.html">Spotify Media Element</a></li>
       <li><a href="media-elements/mux-video.html"><code>&lt;mux-video&gt;</code> Media Element</a></li>
       <li><a href="media-elements/media-playlist.html">Media Playlist</a></li>
     </ul>

diff --git a/examples/vanilla/media-elements/spotify.html b/examples/vanilla/media-elements/spotify.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width" />
+    <title>Media Chrome Spotify Media Example</title>
+    <style>
+      media-controller {
+        display: block;
+        max-width: 600px;
+        height: 44px;
+      }
+
+      .examples {
+        margin-top: 20px;
+      }
+    </style>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/spotify-audio-element@0/+esm"></script>
+    <script type="module" src="../../../dist/index.js"></script>
+  </head>
+  <body>
+    <main>
+      <h1>Media Chrome Spotify Media Example</h1>
+
+      <media-controller audio>
+        <spotify-audio
+          src="https://open.spotify.com/artist/246dkjvS1zLTtiykXe5h60"
+          slot="media"
+          crossorigin
+          muted
+        ></spotify-audio>
+        <media-control-bar style="width: 100%">
+          <media-play-button></media-play-button>
+          <media-seek-backward-button seekoffset="15"></media-seek-backward-button>
+          <media-seek-forward-button seekoffset="15"></media-seek-forward-button>
+          <media-time-range></media-time-range>
+          <media-time-display showduration remaining></media-time-display>
+        </media-control-bar>
+      </media-controller>
+    </main>
+
+    <div class="examples">
+      <a href="../">View more examples</a>
+    </div>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -64,8 +64,8 @@
     "premanifest": "cp -R src/js/ dist/",
     "manifest": "npx @custom-elements-manifest/analyzer analyze --config scripts/custom-elements-manifest.config.js",
     "build:types": "tsc",
-    "build:esm": "esbuild \"src/js/**/*\" --target=es2019 --format=esm --outdir=dist",
-    "build:cjs": "esbuild \"src/js/**/*\" --target=es2019 --format=cjs --outdir=dist/cjs",
+    "build:esm": "esbuild \"src/js/**/*.*s*\" --target=es2019 --format=esm --outdir=dist",
+    "build:cjs": "esbuild \"src/js/**/*.*s*\" --target=es2019 --format=cjs --outdir=dist/cjs",
     "postbuild:cjs": "echo '{\"type\": \"commonjs\"}' > ./dist/cjs/package.json",
     "build:iife": "esbuild src/js/index.js --bundle --target=es2019 --format=iife --outdir=dist/iife --minify --sourcemap --global-name=MediaChrome",
     "build:react": "node ./scripts/react/build.js",

diff --git a/src/js/media-store/state-mediator.js b/src/js/media-store/state-mediator.js
@@ -407,9 +407,8 @@ export const stateMediator = {
     },
     set(value, stateOwners) {
       const { media } = stateOwners;
-      // Can't set the time before the media is ready
-      // Ignore if readyState isn't supported
-      if (!media?.readyState) return;
+      // If the media supports readyState and it's not ready, don't set currentTime
+      if (!media || media.readyState === 0) return;
       media.currentTime = value;
     },
     mediaEvents: ['timeupdate', 'loadedmetadata'],