@gcorevideo/player 2.22.15 → 2.22.17

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

package/src/plugins/error-screen/__tests__/ErrorScreen.test.ts

@@ -1,4 +1,4 @@
-import { createMockContainer, createMockCore, createMockPlayback } from '../../../testUtils'
+import { createMockCore } from '../../../testUtils'
 import { ErrorScreen } from '../ErrorScreen'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -9,9 +9,8 @@ describe('ErrorScreen', () => {
   let errorScreen: ErrorScreen
   beforeEach(() => {
     core = createMockCore()
-    container = createMockContainer()
-    playback = createMockPlayback()
-    container.playback = playback
+    container = core.activeContainer
+    playback = container.playback
     core.activeContainer = container
   })
   describe('on error', () => {

package/src/plugins/level-selector/__tests__/__snapshots__/QualityLevels.test.ts.snap

@@ -8,7 +8,7 @@ exports[`QualityLevels > basically > auto > should render the selected level 1`]
 <ul class="gear-sub-menu quality-levels" id="level-selector-menu" role="menu">
     
         <li class="current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="-1" id="level_selector_auto">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="-1" id="level_selector_auto" aria-checked="true" role="menuitemradio">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 auto
             </a>
@@ -16,21 +16,21 @@ exports[`QualityLevels > basically > auto > should render the selected level 1`]
     
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_1080">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 Full HD
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_720">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 HD
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_360">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -48,7 +48,7 @@ exports[`QualityLevels > basically > custom label > should render the selected l
 <ul class="gear-sub-menu quality-levels" id="level-selector-menu" role="menu">
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1" id="level_selector_auto">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1" id="level_selector_auto" aria-checked="true" role="menuitemradio">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 auto
             </a>
@@ -56,21 +56,21 @@ exports[`QualityLevels > basically > custom label > should render the selected l
     
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_1080">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 Full HD
             </a>
         </li>
     
         <li class="current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="1" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_720">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="1" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 HD
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_360">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -88,7 +88,7 @@ exports[`QualityLevels > basically > standard label > should render the selected
 <ul class="gear-sub-menu quality-levels" id="level-selector-menu" role="menu">
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1" id="level_selector_auto">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1" id="level_selector_auto" aria-checked="true" role="menuitemradio">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 auto
             </a>
@@ -96,21 +96,21 @@ exports[`QualityLevels > basically > standard label > should render the selected
     
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_1080">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 Full HD
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_720">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 HD
             </a>
         </li>
     
         <li class="current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_360">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -129,21 +129,21 @@ exports[`QualityLevels > options.restrictResolution > given vertical video forma
     
     
         <li class=" disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" data-disabled="true" data-checked="false" role="menuitemradio" id="level_selector_1080">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" aria-disabled="true" aria-checked="false" role="menuitemradio" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 1080p
             </a>
         </li>
     
         <li class=" disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" data-disabled="true" data-checked="false" role="menuitemradio" id="level_selector_720">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" aria-disabled="true" aria-checked="false" role="menuitemradio" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 720p
             </a>
         </li>
     
         <li class=" current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" data-disabled="false" data-checked="true" role="menuitemradio" id="level_selector_360">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" aria-disabled="false" aria-checked="true" role="menuitemradio" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -172,21 +172,21 @@ exports[`QualityLevels > options.restrictResolution > initially > when opened >
     
     
         <li class=" disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" data-disabled="true" data-checked="false" role="menuitemradio" id="level_selector_1080">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" aria-disabled="true" aria-checked="false" role="menuitemradio" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 1080p
             </a>
         </li>
     
         <li class=" disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" data-disabled="true" data-checked="false" role="menuitemradio" id="level_selector_720">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" aria-disabled="true" aria-checked="false" role="menuitemradio" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 720p
             </a>
         </li>
     
         <li class=" current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" data-disabled="false" data-checked="true" role="menuitemradio" id="level_selector_360">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" aria-disabled="false" aria-checked="true" role="menuitemradio" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>

package/src/plugins/media-control/MediaControl.ts

@@ -50,14 +50,13 @@ export type MediaControlLeftElement =
   | 'playstop'
   | 'position'
   | 'volume'
+  | 'clips'
 
 /**
  * Media control elements that appear in main layer, spanning the entire width of the player.
  * @beta
  */
-export type MediaControlLayerElement =
-  | 'seekbar'
-  | 'seekBarContainer' // TODO rename seekbar
+export type MediaControlLayerElement = 'seekbar' | 'seekBarContainer' // TODO rename seekbar
 
 /**
  * Media control elements that appear in the right area.
@@ -96,9 +95,7 @@ export type MediaControlSettings = {
 
 const DEFAULT_SETTINGS: MediaControlSettings = {
   default: [],
-  left: [
-    'dvr'
-  ], 
+  left: ['dvr'],
   right: [
     'audiotracks',
     'cc',
@@ -114,12 +111,9 @@ const DEFAULT_SETTINGS: MediaControlSettings = {
 }
 
 const INITIAL_SETTINGS: MediaControlSettings = {
-  left: [
-  ],
-  right: [
-  ],
-  default: [
-  ],
+  left: [],
+  right: [],
+  default: [],
   seekEnabled: false,
 }
 
@@ -155,13 +149,13 @@ type DisabledClickable = {
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
- * 
+ *
  * Configuration options:
  *
  * - `mediaControl`: {@link MediaControlSettings} - specifies the allowed media control elements in each area
  *
  * - `persistConfig`: boolean - `common` option, makes the plugin persist the media control settings
- * 
+ *
  * - `chromeless`: boolean
  */
 export class MediaControl extends UICorePlugin {
@@ -213,10 +207,6 @@ export class MediaControl extends UICorePlugin {
 
   private verticalVolume = false
 
-  private $clipText: ZeptoResult | null = null
-
-  private $clipTextContainer: ZeptoResult | null = null
-
   private $duration: ZeptoResult | null = null
 
   private $fullscreenToggle: ZeptoResult | null = null
@@ -499,13 +489,9 @@ export class MediaControl extends UICorePlugin {
       Events.CONTAINER_LOADEDMETADATA,
       this.onLoadedMetadata,
     )
-    this.listenTo(
-      this.core,
-      Events.CONTAINER_DESTROYED,
-      () => {
-        this.cancelRenderTimer()
-      },
-    )
+    this.listenTo(this.core, Events.CONTAINER_DESTROYED, () => {
+      this.cancelRenderTimer()
+    })
   }
 
   /**
@@ -516,7 +502,7 @@ export class MediaControl extends UICorePlugin {
     this.userDisabled = true // TODO distinguish between user and system (e.g., unplayable) disabled?
     this.hide()
     this.unbindKeyEvents()
-    this.$el.hide()
+    this.$el.hide() // TODO why?
   }
 
   /**
@@ -1080,13 +1066,12 @@ export class MediaControl extends UICorePlugin {
     )
     trace(`${T} updateSettings`, { newSettings })
 
-
+    newSettings.left.push('clips') // TODO
     // TODO make order controlled via CSS
     newSettings.left = orderByOrderPattern(
-      [...newSettings.left, 'clipsText', 'volume'],
+      [...newSettings.left, 'volume', 'clips'],
       LEFT_ORDER,
     )
-
     if (
       this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
       this.core.activePlayback.dvrEnabled
@@ -1098,8 +1083,7 @@ export class MediaControl extends UICorePlugin {
     newSettings.right = DEFAULT_SETTINGS.right // TODO get from the options
 
     if (
-      (!this.fullScreenOnVideoTagSupported &&
-        !fullscreenEnabled()) ||
+      (!this.fullScreenOnVideoTagSupported && !fullscreenEnabled()) ||
       this.options.fullscreenDisable
     ) {
       trace(`${T} updateSettings removing fullscreen`, {
@@ -1163,11 +1147,6 @@ export class MediaControl extends UICorePlugin {
     this.$multiCameraSelector = this.$el.find(
       '.media-control-multicamera[data-multicamera]',
     )
-    this.$clipText = this.$el.find('.media-clip-text[data-clipstext]') // TODO
-    this.$clipTextContainer = this.$el.find(
-      '.media-clip-container[data-clipstext]',
-    )
-
     this.resetIndicators()
     this.initializeIcons()
   }
@@ -1183,26 +1162,14 @@ export class MediaControl extends UICorePlugin {
    * ```ts
    * class MyPlugin extends UICorePlugin {
    *   override render() {
-   *     const mediaControl = this.core.getPlugin('media_control')
-   *     const clipText = mediaControl.getElement('clipText')
-   *     clipText?.el.text('Here we go')
+   *     this.$el.html('<div data-clips>Here we go</div>')
+   *     this.core.getPlugin('media_control').mount('clips', this.$el)
    *     return this
    *   }
    * }
    * ```
    */
-  getElement(name: MediaControlElement): ZeptoResult | null {
-    switch (name) {
-      case 'audiotracks':
-        return null
-      case 'clipText':
-        return this.$clipText
-      case 'seekBarContainer':
-        return this.$seekBarContainer
-    }
-  }
-
-  putElement(name: MediaControlElement, element: ZeptoResult) {
+  mount(name: MediaControlElement, element: ZeptoResult) {
     const panel = this.getElementLocation(name)
     trace(`${T} putElement`, { name, panel: !!panel })
     if (panel) {
@@ -1221,6 +1188,10 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
+  putElement(name: MediaControlElement, element: ZeptoResult) {
+    this.mount(name, element)
+  }
+
   /**
    * Toggle the visibility of a media control element
    * @param name - The name of the media control element
@@ -1284,12 +1255,12 @@ export class MediaControl extends UICorePlugin {
       return
     }
 
-    const currentTime = this.container.getCurrentTime()
-    const duration = this.container.getDuration()
+    const currentTime = this.core.activeContainer.getCurrentTime()
+    const duration = this.core.activeContainer.getDuration()
     let position = Math.min(Math.max(currentTime + delta, 0), duration)
 
     position = Math.min((position * 100) / duration, 100)
-    this.container.seekPercentage(position)
+    this.core.activeContainer.seekPercentage(position)
   }
 
   private bindKeyAndShow(key: string, callback: () => boolean | undefined) {
@@ -1427,7 +1398,10 @@ export class MediaControl extends UICorePlugin {
    * @internal
    */
   override render() {
-    trace(`${T} render`, { needsUpdate: this.hasUpdate, metadataLoaded: this.metadataLoaded })
+    trace(`${T} render`, {
+      needsUpdate: this.hasUpdate,
+      metadataLoaded: this.metadataLoaded,
+    })
     if (!this.hasUpdate || !this.metadataLoaded) {
       return this
     }
@@ -1491,7 +1465,7 @@ export class MediaControl extends UICorePlugin {
 
     this.rendered = true
     this.updateVolumeUI()
-    
+
     this.hasUpdate = false
     // TODO setTimeout?
     this.trigger(Events.MEDIACONTROL_RENDERED)
@@ -1615,8 +1589,7 @@ MediaControl.extend = function (properties) {
 }
 
 function serializeSettings(s: MediaControlSettings) {
-  return (s.left
-    .slice() as MediaControlElement[])
+  return (s.left.slice() as MediaControlElement[])
     .sort()
     .concat(s.right.slice().sort())
     .concat(s.default.slice().sort())

package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap

@@ -13,7 +13,6 @@ exports[`MediaControl > putElement > audiotracks > should put the element in the
     
     
     
-    
 
     
     
@@ -36,10 +35,7 @@ exports[`MediaControl > putElement > audiotracks > should put the element in the
     
         </div>
     
-        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
-            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
-            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
-        </div>
+        <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         </div>
     
@@ -72,7 +68,6 @@ exports[`MediaControl > putElement > cc > should put the element in the right pa
     
     
     
-    
 
     
     
@@ -95,10 +90,7 @@ exports[`MediaControl > putElement > cc > should put the element in the right pa
     
         </div>
     
-        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
-            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
-            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
-        </div>
+        <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         </div>
     
@@ -131,7 +123,6 @@ exports[`MediaControl > putElement > gear > should put the element in the right
     
     
     
-    
 
     
     
@@ -154,10 +145,7 @@ exports[`MediaControl > putElement > gear > should put the element in the right
     
         </div>
     
-        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
-            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
-            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
-        </div>
+        <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         </div>
     
@@ -190,7 +178,6 @@ exports[`MediaControl > putElement > pip > should put the element in the right p
     
     
     
-    
 
     
     
@@ -213,10 +200,7 @@ exports[`MediaControl > putElement > pip > should put the element in the right p
     
         </div>
     
-        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
-            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
-            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
-        </div>
+        <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         </div>
     
@@ -249,7 +233,6 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
     
     
     
-    
 
     
     
@@ -278,10 +261,7 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
     
         <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
     
-        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
-            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
-            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
-        </div>
+        <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         </div>
     
@@ -329,7 +309,6 @@ exports[`MediaControl > updateSettings > dvr > when disabled > should disable DV
     
     
     
-    
 
     
     
@@ -358,10 +337,7 @@ exports[`MediaControl > updateSettings > dvr > when disabled > should disable DV
     
         <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
     
-        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
-            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
-            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
-        </div>
+        <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         </div>
     
@@ -394,7 +370,6 @@ exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR
     
     
     
-    
 
     
     
@@ -423,10 +398,7 @@ exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR
     
         <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
     
-        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
-            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
-            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
-        </div>
+        <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         <div class="my-dvr-controls" data-dvr="">live</div></div>
     

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

@@ -1,4 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { ClosedCaptions } from '../ClosedCaptions.js'
 import { createMockCore, createMockMediaControl } from '../../../testUtils.js';
 

package/src/plugins/utils.ts

@@ -6,7 +6,15 @@ export function getLocation(href: string) {
   return l;
 }
 
-export function strtimeToMiliseconds(str: string): number {
+/**
+ * Parse a time string in the format "hh:mm:ss" or "mm:ss" or "ss" to seconds.
+ * @param str - The time string to parse.
+ * @returns The time in seconds.
+ * @example "01:01:00" -> 3660
+ * @example "01:00" -> 60
+ * @example "33" -> 33
+ */
+export function parseClipTime(str: string): number {
   if (!str) {
     return 0;
   }
@@ -15,19 +23,13 @@ export function strtimeToMiliseconds(str: string): number {
 
   if (arr.length >= 3) {
     h = parseInt(arr[arr.length - 3]) * 60 * 60;
-  } else {
-    h = 0;
   }
   if (arr.length >= 2) {
     m = parseInt(arr[arr.length - 2]) * 60;
-  } else {
-    m = 0;
   }
 
   if (arr.length >= 1) {
     s = parseInt(arr[arr.length - 1]);
-  } else {
-    s = 0;
   }
 
   return (h + m + s);