@gcorevideo/player 2.22.13 → 2.22.15

package/assets/bottom-gear/gear.scss

@@ -16,11 +16,6 @@
       .gear-options-list {
         padding: 8px 0;
 
-        svg {
-          float: left;
-          margin-right: 10px;
-        }
-
         .gear-option {
           margin: 0;
           text-align: left;
@@ -28,19 +23,31 @@
           padding: 5px 14px;
           width: 250px;
           font-size: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 8px;
+
+          &_icon {
+            flex: 24px 0 0;
+            height: 24px;
+            &.hidden {
+              visibility: hidden;
+              display: inline-block;
+            }
+          }
 
-          .gear-option_arrow-right-icon {
-            float: right;
-            margin-right: -14px;
+          &_label {
+            flex: 0 1 100%;
           }
 
-          .gear-option_value {
-            float: right;
-            margin-right: 8px;
+          &_arrow-right-icon {
+            flex: 0 0 14px;
+            height: 24px;
           }
 
-          svg {
-            height: 20px;
+          &_value {
+            flex: 1 0 auto;
           }
         }
       }

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

@@ -1,4 +1,4 @@
 <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>
+    <span class="gear-option_icon"><%= icon %></span>
+    <span class="gear-option_label"><%= i18n.t('statistics') %></span>
 </button>

package/assets/clappr-nerd-stats/clappr-nerd-stats.scss

@@ -223,49 +223,6 @@
   padding: 0;
 }
 
-.settings-options-list {
-  position: absolute;
-  right: 16px;
-  bottom: 52px;
-  background: var(--primary-background-color);
-  width: 250px;
-  height: 48px;
-  z-index: 9999;
-  border-radius: 4px;
-
-  svg {
-    float: left;
-    margin-right: 10px;
-  }
-
-  .settings-speedtest-option {
-    color: var(--primary-text-color);
-    margin: 0;
-    text-align: left;
-    height: 24px;
-    line-height: 22px;
-    padding: 14px;
-    width: 250px;
-    font-size: 12px;
-
-    &:hover {
-      color: var(--hover-text-color);
-
-      svg {
-        path {
-          fill: var(--hover-text-color);
-        }
-      }
-    }
-
-    svg {
-      path {
-        fill: var(--primary-text-color);
-      }
-    }
-  }
-}
-
 .speedtest-summary {
   width: 100%;
   border-top: 1px solid var(--secondary-background-color) !important;

package/assets/context-menu/context_menu.ejs

@@ -1,8 +1,16 @@
-<ul class="context-menu-list">
-    <% if(options) { %>
-        <% for (var i = 0; i < options.length; i++) { %>
-        <li class="context-menu-list-item <%= options[i].class %>"
-            data-<%= options[i].name %>><%= options[i].label %></li>
-        <% } %>
+<ul class="context-menu-list" role="menu" id="context-menu-options">
+    <% for (const item of options) { %>
+    <li class="context-menu-list-item <%= item.class %>">
+        <button role="menuitem" data-name="<%= item.name %>">
+            <% if (iconic) { %>
+            <span class="context-menu-list-item_icon"><%= item.icon || '' %></span>
+            <% } %>
+            <% if (item.labelKey) { %>
+                <%= i18n.t(item.labelKey) %>
+            <% } else { %>
+                <%= item.label %>
+            <% } %>
+        </button>
+    </li>
     <% } %>
 </ul>

package/assets/context-menu/context_menu.scss

@@ -22,10 +22,24 @@ $box-border-color: #666;
     border: 1px solid $box-border-color;
     border-radius: 4px;
 
-    .context-menu-list-item {
-      color: white;
-      padding: 5px;
-      cursor: pointer;
+    &-item {
+      button {
+        border: none;
+        background-color: transparent;
+        padding: 0;
+        color: white;
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        padding: 5px;
+        width: 100%;
+      }
+      &_icon {
+        width: 20px;
+        height: 20px;
+      }
     }
   }
 }

package/assets/level-selector/button.ejs

@@ -1,6 +1,6 @@
 <button class='gplayer-lite-btn gcore-skin-text-color gear-option' aria-haspopup="menu">
-    <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_icon<%= isHd ? '' : ' hidden' %>"><%= hdIcon %></span>
+    <span class="gear-option_label"><%= i18n.t('quality') %></span>
     <span class='gear-option_value'><%= currentText %></span>
+    <span class="gear-option_arrow-right-icon"><%= arrowRightIcon %></span>
 </button>

package/assets/level-selector/style.scss

@@ -1,8 +1,3 @@
-.gear-option_hd-icon {
-    &.hidden {
-        display: none;
-    }
-}
 .quality-levels li {
     &.disabled {
         opacity: 0.5;

package/assets/playback-rate/button.ejs

@@ -1,6 +1,6 @@
 <button class='gplayer-lite-btn gcore-skin-text-color gear-option' id="playback-rate-button">
-    <span class="gear-option_speed-icon"><%= speedIcon %></span>
+    <span class="gear-option_speed-icon gear-option_icon"><%= speedIcon %></span>
     <span class="gear-option_label"><%= i18n.t('playback_rate') %></span>
-    <span class="gear-option_arrow-right-icon"><%= arrowRightIcon %></span>
     <span class='gear-option_value'><%= title %></span>
+    <span class="gear-option_arrow-right-icon"><%= arrowRightIcon %></span>
 </button>

package/dist/core.js

@@ -42842,6 +42842,9 @@ class Player {
      * ```
      */
     attachTo(playerElement) {
+        trace(`${T} attachTo`, {
+            player: !!this.player,
+        });
         assert.ok(!this.player, 'Player already initialized');
         assert.ok(playerElement, 'Player container element is required');
         if (this.config.debug === 'all' || this.config.debug === 'clappr') {
@@ -43053,9 +43056,9 @@ class Player {
         trace(`${T} initPlayer`, {
             autoPlay: coreOptions.autoPlay,
             sources: coreOptions.sources,
+            player: !!this.player,
             // TODO selected options
         });
-        assert.ok(!this.player, 'Player already initialized');
         const player = new Player$1(coreOptions);
         this.player = player;
         this.bindCoreListeners();
@@ -43218,7 +43221,7 @@ class Player {
     }
 }
 
-var version$1 = "2.22.13";
+var version$1 = "2.22.15";
 
 var packages = {
 	"node_modules/@clappr/core": {