@gcorevideo/player 2.25.7 → 2.25.8

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

@@ -13,6 +13,7 @@
   --player-seekbar-current-color: #ff5700;
   --player-seekbar-buffer-color: #fff;
   --gplayer-mc-text-color: #fff;
+  --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%);
 }
@@ -185,7 +186,6 @@
   }
 
   .media-control-indicator {
-
     &[data-position],
     &[data-duration] {
       display: flex;
@@ -444,10 +444,13 @@
       animation: pulse 0.5s infinite alternate;
     }
 
+    svg {
+      fill: var(--gplayer-mc-text-color);
+    }
+
     &__arrow {
       width: 9px;
       height: 6px;
-      // margin-left: 5px;
     }
 
     &__wrap {
@@ -455,7 +458,8 @@
     }
 
     &__popup {
-      max-width: 114px;
+      // max-width: 114px;
+      max-width: 200px;
       list-style-type: none;
       position: absolute;
       box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
@@ -464,18 +468,16 @@
       border-radius: 4px;
       bottom: 40px;
       right: -2px;
-      overflow: hidden;
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      padding: 5px 0;
 
       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;
@@ -483,15 +485,15 @@
           overflow: hidden;
           white-space: nowrap;
     
-          height: 30px;
+          // height: 30px;
           padding: 5px 10px;
           line-height: 20px;
-          color: #fffffe;
+          color: #fffffe; // TODO color var
     
           &:hover {
             text-decoration: none;
             background-color: rgb(0 0 0 / 40%);
-            color: white;
+            color: var(--gplayer-mc-text-color);
           }
         }
     

package/assets/media-control/width270.scss

@@ -39,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;
 
@@ -146,4 +147,7 @@
       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/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.7";
+var version$1 = "2.25.8";
 
 var packages = {
 	"node_modules/@clappr/core": {