From eb2a51e5e2f5be5aef7bfe99fed037a934b8a948 Mon Sep 17 00:00:00 2001 From: guozhigq Date: Wed, 16 Oct 2024 00:52:10 +0800 Subject: [PATCH] =?UTF-8?q?opt:=20=E5=BF=AB=E8=BF=9B=E5=BF=AB=E9=80=80?= =?UTF-8?q?=E9=9D=A2=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/plugin/pl_player/panels/seek_panel.dart | 76 ++++++++++ lib/plugin/pl_player/view.dart | 132 +++++------------- .../pl_player/widgets/backward_seek.dart | 91 ------------ .../pl_player/widgets/forward_seek.dart | 91 ------------ .../pl_player/widgets/seek_indicator.dart | 94 +++++++++++++ 5 files changed, 205 insertions(+), 279 deletions(-) create mode 100644 lib/plugin/pl_player/panels/seek_panel.dart delete mode 100644 lib/plugin/pl_player/widgets/backward_seek.dart delete mode 100644 lib/plugin/pl_player/widgets/forward_seek.dart create mode 100644 lib/plugin/pl_player/widgets/seek_indicator.dart diff --git a/lib/plugin/pl_player/panels/seek_panel.dart b/lib/plugin/pl_player/panels/seek_panel.dart new file mode 100644 index 00000000..0d5e7c9e --- /dev/null +++ b/lib/plugin/pl_player/panels/seek_panel.dart @@ -0,0 +1,76 @@ +import 'package:flutter/material.dart'; +import 'package:get/get.dart'; +import '../widgets/seek_indicator.dart'; + +class SeekPanel extends StatelessWidget { + const SeekPanel({ + required this.mountSeekBackwardButton, + required this.mountSeekForwardButton, + required this.hideSeekBackwardButton, + required this.hideSeekForwardButton, + required this.onSubmittedcb, + Key? key, + }) : super(key: key); + + final RxBool mountSeekBackwardButton; + final RxBool mountSeekForwardButton; + final RxBool hideSeekBackwardButton; + final RxBool hideSeekForwardButton; + final void Function(String, Duration) onSubmittedcb; + + @override + Widget build(BuildContext context) { + return Obx( + () => Visibility( + visible: mountSeekBackwardButton.value || mountSeekForwardButton.value, + child: Positioned.fill( + child: Row( + children: [ + _buildSeekIndicator( + mountSeekBackwardButton, + hideSeekBackwardButton, + 'backward', + SeekIndicator( + direction: SeekDirection.backward, + onSubmitted: (Duration value) { + onSubmittedcb.call('backward', value); + }, + ), + ), + Expanded(child: Container()), + _buildSeekIndicator( + mountSeekForwardButton, + hideSeekForwardButton, + 'forward', + SeekIndicator( + direction: SeekDirection.forward, + onSubmitted: (Duration value) { + onSubmittedcb.call('forward', value); + }, + ), + ), + ], + ), + ), + ), + ); + } + + Widget _buildSeekIndicator( + RxBool mountSeekButton, + RxBool hideSeekButton, + String direction, + Widget seekIndicator, + ) { + return Expanded( + child: mountSeekButton.value + ? AnimatedOpacity( + opacity: hideSeekButton.value ? 0.0 : 1.0, + duration: const Duration(milliseconds: 400), + curve: Curves.easeInOut, + child: seekIndicator, + ) + : const SizedBox.shrink(), + ); + } +} diff --git a/lib/plugin/pl_player/view.dart b/lib/plugin/pl_player/view.dart index 6b57a8e1..a88bc86f 100644 --- a/lib/plugin/pl_player/view.dart +++ b/lib/plugin/pl_player/view.dart @@ -22,12 +22,11 @@ import 'package:screen_brightness/screen_brightness.dart'; import '../../utils/global_data_cache.dart'; import 'models/bottom_control_type.dart'; import 'models/bottom_progress_behavior.dart'; +import 'panels/seek_panel.dart'; import 'widgets/app_bar_ani.dart'; -import 'widgets/backward_seek.dart'; import 'widgets/bottom_control.dart'; import 'widgets/common_btn.dart'; import 'widgets/control_bar.dart'; -import 'widgets/forward_seek.dart'; import 'widgets/play_pause_btn.dart'; class PLVideoPlayer extends StatefulWidget { @@ -69,8 +68,8 @@ class _PLVideoPlayerState extends State final RxBool _mountSeekBackwardButton = false.obs; final RxBool _mountSeekForwardButton = false.obs; - final RxBool _hideSeekBackwardButton = false.obs; - final RxBool _hideSeekForwardButton = false.obs; + final RxBool _hideSeekBackwardButton = true.obs; + final RxBool _hideSeekForwardButton = true.obs; final RxDouble _brightnessValue = 0.0.obs; final RxBool _brightnessIndicator = false.obs; @@ -97,10 +96,12 @@ class _PLVideoPlayerState extends State void onDoubleTapSeekBackward() { _mountSeekBackwardButton.value = true; + _hideSeekBackwardButton.value = false; } void onDoubleTapSeekForward() { _mountSeekForwardButton.value = true; + _hideSeekForwardButton.value = false; } // 双击播放、暂停 @@ -375,6 +376,29 @@ class _PLVideoPlayerState extends State return list; } + void _handleSubmittedCallback(String type, Duration value) { + final PlPlayerController _ = widget.controller; + final Player player = + _.videoPlayerController ?? widget.controller.videoPlayerController!; + late Duration result; + + switch (type) { + case 'backward': + _hideSeekBackwardButton.value = true; + result = player.state.position - value; + break; + case 'forward': + _hideSeekForwardButton.value = true; + result = player.state.position + value; + break; + } + _mountSeekBackwardButton.value = false; + _mountSeekForwardButton.value = false; + result = result.clamp(Duration.zero, player.state.duration); + player.seek(result); + _.play(); + } + @override Widget build(BuildContext context) { final PlPlayerController _ = widget.controller; @@ -865,99 +889,13 @@ class _PLVideoPlayerState extends State } }), - /// 点击 快进/快退 - Obx( - () => Visibility( - visible: - _mountSeekBackwardButton.value || _mountSeekForwardButton.value, - child: Positioned.fill( - child: Row( - children: [ - Expanded( - child: _mountSeekBackwardButton.value - ? TweenAnimationBuilder( - tween: Tween( - begin: 0.0, - end: _hideSeekBackwardButton.value ? 0.0 : 1.0, - ), - duration: const Duration(milliseconds: 150), - builder: (BuildContext context, double value, - Widget? child) => - Opacity( - opacity: value, - child: child, - ), - onEnd: () { - if (_hideSeekBackwardButton.value) { - _hideSeekBackwardButton.value = false; - _mountSeekBackwardButton.value = false; - } - }, - child: BackwardSeekIndicator( - onChanged: (Duration value) => {}, - onSubmitted: (Duration value) { - _hideSeekBackwardButton.value = true; - final Player player = - widget.controller.videoPlayerController!; - Duration result = player.state.position - value; - result = result.clamp( - Duration.zero, - player.state.duration, - ); - player.seek(result); - widget.controller.play(); - }, - ), - ) - : const SizedBox(), - ), - Expanded( - child: SizedBox( - width: MediaQuery.sizeOf(context).width / 4, - ), - ), - Expanded( - child: _mountSeekForwardButton.value - ? TweenAnimationBuilder( - tween: Tween( - begin: 0.0, - end: _hideSeekForwardButton.value ? 0.0 : 1.0, - ), - duration: const Duration(milliseconds: 150), - builder: (BuildContext context, double value, - Widget? child) => - Opacity( - opacity: value, - child: child, - ), - onEnd: () { - if (_hideSeekForwardButton.value) { - _hideSeekForwardButton.value = false; - _mountSeekForwardButton.value = false; - } - }, - child: ForwardSeekIndicator( - onChanged: (Duration value) => {}, - onSubmitted: (Duration value) { - _hideSeekForwardButton.value = true; - final Player player = - widget.controller.videoPlayerController!; - Duration result = player.state.position + value; - result = result.clamp( - Duration.zero, - player.state.duration, - ); - player.seek(result); - widget.controller.play(); - }, - ), - ) - : const SizedBox(), - ), - ], - ), - ), - ), + /// 快进/快退面板 + SeekPanel( + mountSeekBackwardButton: _mountSeekBackwardButton, + mountSeekForwardButton: _mountSeekForwardButton, + hideSeekBackwardButton: _hideSeekBackwardButton, + hideSeekForwardButton: _hideSeekForwardButton, + onSubmittedcb: _handleSubmittedCallback, ), ], ); diff --git a/lib/plugin/pl_player/widgets/backward_seek.dart b/lib/plugin/pl_player/widgets/backward_seek.dart deleted file mode 100644 index 8289d77c..00000000 --- a/lib/plugin/pl_player/widgets/backward_seek.dart +++ /dev/null @@ -1,91 +0,0 @@ -import 'dart:async'; - -import 'package:flutter/material.dart'; - -class BackwardSeekIndicator extends StatefulWidget { - final void Function(Duration) onChanged; - final void Function(Duration) onSubmitted; - const BackwardSeekIndicator({ - Key? key, - required this.onChanged, - required this.onSubmitted, - }) : super(key: key); - - @override - State createState() => BackwardSeekIndicatorState(); -} - -class BackwardSeekIndicatorState extends State { - Duration value = const Duration(seconds: 10); - - Timer? timer; - - @override - void setState(VoidCallback fn) { - if (mounted) { - super.setState(fn); - } - } - - @override - void initState() { - super.initState(); - timer = Timer(const Duration(milliseconds: 200), () { - widget.onSubmitted.call(value); - }); - } - - void increment() { - timer?.cancel(); - timer = Timer(const Duration(milliseconds: 200), () { - widget.onSubmitted.call(value); - }); - widget.onChanged.call(value); - // 重复点击 快退秒数累加10 - setState(() { - value += const Duration(seconds: 10); - }); - } - - @override - Widget build(BuildContext context) { - return Container( - decoration: const BoxDecoration( - gradient: LinearGradient( - colors: [ - Color(0x88767676), - Color(0x00767676), - ], - begin: Alignment.centerLeft, - end: Alignment.centerRight, - ), - ), - child: InkWell( - splashColor: const Color(0x44767676), - onTap: increment, - child: Center( - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - const Icon( - Icons.fast_rewind, - size: 24.0, - color: Color(0xFFFFFFFF), - ), - const SizedBox(height: 8.0), - Text( - '快退${value.inSeconds}秒', - style: const TextStyle( - fontSize: 12.0, - color: Color(0xFFFFFFFF), - ), - ), - ], - ), - ), - ), - ); - } -} diff --git a/lib/plugin/pl_player/widgets/forward_seek.dart b/lib/plugin/pl_player/widgets/forward_seek.dart deleted file mode 100644 index 3f68fe0d..00000000 --- a/lib/plugin/pl_player/widgets/forward_seek.dart +++ /dev/null @@ -1,91 +0,0 @@ -import 'dart:async'; - -import 'package:flutter/material.dart'; - -class ForwardSeekIndicator extends StatefulWidget { - final void Function(Duration) onChanged; - final void Function(Duration) onSubmitted; - const ForwardSeekIndicator({ - Key? key, - required this.onChanged, - required this.onSubmitted, - }) : super(key: key); - - @override - State createState() => ForwardSeekIndicatorState(); -} - -class ForwardSeekIndicatorState extends State { - Duration value = const Duration(seconds: 10); - - Timer? timer; - - @override - void setState(VoidCallback fn) { - if (mounted) { - super.setState(fn); - } - } - - @override - void initState() { - super.initState(); - timer = Timer(const Duration(milliseconds: 200), () { - widget.onSubmitted.call(value); - }); - } - - void increment() { - timer?.cancel(); - timer = Timer(const Duration(milliseconds: 200), () { - widget.onSubmitted.call(value); - }); - widget.onChanged.call(value); - // 重复点击 快进秒数累加10 - setState(() { - value += const Duration(seconds: 10); - }); - } - - @override - Widget build(BuildContext context) { - return Container( - decoration: const BoxDecoration( - gradient: LinearGradient( - colors: [ - Color(0x00767676), - Color(0x88767676), - ], - begin: Alignment.centerLeft, - end: Alignment.centerRight, - ), - ), - child: InkWell( - splashColor: const Color(0x44767676), - onTap: increment, - child: Center( - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - const Icon( - Icons.fast_forward, - size: 24.0, - color: Color(0xFFFFFFFF), - ), - const SizedBox(height: 8.0), - Text( - '快进${value.inSeconds}秒', - style: const TextStyle( - fontSize: 12.0, - color: Color(0xFFFFFFFF), - ), - ), - ], - ), - ), - ), - ); - } -} diff --git a/lib/plugin/pl_player/widgets/seek_indicator.dart b/lib/plugin/pl_player/widgets/seek_indicator.dart new file mode 100644 index 00000000..45fa5a16 --- /dev/null +++ b/lib/plugin/pl_player/widgets/seek_indicator.dart @@ -0,0 +1,94 @@ +import 'dart:async'; +import 'package:flutter/material.dart'; + +enum SeekDirection { forward, backward } + +class SeekIndicator extends StatefulWidget { + final SeekDirection direction; + final void Function(Duration) onSubmitted; + + const SeekIndicator({ + Key? key, + required this.direction, + required this.onSubmitted, + }) : super(key: key); + + @override + State createState() => _SeekIndicatorState(); +} + +class _SeekIndicatorState extends State { + Timer? timer; + + @override + void initState() { + super.initState(); + _startTimer(); + } + + void _startTimer() { + timer?.cancel(); + timer = Timer(const Duration(milliseconds: 400), () { + widget.onSubmitted.call(const Duration(seconds: 10)); + timer = null; + }); + } + + @override + void dispose() { + timer?.cancel(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Container( + decoration: BoxDecoration( + gradient: LinearGradient( + colors: widget.direction == SeekDirection.forward + ? [ + const Color(0x00767676), + const Color(0x88767676), + ] + : [ + const Color(0x88767676), + const Color(0x00767676), + ], + begin: Alignment.centerLeft, + end: Alignment.centerRight, + ), + ), + child: Center( + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Icon( + widget.direction == SeekDirection.forward + ? Icons.fast_forward + : Icons.fast_rewind, + size: 24.0, + color: const Color(0xFFFFFFFF), + ), + const SizedBox(height: 8.0), + Text( + widget.direction == SeekDirection.forward ? '快进10秒' : '快退10秒', + style: const TextStyle( + fontSize: 12.0, + color: Color(0xFFFFFFFF), + shadows: [ + Shadow( + color: Color(0xFF000000), + offset: Offset(0, 2), + blurRadius: 4, + ), + ], + ), + ), + ], + ), + ), + ); + } +}