@gcorevideo/player 2.22.15 → 2.22.17

package/src/plugins/clappr-stats/__tests__/ClapprStats.test.ts

@@ -0,0 +1,133 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { Events as CoreEvents } from '@clappr/core'
+import FakeTimers from '@sinonjs/fake-timers'
+
+import { ClapprStats } from '../ClapprStats'
+import { createMockCore } from '../../../testUtils'
+import { Chronograph, ClapprStatsEvents, Counter } from '../types'
+
+describe('ClapprStats', () => {
+  let core: any
+  let stats: ClapprStats
+  let onReport: any
+  let clock: FakeTimers.InstalledClock
+  beforeEach(() => {
+    core = createMockCore()
+    stats = new ClapprStats(core.activeContainer)
+    clock = FakeTimers.install()
+  })
+  afterEach(() => {
+    clock.uninstall()
+  })
+  describe('time measurements', () => {
+    describe('startup', () => {
+      beforeEach(() => {
+        vi.spyOn(performance, 'now').mockReturnValue(100)
+        core.activeContainer.playback.emit(CoreEvents.PLAYBACK_PLAY_INTENT)
+        vi.spyOn(performance, 'now').mockReturnValue(255)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PLAY)
+      })
+      it('should measure', () => {
+        const metrics = stats.exportMetrics()
+        expect(metrics.chrono[Chronograph.Startup]).toBe(155)
+        // expect(metrics.times[Chronograph.Session]).toBe(155)
+      })
+    })
+    describe('watch', () => {
+      beforeEach(() => {
+        vi.spyOn(performance, 'now').mockReturnValue(100)
+        core.activeContainer.playback.emit(CoreEvents.PLAYBACK_PLAY_INTENT)
+        vi.spyOn(performance, 'now').mockReturnValue(150)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PLAY)
+        vi.spyOn(performance, 'now').mockReturnValue(3000)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PAUSE)
+        vi.spyOn(performance, 'now').mockReturnValue(4900)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PLAY)
+        vi.spyOn(performance, 'now').mockReturnValue(5900)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PAUSE)
+        vi.spyOn(performance, 'now').mockReturnValue(6900)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PLAY)
+      })
+      it('should measure cumulative play and pause durations', () => {
+        const metrics = stats.exportMetrics()
+        expect(metrics.chrono[Chronograph.Watch]).toBe(3850)
+        expect(metrics.chrono[Chronograph.Pause]).toBe(2900)
+      })
+    })
+    describe('buffering', () => {
+      beforeEach(() => {
+        vi.spyOn(performance, 'now').mockReturnValue(100)
+        core.activeContainer.playback.emit(CoreEvents.PLAYBACK_PLAY_INTENT)
+        vi.spyOn(performance, 'now').mockReturnValue(150)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PLAY)
+        vi.spyOn(performance, 'now').mockReturnValue(250)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_STATE_BUFFERING)
+        vi.spyOn(performance, 'now').mockReturnValue(350)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_STATE_BUFFERFULL)
+        vi.spyOn(performance, 'now').mockReturnValue(450)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_STATE_BUFFERING)
+        vi.spyOn(performance, 'now').mockReturnValue(550)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_STATE_BUFFERFULL)
+      })
+      it('should measure cumulative buffering durations', () => {
+        const metrics = stats.exportMetrics()
+        expect(metrics.chrono[Chronograph.Buffering]).toBe(200)
+      })
+    })
+    describe('session', () => {
+      beforeEach(() => {
+        onReport = vi.fn()
+        stats.on(ClapprStatsEvents.REPORT, onReport, null)
+        vi.spyOn(performance, 'now').mockReturnValue(100)
+        core.activeContainer.playback.emit(CoreEvents.PLAYBACK_PLAY_INTENT)
+        vi.spyOn(performance, 'now').mockReturnValue(200)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PLAY)
+        vi.spyOn(performance, 'now').mockReturnValue(60300)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_STOP)
+      })
+      it('should measure', () => {
+        expect(onReport).toHaveBeenCalledWith(expect.objectContaining({
+          chrono: expect.objectContaining({
+            [Chronograph.Session]: 60200,
+          }),
+        }))
+      })
+    })  
+  })
+  describe('fps measurements', () => {
+    beforeEach(async () => {
+      onReport = vi.fn()
+      core.activePlayback.name = 'html5_video'
+      stats.on(ClapprStatsEvents.REPORT, onReport, null)
+      vi.spyOn(performance, 'now').mockReturnValue(100)
+      core.activeContainer.playback.emit(CoreEvents.PLAYBACK_PLAY_INTENT)
+      vi.spyOn(performance, 'now').mockReturnValue(200)
+      vi.spyOn(performance, 'now').mockReturnValue(200)
+      core.activeContainer.trigger(CoreEvents.CONTAINER_PLAY)
+      core.activeContainer.playback.el.webkitDecodedFrameCount = 126
+      core.activeContainer.playback.el.webkitDroppedFrameCount = 3
+      vi.spyOn(performance, 'now').mockReturnValue(5225)
+      await clock.tickAsync(5000)
+      core.activeContainer.playback.el.webkitDecodedFrameCount = 275
+      core.activeContainer.playback.el.webkitDroppedFrameCount = 4
+      vi.spyOn(performance, 'now').mockReturnValue(10225)
+      core.activeContainer.trigger(CoreEvents.CONTAINER_STOP)
+    })
+    it('should measure fps', () => {
+      expect(onReport).toHaveBeenNthCalledWith(1, expect.objectContaining({
+        counters: expect.objectContaining({
+          [Counter.DecodedFrames]: 126,
+          [Counter.DroppedFrames]: 3,
+          [Counter.Fps]: expect.closeTo(25, 0),
+        }),
+      }))
+      expect(onReport).toHaveBeenNthCalledWith(2, expect.objectContaining({
+        counters: expect.objectContaining({
+          [Counter.DecodedFrames]: 275,
+          [Counter.DroppedFrames]: 4,
+          [Counter.Fps]: expect.closeTo(30, 0),
+        }),
+      }))
+    })
+  })
+})

