Merge branch 'main' into fix/map-unresponsive

* fix av typing, move fixtures to stub file

* fix tests

mobile/lib/routing/app_navigation_observer.dart

@@ -27,6 +27,16 @@ class AppNavigationObserver extends AutoRouterObserver {
     });
   }
 
+  @override
+  void didPop(Route route, Route? previousRoute) {
+    _handleDriftLockedFolderState(previousRoute ?? route, null);
+    Future(() {
+      ref.read(currentRouteNameProvider.notifier).state = previousRoute?.settings.name;
+      ref.read(previousRouteNameProvider.notifier).state = ref.read(previousRouteNameProvider);
+      ref.read(previousRouteDataProvider.notifier).state = previousRoute?.settings;
+    });
+  }
+
   _handleDriftLockedFolderState(Route route, Route? previousRoute) {
     final isInLockedView = ref.read(inLockedViewProvider);
     final isFromLockedViewToDetailView =

server/src/repositories/media.repository.ts

@@ -274,23 +274,23 @@ export class MediaRepository {
             index: stream.index,
             height,
             width: dar ? Math.round(height * dar) : this.parseInt(stream.width),
-            codecName: stream.codec_name === 'h265' ? 'hevc' : stream.codec_name,
-            profile: this.parseVideoProfile(stream.codec_name, stream.profile as string | undefined),
+            codecName: stream.codec_name === 'h265' ? 'hevc' : (stream.codec_name ?? null),
+            profile: this.parseVideoProfile(stream.codec_name, stream.profile as string | undefined) ?? null,
             level: this.parseOptionalInt(stream.level),
             frameCount: this.parseInt(options?.countFrames ? stream.nb_read_packets : stream.nb_frames),
             frameRate: this.parseFrameRate(stream.avg_frame_rate ?? stream.r_frame_rate),
-            timeBase: this.parseRational(stream.time_base)?.den,
+            timeBase: this.parseRational(stream.time_base)?.den ?? null,
             rotation: this.parseInt(stream.rotation),
             bitrate: this.parseInt(stream.bit_rate),
             pixelFormat: stream.pix_fmt || 'yuv420p',
             colorPrimaries: this.parseEnum(ColorPrimaries, stream.color_primaries) ?? ColorPrimaries.Unknown,
             colorMatrix: this.parseEnum(ColorMatrix, stream.color_space) ?? ColorMatrix.Unknown,
             colorTransfer: this.parseEnum(ColorTransfer, stream.color_transfer) ?? ColorTransfer.Unknown,
-            dvProfile: this.parseOptionalInt(stream.dv_profile) as DvProfile | undefined,
+            dvProfile: this.parseOptionalInt(stream.dv_profile) as DvProfile | null,
             dvLevel: this.parseOptionalInt(stream.dv_level),
-            dvBlSignalCompatibilityId: this.parseOptionalInt(stream.dv_bl_signal_compatibility_id) as
-              | DvSignalCompatibility
-              | undefined,
+            dvBlSignalCompatibilityId: this.parseOptionalInt(
+              stream.dv_bl_signal_compatibility_id,
+            ) as DvSignalCompatibility | null,
           };
         }),
       audioStreams: results.streams
@@ -298,9 +298,9 @@ export class MediaRepository {
         .sort((a, b) => this.compareStreams(a, b))
         .map((stream) => ({
           index: stream.index,
-          codecName: stream.codec_name,
+          codecName: stream.codec_name ?? null,
           profile:
-            stream.codec_name === 'aac' ? this.parseEnum(AacProfile, stream.profile as string | undefined) : undefined,
+            stream.codec_name === 'aac' ? this.parseEnum(AacProfile, stream.profile as string | undefined) : null,
           bitrate: this.parseInt(stream.bit_rate),
         })),
     };
@@ -449,29 +449,29 @@ export class MediaRepository {
     return Number.parseFloat(value as string) || 0;
   }
 
