@gcorevideo/player 2.22.14 → 2.22.16

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)
+    })
+  })
+})

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

@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ClipsPlugin > should render indicator 1`] = `
+"<div class="media-clip-text" id="clips-text">Introduction</div><svg width="0" height="0">
+<defs>
+<clipPath id="myClip">
+<rect x="0" y="0" width="148" height="30"></rect>
+<rect x="150" y="0" width="298" height="30"></rect>
+<rect x="450" y="0" width="148" height="30"></rect>
+</clipPath></defs></svg><style>
+.bar-container[data-seekbar] {
+  clip-path: url("#myClip");
+}</style>"
+`;

package/src/plugins/clips/types.ts

@@ -0,0 +1,22 @@
+/**
+ * Clip description.
+ * @beta
+ */
+export type ClipDesc = {
+  /**
+   * Start time of the clip in the video timeline, s.
+   */
+  start: number
+  /**
+   * Text to display over the seekbar.
+   */
+  text: string
+  /**
+   * End time of the clip (start time of the next clip).
+   */
+  end: number
+  /**
+   * Index of the clip.
+   */
+  // index: number
+}

package/src/plugins/clips/utils.ts

@@ -0,0 +1,54 @@
+import { ClipDesc } from './types.js'
+import { parseClipTime } from '../utils.js'
+
+type ClipItem = {
+  start: number
+  text: string
+}
+
+export function parseClips(text: string): ClipDesc[] {
+  const clipsArr = text
+    .split('\n')
+    .map((val: string) => {
+      const matchRes = val.match(/(((\d+:)?\d+:)?\d+) (.+)/i)
+      return matchRes
+        ? {
+            start: parseClipTime(matchRes[1]),
+            text: matchRes[4],
+          }
+        : null
+    })
+    .filter((clip: ClipItem | null) => clip !== null)
+    .sort((a: ClipItem, b: ClipItem) => a.start - b.start)
+  return clipsArr.map((clip: ClipItem, index: number) => ({
+    start: clip.start,
+    text: clip.text,
+    end: index < clipsArr.length - 1 ? clipsArr[index + 1].start : 0,
+  }))
+}
+
+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
+
+  clips.forEach((val) => {
+    const end = val.end || duration
+
+    const chunkWidth = Math.round(((end - val.start) * barWidth) / duration)
+
+    svg += `<rect x="${rightEdge}" y="0" width="${
+      chunkWidth - 2
+    }" height="30"/>\n`
+    rightEdge += chunkWidth
+  })
+
+  if (rightEdge < barWidth) {
+    svg += `<rect x="${rightEdge}" y="0" width="${
+      barWidth - rightEdge
+    }" height="30"/>\n`
+  }
+  svg += '</clipPath>' + '</defs>' + '</svg>'
+
+  return svg
+}