From ec176eeccf3f05a697af12dc79f6081f2ae49488 Mon Sep 17 00:00:00 2001 From: Sasha S Date: Mon, 28 Oct 2024 23:24:50 +0300 Subject: [PATCH] feat: add measureShortEdge option to use a short edge to display the resolution for horizontal video --- README.md | 6 ++ src/plugin.js | 3 +- src/quality-menu-button.js | 4 +- test/plugin.test.js | 152 +++++++++++++++++++++++++++++++++++++ 4 files changed, 163 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 49bac40..f0faf86 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,12 @@ When `true`, the plugin will attempt to categorize renditions by lines of horizo When `true`, the plugin will attach bitrate information to the resolution labels (e.g. `720p @ 13806 kbps`). This option has no effect when `useResolutionLabels` is `false` or when resolution information is unavailable. +### `measureShortEdge` + +> Type: `boolean` Default: `false` + +When `true`, the plugin will use a short edge to display the resolution for horizontal video. + ## Usage To include videojs-contrib-quality-menu on your website or web application, use any of the following methods. diff --git a/src/plugin.js b/src/plugin.js index ec5302b..d83c66e 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -7,7 +7,8 @@ const defaults = { sdBitrateLimit: 2000000, useResolutionLabels: true, resolutionLabelBitrates: false, - defaultResolution: 'none' + defaultResolution: 'none', + measureShortEdge: false }; /** diff --git a/src/quality-menu-button.js b/src/quality-menu-button.js index 881b509..9e32ba7 100644 --- a/src/quality-menu-button.js +++ b/src/quality-menu-button.js @@ -188,7 +188,9 @@ class QualityMenuButton extends MenuButton { for (let i = 0, l = this.qualityLevels_.length; i < l; i++) { const level = this.qualityLevels_[i]; const active = this.qualityLevels_.selectedIndex === i; - const lines = level.height; + const lines = this.options_.measureShortEdge ? + Math.min(level.height, level.width) : + level.height; // Do not include an audio-only level if (!lines) { diff --git a/test/plugin.test.js b/test/plugin.test.js index 4a13bde..e20ba99 100644 --- a/test/plugin.test.js +++ b/test/plugin.test.js @@ -823,3 +823,155 @@ QUnit.test('Clicking menu item calls quality level enabled functions', function( assert.ok(levels[2].enabled, 'all levels enabled'); assert.ok(levels[3].enabled, 'all levels enabled'); }); + +QUnit.test('Correct display of resolutions for horizontal video without measureShortEdge option', function(assert) { + this.player.qualityMenu(); + // Tick the clock forward enough to trigger the player to be "ready". + this.clock.tick(1); + + const levels = this.player.qualityLevels(); + const button = this.player.getChild('controlBar').getChild('QualityMenuButton'); + + levels.addQualityLevel({ + id: '1', + bandwidth: 2000001, + width: 1280, + height: 720, + enabled: () => {} + }); + levels.addQualityLevel({ + id: '2', + bandwidth: 3000001, + width: 1920, + height: 1080, + enabled: () => {} + }); + + assert.equal(button.items.length, 3, 'created 3 menu items'); + + assert.equal(button.items[0].controlText(), '1080p', '1080p'); + assert.deepEqual(button.items[0].levels_, [1], '1080p variants added to 1080p menu item'); + + assert.equal(button.items[1].controlText(), '720p', '720p'); + assert.deepEqual(button.items[1].levels_, [0], '720p variants added to 720p menu item'); + + assert.equal(button.items[2].controlText(), 'Auto', 'Auto'); + assert.deepEqual( + button.items[2].levels_, [0, 1], + 'Auto variants added to Auto menu item' + ); +}); + +QUnit.test('Correct display of resolutions for vertical video without measureShortEdge option', function(assert) { + this.player.qualityMenu(); + // Tick the clock forward enough to trigger the player to be "ready". + this.clock.tick(1); + + const levels = this.player.qualityLevels(); + const button = this.player.getChild('controlBar').getChild('QualityMenuButton'); + + levels.addQualityLevel({ + id: '1', + bandwidth: 2000001, + width: 720, + height: 1280, + enabled: () => {} + }); + levels.addQualityLevel({ + id: '2', + bandwidth: 3000001, + width: 1080, + height: 1920, + enabled: () => {} + }); + + assert.equal(button.items.length, 3, 'created 3 menu items'); + + assert.equal(button.items[0].controlText(), '1920p', '1920p'); + assert.deepEqual(button.items[0].levels_, [1], '1920p variants added to 1920p menu item'); + + assert.equal(button.items[1].controlText(), '1280p', '1280p'); + assert.deepEqual(button.items[1].levels_, [0], '1280p variants added to 1280p menu item'); + + assert.equal(button.items[2].controlText(), 'Auto', 'Auto'); + assert.deepEqual( + button.items[2].levels_, [0, 1], + 'Auto variants added to Auto menu item' + ); +}); + +QUnit.test('Correct display of resolutions for horizontal video when measureShortEdge option', function(assert) { + this.player.qualityMenu({ measureShortEdge: true }); + // Tick the clock forward enough to trigger the player to be "ready". + this.clock.tick(1); + + const levels = this.player.qualityLevels(); + const button = this.player.getChild('controlBar').getChild('QualityMenuButton'); + + levels.addQualityLevel({ + id: '1', + bandwidth: 2000001, + width: 1280, + height: 720, + enabled: () => {} + }); + levels.addQualityLevel({ + id: '2', + bandwidth: 3000001, + width: 1920, + height: 1080, + enabled: () => {} + }); + + assert.equal(button.items.length, 3, 'created 3 menu items'); + + assert.equal(button.items[0].controlText(), '1080p', '1080p'); + assert.deepEqual(button.items[0].levels_, [1], '1080p variants added to 1080p menu item'); + + assert.equal(button.items[1].controlText(), '720p', '720p'); + assert.deepEqual(button.items[1].levels_, [0], '720p variants added to 720p menu item'); + + assert.equal(button.items[2].controlText(), 'Auto', 'Auto'); + assert.deepEqual( + button.items[2].levels_, [0, 1], + 'Auto variants added to Auto menu item' + ); +}); + +QUnit.test('Correct display of resolutions for vertical video when measureShortEdge option', function(assert) { + this.player.qualityMenu({ measureShortEdge: true }); + // Tick the clock forward enough to trigger the player to be "ready". + this.clock.tick(1); + + const levels = this.player.qualityLevels(); + const button = this.player.getChild('controlBar').getChild('QualityMenuButton'); + + levels.addQualityLevel({ + id: '1', + bandwidth: 2000001, + width: 720, + height: 1280, + enabled: () => {} + }); + levels.addQualityLevel({ + id: '2', + bandwidth: 3000001, + width: 1080, + height: 1920, + enabled: () => {} + }); + + assert.equal(button.items.length, 3, 'created 3 menu items'); + + assert.equal(button.items[0].controlText(), '1080p', '1080p'); + assert.deepEqual(button.items[0].levels_, [1], '1080p variants added to 1080p menu item'); + + assert.equal(button.items[1].controlText(), '720p', '720p'); + assert.deepEqual(button.items[1].levels_, [0], '720p variants added to 720p menu item'); + + assert.equal(button.items[2].controlText(), 'Auto', 'Auto'); + assert.deepEqual( + button.items[2].levels_, [0, 1], + 'Auto variants added to Auto menu item' + ); +});