From 248571581885698ccf85c15cfe36cbaefe700e35 Mon Sep 17 00:00:00 2001 From: simon Date: Wed, 23 Nov 2022 21:05:22 +0700 Subject: [PATCH] thumbnail hover button --- extension/script.js | 85 ++++++++++++++++++++------------------------- 1 file changed, 38 insertions(+), 47 deletions(-) diff --git a/extension/script.js b/extension/script.js index 7dedffe..152aefe 100644 --- a/extension/script.js +++ b/extension/script.js @@ -199,21 +199,43 @@ function getChannelContainers() { return nodes } -function getVideoContainers() { - var nodes = document.querySelectorAll('#title-wrapper, #title'); +function getThubnailContainers() { + var nodes = document.querySelectorAll('#thumbnail'); return nodes } - -function buildVideoButton(videoContainer) { - var titleLink = videoContainer.querySelector('#video-title')?.href; - if (titleLink == null) return; +function buildVideoButton(thumbContainer) { + var thumbLink = thumbContainer?.href; + if (!thumbLink) return; + if (thumbLink.includes('list=') || thumbLink.includes('/shorts/')) return; var dlButton = document.createElement("a"); + dlButton.setAttribute("id", "ta-video-button"); dlButton.href = '#' + dlButton.addEventListener('click', e => { + e.preventDefault(); + let videoLink = thumbContainer.href; + console.log("download: " + videoLink); + }); + dlButton.addEventListener('mouseover', e => { + Object.assign(dlButton.style, { + opacity: 1, + }); + let videoTitle = thumbContainer.href; + e.target.title = "TA download: " + videoTitle; + }) + dlButton.addEventListener('mouseout', e => { + Object.assign(dlButton.style, { + opacity: 0, + }); + }) + Object.assign(dlButton.style, { display: "flex", + position: "absolute", + top: "5px", + left: "5px", alignItems: "center", backgroundColor: "#00202f", color: "#fff", @@ -221,6 +243,8 @@ function buildVideoButton(videoContainer) { textDecoration: "none", borderRadius: "8px", cursor: "pointer", + opacity: 0, + transition: "all 0.3s ease 0.3s", }); var dlIcon = document.createElement("span"); @@ -230,19 +254,11 @@ function buildVideoButton(videoContainer) { width: "20px", padding: "10px 13px", }); + dlButton.appendChild(dlIcon); - dlIcon.addEventListener('click', e => { - e.preventDefault(); - let videoLink = videoContainer.querySelector('#video-title')?.href; - console.log("download: " + videoLink); - }); - dlIcon.addEventListener('mouseover', e => { - let videoTitle = videoContainer.querySelector('#video-title')?.text.trim(); - e.target.title = "TA download: " + videoTitle; - }) - return dlButton + } @@ -257,44 +273,19 @@ function ensureTALinks() { channelContainer.hasTA = true; } - var videoContainerNodes = getVideoContainers() + var thumbContainerNodes = getThubnailContainers(); - for (var videoContainer of videoContainerNodes) { - if (videoContainer.hasTA) continue; - var videoButton = buildVideoButton(videoContainer); + for (var thumbContainer of thumbContainerNodes) { + if (thumbContainer.hasTA) continue; + var videoButton = buildVideoButton(thumbContainer); if (videoButton == null) continue; - videoContainer.appendChild(videoButton); - videoContainer.hasTA = true; + thumbContainer.parentElement.appendChild(videoButton); + thumbContainer.hasTA = true; } - // var videoContainerNodes = getVideoContainers(); - // for (var videoContainer of videoContainerNodes) { - // console.log(videoContainerNodes); - // } - } -// function detectUrlType(url) { - -// const videoRe = new RegExp(/^https:\/\/(www\.)?(youtube.com\/watch\?v=|youtu\.be\/)[\w-]{11}/); -// if (videoRe.test(url)) { -// return "video" -// } -// const channelRe = new RegExp(/^https:?\/\/www\.?youtube.com\/c|channel|user\/[\w-]+(\/|featured|videos)?$/); -// if (channelRe.test(url)) { -// return "channel" -// } -// const playlistRe = new RegExp(/^https:\/\/(www\.)?youtube.com\/playlist\?list=/); -// if (playlistRe.test(url)) { -// return "playlist" -// } - -// return false - -// } - - function sendUrl() { let url = document.URL