Merge pull request #8 from 2jun0/dev

Dev: version 1.3.0 was released!

README.md

@@ -9,17 +9,17 @@ Add a subtitle tag language that you want on the video thumbnail in the YouTube.
 
 ## Showcase
 
-![Showcase Videos](chrome/asset/showcase_videos.jpg)
+![Showcase Videos](chrome/asset/showcase/showcase_videos.jpg)
 
-![Showcase In Video](chrome/asset/showcase_invideo.jpg)
+![Showcase In Video](chrome/asset/showcase/showcase_invideo.jpg)
 
 ## Customize
 
 - You can customize tag color in popup menu (background and text color)
 - You can resize the subtitle tags
 - You can search for subtitles by grouping regions. (ex en-US + en-GB)
 
-![Showcase Popup](chrome/asset/showcase_popup_1.jpg) ![Showcase Popup](chrome/asset/showcase_popup_2.jpg)
+![Showcase Popup](chrome/asset/showcase/showcase_popup_1.jpg) ![Showcase Popup](chrome/asset/showcase/showcase_popup_2.jpg)
 
 ## Download
 

README_KO.md

@@ -8,17 +8,17 @@ README 페이지를 영문로 보시려면 아래를 참고하세요.
 
 ## 예시화면
 
-![동영상 목록 예시화면](chrome/asset/showcase_videos.jpg)
+![동영상 목록 예시화면](chrome/asset/showcase/showcase/showcase/showcase/showcase_videos.jpg)
 
-![동영상 실행 중 예시화면](chrome/asset/showcase_invideo.jpg)
+![동영상 실행 중 예시화면](chrome/asset/showcase/showcase/showcase_invideo.jpg)
 
 ## 사용자 설정
 
 - 팝업 메뉴에서 태그의 색상을 선택할 수 있습니다. (배경색상, 글자색상)
 - 태그의 크기를 조절 할 수 있습니다.
 - 지역언어 통합 기능으로 여러지역으로 나눠진 자막을 하나로 검색할 수 도 있습니다. (예: 영어(영국) + 영어(미국))
 
-![팝업 예시화면](chrome/asset/showcase_popup_ko_1.jpg) ![팝업 예시화면](chrome/asset/showcase_popup_ko_2.jpg)
+![팝업 예시화면](chrome/asset/showcase/showcase/showcase_popup_ko_1.jpg) ![팝업 예시화면](chrome/asset/showcase/showcase/showcase_popup_ko_2.jpg)
 
 ## 다운로드
 

chrome/js/background/ytVideo.js

@@ -1,14 +1,5 @@
 import { FIELD_VIDEO_LANGS, loadData, saveData } from "../storage.js";
 
