@gcorevideo/player 2.21.1 → 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

@@ -42,9 +42,6 @@
     <% var renderNerd = function(name) { %>
         <div class="media-control-nerd" data-<%= name %>></div>
     <% }; %>
-    <% var renderSubtitles = function(name) { %>
-        <div class="media-control-subtitles" data-<%= name %>></div>
-    <% }; %>
     <% var renderMultiCamera = function(name) { %>
         <div class="media-control-multicamera" data-<%= name %>></div>
     <% }; %>
@@ -55,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>
     <% }; %>
@@ -87,15 +81,11 @@
                 renderNerd(setting)
             } else if (setting === "multicamera") {
                 renderMultiCamera(setting)
-            } else if (setting === "subtitles") {
-                renderSubtitles(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 {
@@ -99,6 +103,7 @@
 
       svg {
         height: 20px;
+
         path {
           fill: white;
         }
@@ -124,7 +129,6 @@
       }
 
       &[data-fullscreen] {
-        float: right;
         order: 100;
         background-color: transparent;
         border: 0;
@@ -142,6 +146,7 @@
     }
 
     .media-control-indicator {
+
       &[data-position],
       &[data-duration] {
         display: flex;
@@ -237,7 +242,7 @@
       }
     }
 
-    .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {
+    .bar-container[data-seekbar].seek-disabled+.bar-scrubber[data-seekbar] {
       cursor: default;
       display: none;
     }
@@ -385,69 +390,57 @@
 
 /* TODO distribute between plugins' styles */
 .media-control-skin-1[data-media-control-skin-1] {
-  .media-control-quality,
-  .media-control-audio-tracks {
-    display: block;
-  }
-
-  .media-control-subtitles {
-    .subtitles[data-subtitles] {
-      width: 40px;
-      margin-top: 0;
-
-      button[data-subtitles-button] {
-        display: flex;
-        justify-content: center;
-        padding: 0;
-        align-items: center;
+  .media-control-cc {
+    button[data-cc-button] {
+      display: flex;
+      justify-content: center;
+      padding: 0;
+      align-items: center;
 
-        &:hover {
-          color: white;
-        }
+      &:hover {
+        color: white;
       }
+    }
 
-      ul {
-        background-color: rgb(74 74 74 / 60%);
-        border: none;
-        width: auto;
-        transform: rotate(180deg);
-        border-radius: 4px;
-        bottom: 52px;
-        margin-left: -28px;
-
-        li {
-          transform: rotate(-180deg);
-          font-size: 16px;
-          text-align: center;
-          white-space: nowrap;
-          height: 30px;
-
-          a {
-            height: 30px;
-            padding: 5px 10px;
-            color: #fffffe;
+    ul { // TODO extract common styles
+      background-color: rgb(74 74 74 / 60%);
+      border: none;
+      width: auto;
+      border-radius: 4px;
+      bottom: 52px;
+      margin-left: -28px;
+
+      li {
+        font-size: 16px;
+        text-align: center;
+        white-space: nowrap;
+        height: 30px;
 
-            &:hover {
-              background-color: rgb(0 0 0 / 40%);
-            }
-          }
+        a {
+          height: 30px;
+          padding: 5px 10px;
+          color: #fffffe;
 
-          &.current a {
+          &:hover {
             background-color: rgb(0 0 0 / 40%);
           }
+        }
 
-          &:first-child {
-            a {
-              border-bottom-left-radius: 4px;
-              border-bottom-right-radius: 4px;
-            }
+        &.current a {
+          background-color: rgb(0 0 0 / 40%);
+        }
+
+        &:first-child {
+          a {
+            border-bottom-left-radius: 4px;
+            border-bottom-right-radius: 4px;
           }
+        }
 
-          &:last-child {
-            a {
-              border-top-left-radius: 4px;
-              border-top-right-radius: 4px;
-            }
+        &:last-child {
+          a {
+            border-top-left-radius: 4px;
+            border-top-right-radius: 4px;
           }
         }
       }
@@ -476,5 +469,4 @@
       display: none !important;
     }
   }
-}
-
+}

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,11 +1,9 @@
 .media-control-skin-1[data-media-control-skin-1].w370 {
-  .media-control-subtitles {
-    .subtitles[data-subtitles] {
-      width: 28px;
+  .media-control-cc {
+    width: 28px;
 
-      svg {
-        height: 17px;
-      }
+    svg {
+      height: 17px;
     }
   }
 
@@ -29,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;
 
@@ -54,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,16 +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'>
-    <li><a href="#" class='gcore-skin-text-color' data-subtitles-select="off">off</a></li>
-    <% for (const track of tracks) { %>
-        <% if (track.kind === 'subtitles' || track.kind === 'captions') { %>
-            <li>
-                <a href="#" class='gcore-skin-text-color' data-subtitles-select="<%= track.language %>">
-                    <%= track.label %>
-                </a>
-            </li>
-        <% } %>
+<ul class='gcore-skin-bg-color' id="cc-select">
+    <% for (const t of tracks) { %>
+        <li>
+            <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-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

@@ -1,22 +1,21 @@
-*, :focus, :visited {
+*,
+:focus,
+:visited {
   outline: none !important;
 }
 
-.subtitles[data-subtitles] {
-  float: right;
+.media-control-cc[data-cc] {
   position: relative;
-  width: 50px;
+  order: 85;
 
   button {
     background-color: transparent;
     color: #fff;
-    font-family: Roboto, "Open Sans", Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     border: none;
-    font-size: 14px;
     cursor: pointer;
 
-    .subtitle-text {
+    .cc-text {
       svg {
         fill: white;
       }
@@ -31,7 +30,7 @@
     }
   }
 
-  & > ul {
+  ul {
     width: 80px;
     list-style-type: none;
     position: absolute;
@@ -39,16 +38,10 @@
     border: 1px solid black;
     display: none;
     background-color: #e6e6e6;
+    padding: 8px 0;
   }
 
   li {
-    font-size: 10px;
-
-    &[data-title] {
-      background-color: #c3c2c2;
-      padding: 5px;
-    }
-
     a {
       color: #444;
       padding: 2px 10px;
@@ -96,4 +89,4 @@
 .ios-fullscreen::cue {
   visibility: visible !important;
   font-size: 1em !important;
-}
+}

package/dist/core.js

@@ -12542,6 +12542,9 @@ var PlaybackErrorCode;
  * @internal
  */
 class BasePlayback extends HTML5Video$1 {
+    get isHTML5Video() {
+        return true;
+    }
     createError(errorData, options) {
         const i18n = this.i18n ||
             // @ts-ignore
@@ -12847,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
@@ -43210,7 +43214,7 @@ class Player {
     }
 }
 
-var version$1 = "2.21.1";
+var version$1 = "2.21.4";
 
 var packages = {
 	"node_modules/@clappr/core": {