@eluvio/elv-player-js 1.0.84 → 1.0.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "1.0.84",
+  "version": "1.0.86",
   "description": "![Eluvio Logo](src/static/images/Logo.png \"Eluvio Logo\")",
   "main": "src/index.js",
   "license": "MIT",

package/src/PlayerControls.js

@@ -107,7 +107,7 @@ const Time = (time, total) => {
 };
 
 class PlayerControls {
-  constructor(target, video, playerOptions, posterUrl) {
+  constructor(target, video, playerOptions, posterUrl, className) {
     this.target = target;
     this.video = video;
     this.playerOptions = playerOptions;
@@ -128,7 +128,7 @@ class PlayerControls {
     this.controlsHover = false;
     this.progressHidden = false;
 
-    this.InitializeControls();
+    this.InitializeControls(className);
   }
 
   FadeOut(key, elements, delay=250, callback) {
@@ -251,7 +251,7 @@ class PlayerControls {
     }
   }
 
-  InitializeControls() {
+  InitializeControls(className="") {
     this.target.setAttribute("tabindex", "0");
 
     if(this.playerOptions.watermark) {
@@ -385,7 +385,7 @@ class PlayerControls {
     const controls = CreateElement({
       parent: this.target,
       type: "div",
-      classes: ["eluvio-player__controls"]
+      classes: ["eluvio-player__controls", className]
     });
 
     this.controls = controls;

package/src/index.js

@@ -114,10 +114,11 @@ const DefaultParameters = {
     settings: EluvioPlayerParameters.settings.ON,
     posterUrl: undefined,
     className: undefined,
+    controlsClassName: undefined,
     hlsjsOptions: undefined,
     dashjsOptions: undefined,
     // eslint-disable-next-line no-unused-vars
-    playerCallback: ({videoElement, hlsPlayer, dashPlayer, posterUrl}) => {},
+    playerCallback: ({player, videoElement, hlsPlayer, dashPlayer, posterUrl}) => {},
     errorCallback: (error) => {
       // eslint-disable-next-line no-console
       console.error("ELUVIO PLAYER: Error");
@@ -540,7 +541,7 @@ export class EluvioPlayer {
 
       const controlsPromise = this.PosterUrl().then(posterUrl => {
         this.posterUrl = posterUrl;
-        this.controls = new PlayerControls(this.target, this.video, this.playerOptions, posterUrl);
+        this.controls = new PlayerControls(this.target, this.video, this.playerOptions, posterUrl, this.playerOptions.controlsClassName);
       });
 
       if(this.clientOptions.promptTicket && !this.clientOptions.ticketCode) {
@@ -732,6 +733,7 @@ export class EluvioPlayer {
 
       if(this.playerOptions.playerCallback) {
         this.playerOptions.playerCallback({
+          player: this,
           videoElement: this.video,
           hlsPlayer,
           dashPlayer,

package/src/static/stylesheets/player.scss

@@ -592,11 +592,13 @@ $button-height: 35px;
     }
 
     .eluvio-player__controls__button {
-      height: CALC(#{$button-height} * 0.9);
-      max-height: CALC(#{$button-height} * 0.9);
-      max-width: CALC(#{$button-height} * 0.9);
-      min-height: CALC(#{$button-height} * 0.9);
-      min-width: CALC(#{$button-height} * 0.9);
+      &:not(.eluvio-player__big-play-button) {
+        height: CALC(#{$button-height} * 0.9);
+        max-height: CALC(#{$button-height} * 0.9);
+        max-width: CALC(#{$button-height} * 0.9);
+        min-height: CALC(#{$button-height} * 0.9);
+        min-width: CALC(#{$button-height} * 0.9);
+      }
     }
 
     .eluvio-player__controls__volume-container {
@@ -604,10 +606,10 @@ $button-height: 35px;
     }
 
     .eluvio-player__big-play-button {
-      max-height: 75px;
-      max-width: 75px;
-      min-height: 75px;
-      min-width: 75px;
+      max-height: 55px;
+      max-width: 55px;
+      min-height: 55px;
+      min-width: 55px;
     }
 
     .eluvio-player__ticket-modal {