npm - @videojs/react - Versions diffs - 10.0.0-rc.2 → 10.0.0-rc.3 - Mend

@videojs/react 10.0.0-rc.2 → 10.0.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2117) hide show

package/docs/reference/translation-phrases.md DELETED Viewed

@@ -1,453 +0,0 @@
-# Translation phrases
-Semantic i18n keys, their English defaults, and the player UI that uses them
-Video.js uses opaque semantic keys so English copy can change without breaking translation packs. English defaults are defined in `packages/core/src/core/i18n/locales/en.ts`. Both HTML and React controls use the same keys.
-Locale packs and provider overrides use nested objects, so `buttons.play` is authored as `{ buttons: { play: '…' } }`. The dotted form is used by translators and the HTML `<media-text token>` attribute.
-## Playback controls
-Key
-English default
-Used by
-`buttons.play`
-Play
-Play button and its tooltip
-`buttons.pause`
-Pause
-Play button and its tooltip
-`buttons.replay`
-Replay
-Play button and its tooltip
-`buttons.mute`
-Mute
-Mute button and its tooltip
-`buttons.unmute`
-Unmute
-Mute button and its tooltip
-`seek.forward`
-Seek forward `{seconds}` seconds
-Seek-forward button and its tooltip
-`seek.backward`
-Seek backward `{seconds}` seconds
-Seek-backward button and its tooltip
-`fullscreen.enter`
-Enter fullscreen
-Fullscreen button
-`fullscreen.exit`
-Exit fullscreen
-Fullscreen button
-`captions.enable`
-Enable captions
-Captions button and captions selection control
-`captions.disable`
-Disable captions
-Captions button and captions selection control
-`pip.enter`
-Enter picture-in-picture
-Picture-in-picture button
-`pip.exit`
-Exit picture-in-picture
-Picture-in-picture button
-`live.playing`
-Playing live
-Live button
-`live.seekToEdge`
-Seek to live edge
-Live button
-`live.badge`
-Live
-Live button badge
-`cast.start`
-Start casting
-Cast button
-`cast.stop`
-Stop casting
-Cast button
-`cast.connecting`
-Connecting
-Cast button
-`airplay.start`
-Start AirPlay
-AirPlay button
-`airplay.stop`
-Stop AirPlay
-AirPlay button
-## Time and volume
-Key
-English default
-Used by
-`slider.seek`
-Seek
-Time slider aria label
-`time.current`
-Current time
-Current-time display aria label
-`time.duration`
-Duration
-Duration display aria label
-`time.remaining`
-Remaining
-Remaining-time display aria label
-`time.elapsedSuffix`
-`{duration} elapsed`
-Elapsed time in a toggleable display aria label
-`time.durationSuffix`
-`{duration} duration`
-Duration in a toggleable display aria label
-`time.remainingSuffix`
-`{duration} remaining`
-Remaining time display
-`time.showElapsed`
-`Show elapsed time, {duration}.`
-Toggleable time display aria label
-`time.showDuration`
-`Show duration, {duration}.`
-Toggleable time display aria label
-`time.showRemaining`
-`Show remaining time, {duration}.`
-Toggleable time display aria label
-`time.toggleElapsed`
-`Toggle between elapsed and remaining time.`
-Elapsed-time toggle aria description
-`time.toggleDuration`
-`Toggle between duration and remaining time.`
-Duration toggle aria description
-`time.position`
-`{current} of {duration}`
-Time slider value text
-`playback.rate`
-Playback rate `{rate}`
-Playback-rate button and radio group
-`volume.mutedValue`
-`{percent}, muted`
-Muted volume slider value text
-`volume.muted`
-Muted
-Volume input feedback
-`volume.label`
-Volume
-Volume slider aria label
-`volume.value`
-Volume `{value}`
-Volume input feedback
-## Playback feedback
-Key
-English default
-Used by
-`status.captionsOn`
-Captions on
-Input feedback after enabling captions
-`status.captionsOff`
-Captions off
-Input feedback after disabling captions
-`status.paused`
-Paused
-Input feedback after pausing
-`status.playing`
-Playing
-Input feedback after starting playback
-`status.fullscreen`
-Fullscreen
-Input feedback after entering fullscreen
-`status.pip`
-Picture in picture
-Input feedback after entering picture-in-picture
-`status.exitPip`
-Exit picture in picture
-Input feedback after exiting picture-in-picture
-## Errors
-Key
-English default
-Used by
-`errors.aborted`
-You stopped media playback before it finished.
-Media error dialog for `MEDIA_ERR_ABORTED`
-`errors.network`
-This media could not be loaded due to a network or server issue.
-Media error dialog for `MEDIA_ERR_NETWORK`
-`errors.decode`
-This media could not be played. It may be corrupted, or your browser may not support its format.
-Media error dialog for `MEDIA_ERR_DECODE`
-`errors.source`
-This media could not be loaded. It may be unavailable, or your browser may not support its format.
-Media error dialog for `MEDIA_ERR_SRC_NOT_SUPPORTED`
-`errors.encrypted`
-This media could not be played because it could not be decrypted.
-Media error dialog for `MEDIA_ERR_ENCRYPTED`
-`errors.title`
-Something went wrong.
-Generic media error dialog title
-`errors.unexpected`
-An unexpected error occurred.
-Generic media error dialog fallback description
-`common.empty`
-`''`
-Empty description for a custom media error
-`common.ok`
-OK
-Error dialog confirmation button
-## Settings and track menus
-Key
-English default
-Used by
-`menu.settings`
-Settings
-Video settings menu trigger
-`menu.quality`
-Quality
-Quality menu
-`menu.audio`
-Audio
-Audio-track menu and fallback track label
-`menu.default`
-Default
-Reserved default-option label; no stock control currently emits it
-`menu.speed`
-Speed
-Playback-rate menu
-`menu.captions`
-Captions
-Captions menu
-`menu.playbackRate`
-Playback rate
-Playback-rate radio group
-`menu.back`
-Back
-Nested settings-menu back button
-`menu.off`
-Off
-Captions menu option
-`menu.auto`
-Auto
-Automatic-quality option
-`menu.autoWithLabel`
-Auto (`{label}`)
-Automatic-quality option with the active rendition
-`menu.subtitles`
-Subtitles
-Subtitles track option
-## Related
-*   [Internationalize the player](../how-to/internationalize-the-player.md)

