feat:看视频功能开发

liangchengyou
1 parent ea2c8205
Showing 5 changed files with 169 additions and 39 deletions
assets/images/video_stop.png
lib/app/app.dart
lib/video/lookvideo/look_video_page.dart
lib/video/lookvideo/widgets/video_opera_widget.dart
lib/video/lookvideo/widgets/video_widget.dart
@@ -24,7 +24,7 @@ class App extends StatelessWidget {
               title: 'WowEnglish',
               theme: ThemeData(
                 fontFamily: 'HannotateSC',
-                colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
+                colorScheme: ColorScheme.fromSeed(seedColor: Colors.white),
                 useMaterial3: true,
               ),
               builder: EasyLoading.init(
@@ -3,14 +3,20 @@ import &#39;package:flutter_bloc/flutter_bloc.dart&#39;;
 import 'package:wow_english/video/lookvideo/bloc/look_video_bloc.dart';
 import 'package:wow_english/video/lookvideo/widgets/video_widget.dart';
-class LookVideoPage extends StatelessWidget {
+class LookVideoPage extends StatefulWidget {
   const LookVideoPage({super.key});
   @override
+  State<StatefulWidget> createState() {
+    return _LookVideoPageState();
+  }
+}
+
+class _LookVideoPageState extends State<LookVideoPage> {
+  @override
   Widget build(BuildContext context) {
-    return BlocProvider(
-      create: (context) => LookVideoBloc(),
-      child: _LookVideoPage(),
+    return  const VideoWidget(
+      videoUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7194236f31b2e1e3da0fe06cfed4ba2b.mp4',
     );
   }
 }
@@ -2,13 +2,32 @@ import &#39;package:flutter/material.dart&#39;;
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:wow_english/common/extension/string_extension.dart';
+enum OperationType {
+  //返回
+  back,
+  //字幕
+  subtitlesState,
+  //静音
+  audioState,
+  //暂停/播放
+  playState,
+}
+
 class VideoOperaWidget extends StatefulWidget {
-  const VideoOperaWidget({super.key,  this.currentTime = '00:00', this.totalTime = '00:00', this.degree = 0.0,});
+  const VideoOperaWidget({super.key,
+    this.currentTime = '00:00',
+    this.totalTime = '00:00',
+    this.degree = 0.0,
+    this.actionEvent,
+    this.isPlay = true
+  });
   //当前播放时间
   final String currentTime;
   //总时间
   final String totalTime;
   final double degree;
+  final bool isPlay;
+  final Function(OperationType type)? actionEvent;
   @override
   State<StatefulWidget> createState() {
@@ -17,26 +36,43 @@ class VideoOperaWidget extends StatefulWidget {
 }
 class _VideoOperaWidgetState extends State<VideoOperaWidget> {
+
+  //是否在滑动
+  late bool isSlider;
+  late double sliderValue;
+
+  @override
+  void initState() {
+    super.initState();
+    isSlider = false;
+    sliderValue = 0.0;
+  }
+
   @override
   Widget build(BuildContext context) {
-    return SafeArea(
-      child: SizedBox(
-        width: double.infinity,
-        height: double.infinity,
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          children: [
-            Padding(
-              padding: EdgeInsets.only(left: 8.5.w,right: 8.5.w,top: 11.h),
+    return SizedBox(
+      width: double.infinity,
+      height: double.infinity,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          SafeArea(
+            child: Padding(
+              padding: EdgeInsets.only(top: 11.h),
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: [
                   Row(
                     children: [
-                      Image.asset(
-                        'back_around'.assetPng,
-                        height: 40,
-                        width: 40
+                      GestureDetector(
+                        onTap: (){
+                          widget.actionEvent?.call(OperationType.back);
+                        },
+                        child: Image.asset(
+                            'back_around'.assetPng,
+                            height: 40,
+                            width: 40
+                        ),
                       ),
                       18.horizontalSpace,
                       Container(
@@ -62,31 +98,83 @@ class _VideoOperaWidgetState extends State&lt;VideoOperaWidget&gt; {
                       )
                     ],
                   ),
-                  Container(
-                    height: 40.h,
-                    alignment: Alignment.center,
-                    decoration: BoxDecoration(
-                        color: Colors.white,
-                        borderRadius: BorderRadius.circular(6.r),
-                        border: Border.all(
-                            width: 1.5,
-                            color: const Color(0xFF140C10)
-                        )
-                    ),
-                    padding: EdgeInsets.symmetric(horizontal: 10.w),
-                    child: Text(
-                      '中/英',
-                      style: TextStyle(
-                        fontSize: 20.sp,
-                        color: const Color(0xFF333333),
+                  GestureDetector(
+                    onTap: () {
+                      widget.actionEvent?.call(OperationType.subtitlesState);
+                    },
+                    child: Container(
+                      height: 40.h,
+                      alignment: Alignment.center,
+                      decoration: BoxDecoration(
+                          color: Colors.white,
+                          borderRadius: BorderRadius.circular(6.r),
+                          border: Border.all(
+                              width: 1.5,
+                              color: const Color(0xFF140C10)
+                          )
+                      ),
+                      padding: EdgeInsets.symmetric(horizontal: 10.w),
+                      child: Text(
+                        '中/英',
+                        style: TextStyle(
+                          fontSize: 20.sp,
+                          color: const Color(0xFF333333),
+                        ),
                       ),
                     ),
                   )
                 ],
               ),
-            )
-          ],
-        ),
+            ),
+          ),
+          Container(
+            color: Colors.white10,
+            height: 47.h+ScreenUtil().bottomBarHeight,
+            padding: EdgeInsets.symmetric(horizontal: 11.w),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.start,
+              children: [
+                Row(
+                  children: [
+                    IconButton(onPressed: (){
+                      widget.actionEvent?.call(OperationType.playState);
+                    }, icon: widget.isPlay?const Icon(Icons.pause,color: Colors.white,):const Icon(Icons.play_arrow,color: Colors.white),),
+                    Expanded(
+                      child: Slider(
+                        activeColor: Colors.blue,
+                        inactiveColor: Colors.white,
+                        value: isSlider?sliderValue:widget.degree,
+                        onChangeStart: (value) {
+                         setState(() {
+                           isSlider = true;
+                           sliderValue = value;
+                         });
+                        },
+                        onChangeEnd: (value) {
+                          setState(() {
+                            isSlider = false;
+                          });
+                        },
+                        onChanged: (value) {
+                          setState(() {
+                            sliderValue = value;
+                          });
+                        },
+                      ),
+                    ),
+                    Text(
+                      '${widget.currentTime}/${widget.totalTime}',
+                      style: TextStyle(
+                        color: Colors.white,
+                        fontSize: 12.sp
+                      ),
+                    )
+                  ],
+                ),
+              ],
+            ),
+          )
+        ],
       ),
     );
   }
@@ -2,6 +2,7 @@ import &#39;package:common_utils/common_utils.dart&#39;;
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:video_player/video_player.dart';
+import 'package:wow_english/common/extension/string_extension.dart';
 import 'package:wow_english/video/lookvideo/widgets/video_opera_widget.dart';
 class VideoWidget extends StatefulWidget {
@@ -72,6 +73,21 @@ class _VideoWidgetState extends State&lt;VideoWidget&gt; {
     timerUtil = null;
   }
+  void actionType(OperationType type) async {
+    if (type == OperationType.back) {
+      Navigator.pop(context);
+    } else if (type == OperationType.playState) {
+      if (_controller!.value.isPlaying) {
+        _controller!.pause();
+      } else {
+        _controller!.play();
+      }
+      setState(() {
+
+      });
+    }
+  }
+
   @override
   void initState() {
     super.initState();
@@ -111,6 +127,9 @@ class _VideoWidgetState extends State&lt;VideoWidget&gt; {
           } else {
             _controller!.play();
           }
+          setState(() {
+
+          });
         }
       },
       child: Center(
@@ -131,6 +150,23 @@ class _VideoWidgetState extends State&lt;VideoWidget&gt; {
                 currentTime: _currentTime,
                 totalTime: _totalTime,
                 degree: _playDegree,
+                isPlay: _controller!.value.isPlaying,
+                actionEvent: (OperationType type) {
+                  actionType(type);
+                },
+              ),
+            ),
+            Offstage(
+              offstage: _controller!.value.isPlaying,
+              child: IconButton(
+                onPressed: () {
+                  _controller!.play();
+                },
+                icon: Image.asset(
+                  'video_stop'.assetPng,
+                  width: 70,
+                  height: 70,
+                ),
               ),
             )
           ],