-  private parseOptionalInt(value: string | number | undefined): number | undefined {
+  private parseOptionalInt(value: string | number | undefined): number | null {
     const parsed = Number.parseInt(value as string);
-    return Number.isNaN(parsed) ? undefined : parsed;
+    return Number.isNaN(parsed) ? null : parsed;
   }
 
   private parseEnum<E extends Record<string, number | string>>(enumObj: E, value?: string) {
-    return value ? (enumObj[pascalCase(value)] as Extract<E[keyof E], number> | undefined) : undefined;
+    return value ? ((enumObj[pascalCase(value)] as Extract<E[keyof E], number> | undefined) ?? null) : null;
   }
 
   /** Parse a rational like "60000/1001" or "1/600" into `{ num, den }`. */
-  private parseRational(value: string | undefined): { num: number; den: number } | undefined {
-    if (!value) {
-      return;
-    }
-    const [num, den = 1] = value.split('/').map(Number);
-    if (num && den) {
-      return { num, den };
+  private parseRational(value: string | undefined): { num: number; den: number } | null {
+    if (value) {
+      const [num, den = 1] = value.split('/').map(Number);
+      if (num && den) {
+        return { num, den };
+      }
     }
+    return null;
   }
 
-  private parseFrameRate(value: string | undefined): number | undefined {
+  private parseFrameRate(value: string | undefined): number | null {
     const r = this.parseRational(value);
-    return r ? r.num / r.den : undefined;
+    return r ? r.num / r.den : null;
   }
 
   private getDar(dar: string | undefined): number {
@@ -498,6 +498,7 @@ export class MediaRepository {
         return this.parseEnum(Av1Profile, profile);
       }
     }
+    return null;
   }
 
   private compareStreams(a: FfprobeStream, b: FfprobeStream): number {

server/src/services/media.service.spec.ts

@@ -1,4 +1,4 @@
-import { NotNull, ShallowDehydrateObject } from 'kysely';
+import { ShallowDehydrateObject } from 'kysely';
 import { OutputInfo } from 'sharp';
 import { SystemConfig } from 'src/config';
 import { Exif } from 'src/database';
@@ -1937,7 +1937,7 @@ describe(MediaService.name, () => {
 
   describe('handleVideoConversion', () => {
     let asset: ReturnType<typeof AssetFactory.create> & {
-      videoStream: VideoStreamInfo & { timeBase: NotNull };
+      videoStream: VideoStreamInfo & { timeBase: number };
       audioStream: AudioStreamInfo | null;
       format: VideoFormat;
     };

server/src/services/metadata.service.spec.ts

@@ -672,7 +672,7 @@ describe(MetadataService.name, () => {
             colorPrimaries: 9,
             colorTransfer: 16,
             colorMatrix: 9,
-            dvProfile: undefined,
+            dvProfile: null,
           }),
         }),
       );

server/src/types.ts

@@ -89,26 +89,26 @@ export interface VideoStreamInfo {
   height: number;
   width: number;
   rotation: number;
-  codecName?: string;
-  profile?: H264Profile | HevcProfile | Av1Profile;
-  level?: number;
+  codecName: string | null;
+  profile: H264Profile | HevcProfile | Av1Profile | null;
+  level: number | null;
   frameCount: number;
-  frameRate?: number;
-  timeBase?: number;
+  frameRate: number | null;
+  timeBase: number | null;
   bitrate: number;
   pixelFormat: string;
   colorPrimaries: ColorPrimaries;
   colorMatrix: ColorMatrix;
   colorTransfer: ColorTransfer;
-  dvProfile?: DvProfile;
-  dvLevel?: number;
-  dvBlSignalCompatibilityId?: DvSignalCompatibility;
+  dvProfile: DvProfile | null;
+  dvLevel: number | null;
+  dvBlSignalCompatibilityId: DvSignalCompatibility | null;
 }
 
 export interface AudioStreamInfo {
   index: number;
-  codecName?: string;
-  profile?: AacProfile;
+  codecName: string | null;
+  profile: AacProfile | null;
   bitrate: number;
 }
 

server/src/utils/database.ts

@@ -21,7 +21,7 @@ import { AssetFileType, AssetVisibility, DatabaseExtension, ExifOrientation } fr
 import { AssetSearchBuilderOptions } from 'src/repositories/search.repository';
 import { DB } from 'src/schema';
 import { AssetExifTable } from 'src/schema/tables/asset-exif.table';
-import { AudioStreamInfo, VectorExtension, VideoFormat, VideoStreamInfo } from 'src/types';
+import { AudioStreamInfo, VectorExtension, VideoFormat, VideoPacketInfo, VideoStreamInfo } from 'src/types';
 
 export const getKyselyConfig = (connection: DatabaseConnectionParams): KyselyConfig => {
   return {
@@ -146,7 +146,7 @@ export function withVideoStream(eb: ExpressionBuilder<DB, 'asset_exif' | 'asset_
         'asset_video.dvBlSignalCompatibilityId',
       ])
       .where('asset_video.assetId', 'is not', sql.lit(null)),
-  ).$castTo<(VideoStreamInfo & { timeBase: NotNull }) | null>();
+  ).$castTo<(VideoStreamInfo & { timeBase: number }) | null>();
 }
 
 export function withVideoFormat(eb: ExpressionBuilder<DB, 'asset' | 'asset_video'>) {
@@ -158,6 +158,22 @@ export function withVideoFormat(eb: ExpressionBuilder<DB, 'asset' | 'asset_video
   ).$castTo<VideoFormat | null>();
 }
 
+export function withVideoPackets(eb: ExpressionBuilder<DB, 'asset' | 'asset_keyframe'>) {
+  return jsonObjectFrom(
+    eb
+      .selectFrom(dummy)
+      .where('asset_keyframe.assetId', 'is not', sql.lit(null))
+      .select([
+        'asset_keyframe.pts as keyframePts',
+        'asset_keyframe.accDuration as keyframeAccDuration',
+        'asset_keyframe.ownDuration as keyframeOwnDuration',
+        'asset_keyframe.totalDuration',
+        'asset_keyframe.packetCount',
+        'asset_keyframe.outputFrames',
+      ]),
+  ).$castTo<VideoPacketInfo | null>();
+}
+
 export function withSmartSearch<O>(qb: SelectQueryBuilder<DB, 'asset', O>) {
   return qb
     .leftJoin('smart_search', 'asset.id', 'smart_search.assetId')

server/test/fixtures/media.stub.ts

@@ -1,5 +1,13 @@
-import { NotNull } from 'kysely';
-import { ColorMatrix, ColorPrimaries, ColorTransfer, DvProfile, DvSignalCompatibility } from 'src/enum';
+import {
+  AacProfile,
+  ColorMatrix,
+  ColorPrimaries,
+  ColorTransfer,
+  DvProfile,
+  DvSignalCompatibility,
+  H264Profile,
+  HevcProfile,
+} from 'src/enum';
 import { AudioStreamInfo, VideoFormat, VideoInfo, VideoStreamInfo } from 'src/types';
 
 const probeStubDefaultFormat: VideoFormat = {
@@ -22,11 +30,17 @@ const probeStubDefaultVideoStream: VideoStreamInfo[] = [
     colorTransfer: ColorTransfer.Bt709,
     colorMatrix: ColorMatrix.Bt709,
     pixelFormat: 'yuv420p',
+    frameRate: 60,
     timeBase: 600,
+    profile: HevcProfile.Main,
+    level: null,
+    dvBlSignalCompatibilityId: null,
+    dvLevel: null,
+    dvProfile: null,
   },
 ];
 
-const probeStubDefaultAudioStream: AudioStreamInfo[] = [{ index: 3, codecName: 'mp3', bitrate: 100 }];
+const probeStubDefaultAudioStream: AudioStreamInfo[] = [{ index: 3, codecName: 'mp3', bitrate: 100, profile: null }];
 
 const probeStubDefault: VideoInfo = {
   format: probeStubDefaultFormat,
@@ -53,7 +67,13 @@ export const videoInfoStub = {
         colorTransfer: ColorTransfer.Bt709,
         colorMatrix: ColorMatrix.Bt709,
         pixelFormat: 'yuv420p',
+        frameRate: 60,
         timeBase: 600,
+        profile: HevcProfile.Main,
+        level: null,
+        dvBlSignalCompatibilityId: null,
+        dvLevel: null,
+        dvProfile: null,
       },
       {
         index: 0,
@@ -67,7 +87,13 @@ export const videoInfoStub = {
         colorTransfer: ColorTransfer.Bt709,
         colorMatrix: ColorMatrix.Bt709,
         pixelFormat: 'yuv420p',
+        frameRate: 60,
         timeBase: 600,
+        profile: HevcProfile.Main,
+        level: null,
+        dvBlSignalCompatibilityId: null,
+        dvLevel: null,
+        dvProfile: null,
       },
       {
         index: 2,
@@ -81,16 +107,22 @@ export const videoInfoStub = {
         colorTransfer: ColorTransfer.Bt709,
         colorMatrix: ColorMatrix.Bt709,
         pixelFormat: 'yuv420p',
+        frameRate: 60,
         timeBase: 600,
+        profile: HevcProfile.Main,
+        level: null,
+        dvBlSignalCompatibilityId: null,
+        dvLevel: null,
+        dvProfile: null,
       },
     ],
   }),
   multipleAudioStreams: Object.freeze<VideoInfo>({
     ...probeStubDefault,
     audioStreams: [
-      { index: 2, codecName: 'mp3', bitrate: 102 },
-      { index: 1, codecName: 'mp3', bitrate: 101 },
-      { index: 0, codecName: 'mp3', bitrate: 100 },
+      { index: 2, codecName: 'mp3', bitrate: 102, profile: null },
+      { index: 1, codecName: 'mp3', bitrate: 101, profile: null },
+      { index: 0, codecName: 'mp3', bitrate: 100, profile: null },
     ],
   }),
   noHeight: Object.freeze<VideoInfo>({
@@ -108,7 +140,13 @@ export const videoInfoStub = {
         colorTransfer: ColorTransfer.Bt709,
         colorMatrix: ColorMatrix.Bt709,
         pixelFormat: 'yuv420p',
+        frameRate: 60,
         timeBase: 600,
+        profile: HevcProfile.Main,
+        level: null,
+        dvBlSignalCompatibilityId: null,
+        dvLevel: null,
+        dvProfile: null,
       },
     ],
   }),
@@ -127,7 +165,13 @@ export const videoInfoStub = {
         colorTransfer: ColorTransfer.Bt709,
         colorMatrix: ColorMatrix.Bt709,
         pixelFormat: 'yuv420p',
+        frameRate: 60,
         timeBase: 600,
+        profile: HevcProfile.Main,
+        level: null,
+        dvBlSignalCompatibilityId: null,
+        dvLevel: null,
+        dvProfile: null,
       },
     ],
   }),
