@gcorevideo/player 2.18.3 → 2.19.0

package/src/plugins/source-controller/__tests__/SourceController.test.ts

@@ -0,0 +1,230 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+
+import EventLite from 'event-lite'
+import FakeTimers from '@sinonjs/fake-timers'
+
+import { SourceController } from '../SourceController'
+import { _MockPlayback, PlaybackErrorCode } from '@gcorevideo/player'
+
+const MOCK_SOURCES = [
+  {
+    source: 'http://0eab.cdn.globo.com/1932-1447.mpd',
+    mimeType: 'application/dash+xml',
+  },
+  {
+    source: 'http://0eab.cdn.globo.com/1932-1447.m3u8',
+    mimeType: 'application/vnd.apple.mpegurl',
+  },
+  {
+    source: 'http://0eab.cdn.globo.com/1932-1447_mpegts.m3u8',
+    mimeType: 'application/mpegts',
+  },
+]
+
+describe('SourceController', () => {
+  let clock: ReturnType<typeof FakeTimers.install>
+  beforeEach(() => {
+    clock = FakeTimers.install()
+  })
+  afterEach(() => {
+    clock.uninstall()
+  })
+  describe('init', () => {
+    let core: any
+    describe.each([
+      [
+        'list of sources with a selected source',
+        {
+          sources: MOCK_SOURCES,
+          source: 'http://0eab.cdn.globo.com/1932-1447.mpd',
+        },
+        { sources: ['http://0eab.cdn.globo.com/1932-1447.mpd'] },
+      ],
+      [
+        'list of sources without a selected source',
+        {
+          sources: MOCK_SOURCES,
+          source: undefined,
+        },
+        {
+          sources: [
+            {
+              source: 'http://0eab.cdn.globo.com/1932-1447.mpd',
+              mimeType: 'application/dash+xml',
+            },
+          ],
+        },
+      ],
+    ])('%s', (_, inputSourcesConfig, correctedSourcesConfig) => {
+      it('should keep a single source for the core', () => {
+        core = createMockCore(inputSourcesConfig)
+        const _ = new SourceController(core)
+        expect(core.options).toEqual(expect.objectContaining(correctedSourcesConfig))
+      })
+    })
+  })
+  describe('on fatal playback failure', () => {
+    let core: any
+    let nextPlayback: any
+
+    describe('basically', () => {
+      beforeEach(() => {
+        core = createMockCore({
+          sources: MOCK_SOURCES,
+        })
+        const _ = new SourceController(core)
+        core.emit('core:ready')
+        core.activePlayback.emit('playback:error', { code: PlaybackErrorCode.MediaSourceUnavailable })
+        nextPlayback =  new _MockPlayback({} as any, {} as any)
+        vi.spyOn(nextPlayback, 'consent')
+        vi.spyOn(nextPlayback, 'play')
+        core.activePlayback = nextPlayback
+      })
+      it('should load the next source after a delay', async () => {
+        expect(core.load).not.toHaveBeenCalled()
+        await clock.tickAsync(1000)
+        expect(core.load).toHaveBeenCalledWith(MOCK_SOURCES[1].source, MOCK_SOURCES[1].mimeType)
+      })
+      it('should try to play after loading the source in a random delay', async () => {
+        await clock.tickAsync(1000)
+        expect(nextPlayback.play).not.toHaveBeenCalled()
+        await clock.tickAsync(500) // TODO check randomness
+        expect(nextPlayback.play).toHaveBeenCalled()
+      })
+      it('should not call consent', async () => {
+        await clock.tickAsync(1500)
+        expect(nextPlayback.consent).not.toHaveBeenCalled()
+      })
+      describe('after reinitializing the core', () => {
+        let poster: any
+        let spinner: any
+        beforeEach(async () => {
+          poster = createMockPlugin()
+          spinner = createSpinnerPlugin()
+          core.activeContainer.getPlugin.mockImplementation((name: string) => {
+            if (name === 'poster_custom') {
+              return poster
+            }
+            if (name === 'spinner') {
+              return spinner
+            }
+          })
+          core.emit('core:ready')
+        })
+        it('should disable the poster', async () => {
+          expect(poster.disable).toHaveBeenCalled()
+        })
+        it('should show the spinner', async () => {
+          expect(spinner.show).toHaveBeenCalled()
+        })
+      })
+    })
+    describe('if the spinner plugin is present', () => {
+      let spinner: any
+      beforeEach(() => {
+        core = createMockCore({
+          sources: MOCK_SOURCES,
+        })
+        spinner = createSpinnerPlugin()
+        core.activeContainer.getPlugin.mockImplementation((name: string) => {
+          if (name === 'spinner') {
+            return spinner
+          }
+        })
+        const _ = new SourceController(core)
+        core.emit('core:ready')
+        core.activePlayback.emit('playback:error', { code: PlaybackErrorCode.MediaSourceUnavailable })
+        nextPlayback =  new _MockPlayback({} as any, {} as any)
+        vi.spyOn(nextPlayback, 'consent')
+        vi.spyOn(nextPlayback, 'play')
+        core.activePlayback = nextPlayback
+      })
+      it('should sync with the spinner before reloading the source', async () => {
+        await clock.tickAsync(1000)
+        expect(core.load).not.toHaveBeenCalled()
+        spinner.emit('spinner:sync')
+        expect(core.load).toHaveBeenCalled()
+      })
+    })
+    describe('after recovery', () => {
+      // TODO
+      let poster: any
+      let spinner: any
+      beforeEach(async () => {
+        core = createMockCore({
+          sources: MOCK_SOURCES,
+        })
+        const _ = new SourceController(core)
+        core.emit('core:ready')
+        core.activePlayback.emit('playback:error', { code: PlaybackErrorCode.MediaSourceUnavailable })
+        await clock.tickAsync(1000)
+        nextPlayback =  new _MockPlayback({} as any, {} as any)
+        core.activePlayback = nextPlayback
+        poster = createMockPlugin()
+        spinner = createSpinnerPlugin()
+        core.activeContainer.getPlugin.mockImplementation((name: string) => {
+          if (name === 'poster_custom') {
+            return poster
+          }
+          if (name === 'spinner') {
+            return spinner
+          }
+        })
+        core.emit('core:ready')
+        nextPlayback.emit('playback:play')
+      })
+      it('should enable the poster', async () => {
+        expect(poster.enable).toHaveBeenCalled()
+      })
+      it('should hide the spinner', async () => {
+        expect(spinner.hide).toHaveBeenCalled()
+      })
+      describe.each([
+        [
+          'buffering',
+          'playback:buffering',
+        ],
+        [
+          'pause',
+          'playback:pause',
+        ],
+      ])('on a following playback:play event due to %s', (_, event) => {
+        it('should do nothing', async () => {
+          nextPlayback.emit(event)
+          await clock.tickAsync(1000)
+          nextPlayback.emit('playback:play')
+          await clock.tickAsync(1000)
+          expect(poster.enable).toHaveBeenCalledTimes(1)
+          expect(spinner.hide).toHaveBeenCalledTimes(1)
+        })
+      })
+    })
+  })
+})
+
+function createMockCore(options: Record<string, unknown> = {}) {
+  return Object.assign(new EventLite(), {
+    activePlayback: new _MockPlayback({} as any, {} as any),
+    activeContainer: Object.assign(new EventLite(), {
+      getPlugin: vi.fn(),
+    }),
+    options: {
+      ...options,
+    },
+    load: vi.fn(),
+  })
+}
+
+function createMockPlugin() {
+  return Object.assign(new EventLite(), {
+    enable: vi.fn(),
+    disable: vi.fn(),
+  })
+}
+
+function createSpinnerPlugin() {
+  return Object.assign(createMockPlugin(), {
+    show: vi.fn(),
+    hide: vi.fn(),
+  })
+}

