Video improvements (#452)

CHANGELOG.md

@@ -30,6 +30,8 @@ All user visible changes to this project will be documented in this file. This p
     - Unread chats badge on favicon. ([#403])
 - Desktop:
     - Video support. ([#445], [#438])
+- Mobile:
+    - Video rewinding indication. ([#468], [#452])
 
 ### Changed
 
@@ -98,11 +100,13 @@ All user visible changes to this project will be documented in this file. This p
 [#440]: /../../pull/440
 [#443]: /../../pull/443
 [#445]: /../../pull/445
+[#452]: /../../issues/452
 [#453]: /../../pull/453
 [#454]: /../../pull/454
 [#456]: /../../pull/456
 [#462]: /../../pull/462
 [#467]: /../../pull/467
+[#468]: /../../pull/468
 
 
 

assets/l10n/en-US.ftl

@@ -445,6 +445,7 @@ label_contact_information = Contact information
 label_contacts = Contacts
 label_copied = Copied
 label_copy = Copy
+label_count_seconds = {$count} seconds
 label_create_group = Group creation
 label_create_group_selected = Selected
 label_create_group_users = user(s)

assets/l10n/ru-RU.ftl

@@ -460,6 +460,11 @@ label_contact_information = Контактная информация
 label_contacts = Контакты
 label_copied = Скопировано
 label_copy = Копировать
+label_count_seconds = {$count} { $count ->
+       [one] секунда
+       [few] секунды
+       *[other] секунд
+   }
 label_create_group = Создание группы
 label_create_group_selected = Выбрано
 label_create_group_users = пользователь(ей)

lib/ui/page/call/widget/round_button.dart

@@ -107,38 +107,41 @@ class _RoundFloatingButtonState extends State<RoundFloatingButton> {
   Widget build(BuildContext context) {
     final (style, fonts) = Theme.of(context).styles;
 
-    Widget button = ConditionalBackdropFilter(
-      condition: !WebUtils.isSafari && widget.withBlur,
-      borderRadius: BorderRadius.circular(60),
-      child: Material(
-        key: _key,
-        elevation: 0,
-        color: widget.color,
-        type: MaterialType.circle,
-        child: InkWell(
-          borderRadius: BorderRadius.circular(60),
-          onHover: widget.hint != null
-              ? (b) {
-                  if (b) {
-                    _populateOverlay();
-                  } else {
-                    _hintEntry?.remove();
-                    _hintEntry = null;
+    Widget button = Container(
+      color: style.colors.transparent,
+      child: ConditionalBackdropFilter(
+        condition: !WebUtils.isSafari && widget.withBlur,
+        borderRadius: BorderRadius.circular(60),
+        child: Material(
+          key: _key,
+          elevation: 0,
+          color: widget.color,
+          type: MaterialType.circle,
+          child: InkWell(
+            borderRadius: BorderRadius.circular(60),
+            onHover: widget.hint != null
+                ? (b) {
+                    if (b) {
+                      _populateOverlay();
+                    } else {
+                      _hintEntry?.remove();
+                      _hintEntry = null;
+                    }
                   }
-                }
-              : null,
-          onTap: widget.onPressed,
-          child: widget.child ??
-              SizedBox(
-                width: max(widget.assetWidth, 60),
-                height: max(widget.assetWidth, 60),
-                child: Center(
-                  child: SvgImage.asset(
-                    'assets/icons/${widget.asset}.svg',
-                    width: widget.assetWidth,
+                : null,
+            onTap: widget.onPressed,
+            child: widget.child ??
+                SizedBox(
+                  width: max(widget.assetWidth, 60),
+                  height: max(widget.assetWidth, 60),
+                  child: Center(
+                    child: SvgImage.asset(
+                      'assets/icons/${widget.asset}.svg',
+                      width: widget.assetWidth,
+                    ),
                   ),
                 ),
-              ),
+          ),
         ),
       ),
     );

lib/ui/page/home/page/chat/message_field/view.dart

@@ -360,6 +360,7 @@ class MessageFieldView extends StatelessWidget {
             color: style.colors.onPrimaryOpacity50,
             child: AnimatedSize(
               duration: 400.milliseconds,
+              alignment: Alignment.bottomCenter,
               curve: Curves.ease,
               child: Container(
                 width: double.infinity,

lib/ui/page/home/page/chat/widget/desktop_controls.dart

@@ -23,7 +23,6 @@ import 'dart:ui';
 import 'package:chewie/chewie.dart';
 import 'package:chewie/src/animated_play_pause.dart';
 import 'package:chewie/src/helpers/utils.dart';
-import 'package:chewie/src/progress_bar.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_meedu_videoplayer/meedu_player.dart';
@@ -95,16 +94,16 @@ class _DesktopControlsState extends State<DesktopControls>
   /// [Timer] for toggling the [_showInterface] after a timeout.
   Timer? _interfaceTimer;
 
-  /// [Timer] for hiding user interface on [_initialize].
-  Timer? _initTimer;
+  /// [Timer] for toggling the [_showBottomBar] after a timeout.
+  Timer? _bottomBarTimer;
 
   /// [Timer] for showing user interface for a while after fullscreen toggle.
   Timer? _showAfterExpandCollapseTimer;
 
   /// [StreamSubscription] to the [MeeduPlayerController.playerStatus] changes.
   StreamSubscription? _statusSubscription;
 
-  /// Indicator whether the video progress bar is being dragged.
+  /// Indicator whether the video/volume progress bar is being dragged.
   bool _dragging = false;
 
   @override
@@ -127,7 +126,8 @@ class _DesktopControlsState extends State<DesktopControls>
   void dispose() {
     _statusSubscription?.cancel();
     _hideTimer?.cancel();
-    _initTimer?.cancel();
+    _interfaceTimer?.cancel();
+    _bottomBarTimer?.cancel();
     _showAfterExpandCollapseTimer?.cancel();
     _volumeEntry?.remove();
     super.dispose();
@@ -170,6 +170,7 @@ class _DesktopControlsState extends State<DesktopControls>
                 ),
               ),
             ),
+            // Play/pause button.
             RxBuilder((_) {
               return widget.controller.isBuffering.value
                   ? const Center(child: CustomProgressIndicator())
@@ -191,8 +192,10 @@ class _DesktopControlsState extends State<DesktopControls>
                 onExit: (d) {
                   if (mounted) {
                     setState(() => _showBottomBar = false);
-                    _volumeEntry?.remove();
-                    _volumeEntry = null;
+                    if (!_dragging) {
+                      _volumeEntry?.remove();
+                      _volumeEntry = null;
+                    }
                   }
                 },
                 child: SizedBox(
@@ -213,7 +216,7 @@ class _DesktopControlsState extends State<DesktopControls>
 
     return AnimatedSlider(
       duration: const Duration(milliseconds: 300),
-      isOpen: _showBottomBar || _showInterface,
+      isOpen: _showBottomBar || _showInterface || _dragging,
       translate: false,
       child: Padding(
         padding: const EdgeInsets.only(bottom: 8, left: 32, right: 32),
@@ -256,17 +259,20 @@ class _DesktopControlsState extends State<DesktopControls>
     final style = Theme.of(context).style;
 
     return Obx(
-      () => GestureDetector(
-        onTap: _onExpandCollapse,
-        child: SizedBox(
-          height: _barHeight,
-          child: Center(
-            child: Icon(
-              widget.isFullscreen?.value == true
-                  ? Icons.fullscreen_exit
-                  : Icons.fullscreen,
-              color: style.colors.onPrimary,
-              size: 21,
+      () => MouseRegion(
+        cursor: SystemMouseCursors.click,
+        child: GestureDetector(
+          onTap: _onExpandCollapse,
+          child: SizedBox(
+            height: _barHeight,
+            child: Center(
+              child: Icon(
+                widget.isFullscreen?.value == true
+                    ? Icons.fullscreen_exit
+                    : Icons.fullscreen,
+                color: style.colors.onPrimary,
+                size: 21,
+              ),
             ),
           ),
         ),
@@ -321,18 +327,21 @@ class _DesktopControlsState extends State<DesktopControls>
 
     return Transform.translate(
       offset: const Offset(0, 0),
-      child: GestureDetector(
-        onTap: _playPause,
-        child: Container(
-          height: _barHeight,
-          color: style.colors.transparent,
-          child: RxBuilder((_) {
-            return AnimatedPlayPause(
-              size: 21,
-              playing: controller.playerStatus.playing,
-              color: style.colors.onPrimary,
-            );
-          }),
+      child: MouseRegion(
+        cursor: SystemMouseCursors.click,
+        child: GestureDetector(
+          onTap: _playPause,
+          child: Container(
+            height: _barHeight,
+            color: style.colors.transparent,
+            child: RxBuilder((_) {
+              return AnimatedPlayPause(
+                size: 21,
+                playing: controller.playerStatus.playing,
+                color: style.colors.onPrimary,
+              );
+            }),
+          ),
         ),
       ),
     );
@@ -343,6 +352,7 @@ class _DesktopControlsState extends State<DesktopControls>
     final style = Theme.of(context).style;
 
     return MouseRegion(
+      cursor: SystemMouseCursors.click,
       onEnter: (_) {
         if (mounted && _volumeEntry == null) {
           Offset offset = Offset.zero;
@@ -398,7 +408,7 @@ class _DesktopControlsState extends State<DesktopControls>
           child: MouseRegion(
             opaque: false,
             onExit: (d) {
-              if (mounted) {
+              if (mounted && !_dragging) {
                 _volumeEntry?.remove();
                 _volumeEntry = null;
                 setState(() {});
@@ -427,15 +437,28 @@ class _DesktopControlsState extends State<DesktopControls>
                             padding: const EdgeInsets.symmetric(
                               horizontal: 10,
                             ),
-                            child: VideoVolumeBar(
-                              widget.controller,
-                              colors: ChewieProgressColors(
-                                playedColor: style.colors.primary,
-                                handleColor: style.colors.primary,
-                                bufferedColor:
-                                    style.colors.background.withOpacity(0.5),
-                                backgroundColor:
-                                    style.colors.secondary.withOpacity(0.5),
+                            child: MouseRegion(
+                              cursor: SystemMouseCursors.click,
+                              child: VideoVolumeBar(
+                                widget.controller,
+                                onDragStart: () {
+                                  setState(() => _dragging = true);
+                                },
+                                onDragEnd: () {
+                                  if (!_showBottomBar) {
+                                    _volumeEntry?.remove();
+                                    _volumeEntry = null;
+                                  }
+                                  setState(() => _dragging = false);
+                                },
+                                colors: ChewieProgressColors(
+                                  playedColor: style.colors.primary,
+                                  handleColor: style.colors.primary,
+                                  bufferedColor:
+                                      style.colors.background.withOpacity(0.5),
+                                  backgroundColor:
+                                      style.colors.secondary.withOpacity(0.5),
+                                ),
                               ),
                             ),
                           ),
@@ -468,7 +491,7 @@ class _DesktopControlsState extends State<DesktopControls>
     });
   }
 
-  /// Returns the [VideoProgressBar] of the current video progression.
+  /// Returns the [ProgressBar] of the current video progression.
   Widget _buildProgressBar() {
     final style = Theme.of(context).style;
 

lib/ui/page/home/page/chat/widget/media_attachment.dart

@@ -137,22 +137,20 @@ class _MediaAttachmentState extends State<MediaAttachment> {
               ),
             );
           } else {
-            return Center(
-              child: VideoThumbnail.bytes(
-                bytes: attachment.file.bytes.value!,
-                height: widget.height,
-              ),
+            return VideoThumbnail.bytes(
+              bytes: attachment.file.bytes.value!,
+              height: widget.height,
+              width: widget.width,
             );
           }
         });
       } else {
-        return Center(
-          child: VideoThumbnail.url(
-            url: attachment.original.url,
-            checksum: attachment.original.checksum,
-            height: widget.height,
-            onError: widget.onError,
-          ),
+        return VideoThumbnail.url(
+          url: attachment.original.url,
+          checksum: attachment.original.checksum,
+          height: widget.height,
+          width: widget.width,
+          onError: widget.onError,
         );
       }
     }