@gcorevideo/player 2.28.36 → 2.30.0

package/README.md

@@ -81,6 +81,114 @@ See the complete example app on Vercel: <https://github.com/dmitritz/gcore-video
 
 [Example codepen](https://codepen.io/dmitritz/pen/OPLdEab)
 
+## Protected-content streams — automatic token refresh
+
+Gcore protected-content streams embed a security token and expiry timestamp
+directly in the URL path:
+
+```
+https://host/videos/{video-id}/{token}/{expires}/master.m3u8
+```
+
+Once a token expires the CDN returns HTTP 401 for every segment request.
+`TokenRefreshPlugin` handles renewal transparently: it fires a background timer
+before the token expires, calls your `getToken()` function, and rewrites the
+`/{token}/{expires}/` segment in every outgoing hls.js or dash.js request URL —
+playback continues without buffering or interruption.
+
+### Supported playback engines
+
+| Engine | Mechanism | Interruption |
+|---|---|---|
+| **hls.js** | Custom loader rewrites every request URL before XHR `open()` | None |
+| **dash.js** | `addRequestInterceptor` rewrites every request URL | None |
+| **Native `<video>`** (older Safari) | Source reload + seek restore | Brief |
+
+For fully seamless refresh on older Safari, register `example/token-refresh-sw.js`
+as a Service Worker — it intercepts all CDN fetch requests and rewrites the token
+even for native media elements.
+
+### Usage
+
+```ts
+import { Player, TokenRefreshPlugin } from '@gcorevideo/player'
+
+// Register once before creating any player instance.
+Player.registerPlugin(TokenRefreshPlugin)
+
+const player = new Player({
+  sources: [{
+    // The token API returns a ready-to-use URL with the token embedded in the path.
+    // TokenRefreshPlugin reads the initial {token}/{expires} from this URL at startup.
+    source: 'https://host/videos/{id}/{token}/{expires}/master.m3u8',
+    mimeType: 'application/x-mpegURL',
+  }],
+
+  tokenRefresh: {
+    /**
+     * Called automatically ~refreshLeadSeconds before the current token expires.
+     * Must return a Promise resolving to a TokenResponse object.
+     */
+    getToken: () => fetch('https://your-token-api/token').then(r => r.json()),
+
+    /**
+     * Set to true to use IP-bound tokens (token_ip / url_ip).
+     * All CDN requests must then originate from the same IP as the first response.
+     * Default: false.
+     */
+    ipBound: false,
+
+    /**
+     * How many seconds before expiry to pre-fetch the new token.
+     * Rule of thumb: refreshLeadSeconds < tokenLifetime / 2.
+     * Default: 5.
+     */
+    refreshLeadSeconds: 5,
+
+    /** Optional callback fired after each successful token refresh. */
+    onTokenRefreshed(data) {
+      console.log('token refreshed, new expiry:', new Date(data.expires * 1000))
+    },
+  },
+})
+
+player.attachTo(document.getElementById('player'))
+```
+
+### TokenResponse shape
+
+Your `getToken()` function must return an object with this structure:
+
+```ts
+interface TokenResponse {
+  token:     string  // plain (any-IP) token
+  token_ip:  string  // IP-bound token
+  client_ip: string  // client IP the token server observed
+  expires:   number  // Unix timestamp (seconds) when both tokens expire
+  url:       string  // full HLS master URL with plain token in path
+  url_ip:    string  // full HLS master URL with IP-bound token in path
+}
+```
+
+### Pausing and resuming refresh
+
+Use the plugin instance to suspend and resume the refresh cycle at runtime:
+
+```ts
+const plugin = player.getPlugin('token_refresh')
+
+plugin.pause()          // stop the timer; existing token stays active until CDN rejects it
+plugin.resume()         // restart the timer; fetches immediately if token already expired
+console.log(plugin.isPaused)  // → true | false
+```
+
+### Working demo
+
+See [`example/protected-content.html`](../../example/protected-content.html) and
+[`example/protected-content.js`](../../example/protected-content.js) for a fully
+annotated end-to-end integration, including UI feedback, IP-bound token switching,
+a live countdown, and Service Worker integration notes.
+
 ## Documentation
 
 - [API reference](./docs/api/index.md)

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

@@ -186,6 +186,7 @@
   }
 
   .media-control-indicator {
+
     &[data-position],
     &[data-duration] {
       display: flex;
@@ -394,6 +395,7 @@
       }
     }
   }
