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: {