@gcorevideo/player 2.21.3 → 2.21.6

package/assets/audio-selector/style.scss

@@ -4,7 +4,7 @@
   outline: none !important;
 }
 
-.media-control-audio-tracks {
+.media-control-audiotracks {
   position: relative;
 
   button {

package/assets/audio-selector/track-selector.ejs

@@ -1,10 +1,10 @@
-<button data-track-selector-button class='gcore-skin-button-color'>
+<button data-audiotracks-button class='gcore-skin-button-color' id="audiotracks-button">
     <span class='audio-text'><%= title %></span> <span class="audio-arrow"></span>
 </button>
-<ul class='gcore-skin-bg-color'>
+<ul class='gcore-skin-bg-color' id="audiotracks-select">
     <% for (const track of tracks) { %>
         <li>
-            <a href="#" class='gcore-skin-text-color' data-track-selector-select="<%= track.id %>">
+            <a href="#" class='gcore-skin-text-color' data-audiotracks-select="<%= track.id %>">
                 <%= track.label %>
             </a>
         </li>

package/assets/bottom-gear/bottomgear.ejs

@@ -1,8 +1,8 @@
-<button type="button" class="button-gear media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" data-gear-button="-1">
+<button type="button" class="button-gear media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" data-gear-button="-1" id="gear-button">
     <%= icon %>
 </button>
 <div class="gear-wrapper gcore-skin-bg-color">
-    <ul class="gear-options-list">
+    <ul class="gear-options-list" id="gear-options">
         <% for (const item of items) { %>
             <li data-<%= item %>></li>
         <% } %>

package/assets/dvr-controls/dvr_controls.scss

@@ -1,15 +1,11 @@
-$live-color: #ff0101;
-$dvr-color: #fff;
-$vod-color: #005aff;
 $disabled-opacity: 0.3;
 $control-height: 32px;
 $circle-radius: 3.5px;
 $bottom-panel: 40px;
 
-.dvr-controls[data-dvr-controls] {
+.dvr-controls[data-dvr] {
   display: inline-block;
-  float: left;
-  color: $dvr-color;
+  color: var(--player-dvr-color);
   line-height: 32px;
   font-size: 10px;
   font-weight: bold;
@@ -17,7 +13,6 @@ $bottom-panel: 40px;
 
   .live-info {
     cursor: default;
-    font-family: "Roboto", "Open Sans", Arial, sans-serif;
     text-transform: uppercase;
 
     &:before {
@@ -28,14 +23,14 @@ $bottom-panel: 40px;
       height: $circle-radius*2;
       border-radius: $circle-radius;
       margin-right: $circle-radius;
-      background-color: $live-color;
+      background-color: var(--player-live-color);
     }
 
     &.disabled {
       opacity: $disabled-opacity;
 
       &:before {
-        background-color: $dvr-color;
+        background-color: var(--player-dvr-color);
       }
     }
   }
@@ -45,12 +40,11 @@ $bottom-panel: 40px;
     outline: none;
     display: none;
     border: 0;
-    color: $dvr-color;
+    color: var(--player-dvr-color);
     background-color: transparent;
     height: 32px;
     padding: 0;
     opacity: 0.7;
-    font-family: "Roboto", "Open Sans", Arial, sans-serif;
     text-transform: uppercase;
     transition: all 0.1s ease;
 
@@ -62,7 +56,7 @@ $bottom-panel: 40px;
       height: $circle-radius*2;
       border-radius: $circle-radius;
       margin-right: $circle-radius;
-      background-color: $dvr-color;
+      background-color: var(--player-dvr-color);
     }
 
     &:hover {
@@ -110,7 +104,7 @@ $bottom-panel: 40px;
 }
 
 .dvr {
-  .dvr-controls[data-dvr-controls] {
+  .dvr-controls[data-dvr] {
     .live-info {
       display: none;
     }
@@ -119,16 +113,4 @@ $bottom-panel: 40px;
       display: block;
     }
   }
-
-  &.media-control.live[data-media-control] {
-    .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
-      background-color: $vod-color;
-    }
-  }
-}
-
-.media-control.live[data-media-control] {
-  .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
-    background-color: $live-color;
-  }
 }

package/assets/dvr-controls/index.ejs

@@ -1,2 +1,2 @@
-<div class="live-info"><%= live %></div>
-<button type="button" class="live-button" aria-label="<%= backToLive %>"><%= backToLive %></button>
+<div class="live-info" id="media-control-live"><%= i18n.t('live') %></div>
+<button type="button" class="live-button" aria-label="<%= i18n.t('back_to_live') %>" id="media-control-back-to-live"><%= i18n.t('back_to_live') %></button>

package/assets/media-control/container.scss

@@ -16,7 +16,7 @@
     }
   }
 
-  .subtitle-string {
+  .cc-line {
     position: absolute;
     bottom: calc(var(--bottom-panel) + 5px);
     width: 100%;

package/assets/media-control/media-control.ejs

@@ -52,9 +52,6 @@
             <div class="media-clip-text gcore-skin-text-color" data-<%= name %>></div>
         </div>
     <% }; %>
-    <% var renderPlaybackRate = function(name) { %>
-        <div class="media-control-playbackrate" data-<%= name %>></div>
-    <% }; %>
     <% var renderVR = function(name) { %>
         <div class="media-control-vr" data-<%= name %>></div>
     <% }; %>
@@ -84,13 +81,11 @@
                 renderNerd(setting)
             } else if (setting === "multicamera") {
                 renderMultiCamera(setting)
-            } else if (setting === "playbackrate") {
-                renderPlaybackRate(setting)
             } else if (setting === "vr") {
                 renderVR(setting)
             } else if (setting === "clipsText") {
                 renderClipsText(setting)
-            } else {
+            } else if (setting === "fullscreen") {
                 renderButton(setting);
             }
         });

