From 831a787ed6d9628b4a352112eea1be826cb0c407 Mon Sep 17 00:00:00 2001 From: Thibault Deckers Date: Sun, 6 Oct 2019 17:15:20 +0900 Subject: [PATCH] video: added seek by tap/drag on progress bar --- lib/widgets/fullscreen/overlay_video.dart | 107 +++++++++++++--------- pubspec.lock | 16 +--- pubspec.yaml | 2 +- 3 files changed, 65 insertions(+), 60 deletions(-) diff --git a/lib/widgets/fullscreen/overlay_video.dart b/lib/widgets/fullscreen/overlay_video.dart index e3a2d2f5a..d6f0f7e85 100644 --- a/lib/widgets/fullscreen/overlay_video.dart +++ b/lib/widgets/fullscreen/overlay_video.dart @@ -27,6 +27,9 @@ class VideoControlOverlay extends StatefulWidget { } class VideoControlOverlayState extends State { + final GlobalKey _progressBarKey = GlobalKey(); + bool _playingOnDragStart = false; + ImageEntry get entry => widget.entry; Animation get scale => widget.scale; @@ -67,7 +70,6 @@ class VideoControlOverlayState extends State { @override Widget build(BuildContext context) { - final progressBarBorderRadius = 123.0; final mediaQuery = MediaQuery.of(context); final viewInsets = widget.viewInsets ?? mediaQuery.viewInsets; final viewPadding = widget.viewPadding ?? mediaQuery.viewPadding; @@ -87,6 +89,10 @@ class VideoControlOverlayState extends State { width: mediaQuery.size.width - safePadding.horizontal, child: Row( children: [ + Expanded( + child: _buildProgressBar(), + ), + SizedBox(width: 8), OverlayButton( scale: scale, child: value.isPlaying @@ -101,52 +107,62 @@ class VideoControlOverlayState extends State { tooltip: 'Play', ), ), - SizedBox(width: 8), - Expanded( - child: SizeTransition( - sizeFactor: scale, - child: BlurredRRect( - borderRadius: progressBarBorderRadius, - child: Container( - padding: EdgeInsets.symmetric(vertical: 4, horizontal: 16) + EdgeInsets.only(bottom: 16), - decoration: BoxDecoration( - color: Colors.black26, - border: Border.all(color: Colors.white30, width: 0.5), - borderRadius: BorderRadius.all( - Radius.circular(progressBarBorderRadius), - ), - ), - child: Column( - children: [ - Row( - children: [ - Text(formatDuration(value.position ?? Duration.zero)), - Spacer(), - Text(formatDuration(value.duration ?? Duration.zero)), - ], - ), - LinearProgressIndicator(value: progress), - ], - ), - ), - ), - ), - ), - SizedBox(width: 8), - OverlayButton( - scale: scale, - child: IconButton( - icon: Icon(Icons.fullscreen), - onPressed: () => _goFullscreen(), - tooltip: 'Fullscreen', - ), - ), ], ), ), ); } + SizeTransition _buildProgressBar() { + final progressBarBorderRadius = 123.0; + return SizeTransition( + sizeFactor: scale, + child: BlurredRRect( + borderRadius: progressBarBorderRadius, + child: GestureDetector( + onTapDown: (TapDownDetails details) { + _seek(details.globalPosition); + }, + onHorizontalDragStart: (DragStartDetails details) { + _playingOnDragStart = controller.value.isPlaying; + if (_playingOnDragStart) controller.pause(); + }, + onHorizontalDragUpdate: (DragUpdateDetails details) { + _seek(details.globalPosition); + }, + onHorizontalDragEnd: (DragEndDetails details) { + if (_playingOnDragStart) controller.play(); + }, + child: Container( + padding: EdgeInsets.symmetric(vertical: 4, horizontal: 16) + EdgeInsets.only(bottom: 16), + decoration: BoxDecoration( + color: Colors.black26, + border: Border.all(color: Colors.white30, width: 0.5), + borderRadius: BorderRadius.all( + Radius.circular(progressBarBorderRadius), + ), + ), + child: Column( + key: _progressBarKey, + children: [ + Row( + children: [ + Text(formatDuration(value.position ?? Duration.zero)), + Spacer(), + Text(formatDuration(value.duration ?? Duration.zero)), + ], + ), + LinearProgressIndicator(value: progress), + ], + ), + ), + ), + ), + ); + } + + _onValueChange() => setState(() {}); + _playPause() async { if (value.isPlaying) { controller.pause(); @@ -159,7 +175,10 @@ class VideoControlOverlayState extends State { setState(() {}); } - _goFullscreen() {} - - _onValueChange() => setState(() {}); + _seek(Offset globalPosition) { + final keyContext = _progressBarKey.currentContext; + final RenderBox box = keyContext.findRenderObject(); + final localPosition = box.globalToLocal(globalPosition); + controller.seekTo(value.duration * (localPosition.dx / box.size.width)); + } } diff --git a/pubspec.lock b/pubspec.lock index c5c2d075c..33308bef6 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -36,13 +36,6 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "1.1.2" - chewie: - dependency: "direct main" - description: - name: chewie - url: "https://pub.dartlang.org" - source: hosted - version: "0.9.7" collection: dependency: "direct main" description: @@ -148,13 +141,6 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "1.1.6" - open_iconic_flutter: - dependency: transitive - description: - name: open_iconic_flutter - url: "https://pub.dartlang.org" - source: hosted - version: "0.3.0" path: dependency: "direct main" description: @@ -336,7 +322,7 @@ packages: source: hosted version: "2.0.8" video_player: - dependency: transitive + dependency: "direct main" description: name: video_player url: "https://pub.dartlang.org" diff --git a/pubspec.yaml b/pubspec.yaml index da2c24875..b36b69f59 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -16,7 +16,6 @@ version: 1.0.0+1 dependencies: flutter: sdk: flutter - chewie: 0.9.7 collection: draggable_scrollbar: git: @@ -40,6 +39,7 @@ dependencies: sqflite: transparent_image: tuple: + video_player: dev_dependencies: flutter_test: