fix: detect <video> inside custom elements (web components) (shadow DOM)

[WofWca]

See

• will AppleTV+ work in the future? igrigorik/videospeed#540 (comment)
• Apple tv plus igrigorik/videospeed#541
• Doesn't detect audio playing from MSN video vantezzen/skip-silence#122

Affects: msn.com.

Where to fix:

jumpcutter/src/entry-points/content/init.ts

Lines 86 to 119 in fcda2b0

	for (const tagName of tagNames) {
	const allMediaElementsWThisTag = document.getElementsByTagName(tagName);
	if (allMediaElementsWThisTag.length) {
	ensureInitAllMediaElementsController().then(allMediaElementsController => {
	allMediaElementsController.onNewMediaElements(...allMediaElementsWThisTag);
	});
	}
	}
	// Peeked at https://github.com/igrigorik/videospeed/blob/a25373f1d831fe06430c2e9e87dc1bd1aabd25b1/inject.js#L631
	function handleMutations(mutations: MutationRecord[]) {
	const newElements: HTMLMediaElement[] = [];
	for (const m of mutations) {
	if (m.type !== 'childList') {
	continue;
	}
	for (const node of m.addedNodes) {
	if (node.nodeType !== Node.ELEMENT_NODE) {
	continue;
	}
	// Keep in mind that the same element may get removed then added to the tree again. This is handled
	// inside `handleNewElements` (`this.handledElements.has(el)`).
	// Also the fact that we have an array of `addedNodes` in an array of mutations may mean (idk actually)
	// that we can have duplicate nodes in the array, which currently is fine thanks to
	// `this.handledElements.has(el)`.
	if ((tagNames as string[]).includes(node.nodeName)) {
	newElements.push(node as HTMLMediaElement);
	} else {
	// TODO here https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName
	// it says "The returned list is live, which means it updates itself with the DOM tree automatically".
	// Does it mean that it would be better to somehow use the `allMediaElements` variable from a few lines above?
	// But here https://dom.spec.whatwg.org/#introduction-to-dom-ranges it says that upgdating live ranges can be
	// costly.
	for (const tagName of tagNames) {
	const childMediaElements = (node as HTMLElement).getElementsByTagName(tagName);