implement checkVideoExists

extension/background.js

@@ -135,6 +135,13 @@ async function subscribe(url) {
   );
 }
 
+async function videoExists(id) {
+  const path = `api/video/${id}/`;
+  let response = await sendGet(path);
+  console.log(response);
+  return Boolean(response.data);
+}
+
 async function cookieStr(cookieLines) {
   const path = 'api/cookie/';
   let payload = {
@@ -216,6 +223,9 @@ function handleMessage(request, sender, sendResponse) {
       case 'subscribe': {
         return await subscribe(request.url);
       }
+      case 'videoExists': {
+        return await videoExists(request.videoId);
+      }
       default: {
         let err = new Error(`unknown message type ${JSON.stringify(request.type)}`);
         console.log(err);

extension/script.js

@@ -111,6 +111,8 @@ viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="pres
 </g>
 </svg>`;
 
+const defaultIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>minus-thick</title><path d="M20 14H4V10H20" /></svg>`;
+
 function buildButtonDiv() {
   let buttonDiv = document.createElement('div');
   buttonDiv.setAttribute('id', 'ta-channel-button');
@@ -284,6 +286,7 @@ function processTitle(titleContainer) {
   titleContainer.addEventListener('mouseover', () => {
     const taButton = titleContainer.querySelector('.ta-button');
     if (!taButton) return;
+    if (!taButton.isChecked) checkVideoExists(taButton);
     taButton.style.opacity = 1;
   });
 
@@ -294,6 +297,26 @@ function processTitle(titleContainer) {
   });
 }
 
+function checkVideoExists(taButton) {
+  function handleResponse(message) {
+    let buttonSpan = taButton.querySelector('span');
+    if (message) {
+      buttonSpan.innerHTML = checkmarkIcon;
+    } else {
+      buttonSpan.innerHTML = downloadIcon;
+    }
+    taButton.isChecked = true;
+  }
+  function handleError() {
+    console.log('error');
+  }
+
+  let videoId = taButton.dataset.id;
+  let message = { type: 'videoExists', videoId };
+  let sending = sendMessage(message);
+  sending.then(handleResponse, handleError);
+}
+
 function buildVideoButton(titleContainer) {
   let href = getNearestLink(titleContainer);
   const dlButton = document.createElement('a');
@@ -323,7 +346,7 @@ function buildVideoButton(titleContainer) {
   });
 
   let dlIcon = document.createElement('span');
-  dlIcon.innerHTML = downloadIcon;
+  dlIcon.innerHTML = defaultIcon;
   Object.assign(dlIcon.style, {
     filter: 'invert()',
     width: '18px',
@@ -375,9 +398,6 @@ function buttonSuccess(button) {
     }, 2000);
   } else {
     buttonSpan.innerHTML = checkmarkIcon;
-    setTimeout(() => {
-      buttonSpan.innerHTML = downloadIcon;
-    }, 2000);
   }
 }