1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
(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
})();
|