@@ -159,7 +203,13 @@ export const videoInfoStub = {
         colorTransfer: ColorTransfer.Smpte2084,
         bitrate: 0,
         pixelFormat: 'yuv420p10le',
+        frameRate: 60,
         timeBase: 600,
+        profile: H264Profile.High10,
+        level: null,
+        dvBlSignalCompatibilityId: null,
+        dvLevel: null,
+        dvProfile: null,
       },
     ],
   }),
@@ -178,7 +228,13 @@ export const videoInfoStub = {
         colorTransfer: ColorTransfer.Bt709,
         colorMatrix: ColorMatrix.Bt709,
         pixelFormat: 'yuv420p10le',
+        frameRate: 60,
         timeBase: 600,
+        profile: H264Profile.High10,
+        level: null,
+        dvBlSignalCompatibilityId: null,
+        dvLevel: null,
+        dvProfile: null,
       },
     ],
   }),
@@ -197,7 +253,13 @@ export const videoInfoStub = {
         colorTransfer: ColorTransfer.Bt709,
         colorMatrix: ColorMatrix.Bt709,
         pixelFormat: 'yuv420p10le',
+        frameRate: 60,
         timeBase: 600,
+        profile: H264Profile.High10,
+        level: null,
+        dvBlSignalCompatibilityId: null,
+        dvLevel: null,
+        dvProfile: null,
       },
     ],
   }),
@@ -216,7 +278,13 @@ export const videoInfoStub = {
         colorTransfer: ColorTransfer.Bt709,
         colorMatrix: ColorMatrix.Bt709,
         pixelFormat: 'yuv420p',
+        frameRate: 60,
         timeBase: 600,
+        profile: H264Profile.High,
+        level: null,
+        dvBlSignalCompatibilityId: null,
+        dvLevel: null,
+        dvProfile: null,
       },
     ],
   }),
@@ -235,7 +303,13 @@ export const videoInfoStub = {
         colorTransfer: ColorTransfer.Bt709,
         colorMatrix: ColorMatrix.Bt709,
         pixelFormat: 'yuv420p',
+        frameRate: 60,
         timeBase: 600,
+        profile: H264Profile.Main,
+        level: null,
+        dvBlSignalCompatibilityId: null,
+        dvLevel: null,
+        dvProfile: null,
       },
     ],
   }),
@@ -254,27 +328,33 @@ export const videoInfoStub = {
         colorTransfer: ColorTransfer.Bt709,
         colorMatrix: ColorMatrix.Bt709,
         pixelFormat: 'yuv420p',
+        frameRate: 60,
         timeBase: 600,
+        profile: H264Profile.Main,
+        level: null,
+        dvBlSignalCompatibilityId: null,
+        dvLevel: null,
+        dvProfile: null,
       },
     ],
   }),
   audioStreamAac: Object.freeze<VideoInfo>({
     ...probeStubDefault,
-    audioStreams: [{ index: 1, codecName: 'aac', bitrate: 100 }],
+    audioStreams: [{ index: 1, codecName: 'aac', bitrate: 100, profile: AacProfile.Lc }],
   }),
   audioStreamMp3: Object.freeze<VideoInfo>({
     ...probeStubDefault,
-    audioStreams: [{ index: 1, codecName: 'mp3', bitrate: 100 }],
+    audioStreams: [{ index: 1, codecName: 'mp3', bitrate: 100, profile: null }],
   }),
   audioStreamOpus: Object.freeze<VideoInfo>({
     ...probeStubDefault,
-    audioStreams: [{ index: 1, codecName: 'opus', bitrate: 100 }],
+    audioStreams: [{ index: 1, codecName: 'opus', bitrate: 100, profile: null }],
   }),
   audioStreamUnknown: Object.freeze<VideoInfo>({
     ...probeStubDefault,
     audioStreams: [
-      { index: 0, codecName: 'aac', bitrate: 100 },
-      { index: 1, codecName: 'unknown', bitrate: 200 },
+      { index: 0, codecName: 'aac', bitrate: 100, profile: AacProfile.Lc },
+      { index: 1, codecName: 'unknown', bitrate: 200, profile: null },
     ],
   }),
   matroskaContainer: Object.freeze<VideoInfo>({
@@ -340,6 +420,9 @@ export const videoInfoStub = {
         colorMatrix: ColorMatrix.Bt2020Nc,
         colorTransfer: ColorTransfer.Smpte2084,
         timeBase: 600,
+        dvBlSignalCompatibilityId: null,
+        dvLevel: null,
+        dvProfile: null,
       },
     ],
   }),
@@ -393,7 +476,7 @@ export const videoInfoStub = {
 };
 
 interface SelectedStreams {
-  videoStream: VideoStreamInfo & { timeBase: NotNull };
+  videoStream: VideoStreamInfo & { timeBase: number };
   audioStream: AudioStreamInfo | null;
   format: VideoFormat;
 }
