@gcorevideo/player 2.28.25 → 2.28.27

package/src/plugins/logo/Logo.ts

@@ -1,237 +1,266 @@
-import { UIContainerPlugin, Events, template as t, Container } from '@clappr/core';
+import {
+  UIContainerPlugin,
+  Events,
+  template as t,
+  Container,
+} from '@clappr/core'
 
-import { CLAPPR_VERSION } from '../../build.js';
-import { calculateSize } from './utils/index.js';
-import { ZeptoResult } from '../../types.js';
+import { CLAPPR_VERSION } from '../../build.js'
+import { calculateSize } from './utils/index.js'
+import { ZeptoResult } from '../../types.js'
 
-import logoHTML from '../../../assets/logo/templates/logo.ejs';
-import '../../../assets/logo/styles/logo.scss';
+import logoHTML from '../../../assets/logo/templates/logo.ejs'
+import '../../../assets/logo/styles/logo.scss'
 
-type PositionStyleAttr = 'top' | 'bottom' | 'left' | 'right';
+type PositionStyleAttr = 'top' | 'bottom' | 'left' | 'right'
 
 type LogoOptions = {
   // TODO check
-  width?: number;
-  height?: number;
-  top?: number;
-  bottom?: number;
-  left?: number;
-  right?: number;
-  objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
-};
+  width?: number
+  height?: number
+  top?: number
+  bottom?: number
+  left?: number
+  right?: number
+  objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
+}
 
 /**
  * `PLUGIN` that adds custom logo to the player.
  * @beta
  */
 export class Logo extends UIContainerPlugin {
-  private hasStartedPlaying = false;
+  private hasStartedPlaying = false
 
-  private $logoContainer: ZeptoResult | null = null;
+  private $logoContainer: ZeptoResult | null = null
 
   get name() {
-    return 'logo';
+    return 'logo'
   }
 
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
   get template() {
-    return t(logoHTML);
+    return t(logoHTML)
   }
 
   override get attributes() {
     return {
-      'class': 'player-logo',
-      'data-logo': ''
-    };
+      class: 'player-logo',
+      'data-logo': '',
+    }
   }
 
   private get shouldRender() {
-    return !!this.options.logo && !!this.options.logo.path;
+    return !!this.options.logo && !!this.options.logo.path
   }
 
   override bindEvents() {
-    window.addEventListener('resize', this.setPosition);
-    this.listenTo(this.container, Events.CONTAINER_RESIZE, this.setPosition);
-    this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop);
-    this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay);
-    this.listenTo(this.container, Events.CONTAINER_LOADEDMETADATA, this.setPosition);
+    window.addEventListener('resize', this.setPosition)
+    this.listenTo(this.container, Events.CONTAINER_RESIZE, this.setPosition)
+    this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop)
+    this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay)
+    this.listenTo(
+      this.container,
+      Events.CONTAINER_LOADEDMETADATA,
+      this.setPosition,
+    )
   }
 
   override stopListening() {
-    window.removeEventListener('resize', this.setPosition);
+    window.removeEventListener('resize', this.setPosition)
     // @ts-ignore
-    return super.stopListening();
+    return super.stopListening()
   }
 
   private onPlay() {
-    this.hasStartedPlaying = true;
-    this.setPosition();
+    this.hasStartedPlaying = true
+    this.setPosition()
   }
 
   private onStop() {
-    this.hasStartedPlaying = false;
-    this.update();
+    this.hasStartedPlaying = false
+    this.update()
   }
 
   private update() {
     if (!this.shouldRender) {
-      return;
+      return
     }
 
     if (!this.hasStartedPlaying) {
-      this.$el.hide();
+      this.$el.hide()
     } else {
-      this.$el.show();
+      this.$el.show()
     }
   }
 
   constructor(container: Container) {
-    super(container);
-    this.setPosition = this.setPosition.bind(this);
-    this.hasStartedPlaying = false;
+    super(container)
+    this.setPosition = this.setPosition.bind(this)
+    this.hasStartedPlaying = false
     if (!this.options.logo) {
-      this.disable();
+      this.disable()
 
-      return;
+      return
     }
-    this.render();
+    this.render()
   }
 
   override render() {
     if (!this.shouldRender) {
-      return this;
+      return this
     }
-    this.$el.html(this.template());
+    this.$el.html(this.template())
 
-    this.setLogoImgAttrs();
-    this.container.$el.append(this.$el.get(0));
-    this.update();
+    this.setLogoImgAttrs()
+    this.container.$el.append(this.$el.get(0))
+    this.update()
 
-    return this;
+    return this
   }
 
   private setLogoImgAttrs() {
-    const { logo: { path: imgUrl, width = 60, height = 60 } } = this.options;
+    const {
+      logo: { path: imgUrl, width = 60, height = 60 },
+    } = this.options
 
-    this.$logoContainer = this.$el.find('.clappr-logo');
-    const $logo = this.$logoContainer.find('.clappr-logo-img');
+    this.$logoContainer = this.$el.find('.clappr-logo')
+    const $logo = this.$logoContainer.find('.clappr-logo-img')
 
     $logo.attr({
-      'src': `${imgUrl}`,
-      'style': `width: ${width}px;height: ${height}px;`
-    });
+      src: `${imgUrl}`,
+      style: `width: ${width}px;height: ${height}px;`,
+    })
   }
 
