@gcorevideo/player 2.22.14 → 2.22.16

package/assets/clips/clips.ejs

@@ -0,0 +1 @@
+<div class="media-clip-text" id="clips-text"></div>

package/assets/clips/clips.scss

@@ -1,3 +1,23 @@
-    .clips.bar-container[data-seekbar] {
-        clip-path: url("#myClip");
-    }
+.media-control-clips {
+  display: flex;
+  gap: 6px;
+  .media-clip-text {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    display: inline-block;
+    text-overflow: ellipsis;
+    color: white;
+    cursor: default;
+    line-height: var(--bottom-panel);
+    position: relative;
+
+    &::before {
+      content: '•';
+      padding-right: 6px;
+    }
+  }
+  .media-clip-text {
+    max-width: 100px;
+  }
+}

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/list.ejs

@@ -5,7 +5,13 @@
 <ul class="gear-sub-menu quality-levels" id="level-selector-menu" role="menu">
     <% if (!removeAuto) { %>
         <li>
-            <a href="#" class='gear-sub-menu_btn gcore-skin-text-color' data-id="-1" id="level_selector_auto">
+            <a href="#"
+                class="gear-sub-menu_btn gcore-skin-text-color"
+                data-id="-1"
+                id="level_selector_auto"
+               aria-checked="<%= current === -1 %>"
+               role="menuitemradio"
+            >
                 <span class="check-icon"><%= checkIcon %></span>
                 <%= i18n.t('auto') %>
             </a>
@@ -19,8 +25,8 @@
             <a href="#"
                 class="gear-sub-menu_btn gcore-skin-text-color<%= checked ? ' gcore-skin-active' : '' %>"
                 data-id="<%= item.level %>"
-                data-disabled="<%= disabled %>"
-                data-checked="<%= checked %>"
+                aria-disabled="<%= disabled %>"
+                aria-checked="<%= checked %>"
                 role="menuitemradio"
                 id="level_selector_<%= item.width > item.height ? item.height : item.width %>"
             >

package/assets/media-control/media-control.ejs

@@ -45,12 +45,6 @@
     <% var renderMultiCamera = function(name) { %>
         <div class="media-control-multicamera" data-<%= name %>></div>
     <% }; %>
-    <% var renderClipsText = function(name) { %>
-        <div class="media-clip-container gcore-skin-text-color" data-<%= name %>>
-            <div class="media-clip-point gcore-skin-text-color" data-<%= name %>>•</div>
-            <div class="media-clip-text gcore-skin-text-color" data-<%= name %>></div>
-        </div>
-    <% }; %>
     <% var renderVR = function(name) { %>
         <div class="media-control-vr" data-<%= name %>></div>
     <% }; %>
@@ -72,7 +66,7 @@
                 renderDrawer(setting, settings.volumeBarTemplate ? templates[settings.volumeBarTemplate] : function (name) {
                     return renderSegmentedBar(name);
                 });
-            } else if (setting === "duration" || setting === "position") {
+            } else if (setting === "duration" || setting === "position" || setting === "clips") {
                 renderIndicator(setting);
             } else if (setting === "quality") {
                 renderQuality(setting)
@@ -82,8 +76,6 @@
                 renderMultiCamera(setting)
             } else if (setting === "vr") {
                 renderVR(setting)
-            } else if (setting === "clipsText") {
-                renderClipsText(setting)
             } else if (["playpause", "playstop", "fullscreen"].includes(setting)) {
                 renderButton(setting);
             }

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

@@ -178,31 +178,6 @@
       }
     }
 
-    .media-clip-container {
-      display: none;
-
-      .media-clip-text,
-      .media-clip-point {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        display: inline-block;
-        float: left;
-        color: white;
-        cursor: default;
-        line-height: var(--bottom-panel);
-        position: relative;
-      }
-
-      .media-clip-point {
-        margin-right: 6px;
-      }
-
-      .media-clip-text {
-        max-width: calc(80% - 240px);
-      }
-    }
-
     .bar-container[data-seekbar] {
       position: absolute;
       top: -11px;

package/assets/media-control/width370.scss

@@ -146,16 +146,16 @@
       }
     }
 
-    .media-clip-container {
+    .media-clip-container,
+    .media-control-clips {
 
-      .media-clip-text,
-      .media-clip-point {
+      .media-clip-text {
         line-height: 33px;
         font-size: 11px;
       }
 
       .media-clip-text {
-        max-width: calc(80% - 210px);
+        max-width: 50px;
       }
     }
 

package/dist/core.js

@@ -42133,16 +42133,6 @@ class HlsPlayback extends BasePlayback {
         this.seek(seekTo);
     }
     seek(time) {
-        // trace(`${T} seek`, {
-        //   time,
-        //   duration: this._duration,
-        //   startTime: this._startTime,
-        //   currentTimestamp: this.currentTimestamp,
-        //   playbackType: this.getPlaybackType(),
-        //   dvrEnabled: this.dvrEnabled,
-        //   durationExcludesAfterLiveSyncPoint: this._durationExcludesAfterLiveSyncPoint,
-        //   minDvrSize: this._minDvrSize,
-        //  })
         if (time < 0) {
             Log.warn('Attempt to seek to a negative time. Resetting to live point. Use seekToLivePoint() to seek to the live point.');
             time = this.getDuration();
@@ -42294,11 +42284,6 @@ class HlsPlayback extends BasePlayback {
             return;
         }
         this._lastTimeUpdate = update;
-        // trace(`${T} _onTimeUpdate`, {
-        //   current: update.current,
-        //   total: update.total,
-        //   firstFragDateTime: update.firstFragDateTime,
-        // })
         this.trigger(Events$1.PLAYBACK_TIMEUPDATE, update, this.name);
     }
     _onDurationChange() {
@@ -42569,12 +42554,6 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_LEVEL_SWITCH_END);
     }
     get dvrEnabled() {
-        // trace(`${T} dvrEnabled`, {
-        //   durationExcludesAfterLiveSyncPoint: this._durationExcludesAfterLiveSyncPoint,
-        //   duration: this._duration,
-        //   minDvrSize: this._minDvrSize,
-        //   playbackType: this.getPlaybackType(),
-        // })
         // enabled when:
         // - the duration does not include content after hlsjs's live sync point
         // - the playable region duration is longer than the configured duration to enable dvr after
@@ -42863,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') {
@@ -43074,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();
@@ -43239,7 +43221,7 @@ class Player {
     }
 }
 
-var version$1 = "2.22.14";
+var version$1 = "2.22.16";
 
 var packages = {
 	"node_modules/@clappr/core": {