⚡️ 字幕タイミング同期をより正確に

Author: ci7lus

src/components/contentPlayer/SubtitleRenderer.tsx

@@ -17,7 +17,9 @@ import { SUBTITLE_DEFAULT_FONT } from "../../constants/font"
 import { tryBase64ToUint8Array } from "../../utils/string"
 import { getAribb24Configuration } from "../../utils/subtitle"
 
-export const CoiledSubtitleRenderer: React.VFC<{}> = memo(() => {
+export const CoiledSubtitleRenderer: React.VFC<{
+  internalPlayingTimeRef: React.MutableRefObject<number>
+}> = memo(({ internalPlayingTimeRef }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null)
 
   const speed = useRecoilValue(contentPlayerSpeedAtom)
@@ -58,7 +60,8 @@ export const CoiledSubtitleRenderer: React.VFC<{}> = memo(() => {
     const decoded = tryBase64ToUint8Array(aribSubtitleData.data)
     if (!decoded) return
     const fromZero = ((aribSubtitleData.pts * 9) / 100 - firstPcr) / 90_000
-    const pts = fromZero - playingTime / 1000
+    const pts =
+      fromZero - (internalPlayingTimeRef.current || playingTime) / 1000
     const provider = new CanvasProvider(decoded, pts)
     const estimate = provider.render()
     if (!estimate) return

src/components/contentPlayer/VideoPlayer.tsx

@@ -39,7 +39,9 @@ import { getAribb24Configuration } from "../../utils/subtitle"
 import { VideoRenderer } from "../../utils/videoRenderer"
 import { VLCLogFilter } from "../../utils/vlc"
 
-export const CoiledVideoPlayer: React.VFC<{}> = memo(() => {
+export const CoiledVideoPlayer: React.VFC<{
+  internalPlayingTimeRef: React.MutableRefObject<number>
+}> = memo(({ internalPlayingTimeRef }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null)
 
   const [aspect, setAspect] = useState(16 / 9)
@@ -306,10 +308,11 @@ export const CoiledVideoPlayer: React.VFC<{}> = memo(() => {
     let pcr_i_first = 0
     let last = 0
     window.Preload.webchimera.onTimeChanged((time) => {
-      if (300 < Math.abs(time - last)) {
+      if (100 < Math.abs(time - last)) {
         setPlayingTime(time)
         last = time
       }
+      internalPlayingTimeRef.current = time
     })
     window.Preload.webchimera.onLogMessage((_level, message) => {
       const parsed = VLCLogFilter(message)

src/windows/ContentPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react"
+import React, { useEffect, useRef } from "react"
 import { useRecoilValue, useSetRecoilState } from "recoil"
 import pkg from "../../package.json"
 import {
@@ -22,6 +22,7 @@ export const CoiledContentPlayer: React.VFC<{}> = () => {
     globalActiveContentPlayerIdAtom
   )
   const setIsPlaying = useSetRecoilState(contentPlayerIsPlayingAtom)
+  const internalPlayingTimeRef = useRef(-1)
 
   useEffect(() => {
     // 16:9以下の比率になったら戻し、ウィンドウサイズを保存する
@@ -92,7 +93,9 @@ export const CoiledContentPlayer: React.VFC<{}> = () => {
             id="VideoPlayer"
             className="absolute top-0 left-0 w-full h-full flex items-center justify-center"
           >
-            <CoiledVideoPlayer />
+            <CoiledVideoPlayer
+              internalPlayingTimeRef={internalPlayingTimeRef}
+            />
           </div>
           <div
             id="OnPlayerComponents"
@@ -104,7 +107,9 @@ export const CoiledContentPlayer: React.VFC<{}> = () => {
             id="SubtitleRenderer"
             className="absolute top-0 left-0 w-full h-full flex items-center justify-center"
           >
-            <CoiledSubtitleRenderer />
+            <CoiledSubtitleRenderer
+              internalPlayingTimeRef={internalPlayingTimeRef}
+            />
           </div>
           <div
             id="OnSubtitleComponents"