[UIKit] Ui changes for upload_progress_indicator

Signed-off-by: Sahil Kumar <[email protected]>

packages/stream_chat_flutter/lib/src/attachment/attachment_upload_state_builder.dart

@@ -113,13 +113,17 @@ class _InProgressState extends StatelessWidget {
       crossAxisAlignment: CrossAxisAlignment.end,
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: [
-        _IconButton(
-          icon: StreamSvgIcon.close(
-            color: StreamChatTheme.of(context).colorTheme.white,
+        Align(
+          alignment: Alignment.topRight,
+          child: _IconButton(
+            icon: StreamSvgIcon.close(
+              color: StreamChatTheme.of(context).colorTheme.white,
+            ),
+            onPressed: () => channel.cancelAttachmentUpload(attachmentId),
           ),
-          onPressed: () => channel.cancelAttachmentUpload(attachmentId),
         ),
-        Center(
+        Align(
+          alignment: Alignment.topRight,
           child: UploadProgressIndicator(
             uploaded: sent,
             total: total,

packages/stream_chat_flutter/lib/src/attachment/file_attachment.dart

@@ -242,12 +242,7 @@ class FileAttachment extends AttachmentWidget {
               progressIndicatorColor: theme.colorTheme.accentBlue,
             );
           },
-          success: () {
-            return Text(
-              '${fileSize(size, 1)}/${fileSize(size, 1)}',
-              style: textStyle,
-            );
-          },
+          success: () => Text('${fileSize(size, 2)}', style: textStyle),
           failed: (_) => Text('UPLOAD ERROR', style: textStyle),
         ) ??
         Text('${fileSize(size)}', style: textStyle);

packages/stream_chat_flutter/lib/src/attachment/video_attachment.dart

@@ -86,11 +86,7 @@ class VideoAttachment extends AttachmentWidget {
               },
               child: Stack(
                 children: [
-                  Container(
-                    height: size?.height,
-                    width: size?.width,
-                    child: videoWidget,
-                  ),
+                  videoWidget,
                   Center(
                     child: Material(
                       shape: CircleBorder(),

packages/stream_chat_flutter/lib/src/message_input.dart

@@ -1653,13 +1653,11 @@ class MessageInputState extends State<MessageInput> {
       case 'video':
         return Stack(
           children: [
-            Container(
+            VideoThumbnailImage(
               height: 104,
               width: 104,
-              child: VideoThumbnailImage(
-                video: attachment.file.path,
-                fit: BoxFit.cover,
-              ),
+              video: attachment.file?.path ?? attachment.assetUrl,
+              fit: BoxFit.cover,
             ),
             Positioned(
               left: 8,

packages/stream_chat_flutter/lib/src/upload_progress_indicator.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 
 import 'stream_chat_theme.dart';
-import 'utils.dart';
 
 class UploadProgressIndicator extends StatelessWidget {
   final int uploaded;
@@ -24,6 +23,7 @@ class UploadProgressIndicator extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = StreamChatTheme.of(context);
+    final _percentage = (uploaded / total) * 100;
     Widget child = Padding(
       padding: padding,
       child: Row(
@@ -39,7 +39,7 @@ class UploadProgressIndicator extends StatelessWidget {
           ),
           SizedBox(width: 8),
           Text(
-            '${fileSize(uploaded, 1)}/${fileSize(total, 1)}',
+            '${_percentage.toInt()}%',
             style: textStyle ??
                 theme.textTheme.footnote.copyWith(
                   color: theme.colorTheme.white,

packages/stream_chat_flutter/lib/src/video_thumbnail_image.dart

@@ -58,28 +58,33 @@ class _VideoThumbnailImageState extends State<VideoThumbnailImage> {
     return FutureBuilder<Uint8List>(
       future: thumbnailFuture,
       builder: (context, snapshot) {
-        if (snapshot.hasError) {
-          if (widget.errorBuilder != null) {
-            return widget.errorBuilder(context, snapshot.error);
-          }
-          return Center(child: StreamSvgIcon.error());
-        }
-        if (!snapshot.hasData) {
-          if (widget.placeholderBuilder != null) {
-            return widget.placeholderBuilder(context);
-          }
-          return Image.asset(
-            'images/placeholder.png',
-            package: 'stream_chat_flutter',
-            fit: widget.fit,
-          );
-        }
-        final data = snapshot.data;
-        return Image.memory(
-          data,
-          fit: widget.fit,
-          height: widget.height,
-          width: widget.width,
+        return AnimatedSwitcher(
+          duration: const Duration(milliseconds: 350),
+          child: Builder(
+            key: ValueKey<AsyncSnapshot<Uint8List>>(snapshot),
+            builder: (_) {
+              if (snapshot.hasError) {
+                return widget.errorBuilder?.call(context, snapshot.error) ??
+                    Center(child: StreamSvgIcon.error());
+              }
+              if (!snapshot.hasData) {
+                return widget.placeholderBuilder?.call(context) ??
+                    Image.asset(
+                      'images/placeholder.png',
+                      package: 'stream_chat_flutter',
+                      fit: widget.fit,
+                      height: widget.height,
+                      width: widget.width,
+                    );
+              }
+              return Image.memory(
+                snapshot.data,
+                fit: widget.fit,
+                height: widget.height,
+                width: widget.width,
+              );
+            },
+          ),
         );
       },
     );