From 2d3d03215d34b3083baf2a32b985f841301a631c Mon Sep 17 00:00:00 2001 From: ceyhun-o Date: Thu, 6 Aug 2026 14:33:19 +0200 Subject: [PATCH 1/9] Group examples into Default UI and Custom UI categories --- docs/examples/custom-ui/_category_.json | 6 ++++++ .../{custom-ui.mdx => custom-ui/example.mdx} | 10 +++++++--- docs/examples/{ => custom-ui}/nitflex.mdx | 8 +++++--- docs/examples/{ => custom-ui}/portrait.mdx | 8 +++++--- docs/examples/default-ui/_category_.json | 6 ++++++ docs/examples/{ => default-ui}/ads.mdx | 19 +++++++++---------- .../example.mdx} | 10 +++++++--- docs/examples/{ => default-ui}/styling.mdx | 7 ++++--- docs/getting-started.mdx | 4 ++-- docs/react/examples/custom-ui/_category_.json | 6 ++++++ .../{custom-ui.mdx => custom-ui/example.mdx} | 9 ++++++--- .../react/examples/default-ui/_category_.json | 6 ++++++ .../example.mdx} | 7 +++++-- docs/react/getting-started.mdx | 4 ++-- 14 files changed, 76 insertions(+), 34 deletions(-) create mode 100644 docs/examples/custom-ui/_category_.json rename docs/examples/{custom-ui.mdx => custom-ui/example.mdx} (93%) rename docs/examples/{ => custom-ui}/nitflex.mdx (70%) rename docs/examples/{ => custom-ui}/portrait.mdx (75%) create mode 100644 docs/examples/default-ui/_category_.json rename docs/examples/{ => default-ui}/ads.mdx (82%) rename docs/examples/{default-ui.mdx => default-ui/example.mdx} (77%) rename docs/examples/{ => default-ui}/styling.mdx (88%) create mode 100644 docs/react/examples/custom-ui/_category_.json rename docs/react/examples/{custom-ui.mdx => custom-ui/example.mdx} (93%) create mode 100644 docs/react/examples/default-ui/_category_.json rename docs/react/examples/{default-ui.mdx => default-ui/example.mdx} (82%) diff --git a/docs/examples/custom-ui/_category_.json b/docs/examples/custom-ui/_category_.json new file mode 100644 index 00000000..c252cf09 --- /dev/null +++ b/docs/examples/custom-ui/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Custom UI", + "position": 20, + "collapsible": true, + "collapsed": true +} 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/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/default-ui/_category_.json b/docs/examples/default-ui/_category_.json new file mode 100644 index 00000000..770fb4d4 --- /dev/null +++ b/docs/examples/default-ui/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Default UI", + "position": 10, + "collapsible": true, + "collapsed": true +} 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/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..bac55b15 --- /dev/null +++ b/docs/react/examples/custom-ui/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Custom UI", + "position": 2, + "collapsible": true, + "collapsed": true +} 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/default-ui/_category_.json b/docs/react/examples/default-ui/_category_.json new file mode 100644 index 00000000..85bc9f7f --- /dev/null +++ b/docs/react/examples/default-ui/_category_.json @@ -0,0 +1,6 @@ +{ + "label": "Default UI", + "position": 1, + "collapsible": true, + "collapsed": true +} 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/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 From 7e4602ebcf723caf92ff0d87c65cb868b2b04d53 Mon Sep 17 00:00:00 2001 From: ceyhun-o Date: Thu, 6 Aug 2026 14:35:50 +0200 Subject: [PATCH 2/9] Add a text tracks menu example --- docs/examples/custom-ui/text-tracks.mdx | 81 +++++ docs/react/examples/custom-ui/text-tracks.mdx | 153 +++++++++ .../v2/examples/react/text-tracks/demo.html | 320 ++++++++++++++++++ .../v2/examples/web/text-tracks/demo.html | 220 ++++++++++++ 4 files changed, 774 insertions(+) create mode 100644 docs/examples/custom-ui/text-tracks.mdx create mode 100644 docs/react/examples/custom-ui/text-tracks.mdx create mode 100644 docs/static/open-video-ui/v2/examples/react/text-tracks/demo.html create mode 100644 docs/static/open-video-ui/v2/examples/web/text-tracks/demo.html 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/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/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..cd596de9 --- /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/web/text-tracks/demo.html b/docs/static/open-video-ui/v2/examples/web/text-tracks/demo.html new file mode 100644 index 00000000..54f6bb06 --- /dev/null +++ b/docs/static/open-video-ui/v2/examples/web/text-tracks/demo.html @@ -0,0 +1,220 @@ + + + + + Text Tracks + + + + + + + + + + + + + + + Elephant's Dream + + + +
+ +
+
+ + + + + + + + + + + CC + + +
+ + + + + + + + + + + + + From f1870e80010a3464ad03c1798cae9171d985d1fb Mon Sep 17 00:00:00 2001 From: ceyhun-o Date: Thu, 6 Aug 2026 14:36:57 +0200 Subject: [PATCH 3/9] Add an example for removing controls --- docs/examples/default-ui/remove-controls.mdx | 36 +++++ .../examples/default-ui/remove-controls.mdx | 46 +++++++ .../examples/react/remove-controls/demo.html | 125 ++++++++++++++++++ .../v2/examples/web/remove-controls/demo.html | 54 ++++++++ 4 files changed, 261 insertions(+) create mode 100644 docs/examples/default-ui/remove-controls.mdx create mode 100644 docs/react/examples/default-ui/remove-controls.mdx create mode 100644 docs/static/open-video-ui/v2/examples/react/remove-controls/demo.html create mode 100644 docs/static/open-video-ui/v2/examples/web/remove-controls/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/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/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..0598f3bd --- /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/web/remove-controls/demo.html b/docs/static/open-video-ui/v2/examples/web/remove-controls/demo.html new file mode 100644 index 00000000..1e9cf1b1 --- /dev/null +++ b/docs/static/open-video-ui/v2/examples/web/remove-controls/demo.html @@ -0,0 +1,54 @@ + + + + + Removing controls + + + + + + + + + + + + + + + From b806abd9bbb29e8d98b19141aeaf1a8fbdac3e40 Mon Sep 17 00:00:00 2001 From: ceyhun-o Date: Thu, 6 Aug 2026 14:38:13 +0200 Subject: [PATCH 4/9] Add a localization example --- docs/components/Example.tsx | 30 +++- docs/examples/default-ui/localization.mdx | 60 ++++++++ .../examples/default-ui/localization.mdx | 67 ++++++++ .../v2/examples/react/localization/demo.html | 144 ++++++++++++++++++ .../open-video-ui/v2/examples/react/utils.js | 19 +++ .../v2/examples/web/localization/demo.html | 85 +++++++++++ .../open-video-ui/v2/examples/web/utils.js | 7 + 7 files changed, 410 insertions(+), 2 deletions(-) create mode 100644 docs/examples/default-ui/localization.mdx create mode 100644 docs/react/examples/default-ui/localization.mdx create mode 100644 docs/static/open-video-ui/v2/examples/react/localization/demo.html create mode 100644 docs/static/open-video-ui/v2/examples/web/localization/demo.html diff --git a/docs/components/Example.tsx b/docs/components/Example.tsx index 52fc4ecb..4addf577 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 && (