package/docs/reference/twitch-video.md DELETED Viewed

@@ -1,225 +0,0 @@
-# TwitchVideo
-Video component that plays Twitch videos and live channels through the Twitch embed player
-The [Twitch embed player](https://dev.twitch.tv/docs/embed/video-and-clips/) handles both recorded videos and live channels. Its own chrome stays hidden by default, so it drops into a [player skin](../concepts/skins.md) like any other media component; set `controls` to use Twitch’s UI instead.
-## Import
-bash
-```
-pnpm add @videojs/twitch-video
-```
-tsx
-```
-import { TwitchVideo } from '@videojs/react/media/twitch-video';
-```
-## Load a source
-`src` takes a video URL (`twitch.tv/videos/<id>`) or a channel URL (`twitch.tv/<channel>`), with or without the `www.` and `go.` hosts. A channel URL plays the channel’s live stream. Clips (`clips.twitch.tv`) are a different embed and aren’t supported.
-tsx
-```
-<TwitchVideo src="https://www.twitch.tv/videos/106400740" />
-```
-## Live channels
-A channel embed behaves like a live media component:
-*   `duration` reports `Infinity` while the stream is live.
-*   Seeking is unavailable: the embed exposes no DVR window.
-*   The stream going away and coming back dispatch `offline` and `online` events.
-*   `loop` never repeats a channel; a live stream doesn’t end.
-## Parent hostnames
-Twitch checks the embedding page’s ancestors against a `parent` allowlist and won’t play unless the current page is on it. The element always includes your page’s own hostname, so a plain embed needs no setup. When your player is itself framed by other hostnames, name each of them under `engine.twitch.parent`:
-tsx
-```
-<TwitchVideo
-  source={{
-    src: 'https://www.twitch.tv/videos/106400740',
-    engine: { twitch: { parent: ['embed.example.com'] } },
-  }}
-/>
-```
-## Behavior
-*   Volume and mute both work, like a native `<video>`.
-*   `playbackRate` is reported but never applied: the embed has no rate command.
-*   `loop` restarts a finished video from the top; the embed has no loop parameter.
-*   `controls` is read when the embed is built; changing it later doesn’t take effect, since rebuilding the iframe would lose the playback session.
-*   Fullscreen targets the iframe, so Twitch’s own chrome shows in fullscreen.
-## Examples
-### Basic Usage
-App.tsx
-App.css
-```
-import { TwitchVideo } from '@videojs/react/media/twitch-video';
-export default function BasicUsage() {
-  return (
-    <div className="twitch-video">
-      <TwitchVideo src="https://www.twitch.tv/videos/106400740" controls />
-    </div>
-  );
-}
-```
-```
-.twitch-video {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-}
-```
-## API Reference
-### Props
-Accepts these Video.js-specific props:
-Prop
-Type
-Default
-Details
-`autoplay`
-`boolean`
-`false`
-`controls`
-`boolean`
-`false`
-`defaultMuted`
-`boolean`
-`false`
-`loop`
-`boolean`
-`false`
-`muted`
-`boolean`
-`false`
-`playsInline`
-`boolean`
-`true`
-`poster`
-`string`
-`''`
-`preload`
-`MediaPreloadType`
-`'metadata'`
-`source`
-`{ src?: string; engine?: TwitchSourceEngineConfig } | null`
-`null`
-▸
-Description
-Twitch VOD or channel URL in `src`, plus embed parameters under `engine.twitch`. Replacing it re-derives `src`.
-`src`
-`string`
-`''`
-### Engine options
-#### `source.engine.twitch`
-Pass [Twitch embed parameters](https://dev.twitch.tv/docs/embed/video-and-clips/) under `source.engine.twitch`, spelled exactly as Twitch spells them, plus anything Twitch adds next. [Media Sources](../concepts/media-sources.md) covers how engine options fit into a structured source.
-`controls`, `autoplay`, and `muted` come from the props of the same name, and the video or channel comes from `src`, so none of those have an `engine.twitch` spelling.
-Option
-Type
-Details
-`collection`
-`string | undefined`
-▸
-Description
-Collection to play through, starting from the video named by `src`.
-`parent`
-`string | readonly string[] | undefined`
-▸
-Description
-Every hostname the embed may be framed by. Twitch checks the frame's ancestors against it and refuses to play when the current page is missing, which is why the page's own hostname is always included on top of this.
-`referrerPolicy`
-`ReferrerPolicy | undefined`
-▸
-Description
-`referrerpolicy` for the embed iframe. Not a Twitch embed parameter, so it never reaches the URL: the React player applies it to the iframe it renders, and the HTML player reads its own `referrerpolicy` attribute instead.
-`time`
-`string | undefined`
-▸
-Description
-Start position, spelled the way Twitch spells timestamps: `1h30m10s`.
-### Ref
-Forwards its ref to the rendered `<iframe>`. The ref is an [HTMLIFrameElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement). Control playback with the component props and player APIs rather than the iframe ref.

package/docs/reference/use-attach-media.md DELETED Viewed

@@ -1,59 +0,0 @@
-# useAttachMedia
-Hook that attaches an HTML media element to a playback adapter
-## Import
-tsx
-```
-import { useAttachMedia } from "@videojs/react";
-```
-## Usage
-Pass a playback adapter to receive a callback ref for its rendered `<video>` or `<audio>` element.
-tsx
-```
-import { HlsJsAdapter } from "@videojs/hlsjs-video";
-import { useAttachMedia, useMediaInstance } from "@videojs/react";
-function CustomHlsVideo() {
-  const media = useMediaInstance(HlsJsAdapter);
-  const attachRef = useAttachMedia(media);
-  return <video ref={attachRef} />;
-}
-```
-The callback attaches a non-null element to the playback adapter and detaches it when React clears or cleans up the ref.
-## API Reference
-### Parameters
-Parameter
-Type
-Default
-Details
-`media*`
-`EngineAdapter`
-`—`
-▸
-Description
-Playback adapter to attach and detach.
-### Return Value
-`RefCallback<T>`