feat-#222: disableRemotePlayback for CldVideoPlayer

nuxt-modules · Jun 24, 2024 · ce32838 · ce32838
1 parent 7c0384a
commit ce32838
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 22 deletions.
diff --git a/docs/content/2.components/CldVideoPlayer.md b/docs/content/2.components/CldVideoPlayer.md
@@ -137,6 +137,7 @@ Adding a button to select chapters (you can pass `chapters` prop as a boolean if
 | pictureInPictureToogle | boolean        | -          | Enable Picture in Picture mode                                                                                                                                                   | true                                               |
 | chaptersButton         | boolean        | -          | Enable Chapters button                                                                                                                                                           | true                                               |
 | chapters               | object/boolean | -          | Chapters configuration                                                                                                                                                           | { 0: 'Chapter 1', 6: 'Chapter 2', 9: 'Chapter 3' } |
+| disableRemotePlayback  | boolean        | -          | Indicate if media element may have a remote playback UI                                                                                                                          | true                                               |
 
 ## Colors Prop
 

diff --git a/playground/app.vue b/playground/app.vue
@@ -1,38 +1,40 @@
 <script lang="ts" setup>
 // Usage of `useCldImageUrl` composable
-const { url } = useCldImageUrl({ options: { src: "/cld-sample-5.jpg" } });
-console.log(url);
+const { url } = useCldImageUrl({ options: { src: '/cld-sample-5.jpg' } })
+console.log(url)
 
 const { url: videoUrl } = useCldVideoUrl({
-  options: { src: "videos/mountain-stars" },
-});
-console.log(videoUrl);
+  options: { src: 'videos/mountain-stars' },
+})
+console.log(videoUrl)
 
 const mediaAssets = [
-  { tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
-  { tag: "electric_car_product_gallery_demo", mediaType: "video" },
-  { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
-];
+  { tag: 'electric_car_product_gallery_demo' }, // by default mediaType: "image"
+  { tag: 'electric_car_product_gallery_demo', mediaType: 'video' },
+  { tag: 'electric_car_360_product_gallery_demo', mediaType: 'spin' },
+]
 
-const buttonId = "open-btn";
+const buttonId = 'open-btn'
 
-const cldVideoRef = ref();
+const cldVideoRef = ref()
 
 const chapters = {
-  0: "Chapter 1",
-  6: "Chapter 2",
-  9: "Chapter 3",
-};
+  0: 'Chapter 1',
+  6: 'Chapter 2',
+  9: 'Chapter 3',
+}
 
 const colors = {
-  accent: "#ff0000",
-  base: "#00ff00",
-  text: "#0000ff",
-};
+  accent: '#ff0000',
+  base: '#00ff00',
+  text: '#0000ff',
+}
 </script>
 
 <template>
-  <button :id="buttonId">Select Image or Video</button>
+  <button :id="buttonId">
+    Select Image or Video
+  </button>
   <CldMediaLibrary
     api-key="12345"
     :button-id="buttonId"
@@ -43,7 +45,10 @@ const colors = {
     cloud-name="demo"
     :button-id="buttonId"
   />
-  <CldOgImage src="cld-sample-2" twitter-title="test" />
+  <CldOgImage
+    src="cld-sample-2"
+    twitter-title="test"
+  />
   <CldVideoPlayer
     ref="cldVideoRef"
     width="1620"
@@ -60,7 +65,12 @@ const colors = {
     upload-preset="nuxt-cloudinary-unsigned"
     :tags="['sad', 'music']"
   >
-    <button type="button" @click="open">Upload an Image</button>
+    <button
+      type="button"
+      @click="open"
+    >
+      Upload an Image
+    </button>
   </CldUploadWidget>
   <CldUploadButton upload-preset="nuxt-cloudinary-unsigned">
     Upload

diff --git a/src/runtime/components/CldVideoPlayer.vue b/src/runtime/components/CldVideoPlayer.vue
@@ -30,6 +30,7 @@ export interface CloudinaryVideoPlayerOptions {
   pictureInPictureToggle?: boolean
   chapters?: Record<string | number, string> | boolean
   chaptersButton?: boolean
+  disableRemotePlayback?: boolean
 }
 
 export interface CloudinaryVideoPlayerOptionsColors {
@@ -244,6 +245,7 @@ useHead({
       :class="playerClassName"
       :width="width"
       :height="height"
+      :disableRemotePlayback="disableRemotePlayback"
     />
   </div>
 </template>