feat(ui): optimize image and video viewing

Closes #89

Author: ZhuJHua

lib/components/loading/loading.dart

@@ -49,8 +49,8 @@ class EditingLoading extends StatelessWidget {
   }
 }
 
-class NetworkLoading extends StatelessWidget {
-  const NetworkLoading({super.key});
+class NetworkLoading1 extends StatelessWidget {
+  const NetworkLoading1({super.key});
 
   @override
   Widget build(BuildContext context) {
@@ -64,3 +64,39 @@ class NetworkLoading extends StatelessWidget {
     );
   }
 }
+
+class NetworkLoading2 extends StatelessWidget {
+  const NetworkLoading2({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    return LoopingRiveIcon(
+      riveIcon: RiveIcon.globe,
+      width: 80,
+      height: 80,
+      color: colorScheme.onSurface,
+      strokeWidth: 4.0,
+    );
+  }
+}
+
+class MediaLoading extends StatelessWidget {
+  final Color? color;
+
+  final double? size;
+
+  const MediaLoading({super.key, this.color, this.size});
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    return LoopingRiveIcon(
+      riveIcon: RiveIcon.gallery,
+      width: size ?? 80,
+      height: size ?? 80,
+      color: color ?? colorScheme.onSurface,
+      strokeWidth: 4.0,
+    );
+  }
+}

lib/components/quill_embed/image_embed.dart

@@ -2,6 +2,8 @@ import 'dart:io';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_quill/flutter_quill.dart';
+import 'package:get/get.dart';
+import 'package:mood_diary/router/app_routes.dart';
 
 import '../../utils/file_util.dart';
 
@@ -35,10 +37,20 @@ class ImageEmbedBuilder extends EmbedBuilder {
     // 从数据构造 ImageBlockEmbed
     final imagePath = isEdit ? imageEmbed.name : FileUtil.getRealPath('image', imageEmbed.name);
 
-    return Card.outlined(
-      clipBehavior: Clip.hardEdge,
-      color: Colors.transparent,
-      child: Image.file(File(imagePath)),
+    return GestureDetector(
+      onTap: () {
+        if (!isEdit) {
+          Get.toNamed(AppRoutes.photoPage, arguments: [
+            [imagePath],
+            0,
+          ]);
+        }
+      },
+      child: Card.outlined(
+        clipBehavior: Clip.hardEdge,
+        color: Colors.transparent,
+        child: Image.file(File(imagePath)),
+      ),
     );
   }
 }

lib/components/quill_embed/video_embed.dart

@@ -32,10 +32,10 @@ class VideoEmbedBuilder extends EmbedBuilder {
   ) {
     final videoEmbed = VideoBlockEmbed(embedContext.node.value.data);
     final videoPath = isEdit ? videoEmbed.name : FileUtil.getRealPath('video', videoEmbed.name);
-
+    final colorScheme = Theme.of(context).colorScheme;
     return Card.outlined(
       clipBehavior: Clip.hardEdge,
-      color: Colors.transparent,
+      color: colorScheme.surfaceContainerLowest,
       child: VideoPlayerComponent(
         videoPath: videoPath,
       ),

lib/components/video_player/video_player_logic.dart

@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'dart:io';
 
 import 'package:chewie/chewie.dart';
@@ -12,26 +13,40 @@ class VideoPlayerLogic extends GetxController {
   late final videoPlayerController = VideoPlayerController.file(File(state.videoPath));
   late final chewieController = ChewieController(
     videoPlayerController: videoPlayerController,
-    aspectRatio: 16 / 9,
     useRootNavigator: false,
-    autoInitialize: true,
   );
 
+  Completer<void>? _initCompleter;
+
   VideoPlayerLogic({required String videoPath}) {
     state.videoPath = videoPath;
   }
 
   @override
-  void onInit() {
-    Future.delayed(const Duration(milliseconds: 500), () {
-      state.isInitialized.value = true;
+  void onReady() async {
+    _initCompleter = Completer<void>();
+    Future.delayed(const Duration(milliseconds: 300), () async {
+      if (!(_initCompleter?.isCompleted ?? true)) {
+        await videoPlayerController.initialize();
+        state.isInitialized.value = true;
+        _initCompleter?.complete();
+      }
     });
-    super.onInit();
+
+    super.onReady();
+  }
+
+  void cancelInitialization() {
+    if (!(_initCompleter?.isCompleted ?? true)) {
+      _initCompleter?.complete();
+      state.isInitialized.value = false;
+    }
   }
 
   @override
-  void onClose() {
-    videoPlayerController.dispose();
+  void onClose() async {
+    cancelInitialization();
+    await videoPlayerController.dispose();
     chewieController.dispose();
     super.onClose();
   }

lib/components/video_player/video_player_state.dart

@@ -1,14 +1,9 @@
 import 'package:get/get.dart';
-import 'package:media_kit/media_kit.dart';
 
 class VideoPlayerState {
-  late Playable playable;
-
   late String videoPath;
 
   RxBool isInitialized = false.obs;
 
-  VideoPlayerState() {
-    ///Initialize variables
-  }
+  VideoPlayerState();
 }

lib/components/video_player/video_player_view.dart

@@ -4,6 +4,7 @@ import 'package:chewie/chewie.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:media_kit_video/media_kit_video.dart';
+import 'package:mood_diary/components/loading/loading.dart';
 
 import 'video_player_logic.dart';
 import 'video_player_state.dart';
@@ -49,11 +50,18 @@ class VideoPlayerComponent extends StatelessWidget {
 
     return AspectRatio(
       aspectRatio: 16 / 9,
-      child: Obx(() {
-        return state.isInitialized.value
-            ? Chewie(controller: logic.chewieController)
-            : const Center(child: CircularProgressIndicator());
-      }),
+      child: AnimatedSwitcher(
+        duration: const Duration(milliseconds: 300),
+        child: Obx(() {
+          return state.isInitialized.value
+              ? Chewie(controller: logic.chewieController)
+              : Center(
+                  child: MediaLoading(
+                  color: colorScheme.primary,
+                  size: 56,
+                ));
+        }),
+      ),
     );
   }
 }

lib/router/app_pages.dart

@@ -73,15 +73,15 @@ class AppPages {
     //日记页路由
     GetPage(
       name: AppRoutes.diaryPage,
-      transition: Transition.fadeIn,
+      //transition: Transition.topLevel,
       page: () => DiaryDetailsPage(),
     ),
     //图片路由
     GetPage(
       name: AppRoutes.photoPage,
       page: () => const ImagePage(),
       popGesture: false,
-      transition: Transition.fadeIn,
+      //transition: Transition.topLevel,
       binds: [Bind.lazyPut(() => ImageLogic())],
     ),
     //回收站
@@ -162,9 +162,9 @@ class AppPages {
     ),
     GetPage(
       name: AppRoutes.videoPage,
-      transition: Transition.fadeIn,
       popGesture: false,
       page: () => const VideoPage(),
+      // transition: Transition.topLevel,
       binds: [Bind.lazyPut(() => VideoLogic())],
     ),
     GetPage(