Implemented Video Upload and Player

mobile/android/app/src/main/AndroidManifest.xml

@@ -3,6 +3,7 @@
     <application
             android:label="Immich"
             android:name="${applicationName}"
+            android:usesCleartextTraffic="true"
             android:icon="@mipmap/ic_launcher">
         <activity
                 android:name=".MainActivity"

mobile/android/app/src/main/java/io/flutter/app/FlutterMultiDexApplication.java

@@ -0,0 +1,20 @@
+// Generated file.
+// If you wish to remove Flutter's multidex support, delete this entire file.
+
+package io.flutter.app;
+
+import android.content.Context;
+import androidx.annotation.CallSuper;
+import androidx.multidex.MultiDex;
+
+/**
+ * Extension of {@link io.flutter.app.FlutterApplication}, adding multidex support.
+ */
+public class FlutterMultiDexApplication extends FlutterApplication {
+  @Override
+  @CallSuper
+  protected void attachBaseContext(Context base) {
+    super.attachBaseContext(base);
+    MultiDex.install(this);
+  }
+}

mobile/ios/Podfile.lock

@@ -17,6 +17,10 @@ PODS:
     - Flutter
     - FMDB (>= 2.7.5)
   - Toast (4.0.0)
+  - video_player_avfoundation (0.0.1):
+    - Flutter
+  - wakelock (0.0.1):
+    - Flutter
 
 DEPENDENCIES:
   - device_info_plus (from `.symlinks/plugins/device_info_plus/ios`)
@@ -25,6 +29,8 @@ DEPENDENCIES:
   - path_provider_ios (from `.symlinks/plugins/path_provider_ios/ios`)
   - photo_manager (from `.symlinks/plugins/photo_manager/ios`)
   - sqflite (from `.symlinks/plugins/sqflite/ios`)
+  - video_player_avfoundation (from `.symlinks/plugins/video_player_avfoundation/ios`)
+  - wakelock (from `.symlinks/plugins/wakelock/ios`)
 
 SPEC REPOS:
   trunk:
@@ -44,6 +50,10 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/photo_manager/ios"
   sqflite:
     :path: ".symlinks/plugins/sqflite/ios"
+  video_player_avfoundation:
+    :path: ".symlinks/plugins/video_player_avfoundation/ios"
+  wakelock:
+    :path: ".symlinks/plugins/wakelock/ios"
 
 SPEC CHECKSUMS:
   device_info_plus: e5c5da33f982a436e103237c0c85f9031142abed
@@ -54,6 +64,8 @@ SPEC CHECKSUMS:
   photo_manager: 84fa94fbeb82e607333ea9a13c43b58e0903a463
   sqflite: 6d358c025f5b867b29ed92fc697fd34924e11904
   Toast: 91b396c56ee72a5790816f40d3a94dd357abc196
+  video_player_avfoundation: e489aac24ef5cf7af82702979ed16f2a5ef84cff
+  wakelock: d0fc7c864128eac40eba1617cb5264d9c940b46f
 
 PODFILE CHECKSUM: aafe91acc616949ddb318b77800a7f51bffa2a4c
 

mobile/ios/Runner/Info.plist

@@ -41,9 +41,22 @@
       <string>UIInterfaceOrientationLandscapeLeft</string>
       <string>UIInterfaceOrientationLandscapeRight</string>
     </array>
+
+    <key>UIUserInterfaceStyle</key>
+      <string>Light</string>
+
     <key>UIViewControllerBasedStatusBarAppearance</key>
-    <true />
+      <true />
+
     <key>NSPhotoLibraryUsageDescription</key>
-    <string>App need your agree, can visit your album</string>
+      <string>We need to manage backup your photos album</string>
+
+    <key>NSAppTransportSecurity</key>
+		<dict>
+      <key>NSAllowsArbitraryLoads</key>
+        <true/>
+    </dict>
+
+
   </dict>
 </plist>

mobile/lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:hive_flutter/hive_flutter.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/routing/router.dart';
@@ -12,6 +13,12 @@ void main() async {
   // Hive.registerAdapter(ImmichBackUpAssetAdapter());
   // Hive.deleteBoxFromDisk(hiveImmichBox);
 
+  SystemChrome.setSystemUIOverlayStyle(
+    const SystemUiOverlayStyle(
+      statusBarIconBrightness: Brightness.light,
+    ),
+  );
+
   runApp(const ProviderScope(child: ImmichApp()));
 }
 
@@ -69,6 +76,7 @@ class _ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserv
       title: 'Immich',
       debugShowCheckedModeBanner: false,
       theme: ThemeData(
+        brightness: Brightness.light,
         primarySwatch: Colors.indigo,
         textTheme: GoogleFonts.workSansTextTheme(
           Theme.of(context).textTheme.apply(fontSizeFactor: 1.0),
@@ -79,6 +87,7 @@ class _ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserv
           foregroundColor: Colors.indigo,
           elevation: 1,
           centerTitle: true,
+          systemOverlayStyle: SystemUiOverlayStyle.dark,
         ),
       ),
       routeInformationParser: _immichRouter.defaultRouteParser(),

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);
           },
         ),