-  private setLogoWidth(size: { width: number, height: number }) {
-    let { logo: { width = 60, height = 60, objectFit = 'contain' } } = this.options;
-    const $logo = this.$logoContainer.find('.clappr-logo-img');
+  private setLogoWidth(size: { width: number; height: number }) {
+    let {
+      logo: { width = 60, height = 60, objectFit = 'contain' },
+    } = this.options
+    const $logo = this.$logoContainer.find('.clappr-logo-img')
 
     // TODO size must always be defined
     if (size) {
-      const logoWidthTimes = Math.floor(size.width / width);
-      const logoHeightTimes = Math.floor(size.height / height);
+      const logoWidthTimes = Math.floor(size.width / width)
+      const logoHeightTimes = Math.floor(size.height / height)
 
       if (logoHeightTimes < 4) {
-        let maxTimes = logoHeightTimes;
+        let maxTimes = logoHeightTimes
 
         if (logoWidthTimes < 4) {
-          maxTimes = logoWidthTimes < logoHeightTimes ? logoWidthTimes : logoHeightTimes;
+          maxTimes =
+            logoWidthTimes < logoHeightTimes ? logoWidthTimes : logoHeightTimes
         }
         switch (maxTimes) {
           case 0:
           case 1:
-            maxTimes = 2;
-            break;
+            maxTimes = 2
+            break
           case 2:
-            maxTimes = 1.5;
-            break;
+            maxTimes = 1.5
+            break
           case 3:
-            maxTimes = 1;
-            break;
+            maxTimes = 1
+            break
 
           default:
-            break;
+            break
         }
-        width /= maxTimes;
-        height /= maxTimes;
+        width /= maxTimes
+        height /= maxTimes
       } else {
         if (logoWidthTimes < 4) {
-          let maxTimes = 1;
+          let maxTimes = 1
 
           switch (logoWidthTimes) {
             case 0:
             case 1:
-              maxTimes = 2;
-              break;
+              maxTimes = 2
+              break
             case 2:
-              maxTimes = 1.5;
-              break;
+              maxTimes = 1.5
+              break
             case 3:
-              maxTimes = 1;
-              break;
+              maxTimes = 1
+              break
 
             default:
-              break;
+              break
           }
-          width /= maxTimes;
-          height /= maxTimes;
+          width /= maxTimes
+          height /= maxTimes
         }
       }
     }
     $logo.attr({
-      'style': `width: ${width}px;height: ${height}px;object-fit: ${objectFit}`
-    });
+      style: `width: ${width}px;height: ${height}px;object-fit: ${objectFit}`,
+    })
   }
 
   private setPosition() {
     if (!this.shouldRender) {
-      return;
+      return
     }
-    const $el = this.container.$el;
-    const targetRect = $el.get(0).getBoundingClientRect();
-    const $video = $el.find('video[data-html5-video]');
+    const $el = this.container.$el
+    const targetRect = $el.get(0).getBoundingClientRect()
+    const $video = $el.find('video[data-html5-video]')
 
     if (!$video.get(0)) {
-      return;
+      return
     }
-    const { videoWidth, videoHeight } = $video.get(0);
+    const { videoWidth, videoHeight } = $video.get(0)
 
     const dimensions = calculateSize({
       dom: {
         width: targetRect.width,
-        height: targetRect.height
+        height: targetRect.height,
       },
       media: {
         width: videoWidth,
-        height: videoHeight
-      }
-    });
+        height: videoHeight,
+      },
+    })
 
-    const { logo } = this.options;
-    const { letterboxing: { vertical, horizontal } } = dimensions;
+    const { logo } = this.options
+    const {
+      letterboxing: { vertical, horizontal },
+    } = dimensions
 
     if (dimensions.media && dimensions.media.width && dimensions.media.height) {
-      this.setLogoWidth({ width: dimensions.media.width, height: dimensions.media.height });
+      this.setLogoWidth({
+        width: dimensions.media.width,
+        height: dimensions.media.height,
+      })
     }
 
-    const el = this.$logoContainer.get(0);
+    const el = this.$logoContainer.get(0)
 
