@gcorevideo/player 2.22.18 → 2.22.20

package/src/plugins/dvr-controls/__tests__/DvrControls.test.ts

@@ -20,11 +20,30 @@ describe('DvrControls', () => {
     }
     core.getPlugin.mockImplementation((name: string) => plugins[name])
     dvrControls = new DvrControls(core)
-    plugins.dvr_controls = dvrControls
+    core.emit(Events.CORE_READY)
+    mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+    core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+  })
+  describe('basically', () => {
+    it('should render', () => {
+      expect(dvrControls.el.innerHTML).toMatchSnapshot()
+      expect(dvrControls.el.textContent).toMatch(/\blive\b/)
+      expect(dvrControls.el.textContent).toMatch(/\bback_to_live\b/)
+    })
+  })
+  describe('while playback type is unknown', () => {
+    it('should not mount', () => {
+      expect(mediaControl.mount).not.toHaveBeenCalledWith(
+        'dvr',
+        dvrControls.$el,
+      )
+    })
   })
   describe('live stream', () => {
     beforeEach(() => {
       core.getPlaybackType.mockReturnValue('live')
+      core.activeContainer.getPlaybackType.mockReturnValue('live')
+      core.activePlayback.getPlaybackType.mockReturnValue('live')
     })
     describe.each([
       ['no DVR', false, false, false],
@@ -33,36 +52,75 @@ describe('DvrControls', () => {
       beforeEach(() => {
         core.activePlayback.dvrEnabled = dvrEnabled
         core.activeContainer.isDvrEnabled.mockReturnValue(dvrEnabled)
-        core.trigger(Events.CORE_READY)
-        core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+        core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+        core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
         if (dvrInUse) {
           core.activePlayback.dvrInUse = true
           core.activeContainer.isDvrInUse.mockReturnValue(true)
-          core.activeContainer.emit(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, true)
+          core.activeContainer.emit(
+            Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
+            true,
+          )
         }
       })
-      it('should render', () => {
-        expect(dvrControls.el.textContent).toBeTruthy()
-        expect(dvrControls.el.innerHTML).toMatchSnapshot()
-      })
+      // TODO let the media control itself handle this
       it('should hide duration and position indicators', () => {
-        expect(mediaControl.toggleElement).toHaveBeenCalledWith('duration', false)
-        expect(mediaControl.toggleElement).toHaveBeenCalledWith('position', false)
+        expect(mediaControl.toggleElement).toHaveBeenCalledWith(
+          'duration',
+          false,
+        )
+        expect(mediaControl.toggleElement).toHaveBeenCalledWith(
+          'position',
+          false,
+        )
       })
-      it('should render to the media control', () => {
-        expect(mediaControl.putElement).toHaveBeenCalledWith('dvr', dvrControls.$el)
+      it('should mount to the media control', () => {
+        expect(mediaControl.mount).toHaveBeenCalledWith('dvr', dvrControls.$el)
       })
+      if (dvrEnabled) {
+        if (dvrInUse) {
+          it('should show back_to_live button', () => {
+            expect(
+              dvrControls.$el
+                .find('#media-control-back-to-live')
+                .css('display'),
+            ).not.toBe('none')
+          })
+          it('should hide live inficator', () => {
+            expect(
+              dvrControls.$el.find('#media-control-live').css('display'),
+            ).toBe('none')
+          })
+        } else {
+          it('should show live inficator', () => {
+            expect(
+              dvrControls.$el.find('#media-control-live').css('display'),
+            ).not.toBe('none')
+          })
+          it('should hide back_to_live button', () => {
+            expect(
+              dvrControls.$el
+                .find('#media-control-back-to-live')
+                .css('display'),
+            ).toBe('none')
+          })
+        }
+      }
     })
     describe('when back_to_live button is clicked', () => {
       beforeEach(() => {
         core.activePlayback.dvrEnabled = true
-        core.trigger('core:ready')
-        core.trigger('core:active:container:changed')
+        core.activeContainer.isDvrEnabled.mockReturnValue(true)
+        core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+        core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
         core.activeContainer.getDuration.mockReturnValue(180)
-        core.activeContainer.trigger('container:dvr', true)
-        dvrControls.$el.find('.live-button').click()
+        core.activeContainer.emit(
+          Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
+          true,
+        )
+        dvrControls.$el.find('#media-control-back-to-live').click()
       })
-      it('should call active container play', () => {
+      it('should play stream', () => {
         expect(core.activeContainer.play).toHaveBeenCalled()
       })
       it('should seek to live edge', () => {
@@ -70,20 +128,20 @@ describe('DvrControls', () => {
       })
     })
   })
-  describe('basically', () => {
+  describe('VOD stream', () => {
     beforeEach(() => {
       core.getPlaybackType.mockReturnValue(Playback.VOD)
       core.activeContainer.getPlaybackType.mockReturnValue(Playback.VOD)
       core.activePlayback.getPlaybackType.mockReturnValue(Playback.VOD)
+      core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+      core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
     })
-    beforeEach(() => {
-      core.trigger(Events.CORE_READY)
-      core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
-    })
-    it('should render', () => {
-      expect(dvrControls.el.innerHTML).toMatchSnapshot()
-      expect(dvrControls.el.textContent).toContain('live')
-      expect(dvrControls.el.textContent).toContain('back_to_live')
+    // TODO handle mount points in MediaControl
+    it('should not mount', () => {
+      expect(mediaControl.mount).not.toHaveBeenCalledWith(
+        'dvr',
+        expect.anything(),
+      )
     })
   })
 })

package/src/plugins/dvr-controls/__tests__/__snapshots__/DvrControls.test.ts.snap

@@ -5,15 +5,3 @@ exports[`DvrControls > basically > should render 1`] = `
 <button type="button" class="live-button" aria-label="back_to_live" id="media-control-back-to-live">back_to_live</button>
 "
 `;
-
-exports[`DvrControls > live stream > DVR at live edge > should render 1`] = `
-"<div class="live-info" id="media-control-live">live</div>
-<button type="button" class="live-button" aria-label="back_to_live" id="media-control-back-to-live">back_to_live</button>
-"
-`;
-
-exports[`DvrControls > live stream > no DVR > should render 1`] = `
-"<div class="live-info" id="media-control-live">live</div>
-<button type="button" class="live-button" aria-label="back_to_live" id="media-control-back-to-live">back_to_live</button>
-"
-`;

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

@@ -81,6 +81,16 @@ export type MediaControlElement =
   | MediaControlLayerElement
   | MediaControlRightElement
 
+const MANAGED_ELEMENTS: MediaControlElement[] = [
+  'dvr',
+  'duration',
+  'fullscreen',
+  'hd-indicator',
+  'position',
+  'seekbar',
+  'volume',
+]
+
 /**
  * Specifies the allowed media control elements in each area.
  * Can be used to restrict rendered media control elements.
@@ -99,8 +109,6 @@ const DEFAULT_SETTINGS: MediaControlSettings = {
   right: [
     'audiotracks',
     'cc',
-    // 'dvr',
-    // 'duration',
     'fullscreen',
     'gear',
     'multicamera',
@@ -122,10 +130,10 @@ const T = 'plugins.media_control'
 const LEFT_ORDER = [
   'playpause',
   'playstop',
-  'dvr',
   'volume',
   'position',
   'duration',
+  'dvr',
 ]
 
 const { Config, Fullscreen, formatTime, extend, removeArrayItem } = Utils
@@ -996,8 +1004,7 @@ export class MediaControl extends UICorePlugin {
       }
       this.$el.show()
       this.trigger(Events.MEDIACONTROL_SHOW, this.name)
-      this.container &&
-        this.container.trigger(Events.CONTAINER_MEDIACONTROL_SHOW, this.name)
+      this.core.activeContainer?.trigger(Events.CONTAINER_MEDIACONTROL_SHOW, this.name)
       this.$el.removeClass('media-control-hide')
       this.hideId = setTimeout(() => this.hide(), timeout)
       if (event) {
@@ -1066,7 +1073,7 @@ export class MediaControl extends UICorePlugin {
     )
     trace(`${T} updateSettings`, { newSettings })
 
-    newSettings.left.push('clips') // TODO
+    newSettings.left.push('clips') // TODO settings
     // TODO make order controlled via CSS
     newSettings.left = orderByOrderPattern(
       [...newSettings.left, 'volume', 'clips'],
@@ -1155,7 +1162,6 @@ export class MediaControl extends UICorePlugin {
    * Get a media control element DOM node
    * @param name - The name of the media control element
    * @returns The DOM node to render to or extend
-   * @deprecated  Use {@link MediaControl.putElement} instead
    * @remarks
    * Use this method to render custom media control UI in a plugin
    * @example
@@ -1171,7 +1177,7 @@ export class MediaControl extends UICorePlugin {
    */
   mount(name: MediaControlElement, element: ZeptoResult) {
     const panel = this.getElementLocation(name)
-    trace(`${T} putElement`, { name, panel: !!panel })
+    trace(`${T} mount`, { name, panel: !!panel })
     if (panel) {
       const current = panel.find(`[data-${name}]`)
       element.attr(`data-${name}`, '')
@@ -1188,6 +1194,11 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
+  /**
+   * @deprecated  Use {@link MediaControl.mount} instead
+   * @param name
+   * @param element
+   */
   putElement(name: MediaControlElement, element: ZeptoResult) {
     this.mount(name, element)
   }
@@ -1195,7 +1206,7 @@ export class MediaControl extends UICorePlugin {
   /**
    * Toggle the visibility of a media control element
    * @param name - The name of the media control element
-   * @param show - Whether to show or hide the element
+   * @param show - Visibility state
    */
   toggleElement(area: MediaControlElement, show: boolean) {
     this.$el.find(`[data-${area}]`).toggle(show)
@@ -1456,6 +1467,7 @@ export class MediaControl extends UICorePlugin {
         width: this.options.width,
         height: this.options.height,
       })
+      // TODO check out
       this.hideVolumeBar(0)
     }, 0)
 

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

@@ -189,7 +189,7 @@ describe('MediaControl', () => {
       })
     })
   })
-  describe('putElement', () => {
+  describe('mount', () => {
     beforeEach(async () => {
       mediaControl = new MediaControl(core)
       core.emit(Events.CORE_READY)
@@ -212,7 +212,7 @@ describe('MediaControl', () => {
         const element = document.createElement('div')
         element.className = 'my-media-control'
         element.textContent = 'test'
-        mediaControl.putElement(mcName, $(element))
+        mediaControl.mount(mcName, $(element))
 
         expect(mediaControl.el.innerHTML).toMatchSnapshot()
         expect(
@@ -234,19 +234,22 @@ describe('MediaControl', () => {
           seekEnabled: true,
         }
         core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+        core.activePlayback.getPlaybackType.mockReturnValue(Playback.LIVE)
+        core.activeContainer.getPlaybackType.mockReturnValue(Playback.LIVE)
+        core.getPlaybackType.mockReturnValue(Playback.LIVE)
         await runMetadataLoaded(core)
       })
       describe('when enabled', () => {
         beforeEach(() => {
           core.activePlayback.dvrEnabled = true
           core.activeContainer.isDvrEnabled.mockReturnValue(true)
-          core.activeContainer.emit(Events.CONTAINER_SETTINGSUPDATE, true)
+          core.activeContainer.emit(Events.CONTAINER_SETTINGSUPDATE)
         })
         it('should enable DVR controls', () => {
           const element = document.createElement('div')
           element.className = 'my-dvr-controls'
           element.textContent = 'live'
-          mediaControl.putElement('dvr', $(element))
+          mediaControl.mount('dvr', $(element))
           expect(mediaControl.el.innerHTML).toMatchSnapshot()
           expect(
             mediaControl.$el.find('.media-control-left-panel .my-dvr-controls')
@@ -259,7 +262,7 @@ describe('MediaControl', () => {
           const element = document.createElement('div')
           element.className = 'my-dvr-controls'
           element.textContent = 'live'
-          mediaControl.putElement('dvr', $(element))
+          mediaControl.mount('dvr', $(element))
           expect(mediaControl.el.innerHTML).toMatchSnapshot()
           expect(
             mediaControl.$el.find('.media-control-left-panel .my-dvr-controls')

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

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`MediaControl > putElement > audiotracks > should put the element in the right panel 1`] = `
+exports[`MediaControl > mount > audiotracks > should put the element in the right panel 1`] = `
 "<div class="media-control-background" data-background=""></div>
 
 <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -26,9 +26,9 @@ exports[`MediaControl > putElement > audiotracks > should put the element in the
             
     <div class="bar-container" data-volume="">
         <div class="bar-background" data-volume="">
-            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>
-        <div class="bar-scrubber" data-volume="" style="">
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
         </div>
     </div>
@@ -55,7 +55,7 @@ exports[`MediaControl > putElement > audiotracks > should put the element in the
 <style>:root {}</style>"
 `;
 
-exports[`MediaControl > putElement > cc > should put the element in the right panel 1`] = `
+exports[`MediaControl > mount > cc > should put the element in the right panel 1`] = `
 "<div class="media-control-background" data-background=""></div>
 
 <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -81,9 +81,9 @@ exports[`MediaControl > putElement > cc > should put the element in the right pa
             
     <div class="bar-container" data-volume="">
         <div class="bar-background" data-volume="">
-            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>
-        <div class="bar-scrubber" data-volume="" style="">
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
         </div>
     </div>
@@ -110,7 +110,7 @@ exports[`MediaControl > putElement > cc > should put the element in the right pa
 <style>:root {}</style>"
 `;
 
-exports[`MediaControl > putElement > gear > should put the element in the right panel 1`] = `
+exports[`MediaControl > mount > gear > should put the element in the right panel 1`] = `
 "<div class="media-control-background" data-background=""></div>
 
 <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -136,9 +136,9 @@ exports[`MediaControl > putElement > gear > should put the element in the right
             
     <div class="bar-container" data-volume="">
         <div class="bar-background" data-volume="">
-            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>
-        <div class="bar-scrubber" data-volume="" style="">
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
         </div>
     </div>
@@ -165,7 +165,7 @@ exports[`MediaControl > putElement > gear > should put the element in the right
 <style>:root {}</style>"
 `;
 
-exports[`MediaControl > putElement > pip > should put the element in the right panel 1`] = `
+exports[`MediaControl > mount > pip > should put the element in the right panel 1`] = `
 "<div class="media-control-background" data-background=""></div>
 
 <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -191,9 +191,9 @@ exports[`MediaControl > putElement > pip > should put the element in the right p
             
     <div class="bar-container" data-volume="">
         <div class="bar-background" data-volume="">
-            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>
-        <div class="bar-scrubber" data-volume="" style="">
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
         </div>
     </div>
@@ -248,9 +248,9 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
             
     <div class="bar-container" data-volume="">
         <div class="bar-background" data-volume="">
-            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>
-        <div class="bar-scrubber" data-volume="" style="">
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
         </div>
     </div>
@@ -271,11 +271,11 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
         <div class="bar-container" data-seekbar="">
             <div class="bar-background" data-seekbar="">
                 <div class="bar-fill-1" data-seekbar=""></div>
-                <div class="bar-fill-2 gcore-skin-main-color" data-seekbar="" style=""></div>
+                <div class="bar-fill-2 gcore-skin-main-color" data-seekbar="" style="width: 0%;"></div>
                 <div class="bar-hover" data-seekbar=""></div>
             </div>
         </div>
-        <div class="bar-scrubber" data-seekbar="" style="">
+        <div class="bar-scrubber" data-seekbar="" style="left: 0%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-seekbar=""></div>
         </div>
     
@@ -324,9 +324,9 @@ exports[`MediaControl > updateSettings > dvr > when disabled > should disable DV
             
     <div class="bar-container" data-volume="">
         <div class="bar-background" data-volume="">
-            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>
-        <div class="bar-scrubber" data-volume="" style="">
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
         </div>
     </div>
@@ -385,9 +385,9 @@ exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR
             
     <div class="bar-container" data-volume="">
         <div class="bar-background" data-volume="">
-            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>
-        <div class="bar-scrubber" data-volume="" style="">
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
         </div>
     </div>

package/src/plugins/picture-in-picture/PictureInPicture.ts

@@ -97,7 +97,7 @@ export class PictureInPicture extends UICorePlugin {
 
     const mediaControl = this.core.getPlugin('media_control');
     if (mediaControl) {
-      mediaControl.putElement('pip', this.$el);
+      mediaControl.mount('pip', this.$el);
     }
 
     return this;

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -337,7 +337,7 @@ export class ClosedCaptions extends UICorePlugin {
     this.resizeFont()
 
     this.core.activeContainer.$el.append(this.$line)
-    mediaControl.putElement('cc', this.$el)
+    mediaControl.mount('cc', this.$el)
 
     this.updateSelection()
 

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

@@ -53,7 +53,7 @@ describe('ClosedCaptions', () => {
     it('should render', () => {
       expect(cc.el.innerHTML).toMatchSnapshot()
       expect(cc.$el.find('[data-cc-button]').length).toEqual(1)
-      expect(mediaControl.putElement).toHaveBeenCalledWith('cc', cc.$el)
+      expect(mediaControl.mount).toHaveBeenCalledWith('cc', cc.$el)
     })
   })
 })

package/src/plugins/vast-ads/VastAds.ts

@@ -627,7 +627,7 @@ export class VastAds extends UICorePlugin {
 
     // Attempt to get click-to-pause plugin. (May interfere with advert click handling)
     this._clickToPausePlugin = this._container?.getPlugin(
-      'click_to_pause_custom',
+      'click_to_pause',
     )
 
     assert(this.playback, 'playback is not defined')

package/src/plugins/vast-ads/rollmanager.ts

@@ -72,7 +72,7 @@ export default class RollManager extends Events {
     this._playback = this.core.activePlayback;
     this._contentElement = this._playback.el as HTMLMediaElement;
     this._posterPlugin = this._container.getPlugin('poster');
-    this._clickToPausePlugin = this._container.getPlugin('click_to_pause_custom');
+    this._clickToPausePlugin = this._container.getPlugin('click_to_pause');
     this._adContainer = _adContainer;
     this._events = {};
     this._pr = Math.floor(Math.random() * 1000000);

package/src/testUtils.ts

@@ -100,7 +100,7 @@ export function createMockCore(
       ...options,
     },
     configure: vi.fn(),
-    getPlaybackType: vi.fn().mockReturnValue(Playback.LIVE),
+    getPlaybackType: vi.fn(),
     getPlugin: vi.fn(),
     load: vi.fn(),
     trigger: emitter.emit,
@@ -140,7 +140,7 @@ export function createMockPlayback(name = 'mock') {
     getDuration: vi.fn().mockImplementation(() => 100),
     enterPiP: vi.fn(),
     exitPiP: vi.fn(),
-    getPlaybackType: vi.fn().mockImplementation(() => Playback.LIVE),
+    getPlaybackType: vi.fn(),
     getStartTimeOffset: vi.fn().mockImplementation(() => 0),
     getCurrentTime: vi.fn().mockImplementation(() => 0),
     isHighDefinitionInUse: vi.fn().mockImplementation(() => false),
@@ -157,7 +157,10 @@ export function createMockPlayback(name = 'mock') {
   })
 }
 
-export function createMockContainer(options: Record<string, unknown> = {}, playback: any = createMockPlayback()) {
+export function createMockContainer(
+  options: Record<string, unknown> = {},
+  playback: any = createMockPlayback(),
+) {
   const el = playback.el
   const emitter = new Events()
   return Object.assign(emitter, {
@@ -167,7 +170,7 @@ export function createMockContainer(options: Record<string, unknown> = {}, playb
     $el: $(el),
     getDuration: vi.fn().mockReturnValue(0),
     getPlugin: vi.fn(),
-    getPlaybackType: vi.fn().mockReturnValue(Playback.LIVE),
+    getPlaybackType: vi.fn(),
     isDvrInUse: vi.fn().mockReturnValue(false),
     isDvrEnabled: vi.fn().mockReturnValue(false),
     isPlaying: vi.fn().mockReturnValue(false),
@@ -202,7 +205,10 @@ export function createMockBottomGear(core: any) {
     if (existing.length) {
       return existing
     }
-    return $('<li></li>').attr(`data-${name}`, '').append($el).appendTo(plugin.$el)
+    return $('<li></li>')
+      .attr(`data-${name}`, '')
+      .append($el)
+      .appendTo(plugin.$el)
   })
   plugin.refresh = vi.fn()
   return plugin

package/src/types.ts

@@ -163,7 +163,7 @@ export interface PlayerConfig extends Record<string, unknown> {
 
   /**
    * Stream type.
-   * @remark
+   * @remarks
    * Should only be set if known in advance, as it should not change once determined.
    * Otherwise it might cause inconsistencies in the UI plugins behavior, for instance, glitches with rendering of the DVR controls or seek bar.
    */