From 30f80ca01a0d36da4b398b38f06b3253e41d732f Mon Sep 17 00:00:00 2001 From: simon Date: Thu, 24 Nov 2022 15:39:05 +0700 Subject: [PATCH] implement button press callback --- extension/background.js | 29 ++++++++++-------- extension/script.js | 65 ++++++++++++++++++++++++++++++++++------- 2 files changed, 71 insertions(+), 23 deletions(-) diff --git a/extension/background.js b/extension/background.js index 8068e5f..c6f3b80 100644 --- a/extension/background.js +++ b/extension/background.js @@ -52,19 +52,24 @@ async function sendData(path, payload, method) { console.log(`${method}: ${url}`); console.log(`${method}: ${JSON.stringify(payload)}`); - const rawResponse = await fetch(url, { - method: method, - headers: { - "Accept": "application/json", - "Content-Type": "application/json", - "Authorization": "Token " + access.apiKey, - "mode": "no-cors" - }, - body: JSON.stringify(payload) - }); + try { + const rawResponse = await fetch(url, { + method: method, + headers: { + "Accept": "application/json", + "Content-Type": "application/json", + "Authorization": "Token " + access.apiKey, + "mode": "no-cors" + }, + body: JSON.stringify(payload) + }); + const content = await rawResponse.json(); + return content; + } catch (e) { + console.error(e); + return null + } - const content = await rawResponse.json(); - return content; } diff --git a/extension/script.js b/extension/script.js index fa9803d..a9b95c8 100644 --- a/extension/script.js +++ b/extension/script.js @@ -122,17 +122,17 @@ function buildButtonDiv() { function buildSubLink(channelContainer) { var subLink = document.createElement("span"); - var currentLocation = window.location; + var currentLocation = window.location.href; subLink.innerText = "Subscribe"; subLink.addEventListener('click', e => { e.preventDefault(); console.log("subscribe to: " + currentLocation); - sendUrl(currentLocation, "subscribe"); + sendUrl(currentLocation, "subscribe", subLink); }); subLink.addEventListener("mouseover", e => { let subText if (window.location.pathname == "/watch") { - subText = window.location.href; + subText = currentLocation; } else { subText = channelContainer.querySelector("#text").textContent; }; @@ -156,18 +156,18 @@ function buildSpacer() { function buildDlLink(channelContainer) { var dlLink = document.createElement("span"); - var currentLocation = window.location; + var currentLocation = window.location.href; dlLink.innerHTML = downloadIcon; dlLink.addEventListener('click', e => { e.preventDefault(); console.log("download: " + currentLocation) - sendUrl(currentLocation, "download"); + sendUrl(currentLocation, "download", dlLink); }); dlLink.addEventListener("mouseover", e => { let subText if (window.location.pathname == "/watch") { - subText = window.location.href; + subText = currentLocation; } else { subText = channelContainer.querySelector("#text").textContent; }; @@ -225,7 +225,7 @@ function buildVideoButton(thumbContainer) { e.preventDefault(); let videoLink = thumbContainer.href; console.log("download: " + videoLink); - sendUrl(videoLink, "download"); + sendUrl(videoLink, "download", dlButton) }); dlButton.addEventListener('mouseover', e => { Object.assign(dlButton.style, { @@ -295,7 +295,50 @@ function ensureTALinks() { } -function sendUrl(url, action) { +function buttonError(button) { + let buttonSpan = button.querySelector("span"); + if (buttonSpan === null) { + buttonSpan = button + } + buttonSpan.style.filter = "invert(19%) sepia(93%) saturate(7472%) hue-rotate(359deg) brightness(105%) contrast(113%)"; + buttonSpan.style.color = "red"; + + button.style.opacity = 1; + button.addEventListener('mouseout', e => { + Object.assign(button.style, { + opacity: 1, + }); + }) +} + +function buttonSuccess(button) { + let buttonSpan = button.querySelector("span"); + if (buttonSpan === null) { + buttonSpan = button; + } + if (buttonSpan.innerHTML === "Subscribe") { + buttonSpan.innerHTML = "Success"; + } else { + buttonSpan.innerHTML = checkmarkIcon; + } +} + + +function sendUrl(url, action, button) { + + function handleResponse(message) { + console.log("sendUrl response: " + JSON.stringify(message)); + if (message === null || message.detail === "Invalid token.") { + buttonError(button); + } else { + buttonSuccess(button); + } + } + + function handleError(error) { + console.log("error"); + console.log(JSON.stringify(error)); + } let payload = { "youtube": { @@ -305,9 +348,9 @@ function sendUrl(url, action) { } console.log("youtube link: " + JSON.stringify(payload)); - browserType.runtime.sendMessage(payload, function(response) { - console.log("sendUrl response: " + JSON.stringify(response)) - }); + + let sending = browserType.runtime.sendMessage(payload); + sending.then(handleResponse, handleError); };