@gcorevideo/player 2.22.24 → 2.22.26

package/src/plugins/seek-time/SeekTime.ts

@@ -2,16 +2,17 @@
 // 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 { Events, Playback, UICorePlugin, Utils, template } from '@clappr/core';
-import { TimePosition } from '../../playback.types.js';
+import { Events, Playback, UICorePlugin, Utils, template } from '@clappr/core'
+import { TimePosition } from '../../playback.types.js'
 
-import { CLAPPR_VERSION } from '../../build.js';
+import { CLAPPR_VERSION } from '../../build.js'
 
-import seekTimeHTML from '../../../assets/seek-time/seek-time.html';
-import '../../../assets/seek-time/seek-time.scss';
-import { ZeptoResult } from '../../types.js';
+import seekTimeHTML from '../../../assets/seek-time/seek-time.html'
+import '../../../assets/seek-time/seek-time.scss'
+import { ZeptoResult } from '../../types.js'
+import assert from 'assert'
 
-const { formatTime } = Utils;
+const { formatTime } = Utils
 
 /**
  * `PLUGIN` that adds a seek time indicator to the media control UI.
@@ -19,176 +20,218 @@ const { formatTime } = Utils;
  */
 export class SeekTime extends UICorePlugin {
   get name() {
-    return 'seek_time';
+    return 'seek_time'
   }
 
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
-  get template() {
-    return template(seekTimeHTML);
-  }
+  private static readonly template = template(seekTimeHTML)
 
   override get attributes() {
     return {
-      'class': 'seek-time',
-      'data-seek-time': ''
-    };
-  }
-
-  get mediaControl() {
-    return this.core.mediaControl;
-  }
-
-  get mediaControlContainer() {
-    return this.mediaControl.container;
+      class: 'seek-time',
+      'data-seek-time': '',
+    }
   }
 
