@videojs/html 10.0.0-rc.4 → 10.0.0

package/docs/reference/components/status-indicator.md

@@ -32,7 +32,7 @@ The input event arrives before its action is resolved. The indicator uses the me
 | `toggleFullscreen` | `"fullscreen"` or `"exit-fullscreen"` | Translated fullscreen label |
 | `togglePictureInPicture` | `"pip"` or `"exit-pip"` | Translated picture-in-picture label |
 
-`toggleSubtitles` is ignored when the player reports that no captions or subtitles are available. Seek actions, `toggleControls`, playback-rate actions, and custom actions do not open this indicator.
+`toggleSubtitles` is ignored when the player reports that no captions or subtitles are available. Seek actions, `toggleControls`, playback-rate actions, and custom actions do not open this indicator unless you [derive a custom status](#custom-actions).
 
 Use `actions` to allow only some of the supported actions. Omitting it allows all supported actions.
 
@@ -48,12 +48,34 @@ The indicator closes after `closeDelay`, which defaults to 800 milliseconds. A r
 
 The element remains in the document with `hidden` until the next handled action.
 
+## Custom actions
+
+Use `deriveCustomStatus` to give custom hotkey or gesture actions the same feedback as built-in actions. The indicator calls it only when an allowed action has no built-in status. It receives the input event and the pre-action media snapshot. Return `{ status, label, value }` to open the indicator, or `null` to leave it closed. The returned `status` becomes `data-status`, and the Value part shows `value` when it is not `null` and `label` otherwise. Because the snapshot is taken before the action runs, predict the post-action state the way built-in statuses do.
+
+`deriveCustomStatus` is a JavaScript property with no attribute:
+
+```ts
+const rates = [0.5, 1, 1.5, 2];
+const indicator = document.querySelector("media-status-indicator");
+
+function getNextRate(rate = 1) {
+  const index = rates.indexOf(rate);
+
+  return rates[Math.min(index + 1, rates.length - 1)] ?? rate;
+}
+
+indicator.deriveCustomStatus = (event, snapshot) =>
+  event.action === "stepRate"
+    ? { status: "rate-up", label: `${getNextRate(snapshot.playbackRate)}×`, value: null }
+    : null;
+```
+
 ## Styling
 
 | Attribute | Values | Description |
 | --- | --- | --- |
 | `data-open` | Present / absent | Present while the indicator is open |
-| `data-status` | `"play"`, `"pause"`, `"volume-off"`, `"volume-low"`, `"volume-high"`, `"captions-on"`, `"captions-off"`, `"fullscreen"`, `"exit-fullscreen"`, `"pip"`, or `"exit-pip"` | Predicted status for the handled action |
+| `data-status` | `"play"`, `"pause"`, `"volume-off"`, `"volume-low"`, `"volume-high"`, `"captions-on"`, `"captions-off"`, `"fullscreen"`, `"exit-fullscreen"`, `"pip"`, `"exit-pip"`, or a custom status | Predicted status for the handled action |
 | `data-starting-style` | Present / absent | Present during the open transition |
 | `data-ending-style` | Present / absent | Present during the close transition |
 
@@ -239,6 +261,7 @@ import '@videojs/html/ui/status-indicator-value';
 | --- | --- | --- | --- |
 | `actions` | `readonly InputAction[]` | — | Input actions allowed to open the indicator. All supported actions are allowed when omitted. |
 | `closeDelay` (attribute `close-delay`) | `number` | — | Delay in milliseconds before the indicator closes. |
+| `deriveCustomStatus` (attribute `derive-custom-status`) | `((event: InputActionEvent, snapshot: MediaSnapshot) => StatusDetails<IndicatorStatus> \| null)` | — | Derives display details for custom actions. Called only when the built-in derivation returns `null`; return `null` to leave the indicator closed. |
 
 #### State
 
@@ -250,7 +273,7 @@ State is reflected as data attributes for CSS styling.
 | `transitionEnding` | `boolean` | Whether the close transition is in progress. |
 | `open` | `boolean` | Whether the indicator is open. |
 | `generation` | `number` | Increments each time a supported input action updates the indicator. |
-| `status` | `ReturnType<typeof deriveStatus> extends infer Details ? Details extends { status: infer Status } ? Status \| null : never : never` | Predicted visual status for the handled input action. |
+| `status` | `'pause' \| 'play' \| 'volume-off' \| 'volume-low' \| 'volume-high' \| 'captions-on' \| 'captions-off' \| 'fullscreen' \| 'exit-fullscreen' \| 'pip' \| 'exit-pip' \| string & {} \| null` | Visual status for the handled input action. |
 | `label` | `string \| null` | Translated label for the predicted status. |
 | `value` | `string \| null` | Predicted volume percentage for volume actions, otherwise `null`. |
 
@@ -259,7 +282,7 @@ State is reflected as data attributes for CSS styling.
 | Attribute | Type | Description |
 | --- | --- | --- |
 | `data-open` | — | Present while the indicator is open. |
-| `data-status` | `ReturnType<typeof deriveStatus> extends infer Details ? Details extends { status: infer Status } ? Status \| null : never : never` | Predicted visual status for the handled input action. |
+| `data-status` | `'pause' \| 'play' \| 'volume-off' \| 'volume-low' \| 'volume-high' \| 'captions-on' \| 'captions-off' \| 'fullscreen' \| 'exit-fullscreen' \| 'pip' \| 'exit-pip' \| string & {} \| null` | Predicted visual status for the handled input action. |
 | `data-starting-style` | — | Present during the open transition. |
 | `data-ending-style` | — | Present during the close transition. |
 

package/docs/reference/components/thumbnail.md

@@ -6,7 +6,7 @@ Time-based thumbnail preview component for timeline scrubbing and hover previews
 
 `<media-thumbnail>` can read thumbnail cues directly from your video track. Add a `<track>` with `kind="metadata"` and `label="thumbnails"` to your media element.
 
-[Mux](https://www.mux.com?utm_source=videojs&utm_campaign=vjs10) provides this as `storyboard.vtt`:
+[Mux](https://www.mux.com/?utm_source=videojs&utm_campaign=vjs10&utm_content=docs-content) provides this as `storyboard.vtt`:
 
 `https://image.mux.com/{PLAYBACK_ID}/storyboard.vtt`
 

package/docs/reference/components/tiktok-video.md

@@ -17,7 +17,7 @@ import '@videojs/html/media/tiktok-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/media/tiktok-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/media/tiktok-video.js"></script>
 ```
 
 ## Load a source

package/docs/reference/components/twitch-video.md

@@ -17,7 +17,7 @@ import '@videojs/html/media/twitch-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/media/twitch-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/media/twitch-video.js"></script>
 ```
 
 ## Load a source

package/docs/reference/components/video-compat-skin.md

@@ -0,0 +1,45 @@
+# video-compat-skin
+
+A video skin designed for broader browser compatibility
+
+The Compat skin of the video preset provides basic controls and plain surfaces, with broader browser compatibility as its design goal. Its time slider supports chapter segments and thumbnail previews. See [Customize skins](../../guides/customize-skins.md) to install and edit its source.
+
+## Import
+
+```ts
+import '@videojs/html/video/compat-skin';
+```
+
+## Usage
+
+The skin goes between the player and the media element. It renders its controls around the media.
+
+```html
+<video-player>
+  <video-compat-skin>
+    <video src="video.mp4"></video>
+  </video-compat-skin>
+</video-player>
+```
+
+## Poster
+
+The skin renders a poster image before playback starts. An element with `slot="poster"` replaces it.
+
+See [Add a poster and loading placeholder](../../guides/poster.md) for complete examples.
+
+## Thumbnail
+
+The skin renders a storyboard preview image while scrubbing the time slider. An `<img slot="thumbnail">` replaces it, so image attributes such as `crossorigin`, `loading`, and `fetchpriority` go on it.
+
+See [Show timeline thumbnail previews](../../guides/thumbnails.md) for complete examples.
+
+## Styling
+
+Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. [Customize skins](../../guides/customize-skins.md#style-a-packaged-skin) documents the properties. For deeper changes, the Video.js registry provides the skin files.
+
+## Own the UI
+
+Packaged skins keep their controls and layout inside Video.js. When you need to add, remove, rearrange, or deeply restyle controls, use Shadcn to add the skin source to your project. Its components, layout, styles, and interactions become local files you can change.
+
+- [Install Video.js with Shadcn](../../guides/installation-shadcn.md#choose-how-to-install): Add editable skin source and build a working React or HTML player

package/docs/reference/components/{video-minimal-skin.md → video-neutral-skin.md}

@@ -1,19 +1,19 @@
-# video-minimal-skin
+# video-neutral-skin
 
 The video preset's visually lighter skin, closer to a classic control bar
 
-The minimal skin of the video preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. The [default video skin](./video-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the video preset ships.
+The neutral skin of the video preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. The [default video skin](./video-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the video preset ships.
 
 ## Import
 
 ```ts
-import '@videojs/html/video/minimal-skin';
+import '@videojs/html/video/neutral-skin';
 ```
 
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/video-minimal.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/video-neutral.js"></script>
 ```
 
 ## Usage
@@ -22,9 +22,9 @@ The skin goes between the player and the media element. It renders its controls
 
 ```html
 <video-player>
-  <video-minimal-skin>
+  <video-neutral-skin>
     <video src="video.mp4"></video>
-  </video-minimal-skin>
+  </video-neutral-skin>
 </video-player>
 ```
 

package/docs/reference/components/video-skin.md

@@ -2,7 +2,7 @@
 
 The video preset's default skin with the modern, frosted look
 
-The default skin of the video preset: the control layout for on-demand video with the modern, frosted look. [MinimalVideoSkin](./video-minimal-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the video preset ships.
+The default skin of the video preset: the control layout for on-demand video with the modern, frosted look. [NeutralVideoSkin](./video-neutral-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the video preset ships.
 
 ## Import
 
@@ -13,7 +13,7 @@ import '@videojs/html/video/skin';
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/video.js"></script>
 ```
 
 ## Usage

package/docs/reference/components/vimeo-video.md

@@ -17,7 +17,7 @@ import '@videojs/html/media/vimeo-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/media/vimeo-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/media/vimeo-video.js"></script>
 ```
 
 ## Load a source

package/docs/reference/components/wistia-video.md

@@ -17,7 +17,7 @@ import '@videojs/html/media/wistia-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/media/wistia-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/media/wistia-video.js"></script>
 ```
 
 ## Load a source

package/docs/reference/components/youtube-video.md

@@ -17,7 +17,7 @@ import '@videojs/html/media/youtube-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/media/youtube-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0/media/youtube-video.js"></script>
 ```
 
 ## Load a source

package/package.json

@@ -1,14 +1,22 @@
 {
   "name": "@videojs/html",
-  "version": "10.0.0-rc.4",
-  "description": "HTML library for building media players",
+  "version": "10.0.0",
+  "description": "Video.js 10 for HTML, Vue, and Svelte: player custom elements and skins for video and audio",
   "keywords": [
+    "audio",
     "components",
+    "custom-elements",
     "html",
     "media",
     "player",
+    "svelte",
     "ui",
-    "videojs"
+    "video",
+    "video-player",
+    "video.js",
+    "videojs",
+    "vue",
+    "web-components"
   ],
   "homepage": "https://videojs.org",
   "license": "Apache-2.0",
@@ -140,6 +148,11 @@
       "development": "./dist/dev/i18n/locales/*.js",
       "default": "./dist/default/i18n/locales/*.js"
     },
+    "./i18n/text/*": {
+      "types": "./dist/dev/i18n/text/*.d.ts",
+      "development": "./dist/dev/i18n/text/*.js",
+      "default": "./dist/default/i18n/text/*.js"
+    },
     "./*.css": "./dist/default/define/*.css",
     "./*": {
       "types": "./dist/dev/define/*.d.ts",
@@ -151,52 +164,51 @@
     "access": "public"
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-rc.4",
-    "@videojs/element": "10.0.0-rc.4",
-    "@videojs/media": "10.0.0-rc.4",
-    "@videojs/native-hls-video": "10.0.0-rc.4",
-    "@videojs/spf": "10.0.0-rc.4",
-    "@videojs/store": "10.0.0-rc.4",
-    "@videojs/utils": "10.0.0-rc.4"
+    "@videojs/core": "10.0.0",
+    "@videojs/element": "10.0.0",
+    "@videojs/media": "10.0.0",
+    "@videojs/native-hls-video": "10.0.0",
+    "@videojs/spf": "10.0.0",
+    "@videojs/store": "10.0.0",
+    "@videojs/utils": "10.0.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
-    "@videojs/cloudflare-video": "10.0.0-rc.4",
-    "@videojs/dash-video": "10.0.0-rc.4",
-    "@videojs/google-cast": "10.0.0-rc.4",
-    "@videojs/hlsjs-video": "10.0.0-rc.4",
-    "@videojs/icons": "10.0.0-rc.4",
-    "@videojs/mux-audio": "10.0.0-rc.4",
-    "@videojs/mux-data": "10.0.0-rc.4",
-    "@videojs/mux-video": "10.0.0-rc.4",
-    "@videojs/shaka-video": "10.0.0-rc.4",
-    "@videojs/skins": "10.0.0-rc.4",
-    "@videojs/spotify-audio": "10.0.0-rc.4",
-    "@videojs/tiktok-video": "10.0.0-rc.4",
-    "@videojs/twitch-video": "10.0.0-rc.4",
-    "@videojs/vimeo-video": "10.0.0-rc.4",
-    "@videojs/wistia-video": "10.0.0-rc.4",
-    "@videojs/youtube-video": "10.0.0-rc.4",
+    "@videojs/cloudflare-video": "10.0.0",
+    "@videojs/dash-video": "10.0.0",
+    "@videojs/google-cast": "10.0.0",
+    "@videojs/hlsjs-video": "10.0.0",
+    "@videojs/icons": "10.0.0",
+    "@videojs/mux-audio": "10.0.0",
+    "@videojs/mux-data": "10.0.0",
+    "@videojs/mux-video": "10.0.0",
+    "@videojs/shaka-video": "10.0.0",
+    "@videojs/skins": "10.0.0",
+    "@videojs/spotify-audio": "10.0.0",
+    "@videojs/tiktok-video": "10.0.0",
+    "@videojs/twitch-video": "10.0.0",
+    "@videojs/vimeo-video": "10.0.0",
+    "@videojs/wistia-video": "10.0.0",
+    "@videojs/youtube-video": "10.0.0",
     "happy-dom": "^20.11.1",
     "typescript": "^6.0.2",
-    "vite-plus": "0.2.8",
-    "vitest": "4.1.10"
+    "vite-plus": "1.0.0"
   },
   "peerDependencies": {
-    "@videojs/cloudflare-video": "10.0.0-rc.4",
-    "@videojs/dash-video": "10.0.0-rc.4",
-    "@videojs/google-cast": "10.0.0-rc.4",
-    "@videojs/hlsjs-video": "10.0.0-rc.4",
-    "@videojs/mux-audio": "10.0.0-rc.4",
-    "@videojs/mux-data": "10.0.0-rc.4",
-    "@videojs/mux-video": "10.0.0-rc.4",
-    "@videojs/shaka-video": "10.0.0-rc.4",
-    "@videojs/spotify-audio": "10.0.0-rc.4",
-    "@videojs/tiktok-video": "10.0.0-rc.4",
-    "@videojs/twitch-video": "10.0.0-rc.4",
-    "@videojs/vimeo-video": "10.0.0-rc.4",
-    "@videojs/wistia-video": "10.0.0-rc.4",
-    "@videojs/youtube-video": "10.0.0-rc.4"
+    "@videojs/cloudflare-video": "10.0.0",
+    "@videojs/dash-video": "10.0.0",
+    "@videojs/google-cast": "10.0.0",
+    "@videojs/hlsjs-video": "10.0.0",
+    "@videojs/mux-audio": "10.0.0",
+    "@videojs/mux-data": "10.0.0",
+    "@videojs/mux-video": "10.0.0",
+    "@videojs/shaka-video": "10.0.0",
+    "@videojs/spotify-audio": "10.0.0",
+    "@videojs/tiktok-video": "10.0.0",
+    "@videojs/twitch-video": "10.0.0",
+    "@videojs/vimeo-video": "10.0.0",
+    "@videojs/wistia-video": "10.0.0",
+    "@videojs/youtube-video": "10.0.0"
   },
   "peerDependenciesMeta": {
     "@videojs/cloudflare-video": {