+
   .seek-time {
     height: 26px;
     line-height: 26px;
@@ -472,37 +474,37 @@
         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;

package/assets/multi-camera/multicamera.ejs

@@ -1,29 +1,33 @@
-<button data-multicamera-button class='gcore-skin-button-color'>
+<button data-multicamera-button class='gcore-skin-button-color media-control-button'>
     <span class="multicamera-icon"></span>
 </button>
 
 <ul class="gcore-skin-bg-color">
-    <% for (var i = 0; i < streams.length; i++) { %>
-        <% if(!streams[i].live && multisources_mode === 'only_live') { %>
+    <% for (var i=0; i < streams.length; i++) { %>
+        <% if(!streams[i].live && multisources_mode==='only_live' ) { %>
             <% continue; %>
-        <% } %>
-        <li>
-            <div class="multicamera-item" data-multicamera-selector-live="<%= streams[i].live %>"
-                 data-multicamera-selector-select="<%= streams[i].id %>">
-                <div class="multicamera-screenshot">
-                    <% if (streams[i].screenshot) { %>
-                        <img src="<%= streams[i].screenshot %>" alt="<%= streams[i].title %>"/>
+                <% } %>
+                    <li>
+                        <div class="multicamera-item" data-multicamera-selector-live="<%= streams[i].live %>"
+                            data-multicamera-selector-select="<%= streams[i].id %>">
+                            <div class="multicamera-screenshot">
+                                <% if (streams[i].screenshot) { %>
+                                    <img src="<%= streams[i].screenshot %>" alt="<%= streams[i].title %>" />
+                                    <% } %>
+                            </div>
+                            <div class="multicamera-text gcore-skin-text-color">
+                                <% if (streams[i].title) { %>
+                                    <div class="multicamera-title gcore-skin-text-color">
+                                        <%= streams[i].title %>
+                                    </div>
+                                    <% } %>
+                                        <% if (streams[i].description) { %>
+                                            <div class="multicamera-description gcore-skin-text-color">
+                                                <%= streams[i].description %>
+                                            </div>
+                                            <% } %>
+                            </div>
+                        </div>
+                    </li>
                     <% } %>
-                </div>
-                <div class="multicamera-text gcore-skin-text-color">
-                    <% if (streams[i].title) { %>
-                        <div class="multicamera-title gcore-skin-text-color"><%= streams[i].title %></div>
-                    <% } %>
-                    <% if (streams[i].description) { %>
-                        <div class="multicamera-description gcore-skin-text-color"><%= streams[i].description %></div>
-                    <% } %>
-                </div>
-            </div>
-        </li>
-    <% } %>
-</ul>
+</ul>

package/assets/multi-camera/style.scss

@@ -5,11 +5,8 @@
 }
 
 .multicamera[data-multicamera] {
-  float: right;
-  margin-top: 4px;
   position: relative;
-  margin-right: 20px;
-  width: 20px;
+  order: 80;
 
   button {
     background-color: transparent;
@@ -20,10 +17,15 @@
     font-size: 14px;
     padding: 0;
 
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 20px;
+
     svg {
       height: 20px;
       position: relative;
-      margin-top: 6px;
     }
 
     &:hover {
@@ -33,13 +35,6 @@
     &.changing {
       animation: pulse 0.5s infinite alternate;
     }
-
-    span.quality-arrow {
-      width: 9px;
-      height: 6px;
-      margin-top: 11px;
-      margin-left: 5px;
-    }
   }
 
   &>ul {
@@ -135,27 +130,5 @@
         }
       }
     }
-
-    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;
-    }
-
   }
 }

