@editframe/elements 0.8.0-beta.1 → 0.8.0-beta.2

package/dist/elements/EFMedia.d.ts

@@ -29,6 +29,7 @@ export declare class EFMedia extends EFMedia_base {
     }[] | undefined], Record<string, {
         segment: TrackSegment;
         track: MP4Box.TrackInfo;
+        nextSegment?: TrackSegment;
     }> | undefined>;
     fetchSeekTask: Task<readonly [{
         trackId: string;
@@ -37,6 +38,7 @@ export declare class EFMedia extends EFMedia_base {
     }[] | undefined, Record<string, {
         segment: TrackSegment;
         track: MP4Box.TrackInfo;
+        nextSegment?: TrackSegment;
     }> | undefined, typeof fetch], Record<string, File> | undefined>;
     videoAssetTask: Task<readonly [Record<string, File> | undefined], VideoAsset | undefined>;
     desiredSeekTimeMs: number;
@@ -48,6 +50,7 @@ export declare class EFMedia extends EFMedia_base {
     audioBufferTask: Task<readonly [Record<string, File> | undefined, Record<string, {
         segment: TrackSegment;
         track: MP4Box.TrackInfo;
+        nextSegment?: TrackSegment;
     }> | undefined], {
         buffer: AudioBuffer;
         startOffsetMs: number;

package/dist/elements/src/elements/EFMedia.js

@@ -101,10 +101,13 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
           const segment = index.segments.toReversed().find((segment2) => {
             return segment2.dts / track.timescale * 1e3 <= seekToMs;
           });
+          const nextSegment = index.segments.find((segment2) => {
+            return segment2.dts / track.timescale * 1e3 > seekToMs;
+          });
           if (!segment) {
             return;
           }
-          result[index.track] = { segment, track };
+          result[index.track] = { segment, track, nextSegment };
         }
         return result;
       }
@@ -121,13 +124,27 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
           return;
         }
         const files = {};
-        for (const [trackId, { segment, track }] of Object.entries(seekResult)) {
+        for (const [trackId, { segment, track, nextSegment }] of Object.entries(
+          seekResult
+        )) {
           const start = segment.offset;
           const end = segment.offset + segment.size;
           const response = await fetch(this.fragmentTrackPath(trackId), {
             signal,
             headers: { Range: `bytes=${start}-${end}` }
           });
+          if (nextSegment) {
+            const nextStart = nextSegment.offset;
+            const nextEnd = nextSegment.offset + nextSegment.size;
+            fetch(this.fragmentTrackPath(trackId), {
+              signal,
+              headers: { Range: `bytes=${nextStart}-${nextEnd}` }
+            }).then(() => {
+              log("Prefetched next segment");
+            }).catch((error) => {
+              log("Failed to prefetch next segment", error);
+            });
+          }
           const initSegment = Object.values(initSegments).find(
             (initSegment2) => initSegment2.trackId === String(track.id)
           );

package/dist/elements/src/gui/ContextMixin.js

@@ -32,25 +32,27 @@ function ContextMixin(superClass) {
           });
         }
         if (this.signingURL) {
-          if (!this.#signedURLs[url]) {
-            this.#signedURLs[url] = fetch(this.signingURL, {
+          if (!this.#URLTokens[url]) {
+            this.#URLTokens[url] = fetch(this.signingURL, {
               method: "POST",
               body: JSON.stringify({ url })
             }).then(async (response) => {
               if (response.ok) {
-                return (await response.json()).url;
+                return (await response.json()).token;
               }
               throw new Error(
                 `Failed to sign URL: ${url}. SigningURL: ${this.signingURL} ${response.status} ${response.statusText}`
               );
             });
           }
-          const signedURL = await this.#signedURLs[url];
-          return fetch(signedURL, init);
+          const urlToken = await this.#URLTokens[url];
+          Object.assign(init.headers, {
+            authorization: `Bearer ${urlToken}`
+          });
         }
         return fetch(url, init);
       };
