add an option to adjust the timing of comments

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",

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,14 +60,19 @@ 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));
   }
   setThread(threads: V1Thread[]) {
     this.threads = threads;
     this.start();
   }
+  setOffset(offset: number) {
+    this.offset = offset;
+  }
   setOptions(options: Options) {
     this.options = options;
     this.start();
@@ -152,13 +158,21 @@ async function initRenderer() {
           }
           break;
         }
+        case "comment_timing_offset": {
+          if (changes[key].newValue) {
+            renderer.setOffset(Number(changes[key].newValue));
+          }
+          break;
+        }
       }
     }
   });
 
   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;

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);

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>