feat: SNI-6834 add basic vue video component

Author: pawelphilipczyk-cloudinary

packages/vue/sampleApp/App.vue

@@ -1,18 +1,23 @@
 <template>
   <div>
+    <h1>AdvancedVideo</h1>
+    <AdvancedVideo :cldVid="cldVid" />
+    <h1>AdvancedImage</h1>
     <AdvancedImage :cldImg="cldImg" :plugins="plugins" />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { AdvancedImage, responsive } from "../dist";
+import { AdvancedImage, AdvancedVideo, responsive } from "../dist";
 import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
+import { CloudinaryVideo } from "@cloudinary/url-gen/assets/CloudinaryVideo";
 
 export default defineComponent({
   name: "App",
   components: {
     AdvancedImage,
+    AdvancedVideo,
   },
   setup(props) {
     const cldImg = new CloudinaryImage(
@@ -21,10 +26,17 @@ export default defineComponent({
       { analytics: false }
     );
 
+    const cldVid = new CloudinaryVideo(
+      "docs/walking_talking",
+      { cloudName: "demo" },
+      { analytics: false }
+    );
+
     const plugins = [responsive({ steps: 100 })];
 
     return {
       cldImg,
+      cldVid,
       plugins,
     };
   },

packages/vue/src/components/AdvancedVideo.vue

@@ -1,14 +1,79 @@
 <template>
-  <video :src="url" />
+  <video ref="videoRef" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+// import { defineComponent } from "vue";
 
-export default defineComponent({
-  name: "AdvancedVideo",
-  props: {
-    url: String,
-  },
+// export default defineComponent({
+//   name: "AdvancedVideo",
+//   props: {
+//     url: String,
+//   },
+// });
+
+/**
+ * @memberOf CloudinaryVueSDK
+ * @type {Component}
+ * @description The Cloudinary video component.
+ * @prop {CloudinaryVideo} cldVid Generated by @cloudinary/url-gen
+ * @prop {Plugins} plugins Advanced video component plugins accessibility(), responsive(), lazyload(), placeholder()
+ */
+
+import { ref, onMounted, onUpdated, onUnmounted } from "vue";
+import { CloudinaryVideo } from "@cloudinary/url-gen/assets/CloudinaryVideo";
+import {
+  HtmlVideoLayer,
+  Plugins,
+  VideoSources,
+  cancelCurrentlyRunningPlugins,
+} from "@cloudinary/html";
+import { SDKAnalyticsConstants } from "../internal/SDKAnalyticsConstants";
+
+interface VideoProps {
+  cldVid: CloudinaryVideo;
+  plugins?: Plugins;
+  sources?: VideoSources;
+
+  [x: string]: any;
+}
+
+// Disabled linting due to [@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.
+// eslint-disable-next-line no-undef
+const props = defineProps<VideoProps>();
+
+const videoRef = ref(null);
+let htmlLayerInstance;
+
+/**
+ * On mount, creates a new HTMLLayer instance and initializes with ref to img element,
+ * user generated cloudinaryVideo and the plugins to be used.
+ */
+onMounted(() => {
+  htmlLayerInstance = new HtmlVideoLayer(
+    videoRef.value,
+    props.cldVid,
+    props.sources,
+    props.plugins
+    // SDKAnalyticsConstants
+  );
+});
+
+/**
+ * On update, we cancel running plugins and update image instance with the state of user
+ * cloudinaryVideo and the state of plugins.
+ */
+onUpdated(() => {
+  cancelCurrentlyRunningPlugins(htmlLayerInstance.htmlPluginState);
+  // call html layer to update the dom again with plugins and reset toBeCanceled
+  htmlLayerInstance.update(props.cldVid, props.plugins, SDKAnalyticsConstants);
+});
+
+/**
+ * On unmount, we cancel the currently running plugins.
+ */
+onUnmounted(() => {
+  // Safely cancel running events on unmount.
+  cancelCurrentlyRunningPlugins(htmlLayerInstance.htmlPluginState);
 });
 </script>

packages/vue/src/index.ts

@@ -9,13 +9,13 @@ import {
 } from "@cloudinary/html";
 
 import AdvancedImage from "./components/AdvancedImage.vue";
-// import AdvancedVideo from "./components/AdvancedVideo.vue";
+import AdvancedVideo from "./components/AdvancedVideo.vue";
 
 export {
   placeholder,
   accessibility,
   lazyload,
   responsive,
   AdvancedImage,
-  // AdvancedVideo,
+  AdvancedVideo,
 };