@gcorevideo/player 2.24.11 → 2.24.14

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 > mount > audiotracks > should put the element in the right panel 1`] = `
+exports[`MediaControl > mount > base > should attach node to DOM tree 1`] = `
 "<div class="media-control-background" data-background=""></div>
 
 <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -18,6 +18,8 @@ exports[`MediaControl > mount > audiotracks > should put the element in the righ
     
         <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>
@@ -35,11 +37,19 @@ exports[`MediaControl > mount > audiotracks > should put the element in the righ
     
         </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-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         </div>
     
     
+        <div class="media-control-center-panel" data-media-control="">
+            
+        </div>
+    
     
         <div class="media-control-right-panel" data-media-control="">
             
@@ -49,13 +59,13 @@ exports[`MediaControl > mount > audiotracks > should put the element in the righ
     
         <div class="media-control-vr" data-vr=""></div>
     
-        <div class="my-media-control" data-audiotracks="">test</div></div>
+        </div>
     
-</div>
+<div id="test-element">test</div></div>
 <style>:root {}</style>"
 `;
 
-exports[`MediaControl > mount > cc > should put the element in the right panel 1`] = `
+exports[`MediaControl > mount > center > should attach node to DOM tree 1`] = `
 "<div class="media-control-background" data-background=""></div>
 
 <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -73,6 +83,8 @@ exports[`MediaControl > mount > cc > should put the element in the right panel 1
     
         <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>
@@ -90,11 +102,19 @@ exports[`MediaControl > mount > cc > should put the element in the right panel 1
     
         </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-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         </div>
     
     
+        <div class="media-control-center-panel" data-media-control="">
+            
+        <div id="test-element">test</div></div>
+    
     
         <div class="media-control-right-panel" data-media-control="">
             
@@ -104,13 +124,13 @@ exports[`MediaControl > mount > cc > should put the element in the right panel 1
     
         <div class="media-control-vr" data-vr=""></div>
     
-        <div class="my-media-control" data-cc="">test</div></div>
+        </div>
     
 </div>
 <style>:root {}</style>"
 `;
 
-exports[`MediaControl > mount > gear > should put the element in the right panel 1`] = `
+exports[`MediaControl > mount > left > should attach node to DOM tree 1`] = `
 "<div class="media-control-background" data-background=""></div>
 
 <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -128,6 +148,8 @@ exports[`MediaControl > mount > gear > should put the element in the right panel
     
         <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>
@@ -145,11 +167,19 @@ exports[`MediaControl > mount > gear > should put the element in the right panel
     
         </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-control-indicator gcore-skin-text-color" data-clips=""></div>
     
-        </div>
+        <div id="test-element">test</div></div>
     
     
+        <div class="media-control-center-panel" data-media-control="">
+            
+        </div>
+    
     
         <div class="media-control-right-panel" data-media-control="">
             
@@ -159,13 +189,13 @@ exports[`MediaControl > mount > gear > should put the element in the right panel
     
         <div class="media-control-vr" data-vr=""></div>
     
-        <div class="my-media-control" data-gear="">test</div></div>
+        </div>
     
 </div>
 <style>:root {}</style>"
 `;
 
-exports[`MediaControl > mount > pip > should put the element in the right panel 1`] = `
+exports[`MediaControl > mount > right > should attach node to DOM tree 1`] = `
 "<div class="media-control-background" data-background=""></div>
 
 <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -183,6 +213,8 @@ exports[`MediaControl > mount > pip > should put the element in the right panel
     
         <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>
@@ -200,11 +232,19 @@ exports[`MediaControl > mount > pip > should put the element in the right panel
     
         </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-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         </div>
     
     
+        <div class="media-control-center-panel" data-media-control="">
+            
+        </div>
+    
     
         <div class="media-control-right-panel" data-media-control="">
             
@@ -214,13 +254,13 @@ exports[`MediaControl > mount > pip > should put the element in the right panel
     
         <div class="media-control-vr" data-vr=""></div>
     
-        <div class="my-media-control" data-pip="">test</div></div>
+        <div id="test-element">test</div></div>
     
 </div>
 <style>:root {}</style>"
 `;
 
-exports[`MediaControl > rendering timing > once metadata is loaded > should wait a delay before rendering anything 1`] = `
+exports[`MediaControl > mount > root > should attach node to DOM tree 1`] = `
 "<div class="media-control-background" data-background=""></div>
 
 <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -266,6 +306,71 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
         </div>
     
     
+        <div class="media-control-center-panel" data-media-control="">
+            
+        </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>
+    
+</div>
+<style>:root {}</style><div id="test-element">test</div>"
+`;
+
+exports[`MediaControl > rendering timing > once metadata is loaded > should wait a delay before rendering anything 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 volume-bar-hide" data-volume="">
+        <div class="bar-background" data-volume="">
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
+        </div>
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
+            <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-control-indicator gcore-skin-text-color" data-clips=""></div>
+    
+        </div>
+    
+    
         <div class="media-control-center-panel" data-media-control="">
             
         <div class="bar-container" data-seekbar="">
@@ -366,7 +471,7 @@ exports[`MediaControl > seekbar > should render 1`] = `
 <style>:root {}</style>"
 `;
 
-exports[`MediaControl > updateSettings > dvr > when disabled > should disable DVR controls 1`] = `
+exports[`MediaControl > slot > 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="">
@@ -384,8 +489,6 @@ exports[`MediaControl > updateSettings > dvr > when disabled > should disable DV
     
         <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>
@@ -403,9 +506,60 @@ exports[`MediaControl > updateSettings > dvr > when disabled > should disable DV
     
         </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-clips=""></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 > slot > 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-indicator gcore-skin-text-color" data-duration="">00:00</div>
+    
+    
+    
+
+    
+    
+        <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="width: 100%;"></div>
+        </div>
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
+            <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-clips=""></div>
     
@@ -421,13 +575,13 @@ exports[`MediaControl > updateSettings > dvr > when disabled > should disable DV
     
         <div class="media-control-vr" data-vr=""></div>
     
-        </div>
+        <div class="my-media-control" data-cc="">test</div></div>
     
 </div>
 <style>:root {}</style>"
 `;
 
-exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR controls 1`] = `
+exports[`MediaControl > slot > 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="">
@@ -445,8 +599,6 @@ exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR
     
         <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>
@@ -464,13 +616,64 @@ exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR
     
         </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-clips=""></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-gear="">test</div></div>
+    
+</div>
+<style>:root {}</style>"
+`;
+
+exports[`MediaControl > slot > 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="">
+    
+    
+    
+    
     
-        <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
+    
+    
+    
+    
+
+    
+    
+        <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="width: 100%;"></div>
+        </div>
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
+            <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-clips=""></div>
     
-        <div class="my-dvr-controls" data-dvr="">live</div></div>
+        </div>
     
     
     
@@ -482,7 +685,7 @@ exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR
     
         <div class="media-control-vr" data-vr=""></div>
     
-        </div>
+        <div class="my-media-control" data-pip="">test</div></div>
     
 </div>
 <style>:root {}</style>"

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.mount('pip', this.$el);
+      mediaControl.slot('pip', this.$el);
     }
 
     return this;

package/src/plugins/subtitles/ClosedCaptions.ts

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

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

@@ -61,7 +61,7 @@ describe('ClosedCaptions', () => {
     it('should render', () => {
       expect(cc.el.innerHTML).toMatchSnapshot()
       expect(cc.$el.find('#cc-button').length).toEqual(1)
-      expect(mediaControl.mount).toHaveBeenCalledWith('cc', cc.$el)
+      expect(mediaControl.slot).toHaveBeenCalledWith('cc', cc.$el)
     })
     describe('when button is clicked', () => {
       beforeEach(() => {

package/src/testUtils.ts

@@ -128,6 +128,8 @@ export function createMockMediaControl(core: any) {
   // @ts-ignore
   mediaControl.mount = vi.fn()
   // @ts-ignore
+  mediaControl.slot = vi.fn()
+  // @ts-ignore
   mediaControl.container = core.activeContainer
   // @ts-ignore
   mediaControl.getAvailableHeight = vi.fn().mockReturnValue(300)