@eluvio/elv-player-js 2.1.19 → 2.1.20

package/lib/player/Controls.js

@@ -87,6 +87,16 @@ class PlayerControls {
     return this.player.playbackStarted;
   }
 
+  HasAudio() {
+    if(!this.player || !this.player.video) { return false; }
+
+    return (
+      this.player.video.mozHasAudio ||
+      !!this.player.video.webkitAudioDecodedByteCount ||
+      !!this.player.video.audioTracks && this.player.video.audioTracks.length
+    );
+  }
+
   /**
    * Play the video
    *

package/lib/player/Player.js

@@ -286,7 +286,7 @@ export class EluvioPlayer {
           offset = parseInt(offsetRat);
         }
        }
-    } catch(error) {}
+    } catch(error) { /* empty */ }
 
     return {
       playoutParameters: {
@@ -1037,7 +1037,7 @@ export class EluvioPlayer {
       await this.video.play();
       return true;
     } catch(error) {
-      if(error.toString()?.includes("AbortError")) {
+      if(error && (error.toString() || "").includes("AbortError")) {
         return false;
       }
 

package/lib/player/ThumbnailHandler.js

@@ -188,7 +188,7 @@ class ThumbnailHandler {
 
     if(!thumbnailIndex) { return; }
 
-    const tag = this.thumbnails?.[thumbnailIndex?.toString()];
+    const tag = this.thumbnails && this.thumbnails[thumbnailIndex?.toString()];
 
     if(!tag) {
       return;
@@ -198,7 +198,7 @@ class ThumbnailHandler {
       this.thumbnailCanvas = document.createElement("canvas");
     }
 
-    const image = this.thumbnailImages[tag?.imageUrl];
+    const image = this.thumbnailImages[tag.imageUrl];
 
     if(image) {
       const [x, y, w, h] = tag.thumbnailPosition;

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

@@ -52,7 +52,8 @@
 
   &:not(:has(:focus-visible)) {
     .info-container,
-    .bottom-controls-container--autohide {
+    .bottom-controls-container--autohide,
+    .floating-volume-toggle {
       opacity: 0;
       pointer-events: none;
       user-select: none;
@@ -323,7 +324,15 @@ google-cast-launcher {
   height: 30px;
   position: absolute;
   right: 30px;
+  transition: opacity 0.5s ease;
   width: 30px;
+
+  &.floating-volume-toggle {
+    button {
+      height: 100%;
+      width: 100%;
+    }
+  }
 }
 
 .watermark {
@@ -438,8 +447,8 @@ google-cast-launcher {
   }
 
   .live-indicator {
-    padding: 1px 5px;
     font-size: 10px;
+    padding: 1px 5px;
   }
 
   .info-container {

package/lib/ui/WebControls.jsx

@@ -225,7 +225,7 @@ const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setR
 
   // Title autohide is not dependent on controls settings
   const showUI = recentlyInteracted || !playbackStarted || menuVisible;
-  const hideControls = !showUI && player.playerOptions.controls === EluvioPlayerParameters.controls.AUTO_HIDE;
+  const hideControls = !showUI && [EluvioPlayerParameters.controls.AUTO_HIDE, EluvioPlayerParameters.controls.OFF_WITH_VOLUME_TOGGLE].includes(player.playerOptions.controls);
 
   player.__SetControlsVisibility(!hideControls);
 
@@ -322,7 +322,7 @@ const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setR
       }
       {
         // Floating volume control for 'off with volume toggle' setting
-        player.playerOptions.controls !== EluvioPlayerParameters.controls.OFF_WITH_VOLUME_TOGGLE ? null :
+        player.playerOptions.controls !== EluvioPlayerParameters.controls.OFF_WITH_VOLUME_TOGGLE || !player.controls.HasAudio() ? null :
           <div className={ControlStyles["floating-volume-toggle"]}>
             <IconButton
               key="mute-button"

package/package.json

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