@eluvio/elv-player-js 2.1.3 → 2.1.4

package/lib/player/Player.js

@@ -4,6 +4,7 @@ import Cast from "./Cast";
 import {Utils} from "@eluvio/elv-client-js";
 import PlayerControls from "./Controls.js";
 import {MergeDefaultParameters} from "../ui/Common";
+import ThumbnailHandler from "./ThumbnailHandler";
 
 const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
 
@@ -247,7 +248,7 @@ export class EluvioPlayer {
       }
     }
 
-    const { playoutUrl, drms } = this.sourceOptions.playoutOptions[protocol].playoutMethods[drm];
+    const { playoutUrl, drms, thumbnailTrack } = this.sourceOptions.playoutOptions[protocol].playoutMethods[drm];
 
     const versionHash = playoutUrl.split("/").find(segment => segment.startsWith("hq__"));
 
@@ -259,6 +260,7 @@ export class EluvioPlayer {
       protocol,
       drm,
       playoutUrl,
+      thumbnailTrackUrl: thumbnailTrack,
       versionHash,
       drms,
       availableDRMs,
@@ -449,7 +451,7 @@ export class EluvioPlayer {
         this.__RegisterVideoEventListener("ended", () => this.controls && this.controls.CollectionPlayNext({autoplay: true}));
       }
 
-      let { versionHash, playoutUrl, protocol, drm, drms, multiviewOptions, playoutParameters } = await this.__PlayoutOptions();
+      let { versionHash, playoutUrl, thumbnailTrackUrl, protocol, drm, drms, multiviewOptions, playoutParameters } = await this.__PlayoutOptions();
 
       this.contentHash = versionHash;
 
@@ -463,6 +465,7 @@ export class EluvioPlayer {
       this.authorizationToken = authorizationToken;
 
       this.playoutUrl = playoutUrl.toString();
+      this.thumbnailTrackUrl = thumbnailTrackUrl;
 
       if(this.castHandler) {
         this.castHandler.SetMedia({
@@ -522,6 +525,15 @@ export class EluvioPlayer {
 
       this.initialized = true;
       this.restartParameters = undefined;
+
+      if(this.thumbnailTrackUrl) {
+        this.thumbnailHandler = new ThumbnailHandler(this.thumbnailTrackUrl);
+        this.thumbnailHandler.LoadThumbnails()
+          .then(() => {
+            this.thumbnailsLoaded = true;
+            this.__SettingsUpdate();
+          });
+      }
     } catch (error) {
       // If playout failed due to a permission issue, check the content to see if there is a message to display
       let permissionErrorMessage;
@@ -1210,6 +1222,10 @@ export class EluvioPlayer {
     this.dashPlayer = undefined;
     this.player = undefined;
     this.initTimeLogged = false;
+    this.playoutUrl = undefined;
+    this.thumbnailTrackUrl = undefined;
+    this.thumbnailHandler = undefined;
+    this.thumbnailsLoaded = undefined;
     this.canPlay = false;
     this.isLive = false;
     this.behindLiveEdge = false;

package/lib/player/ThumbnailHandler.js

@@ -0,0 +1,214 @@
+import {Utils} from "@eluvio/elv-client-js";
+import UrlJoin from "url-join";
+import {IntervalTree} from "node-interval-tree";
+
+let _tagId = 1;
+export const Cue = ({tagType, tagId, label, startTime, endTime, text, tag, ...extra}) => {
+  let content;
+  if(Array.isArray(text)) {
+    text = text.join(", ");
+  } else if(typeof text === "object") {
+    content = text;
+
+    try {
+      text = JSON.stringify(text, null, 2);
+    } catch(error) {
+      text = "";
+    }
+  }
+
+  return {
+    tagId,
+    tagType,
+    label,
+    startTime,
+    endTime,
+    text,
+    content,
+    tag,
+    ...extra
+  };
+};
+
+const FormatVTTCue = ({label, cue}) => {
+  // VTT Cues are weird about being inspected and copied
+  // Manually copy all relevant values
+  const cueAttributes = [
+    "align",
+    "endTime",
+    "id",
+    "line",
+    "lineAlign",
+    "position",
+    "positionAlign",
+    "region",
+    "size",
+    "snapToLines",
+    "startTime",
+    "text",
+    "vertical"
+  ];
+
+  const cueCopy = {};
+  cueAttributes.forEach(attr => cueCopy[attr] = cue[attr]);
+
+  const tagId = _tagId;
+  _tagId += 1;
+
+  return Cue({
+    tagId,
+    tagType: "vtt",
+    label,
+    startTime: cue.startTime,
+    endTime: cue.endTime,
+    text: cue.text,
+    tag: cueCopy
+  });
+};
+
+export const ParseVTTTrack = async (track) => {
+  const videoElement = document.createElement("video");
+  const trackElement = document.createElement("track");
+
+  const dataURL = "data:text/plain;base64," + Utils.B64(track.vttData);
+
+  const textTrack = trackElement.track;
+
+  videoElement.append(trackElement);
+  trackElement.src = dataURL;
+
+  textTrack.mode = "hidden";
+
+  await new Promise(resolve => setTimeout(resolve, 500));
+
+  let cues = {};
+  Array.from(textTrack.cues)
+    .forEach(cue => {
+      const parsedCue = FormatVTTCue({label: track.label, cue});
+      cues[parsedCue.tagId] = parsedCue;
+    });
+
+  return cues;
+};
+
+export const CreateTrackIntervalTree = (tags, label) => {
+  const intervalTree = new IntervalTree();
+
+  Object.values(tags).forEach(tag => {
+    try {
+      intervalTree.insert({low: tag.startTime, high: tag.startTime + 1, name: tag.tagId});
+    } catch(error) {
+      // eslint-disable-next-line no-console
+      console.warn(`Invalid tag in track '${label}'`);
+      // eslint-disable-next-line no-console
+      console.warn(JSON.stringify(tag, null, 2));
+      // eslint-disable-next-line no-console
+      console.warn(error);
+    }
+  });
+
+  return intervalTree;
+};
+
+class ThumbnailHandler {
+  constructor(thumbnailTrackUrl) {
+    this.thumbnailTrackUrl = thumbnailTrackUrl;
+    this.loaded = false;
+  }
+
+  async LoadThumbnails() {
+    const thumbnailTrackUrl = new URL(this.thumbnailTrackUrl);
+    const authToken = thumbnailTrackUrl.searchParams.get("authorization");
+    thumbnailTrackUrl.searchParams.delete("authorization");
+    const vttData = await (await fetch(thumbnailTrackUrl, {headers: {Authorization: `Bearer ${authToken}`}})).text();
+
+    let tags = await ParseVTTTrack({label: "Thumbnails", vttData});
+
+    // Determine the maximum time between thumbnails
+    let maxInterval = 0;
+    let lastStartTime = 0;
+    Object.keys(tags || {}).forEach(key => {
+      tags[key].endTime = tags[key].startTime;
+
+      maxInterval = Math.max(maxInterval, tags[key].startTime - lastStartTime);
+      lastStartTime = tags[key].startTime;
+    });
+
+    let imageUrls = {};
+    Object.keys(tags).map(id => {
+      const [path, rest] = tags[id].tag.text.split("\n")[0].split("?");
+      const [query, hash] = rest.split("#");
+      const positionParams = hash.split("=")[1].split(",").map(n => parseInt(n));
+      const queryParams = new URLSearchParams(`?${query}`);
+      const url = new URL(thumbnailTrackUrl);
+      url.searchParams.set("authorization", authToken);
+      url.pathname = UrlJoin(url.pathname.split("/").slice(0, -1).join("/"), path);
+      queryParams.forEach((key, value) =>
+        url.searchParams.set(key, value)
+      );
+
+      tags[id].imageUrl = url.toString();
+      tags[id].thumbnailPosition = positionParams;
+
+      imageUrls[url.toString()] = true;
+
+      delete tags[id].tag.text;
+      delete tags[id].text;
+    });
+
+    await Promise.all(
+      Object.keys(imageUrls).map(async url => {
+        const image = new Image();
+
+        await new Promise(resolve => {
+          image.src = url;
+          image.crossOrigin = "anonymous";
+          image.onload = () => {
+            resolve();
+          };
+        });
+
+        imageUrls[url] = image;
+      })
+    );
+
+    this.maxInterval = Math.ceil(maxInterval);
+    this.thumbnailImages = imageUrls;
+    this.thumbnails = tags;
+    this.intervalTree = CreateTrackIntervalTree(tags, "Thumbnails");
+
+    this.loaded = true;
+  }
+
+  ThumbnailImage(startTime) {
+    if(!this.intervalTree) { return; }
+
+    let record = (this.intervalTree.search(startTime, startTime + this.maxInterval))[0];
+    let thumbnailIndex = record && record.name;
+
+    if(!thumbnailIndex) { return; }
+
+    const tag = this.thumbnails?.[thumbnailIndex?.toString()];
+
+    if(!tag) {
+      return;
+    }
+
+    if(!this.thumbnailCanvas) {
+      this.thumbnailCanvas = document.createElement("canvas");
+    }
+
+    const image = this.thumbnailImages[tag?.imageUrl];
+
+    if(image) {
+      const [x, y, w, h] = tag.thumbnailPosition;
+      this.thumbnailCanvas.height = h;
+      this.thumbnailCanvas.width = w;
+      const context = this.thumbnailCanvas.getContext("2d");
+      context.drawImage(image, x, y, w, h, 0, 0, w, h);
+      return this.thumbnailCanvas.toDataURL("image/png");
+    }
+  }
+}
+
+export default ThumbnailHandler;

package/lib/static/stylesheets/common.module.scss

@@ -73,8 +73,8 @@
 
 .seek-container {
   --progress-height: 3px;
-  --progress-height-expanded: 10px;
-  --progress-height-expanded-mobile: 8px;
+  --progress-height-expanded: 12px;
+  --progress-height-expanded-mobile: 12px;
   --color-seek-background: rgba(255, 255, 255, 10%);
   --color-seek-buffer: rgba(255, 255, 255, 10%);
   --color-seek-active: rgba(255, 255, 255, 50%);
@@ -93,6 +93,28 @@
     transition-delay: 0.25s;
   }
 
+  .thumbnail {
+    animation: 0.5s fadein ease;
+    bottom: 100%;
+    color: transparent;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    transition-delay: 0s;
+    user-select: none;
+    width: 250px;
+
+    &--visible {
+      opacity: 1;
+    }
+
+    img {
+      border-radius: 5px;
+      height: auto;
+      width: 250px;
+    }
+  }
+
   &:hover,
   &:active,
   &:focus,
@@ -129,12 +151,6 @@
       transition-delay: unset;
     }
   }
-
-  &:focus-visible,
-  &:has(:focus-visible),
-  &:hover {
-    filter: drop-shadow(0 0 5px var(--color-seek-active-focused));
-  }
 }
 
 .seek-playhead,
@@ -691,6 +707,7 @@
 
   .seek-container {
     height: calc(var(--progress-height-expanded) + 5px);
+    position: relative;
 
     &:hover,
     &:active,

package/lib/ui/Components.jsx

@@ -74,11 +74,48 @@ export const UserActionIndicator = ({action}) => {
   );
 };
 
+const Thumbnail = ({player, time, progress, videoState, visible}) => {
+  const [ref, setRef] = useState(null);
+
+  if(!player.thumbnailsLoaded) {
+    return null;
+  }
+
+  time = typeof time !== "undefined" ? time :
+    progress * videoState.duration;
+
+  progress = typeof progress !== "undefined" ? progress :
+    time / videoState.duration;
+
+  let maxPercent = 100;
+  if(ref) {
+    const { width } = ref.parentElement.getBoundingClientRect();
+    maxPercent = (width - 250) / width;
+  }
+
+  const thumbnailImage = player.thumbnailHandler.ThumbnailImage(time);
+
+  return (
+    <div
+      ref={setRef}
+      style={{
+        left: `${Math.min(progress, maxPercent) * 100}%`
+      }}
+      className={`${CommonStyles["thumbnail"]} ${visible ? CommonStyles["thumbnail--visible"] : ""}`}
+    >
+      <img src={thumbnailImage} alt="Thumbnail" className={CommonStyles["thumbnail__image"]} />
+    </div>
+  );
+};
+
 export const SeekBar = ({player, videoState, setRecentUserAction, className=""}) => {
   const [currentTime, setCurrentTime] = useState(player.controls.GetCurrentTime());
   const [bufferFraction, setBufferFraction] = useState(0);
   const [seekKeydownHandler, setSeekKeydownHandler] = useState(undefined);
   const [dvrEnabled, setDVREnabled] = useState(player.controls.IsDVREnabled());
+  const [hoverPosition, setHoverPosition] = useState(0);
+  const [hovering, setHovering] = useState(false);
+  const [focused, setFocused] = useState(false);
 
   useEffect(() => {
     setSeekKeydownHandler(SeekSliderKeyDown(player, setRecentUserAction));
@@ -103,7 +140,20 @@ export const SeekBar = ({player, videoState, setRecentUserAction, className=""})
   }
 
   return (
-    <div className={`${className} ${CommonStyles["seek-container"]} ${className}`}>
+    <div
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => {
+        setFocused(false);
+        setHovering(false);
+      }}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      onMouseMove={event => {
+        const { left, width } = event.currentTarget.getBoundingClientRect();
+        setHoverPosition(event.clientX / (width - left));
+      }}
+      className={`${className} ${CommonStyles["seek-container"]} ${className}`}
+    >
       <progress
         max={1}
         value={player.casting ? 0 : bufferFraction}
@@ -121,10 +171,27 @@ export const SeekBar = ({player, videoState, setRecentUserAction, className=""})
         max={1}
         step={0.00001}
         value={currentTime / videoState.duration || 0}
-        onInput={event => player.controls.Seek({fraction: event.currentTarget.value})}
+        onInput={event => {
+          player.controls.Seek({fraction: event.currentTarget.value});
+        }}
+        onTouchStart={() => setHovering(true)}
+        onTouchMove={event => {
+          const { left, width } = event.currentTarget.getBoundingClientRect();
+          const progress = event.touches[0].pageX / (width - left);
+          setHoverPosition(progress);
+
+          player.controls.Seek({fraction: progress});
+        }}
+        onTouchEnd={() => setHovering(false)}
         onKeyDown={seekKeydownHandler}
         className={CommonStyles["seek-input"]}
       />
+      <Thumbnail
+        player={player}
+        progress={focused ? currentTime / videoState.duration : hoverPosition}
+        videoState={videoState}
+        visible={hovering || focused}
+      />
     </div>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "![Eluvio Logo](lib/static/images/Logo.png \"Eluvio Logo\")",
   "main": "dist/elv-player-js.es.js",
   "license": "MIT",
@@ -36,11 +36,12 @@
     "package-lock.json"
   ],
   "dependencies": {
-    "@eluvio/elv-client-js": "^4.2.4",
+    "@eluvio/elv-client-js": "^4.2.5",
     "dashjs": "git+https://github.com/elv-zenia/dash.js.git#text-track-fix",
     "focus-visible": "^5.2.0",
     "hls.js": "1.6.13",
     "mux-embed": "^5.9.0",
+    "node-interval-tree": "^2.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "resize-observer-polyfill": "^1.5.1",