Implemented Video Upload and Player (#2)

* Implementing video upload features

* setup image resize processor

* Add video thumbnail with duration and icon

* Fixed issue with video upload timeout and upper case file type on ios

* Added video player page

* Added video player page

* Fixing video player not play on ios

* Added partial file streaming for ios/android video request

* Added nginx as proxy server for better file serving

* update nginx and docker-compose file

* Video player working correctly

* Video player working correctly

* Split duration to the second

mobile/lib/modules/home/ui/image_grid.dart

@@ -1,23 +1,50 @@
 import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/home/ui/thumbnail_image.dart';
 import 'package:immich_mobile/shared/models/immich_asset.model.dart';
 
-class ImageGrid extends StatelessWidget {
+class ImageGrid extends ConsumerWidget {
   final List<ImmichAsset> assetGroup;
 
   const ImageGrid({Key? key, required this.assetGroup}) : super(key: key);
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
     return SliverGrid(
       gridDelegate:
           const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, crossAxisSpacing: 5.0, mainAxisSpacing: 5),
       delegate: SliverChildBuilderDelegate(
         (BuildContext context, int index) {
+          var assetType = assetGroup[index].type;
+
           return GestureDetector(
-            onTap: () {},
-            child: ThumbnailImage(asset: assetGroup[index]),
-          );
+              onTap: () {},
+              child: Stack(
+                children: [
+                  ThumbnailImage(asset: assetGroup[index]),
+                  assetType == 'IMAGE'
+                      ? Container()
+                      : Positioned(
+                          top: 5,
+                          right: 5,
+                          child: Row(
+                            children: [
+                              Text(
+                                assetGroup[index].duration.toString().substring(0, 7),
+                                style: const TextStyle(
+                                  color: Colors.white,
+                                  fontSize: 10,
+                                ),
+                              ),
+                              const Icon(
+                                Icons.play_circle_outline_rounded,
+                                color: Colors.white,
+                              ),
+                            ],
+                          ),
+                        )
+                ],
+              ));
         },
         childCount: assetGroup.length,
       ),

mobile/lib/modules/home/ui/immich_sliver_appbar.dart

@@ -1,6 +1,5 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
@@ -100,14 +99,6 @@ class ImmichSliverAppBar extends ConsumerWidget {
             ],
           ),
         ],
-        systemOverlayStyle: const SystemUiOverlayStyle(
-          // Status bar color
-          statusBarColor: Colors.indigo,
-
-          // Status bar brightness (optional)
-          statusBarIconBrightness: Brightness.light, // For Android (dark icons)
-          statusBarBrightness: Brightness.dark,
-        ),
       ),
     );
   }

mobile/lib/modules/home/ui/thumbnail_image.dart

@@ -1,39 +1,53 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hive_flutter/hive_flutter.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
 import 'package:immich_mobile/shared/models/immich_asset.model.dart';
 import 'package:immich_mobile/routing/router.dart';
 
-class ThumbnailImage extends StatelessWidget {
+class ThumbnailImage extends HookWidget {
   final ImmichAsset asset;
 
   const ThumbnailImage({Key? key, required this.asset}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
+    final cacheKey = useState(1);
+
     var box = Hive.box(userInfoBox);
     var thumbnailRequestUrl =
         '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=true';
     return GestureDetector(
       onTap: () {
-        AutoRouter.of(context).push(
-          ImageViewerRoute(
-            imageUrl:
-                '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=false',
-            heroTag: asset.id,
-            thumbnailUrl: thumbnailRequestUrl,
-          ),
-        );
+        if (asset.type == 'IMAGE') {
+          AutoRouter.of(context).push(
+            ImageViewerRoute(
+              imageUrl:
+                  '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=false',
+              heroTag: asset.id,
+              thumbnailUrl: thumbnailRequestUrl,
+            ),
+          );
+        } else {
+          debugPrint("Navigate to video player");
+
+          AutoRouter.of(context).push(
+            VideoViewerRoute(
+              videoUrl: '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}',
+            ),
+          );
+        }
       },
       onLongPress: () {},
       child: Hero(
         tag: asset.id,
         child: CachedNetworkImage(
+          cacheKey: "${asset.id}-${cacheKey.value}",
           width: 300,
           height: 300,
-          memCacheHeight: 250,
+          memCacheHeight: asset.type == 'IMAGE' ? 250 : 400,
           fit: BoxFit.cover,
           imageUrl: thumbnailRequestUrl,
           httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
@@ -44,6 +58,7 @@ class ThumbnailImage extends StatelessWidget {
           ),
           errorWidget: (context, url, error) {
             debugPrint("Error Loading Thumbnail Widget $error");
+            cacheKey.value += 1;
             return const Icon(Icons.error);
           },
         ),