@gcorevideo/player 2.25.6 → 2.25.7

package/assets/audio-tracks/template.ejs

@@ -1,10 +1,11 @@
-<button data-audiotracks-button class='gcore-skin-button-color' id="audiotracks-button" aria-haspopup="menu" aria-expanded="false">
-    <span class='audio-text'><%= title %></span> <span class="audio-arrow"><%= icon %></span>
+<button class='gcore-skin-button-color media-control-dd' id="gplayer-audiotracks-button" aria-haspopup="menu" aria-expanded="false">
+    <span class="media-control-dd__text" id="gplayer-audiotracks-button-text"><%= title %></span>
+    <span class="media-control-dd__arrow"><%= icon %></span>
 </button>
-<ul class='gcore-skin-bg-color menu hidden' id="audiotracks-select" role="menu">
+<ul class="gcore-skin-bg-color menu media-control-dd__popup" id="gplayer-audiotracks-menu" role="menu">
     <% for (const track of tracks) { %>
         <li>
-            <a href="#" class='gcore-skin-text-color' data-audiotracks-select="<%= track.id %>" role="menuitemradio" aria-checked="<%= track.id === current %>">
+            <a href="#" class="gcore-skin-text-color" data-item="<%= track.id %>" role="menuitemradio" aria-checked="<%= track.id === current %>">
                 <%= track.label %>
             </a>
         </li>

package/assets/bottom-gear/gear.scss

@@ -1,7 +1,6 @@
 .media-control-skin-1 {
-  .gplayer-mc-panel-item.media-control-gear {
+  .media-control-item.media-control-gear {
     order: 99;
-    height: 20px;
 
     .gear-wrapper {
       position: absolute;

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

@@ -6,13 +6,15 @@
 :root {
   --font-size-media-controls: 14px;
   --font-size-media-controls-dropdown: 16px;
+  --gplayer-mc-font-size-dropdown: 16px;
   --player-vod-color: #005aff;
   --player-dvr-color: #fff;
   --player-live-color: #ff0101;
   --player-seekbar-current-color: #ff5700;
   --player-seekbar-buffer-color: #fff;
   --gplayer-mc-text-color: #fff;
-  --gplayer-mc-popup-border-color: rgba(255, 255, 255, 0.1);
+  --gplayer-mc-popup-border-color: rgb(255 255 255 / 10%);
+  --gplayer-mc-popup-bg: rgb(74 74 74 / 60%);
 }
 
 .media-control-skin-1 {
@@ -86,10 +88,15 @@
 
   .media-control-button,
   .media-control-indicator,
-  .gplayer-mc-panel-item {
+  .media-control-item {
     order: 50;
   }
 
+  .media-control-item {
+    display: flex;
+    align-items: center;
+  }
+
   [data-playpause],
   [data-playstop] {
     order: 1;
@@ -121,7 +128,6 @@
 
     @media (max-width: 420px) {
       gap: 0.5rem;
-      overflow: hidden;
     }
   }
 
@@ -393,10 +399,6 @@
       }
     }
   }
-}
-
-/* TODO distribute between plugins' styles */
-.media-control-skin-1 {
   .seek-time {
     height: 26px;
     line-height: 26px;
@@ -415,6 +417,104 @@
       padding-right: 8px;
     }
   }
+
+  .media-control-dd {
+    display: flex;
+    height: 32px;
+    line-height: 32px;
+    align-items: baseline;
+    gap: 4px;
+    vertical-align: baseline;
+    padding: 0;
+
+    background-color: transparent;
+    color: var(--gplayer-mc-text-color);
+    -webkit-font-smoothing: antialiased;
+    border: none;
+    cursor: pointer;
+
+    &__text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 100px;
+    }
+
+    &.changing {
+      animation: pulse 0.5s infinite alternate;
+    }
+
+    &__arrow {
+      width: 9px;
+      height: 6px;
+      // margin-left: 5px;
+    }
+
+    &__wrap {
+      position: relative; // for menu positioning
+    }
+
+    &__popup {
+      max-width: 114px;
+      list-style-type: none;
+      position: absolute;
+      box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
+      border: none;
+      min-width: 60px;
+      border-radius: 4px;
+      bottom: 40px;
+      right: -2px;
+      overflow: hidden;
+
+      li {
+        font-size: var(--gplayer-mc-font-size-dropdown);
+        text-align: right;
+        height: 30px;
+    
+        &[data-title] {
+          background-color: #c3c2c2;
+          padding: 5px;
+        }
+    
+        a {
+          display: block;
+          text-decoration: none;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+    
+          height: 30px;
+          padding: 5px 10px;
+          line-height: 20px;
+          color: #fffffe;
+    
+          &:hover {
+            text-decoration: none;
+            background-color: rgb(0 0 0 / 40%);
+            color: white;
+          }
+        }
+    
+        &.current a {
+          color: #f00;
+        }
+    
+        &: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;
+          }
+        }
+      }
+    }
+  }
 }
 
 @keyframes pulse {

package/assets/media-control/width270.scss

@@ -1,10 +1,4 @@
 .media-control-skin-1.w270 {
-
-  .media-control-quality,
-  .media-control-audiotracks {
-    display: none;
-  }
-
   .media-control-layer[data-controls] {
     .drawer-container[data-volume] {
       .bar-container[data-volume] {
@@ -13,17 +7,14 @@
         display: block;
         position: absolute;
 
-        /* bottom: 12px; */
         margin: 0;
         top: -40px;
         padding: 0;
 
-        /* right: 20px; */
         margin-left: -32px;
         margin-top: -3px;
         width: 80px;
 
-        /* padding-left: 12px; */
         .bar-background-mask {
           position: absolute;
           width: 100%;

package/assets/media-control/width370.scss

@@ -26,48 +26,10 @@
     }
   }
 
-  .media-control-quality,
-  .media-control-audiotracks {
+  .media-control-quality {
     display: block;
   }
 
-  // .level-selector[data-level-selector],
-  .media-control-audiotracks[data-audiotracks] {
-    margin-top: 3px;
-    margin-right: 10px;
-
-    ul {
-      bottom: 30px;
-      width: 50px;
-
-      li {
-        height: 23px;
-        font-size: 14px;
-
-        a {
-          height: 23px;
-          padding: 2px 5px;
-        }
-      }
-    }
-
-    button[data-audiotracks-button] {
-
-      .quality-text,
-      .audio-text {
-        font-size: 13px;
-      }
-
-      span.quality-arrow,
-      span.audio-arrow {
-        width: 7px;
-        height: 5px;
-        margin-left: 4px;
-        margin-top: 11px;
-      }
-    }
-  }
-
   .media-control-multicamera {
     .multicamera {
       margin-top: 0;
@@ -180,7 +142,7 @@
     }
 
     .media-control-button,
-    .gplayer-mc-panel-item {
+    .media-control-item {
       height: 32px;
     }
   }

package/assets/picture-in-picture/style.scss

@@ -1,7 +1,6 @@
 .media-control-skin-1 {
-  .gplayer-mc-panel-item.media-control-pip {
+  .media-control-item.media-control-pip {
     order: 95;
-    display: flex;
 
     button {
       height: 20px;

package/dist/core.js

@@ -43228,7 +43228,7 @@ class Player {
     }
 }
 
-var version$1 = "2.25.6";
+var version$1 = "2.25.7";
 
 var packages = {
 	"node_modules/@clappr/core": {