package/src/plugins/clappr-stats/types.ts

@@ -1,28 +1,74 @@
+/**
+ * @beta
+ */
+export enum Chronograph {
+  Startup = 'startup',
+  Watch = 'watch',
+  Pause = 'pause',
+  Buffering = 'buffering',
+  Session = 'session',
+  // Latency = 'latency',
+}
+
+/**
+ * @beta
+ */
+export enum Counter {
+  Play = 'play',
+  Pause = 'pause',
+  Error = 'error',
+  Buffering = 'buffering',
+  DecodedFrames = 'decodedFrames',
+  DroppedFrames = 'droppedFrames',
+  Fps = 'fps',
+  ChangeLevel = 'changeLevel',
+  Seek = 'seek',
+  Fullscreen = 'fullscreen',
+  DvrUsage = 'dvrUsage',
+}
 
 /**
  * @beta
  */
 export type Metrics = {
+  /**
+   * Events count counters
+   */
   counters: {
-    play: number;
-    pause: number;
-    error: number;
-    buffering: number;
-    decodedFrames: number;
-    droppedFrames: number;
-    fps: number;
-    changeLevel: number;
-    seek: number;
-    fullscreen: number;
-    dvrUsage: number;
+    /**
+     * 
+     */
+    [Counter.Play]: number;
+    [Counter.Pause]: number;
+    [Counter.Error]: number;
+    [Counter.Buffering]: number;
+    [Counter.DecodedFrames]: number;
+    [Counter.DroppedFrames]: number;
+    [Counter.Fps]: number;
+    [Counter.ChangeLevel]: number;
+    [Counter.Seek]: number;
+    [Counter.Fullscreen]: number;
+    [Counter.DvrUsage]: number;
   };
-  timers: {
-    startup: number;
-    watch: number;
-    pause: number;
-    buffering: number;
-    session: number;
-    latency: number;
+  /**
+   * Time measurements - accumulated duration of time-based activities
+   */
+  chrono: {
+    /**
+     * Time spent in the startup phase
+     */
+    [Chronograph.Startup]: number;
+    /**
+     * Total time spent in the watch phase
+     */
+    [Chronograph.Watch]: number;
+    /**
+     * 
+     */
+    [Chronograph.Pause]: number;
+    [Chronograph.Buffering]: number;
+    [Chronograph.Session]: number;
+    // [Chronograph.Latency]: number;
   };
   extra: {
     playbackName: string;
@@ -51,15 +97,16 @@ export type BitrateTrackRecord = {
   bitrate: number;
 }
 
-/**
- * @beta
- */
-export type MetricsUpdateFn = (metrics: Metrics) => void;
-
 /**
  * @beta
  */
 export enum ClapprStatsEvents {
-  REPORT_EVENT = 'clappr:stats:report',
-  PERCENTAGE_EVENT = 'clappr:stats:percentage',
+  /**
+   * Emitted periodically with current measurements.
+   */
+  REPORT = 'clappr:stats:report',
+  /**
+   * Emitted when the playback reaches a certain percentage of the total duration.
+   */
+  // PERCENTAGE = 'clappr:stats:percentage',
 }

package/src/plugins/clappr-stats/utils.ts

@@ -15,13 +15,12 @@ export function newMetrics(): Metrics {
       fullscreen: 0,
       dvrUsage: 0,
     },
-    timers: {
+    chrono: {
       startup: 0,
       watch: 0,
       pause: 0,
       buffering: 0,
       session: 0,
-      latency: 0,
     },
     extra: {
       playbackName: '',

package/src/plugins/clips/Clips.ts

@@ -1,55 +1,54 @@
-import { Container, Events, UICorePlugin, $ } from '@clappr/core'
+import { Container, Events, UICorePlugin, $, template } from '@clappr/core'
+import { trace } from '@gcorevideo/utils'
+import assert from 'assert'
 
 import { TimeProgress } from '../../playback.types.js'
 import type { ZeptoResult } from '../../types.js'
-import { strtimeToMiliseconds } from '../utils.js'
 import '../../../assets/clips/clips.scss'
-import assert from 'assert'
-
-type ClipDesc = {
-  start: number
-  text: string
-  end: number
-  index: number
-}
+import { ClipDesc } from './types.js'
+import { buildSvg, parseClips } from './utils.js'
+import clipsHTML from '../../../assets/clips/clips.ejs'
 
-type ClipItem = {
-  start: number
-  text: string
-}
+const T = 'plugins.clips'
 
 /**
- * Configuration options for the {@link ClipsPlugin | clips} plugin.
+ * Configuration options for the {@link ClipsPlugin} plugin.
  * @beta
  */
 export interface ClipsPluginSettings {
   /**
-   * The text to display over the seekbar.
+   * The compiled text of the clips description, one clip per line in format  :
+   * `HH:MM:SS text` or `MM:SS text` or `SS text`
    */
   text: string
 }
 
+const VERSION = '2.22.16'
+const CLAPPR_VERSION = '0.11.4'
+
 /**
- * `PLUGIN` that shows text over the seekbar to indicate the current clip.
+ * `PLUGIN` that allows marking up the timeline of the video
  * @beta
  * @remarks
+ * The plugin decorates the seekbar with notches to indicate the clips of the video and displays current clip text in the left panel
+ *
  * Depends on:
  *
  * - {@link MediaControl}
  *
  * Configuration options - {@link ClipsPluginSettings}
  */
-export class ClipsPlugin extends UICorePlugin {
-  private clips: Map<number, ClipDesc> = new Map()
-
-  private duration: number = 0
+export class Clips extends UICorePlugin {
+  private barStyle: HTMLStyleElement | null = null
 
-  private durationGetting = false
+  private clips: ClipDesc[] = []
 
-  private _oldContainer: Container | undefined
+  private oldContainer: Container | undefined
 
   private svgMask: ZeptoResult | null = null
 
+  private static readonly template = template(clipsHTML)
+
   /**
    * @internal
    */
@@ -62,174 +61,156 @@ export class ClipsPlugin extends UICorePlugin {
    */
   override get attributes() {
     return {
-      class: this.name,
+      class: 'media-control-clips',
     }
   }
 
+  get version() {
+    return VERSION
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION }
+  }
+
   /**
    * @internal
    */
   override bindEvents() {
-    const mediaControl = this.core.getPlugin('media_control')
-    assert(mediaControl, 'media_control plugin is required')
-    this.listenToOnce(this.core, Events.CORE_READY, this._onCoreReady)
-    // TODO listen to CORE_ACTIVE_CONTAINER_CHANGED
+    this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady)
+    this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize)
     this.listenTo(
-      mediaControl,
-      Events.MEDIACONTROL_CONTAINERCHANGED,
-      this._onMediaControlContainerChanged,
+      this.core,
+      Events.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.onContainerChanged,
     )
-    this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize)
   }
 
-  private _onCoreReady() {
+  override render() {
+    trace(`${T} render`)
     if (!this.options.clips) {
-      this.destroy()
+      return this
+    }
+    this.$el.html(Clips.template())
+    this.$el.hide()
+    return this
+  }
 
-      return
+  override destroy() {
+    if (this.barStyle) {
+      this.barStyle.remove()
+      this.barStyle = null
     }
+    return super.destroy()
+  }
 
-    this.parseClips()
+  override disable() {
+    if (this.barStyle) {
+      this.barStyle.remove()
+      this.barStyle = null
+    }
+    return super.disable()
   }
 
-  private _onMediaControlContainerChanged() {
-    this._bindContainerEvents()
+  override enable() {
+    this.render()
+    return super.enable()
   }
 
-  private playerResize() {
-    this.durationGetting = false
-    if (this.durationGetting) {
-      this.makeSvg(this.duration)
-    }
+  private onCoreReady() {
+    trace(`${T} onCoreReady`)
+    const mediaControl = this.core.getPlugin('media_control')
+    assert(mediaControl, 'media_control plugin is required')
+
+    this.parseClips(this.options.clips.text)
+    this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.onMcRender)
   }
 
-  private _bindContainerEvents() {
-    if (this._oldContainer) {
+  private onMcRender() {
+    trace(`${T} onMcRender`)
+    const mediaControl = this.core.getPlugin('media_control')
+    mediaControl.mount('clips', this.$el)
+  }
+
+  private onContainerChanged() {
+    trace(`${T} onContainerChanged`)
+    // TODO figure out the conditions of changing the container (without destroying the previous one)
+    if (this.oldContainer) {
       this.stopListening(
-        this._oldContainer,
+        this.oldContainer,
         Events.CONTAINER_TIMEUPDATE,
         this.onTimeUpdate,
       )
     }
-
-    const mediaControl = this.core.getPlugin('media_control')
-    this._oldContainer = mediaControl.container
-    this.durationGetting = false
+    this.oldContainer = this.core.activeContainer
+    if (this.svgMask) {
+      this.svgMask.remove()
+      this.svgMask = null
+    }
     this.listenTo(
-      mediaControl.container,
+      this.core.activeContainer,
       Events.CONTAINER_TIMEUPDATE,
       this.onTimeUpdate,
     )
   }
 
+  private playerResize() {
+    const duration = this.core.activeContainer.getDuration()
+    if (duration) {
+      this.makeSvg(duration)
+    }
+  }
+
   private onTimeUpdate(event: TimeProgress) {
-    if (!this.durationGetting) {
-      this.duration = event.total
+    if (!this.svgMask) {
       this.makeSvg(event.total)
-      this.durationGetting = true
     }
-
-    for (const value of this.clips.values()) {
-      if (event.current >= value.start && event.current < value.end) {
+    for (const value of this.clips) {
+      if (
+        (event.current >= value.start && !value.end) ||
+        event.current < value.end
+      ) {
         this.setClipText(value.text)
         break
       }
     }
   }
 
-  private parseClips() {
-    const textArr = this.options.clips.text.split('\n')
-
-    const clipsArr = textArr
-      .map((val: string) => {
-        const matchRes = val.match(/(\d+:\d+|:\d+) (.+)/i)
-
-        return matchRes
-          ? {
-              start: strtimeToMiliseconds(matchRes[1]),
-              text: matchRes[2],
-            }
-          : null
-      })
-      .filter((clip: ClipItem | null) => clip !== null)
-
-    clipsArr.sort((a: ClipDesc, b: ClipDesc) => a.start - b.start)
-
-    clipsArr.forEach((clip: ClipDesc, index: number) => {
-      this.clips.set(clip.start, {
-        index,
-        start: clip.start,
-        text: clip.text,
-        end: clipsArr[index + 1] ? clipsArr[index + 1].start : null,
-      })
-    })
-  }
-
-  /**
-   * Returns the text of the current clip.
-   * @param time - The current time of the player.
-   * @returns The text of the current clip.
-   */
-  getText(time: number) {
-    for (const [key, value] of this.clips.entries()) {
-      if (time >= value.start && time < value.end) {
-        return value.text
-      }
-    }
-    return ''
+  private parseClips(text: string) {
+    this.clips = parseClips(text)
   }
 
   private makeSvg(duration: number) {
-    let svg =
-      '<svg width="0" height="0">\n' + '<defs>\n' + '<clipPath id="myClip">\n'
-    const widthOfSeek = this.core.activeContainer.$el.width()
-    let finishValue = 0
-
-    this.clips.forEach((val) => {
-      let end = val.end
-
-      if (!end) {
-        end = val.end = duration
-      }
-
-      const widthChunk = ((end - val.start) * widthOfSeek) / duration
-
-      svg += `<rect x="${finishValue}" y="0" width="${
-        widthChunk - 2
-      }" height="30"/>\n`
-      finishValue += widthChunk
-    })
-
-    svg += `<rect x="${finishValue}" y="0" width="${
-      widthOfSeek - finishValue
-    }" height="30"/>\n`
-    svg += '</clipPath>' + '</defs>' + '</svg>'
+    const svg = buildSvg(
+      this.clips,
+      duration,
+      this.core.activeContainer.$el.width(),
+    )
     this.setSVGMask(svg)
   }
 
   private setSVGMask(svg: string) {
-    // this.core.mediaControl.setSVGMask(svg);
     if (this.svgMask) {
       this.svgMask.remove()
     }
 
-    const mediaControl = this.core.getPlugin('media_control')
-    const $seekBarContainer =
-      mediaControl.getElement('seekBarContainer')
-    if ($seekBarContainer?.get(0)) {
-      $seekBarContainer.addClass('clips')
-    }
-
     this.svgMask = $(svg)
-    $seekBarContainer?.append(this.svgMask)
+    this.$el.append(this.svgMask)
+    if (!this.barStyle) {
+      this.barStyle = document.createElement('style')
+      this.barStyle.textContent = `
+.bar-container[data-seekbar] {
+  clip-path: url("#myClip");
+}`
+      this.$el.append(this.barStyle)
+    }
   }
 
   private setClipText(text: string) {
-    const mediaControl = this.core.getPlugin('media_control')
-    const $clipText = mediaControl.getElement('clipText')
-    if ($clipText && text) {
-      $clipText.show()
-      $clipText.text(`${text}`)
+    if (text) {
+      this.$el.show().find('#clips-text').text(text)
+    } else {
+      this.$el.hide()
     }
   }
 }

package/src/plugins/clips/__tests__/Clips.test.ts

@@ -0,0 +1,72 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { Clips } from '../Clips'
+import { createMockCore, createMockMediaControl } from '../../../testUtils'
+import { Events } from '@clappr/core'
+
+// import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
+
+// Logger.enable('*')
+// setTracer(new LogTracer('Clips.text'))
+
+describe('ClipsPlugin', () => {
+  let core: any
+  let mediaControl: any
+  let clips: Clips
+  beforeEach(() => {
+    core = createMockCore({
+      clips: {
+        text: `
+      00:00:00 Introduction
+      00:05:00 Main part
+      00:15:00 Conclusion
+      `,
+      },
+    })
+    mediaControl = createMockMediaControl(core)
+    core.getPlugin.mockImplementation((name: string) => {
+      if (name === 'media_control') return mediaControl
+      return null
+    })
+    clips = new Clips(core)
+    core.emit(Events.CORE_READY)
+    core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+    vi.spyOn(core.activeContainer.$el, 'width').mockReturnValue(600)
+    core.activeContainer.emit(Events.CONTAINER_TIMEUPDATE, {
+      current: 0,
+      total: 1200,
+    })
+  })
+  it('should render indicator', () => {
+    expect(clips.el.innerHTML).toMatchSnapshot()
+  })
+  it('should render notches on the seek bar', () => {
+    const svg = clips.$el.find('svg')
+    expect(svg).toBeDefined()
+    expect(svg?.find('rect').length).toBe(3)
+  })
+  describe('as time progresses', () => {
+    describe.each([
+      [60, 'Introduction'],
+      [310, 'Main part'],
+      [1001, 'Conclusion'],
+    ])('@%s', (time, expected) => {
+      beforeEach(() => {
+        core.activeContainer.emit(Events.CONTAINER_TIMEUPDATE, {
+          current: time,
+          total: 1200,
+        })
+      })
+      it(`text should be "${expected}"`, () => {
+        expect(clips.$el.find('#clips-text').text()).toBe(expected)
+      })
+    })
+  })
+  describe('when media control is rendered', () => {
+    beforeEach(() => {
+      mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+    })
+    it('should mount the indicator', () => {
+      expect(mediaControl.mount).toHaveBeenCalledWith('clips', clips.$el)
+    })
+  })
+})