// ==UserScript==
// @name         YouTube Quick Watch Later
// @namespace    http://tampermonkey.net/
// @version      2.3
// @description  Adds quick Watch Later button
// @author       kavinned
// @match        https://www.youtube.com/*
// @grant        GM_addStyle
// @icon         https://www.google.com/s2/favicons?sz=64&domain=YouTube.com
// @license      MIT
// ==/UserScript==
(function () {
"use strict";
function addWatchLaterButton() {
const targetDiv = document.querySelector(
"#top-level-buttons-computed > segmented-like-dislike-button-view-model > yt-smartimation > div"
);
if (!targetDiv || document.querySelector(".quick-watch-later")) return;
const button = document.createElement("button");
button.className = "quick-watch-later";
button.textContent = "WL";
button.addEventListener("click", function () {
// First click menu button
const menuButton = document.querySelector(
"#button-shape > button > yt-touch-feedback-shape > div"
);
menuButton.click();
if (menuButton) {
console.log("menu clicked");
}
// Next click the Save button
setTimeout(function () {
const saveButtons = document.querySelectorAll(
"#items > ytd-menu-service-item-renderer > tp-yt-paper-item > yt-formatted-string"
);
const saveButton = Array.from(saveButtons).find((button) =>
button.textContent.includes("Save") || button.textContent.includes("儲存")
);
saveButton.click();
// Then click the Watch Later button
setTimeout(function () {
const watchLaterBox = document.querySelector(
"#playlists > ytd-playlist-add-to-option-renderer:first-child #checkbox"
);
if (
watchLaterBox &&
watchLaterBox.getAttribute("aria-checked") === "true"
) {
const confirmRemove = window.confirm(
"This video is already in your Watch Later playlist. Do you want to remove it?"
);
if (confirmRemove) {
watchLaterBox.click();
const closeButton = document.querySelector(
"#button > yt-icon > span"
);
if (closeButton) {
closeButton.click();
}
} else {
const closeButton = document.querySelector(
"#button > yt-icon > span"
);
if (closeButton) {
closeButton.click();
}
}
} else {
// If the video isn't in Watch Later, proceed with adding it
watchLaterBox.click();
const closeButton = document.querySelector(
"#button > yt-icon > span"
);
if (closeButton) {
closeButton.click();
}
}
}, 1000);
}, 100);
});
targetDiv.appendChild(button);
}
setTimeout(addWatchLaterButton, 2000);
const observer = new MutationObserver(() => {
if (window.location.href.includes("/watch?")) {
setTimeout(addWatchLaterButton, 1000);
}
});
observer.observe(document.body, { childList: true, subtree: true });
GM_addStyle(
`#top-level-buttons-computed > segmented-like-dislike-button-view-model > yt-smartimation > div {
display: flex;
flex-direction: row-reverse;
gap: 5px;
transition: all 500ms ease-in-out;
}
#top-level-buttons-computed > segmented-like-dislike-button-view-model > yt-smartimation > div > button {
transition: all 500ms ease-in-out;
border-radius: 24px;
border: none;
padding-left: 20px;
padding-right: 20px;
color: white;
font-weight: bold;
background: #272727;
cursor: pointer;
&:hover {
background: #414141;
}
}
.ryd-tooltip.ryd-tooltip-new-design {
height: 0px !important;
width: 0px !important;
}
@media only screen and (max-width: 1200px) {
#top-level-buttons-computed > segmented-like-dislike-button-view-model > yt-smartimation > div {
flex-direction: column;
transition: all 500ms ease-in-out;
}
#top-level-buttons-computed > segmented-like-dislike-button-view-model > yt-smartimation > div > button {
padding: 5px 0px;
transition: all 500ms ease-in-out;
}
}
}`
);
})();