From 9f44e0474be03e1a7d616db092293df0c0e496a3 Mon Sep 17 00:00:00 2001 From: James Taylor Date: Wed, 25 Aug 2021 14:47:57 -0700 Subject: Integrate quality selection into Plyr MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Jesús --- youtube/static/js/plyr-start.js | 90 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 89 insertions(+), 1 deletion(-) (limited to 'youtube/static/js') diff --git a/youtube/static/js/plyr-start.js b/youtube/static/js/plyr-start.js index e14f33b..49b9f14 100644 --- a/youtube/static/js/plyr-start.js +++ b/youtube/static/js/plyr-start.js @@ -11,6 +11,64 @@ default: captionsActive = false; } +var qualityOptions = []; +var qualityDefault; +for (var src of data['uni_sources']) { + qualityOptions.push(src.quality_string) +} +for (var src of data['pair_sources']) { + qualityOptions.push(src[0].quality_string) +} +if (data['using_pair_sources']) + qualityDefault = data['pair_sources'][data['pair_idx']][0].quality_string; +else if (data['uni_sources'].length != 0) + qualityDefault = data['uni_sources'][data['uni_idx']].quality_string; +else + qualityDefault = 'None'; + + + +// Fix plyr refusing to work with qualities that are strings +Object.defineProperty(Plyr.prototype, 'quality', { + set: function(input) { + const config = this.config.quality; + const options = this.options.quality; + + if (!options.length) { + return; + } + + // removing this line: + //let quality = [!is.empty(input) && Number(input), this.storage.get('quality'), config.selected, config.default].find(is.number); + // replacing with: + quality = input; + let updateStorage = true; + + if (!options.includes(quality)) { + // Plyr sets quality to null at startup, resulting in the erroneous + // calling of this setter function with input = null, and the + // commented out code below would set the quality to something + // unrelated at startup. Comment out and just return. + return; + /*const value = closest(options, quality); + this.debug.warn(`Unsupported quality option: ${quality}, using ${value} instead`); + quality = value; // Don't update storage if quality is not supported + updateStorage = false;*/ + } // Update config + + + config.selected = quality; // Set quality + + this.media.quality = quality; // Save to storage + + if (updateStorage) { + this.storage.set({ + quality + }); + } + } +}); + const player = new Plyr(document.getElementById('js-video-player'), { disableContextMenu: false, captions: { @@ -32,5 +90,35 @@ const player = new Plyr(document.getElementById('js-video-player'), { iconUrl: "/youtube.com/static/modules/plyr/plyr.svg", blankVideo: "/youtube.com/static/modules/plyr/blank.webm", debug: false, - storage: {enabled: false} + storage: {enabled: false}, + quality: { + default: qualityDefault, + options: qualityOptions, + forced: true, + onChange: function(quality) { + if (quality == 'None') + return; + if (quality.includes('(integrated)')) { + for (var i=0; i < data['uni_sources'].length; i++) { + if (data['uni_sources'][i].quality_string == quality) { + changeQuality({'type': 'uni', 'index': i}); + return; + } + } + } else { + for (var i=0; i < data['pair_sources'].length; i++) { + if (data['pair_sources'][i][0].quality_string == quality) { + changeQuality({'type': 'pair', 'index': i}); + return; + } + } + } + }, + }, + settings: ['captions', 'quality', 'speed', 'loop'], +}); + +// Hide the external quality selector +window.addEventListener('DOMContentLoaded', function(){ + document.getElementById('quality-select').hidden = true; }); -- cgit v1.2.3