@gcorevideo/player 2.18.3 → 2.19.0

package/src/plugins/playback-rate/PlaybackRate.ts

@@ -0,0 +1,269 @@
+import { Events, UICorePlugin, Playback, template } from '@clappr/core';
+
+import { CLAPPR_VERSION } from '../build.js';
+import type { ZeptoResult } from '../types';
+
+import pluginHtml from '../../../assets/playback-rate/playback-rate-selector.ejs';
+import buttonHtml from '../../../assets/playback-rate/button.ejs';
+import listHtml from '../../../assets/playback-rate/list.ejs';
+import speedIcon from '../../../assets/icons/new/speed.svg';
+import arrowRightIcon from '../../../assets/icons/new/arrow-right.svg';
+import arrowLeftIcon from '../../../assets/icons/new/arrow-left.svg';
+import checkIcon from '../../../assets/icons/new/check.svg';
+
+type PlaybackRateOption = {
+  value: string;
+  label: string;
+}
+
+const DEFAULT_PLAYBACK_RATES = [
+  { value: '0.5', label: '0.5x' },
+  { value: '0.75', label: '0.75x' },
+  { value: '1.0', label: '1x' },
+  { value: '1.25', label: '1.25x' },
+  { value: '1.5', label: '1.5x' },
+  { value: '1.75', label: '1.75x' },
+  { value: '2.0', label: '2x' }
+];
+
+const DEFAULT_PLAYBACK_RATE = '1.0';
+
+const MEDIACONTROL_PLAYBACKRATE = 'playbackRate';
+
+export class PlaybackRate extends UICorePlugin {
+  private currentPlayback: Playback | null = null;
+
+  private playbackRates: PlaybackRateOption[] = DEFAULT_PLAYBACK_RATES;
+
+  private prevSelectedRate: string | undefined;
+
+  private selectedRate: string = DEFAULT_PLAYBACK_RATE;
+
+  get name() {
+    return 'playback_rate';
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION };
+  }
+
+  get template() {
+    return template(pluginHtml);
+  }
+
+  override get attributes() {
+    return {
+      'class': this.name,
+      'data-playback-rate-select': ''
+    };
+  }
+
+  override get events() {
+    return {
+      'click .gear-sub-menu_btn': 'onRateSelect',
+      'click .gear-option': 'onShowMenu',
+      'click .go-back': 'goBack',
+    };
+  }
+
+  override bindEvents() {
+    this.listenTo(this.core, 'gear:rendered', this.render);
+    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
+    this.listenTo(this.core.mediaControl, MEDIACONTROL_PLAYBACKRATE, this.updatePlaybackRate);
+
+    this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
+    this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
+    if (this.core.activeContainer) {
+      this.listenTo(this.core.activePlayback, Events.PLAYBACK_BUFFERFULL, this.updateLiveStatus);
+    }
+
+    if (this.currentPlayback) {
+      this.listenTo(this.currentPlayback, Events.PLAYBACK_STOP, this.onStop);
+      this.listenTo(this.currentPlayback, Events.PLAYBACK_PLAY, this.onPlay);
+
+      // TODO import dash playback events
+      this.listenTo(this.currentPlayback, 'dash:playback-rate-changed', this.onDashRateChange);
+    }
+  }
+
+  unBindEvents() {
+    this.stopListening(this.core, 'gear:rendered', this.render);
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
+    this.stopListening(this.core, 'core:advertisement:start', this.onStartAd);
+    this.stopListening(this.core, 'core:advertisement:finish', this.onFinishAd);
+  }
+
+  private allRateElements(): ZeptoResult {
+    return this.$('ul.gear-sub-menu li');
+  }
+
+  private rateElement(rate = "1"): ZeptoResult {
+    return (this.$(`ul.gear-sub-menu a[data-rate="${rate}"]`) as ZeptoResult).parent();
+  }
+
+  private onDashRateChange() {
+    // TODO consider removing
+    ((this.currentPlayback as any)._dash as any)?.setPlaybackRate(this.selectedRate);
+  }
+
+  private updateLiveStatus() {
+    if (this.core.getPlaybackType() === Playback.LIVE) {
+      if (this.core.mediaControl.currentSeekBarPercentage <= 98.9) {
+        this.core.mediaControl.$playbackRate.removeClass('playbackrate-enable');
+        this.core.mediaControl.$el.addClass('dvr');
+
+        return;
+      }
+      this.updatePlaybackRate(DEFAULT_PLAYBACK_RATE);
+      this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
+      this.core.mediaControl.$el.removeClass('dvr');
+    }
+  }
+
+  reload() {
+    this.unBindEvents();
+    this.bindEvents();
+  }
+
+  private shouldRender() {
+    if (!this.core.activeContainer) {
+      return false;
+    }
+
+    this.currentPlayback = this.core.activePlayback;
+
+    return !(this.currentPlayback?.tagName !== 'video' && this.currentPlayback?.tagName !== 'audio');
+  }
+
+  override render() {
+    const container = this.core.activeContainer;
+
+    if (this.core.getPlaybackType() === Playback.LIVE && !container.isDvrEnabled()) {
+      return this;
+    }
+    const cfg = this.core.options.playbackRateConfig || {};
+
+    if (!this.playbackRates) {
+      this.playbackRates = cfg.options || DEFAULT_PLAYBACK_RATES;
+    }
+
+    if (!this.selectedRate) {
+      this.selectedRate = cfg.defaultValue || DEFAULT_PLAYBACK_RATE;
+    }
+
+    if (this.shouldRender()) {
+      const t = template(buttonHtml);
+      // const html = t({ playbackRates: this.playbackRates, title: this.getTitle() });
+      const button = t({
+        title: this.getTitle(),
+        speedIcon,
+        arrowRightIcon,
+      });
+
+      this.$el.html(button);
+
+      // if (this.core.getPlaybackType() === Playback.LIVE) {
+      //   this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
+      // }
+
+      // this.core.mediaControl.$playbackRate.append(this.el);
+
+      this.core.mediaControl.$el?.find('.gear-options-list [data-rate]').html(this.el);
+
+      // this.updateText();
+    }
+
+    return this;
+  }
+
+  onStartAd() {
+    this.prevSelectedRate = this.selectedRate;
+    this.setSelectedRate('1.0');
+    this.listenToOnce(this.currentPlayback, Events.PLAYBACK_PLAY, this.onFinishAd);
+  }
+
+  onFinishAd() {
+    if (this.prevSelectedRate) {
+      this.setSelectedRate(this.prevSelectedRate);
+    }
+  }
+
+  onPlay() {
+    if (!this.core.mediaControl.$el.hasClass('dvr')) {
+      if (this.core.getPlaybackType() === Playback.LIVE) {
+        this.updatePlaybackRate(DEFAULT_PLAYBACK_RATE);
+        this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
+      }
+    } else {
+      this.setSelectedRate(this.selectedRate);
+    }
+  }
+
+  onStop() {
+
+  }
+
+  onRateSelect(event: MouseEvent) {
+    event.stopPropagation();
+    const rate = (event.currentTarget as HTMLElement).dataset.rate;
+    if (rate) {
+      this.setSelectedRate(rate);
+      this.highlightCurrentRate();
+    }
+
+    return false;
+  }
+
+  onShowMenu() {
+    const t = template(listHtml);
+
+    this.$el.html(t({
+      playbackRates: this.playbackRates,
+      arrowLeftIcon,
+      checkIcon,
+    }));
+
+    this.core.mediaControl.$el?.find('.gear-wrapper').html(this.el);
+    this.highlightCurrentRate();
+  }
+
+  goBack() {
+    this.core.trigger('gear:refresh');
+  }
+
+  updatePlaybackRate(rate: string) {
+    this.setSelectedRate(rate);
+  }
+
+  setSelectedRate(rate: string) {
+    // Set <video playbackRate="..."
+    this.core.$el.find('video,audio').get(0).playbackRate = rate;
+    this.selectedRate = rate;
+    // TODO
+    // Player.player.trigger('playbackRateChanged', rate);
+  }
+
+  getTitle() {
+    let title = this.selectedRate;
+
+    this.playbackRates.forEach((r) => {
+      if (r.value === this.selectedRate) {
+        title = r.label;
+      }
+    });
+
+    return title;
+  }
+
+  highlightCurrentRate() {
+    this.allRateElements().removeClass('current');
+    this.allRateElements().find('a').removeClass('gcore-skin-active');
+
+    const currentLevelElement = this.rateElement(this.selectedRate);
+
+    currentLevelElement.addClass('current');
+    currentLevelElement.find('a').addClass('gcore-skin-active');
+  }
+}
+
+// PlaybackRate.MEDIACONTROL_PLAYBACKRATE = 'playbackRate';

