(function main() { 'use strict'; // Captions let captionsActive = false; if (data.settings.subtitles_mode === 2 || (data.settings.subtitles_mode === 1 && data.has_manual_captions)) { captionsActive = true; } // AutoPlay let autoplayActive = data.settings.autoplay_videos || false; let qualityOptions = []; let qualityDefault; for (let src of data.uni_sources) { qualityOptions.push(src.quality_string); } for (let src of data.pair_sources) { qualityOptions.push(src.quality_string); } if (data.using_pair_sources) { qualityDefault = data.pair_sources[data.pair_idx].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; let quality = input; let updateStorage = true; if (!options.length) { return; } if (!options.includes(quality)) { return; } // Update config config.selected = quality; // Set quality this.media.quality = quality; // Save to storage if (updateStorage) { this.storage.set({ quality }); } }, }); const playerOptions = { // Learning about autoplay permission https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy/autoplay#syntax autoplay: autoplayActive, disableContextMenu: false, captions: { active: captionsActive, language: data.settings.subtitles_language, }, controls: [ 'play-large', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen', ], iconUrl: '/youtube.com/static/modules/plyr/plyr.svg', blankVideo: '/youtube.com/static/modules/plyr/blank.webm', debug: false, storage: { enabled: false }, quality: { default: qualityDefault, options: qualityOptions, forced: true, onChange: function (quality) { if (quality == 'None') { return; } if (quality.includes('(integrated)')) { for (let i = 0; i < data.uni_sources.length; i++) { if (data.uni_sources[i].quality_string == quality) { changeQuality({ type: 'uni', index: i }); return; } } } else { for (let i = 0; i < data.pair_sources.length; i++) { if (data.pair_sources[i].quality_string == quality) { changeQuality({ type: 'pair', index: i }); return; } } } }, }, previewThumbnails: { enabled: storyboard_url !== null, src: [storyboard_url], }, settings: ['captions', 'quality', 'speed', 'loop'], tooltips: { controls: true, }, } const player = new Plyr(document.getElementById('js-video-player'), playerOptions); // disable double click to fullscreen // https://github.com/sampotts/plyr/issues/1370#issuecomment-528966795 player.eventListeners.forEach(function(eventListener) { if(eventListener.type === 'dblclick') { eventListener.element.removeEventListener(eventListener.type, eventListener.callback, eventListener.options); } }); // Add .started property, true after the playback has been started // Needed so controls won't be hidden before playback has started player.started = false; player.once('playing', function(){this.started = true}); // Custom styles for plyr similar to shaka-player const playerUI = document.querySelector(".plyr"); if (playerUI) { playerUI.classList.add("plyr--minimal"); const controls = document.querySelector(".plyr__controls"); const progressContainer = document.querySelector(".plyr__progress__container"); const topControls = document.createElement("div"); topControls.classList.add("plyr__controls__top"); document.querySelectorAll(".plyr__controls__item").forEach((item) => { if (!item.classList.contains("plyr__progress__container")) { topControls.appendChild(item); } }); // Insert new structure to player controls.prepend(topControls); controls.appendChild(progressContainer); } // End of custom styles })();