From 8ad2df694ec8e3b5955663c51a889bd452ba9c68 Mon Sep 17 00:00:00 2001
From: Baroshem <jakub.andrzejewski.dev@gmail.com>
Date: Sun, 24 Mar 2024 19:24:47 +0100
Subject: [PATCH] feat-#197: useCldVideoUrl composable

---
 docs/content/1.getting-started.md             | 35 ++++++++++++++
 .../content/3.composables/2.useCldVideoUrl.md | 28 +++++++++++
 playground/app.vue                            | 26 ++++------
 playground/nuxt.config.ts                     |  8 +---
 src/runtime/composables/useCldVideoUrl.ts     | 47 +++++++++++++++++++
 5 files changed, 121 insertions(+), 23 deletions(-)
 create mode 100644 docs/content/3.composables/2.useCldVideoUrl.md
 create mode 100644 src/runtime/composables/useCldVideoUrl.ts

diff --git a/docs/content/1.getting-started.md b/docs/content/1.getting-started.md
index 3b3379d..88dba08 100644
--- a/docs/content/1.getting-started.md
+++ b/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.
diff --git a/docs/content/3.composables/2.useCldVideoUrl.md b/docs/content/3.composables/2.useCldVideoUrl.md
new file mode 100644
index 0000000..5751c5a
--- /dev/null
+++ b/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.
diff --git a/playground/app.vue b/playground/app.vue
index b89821b..e5a2f6c 100644
--- a/playground/app.vue
+++ b/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">
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index b798e20..5119c3a 100644
--- a/playground/nuxt.config.ts
+++ b/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: {}
   }
 })
diff --git a/src/runtime/composables/useCldVideoUrl.ts b/src/runtime/composables/useCldVideoUrl.ts
new file mode 100644
index 0000000..f09d5a7
--- /dev/null
+++ b/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)
+  }
+}