mod: 直播页面控制条

lib/pages/liveRoom/view.dart

@@ -4,6 +4,7 @@ import 'package:pilipala/common/widgets/network_img_layer.dart';
 import 'package:pilipala/plugin/pl_player/index.dart';
 
 import 'controller.dart';
+import 'widgets/bottom_control.dart';
 
 class LiveRoomPage extends StatefulWidget {
   const LiveRoomPage({super.key});
@@ -87,14 +88,18 @@ class _LiveRoomPageState extends State<LiveRoomPage> {
       ),
       body: Column(
         children: [
-          Hero(
+          Stack(
-            tag: _liveRoomController.heroTag,
-            child: Stack(
             children: [
               AspectRatio(
                 aspectRatio: 16 / 9,
                 child: plPlayerController!.videoPlayerController != null
-                      ? PLVideoPlayer(controller: plPlayerController!)
+                    ? PLVideoPlayer(
+                        controller: plPlayerController!,
+                        bottomControl: BottomControl(
+                          controller: plPlayerController,
+                          liveRoomCtr: _liveRoomController,
+                        ),
+                      )
                     : const SizedBox(),
               ),
               // if (_liveRoomController.liveItem != null &&
@@ -115,68 +120,6 @@ class _LiveRoomPageState extends State<LiveRoomPage> {
               //   ),
             ],
           ),
-          ),
-          // Container(
-          //   height: 45,
-          //   padding: const EdgeInsets.only(left: 12, right: 12),
-          //   decoration: BoxDecoration(
-          //     color: Theme.of(context).colorScheme.background,
-          //     border: Border(
-          //       bottom: BorderSide(
-          //           color: Theme.of(context).dividerColor.withOpacity(0.1)),
-          //     ),
-          //   ),
-          //   child: Row(children: <Widget>[
-          //     SizedBox(
-          //       width: 38,
-          //       height: 38,
-          //       child: IconButton(
-          //         onPressed: () {},
-          //         icon: const Icon(
-          //           Icons.subtitles_outlined,
-          //           size: 21,
-          //         ),
-          //       ),
-          //     ),
-          //     const Spacer(),
-          //     SizedBox(
-          //       width: 38,
-          //       height: 38,
-          //       child: IconButton(
-          //         onPressed: () {},
-          //         icon: const Icon(
-          //           Icons.hd_outlined,
-          //           size: 20,
-          //         ),
-          //       ),
-          //     ),
-          //     SizedBox(
-          //       width: 38,
-          //       height: 38,
-          //       child: IconButton(
-          //         onPressed: () => _liveRoomController
-          //             .setVolumn(plPlayerController!.volume.value),
-          //         icon: Obx(() => Icon(
-          //               _liveRoomController.volumeOff.value
-          //                   ? Icons.volume_off_outlined
-          //                   : Icons.volume_up_outlined,
-          //               size: 21,
-          //             )),
-          //       ),
-          //     ),
-          //     SizedBox(
-          //       width: 38,
-          //       height: 38,
-          //       child: IconButton(
-          //         onPressed: () => {},
-          //         // plPlayerController!.goToFullscreen(context),
-          //         icon: const Icon(
-          //           Icons.fullscreen,
-          //         ),
-          //       ),
-          //     ),
-          //   ]),
-          // ),
         ],
       ),
     );

lib/pages/liveRoom/widgets/bottom_control.dart

@@ -0,0 +1,118 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:hive/hive.dart';
+import 'package:pilipala/models/video/play/url.dart';
+import 'package:pilipala/pages/liveRoom/index.dart';
+import 'package:pilipala/plugin/pl_player/index.dart';
+import 'package:pilipala/utils/storage.dart';
+
+class BottomControl extends StatefulWidget implements PreferredSizeWidget {
+  final PlPlayerController? controller;
+  final LiveRoomController? liveRoomCtr;
+  const BottomControl({
+    this.controller,
+    this.liveRoomCtr,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  State<BottomControl> createState() => _BottomControlState();
+
+  @override
+  Size get preferredSize => throw UnimplementedError();
+}
+
+class _BottomControlState extends State<BottomControl> {
+  late PlayUrlModel videoInfo;
+  List<PlaySpeed> playSpeed = PlaySpeed.values;
+  TextStyle subTitleStyle = const TextStyle(fontSize: 12);
+  TextStyle titleStyle = const TextStyle(fontSize: 14);
+  Size get preferredSize => const Size(double.infinity, kToolbarHeight);
+  Box localCache = GStrorage.localCache;
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    const textStyle = TextStyle(
+      color: Colors.white,
+      fontSize: 12,
+    );
+    return AppBar(
+      backgroundColor: Colors.transparent,
+      foregroundColor: Colors.white,
+      elevation: 0,
+      scrolledUnderElevation: 0,
+      primary: false,
+      centerTitle: false,
+      automaticallyImplyLeading: false,
+      titleSpacing: 14,
+      title: Row(
+        children: [
+          ComBtn(
+            icon: const Icon(
+              Icons.subtitles_outlined,
+              size: 18,
+              color: Colors.white,
+            ),
+            fuc: () => Get.back(),
+          ),
+          const SizedBox(width: 4),
+          const Spacer(),
+          const SizedBox(width: 4),
+          ComBtn(
+            icon: const Icon(
+              Icons.hd_outlined,
+              size: 18,
+              color: Colors.white,
+            ),
+            fuc: () => {},
+          ),
+          const SizedBox(width: 4),
+          Obx(
+            () => ComBtn(
+              icon: Icon(
+                widget.liveRoomCtr!.volumeOff.value
+                    ? Icons.volume_off_outlined
+                    : Icons.volume_up_outlined,
+                size: 18,
+                color: Colors.white,
+              ),
+              fuc: () => {},
+            ),
+          ),
+          const SizedBox(width: 4),
+          ComBtn(
+            icon: const Icon(
+              Icons.fullscreen,
+              size: 20,
+              color: Colors.white,
+            ),
+            fuc: () => widget.controller!.triggerFullScreen(),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class MSliderTrackShape extends RoundedRectSliderTrackShape {
+  @override
+  Rect getPreferredRect({
+    required RenderBox parentBox,
+    Offset offset = Offset.zero,
+    SliderThemeData? sliderTheme,
+    bool isEnabled = false,
+    bool isDiscrete = false,
+  }) {
+    const double trackHeight = 3;
+    final double trackLeft = offset.dx;
+    final double trackTop =
+        offset.dy + (parentBox.size.height - trackHeight) / 2 + 4;
+    final double trackWidth = parentBox.size.width;
+    return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
+  }
+}

lib/plugin/pl_player/controller.dart

@@ -105,6 +105,7 @@ class PlPlayerController {
   ];
 
   PreferredSizeWidget? headerControl;
+  PreferredSizeWidget? bottomControl;
   Widget? danmuWidget;
 
   /// 数据加载监听
@@ -819,6 +820,7 @@ class PlPlayerController {
           child: PLVideoPlayer(
             controller: this,
             headerControl: headerControl,
+            bottomControl: bottomControl,
             danmuWidget: danmuWidget,
           ),
         ),
@@ -867,6 +869,9 @@ class PlPlayerController {
     if (!_enableHeart) {
       return false;
     }
+    if (videoType.value == 'live') {
+      return;
+    }
     // 播放状态变化时，更新
     if (type == 'status') {
       await VideoHttp.heartBeat(

lib/plugin/pl_player/view.dart

@@ -29,11 +29,13 @@ import 'widgets/forward_seek.dart';
 class PLVideoPlayer extends StatefulWidget {
   final PlPlayerController controller;
   final PreferredSizeWidget? headerControl;
+  final PreferredSizeWidget? bottomControl;
   final Widget? danmuWidget;
 
   const PLVideoPlayer({
     required this.controller,
     this.headerControl,
+    this.bottomControl,
     this.danmuWidget,
     super.key,
   });
@@ -120,6 +122,7 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
         vsync: this, duration: const Duration(milliseconds: 300));
     videoController = widget.controller.videoController!;
     widget.controller.headerControl = widget.headerControl;
+    widget.controller.bottomControl = widget.bottomControl;
     widget.controller.danmuWidget = widget.danmuWidget;
     defaultBtmProgressBehavior = setting.get(SettingBoxKey.btmProgressBehavior,
         defaultValue: BtmProgresBehavior.values.first.code);
@@ -562,9 +565,7 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
 
         // 头部、底部控制条
         Obx(
-          () => Visibility(
+          () => Column(
-            visible: _.videoType.value != 'live',
-            child: Column(
             children: [
               if (widget.headerControl != null)
                 ClipRect(
@@ -583,15 +584,16 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
                   controller: animationController,
                   visible: !_.controlsLock.value && _.showControls.value,
                   position: 'bottom',
-                    child: BottomControl(
+                  child: widget.bottomControl ??
+                      BottomControl(
                           controller: widget.controller,
-                        triggerFullScreen: widget.controller.triggerFullScreen),
+                          triggerFullScreen:
+                              widget.controller.triggerFullScreen),
                 ),
               ),
             ],
           ),
         ),
-        ),
 
         /// 进度条 live模式下禁用
         Obx(
@@ -608,6 +610,10 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
                 !_.isFullScreen.value) {
               return Container();
             }
+
+            if (_.videoType.value == 'live') {
+              return Container();
+            }
             if (value > max || max <= 0) {
               return Container();
             }