@gcorevideo/player 2.28.25 → 2.28.26

package/src/plugins/clips/utils.ts

@@ -27,7 +27,11 @@ export function parseClips(text: string): ClipDesc[] {
   }))
 }
 
-export function buildSvg(clips: ClipDesc[], duration: number, barWidth: number): string {
+export function buildSvg(
+  clips: ClipDesc[],
+  duration: number,
+  barWidth: number,
+): string {
   let svg =
     '<svg width="0" height="0">\n' + '<defs>\n' + '<clipPath id="myClip">\n'
   let rightEdge = 0

package/src/plugins/cmcd-config/CmcdConfig.ts

@@ -152,7 +152,7 @@ export class CmcdConfig extends CorePlugin {
   private generateContentId() {
     const src =
       this.core.options.source ??
-      (typeof this.core.options.sources[0] == 'string'
+      (typeof this.core.options.sources[0] === 'string'
         ? this.core.options.sources[0]
         : this.core.options.sources[0].source)
     return new URL(src).pathname.slice(0, 64)

package/src/plugins/error-screen/__tests__/ErrorScreen.test.ts

@@ -18,11 +18,11 @@ describe('ErrorScreen', () => {
       [
         'targeted at UI',
         {
-          code: "foo",
+          code: 'foo',
           UI: {
             title: 'My error',
             message: 'Lorem ipsum dolor sit amet',
-            icon: '<svg>...</svg>'
+            icon: '<svg>...</svg>',
           },
         },
         true,
@@ -36,7 +36,7 @@ describe('ErrorScreen', () => {
         },
         false,
       ],
-    ])("%s", (_, err, shouldRender) => {
+    ])('%s', (_, err, shouldRender) => {
       beforeEach(() => {
         errorScreen = new ErrorScreen(core)
         core.emit('core:ready')
@@ -66,28 +66,34 @@ describe('ErrorScreen', () => {
             UI: {
               title: 'My error',
               message: 'Lorem ipsum dolor sit amet',
-              icon: '<svg>...</svg>'
+              icon: '<svg>...</svg>',
             },
           })
           core.configure.mockClear()
         })
         describe('when clicked', () => {
           beforeEach(async () => {
-            (errorScreen.el.querySelector('.player-error-screen__reload') as HTMLElement)?.click()
-            return new Promise(resolve => setTimeout(resolve, 0))
+            ;(
+              errorScreen.el.querySelector(
+                '.player-error-screen__reload',
+              ) as HTMLElement
+            )?.click()
+            return new Promise((resolve) => setTimeout(resolve, 0))
           })
           it('should reload the player', () => {
-            expect(core.configure).toHaveBeenCalledWith(expect.objectContaining({
-              reloading: true,
-              source: 'https://222/master.mpd'
-            }))
+            expect(core.configure).toHaveBeenCalledWith(
+              expect.objectContaining({
+                reloading: true,
+                source: 'https://222/master.mpd',
+              }),
+            )
           })
         })
       })
       describe('when disabled', () => {
         beforeEach(() => {
           core.options.errorScreen = {
-            noReload: true
+            noReload: true,
           }
           errorScreen = new ErrorScreen(core)
           core.emit('core:ready')
@@ -97,16 +103,16 @@ describe('ErrorScreen', () => {
             UI: {
               title: 'My error',
               message: 'Lorem ipsum dolor sit amet',
-              icon: '<svg>...</svg>'
+              icon: '<svg>...</svg>',
             },
           })
         })
         it('should not render the reload button', () => {
-          expect(errorScreen.el.querySelector('.player-error-screen__reload')).toBeNull()
+          expect(
+            errorScreen.el.querySelector('.player-error-screen__reload'),
+          ).toBeNull()
         })
       })
     })
   })
 })
-
-

package/src/plugins/favicon/Favicon.ts

@@ -1,14 +1,14 @@
-import { CorePlugin, Events, $, Core, Container } from '@clappr/core';
+import { CorePlugin, Events, $, Core, Container } from '@clappr/core'
 
-import { CLAPPR_VERSION } from '../../build.js';
-import { ZeptoResult } from '../../types.js';
+import { CLAPPR_VERSION } from '../../build.js'
+import { ZeptoResult } from '../../types.js'
 
-import playIcon from '../../../assets/icons/new/play.svg';
-import pauseIcon from '../../../assets/icons/new/pause.svg';
-import stopIcon from '../../../assets/icons/new/stop.svg';
+import playIcon from '../../../assets/icons/new/play.svg'
+import pauseIcon from '../../../assets/icons/new/pause.svg'
+import stopIcon from '../../../assets/icons/new/stop.svg'
 
