@gcorevideo/player 2.25.6 → 2.25.8

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-sub-menu.scss

@@ -33,25 +33,20 @@
       font-size: 12px;
       text-align: left;
 
-      &[data-title] {
-        background-color: #c3c2c2;
-        padding: 5px;
-      }
-
       a {
         display: block;
         text-decoration: none;
-        height: 32px;
+        height: 30px;
         padding: 5px 10px;
         line-height: 22px;
-        color: #fffffe;
+        color: var(--gplayer-mc-text-dim-color);
 
         &:hover {
-          color: white;
+          color: var(--gplayer-mc-text-color);
           background-color: rgb(0 0 0 / 40%);
 
           a {
-            color: white;
+            color: var(--gplayer-mc-text-color);
             text-decoration: none;
           }
         }

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/container.scss

@@ -16,19 +16,6 @@
     }
   }
 
-  .cc-line {
-    position: absolute;
-    bottom: calc(var(--bottom-panel) + 5px);
-    width: 100%;
-
-    p {
-      width: auto;
-      background-color: rgb(0 0 0 / 40%);
-      color: white;
-      display: inline-block;
-    }
-  }
-
   .player-poster .circle-poster {
     top: 50%;
     margin-top: -60px;

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

@@ -6,13 +6,16 @@
 :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-text-dim-color: #fffffe;
+  --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 +89,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 +129,6 @@
 
     @media (max-width: 420px) {
       gap: 0.5rem;
-      overflow: hidden;
     }
   }
 
@@ -179,7 +186,6 @@
   }
 
   .media-control-indicator {
-
     &[data-position],
     &[data-duration] {
       display: flex;
@@ -393,10 +399,6 @@
       }
     }
   }
-}
-
-/* TODO distribute between plugins' styles */
-.media-control-skin-1 {
   .seek-time {
     height: 26px;
     line-height: 26px;
@@ -415,6 +417,106 @@
       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;
+    }
+
+    svg {
+      fill: var(--gplayer-mc-text-color);
+    }
+
+    &__arrow {
+      width: 9px;
+      height: 6px;
+    }
+
+    &__wrap {
+      position: relative; // for menu positioning
+    }
+
+    &__popup {
+      // max-width: 114px;
+      max-width: 200px;
+      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-x: hidden;
+      overflow-y: auto;
+
+      padding: 5px 0;
+
+      li {
+        font-size: var(--gplayer-mc-font-size-dropdown);
+        text-align: right;
+        height: 30px;
+    
+        a {
+          display: block;
+          text-decoration: none;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+    
+          // height: 30px;
+          padding: 5px 10px;
+          line-height: 20px;
+          color: #fffffe; // TODO color var
+    
+          &:hover {
+            text-decoration: none;
+            background-color: rgb(0 0 0 / 40%);
+            color: var(--gplayer-mc-text-color);
+          }
+        }
+    
+        &.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%;
@@ -48,4 +39,7 @@
       }
     }
   }
+  .media-control-dd__popup {
+    max-width: 114px;
+  }
 }

package/assets/media-control/width370.scss

@@ -1,4 +1,5 @@
 .media-control-skin-1.w370 {
+  // TODO -> cc stylesheet
   .media-control-cc {
     width: 28px;
 
@@ -26,48 +27,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,8 +143,11 @@
     }
 
     .media-control-button,
-    .gplayer-mc-panel-item {
+    .media-control-item {
       height: 32px;
     }
   }
+  .media-control-dd__popup {
+    max-width: 150px;
+  }
 }

package/assets/multi-camera/style.scss

@@ -136,11 +136,6 @@
       }
     }
 
-    &[data-title] {
-      background-color: #c3c2c2;
-      padding: 5px;
-    }
-
     a {
       color: #444;
       padding: 2px 10px;

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/assets/subtitles/combobox.ejs

@@ -1,14 +1,35 @@
-<button data-cc-button class='media-control-button media-control-icon gcore-skin-button-color' id="cc-button">
-    <span class='cc-text'></span>
+<button
+    class='media-control-button media-control-icon gcore-skin-button-color media-control-dd'
+    id="gplayer-cc-button"
+    aria-haspopup="menu"
+    aria-expanded="false"
+    aria-controls="gplayer-cc-menu"
+>
 </button>
 
-<ul class='gcore-skin-bg-color' id="cc-select">
+<ul class='gcore-skin-bg-color media-control-dd__popup' id="gplayer-cc-menu" role="menu">
     <% for (const t of tracks) { %>
         <li>
-            <a href="#" class='gcore-skin-text-color' data-cc-select="<%= t.id %>">
+            <a
+                href="#"
+                class="gcore-skin-text-color"
+                data-item="<%= t.id %>"
+                role="menuitemradio"
+                aria-checked="<%= t.id === current %>"
+            >
                 <%= t.name %>
             </a>
         </li>
     <% } %>
-    <li><a href="#" class='gcore-skin-text-color' data-cc-select="-1"><%= i18n.t('off') %></a></li>
-</ul>
+    <li class="current">
+        <a
+            href="#"
+            class='gcore-skin-text-color gcore-skin-active'
+            data-item="-1"
+            role="menuitemradio"
+            aria-checked="<%= current === -1 %>"
+        >
+            <%= i18n.t('off') %>
+        </a>
+    </li>
+</ul>

package/assets/subtitles/string.ejs

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

package/assets/subtitles/style.scss

@@ -13,17 +13,8 @@
     }
 
     ul {
-      // TODO extract common styles
-      width: auto;
-      border-radius: 4px;
-      bottom: 52px;
-      margin-left: -28px;
-
       li {
-        font-size: 16px;
         text-align: center;
-        white-space: nowrap;
-        height: 30px;
 
         a {
           height: 30px;
@@ -59,65 +50,6 @@
   .media-control-cc {
     position: relative;
     order: 85;
-
-    button {
-      background-color: transparent;
-      color: #fff;
-      -webkit-font-smoothing: antialiased;
-      border: none;
-      cursor: pointer;
-
-      .cc-text {
-        svg {
-          fill: white;
-        }
-      }
-
-      &:hover {
-        color: #c9c9c9;
-      }
-
-      &.changing {
-        animation: pulse 0.5s infinite alternate;
-      }
-    }
-
-    ul {
-      width: 80px;
-      overflow: hidden;
-      list-style-type: none;
-      position: absolute;
-      bottom: 25px;
-      border: none;
-      background-color: #e6e6e6;
-      padding: 8px 0;
-      box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
-    }
-
-    li {
-      a {
-        color: #444;
-        padding: 2px 10px;
-        display: block;
-        text-decoration: none;
-
-        &:hover {
-          background-color: #555;
-          color: white;
-
-          a {
-            color: white;
-            text-decoration: none;
-          }
-        }
-      }
-
-      &.current a {
-        color: #f00;
-        background-color: #555;
-      }
-
-    }
   }
 }
 
@@ -128,4 +60,19 @@
 // .ios-fullscreen::cue {
 //   visibility: visible !important;
 //   font-size: 1em !important;
-// }
+// }
+
+.container {
+  .gplayer-cc-line {
+    position: absolute;
+    bottom: calc(var(--bottom-panel) + 5px);
+    width: 100%;
+
+    p {
+      width: auto;
+      background-color: rgb(0 0 0 / 40%);
+      color: white;
+      display: inline-block;
+    }
+  }
+}

package/dist/core.js

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