better logic for updating the subscribe button on page navigation

This commit is contained in:
Kevin Gibbons 2023-11-03 09:02:35 -07:00
parent c570aff66d
commit 72c94fbe99
2 changed files with 51 additions and 17 deletions

View File

@ -17,5 +17,7 @@ module.exports = {
eqeqeq: ['error', 'always', { null: 'ignore' }], eqeqeq: ['error', 'always', { null: 'ignore' }],
curly: ['error', 'multi-line'], curly: ['error', 'multi-line'],
'no-var': 'error', 'no-var': 'error',
'no-func-assign': 'off',
'no-inner-declarations': 'off',
}, },
}; };

View File

@ -126,8 +126,8 @@ function ensureTALinks() {
let channelContainerNodes = getChannelContainers(); let channelContainerNodes = getChannelContainers();
for (let channelContainer of channelContainerNodes) { for (let channelContainer of channelContainerNodes) {
channelContainer = adjustOwner(channelContainer);
if (channelContainer.hasTA) continue; if (channelContainer.hasTA) continue;
channelContainer = adjustOwner(channelContainer);
let channelButton = buildChannelButton(channelContainer); let channelButton = buildChannelButton(channelContainer);
channelContainer.appendChild(channelButton); channelContainer.appendChild(channelButton);
channelContainer.hasTA = true; channelContainer.hasTA = true;
@ -143,6 +143,7 @@ function ensureTALinks() {
titleContainer.hasTA = true; titleContainer.hasTA = true;
} }
} }
ensureTALinks = throttled(ensureTALinks, 700);
// fix positioning of #owner div to fit new button // fix positioning of #owner div to fit new button
function adjustOwner(channelContainer) { function adjustOwner(channelContainer) {
@ -151,16 +152,42 @@ function adjustOwner(channelContainer) {
function buildChannelButton(channelContainer) { function buildChannelButton(channelContainer) {
let channelHandle = getChannelHandle(channelContainer); let channelHandle = getChannelHandle(channelContainer);
channelContainer.taDerivedHandle = channelHandle;
let buttonDiv = buildChannelButtonDiv(); let buttonDiv = buildChannelButtonDiv();
let channelSubButton = buildChannelSubButton(channelHandle); let channelSubButton = buildChannelSubButton(channelHandle);
buttonDiv.appendChild(channelSubButton); buttonDiv.appendChild(channelSubButton);
channelContainer.taSubButton = channelSubButton;
let spacer = buildSpacer(); let spacer = buildSpacer();
buttonDiv.appendChild(spacer); buttonDiv.appendChild(spacer);
let channelDownloadButton = buildChannelDownloadButton(); let channelDownloadButton = buildChannelDownloadButton();
buttonDiv.appendChild(channelDownloadButton); buttonDiv.appendChild(channelDownloadButton);
channelContainer.taDownloadButton = channelDownloadButton;
if (!channelContainer.taObserver) {
function updateButtonsIfNecessary() {
let newHandle = getChannelHandle(channelContainer);
if (channelContainer.taDerivedHandle === newHandle) return;
console.log(`updating handle from ${channelContainer.taDerivedHandle} to ${newHandle}`);
channelContainer.taDerivedHandle = newHandle;
let channelSubButton = buildChannelSubButton(newHandle);
channelContainer.taSubButton.replaceWith(channelSubButton);
channelContainer.taSubButton = channelSubButton;
let channelDownloadButton = buildChannelDownloadButton();
channelContainer.taDownloadButton.replaceWith(channelDownloadButton);
channelContainer.taDownloadButton = channelDownloadButton;
}
channelContainer.taObserver = new MutationObserver(throttled(updateButtonsIfNecessary, 100));
channelContainer.taObserver.observe(channelContainer, {
attributes: true,
childList: true,
subtree: true,
});
}
return buttonDiv; return buttonDiv;
} }
@ -230,10 +257,10 @@ function checkChannelSubscribed(channelSubButton) {
console.log('Unknown state'); console.log('Unknown state');
} }
} }
function handleError() { function handleError(e) {
buttonError(channelSubButton); buttonError(channelSubButton);
channelSubButton.innerText = 'Error'; channelSubButton.innerText = 'Error';
console.log('error'); console.error('error', e);
} }
let channelHandle = channelSubButton.dataset.id; let channelHandle = channelSubButton.dataset.id;
@ -389,10 +416,11 @@ function checkVideoExists(taButton) {
} }
taButton.isChecked = true; taButton.isChecked = true;
} }
function handleError() { function handleError(e) {
buttonError(taButton); buttonError(taButton);
let videoId = taButton.dataset.id; let videoId = taButton.dataset.id;
console.log(`error: failed to get info from TA for video ${videoId}`); console.log(`error: failed to get info from TA for video ${videoId}`);
console.error(e);
} }
let videoId = taButton.dataset.id; let videoId = taButton.dataset.id;
@ -449,9 +477,8 @@ function sendUrl(url, action, button) {
} }
} }
function handleError(error) { function handleError(e) {
console.log('error'); console.log('error', e);
console.log(JSON.stringify(error));
buttonError(button); buttonError(button);
} }
@ -484,15 +511,20 @@ function cleanButtons() {
} }
let oldHref = document.location.href; let oldHref = document.location.href;
let throttleBlock;
const throttle = (callback, time) => { function throttled(callback, time) {
let throttleBlock = false;
let lastArgs;
return (...args) => {
lastArgs = args;
if (throttleBlock) return; if (throttleBlock) return;
throttleBlock = true; throttleBlock = true;
setTimeout(() => { setTimeout(() => {
callback();
throttleBlock = false; throttleBlock = false;
callback(...lastArgs);
}, time); }, time);
}; };
}
let observer = new MutationObserver(list => { let observer = new MutationObserver(list => {
const currentHref = document.location.href; const currentHref = document.location.href;
@ -501,7 +533,7 @@ let observer = new MutationObserver(list => {
oldHref = currentHref; oldHref = currentHref;
} }
if (list.some(i => i.type === 'childList' && i.addedNodes.length > 0)) { if (list.some(i => i.type === 'childList' && i.addedNodes.length > 0)) {
throttle(ensureTALinks, 700); ensureTALinks();
} }
}); });