Merge pull request #48 from cloudinary/#39-enhance-cldvideo-cldposter

fix #39

Author: mayashavin

src/components/CldImage.vue

@@ -18,6 +18,7 @@ import { getPlaceholderURL } from "../../helpers/getPlaceholderURL";
 import { size } from "../../mixins/size";
 import { lazy } from "../../mixins/lazy";
 import { withOptions } from "../../mixins/withOptions";
+import { generateUrl } from '../../helpers/URLGenerator';
 
 /**
  * Deliver images and specify image transformations using the cld-image (CldImage) component,
@@ -149,9 +150,10 @@ export default {
 
       const htmlAttrs = getHTMLAttributes(this.options);
 
-      const src = Cloudinary.new(this.configuration).url(
-        this.publicId,
-        {
+      const src = generateUrl({
+        publicId: this.publicId,
+        configuration: this.configuration,
+        transformation: {
           ...this.options,
           transformation: [
             ...this.transformOptions.transformation,
@@ -163,15 +165,14 @@ export default {
             ...(this.progressive ? [{ flags: ["progressive"] }] : [])
           ]
         }
-      );
+      });
 
       return {
           ...this.nonCldAttrs,
           ...htmlAttrs,
           src
       };
     },
-
     shouldMeasureSize() {
       return !this.responsive;
     }

src/components/CldImage/CldImage.vue

@@ -12,7 +12,7 @@ export default {
   },
   created() {
     if (this.registerTransformation) {
-      this.registerTransformation(this.$attrs);
+      this.registerTransformation(this.$attrs || {});
     }
   },
   render() {

src/components/CldPoster.vue

@@ -0,0 +1,53 @@
+<script>
+import { normalizeTransformation, normalizeConfiguration } from "../../helpers/attributes";
+
+/**
+ * The image to be shown while a video is downloading or until the user hits the play button.
+ * This component must be added as a child of the [CldVideo](#cldvideo) component.
+ *
+ * If this component is not given then the poster image defaults to the middle frame of the source video in jpg format.
+ */
+export default {
+  name: "CldPoster",
+  inject: {
+    registerPoster: {
+      default: null
+    }
+  },
+  provide() {
+    return {
+      registerTransformation: this.registerTransformation,
+    }
+  },
+  data() {
+    return {
+      transformations: [],
+    };
+  },
+  mounted() {
+    if (this.registerPoster) {
+      const posterAttrs = this.$attrs || {};
+      const configuration = normalizeConfiguration(posterAttrs);
+      const transformation = [ normalizeTransformation(posterAttrs), ...this.transformations];
+      
+      this.registerPoster({
+        configuration,
+        publicId: posterAttrs.publicId,
+        transformation
+      })
+      // this.registerPoster({...(this.$attrs || {}), transformation: this.transformations });
+    }
+  },
+  methods: {
+    registerTransformation(transformation) {
+      this.transformations = [...this.transformations, normalizeTransformation(transformation)];
+    },
+  },
+  render(h) {
+    return h(
+      "div", {},
+      this.$slots.default
+    );
+  }
+};
+</script>