From a3ee2c37f0febe9eaedf619a5158a52a80f62f84 Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias.buelens@theoplayer.com>
Date: Tue, 3 Dec 2024 10:56:43 +0100
Subject: [PATCH 1/2] Use Elephant's Dream in custom component guide

The Big Buck Bunny stream doesn't specify a resolution for its variants,
which makes it rather useless for demonstrating a custom quality label
component.
---
 .../v1/guides/web/custom-component/my-play-button-step1.html    | 2 +-
 .../v1/guides/web/custom-component/my-play-button-step2.html    | 2 +-
 .../v1/guides/web/custom-component/my-quality-label-step1.html  | 2 +-
 .../v1/guides/web/custom-component/my-quality-label-step2.html  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/static/open-video-ui/v1/guides/web/custom-component/my-play-button-step1.html b/docs/static/open-video-ui/v1/guides/web/custom-component/my-play-button-step1.html
index 6b43fbe..f961838 100644
--- a/docs/static/open-video-ui/v1/guides/web/custom-component/my-play-button-step1.html
+++ b/docs/static/open-video-ui/v1/guides/web/custom-component/my-play-button-step1.html
@@ -39,7 +39,7 @@
         -->
         <theoplayer-ui
             configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../../theoplayer-license.txt"}'
-            source='{"sources":{"src":"https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8"},"textTracks":[{"default":true,"src":"https://cdn.theoplayer.com/video/big_buck_bunny/thumbnails.vtt","label":"thumbnails","kind":"metadata"}]}'
+            source='{"sources":{"src":"https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8"},"textTracks":[{"default":true,"src":"https://cdn.theoplayer.com/video/elephants-dream/thumbnails.vtt","label":"thumbnails","kind":"metadata"}]}'
         >
             <my-play-button slot="centered-chrome"></my-play-button>
         </theoplayer-ui>
diff --git a/docs/static/open-video-ui/v1/guides/web/custom-component/my-play-button-step2.html b/docs/static/open-video-ui/v1/guides/web/custom-component/my-play-button-step2.html
index 71c32fe..f586114 100644
--- a/docs/static/open-video-ui/v1/guides/web/custom-component/my-play-button-step2.html
+++ b/docs/static/open-video-ui/v1/guides/web/custom-component/my-play-button-step2.html
@@ -39,7 +39,7 @@
         -->
         <theoplayer-ui
             configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../../theoplayer-license.txt"}'
-            source='{"sources":{"src":"https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8"},"textTracks":[{"default":true,"src":"https://cdn.theoplayer.com/video/big_buck_bunny/thumbnails.vtt","label":"thumbnails","kind":"metadata"}]}'
+            source='{"sources":{"src":"https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8"},"textTracks":[{"default":true,"src":"https://cdn.theoplayer.com/video/elephants-dream/thumbnails.vtt","label":"thumbnails","kind":"metadata"}]}'
         >
             <my-play-button slot="centered-chrome"></my-play-button>
         </theoplayer-ui>
diff --git a/docs/static/open-video-ui/v1/guides/web/custom-component/my-quality-label-step1.html b/docs/static/open-video-ui/v1/guides/web/custom-component/my-quality-label-step1.html
index a38f017..989b883 100644
--- a/docs/static/open-video-ui/v1/guides/web/custom-component/my-quality-label-step1.html
+++ b/docs/static/open-video-ui/v1/guides/web/custom-component/my-quality-label-step1.html
@@ -39,7 +39,7 @@
         -->
         <theoplayer-ui
             configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../../theoplayer-license.txt"}'
-            source='{"sources":{"src":"https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8"},"textTracks":[{"default":true,"src":"https://cdn.theoplayer.com/video/big_buck_bunny/thumbnails.vtt","label":"thumbnails","kind":"metadata"}]}'
+            source='{"sources":{"src":"https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8"},"textTracks":[{"default":true,"src":"https://cdn.theoplayer.com/video/elephants-dream/thumbnails.vtt","label":"thumbnails","kind":"metadata"}]}'
         >
             <theoplayer-control-bar>
                 <!-- A seek bar -->