package/assets/media-control/media-control.scss

@@ -6,6 +6,11 @@
 :root {
   --font-size-media-controls: 14px;
   --font-size-media-controls-dropdown: 16px;
+  --player-vod-color: #005aff;
+  --player-dvr-color: #fff;
+  --player-live-color: #ff0101;
+  --player-seekbar-current-color: #ff5700;
+  --player-seekbar-buffer-color: #fff;
 }
 
 .media-control-skin-1[data-media-control-skin-1] {
@@ -86,6 +91,10 @@
       align-items: center;
       gap: 1rem;
       justify-content: flex-end;
+      @media (max-width: 420px) {
+        gap: 0.5rem;
+        overflow: hidden;
+      }
     }
 
     button.media-control-button {
@@ -125,7 +134,6 @@
       }
 
       &[data-fullscreen] {
-        float: right;
         order: 100;
         background-color: transparent;
         border: 0;
@@ -218,7 +226,7 @@
           left: 0;
           width: 0;
           height: 100%;
-          background-color: white;
+          background-color: var(--player-seekbar-buffer-color);
           transition: all 0.1s ease-out;
         }
 
@@ -228,7 +236,7 @@
           left: 0;
           width: 0;
           height: 100%;
-          background-color: #ff5700;
+          background-color: var(--player-seekbar-current-color);
           transition: all 0.1s ease-out;
         }
       }
@@ -332,7 +340,7 @@
             left: 0;
             width: 0;
             height: 100%;
-            background-color: #005aff;
+            background-color: var(--player-vod-color);
             transition: all 0.1s ease-out;
           }
         }