package/assets/style/main.scss

@@ -14,7 +14,7 @@
 }
 
 .spinner-three-bounce {
-  & > .gcore-skin-main-color {
+  &>.gcore-skin-main-color {
     box-shadow: 4px 4px 9px 1px rgb(36 61 81 / 51%);
   }
 }
@@ -47,4 +47,4 @@
     border: 0;
     padding: 0;
   }
-}
+}

package/dist/core.js

@@ -12686,6 +12686,9 @@ var PlayerEvent;
     PlayerEvent["VolumeUpdate"] = "volumeupdate";
 })(PlayerEvent || (PlayerEvent = {}));
 
+const MIME_TYPES_HLS = ['application/x-mpegurl', 'application/vnd.apple.mpegurl'];
+const MIME_TYPE_HLS = MIME_TYPES_HLS[0];
+const MIME_TYPE_DASH = 'application/dash+xml';
 // TODO rewrite using the Playback classes and canPlay static methods
 function buildMediaSourcesList(sources, priorityTransport = 'dash') {
     const playbacks = Loader.registeredPlaybacks;
@@ -12725,22 +12728,21 @@ function wrapSource(s) {
 }
 function guessMimeType(s) {
     if (s.endsWith('.mpd')) {
-        return 'application/dash+xml';
+        return MIME_TYPE_DASH;
     }
     if (s.endsWith('.m3u8')) {
-        // return 'application/vnd.apple.mpegurl'
-        return 'application/x-mpegurl';
+        return MIME_TYPE_HLS;
     }
 }
 function isDashSource(source, mimeType) {
     if (mimeType) {
-        return mimeType === 'application/dash+xml'; // TODO consider video/mp4
+        return mimeType === MIME_TYPE_DASH; // TODO consider video/mp4
     }
     return source.endsWith('.mpd');
 }
 function isHlsSource(source, mimeType) {
     if (mimeType) {
-        return ['application/vnd.apple.mpegurl', 'application/x-mpegurl'].includes(mimeType.toLowerCase());
+        return MIME_TYPES_HLS.includes(mimeType.toLowerCase());
     }
     return source.endsWith('.m3u8');
 }
@@ -12961,6 +12963,7 @@ class DashPlayback extends BasePlayback {
         this._dash = dash;
         this._dash.initialize();
         if (this.options.dash) {
+            const { requestInterceptor, ...dashSettings } = this.options.dash;
             const settings = $.extend(true, {
                 streaming: {
                     text: {
@@ -12972,8 +12975,11 @@ class DashPlayback extends BasePlayback {
                         // dispatchForManualRendering: true, // TODO only when useNativeSubtitles is not true?
                     },
                 },
-            }, this.options.dash);
+            }, dashSettings);
             this._dash.updateSettings(settings);
+            if (typeof requestInterceptor === 'function') {
+                this._dash.addRequestInterceptor(requestInterceptor);
+            }
         }
         this._dash.attachView(this.el);
         this._dash.setAutoPlay(false);
@@ -51204,6 +51210,17 @@ class Player {
         }
         this.player?.load(ms, ms[0].mimeType ?? '');
     }
+    /**
+     * Returns a registered core plugin instance by name, or `null` if not found.
+     *
+     * @example
+     * ```ts
+     * const tokenRefresh = player.getPlugin('token_refresh') as TokenRefreshPlugin | null
+     * ```
+     */
+    getPlugin(name) {
+        return this.player?.core.getPlugin(name) ?? null;
+    }
     /**
      * Mutes the sound of the video.
      */
@@ -51475,7 +51492,7 @@ class Player {
     }
 }
 
-var version$1 = "2.28.36";
+var version$1 = "2.30.0";
 
 var packages = {
 	"node_modules/@clappr/core": {