From 3f5218e9ccef8e3d7f3e49a35558a84093cc10aa Mon Sep 17 00:00:00 2001
From: sopi <sopidev@outlook.jp>
Date: Thu, 19 Dec 2024 18:56:08 +0900
Subject: [PATCH] add an option to adjust the timing of comments

---
 src/config.ts                             |  4 ++++
 src/content_scripts/components/canvas.tsx | 16 +++++++++++++++-
 src/content_scripts/components/scroll.tsx | 10 +++++++++-
 src/options/components/options.tsx        |  4 ++++
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index 870a1dd..e2cc340 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -100,6 +100,10 @@ function get_default_configs() {
       value: [] as { key: string; value: string; enabled: boolean }[],
       type: "text_list",
     },
+    comment_timing_offset: {
+      value: 0 as number,
+      type: "number",
+    },
     enable_addon_smooth_player: {
       value: true as boolean,
       type: "switch",
diff --git a/src/content_scripts/components/canvas.tsx b/src/content_scripts/components/canvas.tsx
index 9051694..d45aa2f 100644
--- a/src/content_scripts/components/canvas.tsx
+++ b/src/content_scripts/components/canvas.tsx
@@ -32,6 +32,7 @@ export class Renderer {
   private req: number | null = null;
   private last = 0;
   private fps = 60;
+  private offset = 0;
 
   constructor(
     canvas: HTMLCanvasElement,
@@ -59,7 +60,9 @@ export class Renderer {
       return;
     }
 
-    this.NiconiComments.drawCanvas(Math.floor(this.video.currentTime * 100));
+    this.NiconiComments.drawCanvas(
+      Math.floor(this.video.currentTime * 100 + this.offset)
+    );
     this.last = timestamp;
     this.req = requestAnimationFrame(this.render.bind(this));
   }
@@ -67,6 +70,9 @@ export class Renderer {
     this.threads = threads;
     this.start();
   }
+  setOffset(offset: number) {
+    this.offset = offset;
+  }
   setOptions(options: Options) {
     this.options = options;
     this.start();
@@ -152,6 +158,12 @@ async function initRenderer() {
           }
           break;
         }
+        case "comment_timing_offset": {
+          if (changes[key].newValue) {
+            renderer.setOffset(Number(changes[key].newValue));
+          }
+          break;
+        }
       }
     }
   });
@@ -159,6 +171,8 @@ async function initRenderer() {
   if (!(await getConfig("show_comments_in_niconico_style"))) return;
   const threads = getThreads()?.threads;
   if (threads) renderer.setThread(threads);
+
+  renderer.setOffset(await getConfig("comment_timing_offset"));
 }
 
 export default initRenderer;
diff --git a/src/content_scripts/components/scroll.tsx b/src/content_scripts/components/scroll.tsx
index 881bb17..61dd10c 100644
--- a/src/content_scripts/components/scroll.tsx
+++ b/src/content_scripts/components/scroll.tsx
@@ -46,6 +46,7 @@ export function Scroll() {
   const [textColor, setTextColor] = useState<string>();
   const [opacity, setOpacity] = useState<number>();
   const [comments, setComments] = useState<nv_comment[]>([]);
+  const [timing_offset, setTimingOffset] = useState<number>(0);
 
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
@@ -56,7 +57,9 @@ export function Scroll() {
       const currentTimeMs = videoEl.current.currentTime * 1000;
       if (virtuoso.current) {
         virtuoso.current.scrollToIndex({
-          index: comments.findIndex((c) => c.vposMs > currentTimeMs),
+          index: comments.findIndex(
+            (c) => c.vposMs > currentTimeMs + timing_offset
+          ),
           align: "end",
         });
       }
@@ -138,6 +141,10 @@ export function Scroll() {
             setShowVpos(await getConfig("show_comment_vpos"));
             break;
           }
+          case "comment_timing_offset": {
+            setTimingOffset(Number(changes[key].newValue));
+            break;
+          }
         }
       }
     });
@@ -162,6 +169,7 @@ export function Scroll() {
       setVisibility(await getConfig("show_comments_in_list"));
       setShowNicoru(await getConfig("show_nicoru_count"));
       setShowVpos(await getConfig("show_comment_vpos"));
+      setTimingOffset(await getConfig("comment_timing_offset"));
 
       videoEl.current = await find_element<HTMLVideoElement>("video");
       videoEl.current?.addEventListener("play", loop.start);
diff --git a/src/options/components/options.tsx b/src/options/components/options.tsx
index 6d43539..373f746 100644
--- a/src/options/components/options.tsx
+++ b/src/options/components/options.tsx
@@ -90,6 +90,10 @@ function Options() {
               _key="load_comments_on_next_video"
               text="連続再生時に自動で次の動画のコメントを読み込む"
             />
+            <EditorNumber
+              _key="comment_timing_offset"
+              text="コメントの表示タイミングを調整する (ms)"
+            />
           </Card>
         </AccordionContent>
       </AccordionItem>