-let bgTabId = null;
-
-// Get background tab id
-chrome.tabs.query({ currentWindow: true, active: true }, (tabs) => {
-  if (tabs.length > 0) {
-    bgTabId = tabs[0].id;
-  }
-});
-
 // Load YouTube Video Iframe Url
 function loadYtPlayer(videoId, callback) {
   // Already exists
@@ -21,52 +12,67 @@ function loadYtPlayer(videoId, callback) {
   let ytPlayer = new YT.Player(`player-${videoId}`, {
     videoId: videoId,
     playerVars: {
-      cc_load_policy: 1,
       autoplay: 1,
-      origin: window.location.origin,
+      cc_load_policy: 1,
+      suggestedQuality: "tiny",
     },
     events: {
       onReady: ({ target, data }) => {
-        ytPlayer.mute();
+        ytPlayer.pauseVideo();
 
         // Wait until the option is loaded.
+        let count = 0;
         let intervalId = setInterval(() => {
           let ccList = ytPlayer.getOption("captions", "tracklist");
-          if (ccList) {
+          // over 60 sec => video doesn't have any captions
+          if (ccList || count > 600) {
             clearInterval(intervalId);
             callback(ytPlayer);
             return;
           }
+          count++;
         }, 100);
       },
     },
   });
 }
 
 function checkLangCodes(videoId, langs, callback) {
-  let hasSubtitles = false;
-  let langCodeCheck = RegExp(`(${langs.join("|")})`);
-  let vLangField = `${FIELD_VIDEO_LANGS}_${videoId}`;
+  const langCodeCheck = RegExp(`(${langs.join("|")})`);
+  const vLangField = `${FIELD_VIDEO_LANGS}_${videoId}`;
 
   loadData(vLangField, (items) => {
-    if (langCodeCheck.test(items[vLangField])) {
-      callback(true);
-    } else {
-      loadYtPlayer(videoId, (ytPlayer) => {
-        let langCodeList = ytPlayer
-          .getOption("captions", "tracklist")
-          .map((cc) => cc.languageCode);
+    if (items[vLangField]) {
+      const langCodes = items[vLangField].langCodes;
+      const searchTime = items[vLangField].searchTime;
 
-        langCodeList.forEach((langCode) => {
-          hasSubtitles ||= langCodeCheck.test(langCode);
-        });
+      // After one day, the search starts again.
+      if (Date.now() - searchTime < 86400000) {
+        callback(langCodeCheck.test(langCodes));
+        return;
+      }
+    }
 
-        saveData(vLangField, langCodeList.join(","));
+    // The subtitle search start
+    loadYtPlayer(videoId, (ytPlayer) => {
+      let langCodeList = (
+        ytPlayer.getOption("captions", "tracklist") || []
+      ).map((cc) => cc.languageCode);
 
-        callback(hasSubtitles);
-        document.getElementById(`player-${videoId}`).remove();
+      let hasSubtitles = false;
+      langCodeList.forEach((langCode) => {
+        hasSubtitles ||= langCodeCheck.test(langCode);
       });
-    }
+
+      saveData(vLangField, {
+        langCodes: langCodeList.join(","),
+        searchTime: Date.now(),
+      });
+      // remove yt player
+      document.getElementById(`player-${videoId}`).remove();
+
+      callback(hasSubtitles);
+    });
   });
 }
 
@@ -78,6 +84,5 @@ chrome.runtime.onMessage.addListener(({ type, value }, sender, sendRes) => {
 
     checkLangCodes(videoId, langs, sendRes);
   }
-
-  return true;
+  return true; // Inform Chrome that we will make a delayed sendResponse
 });

chrome/js/content_script/subtitleFilter.js

@@ -58,7 +58,8 @@
   }
 
   function waitOverlayLoaded(e, callback) {
-    let overlays = e.querySelector("#overlays");
+    const overlays = e.querySelector("#overlays");
+    if (overlays.childElementCount >= 2) callback(overlays);
 
     let intervalId = setInterval(() => {
       if (overlays.childElementCount < 2) return;
@@ -94,17 +95,17 @@
     // Show tag loading
     showTagLoading(e);
 
-    var callback = (hasSubtitle) => {
+    let callback = (hasSubtitle) => {
       // To avoid deleting the ccStatus,
       // Wait loading video overlays
       waitOverlayLoaded(e, (overlays) => {
-        function removeLoading() {
+        function removeTagLoading() {
           let ccLoading = overlays.querySelector("#cc-loading");
           if (ccLoading) ccLoading.remove();
         }
 
         if (!hasSubtitle) {
-          removeLoading();
+          removeTagLoading();
           return;
         }
         // Once load overlays, insert ccStatus
@@ -127,7 +128,7 @@
         // if user change langauge or url in processing,
         // Remove ccStatus
         if (e.href != url || ccStatus.lang != ccLang) ccStatus.remove();
-        removeLoading();
+        removeTagLoading();
         overlays.insertBefore(ccStatus, overlays.lastChild);
       });
     };
@@ -142,15 +143,27 @@
 
   function hasSubtitles(videoUrl, langs, callback) {
     // URL example : /watch?v=[video_id]
-    var videoId = videoUrl.match(/\?v=([\w-]+)/)[1];
-
-    chrome.runtime.sendMessage(
-      {
-        type: "has-subtitles",
-        value: { langs, videoId },
-      },
-      callback
-    );
+    const videoId = videoUrl.match(/\?v=([\w-]+)/)[1];
+
+    function sendMsg() {
+      chrome.runtime.sendMessage(
+        {
+          type: "has-subtitles",
+          value: { langs, videoId },
+        },
+        (res) => {
+          let lastError = chrome.runtime.lastError;
+          if (lastError) {
+            console.error(lastError.message);
+            return;
+          }
+
+          callback(res);
+        }
+      );
+    }
+
+    sendMsg();
   }
 
   function checkNodes(nodes) {
@@ -179,7 +192,7 @@
   }
 
   function checkAllNode() {
-    var contentElement = document.querySelector("body");
+    let contentElement = document.querySelector("body");
     if (!contentElement) return false;
 
     checkNodes(Array.from(contentElement.children));
@@ -188,7 +201,7 @@
   function initObserver() {
     if (!("MutationObserver" in window)) return false;
 
-    var contentElement = document.querySelector("body");
+    let contentElement = document.querySelector("body");
     if (!contentElement) return false;
 
     checkNodes(Array.from(contentElement.children));

chrome/js/popup/popup.js

@@ -71,10 +71,10 @@ function getKeyByValue(object, value) {
   return Object.keys(object).find((key) => object[key] === value);
 }
 
-function sendMessage(message, callback) {
+function sendMessage(key, value, callback) {
   chrome.tabs.query({}, (tabs) => {
     tabs.forEach((tab) => {
-      chrome.tabs.sendMessage(tab.id, message, callback);
+      chrome.tabs.sendMessage(tab.id, { [key]: value }, callback);
     });
   });
 }
@@ -146,7 +146,7 @@ function combineRegion(enable) {
 }
 langPicker.onchange = () => {
   setLanguage(langPicker.value);
-  sendMessage({ FIELD_LANG: langPicker.value });
+  sendMessage(FIELD_LANG, langPicker.value);
 };
 
 colorBgDisplay.onclick = () => {
@@ -169,24 +169,22 @@ mainDiv.onclick = (e) => {
 
 colorBgPicker.on("color:change", (color) => {
   setColorBg(color.hex8String, false);
-  sendMessage({ FIELD_COLOR_BG: color.hex8String });
+  sendMessage(FIELD_COLOR_BG, color.hex8String);
 });
 colorTxtPicker.on("color:change", (color) => {
   setColorTxt(color.hexString, false);
-  sendMessage({ FIELD_COLOR_TXT: color.hexString });
+  sendMessage(FIELD_COLOR_TXT, color.hexString);
 });
 
 tagSizeRange.oninput = () => {
   let idx = tagSizeRange.value;
   setTagFontSize(TagFontSizes[idx]);
-  sendMessage({ FIELD_TAG_FONT_SIZE: TagFontSizes[idx] });
+  sendMessage(FIELD_TAG_FONT_SIZE, TagFontSizes[ix]);
 };
 
 combineRegionCheckbox.onchange = () => {
   combineRegion(combineRegionCheckbox.checked);
-  sendMessage({
-    FIELD_COMBINE_REGION: combineRegionCheckbox.checked,
-  });
+  sendMessage(FIELD_COMBINE_REGION, combineRegionCheckbox.checked);
 };
 
 // init tag size range

chrome/manifest.json

@@ -4,13 +4,13 @@
   "description": "__MSG_appDesc__",
   "default_locale": "en",
   "manifest_version": 2,
-  "version": "1.2.5",
+  "version": "1.3.0",
   "author": "2jun0",
   "homepage_url": "https://github.com/2jun0/yt-subtitle-filter",
   "icons": {
-    "32": "asset/logo-big-32.png",
-    "64": "asset/logo-big-64.png",
-    "128": "asset/logo-big-128.png"
+    "32": "asset/logo/logo-big-32.png",
+    "64": "asset/logo/logo-big-64.png",
+    "128": "asset/logo/logo-big-128.png"
   },
   "background": {
     "page": "html/background.html",
@@ -19,7 +19,7 @@
   "browser_action": {
     "default_name": "Options",
     "default_popup": "html/popup.html",
-    "default_icon": "asset/logo-little.png"
+    "default_icon": "asset/logo/logo-little.png"
   },
   "content_scripts": [
     {