LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Attempt to show auto video quality

Browse source
This commit is contained in:
Rafael 2022-04-19 15:08:24 -03:00 committed by Thomas Zarebczan
parent 73f27cc67e
commit b5f8a849a1
2 changed files with 30 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
ui/component/viewers/videoViewer/internal/plugins/videojs-hls-quality-selector/plugin.js
View file

@ -4,6 +4,7 @@ import { version as VERSION } from './package.json';
import ConcreteButton from './ConcreteButton'; import ConcreteButton from './ConcreteButton';
import ConcreteMenuItem from './ConcreteMenuItem'; import ConcreteMenuItem from './ConcreteMenuItem';
import * as QUALITY_OPTIONS from 'constants/video'; import * as QUALITY_OPTIONS from 'constants/video';
import { safeGetComputedStyle, simpleSelector } from '../videojs-http-streaming--override/playlist-selectors';
// Default options for the plugin. // Default options for the plugin.
const defaults = {}; const defaults = {};
@ -110,6 +111,29 @@ class HlsQualitySelectorPlugin {
concreteButtonInstance.removeClass('vjs-hidden'); concreteButtonInstance.removeClass('vjs-hidden');
} }
resolveAutoQualityLabel(includeResolution) {
const player = this.player;
const vhs = player.tech(true).vhs;
if (includeResolution && vhs) {
const pixelRatio = this.useDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
const selectedBandwidth = simpleSelector(
vhs.playlists.master,
vhs.systemBandwidth,
parseInt(safeGetComputedStyle(vhs.tech_.el_, 'width'), 10) * pixelRatio,
parseInt(safeGetComputedStyle(vhs.tech_.el_, 'height'), 10) * pixelRatio,
vhs.limitRenditionByPlayerDimensions
);
const quality = selectedBandwidth.attributes.RESOLUTION.height;
return __('Auto (%quality%) --[Video quality popup. Long form.]--', { quality: quality + 'p' });
} else {
return __('Auto --[Video quality. Short form]--');
}
}
resolveOriginalQualityLabel(abbreviatedForm, includeResolution) { resolveOriginalQualityLabel(abbreviatedForm, includeResolution) {
if (includeResolution && this.config.originalHeight) { if (includeResolution && this.config.originalHeight) {
return abbreviatedForm return abbreviatedForm
@ -136,7 +160,7 @@ class HlsQualitySelectorPlugin {
let str; let str;
switch (text) { switch (text) {
case QUALITY_OPTIONS.AUTO: case QUALITY_OPTIONS.AUTO:
str = __('Auto --[Video quality. Short form]--'); str = this.resolveAutoQualityLabel(true);
break; break;
case QUALITY_OPTIONS.ORIGINAL: case QUALITY_OPTIONS.ORIGINAL:
str = this.resolveOriginalQualityLabel(true, false); str = this.resolveOriginalQualityLabel(true, false);
@ -230,15 +254,15 @@ class HlsQualitySelectorPlugin {
levelItems.push( levelItems.push(
this.getQualityMenuItem.call(this, { this.getQualityMenuItem.call(this, {
label: __('Auto --[Video quality. Short form]--'), label: this.resolveAutoQualityLabel(true),
value: QUALITY_OPTIONS.AUTO, value: QUALITY_OPTIONS.AUTO,
selected: !defaultQuality ? true : defaultQuality === QUALITY_OPTIONS.AUTO, selected: !defaultQuality ? true : defaultQuality === QUALITY_OPTIONS.AUTO,
}) })
); );
if (nextLowestQualityItemObj || defaultQuality) { this.setButtonInnerText(
this.setButtonInnerText(nextLowestQualityItemObj ? nextLowestQualityItemObj.label : defaultQuality); nextLowestQualityItemObj ? nextLowestQualityItemObj.label : defaultQuality || QUALITY_OPTIONS.AUTO
} );
if (this._qualityButton) { if (this._qualityButton) {
this._qualityButton.createItems = function () { this._qualityButton.createItems = function () {

2
ui/component/viewers/videoViewer/internal/plugins/videojs-http-streaming--override/playlist-selectors.js
View file

@ -15,7 +15,7 @@ import Playlist from './playlist';
* @param {HTMLElement} el the htmlelement to work on * @param {HTMLElement} el the htmlelement to work on
* @param {string} the proprety to get the style for * @param {string} the proprety to get the style for
*/ */
const safeGetComputedStyle = function(el, property) { export const safeGetComputedStyle = function(el, property) {
if (!el) { if (!el) {
return ''; return '';
} }