@gcorevideo/player 2.29.0 → 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/dist/core.js

@@ -12963,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: {
@@ -12974,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);
@@ -51206,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.
      */
@@ -51477,7 +51492,7 @@ class Player {
     }
 }
 
-var version$1 = "2.29.0";
+var version$1 = "2.30.0";
 
 var packages = {
 	"node_modules/@clappr/core": {

package/dist/index.css

@@ -122,6 +122,55 @@
 .gplayer-lite-btn::-moz-focus-inner {
   border: 0;
   padding: 0;
+}.big-mute-icon-wrapper[data-big-mute] {
+  position: absolute;
+  z-index: 9998;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: calc(100% - 50px);
+  margin: 0 auto;
+  opacity: 0.75;
+  transition: opacity 0.1s ease;
+  pointer-events: auto;
+}
+.big-mute-icon-wrapper[data-big-mute].hide {
+  display: none;
+}
+.big-mute-icon-wrapper[data-big-mute]:hover {
+  cursor: pointer;
+}
+
+.big-mute-icon[data-big-mute-icon] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  width: 120px;
+  height: 120px;
+  border: 2px solid white;
+  border-radius: 50%;
+  filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+  filter: alpha(opacity=60);
+  opacity: 1;
+  box-shadow: 0 0 1px 0 white;
+  background: rgba(240, 243, 247, 0.9411764706);
+  z-index: 10000;
+}
+.big-mute-icon[data-big-mute-icon] svg {
+  margin-left: 5px;
+  width: 80px;
+  height: 80px;
+}
+.big-mute-icon[data-big-mute-icon] svg path {
+  fill: #1f1e1e !important;
+}
+.big-mute-icon[data-big-mute-icon]:hover {
+  background: rgba(240, 243, 247, 0.8784313725);
+}
+.big-mute-icon[data-big-mute-icon]:hover svg path {
+  fill: #151515 !important;
 }*,
 :focus,
 :visited {
@@ -230,78 +279,6 @@
 }
 .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
   flex: 1 0 auto;
-}.big-mute-icon-wrapper[data-big-mute] {
-  position: absolute;
-  z-index: 9998;
-  background-color: transparent;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  height: calc(100% - 50px);
-  margin: 0 auto;
-  opacity: 0.75;
-  transition: opacity 0.1s ease;
-  pointer-events: auto;
-}
-.big-mute-icon-wrapper[data-big-mute].hide {
-  display: none;
-}
-.big-mute-icon-wrapper[data-big-mute]:hover {
-  cursor: pointer;
-}
-
-.big-mute-icon[data-big-mute-icon] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: center;
-  width: 120px;
-  height: 120px;
-  border: 2px solid white;
-  border-radius: 50%;
-  filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-  opacity: 1;
-  box-shadow: 0 0 1px 0 white;
-  background: rgba(240, 243, 247, 0.9411764706);
-  z-index: 10000;
-}
-.big-mute-icon[data-big-mute-icon] svg {
-  margin-left: 5px;
-  width: 80px;
-  height: 80px;
-}
-.big-mute-icon[data-big-mute-icon] svg path {
-  fill: #1f1e1e !important;
-}
-.big-mute-icon[data-big-mute-icon]:hover {
-  background: rgba(240, 243, 247, 0.8784313725);
-}
-.big-mute-icon[data-big-mute-icon]:hover svg path {
-  fill: #151515 !important;
-}@charset "UTF-8";
-.gplayer-mc-clips {
-  display: flex;
-  gap: 6px;
-}
-.gplayer-mc-clips .gplayer-mc-clips-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;
-  max-width: 150px;
-}
-.gplayer-mc-clips .gplayer-mc-clips-text::before {
-  content: "•";
-  padding-right: 6px;
-}
-.gplayer-mc-clips .gplayer-mc-clips-text.compact {
-  max-width: 100px;
 }:root {
   --primary-background-color: #000;
   --secondary-background-color: #262626;
@@ -666,6 +643,65 @@
   .fullscreen .clappr-nerd-stats .stats-box {
     top: unset;
   }
+}.context-menu {
+  z-index: 999;
+  position: absolute;
+  top: 0;
+  left: 0;
+  text-align: center;
+}
+.context-menu .context-menu-list {
+  font-family: "Proxima Nova", sans-serif;
+  font-size: 12px;
+  line-height: 12px;
+  list-style-type: none;
+  text-align: left;
+  padding: 5px;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: rgba(0, 0, 0, 0.75);
+  border: 1px solid #666;
+  border-radius: 4px;
+}
+.context-menu .context-menu-list-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%;
+}
+.context-menu .context-menu-list-item_icon {
+  width: 20px;
+  height: 20px;
+}@charset "UTF-8";
+.gplayer-mc-clips {
+  display: flex;
+  gap: 6px;
+}
+.gplayer-mc-clips .gplayer-mc-clips-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;
+  max-width: 150px;
+}
+.gplayer-mc-clips .gplayer-mc-clips-text::before {
+  content: "•";
+  padding-right: 6px;
+}
+.gplayer-mc-clips .gplayer-mc-clips-text.compact {
+  max-width: 100px;
 }.dvr-controls {
   --disabled-opacity: 0.3;
   --circle-radius: 5px;
@@ -723,42 +759,6 @@
 .dvr-controls .live-button:hover {
   opacity: 1;
   text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
-}.context-menu {
-  z-index: 999;
-  position: absolute;
-  top: 0;
-  left: 0;
-  text-align: center;
-}
-.context-menu .context-menu-list {
-  font-family: "Proxima Nova", sans-serif;
-  font-size: 12px;
-  line-height: 12px;
-  list-style-type: none;
-  text-align: left;
-  padding: 5px;
-  margin-left: auto;
-  margin-right: auto;
-  background-color: rgba(0, 0, 0, 0.75);
-  border: 1px solid #666;
-  border-radius: 4px;
-}
-.context-menu .context-menu-list-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%;
-}
-.context-menu .context-menu-list-item_icon {
-  width: 20px;
-  height: 20px;
 }div.player-error-screen, [data-player] div.player-error-screen {
   color: #CCCACA;
   position: absolute;
@@ -914,39 +914,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
 }
 .media-control-skin-1 .media-control-item.media-control-pip button svg {
   height: 20px;
-}.seek-time {
-  position: absolute;
-  white-space: nowrap;
-  height: 20px;
-  line-height: 20px;
-  font-size: 0;
-  left: -100%;
-  bottom: 55px;
-  background-color: rgba(2, 2, 2, 0.5);
-  z-index: 9999;
-  transition: opacity 0.1s ease;
-}
-.seek-time.hidden {
-  opacity: 0;
-}
-.seek-time .seek-time__pos {
-  display: inline-block;
-  color: white;
-  font-size: 10px;
-  padding-left: 7px;
-  padding-right: 7px;
-  vertical-align: top;
-}
-.seek-time .seek-time__duration {
-  display: inline-block;
-  color: rgba(255, 255, 255, 0.5);
-  font-size: 10px;
-  padding-right: 7px;
-  vertical-align: top;
-}
-.seek-time .seek-time__duration::before {
-  content: "|";
-  margin-right: 7px;
 }[data-player] {
   --bottom-panel: 40px;
 }
