@banou/media-player 0.10.5 → 0.10.6

package/dist/remote/index.js

@@ -134,13 +134,13 @@ var t = [
 		},
 		set: (e, t, r) => {
 			let i = p.get(e);
-			if (!(!i || !n.includes(t))) try {
+			if (i && n.includes(t)) try {
 				i[t] = r;
 			} catch {}
 		},
 		call: async (e, t) => {
 			let n = p.get(e);
-			if (!(!n || !r.includes(t))) try {
+			if (n && r.includes(t)) try {
 				t === "play" ? await n.play() : t === "pause" ? n.pause() : n.load?.();
 			} finally {
 				C(e, "timeupdate");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "description": "A video player for containers and codecs the browser cannot play natively, remuxed on the fly",
   "type": "module",
   "main": "dist/index.js",
@@ -60,21 +60,22 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^6.0.3",
-    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/browser-playwright": "4.1.11",
     "playwright": "^1.62.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "shx": "^0.3.4",
     "typescript": "^7.0.2",
-    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
-    "vite-plus": "0.2.4",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.3",
+    "vite-plus": "0.3.3",
     "vitest-browser-react": "^2.2.0"
   },
   "overrides": {
-    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4"
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.3",
+    "vitest": "4.1.11"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Banou26/media-player.git"
+    "url": "git+https://github.com/banou26/media-player.git"
   }
 }

package/src/lib/react/components/progress-bar.tsx

@@ -241,6 +241,7 @@ export const ProgressBar = () => {
   const duration = usePlayer((state) => state.duration)
   const size = usePlayer((state) => state.size)
   const downloadedRanges = usePlayer((state) => state.downloadedRanges)
+  const buffered = usePlayer((state) => state.buffered)
   const indexes = usePlayer((state) => state.indexes)
   const thumbnails = usePlayer((state) => state.thumbnails)
   const thumbnailAt = usePlayer((state) => state.thumbnailAt)
@@ -357,25 +358,30 @@ export const ProgressBar = () => {
   // duration is 0 until metadata lands, which is never a divisor
   const timePercentage = (time: number) => duration ? (time / duration) * 100 : 0
 
+  const loadedPart = (key: number, start: number, end: number) => {
+    const rangeDuration = Number((end - start).toFixed(4)) // to prevent cases like `0.9995140832939585`
+    const left = start * 100
+    return (
+      <div key={key} className="loaded-part" style={{ transform: `scaleX(${rangeDuration})`, marginLeft: `${left}%` }}></div>
+    )
+  }
+
   // download percentage is not time percentage: headers and fonts can run to tens of megabytes
   const loadedParts = useMemo(() =>
-    downloadedRanges
-      ?.map((range, i) => {
-        if (!size || !duration) return null
-        const matchingIndexes = indexes.filter(index => range.startByteOffset <= index.pos && index.pos <= range.endByteOffset)
-        const firstIndex = matchingIndexes.at(0)
-        const lastIndex = matchingIndexes.at(-1)
-        if (!firstIndex || !lastIndex) return null
-        const start = firstIndex.timestamp / duration
-        const end = lastIndex.timestamp  / duration
-        const rangeDuration = Number((end - start).toFixed(2)) // to prevent cases like `0.9995140832939585`
-        const left = start * 100
-        return (
-          <div key={i} className="loaded-part" style={{ transform: `scaleX(${rangeDuration})`, marginLeft: `${left}%` }}></div>
-        )
-      })
-    ?? [],
-    [duration, indexes.length, downloadedRanges?.map(({ startByteOffset, endByteOffset }) => `${startByteOffset}/${endByteOffset}`).join(',')]
+    // a media the player does not own brings no bytes, so the element's own buffered time is all there is
+    size === undefined
+      ? (duration ? buffered.map(([start, end], i) => loadedPart(i, start / duration, end / duration)) : [])
+      : downloadedRanges
+        ?.map((range, i) => {
+          if (!size || !duration) return null
+          const matchingIndexes = indexes.filter(index => range.startByteOffset <= index.pos && index.pos <= range.endByteOffset)
+          const firstIndex = matchingIndexes.at(0)
+          const lastIndex = matchingIndexes.at(-1)
+          if (!firstIndex || !lastIndex) return null
+          return loadedPart(i, firstIndex.timestamp / duration, lastIndex.timestamp / duration)
+        })
+      ?? [],
+    [duration, size, size === undefined ? buffered : undefined, indexes.length, downloadedRanges?.map(({ startByteOffset, endByteOffset }) => `${startByteOffset}/${endByteOffset}`).join(',')]
   )