diff --git a/.stackblitz/app.vue b/.stackblitz/app.vue index 709a3fc..a32f2ea 100644 --- a/.stackblitz/app.vue +++ b/.stackblitz/app.vue @@ -1,44 +1,46 @@ diff --git a/.stackblitz/package.json b/.stackblitz/package.json index 5a594f1..3b86eb6 100644 --- a/.stackblitz/package.json +++ b/.stackblitz/package.json @@ -11,6 +11,6 @@ "nuxt": "^3.8.0" }, "dependencies": { - "@nuxtjs/cloudinary": "^2.6.0" + "@nuxtjs/cloudinary": "^2.7.2" } } diff --git a/.stackblitz/yarn.lock b/.stackblitz/yarn.lock index 9f90e5d..8293822 100644 --- a/.stackblitz/yarn.lock +++ b/.stackblitz/yarn.lock @@ -484,10 +484,15 @@ 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/types@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@cloudinary-util/types/-/types-1.0.1.tgz#1bbfc0cffaf5d543e13f9dd4864a9aebc6496394" + integrity sha512-aj/m3Sn5RSYKk6dAZJcjerKfVNrcCyL6v6pcDl4aNpQ3zSWMOvnIrzCidE9paaw1r+ZWonjNnhkA0anLdwRRfA== + +"@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" @@ -1168,12 +1173,13 @@ vite-plugin-checker "^0.6.2" vue-bundle-renderer "^2.0.0" -"@nuxtjs/cloudinary@^2.6.0": - version "2.6.0" - resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.6.0.tgz#ab27227e6877bef97ff1f3e7b34947f0e9942034" - integrity sha512-SU18YU0WUgLVECzjpMudfI5h2nVSlY73CPwKxR4p3TCX7lKzrXX02G7i7FDp7yZtOHD2a17UbFdD6a+KsKAetA== +"@nuxtjs/cloudinary@^2.7.2": + version "2.7.2" + resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.7.2.tgz#74110eee3b7e4de159ae81baafa1437cfc5d2a6f" + integrity sha512-BreBrTM54X5PT7i7BiB9/VuFM4eKV7UhseKSgIRjCuWbf4AR2wCvXJV/FvW6ReYFx2JylhwWLbNWIcq9wT9FOA== dependencies: - "@cloudinary-util/url-loader" "^4.2.0" + "@cloudinary-util/types" "1.0.1" + "@cloudinary-util/url-loader" "^5.2.1" "@nuxt/kit" "^3.5.0" "@unpic/vue" "^0.0.42" defu "^6.1.2" 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/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/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 + +``` + + 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/docs/package.json b/docs/package.json index cdf2266..a9cb07f 100644 --- a/docs/package.json +++ b/docs/package.json @@ -17,6 +17,6 @@ "typescript": "^5.3.3" }, "dependencies": { - "@nuxtjs/cloudinary": "^2.6.0" + "@nuxtjs/cloudinary": "^2.7.2" } } diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml index 8dc6155..1a71961 100644 --- a/docs/pnpm-lock.yaml +++ b/docs/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@nuxtjs/cloudinary': - specifier: ^2.6.0 - version: 2.6.0(typescript@5.3.3) + specifier: ^2.7.2 + version: 2.7.2(typescript@5.3.3) devDependencies: '@iconify-json/ph': specifier: ^1.1.10 @@ -378,8 +378,12 @@ packages: mime: 3.0.0 dev: true - /@cloudinary-util/url-loader@4.2.0: - resolution: {integrity: sha512-fpCFqFPAN/f9Gt//25qLXNDYwy5EcOudRzDPOrsEBH6aMwEdFaJuPxvLiP0IP5MCihKji/XDr9QJQ9Wa+amNSA==} + /@cloudinary-util/types@1.0.1: + resolution: {integrity: sha512-aj/m3Sn5RSYKk6dAZJcjerKfVNrcCyL6v6pcDl4aNpQ3zSWMOvnIrzCidE9paaw1r+ZWonjNnhkA0anLdwRRfA==} + dev: false + + /@cloudinary-util/url-loader@5.2.1: + resolution: {integrity: sha512-1GDPCnRYSGlnPqEdcvH/1h0puAYoF9tJazV/zNx3ptCN0PbwBWEw+ksZm6mCQF2cr9ofDE3B+C5YdPLLsvbuQQ==} dependencies: '@cloudinary-util/util': 3.0.0 '@cloudinary/url-gen': 1.15.0 @@ -1212,7 +1216,7 @@ packages: nuxt: ^3.8.2 vite: '*' dependencies: - '@nuxt/kit': 3.9.0 + '@nuxt/kit': 3.9.3 '@nuxt/schema': 3.9.0 execa: 7.2.0 nuxt: 3.9.3(typescript@5.3.3)(vite@5.0.11) @@ -1648,10 +1652,11 @@ packages: - vue-tsc dev: true - /@nuxtjs/cloudinary@2.6.0(typescript@5.3.3): - resolution: {integrity: sha512-SU18YU0WUgLVECzjpMudfI5h2nVSlY73CPwKxR4p3TCX7lKzrXX02G7i7FDp7yZtOHD2a17UbFdD6a+KsKAetA==} + /@nuxtjs/cloudinary@2.7.2(typescript@5.3.3): + resolution: {integrity: sha512-BreBrTM54X5PT7i7BiB9/VuFM4eKV7UhseKSgIRjCuWbf4AR2wCvXJV/FvW6ReYFx2JylhwWLbNWIcq9wT9FOA==} dependencies: - '@cloudinary-util/url-loader': 4.2.0 + '@cloudinary-util/types': 1.0.1 + '@cloudinary-util/url-loader': 5.2.1 '@nuxt/kit': 3.9.3 '@unpic/vue': 0.0.42(typescript@5.3.3) defu: 6.1.4 @@ -1664,7 +1669,7 @@ packages: /@nuxtjs/color-mode@3.3.2: resolution: {integrity: sha512-BLpBfrYZngV2QWFQ4HNEFwAXa3Pno43Ge+2XHcZJTTa1Z4KzRLvOwku8yiyV3ovIaaXKGwduBdv3Z5Ocdp0/+g==} dependencies: - '@nuxt/kit': 3.9.0 + '@nuxt/kit': 3.9.3 lodash.template: 4.5.0 pathe: 1.1.1 transitivePeerDependencies: @@ -1714,13 +1719,13 @@ packages: /@nuxtjs/tailwindcss@6.10.1: resolution: {integrity: sha512-LqOWiKUpCYErQoVTA7HN6QkjOBVGC24AmfgO/csQHRsRp8Bvw7rW+85fZ1cWY4KqlY0Rvx6pwZuOTcyiH31Orw==} dependencies: - '@nuxt/kit': 3.9.0 + '@nuxt/kit': 3.9.3 autoprefixer: 10.4.16(postcss@8.4.32) chokidar: 3.5.3 clear-module: 4.1.2 colorette: 2.0.20 cookie-es: 1.0.0 - defu: 6.1.3 + defu: 6.1.4 destr: 2.0.2 h3: 1.9.0 iron-webcrypto: 1.0.0 @@ -4200,7 +4205,7 @@ packages: hasBin: true dependencies: colorette: 2.0.20 - defu: 6.1.3 + defu: 6.1.4 https-proxy-agent: 7.0.2 mri: 1.2.0 node-fetch-native: 1.4.1 @@ -6167,7 +6172,7 @@ packages: '@iconify/collections': 1.0.368 '@iconify/vue': 4.1.1(vue@3.4.15) '@nuxt/devtools-kit': 1.0.6(nuxt@3.9.3)(vite@5.0.11) - '@nuxt/kit': 3.9.0 + '@nuxt/kit': 3.9.3 transitivePeerDependencies: - nuxt - rollup diff --git a/package.json b/package.json index 4460e09..16cc95d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nuxtjs/cloudinary", - "version": "2.6.0", + "version": "2.7.2", "description": "Cloudinary module for Nuxt", "license": "MIT", "type": "module", @@ -48,7 +48,8 @@ "stackblitz": "cd .stackblitz && yarn && yarn dev" }, "dependencies": { - "@cloudinary-util/url-loader": "^4.2.0", + "@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..57c495f 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();