Blocking large media elements also prevents autoplay, regardless of size · gorhill/uBlock@73ce4e6 (original) (raw)
`@@ -28,34 +28,26 @@ if ( typeof vAPI !== 'object' || vAPI.loadAllLargeMedia instanceof Function ) {
`
28
28
`return;
`
29
29
`}
`
30
30
``
31
``
`-
/******************************************************************************/
`
32
``
-
33
31
`const largeMediaElementAttribute = 'data-' + vAPI.sessionId;
`
34
32
`const largeMediaElementSelector =
`
35
33
`':root audio[' + largeMediaElementAttribute + '],\n' +
`
36
34
`':root img[' + largeMediaElementAttribute + '],\n' +
`
37
35
`':root picture[' + largeMediaElementAttribute + '],\n' +
`
38
36
`':root video[' + largeMediaElementAttribute + ']';
`
39
37
``
40
``
`-
/******************************************************************************/
`
``
38
`+
const isMediaElement = elem =>
`
``
39
`+
(/^(?:audio|img|picture|video)$/.test(elem.localName));
`
41
40
``
42
``
`-
const isMediaElement = function(elem) {
`
43
``
`-
return /^(?:audio|img|picture|video)$/.test(elem.localName);
`
44
``
`-
};
`
``
41
`+
const isPlayableMediaElement = elem =>
`
``
42
`+
(/^(?:audio|video)$/.test(elem.localName));
`
45
43
``
46
44
`/******************************************************************************/
`
47
45
``
48
46
`const mediaNotLoaded = function(elem) {
`
49
47
`switch ( elem.localName ) {
`
50
48
`case 'audio':
`
51
``
`-
case 'video': {
`
52
``
`-
const src = elem.src || '';
`
53
``
`-
if ( src.startsWith('blob:') ) {
`
54
``
`-
elem.autoplay = false;
`
55
``
`-
elem.pause();
`
56
``
`-
}
`
``
49
`+
case 'video':
`
57
50
`return elem.readyState === 0 || elem.error !== null;
`
58
``
`-
}
`
59
51
`case 'img': {
`
60
52
`if ( elem.naturalWidth !== 0 || elem.naturalHeight !== 0 ) {
`
61
53
`break;
`
`@@ -99,29 +91,29 @@ const surveyMissingMediaElements = function() {
`
99
91
`return largeMediaElementCount;
`
100
92
`};
`
101
93
``
102
``
`-
if ( surveyMissingMediaElements() === 0 ) { return; }
`
103
``
-
104
``
`-
// Insert CSS to highlight blocked media elements.
`
105
``
`-
if ( vAPI.largeMediaElementStyleSheet === undefined ) {
`
106
``
`-
vAPI.largeMediaElementStyleSheet = [
`
107
``
`-
largeMediaElementSelector + ' {',
`
108
``
`-
'border: 2px dotted red !important;',
`
109
``
`-
'box-sizing: border-box !important;',
`
110
``
`-
'cursor: zoom-in !important;',
`
111
``
`-
'display: inline-block;',
`
112
``
`-
'filter: none !important;',
`
113
``
`-
'font-size: 1rem !important;',
`
114
``
`-
'min-height: 1em !important;',
`
115
``
`-
'min-width: 1em !important;',
`
116
``
`-
'opacity: 1 !important;',
`
117
``
`-
'outline: none !important;',
`
118
``
`-
'transform: none !important;',
`
119
``
`-
'visibility: visible !important;',
`
120
``
`-
'z-index: 2147483647',
`
121
``
`-
'}',
`
122
``
`-
].join('\n');
`
123
``
`-
vAPI.userStylesheet.add(vAPI.largeMediaElementStyleSheet);
`
124
``
`-
vAPI.userStylesheet.apply();
`
``
94
`+
if ( surveyMissingMediaElements() ) {
`
``
95
`+
// Insert CSS to highlight blocked media elements.
`
``
96
`+
if ( vAPI.largeMediaElementStyleSheet === undefined ) {
`
``
97
`+
vAPI.largeMediaElementStyleSheet = [
`
``
98
`+
largeMediaElementSelector + ' {',
`
``
99
`+
'border: 2px dotted red !important;',
`
``
100
`+
'box-sizing: border-box !important;',
`
``
101
`+
'cursor: zoom-in !important;',
`
``
102
`+
'display: inline-block;',
`
``
103
`+
'filter: none !important;',
`
``
104
`+
'font-size: 1rem !important;',
`
``
105
`+
'min-height: 1em !important;',
`
``
106
`+
'min-width: 1em !important;',
`
``
107
`+
'opacity: 1 !important;',
`
``
108
`+
'outline: none !important;',
`
``
109
`+
'transform: none !important;',
`
``
110
`+
'visibility: visible !important;',
`
``
111
`+
'z-index: 2147483647',
`
``
112
`+
'}',
`
``
113
`+
].join('\n');
`
``
114
`+
vAPI.userStylesheet.add(vAPI.largeMediaElementStyleSheet);
`
``
115
`+
vAPI.userStylesheet.apply();
`
``
116
`+
}
`
125
117
`}
`
126
118
``
127
119
`/******************************************************************************/
`
`@@ -258,6 +250,27 @@ document.addEventListener('error', onLoadError, true);
`
258
250
``
259
251
`/******************************************************************************/
`
260
252
``
``
253
`+
const autoPausedMedia = new WeakMap();
`
``
254
+
``
255
`+
for ( const elem of document.querySelectorAll('audio,video') ) {
`
``
256
`+
elem.setAttribute('autoplay', 'false');
`
``
257
`+
}
`
``
258
+
``
259
`+
const preventAutoplay = function(ev) {
`
``
260
`+
const elem = ev.target;
`
``
261
`+
if ( isPlayableMediaElement(elem) === false ) { return; }
`
``
262
`+
const currentSrc = elem.getAttribute('src') || '';
`
``
263
`+
const pausedSrc = autoPausedMedia.get(elem);
`
``
264
`+
if ( pausedSrc === currentSrc ) { return; }
`
``
265
`+
autoPausedMedia.set(elem, currentSrc);
`
``
266
`+
elem.setAttribute('autoplay', 'false');
`
``
267
`+
elem.pause();
`
``
268
`+
};
`
``
269
+
``
270
`+
document.addEventListener('timeupdate', preventAutoplay, true);
`
``
271
+
``
272
`+
/******************************************************************************/
`
``
273
+
261
274
`vAPI.loadAllLargeMedia = function() {
`
262
275
`document.removeEventListener('click', onMouseClick, true);
`
263
276
`document.removeEventListener('loadeddata', onLoadedData, true);
`