@gcorevideo/player 2.21.3 → 2.21.4

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/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

@@ -86,6 +86,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 +129,6 @@
       }
 
       &[data-fullscreen] {
-        float: right;
         order: 100;
         background-color: transparent;
         border: 0;
@@ -387,9 +390,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 {

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/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.4";
 
 var packages = {
 	"node_modules/@clappr/core": {