From da89a1cec69ccb1506d2218aecdb12a56018918b Mon Sep 17 00:00:00 2001
From: Josh Farrant <joshfarrant@github.com>
Date: Fri, 3 Jan 2025 09:43:51 +0000
Subject: [PATCH 1/2] update VideoPlayer.Source examples in docs to use remote
 image

---
 apps/docs/content/components/VideoPlayer.mdx | 32 ++++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/apps/docs/content/components/VideoPlayer.mdx b/apps/docs/content/components/VideoPlayer.mdx
index 0ad94dfbe..edc1ce224 100644
--- a/apps/docs/content/components/VideoPlayer.mdx
+++ b/apps/docs/content/components/VideoPlayer.mdx
@@ -17,7 +17,7 @@ import {VideoPlayer} from '@primer/react-brand'
 
 ```jsx live
 <VideoPlayer title="GitHub media player">
-  <VideoPlayer.Source src="/brand/assets/example.mp4" />
+  <VideoPlayer.Source src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4" />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -29,7 +29,7 @@ import {VideoPlayer} from '@primer/react-brand'
   poster="/brand/assets/example-poster.png"
   title="GitHub media player"
 >
-  <VideoPlayer.Source src="/brand/assets/example.mp4" />
+  <VideoPlayer.Source src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4" />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -38,7 +38,7 @@ import {VideoPlayer} from '@primer/react-brand'
 
 ```jsx live
 <VideoPlayer showBranding={false} title="GitHub media player">
-  <VideoPlayer.Source src="/brand/assets/example.mp4" />
+  <VideoPlayer.Source src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4" />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -47,7 +47,7 @@ import {VideoPlayer} from '@primer/react-brand'
 
 ```jsx live
 <VideoPlayer visuallyHiddenTitle title="GitHub media player">
-  <VideoPlayer.Source src="/brand/assets/example.mp4" />
+  <VideoPlayer.Source src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4" />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -64,7 +64,10 @@ import {VideoPlayer} from '@primer/react-brand'
   showVolumeControl={false}
   showFullScreenButton={false}
 >
-  <VideoPlayer.Source src="/brand/assets/example.mp4" type="video/mp4" />
+  <VideoPlayer.Source
+    src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4"
+    type="video/mp4"
+  />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -73,7 +76,10 @@ import {VideoPlayer} from '@primer/react-brand'
 
 ```jsx live
 <VideoPlayer title="GitHub media player" showControlsWhenPaused={false}>
-  <VideoPlayer.Source src="/brand/assets/example.mp4" type="video/mp4" />
+  <VideoPlayer.Source
+    src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4"
+    type="video/mp4"
+  />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -87,7 +93,10 @@ import {VideoPlayer} from '@primer/react-brand'
   showBranding={false}
   showControlsWhenPaused={false}
 >
-  <VideoPlayer.Source src="/brand/assets/example.mp4" type="video/mp4" />
+  <VideoPlayer.Source
+    src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4"
+    type="video/mp4"
+  />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -99,7 +108,10 @@ import {VideoPlayer} from '@primer/react-brand'
   title="GitHub media player"
   playIcon={() => <PlayIcon size={96} />}
 >
-  <VideoPlayer.Source src="/brand/assets/example.mp4" type="video/mp4" />
+  <VideoPlayer.Source
+    src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4"
+    type="video/mp4"
+  />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -111,7 +123,7 @@ The `VideoPlayer` component exposes a `useVideo` hook that can be used to contro
 Full documentation for the `useVideo` hook can be found [below](#usevideo-context).
 
 ```tsx live
-() => {
+;() => {
   const MyVideoPlayer = () => {
     const {isPlaying, togglePlaying, seek} = useVideo()
 
@@ -127,7 +139,7 @@ Full documentation for the `useVideo` hook can be found [below](#usevideo-contex
           showFullScreenButton={false}
         >
           <VideoPlayer.Source
-            src="/brand/assets/example.mp4"
+            src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4"
             type="video/mp4"
           />
           <VideoPlayer.Track src="/brand/assets/example.vtt" default />

From 4432f8ecc5bf397f66b1531025ed6efc59074566 Mon Sep 17 00:00:00 2001
From: Josh Farrant <joshfarrant@github.com>
Date: Wed, 8 Jan 2025 16:29:41 +0000
Subject: [PATCH 2/2] update example video url to be absolute instead of
 relative

---
 apps/docs/content/components/VideoPlayer.mdx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/docs/content/components/VideoPlayer.mdx b/apps/docs/content/components/VideoPlayer.mdx
index edc1ce224..4cdc08ea8 100644
--- a/apps/docs/content/components/VideoPlayer.mdx
+++ b/apps/docs/content/components/VideoPlayer.mdx
@@ -17,7 +17,7 @@ import {VideoPlayer} from '@primer/react-brand'
 
 ```jsx live
 <VideoPlayer title="GitHub media player">
-  <VideoPlayer.Source src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4" />
+  <VideoPlayer.Source src="https://primer.github.io/brand/assets/example.mp4" />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -29,7 +29,7 @@ import {VideoPlayer} from '@primer/react-brand'
   poster="/brand/assets/example-poster.png"
   title="GitHub media player"
 >
-  <VideoPlayer.Source src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4" />
+  <VideoPlayer.Source src="https://primer.github.io/brand/assets/example.mp4" />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -38,7 +38,7 @@ import {VideoPlayer} from '@primer/react-brand'
 
 ```jsx live
 <VideoPlayer showBranding={false} title="GitHub media player">
-  <VideoPlayer.Source src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4" />
+  <VideoPlayer.Source src="https://primer.github.io/brand/assets/example.mp4" />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -47,7 +47,7 @@ import {VideoPlayer} from '@primer/react-brand'
 
 ```jsx live
 <VideoPlayer visuallyHiddenTitle title="GitHub media player">
-  <VideoPlayer.Source src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4" />
+  <VideoPlayer.Source src="https://primer.github.io/brand/assets/example.mp4" />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -65,7 +65,7 @@ import {VideoPlayer} from '@primer/react-brand'
   showFullScreenButton={false}
 >
   <VideoPlayer.Source
-    src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4"
+    src="https://primer.github.io/brand/assets/example.mp4"
     type="video/mp4"
   />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
@@ -77,7 +77,7 @@ import {VideoPlayer} from '@primer/react-brand'
 ```jsx live
 <VideoPlayer title="GitHub media player" showControlsWhenPaused={false}>
   <VideoPlayer.Source
-    src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4"
+    src="https://primer.github.io/brand/assets/example.mp4"
     type="video/mp4"
   />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
@@ -94,7 +94,7 @@ import {VideoPlayer} from '@primer/react-brand'
   showControlsWhenPaused={false}
 >
   <VideoPlayer.Source
-    src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4"
+    src="https://primer.github.io/brand/assets/example.mp4"
     type="video/mp4"
   />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
@@ -109,7 +109,7 @@ import {VideoPlayer} from '@primer/react-brand'
   playIcon={() => <PlayIcon size={96} />}
 >
   <VideoPlayer.Source
-    src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4"
+    src="https://primer.github.io/brand/assets/example.mp4"
     type="video/mp4"
   />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
@@ -139,7 +139,7 @@ Full documentation for the `useVideo` hook can be found [below](#usevideo-contex
           showFullScreenButton={false}
         >
           <VideoPlayer.Source
-            src="https://github.com/primer/brand/raw/refs/heads/main/apps/storybook/static/example.mp4"
+            src="https://primer.github.io/brand/assets/example.mp4"
             type="video/mp4"
           />
           <VideoPlayer.Track src="/brand/assets/example.vtt" default />