showImages: Fix audio playing in the background (#5521)

lib/modules/showImages.js

@@ -18,12 +18,14 @@ import type {
 	GenericMedia,
 } from '../core/host';
 import { Host } from '../core/host';
+import { loadOptions } from '../core/init';
 import { Module } from '../core/module';
 import {
 	positiveModulo,
 	downcast,
 	filterMap,
 	Thing,
+	PagePhases,
 	SelectedThing,
 	addCSS,
 	batch,
@@ -36,6 +38,7 @@ import {
 	frameThrottle,
 	isPageType,
 	isAppType,
+	stopPageContextScript,
 	string,
 	waitForEvent,
 	watchForElements,
@@ -54,6 +57,7 @@ import {
 	Permissions,
 	Storage,
 } from '../environment';
+import * as Modules from '../core/modules';
 import * as Options from '../core/options';
 import * as __hosts from './hosts';
 import * as Notifications from './notifications';
@@ -74,6 +78,7 @@ import {
 	expandos,
 	activeExpandos,
 } from './showImages/expando';
+import vreddit from './hosts/vreddit';
 
 const siteModules: Map<string, Host<any, any>> = new Map(
 	Object.values(__hosts).map(host => [host.moduleID, downcast(host, Host)]), // ensure that all hosts are instances of `Host`
@@ -452,6 +457,31 @@ module.options = {
 	}, {}),
 };
 
+const localStorageKeyRemoveNativePlayer = 'RES_forceReplaceNativeExpando';
+// $FlowIgnore
+export const cachedRemoveNativePlayer = () => localStorage?.getItem(localStorageKeyRemoveNativePlayer) === 'true';
+
+module.onInit = () => {
+	if (isAppType('r2')) {
+		// Reddit loads scripts which initializes the video player, which will cause a slowdown if not blocked
+		// It may also start playing the video, even if replace the expando
+		const cachedValue = cachedRemoveNativePlayer()
+		if (cachedValue) {
+			console.log('Removing Reddit\'s native video player');
+			stopPageContextScript(script => (/^\/?videoplayer\./).test(new URL(script.src, location.origin).pathname), 'head', true);
+			stopPageContextScript(script => !!script.innerHTML.match('RedditVideoPlayer'), PagePhases.contentStart.then(() => document.querySelector('#siteTable')), false);
+		}
+
+		loadOptions.then(() => {
+			const actualValue = Modules.isRunning(module) && isSiteModuleEnabled(vreddit) && vreddit.options && vreddit.options.forceReplaceNativeExpando.value;
+			if (actualValue !== cachedValue) {
+				console.warn('The localStorage value for site module `forceReplaceNativeExpando` was outdated. The video player may not work.');
+				localStorage.setItem(localStorageKeyRemoveNativePlayer, String(actualValue));
+			}
+		});
+	}
+};
+
 module.exclude = [
 	/^\/ads\/[\-\w\._\?=]*/i,
 	'submit',