@@ -1608,6 +1575,39 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
 }
 .quality-levels li.current {
   background-color: #000;
+}.seek-time {
+  position: absolute;
+  white-space: nowrap;
+  height: 20px;
+  line-height: 20px;
+  font-size: 0;
+  left: -100%;
+  bottom: 55px;
+  background-color: rgba(2, 2, 2, 0.5);
+  z-index: 9999;
+  transition: opacity 0.1s ease;
+}
+.seek-time.hidden {
+  opacity: 0;
+}
+.seek-time .seek-time__pos {
+  display: inline-block;
+  color: white;
+  font-size: 10px;
+  padding-left: 7px;
+  padding-right: 7px;
+  vertical-align: top;
+}
+.seek-time .seek-time__duration {
+  display: inline-block;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 10px;
+  padding-right: 7px;
+  vertical-align: top;
+}
+.seek-time .seek-time__duration::before {
+  content: "|";
+  margin-right: 7px;
 }.share_plugin[data-share] {
   pointer-events: auto;
   z-index: 5;
@@ -1712,6 +1712,44 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
 .mc-skip-time .skip-container .skip-item {
   flex: 1 0 0px;
   height: 100%;
+}.spinner-three-bounce[data-spinner] {
+  position: absolute;
+  width: 70px;
+  text-align: center;
+  z-index: 999;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
+  /* center vertically */
+  top: 50%;
+  transform: translateY(-50%);
+}
+.spinner-three-bounce[data-spinner] > div {
+  width: 18px;
+  height: 18px;
+  background-color: #FFF;
+  border-radius: 100%;
+  display: inline-block;
+  animation: bouncedelay 1.4s infinite ease-in-out;
+  /* Prevent first frame from flickering when animation starts */
+  animation-fill-mode: both;
+}
+.spinner-three-bounce[data-spinner] [data-bounce1] {
+  animation-delay: -0.32s;
+}
+.spinner-three-bounce[data-spinner] [data-bounce2] {
+  animation-delay: -0.16s;
+}
+
+@keyframes bouncedelay {
+  0%, 80%, 100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
 }.media-control-skin-1 .media-control-cc button.media-control-button {
   display: flex;
   justify-content: center;
@@ -1836,44 +1874,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
 }
 .scrub-thumbnails .backdrop .carousel img {
   width: auto;
-}.spinner-three-bounce[data-spinner] {
-  position: absolute;
-  width: 70px;
-  text-align: center;
-  z-index: 999;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  margin-left: auto;
-  margin-right: auto;
-  /* center vertically */
-  top: 50%;
-  transform: translateY(-50%);
-}
-.spinner-three-bounce[data-spinner] > div {
-  width: 18px;
-  height: 18px;
-  background-color: #FFF;
-  border-radius: 100%;
-  display: inline-block;
-  animation: bouncedelay 1.4s infinite ease-in-out;
-  /* Prevent first frame from flickering when animation starts */
-  animation-fill-mode: both;
-}
-.spinner-three-bounce[data-spinner] [data-bounce1] {
-  animation-delay: -0.32s;
-}
-.spinner-three-bounce[data-spinner] [data-bounce2] {
-  animation-delay: -0.16s;
-}
-
-@keyframes bouncedelay {
-  0%, 80%, 100% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
-  }
 }.player-logo[data-logo] {
   position: absolute;
   z-index: 2;

package/dist/index.embed.js

@@ -12830,6 +12830,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: {
@@ -12841,8 +12842,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);
@@ -51067,6 +51071,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.
      */