From 248571581885698ccf85c15cfe36cbaefe700e35 Mon Sep 17 00:00:00 2001
From: simon <simobilleter@gmail.com>
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