fix(ambient-mode): fix ambient-mode not working for videos after restart (#2294)

* Fix Ambient Mode not working for videos after restart (#2255)

This should fix https://github.com/th-ch/youtube-music/issues/1641

* fix: fix waitForElement

---------

Co-authored-by: craftgeil <80261988+craftgeil@users.noreply.github.com>
This commit is contained in:
JellyBrick
2024-07-31 22:08:45 +09:00
committed by GitHub
parent 8924ec29d3
commit 7b033b5caf
4 changed files with 24 additions and 33 deletions

View File

@ -4,6 +4,7 @@ import { t } from '@/i18n';
import { createPlugin } from '@/utils';
import { menu } from './menu';
import { AmbientModePluginConfig } from './types';
import { waitForElement } from '@/utils/wait-for-element';
const defaultConfig: AmbientModePluginConfig = {
enabled: false,
@ -36,7 +37,7 @@ export default createPlugin({
unregister: null as (() => void) | null,
update: null as (() => void) | null,
interval: null as NodeJS.Timeout | null,
lastMediaType: null as "video" | "image" | null,
lastMediaType: null as 'video' | 'image' | null,
lastVideoSource: null as string | null,
lastImageSource: null as string | null,
@ -53,7 +54,8 @@ export default createPlugin({
const songImage = document.querySelector<HTMLImageElement>('#song-image');
const songVideo = document.querySelector<HTMLDivElement>('#song-video');
const image = songImage?.querySelector<HTMLImageElement>('yt-img-shadow > img');
const video = songVideo?.querySelector<HTMLVideoElement>('.html5-video-container > video');
const video = await waitForElement<HTMLVideoElement>('.html5-video-container > video');
const videoWrapper = document.querySelector('#song-video > .player-wrapper');
const injectBlurImage = () => {
@ -179,12 +181,12 @@ export default createPlugin({
const isVideoMode = () => {
const songVideo = document.querySelector<HTMLDivElement>('#song-video');
if (!songVideo) {
this.lastMediaType = "image";
this.lastMediaType = 'image';
return false;
}
const isVideo = getComputedStyle(songVideo).display !== 'none';
this.lastMediaType = isVideo ? "video" : "image";
this.lastMediaType = isVideo ? 'video' : 'image';
return isVideo;
};
@ -196,8 +198,8 @@ export default createPlugin({
if (isPageOpen) {
const isVideo = isVideoMode();
if (!force) {
if (this.lastMediaType === "video" && this.lastVideoSource === video?.src) return false;
if (this.lastMediaType === "image" && this.lastImageSource === image?.src) return false;
if (this.lastMediaType === 'video' && this.lastVideoSource === video?.src) return false;
if (this.lastMediaType === 'image' && this.lastImageSource === image?.src) return false;
}
this.unregister?.();
this.unregister = (isVideo ? injectBlurVideo() : injectBlurImage()) ?? null;
@ -205,7 +207,7 @@ export default createPlugin({
this.unregister?.();
this.unregister = null;
}
}
};
/* needed for switching between different views (e.g. miniplayer) */
const observer = new MutationObserver((mutationsList) => {