tubearchivist/browser-extension
1
0
Fork 0
mirror of https://github.com/tubearchivist/browser-extension.git synced 2024-11-25 13:10:14 +00:00
Code Issues Projects Releases Wiki Activity

refactor channel buttons

Browse Source
This commit is contained in:
Simon 2023-08-25 17:42:43 +07:00
parent bf1c47843f
commit f9feee70d1
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
1 changed files with 48 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
extension/script.js
View File

@ -115,7 +115,7 @@ const defaultIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
function buildButtonDiv() { function buildButtonDiv() {
let buttonDiv = document.createElement('div'); let buttonDiv = document.createElement('div');
buttonDiv.setAttribute('id', 'ta-channel-button'); buttonDiv.classList.add('ta-channel-button');
Object.assign(buttonDiv.style, { Object.assign(buttonDiv.style, {
display: 'flex', display: 'flex',
@ -130,25 +130,20 @@ function buildButtonDiv() {
return buttonDiv; return buttonDiv;
} }
function buildSubLink(channelContainer) { function buildSubLink(channelHandle) {
let subLink = document.createElement('span'); let subLink = document.createElement('span');
subLink.innerText = 'Subscribe'; subLink.innerText = 'Subscribe';
subLink.title = `TA Subscribe: ${channelHandle}`;
subLink.setAttribute('data-id', channelHandle);
subLink.setAttribute('data-type', 'channel');
subLink.addEventListener('click', e => { subLink.addEventListener('click', e => {
e.preventDefault(); e.preventDefault();
let currentLocation = window.location.href; console.log(`subscribe to: ${channelHandle}`);
console.log('subscribe to: ' + currentLocation); sendUrl(channelHandle, 'subscribe', subLink);
sendUrl(currentLocation, 'subscribe', subLink);
}); });
subLink.addEventListener('mouseover', e => { subLink.addEventListener('mouseover', () => {
let subText; checkChannelSubscribed(channelHandle);
if (window.location.pathname === '/watch') {
let currentLocation = window.location.href;
subText = currentLocation;
} else {
subText = channelContainer.querySelector('#text').textContent;
}
e.target.title = 'TA Subscribe: ' + subText;
}); });
Object.assign(subLink.style, { Object.assign(subLink.style, {
padding: '5px', padding: '5px',
@ -158,6 +153,10 @@ function buildSubLink(channelContainer) {
return subLink; return subLink;
} }
function checkChannelSubscribed(channelHandle) {
console.log(`check channel subscribed: ${channelHandle}`);
}
function buildSpacer() { function buildSpacer() {
let spacer = document.createElement('span'); let spacer = document.createElement('span');
spacer.innerText = '|'; spacer.innerText = '|';
@ -165,27 +164,28 @@ function buildSpacer() {
return spacer; return spacer;
} }
function buildDlLink(channelContainer) { function buildDlLink() {
let dlLink = document.createElement('span'); let dlLink = document.createElement('span');
dlLink.innerHTML = downloadIcon; let currentLocation = window.location.href;
let urlObj = new URL(currentLocation);
if (urlObj.pathname.startsWith('/watch')) {
let videoId = urlObj.search.split('=')[1];
dlLink.setAttribute('data-type', 'video');
dlLink.setAttribute('data-id', videoId);
dlLink.title = `TA download video: ${videoId}`;
} else {
let toDownload = urlObj.pathname.slice(1);
dlLink.setAttribute('data-id', toDownload);
dlLink.setAttribute('data-type', 'channel');
dlLink.title = `TA download channel ${toDownload}`;
}
dlLink.innerHTML = downloadIcon;
dlLink.addEventListener('click', e => { dlLink.addEventListener('click', e => {
e.preventDefault(); e.preventDefault();
let currentLocation = window.location.href; console.log(`download: ${currentLocation}`);
console.log('download: ' + currentLocation);
sendUrl(currentLocation, 'download', dlLink); sendUrl(currentLocation, 'download', dlLink);
}); });
dlLink.addEventListener('mouseover', e => {
let subText;
let currentLocation = window.location.href;
if (window.location.pathname === '/watch') {
subText = currentLocation;
} else {
subText = channelContainer.querySelector('#text').textContent + ' ' + currentLocation;
}
e.target.title = 'TA Download: ' + subText;
});
Object.assign(dlLink.style, { Object.assign(dlLink.style, {
filter: 'invert()', filter: 'invert()',
width: '20px', width: '20px',
@ -196,16 +196,28 @@ function buildDlLink(channelContainer) {
return dlLink; return dlLink;
} }
function getChannelHandle(channelContainer) {
const channelHandleContainer = document.querySelector('#channel-handle');
let channelHandle = channelHandleContainer ? channelHandleContainer.innerText : null;
if (!channelHandle) {
let href = channelContainer.querySelector('.ytd-video-owner-renderer').href;
const urlObj = new URL(href);
channelHandle = urlObj.pathname.split('/')[1];
}
return channelHandle;
}
function buildChannelButton(channelContainer) { function buildChannelButton(channelContainer) {
let channelHandle = getChannelHandle(channelContainer);
let buttonDiv = buildButtonDiv(); let buttonDiv = buildButtonDiv();
let subLink = buildSubLink(channelContainer); let subLink = buildSubLink(channelHandle);
buttonDiv.appendChild(subLink); buttonDiv.appendChild(subLink);
let spacer = buildSpacer(); let spacer = buildSpacer();
buttonDiv.appendChild(spacer); buttonDiv.appendChild(spacer);
let dlLink = buildDlLink(channelContainer); let dlLink = buildDlLink();
buttonDiv.appendChild(dlLink); buttonDiv.appendChild(dlLink);
return buttonDiv; return buttonDiv;
@ -433,6 +445,10 @@ function cleanButtons() {
button.parentElement.hasTA = false; button.parentElement.hasTA = false;
button.remove(); button.remove();
}); });
document.querySelectorAll('.ta-channel-button').forEach(button => {
button.parentElement.hasTA = false;
button.remove();
});
} }
let oldHref = document.location.href; let oldHref = document.location.href;