@gcorevideo/player 2.21.1 → 2.21.3

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>
     <% }; %>
@@ -87,8 +84,6 @@
                 renderNerd(setting)
             } else if (setting === "multicamera") {
                 renderMultiCamera(setting)
-            } else if (setting === "subtitles") {
-                renderSubtitles(setting)
             } else if (setting === "playbackrate") {
                 renderPlaybackRate(setting)
             } else if (setting === "vr") {

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

@@ -99,6 +99,7 @@
 
       svg {
         height: 20px;
+
         path {
           fill: white;
         }
@@ -142,6 +143,7 @@
     }
 
     .media-control-indicator {
+
       &[data-position],
       &[data-duration] {
         display: flex;
@@ -237,7 +239,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 +387,58 @@
 
 /* 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;
+    button[data-subtitles-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 +467,4 @@
       display: none !important;
     }
   }
-}
-
+}

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;
+    width: 28px;
 
-      svg {
-        height: 17px;
-      }
+    svg {
+      height: 17px;
     }
   }
 

package/assets/subtitles/combobox.ejs

@@ -3,14 +3,12 @@
 </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>
-        <% } %>
+    <% for (const t of tracks) { %>
+        <li>
+            <a href="#" class='gcore-skin-text-color' data-subtitles-select="<%= t.id %>">
+                <%= t.name %>
+            </a>
+        </li>
     <% } %>
+    <li><a href="#" class='gcore-skin-text-color' data-subtitles-select="-1">Off</a></li>
 </ul>

package/assets/subtitles/style.scss

@@ -1,19 +1,18 @@
-*, :focus, :visited {
+*,
+:focus,
+:visited {
   outline: none !important;
 }
 
-.subtitles[data-subtitles] {
-  float: right;
+.media-control-subtitles[data-subtitles] {
   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 {
@@ -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
@@ -43210,7 +43213,7 @@ class Player {
     }
 }
 
-var version$1 = "2.21.1";
+var version$1 = "2.21.3";
 
 var packages = {
 	"node_modules/@clappr/core": {