コメントのスレッドを選択するオプションを追加 (#18)

* コメントのスレッドを選択するオプションを追加

* パフォーマンス改善

.vscode/tasks.json

@@ -6,20 +6,23 @@
       "label": "install",
       "type": "shell",
       "command": "npm",
-      "args": ["install"]
+      "args": ["install"],
+      "problemMatcher": []
     },
     {
       "label": "update",
       "type": "shell",
       "command": "npm",
-      "args": ["update"]
+      "args": ["update"],
+      "problemMatcher": []
     },
     {
       "label": "build",
       "type": "shell",
       "group": "build",
       "command": "npm",
-      "args": ["run", "watch"]
+      "args": ["run", "watch"],
+      "problemMatcher": []
     }
   ]
 }

package.json

@@ -30,9 +30,9 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.2",
+    "css-loader": "^6.7.3",
     "prettier": "^2.8.1",
-    "sass": "^1.56.2",
+    "sass": "^1.57.0",
     "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.4.2",

src/content_script/config.ts

@@ -47,6 +47,26 @@ export const defaultConfigs: Array<config> = [
     value: true,
     type: "checkbox",
   },
+  {
+    key: "投稿者コメント",
+    value: false,
+    type: "checkbox",
+  },
+  {
+    key: "通常コメント",
+    value: true,
+    type: "checkbox",
+  },
+  {
+    key: "かんたんコメント",
+    value: false,
+    type: "checkbox",
+  },
+  {
+    key: "自動スクロールの実行間隔 (ミリ秒)",
+    value: 120,
+    type: "number",
+  },
 ];
 
 /**
@@ -59,18 +79,13 @@ export const getConfig = (
   callback: (value: string | number | boolean) => void
 ) => {
   chrome.storage.local.get([key]).then((result) => {
+    const defaultValue = defaultConfigs.find((item) => item.key === key)?.value;
     if (result[key] === undefined || null) {
-      console.log(
-        `${key} (${result[key]}) ${
-          defaultConfigs.find((item) => item.key === key)?.value
-        }`
-      );
+      console.log(`${key} (${result[key]}) ${defaultValue}`);
     } else {
       console.log(key, result[key]);
     }
-    callback(
-      result[key] ?? defaultConfigs.find((item) => item.key === key)?.value
-    );
+    callback(result[key] ?? defaultValue);
   });
 };
 

src/content_script/play/fire.ts

@@ -33,7 +33,9 @@ const fire = async (movieId: string, data: string) => {
    */
   const setD = (message: string, code: string | null) => {
     d.style.display = "block";
-    code ? (d.innerText = `${message}\n${code}`) : (d.innerHTML = `${message}`);
+    code
+      ? (d.innerText = `${message}\nエラーコード : ${code}`)
+      : (d.innerHTML = `${message}`);
     container.appendChild(b);
     return;
   };
@@ -60,7 +62,9 @@ const fire = async (movieId: string, data: string) => {
     } else {
       setD("コメントの取得に失敗しました。", null);
     }
-  } else {
+  }
+  // サーバーからコメントを取得するとき
+  else {
     // サーバーから動画情報を取得する
     chrome.runtime
       .sendMessage({

src/content_script/play/init.ts

@@ -84,7 +84,7 @@ const init = () => {
   b.textContent = "サイドバーを閉じる";
   b.setAttribute("type", "button");
   b.addEventListener("click", () => {
-    b.parentElement?.remove();
+    container.remove();
   });
 
   return { b, s, container, d, video };