@gcorevideo/player 2.22.0 → 2.22.2

package/assets/bottom-gear/bottomgear copy.ejs

@@ -0,0 +1,10 @@
+<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" id="gear-options">
+        <% for (const item of items) { %>
+            <li data-<%= item %>></li>
+        <% } %>
+    </ul>
+</div>

package/assets/bottom-gear/bottomgear.ejs

@@ -1,10 +1,6 @@
-<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">
+<button type="button" class="media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" id="gear-button">
     <%= icon %>
 </button>
-<div class="gear-wrapper gcore-skin-bg-color">
-    <ul class="gear-options-list" id="gear-options">
-        <% for (const item of items) { %>
-            <li data-<%= item %>></li>
-        <% } %>
-    </ul>
-</div>
+<div class="gear-wrapper gcore-skin-bg-color" id="gear-options-wrapper" style="display: none;">
+    <ul class="gear-options-list" id="gear-options"></ul>
+</div>

package/assets/bottom-gear/gear-sub-menu.scss

@@ -25,7 +25,6 @@
   ul.gear-sub-menu {
     width: 100%;
     list-style-type: none;
-    background-color: transparent;
     min-width: 60px;
     border-top: 2px solid rgb(36 36 36);
 

package/assets/bottom-gear/gear.scss

@@ -7,7 +7,6 @@
       position: absolute;
       right: 16px;
       bottom: 52px;
-      display: none;
 
       width: 250px;
       min-height: 48px;

package/assets/clappr-nerd-stats/button.ejs

@@ -1,4 +1,4 @@
-<button class='nerd-button gplayer-lite-btn gcore-skin-text-color gear-option'>
-    <span class="stats-icon"></span>
-    <span>Statistics</span>
+<button class='nerd-button gplayer-lite-btn gcore-skin-text-color gear-option' id="nerd-stats-button">
+    <span class="stats-icon"><%= icon %></span>
+    <span><%= i18n.t('statistics') %></span>
 </button>

package/assets/level-selector/button.ejs

@@ -1,8 +1,6 @@
 <button class='gplayer-lite-btn gcore-skin-text-color gear-option'>
-    <% if (isHd) { %>
-        <span class="gear-option_hd-icon"><%= hdIcon %></span>
-    <% } %>
-    <span>Quality</span>
+    <span class="gear-option_hd-icon<%= isHd ? '' : ' hidden' %>"><%= hdIcon %></span>
+    <span><%= i18n.t('quality') %></span>
     <span class="gear-option_arrow-right-icon"><%= arrowRightIcon %></span>
     <span class='gear-option_value'><%= currentText %></span>
 </button>

package/assets/level-selector/list.ejs

@@ -1,21 +1,25 @@
-<button class="gplayer-lite-btn go-back gcore-skin-text-color">
+<button class="gplayer-lite-btn go-back gcore-skin-text-color" id="level-selector-back-button">
     <span class="arrow-left-icon"><%= arrowLeftIcon %></span>
-    Quality
+    <%= i18n.t('quality') %>
 </button>
-<ul class="gear-sub-menu">
+<ul class="gear-sub-menu" id="level-selector-menu">
     <% if (!removeAuto) { %>
         <li>
             <a href="#" class='gear-sub-menu_btn gcore-skin-text-color' data-id="-1" id="level_selector_auto">
                 <span class="check-icon"><%= checkIcon %></span>
-            Auto
-        </a>
-    </li>
+                <%= i18n.t('auto') %>
+            </a>
+        </li>
     <% } %>
-    <% for (const level of levels.slice().reverse()) { %>
-        <li <% if (maxLevel >= 0 && level.level > maxLevel) { %>class="level-disabled"<% } %>>
-            <a href="#" class='gear-sub-menu_btn gcore-skin-text-color' data-id="<%= level.level %>" id="level_selector_<%= level.height %>">
+    <% for (const item of levels.slice().reverse()) { %>
+        <li class="<%= maxLevel >= 0 && item.level > maxLevel ? 'disabled ' : ''%><%=item.level === current ? 'current ' : ''%>">
+            <a href="#"
+                class="gear-sub-menu_btn gcore-skin-text-color<%= item.level === current ? ' gcore-skin-active' : '' %>"
+                data-id="<%= item.level %>"
+                id="level_selector_<%= item.width > item.height ? item.height : item.width %>"
+            >
                 <span class="check-icon"><%= checkIcon %></span>
-                <%= labels[level.level] %>
+                <%= labels[item.level] %>
             </a>
         </li>
     <% } %>

package/assets/level-selector/style.scss

@@ -1,4 +1,9 @@
-.level-disabled {
-    opacity: 0.5;
-    pointer-events: none;
-}
+.gear-option_hd-icon {
+    &.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+    &.hidden {
+        display: none;
+    }
+}

package/assets/media-control/container.scss

@@ -51,7 +51,7 @@
     }
   }
 
-  .spinner-three-bounce[data-spinner] > div {
+  .spinner-three-bounce > div {
     background-color: #ff5700;
   }
 }

package/assets/playback-rate/list.ejs

@@ -1,14 +1,14 @@
-<button class="gplayer-lite-btn go-back gcore-skin-text-color">
+<button class="gplayer-lite-btn go-back gcore-skin-text-color" id="playback-rate-back-button">
     <span class="arrow-left-icon"><%= arrowLeftIcon %></span>
     <%= i18n.t('playback_rate') %>
 </button>
-<ul class="gear-sub-menu">
+<ul class="gear-sub-menu" id="playback-rate-menu">
     <% for (const item of playbackRates) { %>
-        <li>
-            <a href="#" class='gear-sub-menu_btn gcore-skin-text-color' data-rate="<%= item.value %>">
+        <li<%= item.value === current ? ' class="current"' : '' %>>
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color<%= item.value === current ? ' gcore-skin-active' : '' %>" data-rate="<%= item.value %>">
                 <span class="check-icon"><%= checkIcon %></span>
                 <%= item.label %>
             </a>
         </li>
     <% } %>
-</ul>
+</ul>

package/assets/spinner-three-bounce/spinner.scss

@@ -1,4 +1,4 @@
-.spinner-three-bounce[data-spinner] {
+.spinner-three-bounce {
   position: absolute;
   width: 70px;
   text-align: center;

package/dist/core.js

@@ -13051,7 +13051,6 @@ class DashPlayback extends BasePlayback {
     get audioTracks() {
         assert.ok(this._dash, 'DASH.js MediaPlayer is not initialized');
         const tracks = this._dash.getTracksFor('audio');
-        trace(`${T$3} get audioTracks`, { tracks });
         return tracks.map(toClapprTrack$1);
     }
     // @ts-expect-error
@@ -43214,7 +43213,7 @@ class Player {
     }
 }
 
-var version$1 = "2.22.0";
+var version$1 = "2.22.2";
 
 var packages = {
 	"node_modules/@clappr/core": {