package/src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts

@@ -0,0 +1,135 @@
+// 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 { Container, Events, UIContainerPlugin, template } from '@clappr/core';
+import { PlaybackError, PlaybackErrorCode } from '../../playback.types';
+import { trace } from '@gcorevideo/utils';
+
+import spinnerHTML from '../../../assets/spinner-three-bounce/spinner.ejs';
+import '../../../assets/spinner-three-bounce/spinner.scss';
+import { TimerId } from '../types';
+import { CLAPPR_VERSION } from '../build.js';
+
+const T = 'plugins.spinner'
+
+export class SpinnerThreeBounce extends UIContainerPlugin {
+  get name() {
+    return 'spinner';
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION };
+  }
+
+  override get attributes() {
+    return {
+      'data-spinner':'',
+      'class': 'spinner-three-bounce'
+    };
+  }
+
+  private showTimeout: TimerId | null = null;
+
+  private template = template(spinnerHTML);
+
+  private hasFatalError = false
+
+  private hasBuffering = false
+
+  constructor(container: Container) {
+    super(container);
+    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_PLAY, this.onPlay);
+    this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop);
+    this.listenTo(this.container, Events.CONTAINER_ENDED, this.onStop);
+    this.listenTo(this.container, Events.CONTAINER_ERROR, this.onError);
+    this.listenTo(this.container, Events.CONTAINER_READY, this.render);
+  }
+
+  private onBuffering() {
+    this.hasBuffering = true
+    this.show();
+  }
+
+  private onBufferFull() {
+    if (!this.hasFatalError && this.hasBuffering) {
+      this.hide();
+    }
+    this.hasBuffering = false
+  }
+
+  private onPlay() {
+    trace(`${T} onPlay`);
+    this.hide();
+  }
+
+  private onStop() {
+    trace(`${T} onStop`, {
+      showOnError: this.options.spinner?.showOnError,
+      hasFatalError: this.hasFatalError,
+    })
+    if (!(this.hasFatalError && this.options.spinner?.showOnError)) {
+      this.hide();
+    }
+  }
+
+  private onError(e: PlaybackError) {
+    this.hasFatalError = e.code === PlaybackErrorCode.MediaSourceUnavailable
+    trace(`${T} onError`, {
+      e,
+      showOnError: this.options.spinner?.showOnError,
+      hasFatalError: this.hasFatalError,
+      error: e.code,
+    })
+    if (this.options.spinner?.showOnError) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  show(immediate = false) {
+    trace(`${T} show`, {
+      immediate,
+    })
+    if (immediate) {
+      if (this.showTimeout !== null) {
+        clearTimeout(this.showTimeout);
+        this.showTimeout = null;
+      }
+      this.$el.show();
+    } else if (this.showTimeout === null) {
+      this.showTimeout = setTimeout(() => this.$el.show(), 300);
+    }
+  }
+
+  hide() {
+    if (this.showTimeout !== null) {
+      clearTimeout(this.showTimeout);
+      this.showTimeout = null;
+    }
+    this.$el.hide();
+  }
+
+  override render() {
+    const showOnStart = this.options.spinner?.showOnStart;
+    trace(`${T} render`, {
+      buffering: this.container.buffering,
+      showOnStart,
+    })
+    this.$el.html(this.template());
+    this.el.firstElementChild?.addEventListener('animationiteration', () => {
+      this.trigger('spinner:sync')
+    })
+    this.container.$el.append(this.$el[0]);
+    if (showOnStart || this.container.buffering) {
+      this.show();
+    } else {
+      this.hide();
+    }
+
+    return this;
+  }
+}

