From 6635f4c9a46e03e2caf81e55f4f55396056230e2 Mon Sep 17 00:00:00 2001
From: laurenspriem <github_uni.fishers@aleeas.com>
Date: Thu, 30 May 2024 22:59:41 +0530
Subject: [PATCH] [mob][photos] Play icon fallback for duration

---
 .../lib/ui/viewer/file/file_icons_widget.dart | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/mobile/lib/ui/viewer/file/file_icons_widget.dart b/mobile/lib/ui/viewer/file/file_icons_widget.dart
index fc108191f3..5f704b356b 100644
--- a/mobile/lib/ui/viewer/file/file_icons_widget.dart
+++ b/mobile/lib/ui/viewer/file/file_icons_widget.dart
@@ -122,23 +122,36 @@ class VideoOverlayIcon extends StatelessWidget {
 }
 
 class VideoOverlayDuration extends StatelessWidget {
-  final int duration;
+  final int? duration;
   const VideoOverlayDuration({Key? key, required this.duration}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    final String formattedDuration = getFormattedDuration(duration);
+    late Widget onDarkBackground;
+    final bool iconFallback = (duration == null || duration! == 0);
+
+    if (iconFallback || duration! == 0) {
+      onDarkBackground = const Icon(Icons.play_arrow, color: Colors.white, size: 24);
+    } else {
+      final String formattedDuration = getFormattedDuration(duration!);
+      onDarkBackground = Text(
+        formattedDuration,
+        style: Theme.of(context)
+            .textTheme
+            .titleSmall!
+            .copyWith(color: Colors.white, fontSize: 14.0), // Default font size is 14
+      );
+    }
+
     return _BottomRightOverlay(
       Container(
         decoration: BoxDecoration(
           color: Colors.black.withOpacity(0.3),
-          borderRadius: BorderRadius.circular(8.0),
+          borderRadius: iconFallback ? null : BorderRadius.circular(8.0),
+          shape: iconFallback ? BoxShape.circle : BoxShape.rectangle,
         ),
         padding: const EdgeInsets.symmetric(horizontal: 4),
-        child: Text(
-          formattedDuration,
-          style: Theme.of(context).textTheme.titleSmall!.copyWith(color: Colors.white),
-        ),
+        child: onDarkBackground,
       ),
     );
   }