-      this.#signedURLs = {};
+      this.#URLTokens = {};
       this.apiHost = "";
       this.playing = false;
       this.loop = false;
@@ -93,7 +95,7 @@ function ContextMixin(superClass) {
       this.#playbackAnimationFrameRequest = null;
       this.#AUDIO_PLAYBACK_SLICE_MS = 1e3;
     }
-    #signedURLs;
+    #URLTokens;
     connectedCallback() {
       super.connectedCallback();
       requestAnimationFrame(this.setStageScale);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.8.0-beta.1",
+  "version": "0.8.0-beta.2",
   "description": "",
   "exports": {
     ".": {
@@ -20,7 +20,7 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/assets": "0.8.0-beta.1",
+    "@editframe/assets": "0.8.0-beta.2",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/src/elements/EFMedia.ts

@@ -145,7 +145,11 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
 
       const result: Record<
         string,
-        { segment: TrackSegment; track: MP4Box.TrackInfo }
+        {
+          segment: TrackSegment;
+          track: MP4Box.TrackInfo;
+          nextSegment?: TrackSegment;
+        }
       > = {};
 
       for (const index of Object.values(fragmentIndex)) {
@@ -161,11 +165,15 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
           return (segment.dts / track.timescale) * 1000 <= seekToMs;
         });
 
+        const nextSegment = index.segments.find((segment) => {
+          return (segment.dts / track.timescale) * 1000 > seekToMs;
+        });
+
         if (!segment) {
           return;
         }
 
-        result[index.track] = { segment, track };
+        result[index.track] = { segment, track, nextSegment };
       }
 
       return result;
@@ -187,7 +195,9 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
 
       const files: Record<string, File> = {};
 
-      for (const [trackId, { segment, track }] of Object.entries(seekResult)) {
+      for (const [trackId, { segment, track, nextSegment }] of Object.entries(
+        seekResult,
+      )) {
         const start = segment.offset;
         const end = segment.offset + segment.size;
 
@@ -196,6 +206,21 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
           headers: { Range: `bytes=${start}-${end}` },
         });
 
+        if (nextSegment) {
+          const nextStart = nextSegment.offset;
+          const nextEnd = nextSegment.offset + nextSegment.size;
+          fetch(this.fragmentTrackPath(trackId), {
+            signal,
+            headers: { Range: `bytes=${nextStart}-${nextEnd}` },
+          })
+            .then(() => {
+              log("Prefetched next segment");
+            })
+            .catch((error) => {
+              log("Failed to prefetch next segment", error);
+            });
+        }
+
         const initSegment = Object.values(initSegments).find(
           (initSegment) => initSegment.trackId === String(track.id),
         );

package/src/gui/ContextMixin.ts

@@ -51,13 +51,13 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       }
 
       if (this.signingURL) {
-        if (!this.#signedURLs[url]) {
-          this.#signedURLs[url] = fetch(this.signingURL, {
+        if (!this.#URLTokens[url]) {
+          this.#URLTokens[url] = fetch(this.signingURL, {
             method: "POST",
             body: JSON.stringify({ url }),
           }).then(async (response) => {
             if (response.ok) {
-              return (await response.json()).url;
+              return (await response.json()).token;
             }
             throw new Error(
               `Failed to sign URL: ${url}. SigningURL: ${this.signingURL} ${response.status} ${response.statusText}`,
@@ -65,15 +65,17 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
           });
         }
 
-        const signedURL = await this.#signedURLs[url];
+        const urlToken = await this.#URLTokens[url];
 
-        return fetch(signedURL, init);
+        Object.assign(init.headers, {
+          authorization: `Bearer ${urlToken}`,
+        });
       }
 
       return fetch(url, init);
     };
 
-    #signedURLs: Record<string, Promise<string>> = {};
+    #URLTokens: Record<string, Promise<string>> = {};
 
     @property({ type: String })
     signingURL?: string;