@@ -387,9 +395,8 @@
 
 /* TODO distribute between plugins' styles */
 .media-control-skin-1[data-media-control-skin-1] {
-  .media-control-subtitles {
-
-    button[data-subtitles-button] {
+  .media-control-cc {
+    button[data-cc-button] {
       display: flex;
       justify-content: center;
       padding: 0;

package/assets/media-control/width270.scss

@@ -1,6 +1,6 @@
 .media-control-skin-1[data-media-control-skin-1].w270 {
   .media-control-quality,
-  .media-control-audio-tracks {
+  .media-control-audiotracks {
     display: none;
   }
 

package/assets/media-control/width370.scss

@@ -1,5 +1,5 @@
 .media-control-skin-1[data-media-control-skin-1].w370 {
-  .media-control-subtitles {
+  .media-control-cc {
     width: 28px;
 
     svg {
@@ -27,12 +27,12 @@
   }
 
   .media-control-quality,
-  .media-control-audio-tracks {
+  .media-control-audiotracks {
     display: block;
   }
 
   .level-selector[data-level-selector],
-  .media-control-audio-tracks[data-track-selector] {
+  .media-control-audiotracks[data-audiotracks] {
     margin-top: 3px;
     margin-right: 10px;
 
@@ -52,7 +52,7 @@
     }
 
     button[data-level-selector-button],
-    button[data-track-selector-button] {
+    button[data-audiotracks-button] {
 
       .quality-text,
       .audio-text {
@@ -99,7 +99,7 @@
       }
     }
 
-    .dvr-controls[data-dvr-controls] {
+    .dvr-controls[data-dvr] {
       height: 32px;
 
       .live-button {

package/assets/playback-rate/button.ejs

@@ -1,6 +1,6 @@
-<button class='gplayer-lite-btn gcore-skin-text-color gear-option'>
+<button class='gplayer-lite-btn gcore-skin-text-color gear-option' id="playback-rate-button">
     <span class="gear-option_speed-icon"><%= speedIcon %></span>
-    <span>Playback speed</span>
+    <span class="gear-option_label"><%= i18n.t('playback_rate') %></span>
     <span class="gear-option_arrow-right-icon"><%= arrowRightIcon %></span>
     <span class='gear-option_value'><%= title %></span>
 </button>

package/assets/playback-rate/list.ejs

@@ -1,13 +1,13 @@
 <button class="gplayer-lite-btn go-back gcore-skin-text-color">
     <span class="arrow-left-icon"><%= arrowLeftIcon %></span>
-    Playback speed
+    <%= i18n.t('playback_rate') %>
 </button>
 <ul class="gear-sub-menu">
-    <% for (var i = playbackRates.length - 1; i >= 0; i--) { %>
+    <% for (const item of playbackRates) { %>
         <li>
-            <a href="#" class='gear-sub-menu_btn gcore-skin-text-color' data-rate="<%= playbackRates[i].value %>">
+            <a href="#" class='gear-sub-menu_btn gcore-skin-text-color' data-rate="<%= item.value %>">
                 <span class="check-icon"><%= checkIcon %></span>
-                <%= playbackRates[i].label %>
+                <%= item.label %>
             </a>
         </li>
     <% } %>

package/assets/style/theme.scss

@@ -29,7 +29,7 @@
   }
 }
 
-.gcore-skin-main-color { background-color: var(--theme-foreground-color) !important; }
+.gcore-skin-main-color { background-color: var(--theme-foreground-color) }
 .gcore-skin-border-color { border-color: var(--theme-foreground-color) !important; }
 
 .gcore-skin-button-color:hover { color: var(--theme-hover-color) !important; }

package/assets/subtitles/combobox.ejs

@@ -1,14 +1,14 @@
-<button data-subtitles-button class='media-control-button media-control-icon gcore-skin-button-color'>
-    <span class='subtitle-text'></span>
+<button data-cc-button class='media-control-button media-control-icon gcore-skin-button-color' id="cc-button">
+    <span class='cc-text'></span>
 </button>
 
-<ul class='gcore-skin-bg-color'>
+<ul class='gcore-skin-bg-color' id="cc-select">
     <% for (const t of tracks) { %>
         <li>
-            <a href="#" class='gcore-skin-text-color' data-subtitles-select="<%= t.id %>">
+            <a href="#" class='gcore-skin-text-color' data-cc-select="<%= t.id %>">
                 <%= t.name %>
             </a>
         </li>
     <% } %>
-    <li><a href="#" class='gcore-skin-text-color' data-subtitles-select="-1">Off</a></li>
+    <li><a href="#" class='gcore-skin-text-color' data-cc-select="-1">Off</a></li>
 </ul>

package/assets/subtitles/string.ejs

@@ -1,3 +1,3 @@
-<div class="subtitle-string">
+<div class="cc-line" id="cc-line">
   <p></p>
 </div>

package/assets/subtitles/style.scss

@@ -4,7 +4,7 @@
   outline: none !important;
 }
 
-.media-control-subtitles[data-subtitles] {
+.media-control-cc[data-cc] {
   position: relative;
   order: 85;
 
@@ -15,7 +15,7 @@
     border: none;
     cursor: pointer;
 
-    .subtitle-text {
+    .cc-text {
       svg {
         fill: white;
       }

package/dist/core.js

@@ -12850,6 +12850,7 @@ class DashPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_DVR, status);
         this.trigger(Events$1.PLAYBACK_STATS_ADD, { dvr: status });
     }
+    // TODO move to the base class
     _updateSettings() {
         if (this._playbackType === Playback.VOD) {
             // @ts-expect-error
@@ -43213,7 +43214,7 @@ class Player {
     }
 }
 
-var version$1 = "2.21.3";
+var version$1 = "2.21.6";
 
 var packages = {
 	"node_modules/@clappr/core": {