@@ -407,3 +490,128 @@ const toSelectedStreams = (info: VideoInfo) => ({
 export const probeStub = Object.fromEntries(
   Object.entries(videoInfoStub).map(([key, info]) => [key, toSelectedStreams(info)]),
 ) as Record<keyof typeof videoInfoStub, SelectedStreams>;
+
+export const eiffelTower = {
+  originalPath: 'eiffel-tower.mp4',
+  videoStream: {
+    index: 0,
+    width: 1080,
+    height: 1920,
+    rotation: 0,
+    codecName: 'h264',
+    profile: H264Profile.High,
+    level: 40,
+    frameCount: 557,
+    frameRate: 24.908_004_845_459_07,
+    timeBase: 90_000,
+    bitrate: 5_128_622,
+    pixelFormat: 'yuv420p',
+    colorPrimaries: ColorPrimaries.Smpte170M,
+    colorTransfer: ColorTransfer.Smpte170M,
+    colorMatrix: ColorMatrix.Smpte170M,
+    dvProfile: null,
+    dvLevel: null,
+    dvBlSignalCompatibilityId: null,
+  },
+  audioStream: { codecName: 'aac', bitrate: 125_629, index: 1, profile: AacProfile.Lc },
+  packets: {
+    totalDuration: 2_012_441,
+    packetCount: 557,
+    outputFrames: 557,
+    keyframePts: [0, 462_502, 925_004, 1_210_454, 1_387_506, 1_542_878, 1_850_008],
+    keyframeAccDuration: [3613, 466_077, 928_541, 1_213_968, 1_391_005, 1_546_364, 1_853_469],
+    keyframeOwnDuration: [3613, 3613, 3613, 3613, 3613, 3613, 3613],
+  },
+  format: {
+    formatName: 'mov,mp4,m4a,3gp,3g2,mj2',
+    formatLongName: 'QuickTime / MOV',
+    duration: 22_616,
+    bitrate: 5_128_622,
+  },
+};
+
+export const waterfall = {
+  originalPath: 'waterfall.mp4',
+  videoStream: {
+    index: 2,
+    width: 3840,
+    height: 2160,
+    rotation: -90,
+    codecName: 'hevc',
+    profile: HevcProfile.Main,
+    level: 156,
+    frameCount: 309,
+    frameRate: 29.829_901_982_867_92,
+    timeBase: 90_000,
+    bitrate: 43_363_499,
+    pixelFormat: 'yuvj420p',
+    colorPrimaries: ColorPrimaries.Bt709,
+    colorTransfer: ColorTransfer.Bt709,
+    colorMatrix: ColorMatrix.Bt709,
+    dvProfile: null,
+    dvLevel: null,
+    dvBlSignalCompatibilityId: null,
+  },
+  audioStream: { codecName: 'aac', bitrate: 191_878, index: 1, profile: null },
+  packets: {
+    totalDuration: 932_286,
+    packetCount: 309,
+    outputFrames: 309,
+    keyframePts: [0, 89_987, 179_974, 269_961, 359_948, 449_936, 539_923, 629_910, 725_166, 815_273, 905_295],
+    keyframeAccDuration: [
+      2999, 92_987, 182_974, 272_961, 362_948, 452_934, 542_922, 632_909, 728_175, 818_274, 908_296,
+    ],
+    keyframeOwnDuration: [2999, 3000, 3000, 3000, 3000, 2998, 2999, 2999, 3009, 3001, 3001],
+  },
+  format: {
+    formatName: 'mov,mp4,m4a,3gp,3g2,mj2',
+    formatLongName: 'QuickTime / MOV',
+    duration: 10_359,
+    bitrate: 43_363_499,
+  },
+};
+
+export const train = {
+  originalPath: 'train.mov',
+  videoStream: {
+    index: 0,
+    width: 1920,
+    height: 1080,
+    rotation: -90,
+    codecName: 'hevc',
+    profile: HevcProfile.Main10,
+    level: 123,
+    frameCount: 1229,
+    frameRate: 56.536_072_989_342_94,
+    timeBase: 600,
+    bitrate: 12_595_191,
+    pixelFormat: 'yuv420p10le',
+    colorPrimaries: ColorPrimaries.Bt2020,
+    colorTransfer: ColorTransfer.AribStdB67,
+    colorMatrix: ColorMatrix.Bt2020Nc,
+    dvProfile: DvProfile.Dvhe08,
+    dvLevel: 5,
+    dvBlSignalCompatibilityId: DvSignalCompatibility.Hlg,
+  },
+  audioStream: { codecName: 'aac', bitrate: 175_477, index: 1, profile: AacProfile.Lc },
+  packets: {
+    totalDuration: 12_290,
+    packetCount: 1229,
+    outputFrames: 1303,
+    keyframePts: [
+      0, 601, 1201, 1802, 2402, 3003, 3604, 4204, 4805, 5405, 6006, 6607, 7207, 7808, 8408, 9009, 9609, 10_210, 10_811,
+      11_411, 12_062, 12_703,
+    ],
+    keyframeAccDuration: [
+      10, 580, 1180, 1780, 2380, 2980, 3580, 4180, 4780, 5380, 5980, 6580, 7180, 7780, 8380, 8980, 9580, 10_180, 10_780,
+      11_380, 11_780, 12_100,
+    ],
+    keyframeOwnDuration: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
+  },
+  format: {
+    formatName: 'mov,mp4,m4a,3gp,3g2,mj2',
+    formatLongName: 'QuickTime / MOV',
+    duration: 21_738,
+    bitrate: 12_595_191,
+  },
+};

server/test/mappers.ts

@@ -1,4 +1,4 @@
-import { NotNull, Selectable, ShallowDehydrateObject } from 'kysely';
+import { Selectable, ShallowDehydrateObject } from 'kysely';
 import { MapAsset } from 'src/dtos/asset-response.dto';
 import { AssetEditActionItem } from 'src/dtos/editing.dto';
 import { ActivityTable } from 'src/schema/tables/activity.table';
@@ -156,7 +156,7 @@ export const getForGenerateThumbnail = (asset: ReturnType<AssetFactory['build']>
   files: asset.files.map((file) => getDehydrated(file)),
   exifInfo: getDehydrated(asset.exifInfo),
   edits: asset.edits.map(({ action, parameters }) => ({ action, parameters })) as AssetEditActionItem[],
-  videoStream: null as (VideoStreamInfo & { timeBase: NotNull }) | null,
+  videoStream: null as (VideoStreamInfo & { timeBase: number }) | null,
   audioStream: null as AudioStreamInfo | null,
   format: null as VideoFormat | null,
 });

server/test/medium/specs/exif/audio-video.spec.ts

@@ -1,17 +1,9 @@
 import { Kysely } from 'kysely';
 import { resolve } from 'node:path';
-import {
-  AacProfile,
-  AssetType,
-  ColorMatrix,
-  ColorPrimaries,
-  ColorTransfer,
-  DvProfile,
-  DvSignalCompatibility,
-  H264Profile,
-  HevcProfile,
-} from 'src/enum';
+import { AssetType } from 'src/enum';
 import { DB } from 'src/schema';
+import { withAudioStream, withVideoFormat, withVideoPackets, withVideoStream } from 'src/utils/database';
+import { eiffelTower, train, waterfall } from 'test/fixtures/media.stub';
 import { ExifTestContext, testAssetsDir } from 'test/medium.factory';
 import { getKyselyDB } from 'test/utils';
 
@@ -21,122 +13,30 @@ beforeAll(async () => {
   database = await getKyselyDB();
 });
 
-const fixtures = [
-  {
-    file: 'eiffel-tower.mp4',
-    video: {
-      codecName: 'h264',
-      formatName: 'mov,mp4,m4a,3gp,3g2,mj2',
-      formatLongName: 'QuickTime / MOV',
-      pixelFormat: 'yuv420p',
-      bitrate: 5_128_622,
-      frameCount: 557,
-      timeBase: 90_000,
-      index: 0,
-      profile: H264Profile.High,
-      level: 40,
-      colorPrimaries: ColorPrimaries.Smpte170M,
-      colorTransfer: ColorTransfer.Smpte170M,
-      colorMatrix: ColorMatrix.Smpte170M,
-      dvProfile: null,
-      dvLevel: null,
-      dvBlSignalCompatibilityId: null,
-    },
-    audio: { codecName: 'aac', bitrate: 125_629, index: 1, profile: AacProfile.Lc },
-    keyframes: {
-      totalDuration: 2_012_441,
-      packetCount: 557,
-      outputFrames: 557,
-      pts: [0, 462_502, 925_004, 1_210_454, 1_387_506, 1_542_878, 1_850_008],
-      accDuration: [3613, 466_077, 928_541, 1_213_968, 1_391_005, 1_546_364, 1_853_469],
-      ownDuration: [3613, 3613, 3613, 3613, 3613, 3613, 3613],
-    },
-  },
-  {
-    file: 'waterfall.mp4',
-    video: {
-      codecName: 'hevc',
-      formatName: 'mov,mp4,m4a,3gp,3g2,mj2',
-      formatLongName: 'QuickTime / MOV',
-      pixelFormat: 'yuvj420p',
-      bitrate: 43_363_499,
-      frameCount: 309,
-      timeBase: 90_000,
-      index: 2,
-      profile: HevcProfile.Main,
-      level: 156,
-      colorPrimaries: ColorPrimaries.Bt709,
-      colorTransfer: ColorTransfer.Bt709,
-      colorMatrix: ColorMatrix.Bt709,
-      dvProfile: null,
-      dvLevel: null,
-      dvBlSignalCompatibilityId: null,
-    },
-    audio: { codecName: 'aac', bitrate: 191_878, index: 1, profile: null },
-    keyframes: {
-      totalDuration: 932_286,
-      packetCount: 309,
-      outputFrames: 309,
-      pts: [0, 89_987, 179_974, 269_961, 359_948, 449_936, 539_923, 629_910, 725_166, 815_273, 905_295],
-      accDuration: [2999, 92_987, 182_974, 272_961, 362_948, 452_934, 542_922, 632_909, 728_175, 818_274, 908_296],
-      ownDuration: [2999, 3000, 3000, 3000, 3000, 2998, 2999, 2999, 3009, 3001, 3001],
-    },
-  },
-  {
-    file: 'train.mov',
-    video: {
-      codecName: 'hevc',
-      formatName: 'mov,mp4,m4a,3gp,3g2,mj2',
-      formatLongName: 'QuickTime / MOV',
-      pixelFormat: 'yuv420p10le',
-      bitrate: 12_595_191,
-      frameCount: 1229,
-      timeBase: 600,
-      index: 0,
-      profile: HevcProfile.Main10,
-      level: 123,
-      colorPrimaries: ColorPrimaries.Bt2020,
-      colorTransfer: ColorTransfer.AribStdB67,
-      colorMatrix: ColorMatrix.Bt2020Nc,
-      dvProfile: DvProfile.Dvhe08,
-      dvLevel: 5,
-      dvBlSignalCompatibilityId: DvSignalCompatibility.Hlg,
-    },
-    audio: { codecName: 'aac', bitrate: 175_477, index: 1, profile: AacProfile.Lc },
-    keyframes: {
-      totalDuration: 12_290,
-      packetCount: 1229,
-      outputFrames: 1303,
-      pts: [
-        0, 601, 1201, 1802, 2402, 3003, 3604, 4204, 4805, 5405, 6006, 6607, 7207, 7808, 8408, 9009, 9609, 10_210,
-        10_811, 11_411, 12_062, 12_703,
-      ],
-      accDuration: [
-        10, 580, 1180, 1780, 2380, 2980, 3580, 4180, 4780, 5380, 5980, 6580, 7180, 7780, 8380, 8980, 9580, 10_180,
-        10_780, 11_380, 11_780, 12_100,
-      ],
-      ownDuration: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
-    },
-  },
-];
-
-const isExpected = <T extends keyof DB>(name: T, id: string, expected: Omit<DB[T], 'assetId'>) => {
-  const { table, ref } = database.dynamic;
-  const res = database.selectFrom(table(name).as('t')).selectAll().where(ref('assetId'), '=', id).executeTakeFirst();
-  return expect(res).resolves.toEqual({ ...expected, assetId: id });
-};
+const fixtures = [eiffelTower, waterfall, train];
 
 describe('video metadata extraction', () => {
-  it.each(fixtures)('$file', async ({ file, video, audio, keyframes }) => {
+  it.each(fixtures)('$originalPath', async ({ originalPath: path, videoStream, audioStream, packets, format }) => {
     const ctx = new ExifTestContext(database);
     const { user } = await ctx.newUser();
-    const originalPath = resolve(testAssetsDir, 'videos', file);
+    const originalPath = resolve(testAssetsDir, 'videos', path);
     const { asset } = await ctx.newAsset({ ownerId: user.id, originalPath, type: AssetType.Video });
 
     await ctx.sut.handleMetadataExtraction({ id: asset.id });
 
-    await isExpected('asset_audio', asset.id, audio);
-    await isExpected('asset_video', asset.id, video);
-    await isExpected('asset_keyframe', asset.id, keyframes);
+    const result = await database
+      .selectFrom('asset')
+      .innerJoin('asset_exif', 'asset.id', 'asset_exif.assetId')
+      .innerJoin('asset_video', 'asset.id', 'asset_video.assetId')
+      .innerJoin('asset_keyframe', 'asset.id', 'asset_keyframe.assetId')
+      .leftJoin('asset_audio', 'asset.id', 'asset_audio.assetId')
+      .where('asset.id', '=', asset.id)
+      .select((eb) => withVideoStream(eb).$notNull().as('videoStream'))
+      .select((eb) => withAudioStream(eb).as('audioStream'))
+      .select((eb) => withVideoPackets(eb).$notNull().as('packets'))
+      .select((eb) => withVideoFormat(eb).$notNull().as('format'))
+      .executeTakeFirst();
+
+    expect(result).toEqual({ videoStream, audioStream, packets, format });
   });
 });

web/src/lib/components/asset-viewer/PhotoViewer.svelte

@@ -284,11 +284,7 @@
     {/snippet}
   </AdaptiveImage>
 
-  {#if assetViewerManager.isFaceEditMode && assetViewerManager.imgRef && asset.width && asset.height}
-    <FaceEditor
-      assetSize={{ width: asset.width, height: asset.height }}
-      containerSize={{ width: containerWidth, height: containerHeight }}
-      assetId={asset.id}
-    />
+  {#if assetViewerManager.isFaceEditMode && assetViewerManager.imgRef}
+    <FaceEditor htmlElement={assetViewerManager.imgRef} {containerWidth} {containerHeight} assetId={asset.id} />
   {/if}
 </div>

web/src/lib/components/asset-viewer/VideoNativeViewer.svelte

@@ -140,40 +140,9 @@
   let containerHeight = $state(0);
 
   $effect(() => {
-    if (!assetViewerManager.isFaceEditMode || !videoPlayer) {
-      return;
+    if (assetViewerManager.isFaceEditMode) {
+      videoPlayer?.pause();
     }
-    videoPlayer.pause();
-
-    const { videoWidth, videoHeight } = videoPlayer;
-    if (videoWidth === 0 || videoHeight === 0) {
-      return;
-    }
-
-    const canvas = document.createElement('canvas');
-    canvas.width = videoWidth;
-    canvas.height = videoHeight;
-    const context = canvas.getContext('2d');
-    if (!context) {
-      return;
-    }
-
-    context.drawImage(videoPlayer, 0, 0);
-    const dataUrl = canvas.toDataURL('image/png');
-    canvas.width = 0;
-
-    const img = new Image();
-    const onLoad = () => {
-      assetViewerManager.imgRef = img;
-    };
-    img.addEventListener('load', onLoad);
-    img.src = dataUrl;
-
-    return () => {
-      img.removeEventListener('load', onLoad);
-      img.src = '';
-      assetViewerManager.imgRef = undefined;
-    };
   });
 </script>
 
@@ -279,11 +248,7 @@
       {/if}
 
       {#if assetViewerManager.isFaceEditMode}
-        <FaceEditor
-          assetSize={{ width: asset.width ?? 0, height: asset.height ?? 0 }}
-          containerSize={{ width: containerWidth, height: containerHeight }}
-          {assetId}
-        />
+        <FaceEditor htmlElement={videoPlayer} {containerWidth} {containerHeight} {assetId} />
       {/if}
     {/if}
   </div>

web/src/lib/components/asset-viewer/face-editor/FaceEditor.svelte

@@ -4,7 +4,7 @@
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import FaceCreateTagModal from '$lib/modals/CreateFaceModal.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
-  import { computeContentMetrics, mapContentRectToNatural, type Size } from '$lib/utils/container-utils';
+  import { getNaturalSize, scaleToFit } from '$lib/utils/container-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { createFace, getAllPeople, type PersonResponseDto } from '@immich/sdk';
   import { Button, Input, modalManager, toastManager } from '@immich/ui';
@@ -14,12 +14,13 @@
   import { t } from 'svelte-i18n';
 
   type Props = {
-    assetSize: Size;
-    containerSize: Size;
+    htmlElement: HTMLImageElement | HTMLVideoElement;
+    containerWidth: number;
+    containerHeight: number;
     assetId: string;
   };
 
-  let { assetSize, containerSize, assetId }: Props = $props();
+  let { htmlElement, containerWidth, containerHeight, assetId }: Props = $props();
 
   let canvasEl: HTMLCanvasElement | undefined = $state();
   let canvas: Canvas | undefined = $state();
@@ -53,7 +54,7 @@
   };
 
   const setupCanvas = () => {
-    if (!canvasEl) {
+    if (!canvasEl || !htmlElement) {
       return;
     }
 
@@ -85,14 +86,24 @@
     searchInputEl?.focus();
   });
 
-  const imageContentMetrics = $derived(computeContentMetrics(assetSize, containerSize));
+  const imageContentMetrics = $derived.by(() => {
+    const natural = getNaturalSize(htmlElement);
+    const container = { width: containerWidth, height: containerHeight };
+    const { width: contentWidth, height: contentHeight } = scaleToFit(natural, container);
+    return {
+      contentWidth,
+      contentHeight,
+      offsetX: (containerWidth - contentWidth) / 2,
+      offsetY: (containerHeight - contentHeight) / 2,
+    };
+  });
 
   const setDefaultFaceRectanglePosition = (faceRect: Rect) => {
-    const { offsetX, offsetY, contentWidth, contentHeight } = imageContentMetrics;
+    const { offsetX, offsetY } = imageContentMetrics;
 
     faceRect.set({
-      top: offsetY + contentHeight / 2 - 56,
-      left: offsetX + contentWidth / 2 - 56,
+      top: offsetY + 200,
+      left: offsetX + 200,
     });
 
     faceRect.setCoords();
@@ -105,8 +116,8 @@
     }
 
     canvas.setDimensions({
-      width: containerSize.width,
-      height: containerSize.height,
+      width: containerWidth,
+      height: containerHeight,
     });
 
     if (!faceRect) {
@@ -156,9 +167,6 @@
     const gap = 15;
     const padding = faceRect.padding ?? 0;
     const rawBox = faceRect.getBoundingRect();
-    if (Number.isNaN(rawBox.left) || Number.isNaN(rawBox.width)) {
-      return;
-    }
     const faceBox = {
       left: rawBox.left - padding,
       top: rawBox.top - padding,
@@ -167,11 +175,11 @@
     };
     const selectorWidth = faceSelectorEl.offsetWidth;
     const chromeHeight = faceSelectorEl.offsetHeight - scrollableListEl.offsetHeight;
-    const listHeight = Math.min(MAX_LIST_HEIGHT, containerSize.height - gap * 2 - chromeHeight);
+    const listHeight = Math.min(MAX_LIST_HEIGHT, containerHeight - gap * 2 - chromeHeight);
     const selectorHeight = listHeight + chromeHeight;
 
-    const clampTop = (top: number) => clamp(top, gap, containerSize.height - selectorHeight - gap);
-    const clampLeft = (left: number) => clamp(left, gap, containerSize.width - selectorWidth - gap);
+    const clampTop = (top: number) => clamp(top, gap, containerHeight - selectorHeight - gap);
+    const clampLeft = (left: number) => clamp(left, gap, containerWidth - selectorWidth - gap);
 
     const overlapArea = (position: { top: number; left: number }) => {
       const selectorRight = position.left + selectorWidth;
@@ -230,37 +238,45 @@
   });
 
   const getFaceCroppedCoordinates = () => {
-    if (!faceRect || imageContentMetrics.contentWidth === 0) {
+    if (!faceRect || !htmlElement) {
       return;
     }
 
-    const imageRect = mapContentRectToNatural(faceRect.getBoundingRect(), imageContentMetrics, assetSize);
+    const { left, top, width, height } = faceRect.getBoundingRect();
+    const { offsetX, offsetY, contentWidth, contentHeight } = imageContentMetrics;
+    const natural = getNaturalSize(htmlElement);
+
+    const scaleX = natural.width / contentWidth;
+    const scaleY = natural.height / contentHeight;
+    const imageX = (left - offsetX) * scaleX;
+    const imageY = (top - offsetY) * scaleY;
 
     return {
-      imageWidth: assetSize.width,
-      imageHeight: assetSize.height,
-      x: Math.floor(imageRect.left),
-      y: Math.floor(imageRect.top),
-      width: Math.floor(imageRect.width),
-      height: Math.floor(imageRect.height),
+      imageWidth: natural.width,
+      imageHeight: natural.height,
+      x: Math.floor(imageX),
+      y: Math.floor(imageY),
+      width: Math.floor(width * scaleX),
+      height: Math.floor(height * scaleY),
     };
   };
 
   type FaceCoordinates = NonNullable<ReturnType<typeof getFaceCroppedCoordinates>>;
 
   const getFacePreviewUrl = (data: FaceCoordinates) => {
-    const imgRef = assetViewerManager.imgRef;
-    if (!imgRef || imageContentMetrics.contentWidth === 0) {
+    if (!htmlElement) {
       return;
     }
 
-    const scaleX = imgRef.naturalWidth / assetSize.width;
-    const scaleY = imgRef.naturalHeight / assetSize.height;
+    const natural = getNaturalSize(htmlElement);
+    if (natural.width <= 0 || natural.height <= 0) {
+      return;
+    }
 
-    const x = clamp(Math.floor(data.x * scaleX), 0, imgRef.naturalWidth - 1);
-    const y = clamp(Math.floor(data.y * scaleY), 0, imgRef.naturalHeight - 1);
-    const width = clamp(Math.floor(data.width * scaleX), 1, imgRef.naturalWidth - x);
-    const height = clamp(Math.floor(data.height * scaleY), 1, imgRef.naturalHeight - y);
+    const x = clamp(data.x, 0, natural.width - 1);
+    const y = clamp(data.y, 0, natural.height - 1);
+    const width = clamp(data.width, 1, natural.width - x);
+    const height = clamp(data.height, 1, natural.height - y);
 
     if (width <= 0 || height <= 0) {
       return;
@@ -276,7 +292,7 @@
     }
 
     try {
-      context.drawImage(imgRef, x, y, width, height, 0, 0, width, height);
+      context.drawImage(htmlElement, x, y, width, height, 0, 0, width, height);
       return canvas.toDataURL('image/png');
     } catch {
       return;

web/src/lib/components/shared-components/ControlAppBar.svelte

@@ -30,7 +30,7 @@
     trailing,
   }: Props = $props();
 
-  let appBarBorder = $state('bg-light border border-transparent');
+  let appBarBorder = $state('border border-subtle');
 
   const onScroll = () => {
     if (window.scrollY > 80) {
@@ -40,7 +40,7 @@
         appBarBorder = 'border border-gray-600';
       }
     } else {
-      appBarBorder = 'bg-light border border-transparent';
+      appBarBorder = 'border border-subtle';
     }
   };
 
@@ -66,9 +66,9 @@
       !multiRow && 'grid-cols-[10%_80%_10%] sm:grid-cols-[25%_50%_25%]',
       'justify-between lg:grid-cols-[25%_50%_25%]',
       appBarBorder,
-      'm-2 place-items-center rounded-lg p-2 transition-all max-md:p-0',
+      'm-2 place-items-center rounded-full p-2 transition-all max-md:p-0',
       tailwindClasses,
-      forceDark ? 'bg-immich-dark-gray! text-white' : 'bg-subtle dark:bg-immich-dark-gray',
+      forceDark ? 'bg-immich-dark-gray! text-white' : 'bg-light-50 dark:bg-immich-dark-gray',
     ]}
   >
     <div class="flex place-items-center justify-self-start sm:gap-6 dark:text-immich-dark-fg {forceDark ? 'dark' : ''}">

web/src/lib/utils/container-utils.spec.ts

@@ -1,15 +1,18 @@
 import {
-  computeContentMetrics,
+  getContentMetrics,
   getNaturalSize,
-  mapContentRectToNatural,
   mapNormalizedRectToContent,
   mapNormalizedToContent,
   scaleToCover,
   scaleToFit,
 } from '$lib/utils/container-utils';
 
-const mockImage = (props: { naturalWidth: number; naturalHeight: number }): HTMLImageElement =>
-  props as unknown as HTMLImageElement;
+const mockImage = (props: {
+  naturalWidth: number;
+  naturalHeight: number;
+  width: number;
+  height: number;
+}): HTMLImageElement => props as unknown as HTMLImageElement;
 
 const mockVideo = (props: {
   videoWidth: number;
@@ -46,85 +49,48 @@ describe('scaleToFit', () => {
   });
 });
 
-describe('computeContentMetrics', () => {
-  it('should return zero metrics for zero-width content', () => {
-    expect(computeContentMetrics({ width: 0, height: 1080 }, { width: 800, height: 600 })).toEqual({
-      contentWidth: 0,
-      contentHeight: 0,
-      offsetX: 0,
-      offsetY: 0,
-    });
-  });
-
-  it('should return zero metrics for zero-height content', () => {
-    expect(computeContentMetrics({ width: 1920, height: 0 }, { width: 800, height: 600 })).toEqual({
-      contentWidth: 0,
-      contentHeight: 0,
-      offsetX: 0,
-      offsetY: 0,
-    });
-  });
-
-  it('should center wide content vertically', () => {
-    expect(computeContentMetrics({ width: 2000, height: 1000 }, { width: 800, height: 600 })).toEqual({
-      contentWidth: 800,
-      contentHeight: 400,
-      offsetX: 0,
-      offsetY: 100,
-    });
-  });
-
-  it('should center tall content horizontally', () => {
-    expect(computeContentMetrics({ width: 1000, height: 2000 }, { width: 800, height: 600 })).toEqual({
-      contentWidth: 300,
-      contentHeight: 600,
-      offsetX: 250,
-      offsetY: 0,
-    });
-  });
-
-  it('should produce zero offsets when aspect ratios match', () => {
-    expect(computeContentMetrics({ width: 1600, height: 900 }, { width: 800, height: 450 })).toEqual({
+describe('getContentMetrics', () => {
+  it('should compute zero offsets when aspect ratios match', () => {
+    const img = mockImage({ naturalWidth: 1600, naturalHeight: 900, width: 800, height: 450 });
+    expect(getContentMetrics(img)).toEqual({
       contentWidth: 800,
       contentHeight: 450,
       offsetX: 0,
       offsetY: 0,
     });
   });
-});
 
-describe('mapContentRectToNatural', () => {
-  it('should map a full-content rect back to natural size', () => {
-    const metrics = { contentWidth: 800, contentHeight: 400, offsetX: 0, offsetY: 100 };
-    const rect = mapContentRectToNatural({ left: 0, top: 100, width: 800, height: 400 }, metrics, {
-      width: 2000,
-      height: 1000,
-    });
-    expect(rect).toEqual({ left: 0, top: 0, width: 2000, height: 1000 });
+  it('should compute horizontal letterbox offsets for tall image', () => {
+    const img = mockImage({ naturalWidth: 1000, naturalHeight: 2000, width: 800, height: 600 });
+    const metrics = getContentMetrics(img);
+    expect(metrics.contentWidth).toBe(300);
+    expect(metrics.contentHeight).toBe(600);
+    expect(metrics.offsetX).toBe(250);
+    expect(metrics.offsetY).toBe(0);
   });
 
-  it('should map a centered sub-rect to natural coordinates', () => {
-    const metrics = { contentWidth: 800, contentHeight: 400, offsetX: 0, offsetY: 100 };
-    const rect = mapContentRectToNatural({ left: 200, top: 200, width: 400, height: 200 }, metrics, {
-      width: 2000,
-      height: 1000,
-    });
-    expect(rect).toEqual({ left: 500, top: 250, width: 1000, height: 500 });
+  it('should compute vertical letterbox offsets for wide image', () => {
+    const img = mockImage({ naturalWidth: 2000, naturalHeight: 1000, width: 800, height: 600 });
+    const metrics = getContentMetrics(img);
+    expect(metrics.contentWidth).toBe(800);
+    expect(metrics.contentHeight).toBe(400);
+    expect(metrics.offsetX).toBe(0);
+    expect(metrics.offsetY).toBe(100);
   });
 
-  it('should handle letterboxed content with horizontal offset', () => {
-    const metrics = { contentWidth: 300, contentHeight: 600, offsetX: 250, offsetY: 0 };
-    const rect = mapContentRectToNatural({ left: 250, top: 0, width: 300, height: 600 }, metrics, {
-      width: 1000,
-      height: 2000,
-    });
-    expect(rect).toEqual({ left: 0, top: 0, width: 1000, height: 2000 });
+  it('should use clientWidth/clientHeight for video elements', () => {
+    const video = mockVideo({ videoWidth: 1920, videoHeight: 1080, clientWidth: 800, clientHeight: 600 });
+    const metrics = getContentMetrics(video);
+    expect(metrics.contentWidth).toBe(800);
+    expect(metrics.contentHeight).toBe(450);
+    expect(metrics.offsetX).toBe(0);
+    expect(metrics.offsetY).toBe(75);
   });
 });
 
 describe('getNaturalSize', () => {
   it('should return naturalWidth/naturalHeight for images', () => {
-    const img = mockImage({ naturalWidth: 4000, naturalHeight: 3000 });
+    const img = mockImage({ naturalWidth: 4000, naturalHeight: 3000, width: 800, height: 600 });
     expect(getNaturalSize(img)).toEqual({ width: 4000, height: 3000 });
   });
 

web/src/lib/utils/container-utils.ts

@@ -49,6 +49,13 @@ export const scaleToFit = (dimensions: Size, container: Size): Size => {
   };
 };
 
+const getElementSize = (element: HTMLImageElement | HTMLVideoElement): Size => {
+  if (element instanceof HTMLVideoElement) {
+    return { width: element.clientWidth, height: element.clientHeight };
+  }
+  return { width: element.width, height: element.height };
+};
+
 export const getNaturalSize = (element: HTMLImageElement | HTMLVideoElement): Size => {
   if (element instanceof HTMLVideoElement) {
     return { width: element.videoWidth, height: element.videoHeight };
@@ -56,18 +63,17 @@ export const getNaturalSize = (element: HTMLImageElement | HTMLVideoElement): Si
   return { width: element.naturalWidth, height: element.naturalHeight };
 };
 
-export function computeContentMetrics(content: Size, container: Size): ContentMetrics {
-  if (content.width === 0 || content.height === 0) {
-    return { contentWidth: 0, contentHeight: 0, offsetX: 0, offsetY: 0 };
-  }
-  const { width: contentWidth, height: contentHeight } = scaleToFit(content, container);
+export const getContentMetrics = (element: HTMLImageElement | HTMLVideoElement): ContentMetrics => {
+  const natural = getNaturalSize(element);
+  const client = getElementSize(element);
+  const { width: contentWidth, height: contentHeight } = scaleToFit(natural, client);
   return {
     contentWidth,
     contentHeight,
-    offsetX: (container.width - contentWidth) / 2,
-    offsetY: (container.height - contentHeight) / 2,
+    offsetX: (client.width - contentWidth) / 2,
+    offsetY: (client.height - contentHeight) / 2,
   };
-}
+};
 
 export function mapNormalizedToContent(point: Point, sizeOrMetrics: Size | ContentMetrics): Point {
   if ('contentWidth' in sizeOrMetrics) {
@@ -103,25 +109,3 @@ export function mapNormalizedRectToContent(
     height: br.y - tl.y,
   };
 }
-
-function mapContentToNatural(point: Point, metrics: ContentMetrics, naturalSize: Size): Point {
-  return {
-    x: ((point.x - metrics.offsetX) / metrics.contentWidth) * naturalSize.width,
-    y: ((point.y - metrics.offsetY) / metrics.contentHeight) * naturalSize.height,
-  };
-}
-
-export function mapContentRectToNatural(rect: Rect, metrics: ContentMetrics, naturalSize: Size): Rect {
-  const topLeft = mapContentToNatural({ x: rect.left, y: rect.top }, metrics, naturalSize);
-  const bottomRight = mapContentToNatural(
-    { x: rect.left + rect.width, y: rect.top + rect.height },
-    metrics,
-    naturalSize,
-  );
-  return {
-    top: topLeft.y,
-    left: topLeft.x,
-    width: bottomRight.x - topLeft.x,
-    height: bottomRight.y - topLeft.y,
-  };
-}