Merge pull request #233 from cloudinary/use-fetch-format-vue

feat: add useFetchFormat prop in vue sdk

Author: pawelphilipczyk-cloudinary

packages/vue/src/components/AdvancedVideo.vue

@@ -31,6 +31,7 @@ interface VideoProps {
   plugins?: Plugins;
   sources?: VideoSources;
   cldPoster?: VideoPoster;
+  useFetchFormat?: boolean;
 
   [x: string]: any;
 }
@@ -53,7 +54,8 @@ onMounted(() => {
     props.sources,
     props.plugins,
     undefined,
-    props.cldPoster
+    props.cldPoster,
+    { useFetchFormat: props.useFetchFormat }
   );
 });
 

packages/vue/tests/unit/AdvancedVideo.spec.ts

@@ -1,6 +1,6 @@
 import { mount } from "@vue/test-utils";
 import { CloudinaryImage, CloudinaryVideo } from "@cloudinary/url-gen";
-import { auto, vp9 } from "@cloudinary/url-gen/qualifiers/videoCodec";
+import { auto, vp9, theora } from "@cloudinary/url-gen/qualifiers/videoCodec";
 import { videoCodec } from "@cloudinary/url-gen/actions/transcode";
 import { AdvancedVideo } from "../../src";
 import { waitTicks } from "../unit/utils";
@@ -85,6 +85,38 @@ describe("AdvancedVideo", () => {
     );
   });
 
+  it("should render video with input sources when using useFetchFormat", async function () {
+    const sources = [
+      {
+        type: "mp4",
+        codecs: ["vp8", "vorbis"],
+        transcode: videoCodec(auto()),
+      },
+      {
+        type: "webm",
+        codecs: ["avc1.4D401E", "mp4a.40.2"],
+        transcode: videoCodec(vp9()),
+      },
+      {
+        type: "ogv",
+        codecs: ["theora"],
+        transcode: videoCodec(theora()),
+      },
+    ];
+
+    const component = mount(AdvancedVideo, {
+      props: { cldVid: cloudinaryVideo, sources, useFetchFormat: true },
+    });
+    await waitTicks(1);
+
+    expect(component.html()).toContain(
+      "<video>\n" +
+        '  <source src="https://res.cloudinary.com/demo/video/upload/vc_auto/f_mp4/sample" type="video/mp4; codecs=vp8, vorbis">\n' +
+        '  <source src="https://res.cloudinary.com/demo/video/upload/vc_vp9/f_webm/sample" type="video/webm; codecs=avc1.4D401E, mp4a.40.2">\n' +
+        '  <source src="https://res.cloudinary.com/demo/video/upload/vc_theora/f_ogv/sample" type="video/ogg; codecs=theora">\n</video>'
+    );
+  });
+
   it("should pass video attributes", async function () {
     const component = mount(AdvancedVideo, {
       props: {