tubearchivist
/
browser-extension
mirror of https://github.com/tubearchivist/browser-extension.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

thumbnail hover button

This commit is contained in:
simon 2022-11-23 21:05:22 +07:00
parent 71d915eff1
commit 2485715818
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
1 changed files with 38 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
extension/script.js
View File

@ -199,21 +199,43 @@ function getChannelContainers() {
return nodes return nodes
} }
function getVideoContainers() { function getThubnailContainers() {
var nodes = document.querySelectorAll('#title-wrapper, #title'); var nodes = document.querySelectorAll('#thumbnail');
return nodes return nodes
} }
function buildVideoButton(thumbContainer) {
function buildVideoButton(videoContainer) { var thumbLink = thumbContainer?.href;
var titleLink = videoContainer.querySelector('#video-title')?.href; if (!thumbLink) return;
if (titleLink == null) return; if (thumbLink.includes('list=') || thumbLink.includes('/shorts/')) return;
var dlButton = document.createElement("a"); var dlButton = document.createElement("a");
dlButton.setAttribute("id", "ta-video-button");
dlButton.href = '#' 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, { Object.assign(dlButton.style, {
display: "flex", display: "flex",
position: "absolute",
top: "5px",
left: "5px",
alignItems: "center", alignItems: "center",
backgroundColor: "#00202f", backgroundColor: "#00202f",
color: "#fff", color: "#fff",
@ -221,6 +243,8 @@ function buildVideoButton(videoContainer) {
textDecoration: "none", textDecoration: "none",
borderRadius: "8px", borderRadius: "8px",
cursor: "pointer", cursor: "pointer",
opacity: 0,
transition: "all 0.3s ease 0.3s",
}); });
var dlIcon = document.createElement("span"); var dlIcon = document.createElement("span");
@ -230,19 +254,11 @@ function buildVideoButton(videoContainer) {
width: "20px", width: "20px",
padding: "10px 13px", padding: "10px 13px",
}); });
dlButton.appendChild(dlIcon); 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 return dlButton
} }
@ -257,44 +273,19 @@ function ensureTALinks() {
channelContainer.hasTA = true; channelContainer.hasTA = true;
} }
var videoContainerNodes = getVideoContainers() var thumbContainerNodes = getThubnailContainers();
for (var videoContainer of videoContainerNodes) { for (var thumbContainer of thumbContainerNodes) {
if (videoContainer.hasTA) continue; if (thumbContainer.hasTA) continue;
var videoButton = buildVideoButton(videoContainer); var videoButton = buildVideoButton(thumbContainer);
if (videoButton == null) continue; if (videoButton == null) continue;
videoContainer.appendChild(videoButton); thumbContainer.parentElement.appendChild(videoButton);
videoContainer.hasTA = true; 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() { function sendUrl() {
let url = document.URL let url = document.URL