-  get isLiveStreamWithDvr() {
-    return this.mediaControlContainer &&
-      this.mediaControlContainer.getPlaybackType() === Playback.LIVE &&
-      this.mediaControlContainer.isDvrEnabled();
+  private get isLiveStreamWithDvr() {
+    return (
+      this.core.activeContainer &&
+      this.core.activeContainer.getPlaybackType() === Playback.LIVE &&
+      this.core.activeContainer.isDvrEnabled()
+    )
   }
 
-  get durationShown() {
-    return !this.isLiveStreamWithDvr;
+  private get durationShown() {
+    return !this.isLiveStreamWithDvr
   }
 
-  private hoveringOverSeekBar = false;
+  private hoveringOverSeekBar = false
 
-  private hoverPosition = 0;
+  private hoverPosition = 0
 
-  private displayedDuration: string | null = null;
+  private displayedDuration: string | null = null
 
-  private displayedSeekTime: string| null = null;
+  private displayedSeekTime: string | null = null
 
-  private duration = 0;
+  private duration = 0
   // private firstFragDateTime = 0;
 
-  private rendered = false;
+  private rendered = false
 
-  private $durationEl: ZeptoResult | null = null;
+  private $durationEl: ZeptoResult | null = null
 
-  private $seekTimeEl: ZeptoResult | null = null;
+  private $seekTimeEl: ZeptoResult | null = null
 
+  /**
+   * @internal
+   */
   override bindEvents() {
-    this.listenTo(this.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-    this.listenTo(this.mediaControl, Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR, this.showTime);
-    this.listenTo(this.mediaControl, Events.MEDIACONTROL_MOUSELEAVE_SEEKBAR, this.hideTime);
-    this.listenTo(this.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.onContainerChanged);
-    if (this.mediaControlContainer) {
-      this.listenTo(this.mediaControlContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.update);
-      this.listenTo(this.mediaControlContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
+  }
+
+  private onCoreReady() {
+    const mediaControl = this.core.getPlugin('media_control')
+    assert(
+      mediaControl,
+      'MediaControl plugin is required for SeekTime plugin to work',
+    )
+    this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.mount)
+    this.listenTo(
+      mediaControl,
+      Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR,
+      this.showTime,
+    )
+    this.listenTo(
+      mediaControl,
+      Events.MEDIACONTROL_MOUSELEAVE_SEEKBAR,
+      this.hideTime,
+    )
+    this.listenTo(
+      mediaControl,
+      Events.MEDIACONTROL_CONTAINERCHANGED,
+      this.onContainerChanged,
+    )
+    if (this.core.activeContainer) {
+      this.listenTo(
+        this.core.activeContainer,
+        Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
+        this.update,
+      )
+      this.listenTo(
+        this.core.activeContainer,
+        Events.CONTAINER_TIMEUPDATE,
+        this.onTimeUpdate,
+      )
     }
   }
 
   private onContainerChanged() {
-    // @ts-ignore
-    this.stopListening();
-    this.bindEvents();
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
+      this.update,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_TIMEUPDATE,
+      this.onTimeUpdate,
+    )
   }
 
   private onTimeUpdate({ total }: TimePosition) {
-    this.duration = total;
-    this.update();
+    this.duration = total
+    this.update()
   }
 
   private showTime(event: MouseEvent) {
-    this.hoveringOverSeekBar = true;
-    this.calculateHoverPosition(event);
-    this.update();
+    this.hoveringOverSeekBar = true
+    this.calculateHoverPosition(event)
+    this.update()
   }
 
   private hideTime() {
-    this.hoveringOverSeekBar = false;
-    this.update();
+    this.hoveringOverSeekBar = false
+    this.update()
   }
 
   private calculateHoverPosition(event: MouseEvent) {
-    const offset = event.pageX - this.mediaControl.$seekBarContainer.offset().left;
+    const mediaControl = this.core.getPlugin('media_control')
+    const offset = event.pageX - mediaControl.$seekBarContainer.offset().left
 
     // proportion into the seek bar that the mouse is hovered over 0-1
-    this.hoverPosition = Math.min(1, Math.max(offset/this.mediaControl.$seekBarContainer.width(), 0));
+    this.hoverPosition = Math.min(
+      1,
+      Math.max(offset / mediaControl.$seekBarContainer.width(), 0),
+    )
   }
 
-  getSeekTime() {
-    let seekTime;
+  private getSeekTime() {
+    const seekTime = this.isLiveStreamWithDvr
+      ? this.duration - this.hoverPosition * this.duration
+      : this.hoverPosition * this.duration
 
-    if (this.isLiveStreamWithDvr) {
-      seekTime = this.duration - this.hoverPosition * this.duration;
-    } else {
-      seekTime = this.hoverPosition * this.duration;
-    }
-
-    return { seekTime };
+    return { seekTime }
   }
 
-  update() {
+  private update() {
     if (!this.rendered) {
       // update() is always called after a render
-      return;
+      return
     }
     if (!this.shouldBeVisible()) {
-      this.$el.hide();
-      this.$el.css('left', '-100%');
-    } else {
-      const seekTime = this.getSeekTime();
-      let currentSeekTime = formatTime(seekTime.seekTime, false);
+      this.$el.hide()
+      this.$el.css('left', '-100%')
+      return
+    }
 
-      if (this.isLiveStreamWithDvr) {
-        currentSeekTime = `-${currentSeekTime}`;
-      }
+    const seekTime = this.getSeekTime()
+    let currentSeekTime = formatTime(seekTime.seekTime, false)
 
-      // only update dom if necessary, ie time actually changed
-      if (currentSeekTime !== this.displayedSeekTime) {
-        this.$seekTimeEl.text(currentSeekTime);
-        this.displayedSeekTime = currentSeekTime;
-      }
+    if (this.isLiveStreamWithDvr) {
+      currentSeekTime = `-${currentSeekTime}`
+    }
 
-      if (this.durationShown) {
-        this.$durationEl.show();
-        const currentDuration = formatTime(this.duration, false);
+    // only update dom if necessary, ie time actually changed
+    if (currentSeekTime !== this.displayedSeekTime) {
+      this.$seekTimeEl.text(currentSeekTime)
+      this.displayedSeekTime = currentSeekTime
+    }
+
+    if (this.durationShown) {
+      this.$durationEl.show()
+      const currentDuration = formatTime(this.duration, false)
 
-        if (currentDuration !== this.displayedDuration) {
-          this.$durationEl.text(currentDuration);
-          this.displayedDuration = currentDuration;
-        }
-      } else {
-        this.$durationEl.hide();
+      if (currentDuration !== this.displayedDuration) {
+        this.$durationEl.text(currentDuration)
+        this.displayedDuration = currentDuration
       }
+    } else {
+      this.$durationEl.hide()
+    }
 
-      // the element must be unhidden before its width is requested, otherwise it's width will be reported as 0
-      this.$el.show();
-      const containerWidth = this.mediaControl.$seekBarContainer.width();
-      const elWidth = this.$el.width();
-      let elLeftPos = this.hoverPosition * containerWidth;
+    // the element must be unhidden before its width is requested, otherwise it's width will be reported as 0
+    this.$el.show()
+    const mediaControl = this.core.getPlugin('media_control')
+    const containerWidth = mediaControl.$seekBarContainer.width()
+    const elWidth = this.$el.width()
+    let elLeftPos = this.hoverPosition * containerWidth
 
-      elLeftPos -= elWidth / 2;
-      elLeftPos = Math.max(0, Math.min(elLeftPos, containerWidth - elWidth));
-      this.$el.css('left', elLeftPos);
-    }
+    elLeftPos -= elWidth / 2
+    elLeftPos = Math.max(0, Math.min(elLeftPos, containerWidth - elWidth))
+    this.$el.css('left', elLeftPos)
   }
 
-  shouldBeVisible() {
-    return this.mediaControlContainer &&
-      this.mediaControlContainer.settings.seekEnabled &&
+  private shouldBeVisible() {
+    return (
+      this.core.activeContainer &&
+      this.core.activeContainer.settings.seekEnabled &&
       this.hoveringOverSeekBar &&
       this.hoverPosition !== null &&
-      this.duration !== null;
+      this.duration !== null
+    )
   }
 
+  /**
+   * @internal
+   */
   override render() {
-    this.rendered = true;
-    this.displayedDuration = null;
-    this.displayedSeekTime = null;
-    this.$el.html(this.template());
-    this.$el.hide();
-    this.mediaControl.$el.append(this.el);
-    this.$seekTimeEl = this.$el.find('[data-seek-time]');
-    this.$durationEl = this.$el.find('[data-duration]');
-    this.$durationEl.hide();
-    this.update();
-    return this;
+    this.rendered = true
+    this.displayedDuration = null
+    this.displayedSeekTime = null
+    this.$el.html(SeekTime.template())
+    this.$el.hide()
+    // this.mediaControl.$el.append(this.el);
+    this.$seekTimeEl = this.$el.find('#mc-seek-time')
+    this.$durationEl = this.$el.find('#mc-duration')
+    this.$durationEl.hide()
+    this.update()
+    return this
+  }
+
+  private mount() {
+    this.core.getPlugin('media_control').$el.append(this.$el) // TODO use a method
   }
 }

package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts

@@ -5,6 +5,7 @@ import { createMockCore, createMockMediaControl } from '../../../testUtils.js'
 import { ExtendedEvents } from '../../media-control/MediaControl.js'
 
 import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
+import { Events } from '@clappr/core'
 // import { Events } from '@clappr/core';
 
 // Logger.enable('*')