feat: SNI-6952 add cldPoster to vue sdk video component

Author: pawelphilipczyk-cloudinary

packages/vue/src/components/AdvancedVideo.vue

@@ -13,6 +13,7 @@
 
 import { ref, onMounted, onUpdated, onUnmounted } from "vue";
 import { CloudinaryVideo } from "@cloudinary/url-gen/assets/CloudinaryVideo";
+import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
 import {
   HtmlVideoLayer,
   Plugins,
@@ -24,6 +25,7 @@ interface VideoProps {
   cldVid: CloudinaryVideo;
   plugins?: Plugins;
   sources?: VideoSources;
+  cldPoster?: CloudinaryImage | 'auto';
 
   [x: string]: any;
 }
@@ -44,7 +46,9 @@ onMounted(() => {
     videoRef.value,
     props.cldVid,
     props.sources,
-    props.plugins
+    props.plugins,
+    undefined,
+    props.cldPoster
   );
 });
 
@@ -58,7 +62,9 @@ onUpdated(() => {
   htmlLayerInstance.update(
     props.cldVid,
     props.sources,
-    props.plugins
+    props.plugins,
+    undefined,
+    props.cldPoster
   );
 });
 

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

@@ -1,10 +1,15 @@
 import { mount } from "@vue/test-utils";
-import { CloudinaryVideo } from "@cloudinary/url-gen";
+import { CloudinaryImage, CloudinaryVideo } from "@cloudinary/url-gen";
 import { auto, vp9 } from "@cloudinary/url-gen/qualifiers/videoCodec";
 import { videoCodec } from "@cloudinary/url-gen/actions/transcode";
 import { AdvancedVideo } from "../../src";
 import { waitTicks } from "../unit/utils";
 
+const cloudinaryImage = new CloudinaryImage(
+  "sample",
+  { cloudName: "demo" },
+  { analytics: false }
+);
 const cloudinaryVideo = new CloudinaryVideo(
   "sample",
   { cloudName: "demo" },
@@ -110,6 +115,28 @@ describe("AdvancedVideo", () => {
     expect(component.html()).toContain('poster="www.example.com"');
   });
 
+  it('should contain poster when "auto" is passed as cldPoster', async function () {
+    const component = mount(AdvancedVideo, {
+      props: { cldVid: cloudinaryVideo, cldPoster: "auto" },
+    });
+    await waitTicks(1);
+
+    expect(component.html()).toContain(
+      'poster="https://res.cloudinary.com/demo/video/upload/q_auto/f_jpg/so_auto/sample"'
+    );
+  });
+
+  it("should contain poster when cloudinary image is passed as cldPoster", async function () {
+    const component = mount(AdvancedVideo, {
+      props: { cldVid: cloudinaryVideo, cldPoster: cloudinaryImage },
+    });
+    await waitTicks(1);
+
+    expect(component.html()).toContain(
+      'poster="https://res.cloudinary.com/demo/image/upload/sample"'
+    );
+  });
+
   it("should emit play event", async function () {
     const mockCallback = jest.fn();