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

重构全屏逻辑，修复全屏弹幕与横屏错位问题

Browse Source 
不再使用showDialog覆盖并传递对象的方式实现全屏，改用原控件调整高度（用Obx包裹SliverAppBar）、safeArea切换上下边距、构建detail页时根据屏幕方向切换状态栏可见性的方式实现全屏。
以上方式既能兼容屏幕旋转，也能绕过弹幕不加载的问题，还可以保留播放器上的弹幕避免旋屏时清空。
另外添加了两处针对全屏或旋屏状态的返回处理。
This commit is contained in:
orz12
2023-12-18 21:25:28 +08:00
parent 6dd1360a76
commit 4d07f1508a
5 changed files with 330 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
lib/pages/danmaku/view.dart
View File

@ -95,9 +95,9 @@ class _PlDanmakuState extends State<PlDanmaku> {
// 根据position判断是否有已缓存弹幕。没有则请求对应段 // 根据position判断是否有已缓存弹幕。没有则请求对应段
int segIndex = (currentPosition / (6 * 60 * 1000)).ceil(); int segIndex = (currentPosition / (6 * 60 * 1000)).ceil();
segIndex = segIndex < 1 ? 1 : segIndex; segIndex = segIndex < 1 ? 1 : segIndex;
print('🌹🌹： ${segIndex}'); // print('🌹🌹： ${segIndex}');
print('🌹🌹： ${ctr.dmSegList.length}'); // print('🌹🌹： ${ctr.dmSegList.length}');
print('🌹🌹： ${ctr.hasrequestSeg.contains(segIndex - 1)}'); // print('🌹🌹： ${ctr.hasrequestSeg.contains(segIndex - 1)}');
if (segIndex - 1 >= ctr.dmSegList.length || if (segIndex - 1 >= ctr.dmSegList.length ||
(ctr.dmSegList[segIndex - 1].elems.isEmpty && (ctr.dmSegList[segIndex - 1].elems.isEmpty &&
!ctr.hasrequestSeg.contains(segIndex - 1))) { !ctr.hasrequestSeg.contains(segIndex - 1))) {

4
lib/pages/video/detail/controller.dart
View File

@ -138,8 +138,8 @@ class VideoDetailController extends GetxController
} }
showReplyReplyPanel() { showReplyReplyPanel() {
PersistentBottomSheetController<void>? ctr = PersistentBottomSheetController? ctr =
scaffoldKey.currentState?.showBottomSheet<void>((BuildContext context) { scaffoldKey.currentState?.showBottomSheet((BuildContext context) {
return VideoReplyReplyPanel( return VideoReplyReplyPanel(
oid: oid, oid: oid,
rpid: fRpid, rpid: fRpid,

91
lib/pages/video/detail/view.dart
View File

@ -21,6 +21,7 @@ import 'package:pilipala/plugin/pl_player/models/play_repeat.dart';
import 'package:pilipala/services/service_locator.dart'; import 'package:pilipala/services/service_locator.dart';
import 'package:pilipala/utils/storage.dart'; import 'package:pilipala/utils/storage.dart';
import 'package:pilipala/plugin/pl_player/utils/fullscreen.dart';
import 'widgets/header_control.dart'; import 'widgets/header_control.dart';
class VideoDetailPage extends StatefulWidget { class VideoDetailPage extends StatefulWidget {
@ -233,11 +234,28 @@ class _VideoDetailPageState extends State<VideoDetailPage>
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final videoHeight = MediaQuery.of(context).size.width * 9 / 16; final videoHeight = MediaQuery.of(context).size.width * 9 / 16;
final double pinnedHeaderHeight = // final double pinnedHeaderHeight =
statusBarHeight + kToolbarHeight + videoHeight; // statusBarHeight + kToolbarHeight + videoHeight;
Widget childWhenDisabled = SafeArea( if (MediaQuery.of(context).orientation == Orientation.landscape) {
top: false, enterFullScreen();
bottom: false, } else {
exitFullScreen();
}
Widget childWhenDisabled = PopScope(
canPop: !plPlayerController!.isFullScreen.value,
onPopInvoked: (bool didPop) {
if (plPlayerController!.isFullScreen.value) {
plPlayerController!.triggerFullScreen(status: false);
}
if (MediaQuery.of(context).orientation == Orientation.landscape) {
verticalScreen();
}
},
child: SafeArea(
top: MediaQuery.of(context).orientation == Orientation.portrait,
bottom: MediaQuery.of(context).orientation == Orientation.portrait,
left: !plPlayerController!.isFullScreen.value,
right: !plPlayerController!.isFullScreen.value,
child: Stack( child: Stack(
children: [ children: [
Scaffold( Scaffold(
@ -249,18 +267,22 @@ class _VideoDetailPageState extends State<VideoDetailPage>
headerSliverBuilder: headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) { (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[ return <Widget>[
SliverAppBar( Obx(
() => SliverAppBar(
automaticallyImplyLeading: false, automaticallyImplyLeading: false,
pinned: false, pinned: false,
elevation: 0, elevation: 0,
scrolledUnderElevation: 0, scrolledUnderElevation: 0,
forceElevated: innerBoxIsScrolled, forceElevated: innerBoxIsScrolled,
expandedHeight: videoHeight, expandedHeight:
plPlayerController!.isFullScreen.value ||
MediaQuery.of(context).orientation ==
Orientation.landscape
? MediaQuery.of(context).size.height
: videoHeight,
backgroundColor: Colors.black, backgroundColor: Colors.black,
flexibleSpace: FlexibleSpaceBar( flexibleSpace: FlexibleSpaceBar(
background: Padding( background: LayoutBuilder(
padding: EdgeInsets.only(top: statusBarHeight),
child: LayoutBuilder(
builder: (context, boxConstraints) { builder: (context, boxConstraints) {
double maxWidth = boxConstraints.maxWidth; double maxWidth = boxConstraints.maxWidth;
double maxHeight = boxConstraints.maxHeight; double maxHeight = boxConstraints.maxHeight;
@ -276,7 +298,8 @@ class _VideoDetailPageState extends State<VideoDetailPage>
.autoPlay.value .autoPlay.value
? const SizedBox() ? const SizedBox()
: PLVideoPlayer( : PLVideoPlayer(
controller: plPlayerController!, controller:
plPlayerController!,
headerControl: headerControl:
videoDetailController videoDetailController
.headerControl, .headerControl,
@ -284,10 +307,13 @@ class _VideoDetailPageState extends State<VideoDetailPage>
() => PlDanmaku( () => PlDanmaku(
key: Key( key: Key(
videoDetailController videoDetailController
.danmakuCid.value .danmakuCid
.value
.toString()), .toString()),
cid: videoDetailController cid:
.danmakuCid.value, videoDetailController
.danmakuCid
.value,
playerController: playerController:
plPlayerController!, plPlayerController!,
), ),
@ -302,8 +328,8 @@ class _VideoDetailPageState extends State<VideoDetailPage>
Obx( Obx(
() => Visibility( () => Visibility(
visible: visible: videoDetailController
videoDetailController.isShowCover.value, .isShowCover.value,
child: Positioned( child: Positioned(
top: 0, top: 0,
left: 0, left: 0,
@ -326,7 +352,8 @@ class _VideoDetailPageState extends State<VideoDetailPage>
.isShowCover.value && .isShowCover.value &&
videoDetailController videoDetailController
.isEffective.value && .isEffective.value &&
!videoDetailController.autoPlay.value, !videoDetailController
.autoPlay.value,
child: Stack( child: Stack(
children: [ children: [
Positioned( Positioned(
@ -335,7 +362,8 @@ class _VideoDetailPageState extends State<VideoDetailPage>
right: 0, right: 0,
child: AppBar( child: AppBar(
primary: false, primary: false,
foregroundColor: Colors.white, foregroundColor:
Colors.white,
backgroundColor: backgroundColor:
Colors.transparent, Colors.transparent,
actions: [ actions: [
@ -350,8 +378,8 @@ class _VideoDetailPageState extends State<VideoDetailPage>
SmartDialog.showToast( SmartDialog.showToast(
res['msg']); res['msg']);
}, },
icon: const Icon( icon: const Icon(Icons
Icons.history_outlined), .history_outlined),
), ),
const SizedBox(width: 14) const SizedBox(width: 14)
], ],
@ -364,13 +392,15 @@ class _VideoDetailPageState extends State<VideoDetailPage>
style: ButtonStyle( style: ButtonStyle(
backgroundColor: backgroundColor:
MaterialStateProperty MaterialStateProperty
.resolveWith((states) { .resolveWith(
(states) {
return Theme.of(context) return Theme.of(context)
.colorScheme .colorScheme
.primaryContainer; .primaryContainer;
}), }),
), ),
onPressed: () => handlePlay(), onPressed: () =>
handlePlay(),
icon: const Icon( icon: const Icon(
Icons.play_circle_outline, Icons.play_circle_outline,
size: 20, size: 20,
@ -385,8 +415,7 @@ class _VideoDetailPageState extends State<VideoDetailPage>
); );
}, },
), ),
), )),
),
), ),
]; ];
}, },
@ -396,9 +425,9 @@ class _VideoDetailPageState extends State<VideoDetailPage>
// : pinnedHeaderHeight; // : pinnedHeaderHeight;
// }, // },
/// 不收回 /// 不收回
pinnedHeaderSliverHeightBuilder: () { // pinnedHeaderSliverHeightBuilder: () {
return pinnedHeaderHeight; // return pinnedHeaderHeight;
}, // },
onlyOneScrollInBody: true, onlyOneScrollInBody: true,
body: Container( body: Container(
key: Key(heroTag), key: Key(heroTag),
@ -435,10 +464,12 @@ class _VideoDetailPageState extends State<VideoDetailPage>
if (videoDetailController.videoType == if (videoDetailController.videoType ==
SearchType.video) ...[ SearchType.video) ...[
const VideoIntroPanel(), const VideoIntroPanel(),
] else if (videoDetailController.videoType == ] else if (videoDetailController
.videoType ==
SearchType.media_bangumi) ...[ SearchType.media_bangumi) ...[
Obx(() => BangumiIntroPanel( Obx(() => BangumiIntroPanel(
cid: videoDetailController.cid.value)), cid: videoDetailController
.cid.value)),
], ],
// if (videoDetailController.videoType == // if (videoDetailController.videoType ==
// SearchType.video) ...[ // SearchType.video) ...[
@ -494,7 +525,7 @@ class _VideoDetailPageState extends State<VideoDetailPage>
// ) // )
], ],
), ),
); ));
Widget childWhenEnabled = FutureBuilder( Widget childWhenEnabled = FutureBuilder(
key: Key(heroTag), key: Key(heroTag),
future: _futureBuilderFuture, future: _futureBuilderFuture,

13
lib/pages/video/detail/widgets/header_control.dart
View File

@ -880,7 +880,18 @@ class _HeaderControlState extends State<HeaderControl> {
size: 15, size: 15,
color: Colors.white, color: Colors.white,
), ),
fuc: () => Get.back(), fuc: () => {
if (widget.controller!.isFullScreen.value){
widget.controller!.triggerFullScreen(status: false)
} else {
if (MediaQuery.of(context).orientation == Orientation.landscape){
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
])
},
Get.back()
}
},
), ),
SizedBox(width: buttonSpace), SizedBox(width: buttonSpace),
ComBtn( ComBtn(

66
lib/plugin/pl_player/controller.dart
View File

@ -899,6 +899,7 @@ class PlPlayerController {
await StatusBarControl.setHidden(true, animation: StatusBarAnimation.FADE); await StatusBarControl.setHidden(true, animation: StatusBarAnimation.FADE);
if (!isFullScreen.value && status) { if (!isFullScreen.value && status) {
/// 按照视频宽高比决定全屏方向 /// 按照视频宽高比决定全屏方向
toggleFullScreen(true);
switch (mode) { switch (mode) {
case FullScreenMode.auto: case FullScreenMode.auto:
if (direction.value == 'horizontal') { if (direction.value == 'horizontal') {
@ -927,41 +928,40 @@ class PlPlayerController {
break; break;
} }
toggleFullScreen(true); // bool isValid =
bool isValid = // direction.value == 'vertical' || mode == FullScreenMode.vertical
direction.value == 'vertical' || mode == FullScreenMode.vertical // ? true
? true // : false;
: false; // var result = await showDialog(
var result = await showDialog( // context: Get.context!,
context: Get.context!, // useSafeArea: false,
useSafeArea: false, // builder: (context) => Dialog.fullscreen(
builder: (context) => Dialog.fullscreen( // backgroundColor: Colors.black,
backgroundColor: Colors.black, // child: SafeArea(
child: SafeArea( // // 忽略手机安全区域
// 忽略手机安全区域 // top: isValid,
top: isValid, // left: false,
left: false, // right: false,
right: false, // bottom: isValid,
bottom: isValid, // child: PLVideoPlayer(
child: PLVideoPlayer( // controller: this,
controller: this, // headerControl: headerControl,
headerControl: headerControl, // bottomControl: bottomControl,
bottomControl: bottomControl, // danmuWidget: danmuWidget,
danmuWidget: danmuWidget, // ),
), // ),
), // ),
), // );
); // if (result == null) {
if (result == null) { // // 退出全屏
// 退出全屏 // StatusBarControl.setHidden(false, animation: StatusBarAnimation.FADE);
StatusBarControl.setHidden(false, animation: StatusBarAnimation.FADE); // exitFullScreen();
exitFullScreen(); // await verticalScreen();
await verticalScreen(); // toggleFullScreen(false);
toggleFullScreen(false); // }
}
} else if (isFullScreen.value) { } else if (isFullScreen.value) {
StatusBarControl.setHidden(false, animation: StatusBarAnimation.FADE); StatusBarControl.setHidden(false, animation: StatusBarAnimation.FADE);
Get.back(); // Get.back();
exitFullScreen(); exitFullScreen();
await verticalScreen(); await verticalScreen();
toggleFullScreen(false); toggleFullScreen(false);