@gcorevideo/player 2.22.5 → 2.22.8

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 > cc > should put the element in the right panel 1`] = `
+exports[`MediaControl > putElement > 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="">
@@ -36,7 +36,65 @@ 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>
+    
+    
+    
+        <div class="media-control-right-panel" data-media-control="">
+            
+        <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
+    
+        <div class="media-control-multicamera" data-multicamera=""></div>
+    
+        <div class="media-control-vr" data-vr=""></div>
+    
+        <div class="my-media-control" data-audiotracks="">test</div></div>
+    
+</div>
+<style>:root {}</style>"
+`;
+
+exports[`MediaControl > putElement > 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="">
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
 
+    
+    
+        <div class="media-control-left-panel" data-media-control="">
+            
+        <div class="drawer-container" data-volume="">
+            <div class="drawer-icon-container" data-volume="">
+                <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
+                <span class="drawer-text" data-volume=""></span>
+            </div>
+            
+    <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>
+        <div class="bar-scrubber" data-volume="" style="">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
+        </div>
+    </div>
+    
+        </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>
@@ -48,6 +106,8 @@ exports[`MediaControl > putElement > cc > should put the element in the right pa
     
         <div class="media-control-right-panel" data-media-control="">
             
+        <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
+    
         <div class="media-control-multicamera" data-multicamera=""></div>
     
         <div class="media-control-vr" data-vr=""></div>
@@ -94,7 +154,6 @@ 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>
@@ -106,6 +165,8 @@ exports[`MediaControl > putElement > gear > should put the element in the right
     
         <div class="media-control-right-panel" data-media-control="">
             
+        <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
+    
         <div class="media-control-multicamera" data-multicamera=""></div>
     
         <div class="media-control-vr" data-vr=""></div>
@@ -152,7 +213,6 @@ 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>
@@ -164,6 +224,8 @@ exports[`MediaControl > putElement > pip > should put the element in the right p
     
         <div class="media-control-right-panel" data-media-control="">
             
+        <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
+    
         <div class="media-control-multicamera" data-multicamera=""></div>
     
         <div class="media-control-vr" data-vr=""></div>
@@ -216,7 +278,6 @@ 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>
@@ -228,6 +289,8 @@ exports[`MediaControl > updateSettings > dvr > when disabled > should disable DV
     
         <div class="media-control-right-panel" data-media-control="">
             
+        <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
+    
         <div class="media-control-multicamera" data-multicamera=""></div>
     
         <div class="media-control-vr" data-vr=""></div>
@@ -280,7 +343,6 @@ 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>
@@ -292,6 +354,88 @@ exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR
     
         <div class="media-control-right-panel" data-media-control="">
             
+        <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
+    
+        <div class="media-control-multicamera" data-multicamera=""></div>
+    
+        <div class="media-control-vr" data-vr=""></div>
+    
+        </div>
+    
+</div>
+<style>:root {}</style>"
+`;
+
+exports[`MediaControl > when container settings update > vod > should render 1`] = `
+"<div class="media-control-background" data-background=""></div>
+
+<div class="media-control-layer gcore-skin-bg-color" data-controls="">
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+        <div class="media-control-left-panel" data-media-control="">
+            
+        <button type="button" class="media-control-button media-control-icon gcore-skin-button-color paused" data-playpause="" aria-label="playpause">/assets/icons/new/play.svg</button>
+    
+        <div class="drawer-container" data-volume="">
+            <div class="drawer-icon-container" data-volume="">
+                <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
+                <span class="drawer-text" data-volume=""></span>
+            </div>
+            
+    <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>
+        <div class="bar-scrubber" data-volume="" style="">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
+        </div>
+    </div>
+    
+        </div>
+    
+        <div class="media-control-indicator gcore-skin-text-color" data-position="">00:00</div>
+    
+        <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>
+    
+    
+        <div class="media-control-center-panel" data-media-control="">
+            
+        <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-hover" data-seekbar=""></div>
+            </div>
+        </div>
+        <div class="bar-scrubber" data-seekbar="" style="">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-seekbar=""></div>
+        </div>
+    
+        </div>
+    
+    
+        <div class="media-control-right-panel" data-media-control="">
+            
+        <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
+    
         <div class="media-control-multicamera" data-multicamera=""></div>
     
         <div class="media-control-vr" data-vr=""></div>

package/src/plugins/playback-rate/PlaybackRate.ts

@@ -72,13 +72,11 @@ const T = 'plugins.playback_rate'
  *       { value: 1, label: '1x' },
  *     ],
  *     defaultValue: 1,
- *   } as PlaybackRateSettings,
+ *   },
  * })
  * ```
  */
 export class PlaybackRate extends UICorePlugin {
-  private playbackRates: PlaybackRateOption[] = DEFAULT_PLAYBACK_RATES
-
   // Saved when an ad starts to restore after it finishes
   // private prevSelectedRate: string | undefined
 
@@ -104,10 +102,13 @@ export class PlaybackRate extends UICorePlugin {
 
   constructor(core: Core) {
     super(core)
-    this.playbackRates =
-      core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES
-    this.selectedRate =
-      core.options.playbackRate?.defaultValue || DEFAULT_PLAYBACK_RATE
+    if (this.core.options.playbackRate?.defaultValue) {
+      this.setSelectedRate(this.core.options.playbackRate.defaultValue)
+    }
+  }
+
+  private get playbackRates() {
+    return this.core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES
   }
 
   /**
@@ -179,11 +180,16 @@ export class PlaybackRate extends UICorePlugin {
 
   private onGearRendered() {
     trace(`${T} onGearRendered`)
-    this.addGearItem()
+    this.mount()
   }
 
-  private addGearItem() {
-    trace(`${T} addGearItem`)
+  private mount() {
+    trace(`${T} mount`, {
+      shouldMount: this.shouldMount(),
+    })
+    if (!this.shouldMount()) {
+      return
+    }
     this.core
       .getPlugin('bottom_gear')
       ?.addItem('rate', this.$el)
@@ -229,7 +235,7 @@ export class PlaybackRate extends UICorePlugin {
     }
   }
 
-  private shouldRender() {
+  private shouldMount() {
     if (!this.core.activePlayback) {
       return false
     }
@@ -249,13 +255,9 @@ export class PlaybackRate extends UICorePlugin {
    */
   override render() {
     trace(`${T} render`, {
-      shouldRender: this.shouldRender(),
+      shouldMount: this.shouldMount(),
     })
 
-    if (!this.shouldRender()) {
-      return this
-    }
-
     this.$el.html(
       PlaybackRate.listTemplate({
         arrowLeftIcon,
@@ -266,7 +268,7 @@ export class PlaybackRate extends UICorePlugin {
       }),
     )
 
-    this.addGearItem()
+    this.mount()
 
     return this
   }
@@ -294,12 +296,23 @@ export class PlaybackRate extends UICorePlugin {
     ) {
       this.resetPlaybackRate()
     } else {
-      this.setSelectedRate(this.selectedRate)
+      this.syncRate()
     }
   }
 
+  private syncRate() {
+    trace(`${T} syncRate`, {
+      selectedRate: this.selectedRate,
+    })
+    this.core.activePlayback?.setPlaybackRate(this.selectedRate)
+  }
+
   private resetPlaybackRate() {
-    this.setSelectedRate(DEFAULT_PLAYBACK_RATE)
+    trace(`${T} resetPlaybackRate`, {
+      selectedRate: this.selectedRate,
+    })
+    this.core.activePlayback?.setPlaybackRate(DEFAULT_PLAYBACK_RATE)
+    this.selectedRate = DEFAULT_PLAYBACK_RATE
   }
 
   private onStop() {}
@@ -311,8 +324,6 @@ export class PlaybackRate extends UICorePlugin {
     )
     if (rate) {
       this.setSelectedRate(rate)
-      this.highlightCurrentRate()
-      this.updateGearOptionLabel()
     }
 
     return false
@@ -325,18 +336,27 @@ export class PlaybackRate extends UICorePlugin {
   }
 
   private setSelectedRate(rate: number) {
-    this.core.activePlayback?.setPlaybackRate(rate)
+    if (rate === this.selectedRate) {
+      return
+    }
     this.selectedRate = rate
+    this.syncRate()
+    this.highlightCurrentRate()
+    this.updateGearOptionLabel()
   }
 
   private getTitle() {
+    const rate = this.selectedRate
     return (
-      this.playbackRates.find((r) => r.value === this.selectedRate)?.label ||
-      `x${this.selectedRate}`
+      this.playbackRates.find((r: PlaybackRateOption) => r.value === rate)?.label ||
+      `x${rate}`
     )
   }
 
   private highlightCurrentRate() {
+    trace(`${T} highlightCurrentRate`, {
+      selectedRate: this.selectedRate,
+    })
     this.allRateElements().removeClass('current')
     this.allRateElements().find('a').removeClass('gcore-skin-active')
 
@@ -347,7 +367,9 @@ export class PlaybackRate extends UICorePlugin {
   }
 
   private updateGearOptionLabel() {
-    trace(`${T} updateGearOptionLabel`)
-    this.addGearItem()
+    trace(`${T} updateGearOptionLabel`, {
+      selectedRate: this.selectedRate,
+    })
+    this.mount()
   }
 }

package/src/plugins/playback-rate/__tests__/PlaybackRate.test.ts

@@ -30,69 +30,139 @@ describe('PlaybackRate', () => {
       }
       return null
     })
-    playbackRate = new PlaybackRate(core)
-    core.emit(Events.CORE_READY)
-    core.activePlayback.getPlaybackType.mockReturnValue('live')
-    core.activeContainer.getPlaybackType.mockReturnValue('live')
-    core.getPlaybackType.mockReturnValue('live')
-    core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED)
-    core.activePlayback.dvrEnabled = true
-    core.activeContainer.isDvrEnabled.mockReturnValue(true)
-    core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
-    bottomGear.trigger(GearEvents.RENDERED)
   })
-  it('should render', () => {
-    expect(playbackRate.el.innerHTML).toMatchSnapshot()
-    expect(bottomGear.addItem).toHaveBeenCalledWith('rate', playbackRate.$el)
-    expect(
-      bottomGear.$el.find('li[data-rate]').text(),
-      // @ts-ignore
-    ).toMatchPlaybackRateLabel('playback_rate 1x')
-  })
-  it('should have normal rate initially', () => {
-    expect(
-      playbackRate.$el.find('[data-rate="1"]').parent().hasClass('current'),
-    ).toBe(true)
-    expect(
-      playbackRate.$el.find('[data-rate="1"]').hasClass('gcore-skin-active'),
-    ).toBe(true)
-  })
-  describe('on playback rate select', () => {
-    describe.each([[2], [1.5], [1.25], [1], [0.75], [0.5]])('%s', (rate) => {
+  describe('basically', () => {
+    beforeEach(() => {
+      playbackRate = new PlaybackRate(core)
+      core.emit(Events.CORE_READY)
+      mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+      core.activePlayback.getPlaybackType.mockReturnValue('live')
+      core.activeContainer.getPlaybackType.mockReturnValue('live')
+      core.getPlaybackType.mockReturnValue('live')
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED)
+      bottomGear.trigger(GearEvents.RENDERED)
+    })
+    it('should render', () => {
+      expect(playbackRate.el.innerHTML).toMatchSnapshot()
+    })
+    it('should have normal rate initially', () => {
+      expect(
+        playbackRate.$el.find('[data-rate="1"]').parent().hasClass('current'),
+      ).toBe(true)
+      expect(
+        playbackRate.$el.find('[data-rate="1"]').hasClass('gcore-skin-active'),
+      ).toBe(true)
+    })
+    describe('until media source is loaded', () => {
+      it('should not attach to the media control', () => {
+        expect(bottomGear.addItem).not.toHaveBeenCalledWith('rate', expect.anything())
+      })
+    })
+    describe('after media source is loaded', () => {
+      describe('when DVR is available', () => {
+        beforeEach(() => {
+          core.activePlayback.dvrEnabled = true
+          core.activeContainer.isDvrEnabled.mockReturnValue(true)
+          core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+          core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+        })
+        it('should attach to the media control', () => {
+          expect(bottomGear.addItem).toHaveBeenCalledWith('rate', playbackRate.$el)
+          expect(
+            bottomGear.$el.find('li[data-rate]').text(),
+            // @ts-ignore
+          ).toMatchPlaybackRateLabel('1x')
+        })
+      })
+      describe('when DVR is not available', () => {
+        beforeEach(() => {
+          core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+          core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+        })
+        it('should not attach to the media control', () => {
+          expect(bottomGear.addItem).not.toHaveBeenCalledWith('rate', expect.anything())
+        })
+      })
+    });
+    describe('on playback rate select', () => {
       beforeEach(() => {
-        playbackRate.$el.find(`[data-rate="${rate}"]`).click()
+        core.activePlayback.dvrEnabled = true
+        core.activeContainer.isDvrEnabled.mockReturnValue(true)
+        core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+        core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
       })
-      it('should set the selected rate', () => {
-        expect(core.activePlayback.setPlaybackRate).toHaveBeenCalledWith(rate)
+      describe.each([[2], [1.5], [1.25], [0.75], [0.5]])('%s', (rate) => {
+        beforeEach(() => {
+          playbackRate.$el.find(`[data-rate="${rate}"]`).click()
+        })
+        it('should set the selected rate', () => {
+          expect(core.activePlayback.setPlaybackRate).toHaveBeenCalledWith(rate)
+        })
+        it('should highlight the selected rate', () => {
+          expect(
+            playbackRate.$el
+              .find(`[data-rate="${rate}"]`)
+              .parent()
+              .hasClass('current'),
+          ).toBe(true)
+          expect(
+            playbackRate.$el
+              .find(`[data-rate="${rate}"]`)
+              .hasClass('gcore-skin-active'),
+          ).toBe(true)
+        })
+        it('should update the gear box option label', () => {
+          expect(
+            bottomGear.$el.find('#playback-rate-button').text(),
+            // @ts-ignore
+          ).toMatchPlaybackRateLabel(`${rate}x`)
+        })
       })
-      it('should highlight the selected rate', () => {
-        expect(
-          playbackRate.$el
-            .find(`[data-rate="${rate}"]`)
-            .parent()
-            .hasClass('current'),
-        ).toBe(true)
-        expect(
-          playbackRate.$el
-            .find(`[data-rate="${rate}"]`)
-            .hasClass('gcore-skin-active'),
-        ).toBe(true)
+    })
+    describe('on go back', () => {
+      beforeEach(async () => {
+        playbackRate.$el.find('#playback-rate-back-button').click()
+        return new Promise((resolve) => setTimeout(resolve, 0))
       })
-      it('should update the gear box option label', () => {
-        expect(
-          bottomGear.$el.find('#playback-rate-button').text(),
-          // @ts-ignore
-        ).toMatchPlaybackRateLabel(`playback_rate ${rate}x`)
+      it('should refresh the bottom gear', () => {
+        expect(bottomGear.refresh).toHaveBeenCalled()
       })
     })
   })
-  describe('on go back', () => {
-    beforeEach(async () => {
-      playbackRate.$el.find('#playback-rate-back-button').click()
-      return new Promise((resolve) => setTimeout(resolve, 0))
+  describe('options.defaultValue', () => {
+    beforeEach(() => {
+      core.options.playbackRate = {
+        defaultValue: 1.5,
+      }
+      playbackRate = new PlaybackRate(core)
+      core.emit(Events.CORE_READY)
+      mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+      core.activePlayback.getPlaybackType.mockReturnValue('live')
+      core.activeContainer.getPlaybackType.mockReturnValue('live')
+      core.getPlaybackType.mockReturnValue('live')
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED)
+      bottomGear.trigger(GearEvents.RENDERED)
+      core.activePlayback.dvrEnabled = true
+      core.activeContainer.isDvrEnabled.mockReturnValue(true)
+      core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+      core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+    })
+    it('should set the selected rate to the defaultValue', () => {
+      expect(core.activePlayback.setPlaybackRate).toHaveBeenCalledWith(1.5)
+    })
+    it('should highlight the selected rate', () => {
+      expect(
+        playbackRate.$el.find('[data-rate="1.5"]').parent().hasClass('current'),
+      ).toBe(true)
+      expect(
+        playbackRate.$el.find('[data-rate="1.5"]').hasClass('gcore-skin-active'),
+      ).toBe(true)
     })
-    it('should refresh the bottom gear', () => {
-      expect(bottomGear.refresh).toHaveBeenCalled()
+    it('should render proper gear box option label', () => {
+      expect(
+        bottomGear.$el.find('#playback-rate-button').text(),
+        // @ts-ignore
+      ).toMatchPlaybackRateLabel('1.5x')
     })
   })
 })
@@ -105,7 +175,7 @@ expect.extend({
         received
           .replace(/\/assets.*\.svg/g, '')
           .replace(/\s+/g, ' ')
-          .trim().includes(expected),
+          .trim().includes(`playback_rate ${expected}`),
       message: () => `${received} does${isNot ? '' : ' not'} match ${expected}`,
     }
   },

package/src/plugins/playback-rate/__tests__/__snapshots__/PlaybackRate.test.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`PlaybackRate > should render 1`] = `
+exports[`PlaybackRate > basically > should render 1`] = `
 "<button class="gplayer-lite-btn go-back gcore-skin-text-color" id="playback-rate-back-button">
     <span class="arrow-left-icon">/assets/icons/new/arrow-left.svg</span>
     playback_rate

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -11,7 +11,7 @@ import subtitlesOnIcon from '../../../assets/icons/new/subtitles-on.svg'
 import comboboxHTML from '../../../assets/subtitles/combobox.ejs'
 import stringHTML from '../../../assets/subtitles/string.ejs'
 
-import { isFullscreen } from '../utils.js'
+import { isFullscreen } from '../utils/fullscreen.js'
 import type { ZeptoResult } from '../../types.js'
 
 const VERSION: string = '2.19.14'

package/src/plugins/utils/fullscreen.ts

@@ -0,0 +1,34 @@
+import { Browser, Utils } from '@clappr/core';
+import { reportError } from '@gcorevideo/utils';
+
+export const fullscreenEnabled = Utils.Fullscreen.fullscreenEnabled
+
+export function isFullscreen(el: HTMLElement): boolean {
+  const video =
+    el.nodeName === 'video'
+      ? (el as HTMLVideoElement)
+      : el.querySelector('video')
+  if (!video) {
+    return false
+  }
+  if (Browser.isiOS) {
+    return FullscreenIOS.isFullscreen(video)
+  }
+  return !!document.fullscreenElement
+}
+
+const FullscreenIOS = {
+  isFullscreen: function (el: HTMLVideoElement): boolean {
+    try {
+      // @ts-ignore
+      if (el.webkitDisplayingFullscreen !== undefined) {
+        // @ts-ignore
+        return !!el.webkitDisplayingFullscreen
+      }
+    } catch (e) {
+      reportError(e)
+    }
+
+    return false
+  },
+}