diff --git a/docs/components/Example.tsx b/docs/components/Example.tsx index 52fc4ecb..34d243db 100644 --- a/docs/components/Example.tsx +++ b/docs/components/Example.tsx @@ -8,10 +8,12 @@ export interface Controller { export interface Props extends ComponentPropsWithoutRef<'iframe'> { hideSource?: boolean; hideDeviceType?: boolean; + // This is for the language selector on the Localization example. + languages?: Record; ref?: Ref | undefined; } -export default function Example({ hideSource, hideDeviceType, ref, ...props }: Props): JSX.Element { +export default function Example({ hideSource, hideDeviceType, languages, ref, ...props }: Props): JSX.Element { const iframeRef = useRef(null); useImperativeHandle(ref, () => { return { @@ -23,6 +25,16 @@ export default function Example({ hideSource, hideDeviceType, ref, ...props }: P const [sourceName, setSourceName] = useState('bigBuckBunny'); const [deviceType, setDeviceType] = useState(''); + const [language, setLanguage] = useState(languages ? Object.keys(languages)[0] : ''); + + // Send message to {showOptions && ( -

+

+ {languages && ( +
+ +
+ )} {!hideSource && (
)} -

+
)} ); diff --git a/docs/examples/custom-ui/_category_.json b/docs/examples/custom-ui/_category_.json new file mode 100644 index 00000000..cc595b59 --- /dev/null +++ b/docs/examples/custom-ui/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Custom UI", + "position": 20, + "collapsible": true, + "collapsed": true, + "description": "Samples demonstrating how to implement a custom UI and modify different components." +} diff --git a/docs/examples/custom-ui/custom-play-button.mdx b/docs/examples/custom-ui/custom-play-button.mdx new file mode 100644 index 00000000..038b5cdb --- /dev/null +++ b/docs/examples/custom-ui/custom-play-button.mdx @@ -0,0 +1,71 @@ +--- +sidebar_position: 6 +sidebar_custom_props: { 'icon': '⏯️' } +slug: /web/examples/custom-play-button +--- + +# Custom play button + +import Example from '../../components/Example'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from '../shared.module.css'; + + + +This sample demonstrates a custom, animated play button. + +
+ Code + ```html showLineNumbers + + + +
+ + + + +
+
+ + + + + + + + + + +
+ + + ``` + + [📜 View full source on GitHub](https://github.com/THEOplayer/web-ui/blob/main/docs/static/open-video-ui/v2/examples/web/custom-play-button/demo.html) + +
diff --git a/docs/examples/custom-ui.mdx b/docs/examples/custom-ui/example.mdx similarity index 93% rename from docs/examples/custom-ui.mdx rename to docs/examples/custom-ui/example.mdx index 20979ef9..f1ca9795 100644 --- a/docs/examples/custom-ui.mdx +++ b/docs/examples/custom-ui/example.mdx @@ -1,16 +1,20 @@ --- -sidebar_position: 20 +sidebar_position: 1 sidebar_custom_props: { 'icon': '▶️' } +slug: /web/examples/custom-ui +sidebar_label: Custom styling --- # Custom UI -import Example from '../components/Example'; +import Example from '../../components/Example'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import styles from './shared.module.css'; +import styles from '../shared.module.css'; +This sample demonstrates a basic custom UI. +
Code ```html showLineNumbers diff --git a/docs/examples/custom-ui/modern.mdx b/docs/examples/custom-ui/modern.mdx new file mode 100644 index 00000000..d6768a68 --- /dev/null +++ b/docs/examples/custom-ui/modern.mdx @@ -0,0 +1,58 @@ +--- +sidebar_position: 5 +sidebar_custom_props: { 'icon': '✨' } +slug: /web/examples/modern +--- + +# Modern UI + +import Example from '../../components/Example'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from '../shared.module.css'; + + + +This sample demonstrates a modern, streaming-service style custom UI: a centered playback "pill" with rewind, play/pause and forward, a full-width seek bar, and rounded translucent control clusters. + +
+ Code + ```html showLineNumbers + +
+
+ + + +
+
+
+ + + +
+ + + + + + + + + + + + + +
+
+ + + + ``` + + [📜 View full source on GitHub](https://github.com/THEOplayer/web-ui/blob/main/docs/static/open-video-ui/v2/examples/web/modern/demo.html) + +
diff --git a/docs/examples/nitflex.mdx b/docs/examples/custom-ui/nitflex.mdx similarity index 70% rename from docs/examples/nitflex.mdx rename to docs/examples/custom-ui/nitflex.mdx index c174bf97..48e04df7 100644 --- a/docs/examples/nitflex.mdx +++ b/docs/examples/custom-ui/nitflex.mdx @@ -1,13 +1,15 @@ --- -sidebar_position: 22 +sidebar_position: 2 sidebar_custom_props: { 'icon': '📺' } +slug: /web/examples/nitflex +sidebar_label: Nitflex theme --- # Custom UI: Nitflex theme -import Example from '../components/Example'; +import Example from '../../components/Example'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import styles from './shared.module.css'; +import styles from '../shared.module.css'; diff --git a/docs/examples/portrait.mdx b/docs/examples/custom-ui/portrait.mdx similarity index 75% rename from docs/examples/portrait.mdx rename to docs/examples/custom-ui/portrait.mdx index a65d73db..fe47296e 100644 --- a/docs/examples/portrait.mdx +++ b/docs/examples/custom-ui/portrait.mdx @@ -1,13 +1,15 @@ --- -sidebar_position: 21 +sidebar_position: 3 sidebar_custom_props: { 'icon': '📱' } +slug: /web/examples/portrait +sidebar_label: Portrait theme --- # Custom UI: Portrait theme -import Example from '../components/Example'; +import Example from '../../components/Example'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import styles from './shared.module.css'; +import styles from '../shared.module.css'; diff --git a/docs/examples/custom-ui/text-tracks.mdx b/docs/examples/custom-ui/text-tracks.mdx new file mode 100644 index 00000000..8a31f7fd --- /dev/null +++ b/docs/examples/custom-ui/text-tracks.mdx @@ -0,0 +1,81 @@ +--- +sidebar_position: 4 +sidebar_custom_props: { 'icon': '💬' } +slug: /web/examples/text-tracks +--- + +# Text tracks and subtitles + +import Example from '../../components/Example'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from '../shared.module.css'; + + + +This example demonstrates the text track components for subtitle selection and styling. + +The settings menu contains four submenus: + +- **Subtitles**: the idiomatic ``, which composes `` and `` for you. +- **Subtitles (custom)**: the same picker built manually from `` and ``. +- **Subtitle appearance**: the pre-built ``, which composes ``, `` and ``. +- **Font color (custom)**: a single style option built manually from `` and ``. + +
+ Code + ```html showLineNumbers + + + + + + + + CC + + + + + + + + + + ``` + + [📜 View full source on GitHub](https://github.com/THEOplayer/web-ui/blob/main/docs/static/open-video-ui/v2/examples/web/text-tracks/demo.html) + +
diff --git a/docs/examples/default-ui/_category_.json b/docs/examples/default-ui/_category_.json new file mode 100644 index 00000000..d6832746 --- /dev/null +++ b/docs/examples/default-ui/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Default UI", + "position": 10, + "collapsible": true, + "collapsed": true, + "description": "Samples demonstrating how to modify the default styling of the player." +} diff --git a/docs/examples/ads.mdx b/docs/examples/default-ui/ads.mdx similarity index 82% rename from docs/examples/ads.mdx rename to docs/examples/default-ui/ads.mdx index 0294d1f6..ef0d200b 100644 --- a/docs/examples/ads.mdx +++ b/docs/examples/default-ui/ads.mdx @@ -1,23 +1,22 @@ --- -sidebar_position: 11 +sidebar_position: 2 sidebar_custom_props: { 'icon': '💰' } +slug: /web/examples/ads --- # Advertisements -The default UI has full support for advertisements. - -During playback, it shows yellow ad markers on the seek bar to indicate the times when the content will be interrupted by an ad. - -While playing an ad, the UI shows ad-specific controls such as a skip button and a countdown. These controls are also mobile-aware, for example a -dedicated clickthrough button replaces the regular clickthrough behavior on desktop. - -import Example from '../components/Example'; +import Example from '../../components/Example'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import styles from './shared.module.css'; +import styles from '../shared.module.css'; +The default UI has full support for advertisements. + +During playback, it shows yellow ad markers on the seek bar to indicate the times when the content will be interrupted by an ad. While playing an ad, the UI shows ad-specific controls such as a skip button and a countdown. These controls are also mobile-aware, for example a +dedicated clickthrough button replaces the regular clickthrough behavior on desktop. +
Code ```js showLineNumbers diff --git a/docs/examples/default-ui.mdx b/docs/examples/default-ui/example.mdx similarity index 77% rename from docs/examples/default-ui.mdx rename to docs/examples/default-ui/example.mdx index ae30a021..352a3976 100644 --- a/docs/examples/default-ui.mdx +++ b/docs/examples/default-ui/example.mdx @@ -1,16 +1,20 @@ --- -sidebar_position: 10 +sidebar_position: 1 sidebar_custom_props: { 'icon': '▶️' } +slug: /web/examples/default-ui +sidebar_label: Default styling --- # Default UI -import Example from '../components/Example'; +import Example from '../../components/Example'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import styles from './shared.module.css'; +import styles from '../shared.module.css'; +This sample demonstrates the default UI of the player without any modifications. +
Code ```html showLineNumbers diff --git a/docs/examples/default-ui/localization.mdx b/docs/examples/default-ui/localization.mdx new file mode 100644 index 00000000..e1525a78 --- /dev/null +++ b/docs/examples/default-ui/localization.mdx @@ -0,0 +1,60 @@ +--- +sidebar_position: 5 +sidebar_custom_props: { 'icon': '🌍' } +slug: /web/examples/localization +--- + +# Localization + +import Example from '../../components/Example'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from '../shared.module.css'; + + + +This sample demonstrates localizing the UI and switching language at runtime. A locale is registered with `addLocale`, and the language is selected through the `lang` attribute. Use the dropdown below the player to switch between English and Dutch. See also the [localization guide](../../guides/localization.md). + +
+ Code + ```html showLineNumbers + + + + + + + + ``` + + [📜 View full source on GitHub](https://github.com/THEOplayer/web-ui/blob/main/docs/static/open-video-ui/v2/examples/web/localization/demo.html) + +
diff --git a/docs/examples/default-ui/remove-controls.mdx b/docs/examples/default-ui/remove-controls.mdx new file mode 100644 index 00000000..1b7ec785 --- /dev/null +++ b/docs/examples/default-ui/remove-controls.mdx @@ -0,0 +1,36 @@ +--- +sidebar_position: 4 +sidebar_custom_props: { 'icon': '✂️' } +slug: /web/examples/remove-controls +--- + +# Removing controls + +import Example from '../../components/Example'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from '../shared.module.css'; + + + +This sample demonstrates how to remove a specific control from the default UI. The default UI exposes its internal controls as [CSS shadow parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), so you can hide any of them with `::part()`. Here, we hide the seek bar and keep the rest. + +
+ Code + ```html showLineNumbers + + + + ``` + + [📜 View full source on GitHub](https://github.com/THEOplayer/web-ui/blob/main/docs/static/open-video-ui/v2/examples/web/remove-controls/demo.html) + +
diff --git a/docs/examples/styling.mdx b/docs/examples/default-ui/styling.mdx similarity index 88% rename from docs/examples/styling.mdx rename to docs/examples/default-ui/styling.mdx index 08a9b13d..108d4929 100644 --- a/docs/examples/styling.mdx +++ b/docs/examples/default-ui/styling.mdx @@ -1,13 +1,14 @@ --- -sidebar_position: 12 +sidebar_position: 3 sidebar_custom_props: { 'icon': '🎨' } +slug: /web/examples/styling --- # Styling the default UI -import StylableExample from '../components/StylableExample'; +import StylableExample from '../../components/StylableExample'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import styles from './shared.module.css'; +import styles from '../shared.module.css'; ## Christmas theme diff --git a/docs/getting-started.mdx b/docs/getting-started.mdx index 77d96c0d..75001ee4 100644 --- a/docs/getting-started.mdx +++ b/docs/getting-started.mdx @@ -84,7 +84,7 @@ sidebar_custom_props: { 'icon': '🚀' } ui.player.addEventListener('playing', () => console.log('THEOplayer is now playing')); ``` -See [this page](examples/default-ui.mdx) for a complete example. +See [this page](examples/default-ui/example.mdx) for a complete example. ### Custom UI @@ -107,7 +107,7 @@ If you want to fully customize your video player layout, you can use a ` ``` -See [this page](examples/custom-ui.mdx) for a complete example. +See [this page](examples/custom-ui/example.mdx) for a complete example. ### Legacy browser support diff --git a/docs/react/examples/custom-ui/_category_.json b/docs/react/examples/custom-ui/_category_.json new file mode 100644 index 00000000..fe58d79a --- /dev/null +++ b/docs/react/examples/custom-ui/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Custom UI", + "position": 2, + "collapsible": true, + "collapsed": true, + "description": "Samples demonstrating how to implement a custom UI and modify different components." +} diff --git a/docs/react/examples/custom-ui/custom-play-button.mdx b/docs/react/examples/custom-ui/custom-play-button.mdx new file mode 100644 index 00000000..b057d34e --- /dev/null +++ b/docs/react/examples/custom-ui/custom-play-button.mdx @@ -0,0 +1,70 @@ +--- +sidebar_position: 4 +sidebar_custom_props: { 'icon': '⏯️' } +slug: /react/examples/custom-play-button +--- + +# Custom play button + +import Example from '../../../components/Example'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from '../shared.module.css'; + + + +This sample demonstrates a custom, animated play button. The play/pause icons are overridden through the button's named slots, and the button is styled as a circular badge that gently pulses while the player is paused (the play button reflects its paused state as a `paused` attribute, which we target with CSS). + +
+ Code + + ```jsx + import * as THEOplayerReactUI from '@theoplayer/react-ui'; + + // In your stylesheet: + // .big-play { border-radius: 50%; padding: 32px; background: rgba(124, 58, 237, 0.45); backdrop-filter: blur(6px); } + // .big-play svg { width: 64px; height: 64px; } + // .big-play:hover { animation: pulse 3s ease-in-out infinite; } /* only pulse on hover */ + // @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } + + const configuration = { + libraryLocation: '/path/to/theoplayer/', + license: 'your_theoplayer_license' + }; + + const source = { + sources: { src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8' }, + metadata: { title: 'Big Buck Bunny' } + }; + + const App = () => { + return ( + + + + + + + + + } + bottomChrome={ + + + + + + + } + error={} + /> + ); + }; + ``` + + [📜 View full source on GitHub](https://github.com/THEOplayer/web-ui/blob/main/docs/static/open-video-ui/v2/examples/react/custom-play-button/demo.html) + +
diff --git a/docs/react/examples/custom-ui.mdx b/docs/react/examples/custom-ui/example.mdx similarity index 93% rename from docs/react/examples/custom-ui.mdx rename to docs/react/examples/custom-ui/example.mdx index 7e0eb011..71d5ecff 100644 --- a/docs/react/examples/custom-ui.mdx +++ b/docs/react/examples/custom-ui/example.mdx @@ -1,17 +1,20 @@ --- -sidebar_position: 2 +sidebar_position: 1 sidebar_custom_props: { 'icon': '▶️' } slug: /react/examples/custom-ui +sidebar_label: Custom styling --- # Custom UI -import Example from '../../components/Example'; +import Example from '../../../components/Example'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import styles from './shared.module.css'; +import styles from '../shared.module.css'; +This sample demonstrates a basic custom UI. +
Code diff --git a/docs/react/examples/custom-ui/modern.mdx b/docs/react/examples/custom-ui/modern.mdx new file mode 100644 index 00000000..8ac5a0a6 --- /dev/null +++ b/docs/react/examples/custom-ui/modern.mdx @@ -0,0 +1,79 @@ +--- +sidebar_position: 3 +sidebar_custom_props: { 'icon': '✨' } +slug: /react/examples/modern +--- + +# Modern UI + +import Example from '../../../components/Example'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from '../shared.module.css'; + + + +This sample demonstrates a modern, streaming-service style custom UI: a centered playback pill with rewind, play/pause and forward, a full-width seek bar, and rounded translucent control clusters. + +
+ Code + + ```jsx + import * as THEOplayerReactUI from '@theoplayer/react-ui'; + + const configuration = { + libraryLocation: '/path/to/theoplayer/', + license: 'your_theoplayer_license' + }; + + const source = { + sources: { src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8' }, + metadata: { title: 'Big Buck Bunny' } + }; + + const Spacer = () => ; + + const App = () => { + return ( + + + + + + } + centeredLoading={} + bottomChrome={ +
+ + + +
+ + + + + + + + + + + + + +
+
+ } + menu={} + error={} + /> + ); + }; + ``` + + [📜 View full source on GitHub](https://github.com/THEOplayer/web-ui/blob/main/docs/static/open-video-ui/v2/examples/react/modern/demo.html) + +
diff --git a/docs/react/examples/custom-ui/text-tracks.mdx b/docs/react/examples/custom-ui/text-tracks.mdx new file mode 100644 index 00000000..228c3a34 --- /dev/null +++ b/docs/react/examples/custom-ui/text-tracks.mdx @@ -0,0 +1,153 @@ +--- +sidebar_position: 2 +sidebar_custom_props: { 'icon': '💬' } +slug: /react/examples/text-tracks +--- + +# Text tracks and subtitles + +import Example from '../../../components/Example'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from '../shared.module.css'; + + + +This example demonstrates the text track components for subtitle selection and styling. + +The settings menu contains four submenus: + +- **Subtitles**: the idiomatic `TrackRadioGroup` with `trackType="subtitles"` and `show-off`, which composes `TextTrackOffRadioButton` and `TextTrackRadioButton` for you. +- **Subtitles (custom)**: the same picker built manually from `TextTrackOffRadioButton` and `TextTrackRadioButton`. +- **Subtitle appearance**: the pre-built `TextTrackStyleMenu`, which composes `TextTrackStyleDisplay`, `TextTrackStyleRadioGroup` and `TextTrackStyleResetButton`. +- **Font color (custom)**: a single style option built manually from `TextTrackStyleRadioGroup` and `TextTrackStyleResetButton`. + +
+ Code + + ```jsx + import * as THEOplayerReactUI from '@theoplayer/react-ui'; + import { useContext, useEffect, useState } from 'react'; + + const configuration = { + libraryLocation: '/path/to/theoplayer/', + license: 'your_theoplayer_license' + }; + + const source = { + sources: { src: 'https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8' }, + metadata: { title: "Elephant's Dream" } + }; + + // A hook returning the player's subtitle text tracks. + const useSubtitleTracks = () => { + const player = useContext(THEOplayerReactUI.PlayerContext); + const [tracks, setTracks] = useState([]); + useEffect(() => { + if (!player) return; + const textTracks = player.textTracks; + const update = () => { + setTracks(textTracks.filter((t) => t.kind === 'subtitles' || t.kind === 'captions')); + }; + update(); + textTracks.addEventListener(['addtrack', 'removetrack'], update); + return () => textTracks.removeEventListener(['addtrack', 'removetrack'], update); + }, [player]); + return { player, tracks }; + }; + + // A subtitle picker built from the low-level TextTrackOffRadioButton and TextTrackRadioButton. + // In practice, prefer , which composes these for you. + const CustomSubtitlePicker = () => { + const { player, tracks } = useSubtitleTracks(); + return ( + + + {tracks.map((track) => ( + + ))} + + ); + }; + + const FONT_COLORS = [ + { label: 'Default', value: '' }, + { label: 'White', value: 'rgb(255,255,255)' }, + { label: 'Yellow', value: 'rgb(255,255,0)' }, + { label: 'Green', value: 'rgb(0,255,0)' }, + { label: 'Cyan', value: 'rgb(0,255,255)' }, + { label: 'Blue', value: 'rgb(0,0,255)' }, + { label: 'Magenta', value: 'rgb(255,0,255)' }, + { label: 'Red', value: 'rgb(255,0,0)' }, + { label: 'Black', value: 'rgb(0,0,0)' } + ]; + + const App = () => { + return ( + + + + + + + CC + + + } + menu={ + <> + + + + + Select + + + + + + + {/* Idiomatic subtitle picker using TrackRadioGroup. */} + + + {/* Manual subtitle picker using TextTrackOffRadioButton and TextTrackRadioButton. */} + + + {/* Pre-built subtitle style menu. */} + + + } + error={} + /> + ); + }; + ``` + + [📜 View full source on GitHub](https://github.com/THEOplayer/web-ui/blob/main/docs/static/open-video-ui/v2/examples/react/text-tracks/demo.html) + +
diff --git a/docs/react/examples/default-ui/_category_.json b/docs/react/examples/default-ui/_category_.json new file mode 100644 index 00000000..6d1f7dac --- /dev/null +++ b/docs/react/examples/default-ui/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Default UI", + "position": 1, + "collapsible": true, + "collapsed": true, + "description": "Samples demonstrating how to modify the default styling of the player." +} diff --git a/docs/react/examples/default-ui.mdx b/docs/react/examples/default-ui/example.mdx similarity index 82% rename from docs/react/examples/default-ui.mdx rename to docs/react/examples/default-ui/example.mdx index 9e71d8bf..26d2fee9 100644 --- a/docs/react/examples/default-ui.mdx +++ b/docs/react/examples/default-ui/example.mdx @@ -2,16 +2,19 @@ sidebar_position: 1 sidebar_custom_props: { 'icon': '▶️' } slug: /react/examples/default-ui +sidebar_label: Default styling --- # Default UI -import Example from '../../components/Example'; +import Example from '../../../components/Example'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import styles from './shared.module.css'; +import styles from '../shared.module.css'; +This sample demonstrates the default UI of the player without any modifications. +
Code diff --git a/docs/react/examples/default-ui/localization.mdx b/docs/react/examples/default-ui/localization.mdx new file mode 100644 index 00000000..19d84675 --- /dev/null +++ b/docs/react/examples/default-ui/localization.mdx @@ -0,0 +1,67 @@ +--- +sidebar_position: 3 +sidebar_custom_props: { 'icon': '🌍' } +slug: /react/examples/localization +--- + +# Localization + +import Example from '../../../components/Example'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from '../shared.module.css'; + + + +This sample demonstrates localizing the UI and switching language at runtime. A locale is registered with `addLocale`, and the language is selected through the `lang` prop. Use the dropdown below the player to switch between English and Dutch. See also the [localization guide](../../guides/localization.md). + +
+ Code + + ```jsx + import { useState } from 'react'; + import { DefaultUI, addLocale } from '@theoplayer/react-ui'; + + const configuration = { + libraryLocation: '/path/to/theoplayer/', + license: 'your_theoplayer_license' + }; + + const source = { + sources: { src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8' }, + metadata: { title: 'Big Buck Bunny' } + }; + + // Register the Dutch locale. Untranslated messages fall back to the built-in English defaults. + addLocale('nl', { + playAria: 'afspelen', + pauseAria: 'pauzeren', + languageMenuHeading: 'Taal', + subtitleMenuHeading: 'Ondertitels', + subtitleOff: 'Uit', + settingsMenuHeading: 'Instellingen' + // ... + }); + + const App = () => { + const [lang, setLang] = useState('en'); + return ( + <> + + + + ); + }; + ``` + + [📜 View full source on GitHub](https://github.com/THEOplayer/web-ui/blob/main/docs/static/open-video-ui/v2/examples/react/localization/demo.html) + +
diff --git a/docs/react/examples/default-ui/remove-controls.mdx b/docs/react/examples/default-ui/remove-controls.mdx new file mode 100644 index 00000000..758fbfb0 --- /dev/null +++ b/docs/react/examples/default-ui/remove-controls.mdx @@ -0,0 +1,46 @@ +--- +sidebar_position: 2 +sidebar_custom_props: { 'icon': '✂️' } +slug: /react/examples/remove-controls +--- + +# Removing controls + +import Example from '../../../components/Example'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from '../shared.module.css'; + + + +This sample demonstrates how to remove a specific control from the default UI. The default UI exposes its internal controls as [CSS shadow parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), so you can hide any of them with `::part()` — here we hide the seek bar and keep the rest. + +
+ Code + + ```jsx + import { DefaultUI } from '@theoplayer/react-ui'; + + // In your stylesheet, hide the seek bar by targeting its shadow part: + // + // theoplayer-default-ui::part(time-range) { + // display: none; + // } + + const configuration = { + libraryLocation: '/path/to/theoplayer/', + license: 'your_theoplayer_license' + }; + + const source = { + sources: { src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8' }, + metadata: { title: 'Big Buck Bunny' } + }; + + const App = () => { + return ; + }; + ``` + + [📜 View full source on GitHub](https://github.com/THEOplayer/web-ui/blob/main/docs/static/open-video-ui/v2/examples/react/remove-controls/demo.html) + +
diff --git a/docs/react/getting-started.mdx b/docs/react/getting-started.mdx index af7832d8..4446c65b 100644 --- a/docs/react/getting-started.mdx +++ b/docs/react/getting-started.mdx @@ -59,7 +59,7 @@ const App = () => { }; ``` -See [this page](examples/default-ui.mdx) for a complete example. +See [this page](examples/default-ui/example.mdx) for a complete example. ### Custom UI @@ -101,7 +101,7 @@ const App = () => { }; ``` -See [this page](examples/custom-ui.mdx) for a complete example. +See [this page](examples/custom-ui/example.mdx) for a complete example. ### Legacy browser support diff --git a/docs/static/open-video-ui/v2/examples/react/custom-play-button/demo.html b/docs/static/open-video-ui/v2/examples/react/custom-play-button/demo.html new file mode 100644 index 00000000..d852970e --- /dev/null +++ b/docs/static/open-video-ui/v2/examples/react/custom-play-button/demo.html @@ -0,0 +1,186 @@ + + + + + Custom play button with React + + + + + + + + + + + + + + +
+ + + + diff --git a/docs/static/open-video-ui/v2/examples/react/custom-ui/demo.html b/docs/static/open-video-ui/v2/examples/react/custom-ui/demo.html index e465e668..d07d5659 100644 --- a/docs/static/open-video-ui/v2/examples/react/custom-ui/demo.html +++ b/docs/static/open-video-ui/v2/examples/react/custom-ui/demo.html @@ -59,8 +59,8 @@ - +
diff --git a/docs/static/open-video-ui/v2/examples/react/default-ui/demo.html b/docs/static/open-video-ui/v2/examples/react/default-ui/demo.html index a2808265..cdafeaa7 100644 --- a/docs/static/open-video-ui/v2/examples/react/default-ui/demo.html +++ b/docs/static/open-video-ui/v2/examples/react/default-ui/demo.html @@ -34,8 +34,8 @@ - +
diff --git a/docs/static/open-video-ui/v2/examples/react/localization/demo.html b/docs/static/open-video-ui/v2/examples/react/localization/demo.html new file mode 100644 index 00000000..9bc8fcb8 --- /dev/null +++ b/docs/static/open-video-ui/v2/examples/react/localization/demo.html @@ -0,0 +1,144 @@ + + + + + Localization with React + + + + + + + + + + + + + + +
+ + + + diff --git a/docs/static/open-video-ui/v2/examples/react/modern/demo.html b/docs/static/open-video-ui/v2/examples/react/modern/demo.html new file mode 100644 index 00000000..caf507e5 --- /dev/null +++ b/docs/static/open-video-ui/v2/examples/react/modern/demo.html @@ -0,0 +1,224 @@ + + + + + Modern UI with React + + + + + + + + + + + + + + +
+ + + + diff --git a/docs/static/open-video-ui/v2/examples/react/remove-controls/demo.html b/docs/static/open-video-ui/v2/examples/react/remove-controls/demo.html new file mode 100644 index 00000000..49fc63db --- /dev/null +++ b/docs/static/open-video-ui/v2/examples/react/remove-controls/demo.html @@ -0,0 +1,125 @@ + + + + + Removing controls with React + + + + + + + + + + + + + + +
+ + + + diff --git a/docs/static/open-video-ui/v2/examples/react/text-tracks/demo.html b/docs/static/open-video-ui/v2/examples/react/text-tracks/demo.html new file mode 100644 index 00000000..90d7e22e --- /dev/null +++ b/docs/static/open-video-ui/v2/examples/react/text-tracks/demo.html @@ -0,0 +1,320 @@ + + + + + Text Tracks with React + + + + + + + + + + + + + + + +
+ + + + diff --git a/docs/static/open-video-ui/v2/examples/react/utils.js b/docs/static/open-video-ui/v2/examples/react/utils.js index 1ad040eb..72d10587 100644 --- a/docs/static/open-video-ui/v2/examples/react/utils.js +++ b/docs/static/open-video-ui/v2/examples/react/utils.js @@ -5,6 +5,7 @@ import { useSyncExternalStore } from 'react'; let source = null; let deviceType = null; +let language = null; const listeners = []; function subscribe(cb) { @@ -23,6 +24,8 @@ function subscribe(cb) { * Overrides the player's device type. * - `{ type: "source", source: SourceDescription }` * Changes the player's source. + * - `{ type: "language", language: string }` + * Sets the UI language. */ window.addEventListener('message', (event) => { if (event.origin !== location.origin) return; @@ -39,6 +42,11 @@ window.addEventListener('message', (event) => { listeners.forEach((listener) => listener()); break; } + case 'language': { + language = data.language; + listeners.forEach((listener) => listener()); + break; + } } }); @@ -63,3 +71,14 @@ export function useSourceFromParent() { () => undefined ); } + +/** + * Returns the UI language given by the