diff --git a/docs/static/open-video-ui/v1/guides/web/custom-component/my-quality-label-step2.html b/docs/static/open-video-ui/v1/guides/web/custom-component/my-quality-label-step2.html
index accea68..ec75240 100644
--- a/docs/static/open-video-ui/v1/guides/web/custom-component/my-quality-label-step2.html
+++ b/docs/static/open-video-ui/v1/guides/web/custom-component/my-quality-label-step2.html
@@ -39,7 +39,7 @@
         -->
         <theoplayer-ui
             configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../../theoplayer-license.txt"}'
-            source='{"sources":{"src":"https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8"},"textTracks":[{"default":true,"src":"https://cdn.theoplayer.com/video/big_buck_bunny/thumbnails.vtt","label":"thumbnails","kind":"metadata"}]}'
+            source='{"sources":{"src":"https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8"},"textTracks":[{"default":true,"src":"https://cdn.theoplayer.com/video/elephants-dream/thumbnails.vtt","label":"thumbnails","kind":"metadata"}]}'
         >
             <theoplayer-control-bar>
                 <!-- A seek bar -->

From 596c4bd70d79e8422854714b7c90e4a58c0c06a7 Mon Sep 17 00:00:00 2001
From: Mattias Buelens <mattias.buelens@theoplayer.com>
Date: Tue, 3 Dec 2024 10:59:14 +0100
Subject: [PATCH 2/2] Hide source selector in custom component guide

---
 docs/guides/custom-component.mdx | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/docs/guides/custom-component.mdx b/docs/guides/custom-component.mdx
index c137744..18de68e 100644
--- a/docs/guides/custom-component.mdx
+++ b/docs/guides/custom-component.mdx
@@ -59,7 +59,12 @@ Now add your new button to your custom UI. In our example, we'll place it in the
 
 It should look something like this:
 
-<Example className={styles.player} src={useBaseUrl('/open-video-ui/v1/guides/web/custom-component/my-play-button-step1.html')} hideDeviceType />
+<Example
+    className={styles.player}
+    src={useBaseUrl('/open-video-ui/v1/guides/web/custom-component/my-play-button-step1.html')}
+    hideDeviceType
+    hideSource
+/>
 
 Try clicking the "Play" button in the middle of the screen.
 You should see an alert window popping up saying `My play button was clicked!`.
@@ -114,7 +119,12 @@ You can also update the text content of your button to reflect the new state:
 
 It should look something like this:
 
-<Example className={styles.player} src={useBaseUrl('/open-video-ui/v1/guides/web/custom-component/my-play-button-step2.html')} hideDeviceType />
+<Example
+    className={styles.player}
+    src={useBaseUrl('/open-video-ui/v1/guides/web/custom-component/my-play-button-step2.html')}
+    hideDeviceType
+    hideSource
+/>
 
 Try clicking the "Play" button in the middle of the screen. The player starts playing!<br/>
 Clicking it again should pause the player.
@@ -180,7 +190,12 @@ Now add your new label to your custom UI. In our example, we'll place it inside
 
 It should look something like this:
 
-<Example className={styles.player} src={useBaseUrl('/open-video-ui/v1/guides/web/custom-component/my-quality-label-step1.html')} hideDeviceType />
+<Example
+    className={styles.player}
+    src={useBaseUrl('/open-video-ui/v1/guides/web/custom-component/my-quality-label-step1.html')}
+    hideDeviceType
+    hideSource
+/>
 
 ### Step 2: Listen to quality changes
 
@@ -207,7 +222,12 @@ Right now, the quality label is static, it doesn't actually update when the play
 
 It should look something like this:
 
-<Example className={styles.player} src={useBaseUrl('/open-video-ui/v1/guides/web/custom-component/my-quality-label-step2.html')} hideDeviceType />
+<Example
+    className={styles.player}
+    src={useBaseUrl('/open-video-ui/v1/guides/web/custom-component/my-quality-label-step2.html')}
+    hideDeviceType
+    hideSource
+/>
 
 Try changing the active quality by clicking the ⚙️ (Settings) button, and changing "Automatic" to a specific quality.
 You should see your custom label update to show the height of the new quality.