-const FAVICON_COLOR = '#567';
-const FAVICON_SELECTOR = 'link[rel="shortcut icon"]';
+const FAVICON_COLOR = '#567'
+const FAVICON_SELECTOR = 'link[rel="shortcut icon"]'
 
 /**
  * @public
@@ -17,7 +17,7 @@ export interface FaviconPluginSettings {
   /**
    * CSS color of the favicon.
    */
-  faviconColor?: string;
+  faviconColor?: string
 }
 
 /**
@@ -27,37 +27,37 @@ export interface FaviconPluginSettings {
  * There are three states: stopped, playing and paused.
  */
 export class Favicon extends CorePlugin {
-  private oldIcon: ZeptoResult;
+  private oldIcon: ZeptoResult
 
-  private playIcon: ZeptoResult | null = null;
+  private playIcon: ZeptoResult | null = null
 
-  private pauseIcon: ZeptoResult | null = null;
+  private pauseIcon: ZeptoResult | null = null
 
-  private stopIcon: ZeptoResult | null = null;
+  private stopIcon: ZeptoResult | null = null
 
   /**
    * @internal
    */
   get name() {
-    return 'favicon';
+    return 'favicon'
   }
 
   /**
    * @internal
    */
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
   /**
    * @internal
    */
   constructor(core: Core) {
-    super(core);
-    this.oldIcon = $(FAVICON_SELECTOR);
+    super(core)
+    this.oldIcon = $(FAVICON_SELECTOR)
     if (this.oldIcon.length === 0) {
-      this.stopIcon = this.createIcon(stopIcon);
-      this.changeIcon(this.stopIcon);
+      this.stopIcon = this.createIcon(stopIcon)
+      this.changeIcon(this.stopIcon)
     }
   }
 
@@ -65,74 +65,98 @@ export class Favicon extends CorePlugin {
    * @internal
    */
   override bindEvents() {
-    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.containerChanged);
+    this.listenTo(
+      this.core,
+      Events.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.containerChanged,
+    )
   }
 
   private containerChanged() {
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAY, this.setPlayIcon);
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_PAUSE, this.setPauseIcon);
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_STOP, this.resetIcon);
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_ENDED, this.resetIcon);
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_ERROR, this.resetIcon);
-    this.resetIcon();
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_PLAY,
+      this.setPlayIcon,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_PAUSE,
+      this.setPauseIcon,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_STOP,
+      this.resetIcon,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_ENDED,
+      this.resetIcon,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_ERROR,
+      this.resetIcon,
+    )
+    this.resetIcon()
   }
 
   /**
    * @internal
    */
   override disable() {
-    super.disable();
-    this.resetIcon();
+    super.disable()
+    this.resetIcon()
   }
 
   /**
    * @internal
    */
   override destroy() {
-    super.destroy();
-    this.resetIcon();
+    super.destroy()
+    this.resetIcon()
   }
 
   private createIcon(svg: string) {
-    const canvas = $('<canvas/>');
+    const canvas = $('<canvas/>')
 
-    canvas[0].width = 24;
-    canvas[0].height = 24;
-    const ctx = canvas[0].getContext('2d');
+    canvas[0].width = 24
+    canvas[0].height = 24
+    const ctx = canvas[0].getContext('2d')
 
-    ctx.fillStyle = this.core.options.faviconColor || FAVICON_COLOR;
-    const d = $(svg).find('path').attr('d');
-    const path = new Path2D(d);
+    ctx.fillStyle = this.core.options.faviconColor || FAVICON_COLOR
+    const d = $(svg).find('path').attr('d')
+    const path = new Path2D(d)
 
-    ctx.fill(path);
-    const icon = $('<link rel="shortcut icon" type="image/png"/>');
+    ctx.fill(path)
+    const icon = $('<link rel="shortcut icon" type="image/png"/>')
 
-    icon.attr('href', canvas[0].toDataURL('image/png'));
+    icon.attr('href', canvas[0].toDataURL('image/png'))
 
-    return icon;
+    return icon
   }
 
   private setPlayIcon() {
     if (!this.playIcon) {
-      this.playIcon = this.createIcon(playIcon);
+      this.playIcon = this.createIcon(playIcon)
     }
-    this.changeIcon(this.playIcon);
+    this.changeIcon(this.playIcon)
   }
 
   private setPauseIcon() {
     if (!this.pauseIcon) {
-      this.pauseIcon = this.createIcon(pauseIcon);
+      this.pauseIcon = this.createIcon(pauseIcon)
     }
-    this.changeIcon(this.pauseIcon);
+    this.changeIcon(this.pauseIcon)
   }
 
   private resetIcon() {
-    const icon = this.oldIcon.length > 0 ? this.oldIcon : this.stopIcon;
-    this.changeIcon(icon);
+    const icon = this.oldIcon.length > 0 ? this.oldIcon : this.stopIcon
+    this.changeIcon(icon)
   }
 
   private changeIcon(icon: ZeptoResult) {
-    $('link[rel="shortcut icon"]').remove();
-    $('head').append(icon);
+    $('link[rel="shortcut icon"]').remove()
+    $('head').append(icon)
   }
 }

