@eluvio/elv-player-js 2.1.33 → 2.1.35

package/dist/{index-BAMTZqd_.mjs → index-Do5hokOx.mjs}

@@ -1,4 +1,4 @@
-import { c as DI, r as tI, a as TA, b as rI, d as oA, e as uA, f as PA, g as cI } from "./index-DjFcABDu.mjs";
+import { c as DI, r as tI, a as TA, b as rI, d as oA, e as uA, f as PA, g as cI } from "./index-2H2xCtem.mjs";
 class BA {
   constructor(B) {
     this.wasm = B;

package/lib/player/Controls.js

@@ -1095,6 +1095,19 @@ class PlayerControls {
     this.player.Destroy();
   }
 
+  OverlayAvailable() {
+    return !!this.player.__poseOverlayTags;
+  }
+
+  OverlayVisible() {
+    return this.player.__showOverlay;
+  }
+
+  ToggleOverlayVisibility() {
+    this.player.__showOverlay = !this.player.__showOverlay;
+    this.player.__SettingsUpdate();
+  }
+
   GetDebugInfo() {
     const sourceOptions = JSON.parse(JSON.stringify(this.player.sourceOptions));
     delete sourceOptions.playoutOptions;

package/lib/player/Player.js

@@ -330,6 +330,16 @@ export class EluvioPlayer {
 
     const offset = (properties || {}).start_offset_float || 0;
     const thumbnailOffset = (clipStart || 0) + (offset || 0);
+    let frameRate = (properties || {}).rate;
+    if(frameRate && typeof frameRate === "string") {
+      const [num, denom] = frameRate.split("/");
+
+      if(!denom) {
+        frameRate = parseInt(num);
+      } else {
+        frameRate = parseInt(num) / parseInt(denom);
+      }
+    }
 
     return {
       playoutParameters: {
@@ -351,6 +361,8 @@ export class EluvioPlayer {
       clipEnd: options.clip_end,
       trimOffset: offset,
       thumbnailOffset,
+      frameRateRat: properties.rate,
+      frameRate,
       sessionId: this.sourceOptions.playoutOptions.sessionId,
       multiviewOptions: {
         enabled: this.sourceOptions.playoutOptions.multiview,
@@ -552,7 +564,9 @@ export class EluvioPlayer {
         offering,
         compositionKey,
         clipStart,
-        clipEnd
+        clipEnd,
+        frameRate,
+        frameRateRat
       } = await this.__PlayoutOptions();
 
       this.playoutInfo = {
@@ -563,7 +577,9 @@ export class EluvioPlayer {
         trimOffset,
         thumbnailOffset,
         clipStart,
-        clipEnd
+        clipEnd,
+        frameRate,
+        frameRateRat
       };
 
       this.contentHash = versionHash;
@@ -618,6 +634,15 @@ export class EluvioPlayer {
           .catch(error => this.Log(error, true));
       }
 
+      if(this.playerOptions.loadPoseOverlay) {
+        this.__LoadPoseOverlayTags({...(this.playoutInfo || {})})
+          .then(poseOverlayTags => {
+            this.__poseOverlayTags = poseOverlayTags;
+            this.__showOverlay = true;
+          })
+          .catch(error => this.Log(error, true));
+      }
+
       if(this.playerOptions.playerCallback) {
         this.playerOptions.playerCallback({
           player: this,
@@ -1534,6 +1559,49 @@ export class EluvioPlayer {
       }));
   }
 
+  async __LoadPoseOverlayTags({objectId, offering, compositionKey, clipStart, clipEnd}) {
+    const {tracks} = await this.__QueryAIAPI({
+      objectId,
+      path: UrlJoin("/tagstore", objectId, "tracks"),
+      queryParams: {
+        has_frame_info: true
+      },
+      format: "JSON"
+    });
+
+    if(!tracks.find(track => track.name === "pose")) {
+      return;
+    }
+
+    let frameTags = {};
+    ((await this.__QueryAIAPI({
+      objectId,
+      path: offering || compositionKey ?
+        UrlJoin("/tagstore", objectId, "compositions", "tags") :
+        UrlJoin("/tagstore", objectId, "tags"),
+      queryParams: {
+        has_frame_info: true,
+        channel_key: compositionKey,
+        offering_key: offering,
+        limit: 1000000,
+        track: "pose",
+        clip_start: clipStart,
+        clip_end: clipEnd
+      },
+      format: "JSON"
+    })).tags || [])
+      .forEach(tag => {
+        const frame = parseInt(tag.frame_info.frame_idx);
+        if(!frameTags[frame]) {
+          frameTags[frame] = [];
+        }
+
+        frameTags[frame].push(tag);
+      });
+
+    return frameTags;
+  }
+
   async __QueryAIAPI({
     server="ai",
     method="GET",

package/lib/player/PlayerParameters.js

@@ -108,6 +108,10 @@ export const PlayerParameters = {
   loadChapters: {
     OFF: false,
     ON: true
+  },
+  loadPoseOverlay: {
+    OFF: false,
+    ON: true
   }
 };
 
@@ -190,6 +194,7 @@ export const DefaultParameters = {
     allowCasting: PlayerParameters.allowCasting.ON,
     preferNativeHLS: PlayerParameters.preferNativeHLS.OFF,
     loadChapters: PlayerParameters.loadChapters.OFF,
+    loadPoseOverlay: PlayerParameters.loadPoseOverlay.OFF,
     startTime: undefined,
     startProgress: undefined,
     hlsjsOptions: undefined,

package/lib/player/ThumbnailHandler.js

@@ -188,7 +188,7 @@ class ThumbnailHandler {
 
     if(!thumbnailIndex) { return; }
 
-    const tag = this.thumbnails && this.thumbnails[thumbnailIndex?.toString()];
+    const tag = this.thumbnails && this.thumbnails[thumbnailIndex.toString()];
 
     if(!tag) {
       return;

package/lib/static/icons/Icons.js

@@ -35,3 +35,4 @@ export const CopyIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"
 export const AirplayIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-airplay\"><path d=\"M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1\"></path><polygon points=\"12 15 17 21 7 21 12 15\"></polygon></svg>";
 export const ChromecastIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-cast\"><path d=\"M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6\"></path><line x1=\"2\" y1=\"20\" x2=\"2.01\" y2=\"20\"></line></svg>";
 export const InfoIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-info\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line></svg>";
+export const OverlayIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.16602 7.29169H6.45768C6.91792 7.29169 7.29102 6.91859 7.29102 6.45835V5.16669H12.9576V6.45835C12.9576 6.91859 13.3307 7.29169 13.7909 7.29169H15.0826V12.9584H13.7909C13.3307 12.9584 12.9576 13.3314 12.9576 13.7917V15.0834H7.29102V13.7917C7.29102 13.3314 6.91792 12.9584 6.45768 12.9584H5.16602V7.29169Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 4.14352C3.75 4.03915 3.79146 3.93906 3.86526 3.86526C3.93906 3.79146 4.03915 3.75 4.14352 3.75H6.89815C7.00252 3.75 7.10261 3.79146 7.17641 3.86526C7.25021 3.93906 7.29167 4.03915 7.29167 4.14352V6.89815C7.29167 7.00252 7.25021 7.10261 7.17641 7.17641C7.10261 7.25021 7.00252 7.29167 6.89815 7.29167H4.14352C4.03915 7.29167 3.93906 7.25021 3.86526 7.17641C3.79146 7.10261 3.75 7.00252 3.75 6.89815V4.14352Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 13.3518C3.75 13.2475 3.79146 13.1474 3.86526 13.0736C3.93906 12.9998 4.03915 12.9583 4.14352 12.9583H6.89815C7.00252 12.9583 7.10261 12.9998 7.17641 13.0736C7.25021 13.1474 7.29167 13.2475 7.29167 13.3518V16.1065C7.29167 16.2108 7.25021 16.3109 7.17641 16.3847C7.10261 16.4585 7.00252 16.5 6.89815 16.5H4.14352C4.03915 16.5 3.93906 16.4585 3.86526 16.3847C3.79146 16.3109 3.75 16.2108 3.75 16.1065V13.3518Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.959 13.3518C12.959 13.2475 13.0004 13.1474 13.0742 13.0736C13.148 12.9998 13.2481 12.9583 13.3525 12.9583H16.1071C16.2115 12.9583 16.3116 12.9998 16.3854 13.0736C16.4592 13.1474 16.5007 13.2475 16.5007 13.3518V16.1065C16.5007 16.2108 16.4592 16.3109 16.3854 16.3847C16.3116 16.4585 16.2115 16.5 16.1071 16.5H13.3525C13.2481 16.5 13.148 16.4585 13.0742 16.3847C13.0004 16.3109 12.959 16.2108 12.959 16.1065V13.3518Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.959 4.14352C12.959 4.03915 13.0004 3.93906 13.0742 3.86526C13.148 3.79146 13.2481 3.75 13.3525 3.75H16.1071C16.2115 3.75 16.3116 3.79146 16.3854 3.86526C16.4592 3.93906 16.5007 4.03915 16.5007 4.14352V6.89815C16.5007 7.00252 16.4592 7.10261 16.3854 7.17641C16.3116 7.25021 16.2115 7.29167 16.1071 7.29167H13.3525C13.2481 7.29167 13.148 7.25021 13.0742 7.17641C13.0004 7.10261 12.959 7.00252 12.959 6.89815V4.14352Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>";

package/lib/static/icons/svgs/overlay.svg

@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.16602 7.29169H6.45768C6.91792 7.29169 7.29102 6.91859 7.29102 6.45835V5.16669H12.9576V6.45835C12.9576 6.91859 13.3307 7.29169 13.7909 7.29169H15.0826V12.9584H13.7909C13.3307 12.9584 12.9576 13.3314 12.9576 13.7917V15.0834H7.29102V13.7917C7.29102 13.3314 6.91792 12.9584 6.45768 12.9584H5.16602V7.29169Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.75 4.14352C3.75 4.03915 3.79146 3.93906 3.86526 3.86526C3.93906 3.79146 4.03915 3.75 4.14352 3.75H6.89815C7.00252 3.75 7.10261 3.79146 7.17641 3.86526C7.25021 3.93906 7.29167 4.03915 7.29167 4.14352V6.89815C7.29167 7.00252 7.25021 7.10261 7.17641 7.17641C7.10261 7.25021 7.00252 7.29167 6.89815 7.29167H4.14352C4.03915 7.29167 3.93906 7.25021 3.86526 7.17641C3.79146 7.10261 3.75 7.00252 3.75 6.89815V4.14352Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.75 13.3518C3.75 13.2475 3.79146 13.1474 3.86526 13.0736C3.93906 12.9998 4.03915 12.9583 4.14352 12.9583H6.89815C7.00252 12.9583 7.10261 12.9998 7.17641 13.0736C7.25021 13.1474 7.29167 13.2475 7.29167 13.3518V16.1065C7.29167 16.2108 7.25021 16.3109 7.17641 16.3847C7.10261 16.4585 7.00252 16.5 6.89815 16.5H4.14352C4.03915 16.5 3.93906 16.4585 3.86526 16.3847C3.79146 16.3109 3.75 16.2108 3.75 16.1065V13.3518Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.959 13.3518C12.959 13.2475 13.0004 13.1474 13.0742 13.0736C13.148 12.9998 13.2481 12.9583 13.3525 12.9583H16.1071C16.2115 12.9583 16.3116 12.9998 16.3854 13.0736C16.4592 13.1474 16.5007 13.2475 16.5007 13.3518V16.1065C16.5007 16.2108 16.4592 16.3109 16.3854 16.3847C16.3116 16.4585 16.2115 16.5 16.1071 16.5H13.3525C13.2481 16.5 13.148 16.4585 13.0742 16.3847C13.0004 16.3109 12.959 16.2108 12.959 16.1065V13.3518Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.959 4.14352C12.959 4.03915 13.0004 3.93906 13.0742 3.86526C13.148 3.79146 13.2481 3.75 13.3525 3.75H16.1071C16.2115 3.75 16.3116 3.79146 16.3854 3.86526C16.4592 3.93906 16.5007 4.03915 16.5007 4.14352V6.89815C16.5007 7.00252 16.4592 7.10261 16.3854 7.17641C16.3116 7.25021 16.2115 7.29167 16.1071 7.29167H13.3525C13.2481 7.29167 13.148 7.25021 13.0742 7.17641C13.0004 7.10261 12.959 7.00252 12.959 6.89815V4.14352Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/lib/static/stylesheets/controls-web.module.scss

@@ -84,6 +84,10 @@
     }
   }
 
+  &--no-padding {
+    padding: 0;
+  }
+
   &:disabled {
     opacity: 0.5;
   }

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

@@ -12,6 +12,7 @@
   font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   height: 100%;
   inset: 0;
+  overflow: hidden;
   position: absolute;
   width: 100%;
 
@@ -130,6 +131,12 @@
   }
 }
 
+.overlay {
+  pointer-events: none;
+  position: absolute;
+  z-index: 1000;
+}
+
 :global(.__eluvio-player--size-md),
 :global(.__eluvio-player--size-sm) {
   .error-message {

package/lib/ui/BuildIcons.cjs

@@ -37,7 +37,8 @@ const iconSource = {
   CopyIcon: Path.resolve(__dirname, "../static/icons/svgs/copy.svg"),
   AirplayIcon: Path.resolve(__dirname, "../static/icons/svgs/airplay.svg"),
   ChromecastIcon: Path.resolve(__dirname, "../static/icons/svgs/cast.svg"),
-  InfoIcon: Path.resolve(__dirname, "../static/icons/svgs/info.svg")
+  InfoIcon: Path.resolve(__dirname, "../static/icons/svgs/info.svg"),
+  OverlayIcon: Path.resolve(__dirname, "../static/icons/svgs/overlay.svg")
 };
 
 let iconFile = "// WARNING: Do not edit this file manually\n";

package/lib/ui/Overlay.jsx

@@ -0,0 +1,159 @@
+import PlayerStyles from "../static/stylesheets/player.module.scss";
+import {useEffect, useState} from "react";
+
+const POINT_CONNECTIONS = [["Nose","LEyeIn"],["LEyeIn","LEye"],["LEye","REyeOut"],["REyeOut","LEar"],["Nose","REyeIn"],["REyeIn","REye"],["REye","REyeOut"],["REyeOut","REar"],["MouthL","MouthR"],["LShoulder","RShoulder"],["LShoulder","LElbow"],["LElbow","LWrist"],["LWrist","LPinky"],["LWrist","LIndex"],["LWrist","LThumb"],["LPinky","LIndex"],["RShoulder","RElbow"],["RElbow","RWrist"],["RWrist","RPinky"],["RWrist","RIndex"],["RWrist","RThumb"],["RPinky","RIndex"],["LShoulder","LHip"],["RShoulder","RHip"],["LHip","RHip"],["LHip","LKnee"],["RHip","RKnee"],["LKnee","LAnkle"],["RKnee","RAnkle"],["LAnkle","LHeel"],["RAnkle","RHeel"],["LHeel","LFootIdx"],["RHeel","RFootIdx"],["LAnkle","LFootIdx"],["RAnkle","RFootIdx"]];
+
+let frameSpread = 5;
+const Canvas = ({tags, portalDimensions, videoDimensions}) => {
+  const [canvas, setCanvas] = useState(null);
+
+  useEffect(() => {
+    if(!canvas || !portalDimensions || videoDimensions.videoWidth === 0) { return; }
+
+    canvas.width = canvas.getBoundingClientRect().width;
+    canvas.height = canvas.getBoundingClientRect().height;
+
+    const color = {
+      r: 255,
+      g: 255,
+      b: 255
+    };
+
+    // Draw
+    const context = canvas.getContext("2d");
+    const width = context.canvas.width;
+    const height = context.canvas.height;
+    const toHex = n => n.toString(16).padStart(2, "0");
+
+    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+    context.lineWidth = 3;
+
+    if(!tags || tags.length === 0) { return; }
+
+    tags.forEach(tag => {
+      if(!tag || !tag.additional_info || !tag.additional_info.pose) {
+        return;
+      }
+
+      context.lineWidth = 3;
+      context.strokeStyle = `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}`;
+      context.fillStyle = `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}`;
+
+      context.globalAlpha = 0.7;
+
+      Object.values(tag.additional_info.pose).forEach(([x, y]) => {
+        context.beginPath();
+        context.arc(x * width, y * height, 1.5, 0, 2 * Math.PI);
+        context.fill();
+        context.stroke();
+      });
+
+      POINT_CONNECTIONS
+        .forEach(([start, end]) => {
+          if(!tag.additional_info.pose[start] || !tag.additional_info.pose[end]) {
+            return;
+          }
+          const [startX, startY] = tag.additional_info.pose[start];
+          const [endX, endY] = tag.additional_info.pose[end];
+
+          context.beginPath();
+          context.moveTo(startX * width, startY * height);
+          context.lineTo(endX * width, endY * height);
+          context.stroke();
+        });
+    });
+  }, [tags]);
+
+
+  if(!portalDimensions || videoDimensions.videoWidth === 0) { return null; }
+
+  const portalAspectRatio = portalDimensions.width / portalDimensions.height;
+  const videoAspectRatio = videoDimensions.videoWidth / videoDimensions.videoHeight;
+
+  let params = {};
+  if(portalAspectRatio < videoAspectRatio) {
+    // Vertical padding
+    params.width = portalDimensions.width;
+    params.height = portalDimensions.width / videoAspectRatio;
+    params.left = 0;
+    params.top = (portalDimensions.height - (portalDimensions.width / videoAspectRatio)) / 2;
+  } else {
+    // Horizontal padding
+    params.height = portalDimensions.height;
+    params.width = portalDimensions.height * videoAspectRatio;
+    params.top = 0;
+    params.left = (portalDimensions.width - (portalDimensions.height * videoAspectRatio)) / 2;
+  }
+
+  return (
+    <canvas
+      ref={setCanvas}
+      style={params}
+      className={PlayerStyles["overlay"]}
+    />
+  );
+};
+
+const Overlay = ({player}) => {
+  const [portalDimensions, setPortalDimensions] = useState(null);
+  const [frame, setFrame] = useState(null);
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() =>
+      setPortalDimensions(player.video.getBoundingClientRect())
+    );
+
+    resizeObserver.observe(player.video);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [player.video]);
+
+  useEffect(() => {
+    const frameRate = (player.playoutInfo || {}).frameRate;
+
+    if(!frameRate) { return; }
+
+    const StartInterval = () => {
+      clearInterval(player.__frameInterval);
+
+      player.__frameInterval = setInterval(
+        () => setFrame(Math.floor(player.video.currentTime * frameRate)),
+        1000 / player.playoutInfo.frameRate
+      );
+    };
+
+    player.controls.RegisterVideoEventListener("play", StartInterval);
+    player.controls.RegisterVideoEventListener(
+      "pause",
+      () => clearInterval(player.__frameInterval)
+    );
+
+    if(!player.video.paused) {
+      StartInterval();
+    }
+  }, [(player.playoutInfo || {}).frameRate]);
+
+  let tags;
+  for(let i = frame; i > frame - frameSpread; i--) {
+    tags = player.__poseOverlayTags && player.__poseOverlayTags[i];
+
+    if(tags && tags.length > 0) {
+      break;
+    }
+  }
+
+  return (
+    <Canvas
+      tags={tags}
+      portalDimensions={portalDimensions}
+      videoDimensions={{
+        videoWidth: player.video.videoWidth,
+        videoHeight: player.video.videoHeight
+      }}
+    />
+  );
+};
+
+export default Overlay;

package/lib/ui/PlayerUI.jsx

@@ -20,6 +20,7 @@ import TVControls from "./TVControls.jsx";
 import PlayerProfileForm from "./PlayerProfileForm.jsx";
 import {ImageUrl, MergeDefaultParameters, MergeParameters} from "./Common.js";
 import * as Icons from "../static/icons/Icons";
+import Overlay from "./Overlay";
 
 const Poster = ({player}) => {
   const [imageUrl, setImageUrl] = useState(undefined);
@@ -75,6 +76,7 @@ const PlayerUI = ({
   const [recentUserAction, setRecentUserAction] = useState(undefined);
   const [allowRotation, setAllowRotation] = useState(undefined);
   const [casting, setCasting] = useState(false);
+  const [showOverlay, setShowOverlay] = useState(false);
   const videoRef = useRef();
 
   const playerSet = !!player;
@@ -126,6 +128,7 @@ const PlayerUI = ({
           setPlayerInitialized(!newPlayer.loading);
           setShowPlayerProfileForm(newPlayer.__showPlayerProfileForm);
           setCasting(newPlayer && newPlayer.casting);
+          setShowOverlay(newPlayer.controls.OverlayVisible());
         }
       );
 
@@ -254,6 +257,10 @@ const PlayerUI = ({
         (playbackStarted && !parameters.playerOptions.permanentPoster) ? null :
           <Poster player={player} />
       }
+      {
+        !showOverlay ? null :
+          <Overlay player={player} />
+      }
       {
         playerInitialized || errorMessage || !parameters.playerOptions.showLoader ? null :
           <div className={PlayerStyles["spinner-container"]}>
@@ -290,6 +297,8 @@ const PlayerUI = ({
               canPlay={canPlay}
               recentlyInteracted={recentlyInteracted}
               setRecentUserAction={onUserAction}
+              showOverlay={showOverlay}
+              setShowOverlay={setShowOverlay}
               className={PlayerStyles.controls}
             /> :
             <TVControls

package/lib/ui/WebControls.jsx

@@ -198,7 +198,14 @@ const ContentVerificationControls = ({player}) => {
   );
 };
 
-const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRecentUserAction, className=""}) => {
+const WebControls = ({
+  player,
+  playbackStarted,
+  canPlay,
+  recentlyInteracted,
+  setRecentUserAction,
+  className=""
+}) => {
   const [videoState, setVideoState] = useState(undefined);
   const [playerClickHandler, setPlayerClickHandler] = useState(undefined);
   const [menuVisible, setMenuVisible] = useState(player.controls.IsMenuVisible());
@@ -292,6 +299,19 @@ const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setR
                     />
                 }
 
+                {
+                  !player.controls.OverlayAvailable() ? null :
+                    <IconButton
+                      aria-label="Toggle Overlay"
+                      onClick={() => player.controls.ToggleOverlayVisibility()}
+                      icon={Icons.OverlayIcon}
+                      className={[
+                        ControlStyles["icon-button--no-padding"],
+                        player.controls.OverlayVisible() ? ControlStyles["icon-button-active"] : ""
+                      ].join(" ")}
+                    />
+                }
+
                 {
                   !player.controls.IsRotatable() ? null :
                     <IconButton

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "2.1.33",
+  "version": "2.1.35",
   "description": "![Eluvio Logo](lib/static/images/Logo.png \"Eluvio Logo\")",
   "main": "dist/elv-player-js.es.js",
   "license": "MIT",