mirror of
https://github.com/tubearchivist/browser-extension.git
synced 2024-11-10 14:10:13 +00:00
refactor channel buttons
This commit is contained in:
parent
bf1c47843f
commit
f9feee70d1
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user