fix video aspect retio issue

bea4dev · bea4dev · commit a4f39929d0d5 · 2026-01-02T01:16:39.000+09:00
diff --git a/backend/src/ffmpeg.rs b/backend/src/ffmpeg.rs
@@ -17,6 +17,8 @@ struct FfprobeStream {
     avg_frame_rate: Option<String>,
     r_frame_rate: Option<String>,
     nb_frames: Option<String>,
+    width: Option<u32>,
+    height: Option<u32>,
 }
 
 #[derive(Debug, Deserialize)]
@@ -146,6 +148,23 @@ pub fn probe_video_fps(path: &str) -> Result<f64, String> {
     Ok(fps)
 }
 
+pub fn probe_video_dimensions(path: &str) -> Result<(u32, u32), String> {
+    let output = run_ffprobe(path, Some("v:0"), "stream=width,height")?;
+    let stream = output
+        .streams
+        .as_ref()
+        .and_then(|streams| streams.first())
+        .ok_or_else(|| "failed to read dimensions".to_string())?;
+
+    let width = stream.width.unwrap_or(0);
+    let height = stream.height.unwrap_or(0);
+    if width > 0 && height > 0 {
+        Ok((width, height))
+    } else {
+        Err("failed to read dimensions".to_string())
+    }
+}
+
 /// Return audio duration in milliseconds using ffprobe metadata.
 pub fn probe_audio_duration_ms(path: &str) -> Result<u64, String> {
     // Some containers report bogus global duration; prefer audio stream duration when available.
diff --git a/backend/src/main.rs b/backend/src/main.rs
@@ -28,7 +28,7 @@ use tracing::{error, info};
 
 use crate::{
     decoder::{DECODER, DecoderKey, set_max_cache_size},
-    ffmpeg::{probe_audio_duration_ms, probe_video_duration_ms, probe_video_fps},
+    ffmpeg::{probe_audio_duration_ms, probe_video_dimensions, probe_video_duration_ms, probe_video_fps},
     util::resolve_path_to_string,
 };
 
@@ -429,6 +429,8 @@ async fn healthz_handler() -> impl IntoResponse {
 struct VideoMetadataResponse {
     duration_ms: u64,
     fps: f64,
+    width: u32,
+    height: u32,
 }
 
 async fn video_meta_handler(
@@ -440,8 +442,10 @@ async fn video_meta_handler(
         probe_video_duration_ms(&resolved_path).map_err(|_| StatusCode::BAD_REQUEST)?;
 
     let fps = probe_video_fps(&resolved_path).map_err(|_| StatusCode::BAD_REQUEST)?;
+    let (width, height) =
+        probe_video_dimensions(&resolved_path).map_err(|_| StatusCode::BAD_REQUEST)?;
 
-    let mut resp = Json(VideoMetadataResponse { duration_ms, fps }).into_response();
+    let mut resp = Json(VideoMetadataResponse { duration_ms, fps, width, height }).into_response();
     apply_cors(resp.headers_mut());
     Ok(resp)
 }
diff --git a/src/lib/video/video-render.tsx b/src/lib/video/video-render.tsx
@@ -52,6 +52,7 @@ export type VideoCanvasRenderProps = {
 export const VideoCanvasRender = ({ video, style, trimStartFrames = 0, trimEndFrames = 0 }: VideoCanvasRenderProps) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const wsRef = useRef<WebSocket | null>(null);
+  const canvasSizeRef = useRef({ width: PROJECT_SETTINGS.width, height: PROJECT_SETTINGS.height });
   const pendingMapRef = useRef<Map<number, { manual: ManualPromise<void>; projectFrame: number }>>(new Map());
   const waitersRef = useRef<Map<number, ManualPromise<void>>>(new Map());
   const lastDrawnFrameRef = useRef<number | null>(null);
@@ -87,6 +88,7 @@ export const VideoCanvasRender = ({ video, style, trimStartFrames = 0, trimEndFr
         canvas.width = nextWidth;
         canvas.height = nextHeight;
       }
+      canvasSizeRef.current = { width: canvas.width, height: canvas.height };
     };
 
     resize();
@@ -126,7 +128,6 @@ export const VideoCanvasRender = ({ video, style, trimStartFrames = 0, trimEndFr
     if (projectFrame > prev) {
       lastDrawnFrameRef.current = projectFrame;
     }
-    const hadWaiter = waitersRef.current.has(projectFrame);
     createOrGetFramePromise(projectFrame).resolve()
   }, []);
 
@@ -138,8 +139,8 @@ export const VideoCanvasRender = ({ video, style, trimStartFrames = 0, trimEndFr
 
     const req = {
       video: resolved.path,
-      width: PROJECT_SETTINGS.width,
-      height: PROJECT_SETTINGS.height,
+      width: canvasSizeRef.current.width,
+      height: canvasSizeRef.current.height,
       frame: playbackFrame,
     };
 
diff --git a/src/lib/video/video.tsx b/src/lib/video/video.tsx
@@ -66,48 +66,62 @@ const buildMetaUrl = (video: Video) => {
   return url.toString();
 }
 
-const videoLengthCache = new Map<string, number>()
+type VideoMeta = {
+  duration_ms: number
+  fps: number
+  width: number
+  height: number
+}
 
-/**
- * Returns video length in frames (project FPS).
- *
- * 動画の長さをフレーム数で返します。
- *
- * @example
- * ```ts
- * const frames = video_length("assets/demo.mp4")
- * ```
- */
-export const video_length = (video: Video | string): number => {
-  const resolved = normalizeVideo(video)
+const videoMetaCache = new Map<string, VideoMeta>()
 
-  if (videoLengthCache.has(resolved.path)) {
-    return videoLengthCache.get(resolved.path)!
+const fetchVideoMetaSync = (video: Video): VideoMeta => {
+  if (videoMetaCache.has(video.path)) {
+    return videoMetaCache.get(video.path)!
   }
 
+  const fallback: VideoMeta = { duration_ms: 0, fps: 0, width: 0, height: 0 }
+
   try {
     const xhr = new XMLHttpRequest()
-    xhr.open("GET", buildMetaUrl(resolved), false) // 同期リクエストで初期ロード用途
+    xhr.open("GET", buildMetaUrl(video), false) // 同期リクエストで初期ロード用途
     xhr.send()
 
     if (xhr.status >= 200 && xhr.status < 300) {
-      const payload = JSON.parse(xhr.responseText) as { duration_ms?: number, fps?: number }
-      const seconds = typeof payload.duration_ms === "number"
-        ? Math.max(0, payload.duration_ms) / 1000
-        : 0
-      const frames = Math.round(seconds * PROJECT_SETTINGS.fps)
-      videoLengthCache.set(resolved.path, frames)
-      return frames
+      const payload = JSON.parse(xhr.responseText) as Partial<VideoMeta>
+      const meta: VideoMeta = {
+        duration_ms: typeof payload.duration_ms === "number" ? Math.max(0, payload.duration_ms) : 0,
+        fps: typeof payload.fps === "number" ? payload.fps : 0,
+        width: typeof payload.width === "number" ? Math.max(0, Math.round(payload.width)) : 0,
+        height: typeof payload.height === "number" ? Math.max(0, Math.round(payload.height)) : 0,
+      }
+      videoMetaCache.set(video.path, meta)
+      return meta
     }
   } catch (error) {
-    console.error("video_length(): failed to fetch metadata", error)
+    console.error("fetchVideoMetaSync(): failed to fetch metadata", error)
   }
 
-  videoLengthCache.set(resolved.path, 0)
-  return 0
+  videoMetaCache.set(video.path, fallback)
+  return fallback
 }
 
-const videoFpsCache = new Map<string, number>()
+/**
+ * Returns video length in frames (project FPS).
+ *
+ * 動画の長さをフレーム数で返します。
+ *
+ * @example
+ * ```ts
+ * const frames = video_length("assets/demo.mp4")
+ * ```
+ */
+export const video_length = (video: Video | string): number => {
+  const resolved = normalizeVideo(video)
+  const meta = fetchVideoMetaSync(resolved)
+  const seconds = meta.duration_ms > 0 ? meta.duration_ms / 1000 : 0
+  return Math.round(seconds * PROJECT_SETTINGS.fps)
+}
 
 /**
  * Returns the source video FPS.
@@ -121,28 +135,19 @@ const videoFpsCache = new Map<string, number>()
  */
 export const video_fps = (video: Video | string): number => {
   const resolved = normalizeVideo(video)
+  const meta = fetchVideoMetaSync(resolved)
+  return meta.fps
+}
 
-  if (videoFpsCache.has(resolved.path)) {
-    return videoFpsCache.get(resolved.path)!
-  }
-
-  try {
-    const xhr = new XMLHttpRequest()
-    xhr.open("GET", buildMetaUrl(resolved), false) // 同期リクエストで初期ロード用途
-    xhr.send()
-
-    if (xhr.status >= 200 && xhr.status < 300) {
-      const payload = JSON.parse(xhr.responseText) as { duration_ms?: number, fps?: number }
-      const fps = typeof payload.fps === "number" ? payload.fps : 0
-      videoFpsCache.set(resolved.path, fps)
-      return fps
-    }
-  } catch (error) {
-    console.error("video_fps(): failed to fetch metadata", error)
-  }
+export type VideoDimensions = {
+  width: number
+  height: number
+}
 
-  videoFpsCache.set(resolved.path, 0)
-  return 0
+export const video_dimensions = (video: Video | string): VideoDimensions => {
+  const resolved = normalizeVideo(video)
+  const meta = fetchVideoMetaSync(resolved)
+  return { width: meta.width, height: meta.height }
 }
 
 /**
@@ -175,6 +180,19 @@ export const Video = ({ video, style, trim }: VideoProps) => {
   const id = useId()
   const clipRange = useClipRange()
   const resolvedVideo = useMemo(() => normalizeVideo(video), [video])
+  const resolvedStyle = useMemo(() => {
+    if (style?.aspectRatio != null) {
+      return style
+    }
+    const { width, height } = video_dimensions(resolvedVideo)
+    if (width <= 0 || height <= 0) {
+      return style
+    }
+    return {
+      ...style,
+      aspectRatio: `${width} / ${height}`,
+    }
+  }, [resolvedVideo, style])
   const rawDurationFrames = useMemo(() => video_length(resolvedVideo), [resolvedVideo])
   const { trimStartFrames, trimEndFrames } = useMemo(
     () =>
@@ -211,7 +229,7 @@ export const Video = ({ video, style, trim }: VideoProps) => {
     return (
       <VideoCanvasRender
         video={video}
-        style={style}
+        style={resolvedStyle}
         trimStartFrames={trimStartFrames}
         trimEndFrames={trimEndFrames}
       />
@@ -220,7 +238,7 @@ export const Video = ({ video, style, trim }: VideoProps) => {
     return (
       <VideoCanvas
         video={video}
-        style={style}
+        style={resolvedStyle}
         trimStartFrames={trimStartFrames}
         trimEndFrames={trimEndFrames}
       />
