From b32f08fe990690a6a4a3472ec823d482afe3ebc0 Mon Sep 17 00:00:00 2001 From: Baroshem Date: Sat, 9 Mar 2024 13:59:01 +0100 Subject: [PATCH 1/8] fix: typo in docs --- docs/content/1.getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/1.getting-started.md b/docs/content/1.getting-started.md index 3b3379d..57141f4 100644 --- a/docs/content/1.getting-started.md +++ b/docs/content/1.getting-started.md @@ -38,7 +38,7 @@ CLOUDINARY_CLOUD_NAME= ``` ::callout{icon="i-heroicons-check-circle"} -And that's it! You can now use Clodinary in Nuxt ✨ +And that's it! You can now use Cloudinary in Nuxt ✨ :: ```vue From 217d2ec13fb1eb2190f093b75a7b5436240a7b65 Mon Sep 17 00:00:00 2001 From: Baroshem Date: Sat, 9 Mar 2024 14:10:25 +0100 Subject: [PATCH 2/8] feat-#192: bump url loader --- docs/content/2.components/CldImage/2.configuration.md | 7 +++++-- package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/docs/content/2.components/CldImage/2.configuration.md b/docs/content/2.components/CldImage/2.configuration.md index 5d0f901..c6d8644 100644 --- a/docs/content/2.components/CldImage/2.configuration.md +++ b/docs/content/2.components/CldImage/2.configuration.md @@ -1,5 +1,5 @@ --- -description: +description: --- The CldImage component provides a wide range of options for being able to easily optimize and transform images. @@ -27,10 +27,13 @@ The CldImage component exposes many of Cloudinary's transformations in an easy-t | Prop | Type | Default | Example | More | | --------------------- | ----------------------- | --------- | ----------------------- | ------------------------------------------------------------------------------------------ | +| angle | number | `-` | `45` | [Link](https://cloudinary.com/documentation/transformation_reference#a_angle) | | crop | string | `"limit"` | `"thumb"` | [Link](https://cloudinary.com/documentation/transformation_reference#c_crop_resize) | | background | string | `-` | `"blue"` | [Link](https://cloudinary.com/documentation/transformation_reference#b_background) | -| fillBackground (Beta) | `boolean/object` | `-` | `{{ gravity: 'east' }}` | [Link](https://cloudinary.com/documentation/transformation_reference#b_gen_fill) | +| enhance | boolean | `-` | `{{ gravity: 'east' }}` | [Link](https://cloudinary.com/documentation/transformation_reference#b_gen_fill) | +| fillBackground (Beta) | `boolean/object` | `-` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_enhance) | | gravity | string | `auto` | `"faces"` | [Link](https://cloudinary.com/documentation/transformation_reference#g_gravity) | +| loop | `boolean/number` | `-` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_loop) | | recolor | `array/object` | `-` | `['duck', 'blue']` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_recolor) | | remove | `string/array/object` | `-` | `apple` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_remove) | | removeBackground | `boolean/string` | `false` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_background_removal) | diff --git a/package.json b/package.json index 4460e09..62978ed 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "stackblitz": "cd .stackblitz && yarn && yarn dev" }, "dependencies": { - "@cloudinary-util/url-loader": "^4.2.0", + "@cloudinary-util/url-loader": "^5.2.1", "@nuxt/kit": "^3.5.0", "@unpic/vue": "^0.0.42", "defu": "^6.1.2" diff --git a/yarn.lock b/yarn.lock index e95013c..5954cc8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -476,10 +476,10 @@ dependencies: mime "^3.0.0" -"@cloudinary-util/url-loader@^4.2.0": - version "4.2.0" - resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-4.2.0.tgz#8d686666b5214db1daefd392a115e8a708f968d7" - integrity sha512-fpCFqFPAN/f9Gt//25qLXNDYwy5EcOudRzDPOrsEBH6aMwEdFaJuPxvLiP0IP5MCihKji/XDr9QJQ9Wa+amNSA== +"@cloudinary-util/url-loader@^5.2.1": + version "5.2.1" + resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-5.2.1.tgz#d663520b1dbf924d5d319dfc7819f27e4c5acb22" + integrity sha512-1GDPCnRYSGlnPqEdcvH/1h0puAYoF9tJazV/zNx3ptCN0PbwBWEw+ksZm6mCQF2cr9ofDE3B+C5YdPLLsvbuQQ== dependencies: "@cloudinary-util/util" "3.0.0" "@cloudinary/url-gen" "1.15.0" From 5a21810da7d835b33b25382ee6171add61d03cee Mon Sep 17 00:00:00 2001 From: Colby Fayock Date: Fri, 22 Mar 2024 14:18:24 -0300 Subject: [PATCH 3/8] adding ability to pass in global module configurations --- playground/nuxt.config.ts | 8 +++++++- src/module.ts | 7 ++++++- src/runtime/composables/useCldImageUrl.ts | 21 ++++++++++++++++----- 3 files changed, 29 insertions(+), 7 deletions(-) diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index 08819ad..b798e20 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -1,6 +1,12 @@ export default defineNuxtConfig({ modules: ['../src/module'], cloudinary: { - cloudName: 'nuxt-cloudinary' + cloudName: 'nuxt-cloudinary', + url: { + cname: 'spacejelly.dev', + secureDistribution: 'spacejelly.dev', + secure: true, + privateCdn: true + } } }) diff --git a/src/module.ts b/src/module.ts index 3d6d4e5..377fca5 100644 --- a/src/module.ts +++ b/src/module.ts @@ -6,12 +6,15 @@ import { } from "@nuxt/kit"; import { fileURLToPath } from "url"; import { defu } from "defu"; +import { ConfigOptions } from '@cloudinary-util/url-loader' export type ModuleOptions = { cloudName?: string; uploadPreset?: string; apiKey?: string; analytics?: boolean; + cloud?: ConfigOptions["cloud"]; + url?: ConfigOptions["url"]; }; export default defineNuxtModule({ @@ -33,7 +36,9 @@ export default defineNuxtModule({ uploadPreset: process.env.CLOUDINARY_UPLOAD_PRESET || options.uploadPreset, apiKey: process.env.CLOUDINARY_API_KEY || options.apiKey, - analytics: options.analytics + analytics: options.analytics, + cloud: options.cloud, + url: options.url, } ); diff --git a/src/runtime/composables/useCldImageUrl.ts b/src/runtime/composables/useCldImageUrl.ts index d91b78c..fddafe4 100644 --- a/src/runtime/composables/useCldImageUrl.ts +++ b/src/runtime/composables/useCldImageUrl.ts @@ -6,7 +6,16 @@ import pkg from '../../../package.json' export const useCldImageUrl = (props: ConstructUrlProps) => { if (!props.options.src) console.error("`[@nuxtjs/cloudinary]`: Property `src` is missing") - const cldCloudName = props.config?.cloud?.cloudName || useRuntimeConfig().public.cloudinary.cloudName + const moduleConfig = useRuntimeConfig().public.cloudinary; + + // There are a few ways to pass in the Cloud Name + // - Component/composable config prop + // - Top level module config + // - Top level module config cloud property + // While the top level module config is redundant, retaining it for convenience as most + // users won't need to pass in more advanced settings via the `cloud` property + + 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') @@ -16,15 +25,17 @@ export const useCldImageUrl = (props: ConstructUrlProps) => { ...props.options }, config: { - ...props.config, + url: moduleConfig.url, cloud: { - cloudName: cldCloudName - } + cloudName: cldCloudName, + ...moduleConfig.cloud + }, + ...props.config, }, analytics: false } - if (useRuntimeConfig().public.cloudinary.analytics) { + if (moduleConfig.analytics) { cldOptions = { ...cldOptions, analytics: Object.assign({ From 9bb12e99381442aae54edd9d6ed322253e5ed943 Mon Sep 17 00:00:00 2001 From: Baroshem Date: Sat, 23 Mar 2024 12:14:22 +0100 Subject: [PATCH 4/8] feat-#194: video player picture in picture --- docs/content/2.components/CldVideoPlayer.md | 70 +++++++++++++-------- package.json | 1 + playground/app.vue | 22 ++----- src/runtime/components/CldVideoPlayer.vue | 8 ++- yarn.lock | 5 ++ 5 files changed, 60 insertions(+), 46 deletions(-) diff --git a/docs/content/2.components/CldVideoPlayer.md b/docs/content/2.components/CldVideoPlayer.md index 2b5269e..588e86b 100644 --- a/docs/content/2.components/CldVideoPlayer.md +++ b/docs/content/2.components/CldVideoPlayer.md @@ -1,5 +1,5 @@ --- -description: +description: --- ## The usage @@ -62,33 +62,49 @@ Check the browser console after playing and pausing the video for logs that were :video-player-with-events +## Picture in Picture + +Picture-in-picture helps your viewers continue their multitasking agenda and maintain context while navigating different apps or interfaces using picture-in-picture functionality. + +```html + +``` + +:cld-video-player{src="videos/mountain-stars" width="900" height="900" style="aspect-ratio: 1620 / 1080" pictureInPictureToggle} + ## General Props -| Prop Name | Type | Default | Description | Example | -| -------------- | -------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | -| autoPlay | string | `"never"` | When, if, should the video automatically play. See `autoplayMode` in [Video Player docs](https://cloudinary.com/documentation/video_player_api_reference#constructor_parameters) | `"on-scroll"` | -| className | string | - | Additional class names added to the video container | `"my-video-player"` | -| colors | object | See below | Player chrome colors | See Colors Below | -| controls | boolean | `true` | Show player controls | `true` | -| fontFace | string | - | Player UI font. Uses Google Fonts. | `"Source Serif Pro"` | -| height | string/number | - | **Required**: Player height | `1080` | -| id | string | - | Video instance ID, defaults to src value | `"my-video"` | -| logo | boolean/object | See Below | Logo to display in Player UI | See Logo Below | -| loop | boolean | `false` | Loop the video | `true` | -| muted | boolean | `false` | Load muted by default | `true` | -| onDataLoad | Function | - | Triggered when video metadata is loaded | See Events Below | -| onError | Function | - | Triggered on video error | See Events Below | -| onMetadataLoad | Function | - | Triggered when video data is loaded | See Events Below | -| onPause | Function | - | Triggered on video pause | See Events Below | -| onPlay | Function | - | Triggered on video play | See Events Below | -| onEnded | Function | - | Triggered when video has ended play | See Events Below | -| playerRef | Ref | - | React ref to access Player instance | See Refs Below | -| showLogo | boolea | `true` | Show the Cloudinary logo on Player | `false` | -| src | string | - | **Required**: Video public ID | `"videos/my-video"` | -| transformation | object/array | - | Transformations to apply to the video | `{ width: 200, height: 200, crop: 'fill' }` | -| version | string | `"1.9.4"` | Cloudinary Video Player version | `"1.9.4"` | -| videoRef | Ref | - | React ref to access video element | See Refs Below | -| width | string/number | - | **Required**: Player width | `1920` | +| Prop Name | Type | Default | Description | Example | +| ---------------------- | -------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | +| autoPlay | string | `"never"` | When, if, should the video automatically play. See `autoplayMode` in [Video Player docs](https://cloudinary.com/documentation/video_player_api_reference#constructor_parameters) | `"on-scroll"` | +| className | string | - | Additional class names added to the video container | `"my-video-player"` | +| colors | object | See below | Player chrome colors | See Colors Below | +| controls | boolean | `true` | Show player controls | `true` | +| fontFace | string | - | Player UI font. Uses Google Fonts. | `"Source Serif Pro"` | +| height | string/number | - | **Required**: Player height | `1080` | +| id | string | - | Video instance ID, defaults to src value | `"my-video"` | +| logo | boolean/object | See Below | Logo to display in Player UI | See Logo Below | +| loop | boolean | `false` | Loop the video | `true` | +| muted | boolean | `false` | Load muted by default | `true` | +| onDataLoad | Function | - | Triggered when video metadata is loaded | See Events Below | +| onError | Function | - | Triggered on video error | See Events Below | +| onMetadataLoad | Function | - | Triggered when video data is loaded | See Events Below | +| onPause | Function | - | Triggered on video pause | See Events Below | +| onPlay | Function | - | Triggered on video play | See Events Below | +| onEnded | Function | - | Triggered when video has ended play | See Events Below | +| playerRef | Ref | - | React ref to access Player instance | See Refs Below | +| showLogo | boolean | `true` | Show the Cloudinary logo on Player | `false` | +| src | string | - | **Required**: Video public ID | `"videos/my-video"` | +| transformation | object/array | - | Transformations to apply to the video | `{ width: 200, height: 200, crop: 'fill' }` | +| version | string | `"1.10.6"` | Cloudinary Video Player version | `"1.9.4"` | +| videoRef | Ref | - | React ref to access video element | See Refs Below | +| width | string/number | - | **Required**: Player width | `1920` | +| pictureInPictureToogle | boolean | - | Enable Picture in Picture mode | true | ## Colors Prop @@ -139,7 +155,7 @@ To do this, create a new Ref instance and pass as ref to the `CldVideoPlayer` co diff --git a/package.json b/package.json index 62978ed..400e8e7 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ }, "dependencies": { "@cloudinary-util/url-loader": "^5.2.1", + "@cloudinary-util/types": "1.0.1", "@nuxt/kit": "^3.5.0", "@unpic/vue": "^0.0.42", "defu": "^6.1.2" diff --git a/playground/app.vue b/playground/app.vue index b89821b..051cdb6 100644 --- a/playground/app.vue +++ b/playground/app.vue @@ -15,9 +15,7 @@ const cldVideoRef = ref();