feat-#197: useCldVideoUrl composable

docs/content/1.getting-started.md

@@ -62,6 +62,11 @@ Configure Nuxt Cloudinary easily with the `cloudinary` property.
 export default {
   cloudinary: {
     cloudName: 'fesfese4324',
+    uploadPreset?: 'my-custom-preset',
+    apiKey?: '12345',
+    analytics?: true,
+    cloud?: {},
+    url?: {},
   }
 }
 ```
@@ -72,6 +77,36 @@ export default {
 
 Your unique Cloudinary Cloud Name. You can find it in the Cloudinary dashboard.
 
+### `uploadPreset`
+
+- Default: `-`
+
+For example: `my-upload-preset`. Used with `CldUploadWidget` and `CldUploadButton` components
+
+### `apiKey`
+
+- Default: `-`
+
+For example: `12345`. Used with `CldMediaLibrary` component.
+
+### `analytics`
+
+- Default: `true`
+
+Enabling Cloudinary analytics.
+
+### `cloud`
+
+- Default: `-`
+
+Top level configuration used for all composables and components. Check out all available options [here](https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters)
+
+### `url`
+
+- Default: `-`
+
+Top level configuration used for all composables and components. Check out all available options [here](https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters)
+
 ## NuxtCloudinary vs Nuxt Image
 
 You may be wondering what is the reason to have both Nuxt Cloudinary and Nuxt Image modules if they both have integration with Cloudinary and they tackle the aspect of optimized images.

docs/content/3.composables/2.useCldVideoUrl.md

@@ -0,0 +1,28 @@
+---
+description:
+---
+
+This composable is using [@cloudinary-util/url-loader](https://github.com/colbyfayock/cloudinary-util/tree/main/packages/url-loader) under the hood to generate the Cloudinary URL with certain optimizations.
+
+## Usage
+
+Configuration for `useCldVideoUrl` is the same as [useCldImageUrl](usecldimageurl).
+
+```vue
+<script lang="ts" setup>
+const { url } = useCldVideoUrl({
+  options: {
+    src: "/videos/mountain-stars",
+  },
+});
+</script>
+```
+
+ The only difference is getCldVideoUrl provides the following default settings:
+
+| Option Name | Type   | Default   |
+| ----------- | ------ | --------- |
+| assetType   | string | `"video"` |
+
+Additionally, the transformations do not have access to image-specific transformations.
+Find more configuration settings over at [useCldImageUrl](usecldimageurl#configuration) configuration.

playground/app.vue

@@ -3,6 +3,11 @@
 const { url } = useCldImageUrl({ options: { src: "/cld-sample-5.jpg" } });
 console.log(url);
 
+const { url: videoUrl } = useCldVideoUrl({
+  options: { src: "videos/mountain-stars" },
+});
+console.log(videoUrl);
+
 const mediaAssets = [
   { tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
   { tag: "electric_car_product_gallery_demo", mediaType: "video" },
@@ -15,9 +20,7 @@ const cldVideoRef = ref();
 </script>
 
 <template>
-  <button :id="buttonId">
-    Select Image or Video
-  </button>
+  <button :id="buttonId">Select Image or Video</button>
   <CldMediaLibrary
     api-key="12345"
     :button-id="buttonId"
@@ -29,10 +32,7 @@ const cldVideoRef = ref();
     :button-id="buttonId"
   />
   <!-- Usage of `CldOgImage.vue` component -->
-  <CldOgImage
-    src="cld-sample-2"
-    twitter-title="test"
-  />
+  <CldOgImage src="cld-sample-2" twitter-title="test" />
   <!-- Usage of `CldVideoPlayer.vue` component -->
   <CldVideoPlayer
     ref="cldVideoRef"
@@ -41,16 +41,8 @@ const cldVideoRef = ref();
     src="videos/mountain-stars"
   />
   <!-- Usage of `CldUploadWidget.vue` component -->
-  <CldUploadWidget
-    v-slot="{ open }"
-    upload-preset="nuxt-cloudinary-unsigned"
-  >
-    <button
-      type="button"
-      @click="open"
-    >
-      Upload an Image
-    </button>
+  <CldUploadWidget v-slot="{ open }" upload-preset="nuxt-cloudinary-unsigned">
+    <button type="button" @click="open">Upload an Image</button>
   </CldUploadWidget>
   <!-- Usage of `CldUploadButton.vue` component -->
   <CldUploadButton upload-preset="nuxt-cloudinary-unsigned">

playground/nuxt.config.ts

@@ -2,11 +2,7 @@ export default defineNuxtConfig({
   modules: ['../src/module'],
   cloudinary: {
     cloudName: 'nuxt-cloudinary',
-    url: {
-      cname: 'spacejelly.dev',
-      secureDistribution: 'spacejelly.dev',
-      secure: true,
-      privateCdn: true
-    }
+    url: {},
+    cloud: {}
   }
 })

src/runtime/composables/useCldVideoUrl.ts

@@ -0,0 +1,47 @@
+import { useRuntimeConfig } from '#imports'
+import { constructCloudinaryUrl, ConstructUrlProps, ConfigOptions, AnalyticsOptions, VideoOptions } from '@cloudinary-util/url-loader'
+import nuxtPkg from 'nuxt/package.json';
+import pkg from '../../../package.json'
+
+export const useCldVideoUrl = (props: { options: VideoOptions, config?: ConfigOptions, analytics?: AnalyticsOptions }) => {
+  if (!props.options.src) console.error("`[@nuxtjs/cloudinary]`: Property `src` is missing")
+
+  const moduleConfig = useRuntimeConfig().public.cloudinary;
+
+  const cldCloudName = props.config?.cloud?.cloudName || moduleConfig.cloud?.cloudName || moduleConfig?.cloudName;
+
+  if (!cldCloudName) console.warn('`[@nuxtjs/cloudinary]` Environment variable `CLOUDINARY_CLOUD_NAME` or property `cloudinary.cloudName` missing')
+
+  let cldOptions: ConstructUrlProps = {
+    options: {
+      assetType: 'video',
+      // Have to spread the options because otherwise getting the error about props being updated while they are readonly.
+      ...props.options
+    },
+    config: {
+      url: moduleConfig.url,
+      cloud: {
+        cloudName: cldCloudName,
+        ...moduleConfig.cloud
+      },
+      ...props.config,
+    },
+    analytics: false
+  }
+
+  if (moduleConfig.analytics) {
+    cldOptions = {
+      ...cldOptions,
+      analytics: Object.assign({
+        sdkCode: 'D',
+        sdkSemver: `${pkg.version.split('.')[0]}.0.0`,
+        techVersion: `${nuxtPkg.version.split('.')[0]}.0.0`,
+        product: 'B'
+      }, props.analytics)
+    }
+  }
+
+  return {
+    url: constructCloudinaryUrl(cldOptions)
+  }
+}