Merge branch 'main' into dependabot/npm_and_yarn/next-cloudinary/cloudinary-util/url-loader-5.10.5

Author: colbyfayock

.all-contributorsrc

@@ -281,6 +281,24 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "DevRish",
+      "name": "Rishav Chattopadhyay",
+      "avatar_url": "https://avatars.githubusercontent.com/u/78094670?v=4",
+      "profile": "https://github.com/DevRish",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "Prathamesh010",
+      "name": "Prathamesh Gawas",
+      "avatar_url": "https://avatars.githubusercontent.com/u/41731424?v=4",
+      "profile": "https://github.com/Prathamesh010",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [6.14.2](https://github.com/cloudinary-community/next-cloudinary/compare/v6.14.1...v6.14.2) (2024-10-14)
+
+
+### Bug Fixes
+
+* use more proper type to derive `CldVideoPlayerProps` ([#537](https://github.com/cloudinary-community/next-cloudinary/issues/537)) ([65c3dd1](https://github.com/cloudinary-community/next-cloudinary/commit/65c3dd199176cd91d43161289672381b8c640b68))
+
 ## [6.14.1](https://github.com/cloudinary-community/next-cloudinary/compare/v6.14.0...v6.14.1) (2024-10-04)
 
 

README.md

@@ -203,6 +203,8 @@ pnpm test
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="http://yashmathur.live"><img src="https://avatars.githubusercontent.com/u/69838816?v=4?s=100" width="100px;" alt="Yash Mathur"/><br /><sub><b>Yash Mathur</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=Yash-sudo-web" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/mr-loop-1"><img src="https://avatars.githubusercontent.com/u/62374784?v=4?s=100" width="100px;" alt="Abdul Samad"/><br /><sub><b>Abdul Samad</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=mr-loop-1" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/DevRish"><img src="https://avatars.githubusercontent.com/u/78094670?v=4?s=100" width="100px;" alt="Rishav Chattopadhyay"/><br /><sub><b>Rishav Chattopadhyay</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=DevRish" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Prathamesh010"><img src="https://avatars.githubusercontent.com/u/41731424?v=4?s=100" width="100px;" alt="Prathamesh Gawas"/><br /><sub><b>Prathamesh Gawas</b></sub></a><br /><a href="https://github.com/cloudinary-community/next-cloudinary/commits?author=Prathamesh010" title="Documentation">📖</a></td>
     </tr>
   </tbody>
 </table>

docs/pages/cldimage/configuration.mdx

@@ -131,6 +131,12 @@ right inside of Next.js.
       example: () => (<code>45</code>),
       more: () => (<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/transformation_reference#a_angle">More Info</a>)
     },
+    {
+      prop: 'aspectRatio',
+      type: 'string',
+      example: () => (<code>16:9</code>),
+      more: () => (<a className="whitespace-nowrap" href="https://cloudinary.com/documentation/transformation_reference#ar_aspect_ratio">More Info</a>)
+    },
     {
       prop: 'background',
       type: 'string',
@@ -251,6 +257,28 @@ angle={15}
 
 [Learn more about angle](https://cloudinary.com/documentation/transformation_reference#b_background) on the Cloudinary docs.
 
+### `aspectRatio`
+
+Resizes the image to a new aspect ratio.
+
+**Usage constraints**
+
+The `aspectRatio` prop can be applied only in the following crop modes: `auto`, `crop`, `fill`, `lfill`, `fill_pad` and `thumb`.
+
+Also, for it to work properly, `width` and `height` props must be absent, as they prevent the aspect ratio from applying as a transformation.
+However, `width` and `height` are required props for any Next Image component, unless we use the `fill` prop.
+
+So, whenever the `aspectRatio` prop is used, the `fill` prop must always be present alongside it, the `crop` prop must be set to a supported 
+crop mode, and the `width` and `height` props must be absent.
+
+**Examples**
+
+```jsx copy
+aspectRatio="16:9"
+```
+
+[Learn more about aspectRatio](https://cloudinary.com/documentation/transformation_reference#ar_aspect_ratio) on the Cloudinary docs.
+
 ### `background`
 
 Applies a background to empty or transparent areas.

docs/pages/guides/_meta.json

@@ -7,5 +7,6 @@
   "responsive-images": "Responsive Images",
   "social-media-card": "Social Media Card",
   "text-overlays": "Text Overlays",
-  "uploading-images-and-videos": "Uploading Images & Videos"
+  "uploading-images-and-videos": "Uploading Images & Videos",
+  "using-custom-domains": "Using Custom Domains"
 }

docs/pages/guides/using-custom-domains.mdx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import Head from 'next/head';
+import { CldImage } from 'next-cloudinary';
+import OgImage from '../../components/OgImage';
+import styles from '../../styles/Docs.module.scss';
+import { Callout } from 'nextra-theme-docs';
+
+<Head>
+  <title>Using Next Cloudinary with Custom Domains</title>
+  <meta name="og:title" content="Using Next Cloudinary with Custom Domain" />
+  <meta name="og:url" content={`https://next.cloudinary.dev/guides/using-custom-domains`} />
+</Head>
+
+<OgImage
+  title="Using Custom Domains - Next Cloudinary"
+  twitterTitle="Using Next Cloudinary with Custom Domains"
+/>
+
+# Using Custom Domains
+
+When using Next Cloudinary with a custom domain in your Next.js application, you can serve your media assets with your own branded URLs. 
+
+<Callout type="info">
+  This feature is relevant only for users on Advanced plans or higher. Advanced plan users can request a custom domain with Cloudinary. [Learn more](https://support.cloudinary.com/hc/en-us/articles/202520562-Can-we-deliver-our-assets-using-a-subdomain-of-our-own-domain-like-cdn-example-com)
+</Callout>
+
+## Example
+
+Display images and videos using your custom domain with the `CldImage` or `CldVideoPlayer` component.
+
+```jsx
+<CldImage
+  src={src}
+  config={{
+    privateCdn: true, // Set to true when using a custom domain
+    secureDistribution: 'your-custom-domain.com', // Set your custom domain here
+  }}
+/>
+```
+
+## Learn More
+* [CldImage Config](/cldimage/configuration#config)
+* [CldVideoPlayer Config](/cldvideoplayer/configuration#configuration--delivery)

next-cloudinary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-cloudinary",
-  "version": "6.14.1",
+  "version": "6.14.2",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx

@@ -26,7 +26,7 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
     onPlay,
     onEnded,
     width,
-  } = props as CldVideoPlayerProps;
+  } = props;
 
   const uniqueId = useId();
 

next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.types.ts

@@ -2,14 +2,13 @@ import { MutableRefObject } from 'react';
 import {
   CloudinaryVideoPlayer,
   CloudinaryVideoPlayerOptionsLogo,
-  CloudinaryVideoPlayerOptions
 } from '@cloudinary-util/types';
-import { ConfigOptions } from "@cloudinary-util/url-loader";
+import { ConfigOptions, GetVideoPlayerOptions } from "@cloudinary-util/url-loader";
 
 import { GetCldImageUrlOptions } from '../../helpers/getCldImageUrl';
 import { GetCldVideoUrlOptions } from '../../helpers/getCldVideoUrl';
 
-export type CldVideoPlayerProps = Omit<CloudinaryVideoPlayerOptions, "cloud_name" | "autoplayMode" | "publicId" | "secure" | "showLogo" | "logoImageUrl" | "logoOnclickUrl"> & {
+export type CldVideoPlayerProps = Omit<GetVideoPlayerOptions, "cloud_name" | "autoplayMode" | "publicId" | "secure" | "showLogo" | "logoImageUrl" | "logoOnclickUrl"> & {
   className?: string;
   config?: ConfigOptions;
   id?: string;
@@ -31,4 +30,4 @@ export interface CldVideoPlayerPropsLogo {
   imageUrl?: CloudinaryVideoPlayerOptionsLogo['logoImageUrl'];
   logo?: boolean;
   onClickUrl?: CloudinaryVideoPlayerOptionsLogo['logoOnclickUrl'];
-}
+}