package/src/plugins/poster/Poster.ts

@@ -0,0 +1,298 @@
+//Copyright 2014 Globo.com Player authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import {
+  Events,
+  Playback,
+  PlayerError,
+  UIContainerPlugin,
+  template,
+  $,
+  Container,
+} from '@clappr/core'
+import { trace } from '@gcorevideo/utils'
+
+import { CLAPPR_VERSION } from '../build.js'
+import type { ZeptoResult } from '../types.js'
+
+import '../../../assets/poster/poster.scss'
+import posterHTML from '../../../assets/poster/poster.ejs'
+import playIcon from '../../../assets/icons/new/play.svg'
+import { PlaybackError } from '../..//playback.types'
+
+const T = 'plugins.poster_custom'
+
+export class Poster extends UIContainerPlugin {
+  private hasFatalError = false
+
+  private hasStartedPlaying = false
+
+  private playRequested = false
+
+  private $playButton: ZeptoResult | null = null
+
+  private $playWrapper: ZeptoResult | null = null
+
+  get name() {
+    return 'poster_custom'
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION }
+  }
+
+  get template() {
+    return template(posterHTML)
+  }
+
+  get shouldRender() {
+    if (!this.enabled) {
+      return false
+    }
+    // const showOnError = this.options.poster?.showOnError !== false
+    trace(`${T} shouldRender`, {
+      hasFatalError: this.hasFatalError,
+    })
+
+    const showForNoOp = !!this.options.poster?.showForNoOp
+    return (
+      this.container.playback.name !== 'html_img' &&
+      (this.container.playback.getPlaybackType() !== Playback.NO_OP ||
+        showForNoOp)
+    )
+  }
+
+  override get attributes() {
+    return {
+      class: 'player-poster',
+      'data-poster': '',
+    }
+  }
+
+  override get events() {
+    return {
+      click: 'clicked',
+    }
+  }
+
+  get showOnVideoEnd() {
+    return this.options.poster?.showOnVideoEnd !== false
+  }
+
+  override bindEvents() {
+    this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop)
+    this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay)
+    this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERING, this.update)
+    this.listenTo(
+      this.container,
+      Events.CONTAINER_STATE_BUFFERFULL,
+      this.update,
+    )
+    this.listenTo(this.container, Events.CONTAINER_OPTIONS_CHANGE, this.render)
+    this.listenTo(this.container, Events.CONTAINER_ERROR, this.onError)
+    this.showOnVideoEnd &&
+      this.listenTo(this.container, Events.CONTAINER_ENDED, this.onStop)
+    this.listenTo(this.container, Events.CONTAINER_READY, this.render)
+    this.listenTo(this.container, Events.PLAYBACK_PLAY_INTENT, this.onPlayIntent)
+  }
+
+  override enable() {
+    super.enable()
+    this.hasStartedPlaying = this.container.playback.isPlaying()
+    this.update()
+  }
+
+  override disable() {
+    trace(`${T} disable`)
+    this.hasStartedPlaying = false
+    this.playRequested = false
+    super.disable()
+  }
+
+  private onError(error: PlaybackError) {
+    trace(`${T} onError`, {
+      error,
+      enabled: this.enabled,
+    })
+    this.hasFatalError = error.level === PlayerError.Levels.FATAL
+
+    if (this.hasFatalError) {
+      this.hasStartedPlaying = false
+      if (!this.playRequested) {
+        this.showPlayButton()
+      }
+    }
+  }
+
+  private onPlay() {
+    trace(`${T} onPlay`)
+    this.hasStartedPlaying = true
+    this.playRequested = false
+    this.update()
+  }
+
+  private onPlayIntent() {
+    trace(`${T} onPlayIntent`)
+    this.playRequested = true
+    this.update()
+  }
+
+  private onStop() {
+    trace(`${T} onStop`, {
+      enabled: this.enabled,
+    })
+    this.hasStartedPlaying = false
+    this.playRequested = false
+    this.update()
+  }
+
+  private updatePlayButton(show: boolean) {
+    trace(`${T} updatePlayButton`, {
+      show,
+      chromeless: this.options.chromeless,
+      allowUserInteraction: this.options.allowUserInteraction,
+    })
+    if (
+      show &&
+      (!this.options.chromeless || this.options.allowUserInteraction)
+    ) {
+      this.showPlayButton()
+    } else {
+      this.hidePlayButton()
+    }
+  }
+
+  private showPlayButton() {
+    if (this.options.disableMediaControl) {
+      return
+    }
+    if (this.hasFatalError && !this.options.disableErrorScreen) {
+      return
+    }
+
+    this.$playButton?.show()
+    this.$el.addClass('clickable')
+    this.container.$el.addClass('container-with-poster-clickable')
+  }
+
+  private hidePlayButton() {
+    this.$playButton.hide()
+    this.$el.removeClass('clickable')
+  }
+
+  private clicked() {
+    trace(`${T} clicked`, {
+      hasStartedPlaying: this.hasStartedPlaying,
+      chromeless: this.options.chromeless,
+      allowUserInteraction: this.options.allowUserInteraction,
+    })
+    // Let "click_to_pause" plugin handle click event if media has started playing
+    if (!this.hasStartedPlaying) {
+      if (!this.options.chromeless || this.options.allowUserInteraction) {
+        this.playRequested = true
+        this.update()
+        this.container.playback.consent()
+        this.container.playback.play()
+      }
+    } else {
+      this.container.trigger('container:start')
+    }
+
+    return false
+  }
+
+  private shouldHideOnPlay() {
+    // Audio broadcasts should keep the poster up; video should hide poster while playing.
+    return !this.container.playback.isAudioOnly
+  }
+
+  private update() {
+    trace(`${T} update`, {
+      shouldRender: this.shouldRender,
+    })
+    if (!this.shouldRender) {
+      return
+    }
+
+    const showPlayButton =
+      !this.playRequested &&
+      !this.hasStartedPlaying &&
+      !this.container.buffering
+
+    this.updatePlayButton(showPlayButton)
+    this.updatePoster()
+  }
+
+  private updatePoster() {
+    trace(`${T} updatePoster`, {
+      hasStartedPlaying: this.hasStartedPlaying,
+    })
+    if (!this.hasStartedPlaying) {
+      this.showPoster()
+    } else {
+      this.hidePoster()
+    }
+  }
+
+  private showPoster() {
+    this.container.disableMediaControl()
+    this.$el.show()
+  }
+
+  private hidePoster() {
+    trace(`${T} hidePoster`, {
+      shouldHideOnPlay: this.shouldHideOnPlay(),
+    })
+    if (!this.options.disableMediaControl) {
+      this.container.enableMediaControl()
+    }
+    if (this.shouldHideOnPlay()) {
+      this.$el.hide()
+    }
+  }
+
+  override render() {
+    if (!this.shouldRender) {
+      return this
+    }
+
+    this.$el.html(this.template())
+
+    const isRegularPoster =
+      this.options.poster && this.options.poster.custom === undefined
+
+    if (isRegularPoster) {
+      const posterUrl = this.options.poster.url || this.options.poster
+
+      this.$el.css({ 'background-image': 'url(' + posterUrl + ')' })
+    } else if (this.options.poster) {
+      this.$el.css({ background: this.options.poster.custom })
+    }
+
+    this.container.$el.removeClass('container-with-poster-clickable')
+    this.container.$el.append(this.el)
+    this.$playWrapper = this.$el.find('.play-wrapper')
+    this.$playWrapper.addClass('control-need-disable')
+    this.$playButton = $(
+      "<div class='circle-poster gcore-skin-button-color gcore-skin-border-color'></div>",
+    )
+    this.$playWrapper.append(this.$playButton)
+    this.$playButton.append(playIcon)
+
+    if (this.options.autoPlay) {
+      this.$playButton.hide()
+    }
+    this.$playButton.addClass('poster-icon')
+    this.$playButton.attr('data-poster', '')
+
+    this.update()
+
+    return this
+  }
+
+  override destroy() {
+    this.container.$el.removeClass('container-with-poster-clickable')
+    return this
+  }
+}