-    this.setStyles(logo, ['top', 'bottom'], el, vertical);
-    this.setStyles(logo, ['left', 'right'], el, horizontal);
+    this.setStyles(logo, ['top', 'bottom'], el, vertical)
+    this.setStyles(logo, ['left', 'right'], el, horizontal)
 
-    this.update();
+    this.update()
   }
 
-  private setStyles(opts: LogoOptions, props: PositionStyleAttr[], el: HTMLElement, value: number) {
-    props.forEach(p => this.setStyle(opts, p, el, value));
+  private setStyles(
+    opts: LogoOptions,
+    props: PositionStyleAttr[],
+    el: HTMLElement,
+    value: number,
+  ) {
+    props.forEach((p) => this.setStyle(opts, p, el, value))
   }
 
-  private setStyle(opts: LogoOptions, p: PositionStyleAttr, el: HTMLElement, value: number) {
+  private setStyle(
+    opts: LogoOptions,
+    p: PositionStyleAttr,
+    el: HTMLElement,
+    value: number,
+  ) {
     if (opts[p]) {
-      el.style[p] = `${opts[p] + value}px`;
+      el.style[p] = `${opts[p] + value}px`
     }
   }
 }

package/src/plugins/logo/utils/index.ts

@@ -1,46 +1,53 @@
-
 type CalculateSizeInput = {
   dom: {
-    width: number;
-    height: number;
-  };
+    width: number
+    height: number
+  }
   media: {
-    width: number;
-    height: number;
-  };
+    width: number
+    height: number
+  }
 }
 export function calculateSize(original: CalculateSizeInput) {
   const transformed = {
     media: {
       width: 0,
-      height: 0
+      height: 0,
     },
     letterboxing: {
       horizontal: 0,
-      vertical: 0
-    }
-  };
+      vertical: 0,
+    },
+  }
 
   // Freeze viewport height and scale video to fit vertically
-  transformed.media.width = (original.media.width * original.dom.height / original.media.height);
-  transformed.media.height = (original.media.height * transformed.media.width / original.media.width);
+  transformed.media.width =
+    (original.media.width * original.dom.height) / original.media.height
+  transformed.media.height =
+    (original.media.height * transformed.media.width) / original.media.width
 
   // If it didnt't fit, freeze viewport width and scale video to fit horizontally
   if (transformed.media.width > original.dom.width) {
-    transformed.media.height = (original.media.height * original.dom.width / original.media.width);
-    transformed.media.width = (original.media.width * transformed.media.height / original.media.height);
+    transformed.media.height =
+      (original.media.height * original.dom.width) / original.media.width
+    transformed.media.width =
+      (original.media.width * transformed.media.height) / original.media.height
   }
   // Calculate paddings for vertical or horizontal letterboxing
   if (transformed.media.width < original.dom.width) {
-    transformed.letterboxing.horizontal = Math.floor((original.dom.width - transformed.media.width ) / 2);
+    transformed.letterboxing.horizontal = Math.floor(
+      (original.dom.width - transformed.media.width) / 2,
+    )
   } else {
     if (transformed.media.height < original.dom.height) {
-      transformed.letterboxing.vertical = Math.floor((original.dom.height - transformed.media.height) / 2);
+      transformed.letterboxing.vertical = Math.floor(
+        (original.dom.height - transformed.media.height) / 2,
+      )
     }
   }
 
-  transformed.media.width = Math.floor(transformed.media.width);
-  transformed.media.height = Math.floor(transformed.media.height);
+  transformed.media.width = Math.floor(transformed.media.width)
+  transformed.media.height = Math.floor(transformed.media.height)
 
-  return transformed;
+  return transformed
 }

package/src/plugins/media-control/MediaControl.ts

@@ -470,10 +470,8 @@ export class MediaControl extends UICorePlugin {
       Events.CONTAINER_DBLCLICK,
       this.toggleFullscreen,
     )
-    this.listenTo(
-      this.core.activeContainer,
-      Events.CONTAINER_CLICK,
-      () => this.clickaway(this.core.activeContainer.$el[0]),
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_CLICK, () =>
+      this.clickaway(this.core.activeContainer.$el[0]),
     )
     this.listenTo(
       this.core.activeContainer,
@@ -529,8 +527,16 @@ export class MediaControl extends UICorePlugin {
     this.listenTo(this.core, Events.CONTAINER_DESTROYED, () => {
       this.cancelRenderTimer()
     })
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_MOUSE_ENTER, this.show)
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_MOUSE_LEAVE, this.delayHide)
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_MOUSE_ENTER,
+      this.show,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_MOUSE_LEAVE,
+      this.delayHide,
+    )
 
     this.listenTo(this.core.activeContainer, Events.CONTAINER_DESTROYED, () => {
       this.clickaway(null)