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

不再使用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

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))) {

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,

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,268 +234,298 @@ 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 {
child: Stack( exitFullScreen();
children: [ }
Scaffold( Widget childWhenDisabled = PopScope(
resizeToAvoidBottomInset: false, canPop: !plPlayerController!.isFullScreen.value,
key: videoDetailController.scaffoldKey, onPopInvoked: (bool didPop) {
backgroundColor: Colors.black, if (plPlayerController!.isFullScreen.value) {
body: ExtendedNestedScrollView( plPlayerController!.triggerFullScreen(status: false);
controller: _extendNestCtr, }
headerSliverBuilder: if (MediaQuery.of(context).orientation == Orientation.landscape) {
(BuildContext context, bool innerBoxIsScrolled) { verticalScreen();
return <Widget>[ }
SliverAppBar( },
automaticallyImplyLeading: false, child: SafeArea(
pinned: false, top: MediaQuery.of(context).orientation == Orientation.portrait,
elevation: 0, bottom: MediaQuery.of(context).orientation == Orientation.portrait,
scrolledUnderElevation: 0, left: !plPlayerController!.isFullScreen.value,
forceElevated: innerBoxIsScrolled, right: !plPlayerController!.isFullScreen.value,
expandedHeight: videoHeight, child: Stack(
backgroundColor: Colors.black, children: [
flexibleSpace: FlexibleSpaceBar( Scaffold(
background: Padding( resizeToAvoidBottomInset: false,
padding: EdgeInsets.only(top: statusBarHeight), key: videoDetailController.scaffoldKey,
child: LayoutBuilder( backgroundColor: Colors.black,
builder: (context, boxConstraints) { body: ExtendedNestedScrollView(
double maxWidth = boxConstraints.maxWidth; controller: _extendNestCtr,
double maxHeight = boxConstraints.maxHeight; headerSliverBuilder:
return Stack( (BuildContext context, bool innerBoxIsScrolled) {
children: [ return <Widget>[
FutureBuilder( Obx(
future: _futureBuilderFuture, () => SliverAppBar(
builder: ((context, snapshot) { automaticallyImplyLeading: false,
if (snapshot.hasData && pinned: false,
snapshot.data['status']) { elevation: 0,
return Obx( scrolledUnderElevation: 0,
() => !videoDetailController forceElevated: innerBoxIsScrolled,
.autoPlay.value expandedHeight:
? const SizedBox() plPlayerController!.isFullScreen.value ||
: PLVideoPlayer( MediaQuery.of(context).orientation ==
controller: plPlayerController!, Orientation.landscape
headerControl: ? MediaQuery.of(context).size.height
videoDetailController : videoHeight,
.headerControl, backgroundColor: Colors.black,
danmuWidget: Obx( flexibleSpace: FlexibleSpaceBar(
() => PlDanmaku( background: LayoutBuilder(
key: Key( builder: (context, boxConstraints) {
videoDetailController double maxWidth = boxConstraints.maxWidth;
.danmakuCid.value double maxHeight = boxConstraints.maxHeight;
.toString()), return Stack(
cid: videoDetailController children: [
.danmakuCid.value, FutureBuilder(
playerController: future: _futureBuilderFuture,
plPlayerController!, builder: ((context, snapshot) {
), if (snapshot.hasData &&
), snapshot.data['status']) {
), return Obx(
); () => !videoDetailController
} else { .autoPlay.value
return const SizedBox(); ? const SizedBox()
} : PLVideoPlayer(
}), controller:
), plPlayerController!,
headerControl:
Obx( videoDetailController
() => Visibility( .headerControl,
visible: danmuWidget: Obx(
videoDetailController.isShowCover.value, () => PlDanmaku(
child: Positioned( key: Key(
top: 0, videoDetailController
left: 0, .danmakuCid
right: 0, .value
child: NetworkImgLayer( .toString()),
type: 'emote', cid:
src: videoDetailController videoDetailController
.videoItem['pic'], .danmakuCid
width: maxWidth, .value,
height: maxHeight, playerController:
plPlayerController!,
),
),
),
);
} else {
return const SizedBox();
}
}),
), ),
),
),
),
/// 关闭自动播放时 手动播放 Obx(
Obx( () => Visibility(
() => Visibility( visible: videoDetailController
visible: videoDetailController .isShowCover.value,
.isShowCover.value && child: Positioned(
videoDetailController
.isEffective.value &&
!videoDetailController.autoPlay.value,
child: Stack(
children: [
Positioned(
top: 0, top: 0,
left: 0, left: 0,
right: 0, right: 0,
child: AppBar( child: NetworkImgLayer(
primary: false, type: 'emote',
foregroundColor: Colors.white, src: videoDetailController
backgroundColor: .videoItem['pic'],
Colors.transparent, width: maxWidth,
actions: [ height: maxHeight,
IconButton( ),
tooltip: '稍后再看', ),
onPressed: () async { ),
var res = await UserHttp ),
.toViewLater(
bvid: /// 关闭自动播放时 手动播放
videoDetailController Obx(
.bvid); () => Visibility(
SmartDialog.showToast( visible: videoDetailController
res['msg']); .isShowCover.value &&
}, videoDetailController
icon: const Icon( .isEffective.value &&
Icons.history_outlined), !videoDetailController
.autoPlay.value,
child: Stack(
children: [
Positioned(
top: 0,
left: 0,
right: 0,
child: AppBar(
primary: false,
foregroundColor:
Colors.white,
backgroundColor:
Colors.transparent,
actions: [
IconButton(
tooltip: '稍后再看',
onPressed: () async {
var res = await UserHttp
.toViewLater(
bvid:
videoDetailController
.bvid);
SmartDialog.showToast(
res['msg']);
},
icon: const Icon(Icons
.history_outlined),
),
const SizedBox(width: 14)
],
),
),
Positioned(
right: 12,
bottom: 10,
child: TextButton.icon(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty
.resolveWith(
(states) {
return Theme.of(context)
.colorScheme
.primaryContainer;
}),
),
onPressed: () =>
handlePlay(),
icon: const Icon(
Icons.play_circle_outline,
size: 20,
),
label: const Text('Play'),
),
), ),
const SizedBox(width: 14)
], ],
), )),
), ),
Positioned( ],
right: 12, );
bottom: 10, },
child: TextButton.icon( ),
style: ButtonStyle( )),
backgroundColor:
MaterialStateProperty
.resolveWith((states) {
return Theme.of(context)
.colorScheme
.primaryContainer;
}),
),
onPressed: () => handlePlay(),
icon: const Icon(
Icons.play_circle_outline,
size: 20,
),
label: const Text('Play'),
),
),
],
)),
),
],
);
},
),
), ),
];
},
// pinnedHeaderSliverHeightBuilder: () {
// return playerStatus != PlayerStatus.playing
// ? statusBarHeight + kToolbarHeight
// : pinnedHeaderHeight;
// },
/// 不收回
// pinnedHeaderSliverHeightBuilder: () {
// return pinnedHeaderHeight;
// },
onlyOneScrollInBody: true,
body: Container(
key: Key(heroTag),
color: Theme.of(context).colorScheme.background,
child: Column(
children: [
Opacity(
opacity: 0,
child: SizedBox(
width: double.infinity,
height: 0,
child: Obx(
() => TabBar(
controller: videoDetailController.tabCtr,
dividerColor: Colors.transparent,
indicatorColor:
Theme.of(context).colorScheme.background,
tabs: videoDetailController.tabs
.map((String name) => Tab(text: name))
.toList(),
),
),
),
),
Expanded(
child: TabBarView(
controller: videoDetailController.tabCtr,
children: [
Builder(
builder: (context) {
return CustomScrollView(
key: const PageStorageKey<String>('简介'),
slivers: <Widget>[
if (videoDetailController.videoType ==
SearchType.video) ...[
const VideoIntroPanel(),
] else if (videoDetailController
.videoType ==
SearchType.media_bangumi) ...[
Obx(() => BangumiIntroPanel(
cid: videoDetailController
.cid.value)),
],
// if (videoDetailController.videoType ==
// SearchType.video) ...[
// SliverPersistentHeader(
// floating: true,
// pinned: true,
// delegate: SliverHeaderDelegate(
// height: 50,
// child:
// const MenuRow(loadingStatus: false),
// ),
// ),
// ],
SliverToBoxAdapter(
child: Divider(
indent: 12,
endIndent: 12,
color: Theme.of(context)
.dividerColor
.withOpacity(0.06),
),
),
const RelatedVideoPanel(),
],
);
},
),
VideoReplyPanel(
bvid: videoDetailController.bvid,
)
],
),
),
],
), ),
), ),
];
},
// pinnedHeaderSliverHeightBuilder: () {
// return playerStatus != PlayerStatus.playing
// ? statusBarHeight + kToolbarHeight
// : pinnedHeaderHeight;
// },
/// 不收回
pinnedHeaderSliverHeightBuilder: () {
return pinnedHeaderHeight;
},
onlyOneScrollInBody: true,
body: Container(
key: Key(heroTag),
color: Theme.of(context).colorScheme.background,
child: Column(
children: [
Opacity(
opacity: 0,
child: SizedBox(
width: double.infinity,
height: 0,
child: Obx(
() => TabBar(
controller: videoDetailController.tabCtr,
dividerColor: Colors.transparent,
indicatorColor:
Theme.of(context).colorScheme.background,
tabs: videoDetailController.tabs
.map((String name) => Tab(text: name))
.toList(),
),
),
),
),
Expanded(
child: TabBarView(
controller: videoDetailController.tabCtr,
children: [
Builder(
builder: (context) {
return CustomScrollView(
key: const PageStorageKey<String>('简介'),
slivers: <Widget>[
if (videoDetailController.videoType ==
SearchType.video) ...[
const VideoIntroPanel(),
] else if (videoDetailController.videoType ==
SearchType.media_bangumi) ...[
Obx(() => BangumiIntroPanel(
cid: videoDetailController.cid.value)),
],
// if (videoDetailController.videoType ==
// SearchType.video) ...[
// SliverPersistentHeader(
// floating: true,
// pinned: true,
// delegate: SliverHeaderDelegate(
// height: 50,
// child:
// const MenuRow(loadingStatus: false),
// ),
// ),
// ],
SliverToBoxAdapter(
child: Divider(
indent: 12,
endIndent: 12,
color: Theme.of(context)
.dividerColor
.withOpacity(0.06),
),
),
const RelatedVideoPanel(),
],
);
},
),
VideoReplyPanel(
bvid: videoDetailController.bvid,
)
],
),
),
],
), ),
), ),
),
),
/// 重新进入会刷新 /// 重新进入会刷新
// 播放完成/暂停播放 // 播放完成/暂停播放
// StreamBuilder( // StreamBuilder(
// stream: appbarStream.stream, // stream: appbarStream.stream,
// initialData: 0, // initialData: 0,
// builder: ((context, snapshot) { // builder: ((context, snapshot) {
// return ScrollAppBar( // return ScrollAppBar(
// snapshot.data!.toDouble(), // snapshot.data!.toDouble(),
// () => continuePlay(), // () => continuePlay(),
// playerStatus, // playerStatus,
// null, // null,
// ); // );
// }), // }),
// ) // )
], ],
), ),
); ));
Widget childWhenEnabled = FutureBuilder( Widget childWhenEnabled = FutureBuilder(
key: Key(heroTag), key: Key(heroTag),
future: _futureBuilderFuture, future: _futureBuilderFuture,

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(

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);