From 48eeb6bca3f47d7f09ae3fdea0162c11e8064381 Mon Sep 17 00:00:00 2001
From: JellyBrick <shlee1503@naver.com>
Date: Thu, 28 Dec 2023 02:17:42 +0900
Subject: [PATCH] fix: picture-in-picture icon

---
 src/plugins/downloader/renderer.ts                        | 6 ++----
 src/plugins/picture-in-picture/renderer.ts                | 8 +++++++-
 .../picture-in-picture/templates/picture-in-picture.html  | 2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/plugins/downloader/renderer.ts b/src/plugins/downloader/renderer.ts
index 0417541c..4eb3d8e0 100644
--- a/src/plugins/downloader/renderer.ts
+++ b/src/plugins/downloader/renderer.ts
@@ -42,11 +42,9 @@ const menuObserver = new MutationObserver(() => {
   menu.prepend(downloadButton);
   progress = document.querySelector('#ytmcustom-download');
 
-  if (doneFirstLoad) {
-    return;
+  if (!doneFirstLoad) {
+    setTimeout(() => (doneFirstLoad ||= true), 500);
   }
-
-  setTimeout(() => (doneFirstLoad ||= true), 500);
 });
 
 export const onRendererLoad = ({
diff --git a/src/plugins/picture-in-picture/renderer.ts b/src/plugins/picture-in-picture/renderer.ts
index 3f26feb9..4fd4384d 100644
--- a/src/plugins/picture-in-picture/renderer.ts
+++ b/src/plugins/picture-in-picture/renderer.ts
@@ -18,6 +18,8 @@ let useNativePiP = false;
 let menu: Element | null = null;
 const pipButton = ElementFromHtml(pipHTML);
 
+let doneFirstLoad = false;
+
 // Will also clone
 function replaceButton(query: string, button: Element) {
   const svg = button.querySelector('#icon svg')?.cloneNode(true);
@@ -61,11 +63,15 @@ const observer = new MutationObserver(() => {
   const menuUrl = $<HTMLAnchorElement>(
     'tp-yt-paper-listbox [tabindex="0"] #navigation-endpoint',
   )?.href;
-  if (!menuUrl?.includes('watch?')) {
+  if (!menuUrl?.includes('watch?') && doneFirstLoad) {
     return;
   }
 
   menu.prepend(pipButton);
+
+  if (!doneFirstLoad) {
+    setTimeout(() => (doneFirstLoad ||= true), 500);
+  }
 });
 
 const togglePictureInPicture = async () => {
diff --git a/src/plugins/picture-in-picture/templates/picture-in-picture.html b/src/plugins/picture-in-picture/templates/picture-in-picture.html
index da0a50a1..fc533924 100644
--- a/src/plugins/picture-in-picture/templates/picture-in-picture.html
+++ b/src/plugins/picture-in-picture/templates/picture-in-picture.html
@@ -12,7 +12,7 @@
     tabindex="-1"
   >
     <div
-      class="icon menu-icon style-scope ytmusic-menu-navigation-item-renderer"
+      class="icon ytmd-menu-item style-scope ytmusic-menu-navigation-item-renderer"
     >
       <svg
         id="Layer_1"