separate video loader widget

mobile/lib/pages/common/native_video_loader.dart

@@ -33,25 +33,28 @@ class NativeVideoLoader extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final log = Logger('NativeVideoLoader');
+    log.info('Building NativeVideoLoader');
     // fast path for aspect ratio
-    final initAspectRatio = useMemoized(
-      () {
-        if (asset.exifInfo == null) {
-          return null;
-        }
+    // final initAspectRatio = useMemoized(
+    //   () {
+    //     if (asset.exifInfo == null) {
+    //       return null;
+    //     }
 
-        final width = asset.orientatedWidth?.toDouble();
-        final height = asset.orientatedHeight?.toDouble();
-        return width != null && height != null && width > 0 && height > 0
-            ? width / height
-            : null;
-      },
-    );
+    //     final width = asset.orientatedWidth?.toDouble();
+    //     final height = asset.orientatedHeight?.toDouble();
+    //     return width != null && height != null && width > 0 && height > 0
+    //         ? width / height
+    //         : null;
+    //   },
+    // );
 
     final localEntity = useMemoized(
-      () => asset.localId != null ? AssetEntity.fromId(asset.localId!) : null,
+      () => asset.isLocal ? AssetEntity.fromId(asset.localId!) : null,
     );
     Future<double> calculateAspectRatio() async {
+      log.info('Calculating aspect ratio');
       late final double? orientatedWidth;
       late final double? orientatedHeight;
 
@@ -68,6 +71,7 @@ class NativeVideoLoader extends HookConsumerWidget {
         orientatedHeight = entity.orientatedHeight?.toDouble();
       }
 
+      log.info('Calculated aspect ratio');
       if (orientatedWidth != null &&
           orientatedHeight != null &&
           orientatedWidth > 0 &&
@@ -78,12 +82,7 @@ class NativeVideoLoader extends HookConsumerWidget {
       return 1.0;
     }
 
-    final aspectRatioFuture = useMemoized(
-      () => initAspectRatio == null ? calculateAspectRatio() : null,
-    );
-
-    final log = Logger('NativeVideoLoader');
-    log.info('Building NativeVideoLoader');
+    final aspectRatioFuture = useMemoized(() => calculateAspectRatio());
 
     Future<VideoSource> createLocalSource() async {
       log.info('Loading video from local storage');
@@ -97,10 +96,12 @@ class NativeVideoLoader extends HookConsumerWidget {
         throw Exception('No file found for the video');
       }
 
-      return await VideoSource.init(
+      final source = await VideoSource.init(
         path: file.path,
         type: VideoSourceType.file,
       );
+      log.info('Loaded video from local storage');
+      return source;
     }
 
     Future<VideoSource> createRemoteSource() async {
@@ -112,14 +113,16 @@ class NativeVideoLoader extends HookConsumerWidget {
           ? '$serverEndpoint/assets/${asset.livePhotoVideoId}/video/playback'
           : '$serverEndpoint/assets/${asset.remoteId}/video/playback';
 
-      return await VideoSource.init(
+      final source = await VideoSource.init(
         path: videoUrl,
         type: VideoSourceType.network,
         headers: ApiService.getRequestHeaders(),
       );
+      log.info('Loaded video from server');
+      return source;
     }
 
-    Future<VideoSource> createSource(Asset asset) async {
+    Future<VideoSource> createSource() {
       if (asset.isLocal && asset.livePhotoVideoId == null) {
         return createLocalSource();
       }
@@ -127,6 +130,16 @@ class NativeVideoLoader extends HookConsumerWidget {
       return createRemoteSource();
     }
 
+    final createSourceFuture = useMemoized(() => createSource());
+
+    final combinedFuture = useMemoized(
+      () async {
+        final aspectRatio = await aspectRatioFuture;
+        final source = await createSourceFuture;
+        return (source, aspectRatio);
+      },
+    );
+
     final size = MediaQuery.sizeOf(context);
 
     return SizedBox(
@@ -143,18 +156,17 @@ class NativeVideoLoader extends HookConsumerWidget {
             width: size.width,
             child: FutureBuilder(
               key: ValueKey(asset.id),
-              future: aspectRatioFuture,
-              initialData: initAspectRatio,
+              future: combinedFuture,
+              // initialData: initAspectRatio,
               builder: (context, snapshot) {
                 if (!snapshot.hasData) {
                   return placeholder;
                 }
 
                 return NativeVideoViewerPage(
-                  key: ValueKey(asset.id),
-                  videoSource: createSource(asset),
+                  videoSource: snapshot.data!.$1,
                   duration: asset.duration,
-                  aspectRatio: snapshot.data as double,
+                  aspectRatio: snapshot.data!.$2,
                   isMotionVideo: isMotionVideo,
                   hideControlsTimer: hideControlsTimer,
                   loopVideo: loopVideo,