Merge branch 'master' into infra/agents.md

Author: tsi

CHANGELOG.md

@@ -1,3 +1,21 @@
+## [3.8.1](https://github.com/cloudinary/cloudinary-video-player/compare/v3.8.0...v3.8.1) (2026-02-22)
+
+
+### Bug Fixes
+
+* remove dpr from url ([#985](https://github.com/cloudinary/cloudinary-video-player/issues/985)) ([ace2046](https://github.com/cloudinary/cloudinary-video-player/commit/ace2046ad24795d5b7ca39fbb187b8770002f884))
+
+
+
+# [3.8.0](https://github.com/cloudinary/cloudinary-video-player/compare/v3.7.2...v3.8.0) (2026-02-22)
+
+
+### Features
+
+* add responsive breakpoints ([#981](https://github.com/cloudinary/cloudinary-video-player/issues/981)) ([be477e6](https://github.com/cloudinary/cloudinary-video-player/commit/be477e6fe9e9ff76018c6cb07518fab2bd58066c))
+
+
+
 ## [3.7.2](https://github.com/cloudinary/cloudinary-video-player/compare/v3.7.1...v3.7.2) (2026-01-21)
 
 

docs/breakpoints.html

@@ -32,7 +32,7 @@
       const player = cloudinary.videoPlayer('player-with-breakpoints', {
         cloudName: 'demo',
         breakpoints: true,
-        dpr: 2.0
+        maxDpr: 2.0
       });
       player.source('sea_turtle');
 
@@ -89,7 +89,7 @@ <h3>Breakpoints Example (DPR 2.0)</h3>
         <pre><code>const player = cloudinary.videoPlayer('player', {
   cloudName: 'demo',
   breakpoints: true,
-  dpr: 2.0
+  maxDpr: 2.0
 });
 
 player.source('sea_turtle');</code></pre>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudinary-video-player",
-  "version": "3.7.2",
+  "version": "3.8.1",
   "description": "Cloudinary Video Player",
   "author": "Cloudinary",
   "license": "MIT",

package.json

@@ -279,12 +279,12 @@
       "default": false,
       "description": "Enable responsive video resolution based on player width and device pixel ratio"
     },
-    "dpr": {
+    "maxDpr": {
       "type": "number",
       "minimum": 1.0,
       "maximum": 2.0,
       "default": 2.0,
-      "description": "Device pixel ratio for responsive video (1.0, 1.5, or 2.0)"
+      "description": "Maximum device pixel ratio cap for breakpoint rendition selection (1.0, 1.5, or 2.0)"
     },
     "resourceType": {
       "type": "string",

src/config/configSchema.json

@@ -17,11 +17,8 @@ import { DEFAULT_DPR, RENDITIONS } from './models/video-source/video-source.cons
 
 import recommendationsOverlay from 'components/recommendations-overlay';
 
-/**
- * Effective DPR for breakpoints: min(user value, device DPR, cap of DEFAULT_DPR).
- */
-export const getEffectiveDpr = (userDpr, deviceDpr) =>
-  Math.min(userDpr ?? DEFAULT_DPR, deviceDpr ?? DEFAULT_DPR, DEFAULT_DPR);
+export const getEffectiveDpr = (maxDpr, deviceDpr) =>
+  Math.min(maxDpr ?? DEFAULT_DPR, deviceDpr ?? DEFAULT_DPR, DEFAULT_DPR);
 
 const DEFAULT_PARAMS = {
   transformation: {},
@@ -153,13 +150,13 @@ class CloudinaryContext {
         { hasUserPosterOptions: hasUserPosterOptions || null }
       );
 
-      // Calculate breakpoint transformation: requiredWidth = playerWidth * dpr, then closest breakpoint as width (no dpr in transformation).
+      // Calculate breakpoint transformation: requiredWidth = playerWidth * effectiveDpr, then closest breakpoint as width (no dpr in transformation).
       if (options.breakpoints) {
         const playerEl = this.player.el();
         const playerWidth = playerEl?.clientWidth;
         const win = playerEl?.ownerDocument?.defaultView;
         const deviceDpr = win?.devicePixelRatio ?? DEFAULT_DPR;
-        const dpr = getEffectiveDpr(options.dpr, deviceDpr);
+        const dpr = getEffectiveDpr(options.maxDpr, deviceDpr);
         const requiredWidth = playerWidth * dpr;
         const width = RENDITIONS.find(rendition => rendition >= requiredWidth) || RENDITIONS[RENDITIONS.length - 1];
         options.breakpointTransformation = {

src/plugins/cloudinary/index.js

@@ -45,7 +45,7 @@ const getSourceOptions = (sourceOptions = {}) => ({
   interactionAreas: hasConfig(sourceOptions.interactionAreas),
   videoSources: hasConfig(sourceOptions.videoSources),
   breakpoints: sourceOptions.breakpoints,
-  dpr: sourceOptions.dpr,
+  maxDpr: sourceOptions.maxDpr,
 });
 
 const getTextTracksOptions = (textTracks = {}) => {