mirrors/pilipala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'opt-playerLayout'

Browse Source
This commit is contained in:
guozhigq
2024-10-19 15:43:33 +08:00
parent 5aa1bee58a eb2a51e5e2
commit b37c767ac0
5 changed files with 205 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
lib/plugin/pl_player/panels/seek_panel.dart Normal file
View File

@ -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(),
);
}
}

132
lib/plugin/pl_player/view.dart
View File

@ -22,12 +22,11 @@ import 'package:screen_brightness/screen_brightness.dart';
import '../../utils/global_data_cache.dart'; import '../../utils/global_data_cache.dart';
import 'models/bottom_control_type.dart'; import 'models/bottom_control_type.dart';
import 'models/bottom_progress_behavior.dart'; import 'models/bottom_progress_behavior.dart';
import 'panels/seek_panel.dart';
import 'widgets/app_bar_ani.dart'; import 'widgets/app_bar_ani.dart';
import 'widgets/backward_seek.dart';
import 'widgets/bottom_control.dart'; import 'widgets/bottom_control.dart';
import 'widgets/common_btn.dart'; import 'widgets/common_btn.dart';
import 'widgets/control_bar.dart'; import 'widgets/control_bar.dart';
import 'widgets/forward_seek.dart';
import 'widgets/play_pause_btn.dart'; import 'widgets/play_pause_btn.dart';
class PLVideoPlayer extends StatefulWidget { class PLVideoPlayer extends StatefulWidget {
@ -69,8 +68,8 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
final RxBool _mountSeekBackwardButton = false.obs; final RxBool _mountSeekBackwardButton = false.obs;
final RxBool _mountSeekForwardButton = false.obs; final RxBool _mountSeekForwardButton = false.obs;
final RxBool _hideSeekBackwardButton = false.obs; final RxBool _hideSeekBackwardButton = true.obs;
final RxBool _hideSeekForwardButton = false.obs; final RxBool _hideSeekForwardButton = true.obs;
final RxDouble _brightnessValue = 0.0.obs; final RxDouble _brightnessValue = 0.0.obs;
final RxBool _brightnessIndicator = false.obs; final RxBool _brightnessIndicator = false.obs;
@ -97,10 +96,12 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
void onDoubleTapSeekBackward() { void onDoubleTapSeekBackward() {
_mountSeekBackwardButton.value = true; _mountSeekBackwardButton.value = true;
_hideSeekBackwardButton.value = false;
} }
void onDoubleTapSeekForward() { void onDoubleTapSeekForward() {
_mountSeekForwardButton.value = true; _mountSeekForwardButton.value = true;
_hideSeekForwardButton.value = false;
} }
// 双击播放、暂停 // 双击播放、暂停
@ -375,6 +376,29 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
return list; 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final PlPlayerController _ = widget.controller; final PlPlayerController _ = widget.controller;
@ -865,99 +889,13 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
} }
}), }),
/// 点击 快进/快退 /// 快进/快退面板
Obx( SeekPanel(
() => Visibility( mountSeekBackwardButton: _mountSeekBackwardButton,
visible: mountSeekForwardButton: _mountSeekForwardButton,
_mountSeekBackwardButton.value || _mountSeekForwardButton.value, hideSeekBackwardButton: _hideSeekBackwardButton,
child: Positioned.fill( hideSeekForwardButton: _hideSeekForwardButton,
child: Row( onSubmittedcb: _handleSubmittedCallback,
children: [
Expanded(
child: _mountSeekBackwardButton.value
? TweenAnimationBuilder<double>(
tween: Tween<double>(
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<double>(
tween: Tween<double>(
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(),
),
],
),
),
),
), ),
], ],
); );

91
lib/plugin/pl_player/widgets/backward_seek.dart
View File

@ -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<BackwardSeekIndicator> createState() => BackwardSeekIndicatorState();
}
class BackwardSeekIndicatorState extends State<BackwardSeekIndicator> {
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),
),
),
],
),
),
),
);
}
}

91
lib/plugin/pl_player/widgets/forward_seek.dart
View File

@ -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<ForwardSeekIndicator> createState() => ForwardSeekIndicatorState();
}
class ForwardSeekIndicatorState extends State<ForwardSeekIndicator> {
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),
),
),
],
),
),
),
);
}
}

94
lib/plugin/pl_player/widgets/seek_indicator.dart Normal file
View File

@ -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<SeekIndicator> createState() => _SeekIndicatorState();
}
class _SeekIndicatorState extends State<SeekIndicator> {
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,
),
],
),
),
],
),
),
);
}
}