package/src/plugins/google-analytics/GoogleAnalytics.ts

@@ -2,150 +2,185 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE
 
-import { Container, ContainerPlugin, Events } from '@clappr/core';
+import { Container, ContainerPlugin, Events } from '@clappr/core'
 
-import { CLAPPR_VERSION } from '../../build.js';
+import { CLAPPR_VERSION } from '../../build.js'
 
 declare const _gaq: {
-  push(args: string[]): void;
-};
+  push(args: string[]): void
+}
 
 /**
  * `PLUGIN` that integrates with Google Analytics
  * @beta
  */
 export class GoogleAnalytics extends ContainerPlugin {
-  private account: string = '';
+  private account: string = ''
 
-  private trackerName: string = '';
+  private trackerName: string = ''
 
-  private domainName: string = '';
+  private domainName: string = ''
 
   private currentHDState: string | undefined
 
   get name() {
-    return 'google_analytics';
+    return 'google_analytics'
   }
 
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
   constructor(container: Container) {
-    super(container);
+    super(container)
     if (this.container.options.gaAccount) {
-      this.account = this.container.options.gaAccount;
-      this.trackerName = (this.container.options.gaTrackerName) ? this.container.options.gaTrackerName + '.' : 'Player.';
-      this.domainName = this.container.options.gaDomainName;
-      this.embedScript();
+      this.account = this.container.options.gaAccount
+      this.trackerName = this.container.options.gaTrackerName
+        ? this.container.options.gaTrackerName + '.'
+        : 'Player.'
+      this.domainName = this.container.options.gaDomainName
+      this.embedScript()
     }
   }
 
   embedScript() {
-    if (!('_gat' in window)) { // TODO
-      const script = document.createElement('script');
-
-      script.setAttribute('type', 'text/javascript');
-      script.setAttribute('async', 'async');
-      script.setAttribute('src', '//www.google-analytics.com/ga.js');
-      script.onload = () => this.addEventListeners();
-      document.body.appendChild(script);
+    if (!('_gat' in window)) {
+      // TODO
+      const script = document.createElement('script')
+
+      script.setAttribute('type', 'text/javascript')
+      script.setAttribute('async', 'async')
+      script.setAttribute('src', '//www.google-analytics.com/ga.js')
+      script.onload = () => this.addEventListeners()
+      document.body.appendChild(script)
     } else {
-      this.addEventListeners();
+      this.addEventListeners()
     }
   }
 
   addEventListeners() {
     if (this.container) {
-      this.listenTo(this.container, Events.CONTAINER_READY, this.onReady);
-      this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay);
-      this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop);
-      this.listenTo(this.container, Events.CONTAINER_PAUSE, this.onPause);
-      this.listenTo(this.container, Events.CONTAINER_ENDED, this.onEnded);
-      this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERING, this.onBuffering);
-      this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERFULL, this.onBufferFull);
-      this.listenTo(this.container, Events.CONTAINER_ERROR, this.onError);
-      this.listenTo(this.container, Events.CONTAINER_PLAYBACKSTATE, this.onPlaybackChanged);
-      this.listenTo(this.container, Events.CONTAINER_VOLUME, this.onVolumeChanged);
-      this.listenTo(this.container, Events.CONTAINER_SEEK, this.onSeek);
-      this.listenTo(this.container, Events.CONTAINER_FULLSCREEN, this.onFullscreen);
-      this.listenTo(this.container, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.onHD);
-      this.listenTo(this.container, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDVR);
+      this.listenTo(this.container, Events.CONTAINER_READY, this.onReady)
+      this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay)
+      this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop)
+      this.listenTo(this.container, Events.CONTAINER_PAUSE, this.onPause)
+      this.listenTo(this.container, Events.CONTAINER_ENDED, this.onEnded)
+      this.listenTo(
+        this.container,
+        Events.CONTAINER_STATE_BUFFERING,
+        this.onBuffering,
+      )
+      this.listenTo(
+        this.container,
+        Events.CONTAINER_STATE_BUFFERFULL,
+        this.onBufferFull,
+      )
+      this.listenTo(this.container, Events.CONTAINER_ERROR, this.onError)
+      this.listenTo(
+        this.container,
+        Events.CONTAINER_PLAYBACKSTATE,
+        this.onPlaybackChanged,
+      )
+      this.listenTo(
+        this.container,
+        Events.CONTAINER_VOLUME,
+        this.onVolumeChanged,
+      )
+      this.listenTo(this.container, Events.CONTAINER_SEEK, this.onSeek)
+      this.listenTo(
+        this.container,
+        Events.CONTAINER_FULLSCREEN,
+        this.onFullscreen,
+      )
+      this.listenTo(
+        this.container,
+        Events.CONTAINER_HIGHDEFINITIONUPDATE,
+        this.onHD,
+      )
+      this.listenTo(
+        this.container,
+        Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
+        this.onDVR,
+      )
     }