package/src/plugins/statistics/Statistics copy.xts

@@ -0,0 +1,296 @@
+import { Browser, Container, ContainerPlugin, Events, Playback } from '@clappr/core';
+// import type { GcoreStreamMediaSource, TimePosition } from '@gcorevideo/player';
+import type { TimePosition } from '@gcorevideo/player';
+import { reportError } from '@gcorevideo/utils';
+import Fingerprint from '@fingerprintjs/fingerprintjs'; // TODO drop
+import { Events as HlsEvents, FragChangedData } from 'hls.js';
+
+import { CLAPPR_VERSION } from '../build.js';
+
+type MediaSourceInfo = {
+  id: number;
+  source: string;
+}
+
+export class Statistics extends ContainerPlugin {
+  get name() {
+    return 'statistics_gplayer';
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION };
+  }
+
+  private socketOpen = false;
+
+  private init = false;
+
+  private started = false;
+
+  private played = false;
+
+  private playerReady = false;
+
+  private prevTimeCurrent = 0;
+
+  private firstHeatmapSent = false;
+
+  private isLiveWatchSent = false;
+
+  private countBufferAvailable = false;
+
+  private startTimeRepeatableRoll = 0;
+
+  private heatmapCounter = 1;
+
+  private lags = 0;
+
+  private bufferStartTime = 0;
+
+  private bufferComputeTime = 0;
+
+  private url = '';
+
+  private uuid = '';
+
+  private socket: WebSocket | null = null;
+
+  private startTime = 0;
+
+  private streamID = 0;
+
+  constructor(container: Container) {
+    super(container);
+    this.connect();
+  }
+
+  override bindEvents() {
+    this.listenToOnce(this.container.playback, Events.PLAYBACK_PLAY, this.onPlay);
+    this.listenToOnce(this.container, 'container:start', this.onStart);
+
+    this.listenToOnce(this.container, Events.CONTAINER_READY, this.onReady);
+    this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERING, this.onBuffering);
+    this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERFULL, this.onBufferFull);
+    this.listenTo(this.container.playback, Events.PLAYBACK_TIMEUPDATE, this.onTimeUpdate);
+    this.listenTo(this.container.playback, Events.PLAYBACK_TIMEUPDATE, this.onTimeUpdateLive);
+    this.listenTo(this.container.playback, Events.PLAYBACK_LEVEL_SWITCH_START, this.startLevelSwitch);
+    this.listenTo(this.container.playback, Events.PLAYBACK_LEVEL_SWITCH_END, this.stopLevelSwitch);
+  }
+
+  private startLevelSwitch() {
+    this.countBufferAvailable = false;
+  }
+
+  private stopLevelSwitch() {
+    this.countBufferAvailable = true;
+  }
+
+  private onBuffering() {
+    if (this.countBufferAvailable) {
+      this.bufferStartTime = performance.now();
+    }
+  }
+
+  private onBufferFull() {
+    if (this.countBufferAvailable && this.bufferStartTime) {
+      this.bufferComputeTime += Math.round(performance.now() - this.bufferStartTime);
+      this.lags++;
+    }
+    this.countBufferAvailable = true;
+  }
+
+  private connect() {
+    try {
+      if (!this.options.statistics.url) {
+        return;
+      }
+    } catch (error) {
+      reportError(error);
+
+      return;
+    }
+    this.removeSocket();
+    this.url = this.options.statistics.url;
+
+    try {
+      this.socket = new WebSocket(this.url);
+      this.socket.onopen = this.openHandler;
+      this.socket.onclose = this.closeHandler;
+      this.socket.onerror = this.errorHandler;
+    } catch (error) {
+      reportError(error);
+    }
+  }
+
+  private openHandler = () => {
+    this.socketOpen = true;
+    if (this.playerReady && !this.init) {
+      this.initEvent();
+    }
+  }
+
+  private closeHandler = () => {}
+
+  private errorHandler = () => {}
+
+  private removeSocket() {
+    if (this.socket) {
+      this.socket.onopen = null;
+      this.socket.onclose = null;
+      this.socket.onmessage = null;
+      this.socket.onerror = null;
+      this.socket.close();
+      this.socket = null;
+    }
+  }
+
+  private onReady() {
+    this.playerReady = true;
+    const element = this.findElementBySource(this.options.source);
+
+    if (!element) {
+      this.destroy();
+
+      return;
+    }
+    Fingerprint.load()
+      .then(agent => agent.get())
+      .then((res) => {
+        this.uuid = res.visitorId;
+      });
+
+    this.streamID = element.id;
+
+    if (this.socketOpen && !this.init) {
+      this.initEvent();
+    }
+  }
+
+  private findElementBySource(source: string): MediaSourceInfo | undefined {
+    return this.options.multisources.find((s: MediaSourceInfo) => s.source === source);
+  }
+
+  private initEvent() {
+    this.init = true;
+    this.sendMessage('init');
+    if (this.options.autoPlay) {
+      this.container.trigger('container:start');
+    }
+  }
+
+  private sendMessage(state: 'init' | 'start' | 'watch') {
+    this.send(JSON.stringify({
+      event: state,
+      type: this.container.getPlaybackType(),
+      embed_url: this.options.referer,
+      user_agent: Browser.userAgent
+    }));
+  }
+
+  private send(str: string) {
+    if (this.socket) {
+      this.socket.send(str);
+    }
+  }
+
+  private onTimeUpdateLive() {
+    if (!this.streamID) {
+      return;
+    }
+
+    let currentTime = 0;
+
+    try {
+      let startTime = this.startTimeRepeatableRoll;
+
+      if (!this.startTimeRepeatableRoll) {
+        if (!startTime) {
+          this.startTimeRepeatableRoll = startTime = this.container.playback.el.currentTime;
+        }
+      }
+
+      currentTime = this.container.playback.el.currentTime - startTime;
+      this.played = true;
+
+      if (this.started && this.played && !this.firstHeatmapSent && Math.floor(currentTime) === 0) {
+        this.firstHeatmapSent = true;
+        this.sendHeatmap();
+      }
+
+      if (currentTime > 0 && Math.floor(currentTime / 10) === 1 && this.uuid) {
+        this.sendHeatmap();
+      }
+
+      if (this.container.getPlaybackType() === Playback.LIVE && !this.isLiveWatchSent && currentTime >= 5) {
+        this.isLiveWatchSent = true;
+        this.sendMessage('watch');
+      }
+    } catch (error) {
+      reportError(error);
+    }
+  }
+
+  private sendHeatmap() {
+    this.startTimeRepeatableRoll = this.container.playback.el.currentTime;
+    const res: Record<string, unknown> = {
+      'event': 'heatmap',
+      'uniq_id': this.uuid,
+      'type': this.container.getPlaybackType(),
+      'stream_id': this.streamID,
+      lags: this.lags,
+      buffering: this.bufferComputeTime,
+    };
+
+    this.bufferComputeTime = 0;
+    this.lags = 0;
+    if (this.container.getPlaybackType() === Playback.VOD) {
+      res.timestamp = this.container.playback.el.currentTime;
+    }
+    this.send(JSON.stringify(res));
+  }
+
+  private onTimeUpdate({ current }: TimePosition) {
+    if (this.container.getPlaybackType() === Playback.LIVE) {
+      this.stopListening(this.container.playback, Events.PLAYBACK_TIMEUPDATE, this.onTimeUpdate);
+
+      return;
+    }
+
+    if (!this.prevTimeCurrent) {
+      this.prevTimeCurrent = current;
+    }
+
+    if (Math.abs(this.prevTimeCurrent - current) > 5 && this.socketOpen) {
+      this.stopListening(this.container.playback, Events.PLAYBACK_TIMEUPDATE, this.onTimeUpdate);
+      this.sendMessage('watch');
+    }
+  }
+
+  private onStart() {
+    this.sendMessage('start');
+    this.started = true;
+    if (this.started && this.played && !this.firstHeatmapSent) {
+      this.firstHeatmapSent = true;
+      this.sendHeatmap();
+    }
+  }
+
+  private onPlay() {
+    try {
+      if (this.container.playback._hls) {
+        this.container.playback._hls.on(HlsEvents.FRAG_CHANGED, (_: HlsEvents.FRAG_CHANGED, b: FragChangedData) => {
+          if (this.options.debug === 'hls') {
+            console.warn(b.frag);
+          }
+        });
+      }
+    } catch (error) {
+      reportError(error);
+    }
+    if (this.startTime) {
+      return;
+    }
+
+    this.startTime = new Date().getTime();
+  }
+}