@videojs/react 10.0.0-beta.30 → 10.0.0-beta.31

package/docs/README.md

@@ -1,6 +1,6 @@
 # @videojs/react documentation
 
-Bundled markdown documentation for `@videojs/react` v10.0.0-beta.30.
+Bundled markdown documentation for `@videojs/react` v10.0.0-beta.31.
 
 Start at [`./llms.txt`](./llms.txt) — it's the structured index of every page in this directory.
 

package/docs/concepts/media-sources.md

@@ -138,16 +138,40 @@ options for the browser’s own HLS support (today, [DRM](#licensing-one-engine-
 
 `engine.vimeo`
 
-`VimeoVideo`
+[VimeoVideo](../reference/vimeo-video.md)
 
 [Vimeo embed parameters](https://developer.vimeo.com/player/sdk/embed)
 
 `engine.youtube`
 
-`YouTubeVideo`
+[YouTubeVideo](../reference/youtube-video.md)
 
 [YouTube player parameters](https://developer.chrome.com/docs/youtube/iframe_api_reference#Parameters)
 
+`engine.cloudflare`
+
+[CloudflareVideo](../reference/cloudflare-video.md)
+
+[Stream player parameters](https://developers.cloudflare.com/stream/viewing-videos/using-the-stream-player/)
+
+`engine.spotify`
+
+[SpotifyAudio](../reference/spotify-audio.md)
+
+[Spotify embed options](https://developer.spotify.com/documentation/embeds)
+
+`engine.tiktok`
+
+[TikTokVideo](../reference/tiktok-video.md)
+
+[TikTok player parameters](https://developers.tiktok.com/doc/embed-player)
+
+`engine.twitch`
+
+[TwitchVideo](../reference/twitch-video.md)
+
+[Twitch embed parameters](https://dev.twitch.tv/docs/embed/video-and-clips/)
+
 Naming the engine rather than using one generic key matters where an element has more than one to choose from. `HlsJsVideo` plays through hls.js or through the browser depending on the platform and `preferPlayback`, and only one of them runs — so a single source can describe both paths without either engine reading the other’s options.
 
 hls.js reads its options when the engine is constructed, so changing them tears down the engine and builds a new one:

package/docs/concepts/skins.md

@@ -118,7 +118,9 @@ function SettingsMenu(): ReactNode {
                     <QualityIcon className="media-icon" />
                     <span>{t(qualityText)}</span>
                     <span className="media-menu__hint">
-                      <span className="media-menu__hint-label">{quality.selectedLabel}</span>
+                      <bdi dir="auto" className="media-menu__hint-label">
+                        {quality.selectedLabel}
+                      </bdi>
                       <MenuChevron />
                     </span>
                   </div>
@@ -135,10 +137,10 @@ function SettingsMenu(): ReactNode {
                   aria-label={t(qualityText)}
                   renderItem={(props, item) => (
                     <Menu.RadioItem {...props} className="media-menu__item">
-                      <span>
+                      <bdi dir="auto">
                         {item.label}
                         {item.tier ? <sup className="media-menu__tier">{item.tier}</sup> : null}
-                      </span>
+                      </bdi>
                       {item.badge ? <span className="media-badge">{item.badge}</span> : null}
                       <Menu.ItemIndicator checked={item.checked} forceMount className="media-menu__indicator">
                         <CheckIcon className="media-icon" />
@@ -159,7 +161,9 @@ function SettingsMenu(): ReactNode {
                     <SpeechIcon className="media-icon" />
                     <span>{t(audioText)}</span>
                     <span className="media-menu__hint">
-                      <span className="media-menu__hint-label">{audioTrack.selectedLabel}</span>
+                      <bdi dir="auto" className="media-menu__hint-label">
+                        {audioTrack.selectedLabel}
+                      </bdi>
                       <MenuChevron />
                     </span>
                   </div>
@@ -176,7 +180,7 @@ function SettingsMenu(): ReactNode {
                   aria-label={t(audioText)}
                   renderItem={(props, item) => (
                     <Menu.RadioItem {...props} className="media-menu__item">
-                      <span>{item.label}</span>
+                      <bdi dir="auto">{item.label}</bdi>
                       <Menu.ItemIndicator checked={item.checked} forceMount className="media-menu__indicator">
                         <CheckIcon className="media-icon" />
                       </Menu.ItemIndicator>
@@ -196,7 +200,9 @@ function SettingsMenu(): ReactNode {
                     <SpeedIcon className="media-icon" />
                     <span>{t(speedText)}</span>
                     <span className="media-menu__hint">
-                      <span className="media-menu__hint-label">{playbackRate.selectedLabel}</span>
+                      <bdi dir="auto" className="media-menu__hint-label">
+                        {playbackRate.selectedLabel}
+                      </bdi>
                       <MenuChevron />
                     </span>
                   </div>
@@ -213,7 +219,7 @@ function SettingsMenu(): ReactNode {
                   aria-label={t(playbackRateText)}
                   renderItem={(props, item) => (
                     <Menu.RadioItem {...props} className="media-menu__item">
-                      <span>{item.label}</span>
+                      <bdi dir="auto">{item.label}</bdi>
                       <Menu.ItemIndicator checked={item.checked} forceMount className="media-menu__indicator">
                         <CheckIcon className="media-icon" />
                       </Menu.ItemIndicator>
@@ -233,7 +239,9 @@ function SettingsMenu(): ReactNode {
                     <CaptionsOffIcon className="media-icon" />
                     <span>{t(captionsText)}</span>
                     <span className="media-menu__hint">
-                      <span className="media-menu__hint-label">{captions.selectedLabel}</span>
+                      <bdi dir="auto" className="media-menu__hint-label">
+                        {captions.selectedLabel}
+                      </bdi>
                       <MenuChevron />
                     </span>
                   </div>
@@ -250,7 +258,7 @@ function SettingsMenu(): ReactNode {
                   aria-label={t(captionsText)}
                   renderItem={(props, item) => (
                     <Menu.RadioItem {...props} className="media-menu__item">
-                      <span>{item.label}</span>
+                      <bdi dir="auto">{item.label}</bdi>
                       <Menu.ItemIndicator checked={item.checked} forceMount className="media-menu__indicator">
                         <CheckIcon className="media-icon" />
                       </Menu.ItemIndicator>
@@ -853,6 +861,10 @@ export const { Player } = createPlayer({ features: videoFeatures });
   container: media-controls / inline-size;
   text-shadow: 0 1px 0 var(--shadow-current-color);
   border-radius: calc(Infinity * 1px);
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-default-skin .media-time-controls {
@@ -862,6 +874,10 @@ export const { Player } = createPlayer({ features: videoFeatures });
   align-items: center;
   container: media-time-controls / inline-size;
 
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
+
   > .media-time:last-child {
     @container media-time-controls (width < 16rem) {
       display: none;
@@ -1066,6 +1082,10 @@ export const { Player } = createPlayer({ features: videoFeatures });
   display: flex;
   gap: 1px;
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-default-skin .media-badge {
@@ -1088,10 +1108,15 @@ export const { Player } = createPlayer({ features: videoFeatures });
   width: var(--media-icon-size);
   height: var(--media-icon-size);
 }
-.media-default-skin .media-icon--flipped {
+.media-default-skin .media-icon--flipped,
+.media-default-skin:dir(rtl) .media-menu__chevron {
   scale: -1 1;
 }
 
+.media-default-skin:dir(rtl) .media-menu__chevron.media-icon--flipped {
+  scale: 1 1;
+}
+
 .media-default-skin media-poster,
 .media-default-skin > img {
   position: absolute;
@@ -1732,6 +1757,10 @@ export const { Player } = createPlayer({ features: videoFeatures });
       filter: blur(8px);
       translate: 100% 0;
     }
+
+    &:dir(rtl):where([data-starting-style], [data-ending-style]) {
+      translate: -100% 0;
+    }
   }
 
   .media-menu__separator {
@@ -1774,7 +1803,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
     gap: calc(var(--spacing) * 1.5);
     align-items: center;
     padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
-    text-align: left;
+    text-align: start;
     text-shadow: 0 1px 0 var(--shadow-current-color);
     cursor: pointer;
     user-select: none;
@@ -1818,8 +1847,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
 
   .media-menu__indicator {
     flex-shrink: 0;
-    margin-right: calc(var(--spacing) * -1);
-    margin-left: auto;
+    margin-inline: auto calc(var(--spacing) * -1);
     opacity: 0;
 
     .media-icon {
@@ -1856,8 +1884,8 @@ export const { Player } = createPlayer({ features: videoFeatures });
   }
 
   .media-menu__tier {
+    padding-inline-start: calc(var(--spacing) * 0.5);
     padding-top: 1px;
-    padding-left: calc(var(--spacing) * 0.5);
     font-size: var(--font-size-tiny);
     font-weight: 600;
     line-height: 1;
@@ -1874,8 +1902,8 @@ export const { Player } = createPlayer({ features: videoFeatures });
     gap: calc(var(--spacing) * 1);
     align-items: center;
     min-width: 0;
-    padding-left: calc(var(--spacing) * 2);
-    margin-left: auto;
+    padding-inline-start: calc(var(--spacing) * 2);
+    margin-inline-start: auto;
     color: oklch(from currentColor l c h / 0.65);
   }
 
@@ -1915,6 +1943,10 @@ export const { Player } = createPlayer({ features: videoFeatures });
       translate: -100% 0;
     }
 
+    &:dir(rtl)[data-submenu-expanded="true"] > :not([data-submenu]) {
+      translate: 100% 0;
+    }
+
     /* WebKit can restart the covered-content transition while the
        anchor-positioned highlight remains active. */
     &[data-submenu-expanded] > :not([data-submenu])::before {