-    _gaq.push([this.trackerName + '_setAccount', this.account]);
+    _gaq.push([this.trackerName + '_setAccount', this.account])
     if (this.domainName) {
-      _gaq.push([this.trackerName + '_setDomainName', this.domainName]);
+      _gaq.push([this.trackerName + '_setDomainName', this.domainName])
     }
   }
 
   onReady() {
-    this.push(['Video', 'Playback', this.container.playback.name]);
+    this.push(['Video', 'Playback', this.container.playback.name])
   }
 
   onPlay() {
-    this.push(['Video', 'Play', this.container.playback.src]);
+    this.push(['Video', 'Play', this.container.playback.src])
   }
 
   onStop() {
-    this.push(['Video', 'Stop', this.container.playback.src]);
+    this.push(['Video', 'Stop', this.container.playback.src])
   }
 
   onEnded() {
-    this.push(['Video', 'Ended', this.container.playback.src]);
+    this.push(['Video', 'Ended', this.container.playback.src])
   }
 
   onBuffering() {
-    this.push(['Video', 'Buffering', this.container.playback.src]);
+    this.push(['Video', 'Buffering', this.container.playback.src])
   }
 
   onBufferFull() {
-    this.push(['Video', 'Bufferfull', this.container.playback.src]);
+    this.push(['Video', 'Bufferfull', this.container.playback.src])
   }
 
   onError() {
-    this.push(['Video', 'Error', this.container.playback.src]);
+    this.push(['Video', 'Error', this.container.playback.src])
   }
 
   onHD(isHD: boolean) {
-    const status = isHD ? 'ON': 'OFF';
+    const status = isHD ? 'ON' : 'OFF'
 
     if (status !== this.currentHDState) {
-      this.currentHDState = status;
-      this.push(['Video', 'HD - ' + status, this.container.playback.src]);
+      this.currentHDState = status
+      this.push(['Video', 'HD - ' + status, this.container.playback.src])
     }
   }
 
   private onPlaybackChanged(playbackState: { type: string | null }) {
     if (playbackState.type !== null) {
-      this.push(['Video', 'Playback Type - ' + playbackState.type, this.container.playback.src]);
+      this.push([
+        'Video',
+        'Playback Type - ' + playbackState.type,
+        this.container.playback.src,
+      ])
     }
   }
 
   onDVR(dvrInUse: boolean) {
-    const status = dvrInUse? 'ON': 'OFF';
+    const status = dvrInUse ? 'ON' : 'OFF'
 
-    this.push(['Interaction', 'DVR - ' + status, this.container.playback.src]);
+    this.push(['Interaction', 'DVR - ' + status, this.container.playback.src])
   }
 
   onPause() {
-    this.push(['Video', 'Pause', this.container.playback.src]);
+    this.push(['Video', 'Pause', this.container.playback.src])
   }
 
   onSeek() {
-    this.push(['Video', 'Seek', this.container.playback.src]);
+    this.push(['Video', 'Seek', this.container.playback.src])
   }
 
   onVolumeChanged() {
-    this.push(['Interaction', 'Volume', this.container.playback.src]);
+    this.push(['Interaction', 'Volume', this.container.playback.src])
   }
 
   onFullscreen() {
-    this.push(['Interaction', 'Fullscreen', this.container.playback.src]);
+    this.push(['Interaction', 'Fullscreen', this.container.playback.src])
   }
 
   push(array: string[]) {
-    const res = [this.trackerName + '_trackEvent'].concat(array);
+    const res = [this.trackerName + '_trackEvent'].concat(array)
 
-    _gaq.push(res);
+    _gaq.push(res)
   }
 }