huixiang_app/lib/community/community_view/class_details.dart

import 'dart:io';

import 'package:chewie/chewie.dart';
import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/retrofit/data/base_data.dart';
import 'package:huixiang/retrofit/data/chapter.dart';
import 'package:huixiang/retrofit/data/course_details.dart';
import 'package:huixiang/retrofit/retrofit_api.dart';
import 'package:huixiang/utils/font_weight.dart';
import 'package:huixiang/view_widget/custom_image.dart';
import 'package:chewie/src/chewie_progress_colors.dart' as chewie;
import 'package:huixiang/view_widget/tips_dialog.dart';
import 'package:huixiang/web/web_view/comment_list.dart';
import 'package:huixiang/web/web_view/input_comment.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:video_player/video_player.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class ClassDetails extends StatefulWidget {
  final Map<String, dynamic> arguments;

  ClassDetails({this.arguments});

  @override
  State<StatefulWidget> createState() {
    return _ClassDetails();
  }
}

class myChewieController extends ChewieController{

}

class _ClassDetails extends State<ClassDetails> with WidgetsBindingObserver {
  VideoPlayerController videoPlayerController;
  Chewie chewies;
  ChewieController chewieAudioController;
  ApiService apiService;
  final GlobalKey commentKey = GlobalKey();
  final ScrollController scrollController = ScrollController();
  bool isKeyBoardShow = false;
  var commentFocus = FocusNode();
  String parenId = "0";
  String hintText = S.current.liuxianinjingcaidepinglunba;
  final GlobalKey inputKey = GlobalKey();
  final TextEditingController commentTextController = TextEditingController();
  int commentTotal = 0;
  CourseDetails course;
  List<Chapter> chapterList = [];
  bool isShowImg = true;
  int chapterIndex = 0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    courseDetails(widget.arguments["id"]);
    queryChapterList(widget.arguments["id"]);
  }

  ///课程章节列表
  queryChapterList(courseId) async {
    if (apiService == null) {
      SharedPreferences value = await SharedPreferences.getInstance();
      apiService = ApiService(
        Dio(),
        context: context,
        token: value.getString("token"),
      );
    }
    BaseData<List<Chapter>> baseData =
        await apiService.catalogList(courseId).catchError((onError) {});
    if (baseData != null && baseData.isSuccess) {
      setState(() {
        chapterList.clear();
        chapterList.addAll(baseData.data);
        chapterIndex = 0;
        initVideo(chapterList[chapterIndex].content.fileUrl);
      });
    }
    EasyLoading.dismiss();
  }

  ///课程详情
  courseDetails(id) async {
    if (apiService == null) {
      SharedPreferences value = await SharedPreferences.getInstance();
      apiService = ApiService(
        Dio(),
        context: context,
        token: value.getString("token"),
      );
    }
    BaseData<CourseDetails> baseData =
        await apiService.course(id).catchError((error) {});
    if (baseData != null && baseData.isSuccess) {
      setState(() {
        course = baseData.data;
      });
    }
  }

  @override
  void dispose() {
    /**
     * 页面销毁时，视频播放器也销毁
     */

    if (chewieAudioController != null) {
      chewieAudioController.pause();
      chewieAudioController.dispose();
      chewieAudioController = null;
    }
    if (videoPlayerController != null) {
      videoPlayerController.pause();
      videoPlayerController.dispose();
    }
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (!mounted) return;
      if (MediaQuery.of(context).viewInsets.bottom == 0) {
        if (isKeyBoardShow) {
          FocusScope.of(context).requestFocus(FocusNode());
          if (mounted)
            setState(() {
              hintText = S.current.liuxianinjingcaidepinglunba;
              isKeyBoardShow = false;
            });
        }
      } else {
        if (mounted)
          setState(() {
            isKeyBoardShow = true;
          });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.only(top:30),
        child: Column(
          children: [
            Expanded(
              child: SingleChildScrollView(
                physics: BouncingScrollPhysics(),
                child: Column(
                  children: [
                    Stack(
                      children: [
                        videoWidget(
                          MediaQuery.of(context).size.width,
                          videoPlayerController != null
                              ? (MediaQuery.of(context).size.width) /
                                  videoPlayerController.value.aspectRatio
                              : MediaQuery.of(context).size.width / 2,
                          chapterList.length > chapterIndex
                              ? chapterList[chapterIndex].content.coverImg
                              : "",
                        ),
                        Container(
                          margin: EdgeInsets.only(
                              top: 40.h, left: 16.w, right: 16.w),
                          decoration: BoxDecoration(
                            color: Colors.transparent,
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              GestureDetector(
                                child: Image.asset(
                                  "assets/image/integral_return.png",
                                  width: 24,
                                  height: 24,
                                ),
                                onTap: () {
                                  Navigator.of(context).pop(
                                      course != null ? course.viewers + 1 : 0);
                                },
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                    Container(
                      height: 123,
                      margin: EdgeInsets.only(bottom: 16.h),
                      padding: EdgeInsets.only(left: 16, top: 16, right: 10),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withAlpha(12),
                            offset: Offset(0, 2),
                            blurRadius: 14,
                            spreadRadius: 0,
                          )
                        ],
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Container(
                                height: 22.h,
                                width: 40.w,
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(2),
                                  border: Border.all(
                                    width: 1,
                                    color: Color(0xFFFF7A1A),
                                    style: BorderStyle.solid,
                                  ),
                                ),
                                child: Text(
                                  (course?.tags != null &&
                                          course.tags.length > 0)
                                      ? course.tags[0]
                                      : "",
                                  style: TextStyle(
                                    fontSize: 14.sp,
                                    fontWeight: MyFontWeight.medium,
                                    color: Color(0xFFFF7A1A),
                                  ),
                                ),
                              ),
                              SizedBox(
                                width: 6.w,
                              ),
                              Expanded(
                                child: Text(
                                  course != null ? course.subject : "",
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 2,
                                  style: TextStyle(
                                    fontSize: 16.sp,
                                    fontWeight: MyFontWeight.semi_bold,
                                    color: Color(0xFF1A1A1A),
                                  ),
                                ),
                                flex: 1,
                              )
                            ],
                          ),
                          SizedBox(
                            height: 10.h,
                          ),
                          Padding(
                            padding: EdgeInsets.only(right: 16),
                            child: Row(
                              children: [
                                Expanded(
                                    child: Text(
                                  "讲师:${course != null ? course.author.name : ""}",
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 2,
                                  style: TextStyle(
                                    fontSize: 12.sp,
                                    fontWeight: MyFontWeight.regular,
                                    color: Colors.black,
                                  ),
                                )),
                                Text(
                                  "播放次数:",
                                  style: TextStyle(
                                    fontSize: 12.sp,
                                    fontWeight: MyFontWeight.regular,
                                    color: Color(0xFF808080),
                                  ),
                                ),
                                SizedBox(
                                  width: 4,
                                ),
                                Text(
                                  course != null
                                      ? course.viewers.toString()
                                      : "",
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 2,
                                  style: TextStyle(
                                    fontSize: 12.sp,
                                    fontWeight: MyFontWeight.regular,
                                    color: Color(0xFF808080),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 10.h,
                          ),
                          Text(
                            course != null ? course.introduce : "",
                            overflow: TextOverflow.ellipsis,
                            maxLines: 2,
                            style: TextStyle(
                              fontSize: 12.sp,
                              fontWeight: MyFontWeight.regular,
                              color: Colors.black,
                            ),
                          ),
                        ],
                      ),
                    ),
                    anthology(),
                    CommentList(
                      commentKey,
                      course?.likes ?? course?.likes ?? 0,
                      widget.arguments["id"],
                      3,
                      isKeyBoardShow,
                      _reply,
                      _delCommentTips,
                      12.sp,
                      requestApiFinish: (total) {
                        setState(() {
                          commentTotal = total;
                        });
                      },
                    ),
                    if (commentTotal == 0)
                      Container(
                        width: double.infinity,
                        alignment: Alignment.topCenter,
                        margin: EdgeInsets.only(top: 40),
                        padding: EdgeInsets.all(22.h),
                        child: Text(
                          S.of(context).zanwupinglun,
                          style: TextStyle(
                            fontSize: 12,
                            fontWeight: FontWeight.bold,
                            color: Color(0xFFA0A0A0),
                          ),
                        ),
                      ),
                  ],
                ),
              ),
              flex: 1,
            ),

            /// 富文本评论的输入框
            InputComment(
              inputKey,
              hintText,
              isKeyBoardShow,
              commentFocus,
              commentTextController,
              _toComment,
              _queryMemberComment,
              _queryCourseLikes,
              isLike: course?.selfLiked,
            ),
          ],
        ),
      ),
    );
  }

  initVideo(videoUrl) async {
    videoPlayerController = VideoPlayerController.network(
      videoUrl,
    )..initialize().then((value) {
        chewieAudioController = ChewieController(
          videoPlayerController: videoPlayerController,
          aspectRatio: videoPlayerController.value.aspectRatio,
          //宽高比
          autoPlay: false,
          //自动播放
          looping: false,
          //循环播放
          allowFullScreen: true,
          // 拖动条样式颜色
          materialProgressColors: chewie.ChewieProgressColors(
            playedColor: Colors.white,
            handleColor: Colors.white,
            backgroundColor: Colors.grey,
            bufferedColor: Colors.transparent,
          ),
          autoInitialize: true,
        );
        chewieAudioController.addListener(_fullScreenListener);
        if (mounted) setState(() {});
      });
  }

  bool tempDelayedFlag = false;

  Future<void> _fullScreenListener() async {
    if (!chewieAudioController.isFullScreen && !tempDelayedFlag) {
      tempDelayedFlag = true;
      SystemChrome.setPreferredOrientations(
          [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
      setState(() {});
      SystemChrome.setPreferredOrientations(
          [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
      Future.delayed(Duration(seconds: 1), () {
        SystemChrome.setPreferredOrientations(
            [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
        setState(() {
          tempDelayedFlag = false;
        });
      });
    }
  }

  Widget videoWidget(double width, double height, src) {
    print("src :  $src");
    return MediaQuery(
        data: MediaQuery.of(context).copyWith(
          textScaleFactor: 0.9,
        ),
        child: Stack(children: [
          (chewieAudioController != null
              ? Container(
            color: Colors.black,
                  width: width,
                  // height:
                  height: width / 7 * 5,
                  child: chewies = Chewie(
                    controller: chewieAudioController,
                  ),
                )
              : Container(
                  width: width,
                  height: height,
                )),
          if (isShowImg)
            GestureDetector(
              onTap: () {
                setState(() {
                  isShowImg = false;
                  if (chewieAudioController != null)
                    chewieAudioController.play();
                });
              },
              child: Container(
                width: width,
                height: width / 7 * 5,
                color: Colors.black,
                child: Stack(
                  children: [
                    Center(
                      child: MImage(
                        src,
                        fit: BoxFit.cover,
                        errorSrc: "assets/image/default_2_1.png",
                        fadeSrc: "assets/image/default_2_1.png",
                      ),
                    ),
                    Center(
                      child: Icon(
                        Icons.play_circle_outline,
                        color: Colors.white,
                        size: 60,
                      ),
                    ),
                  ],
                ),
              ),
            ),
        ]));
  }

  Widget anthology() {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.only(bottom: 16),
      padding: EdgeInsets.all(16),
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                "选集",
                style: TextStyle(
                  fontSize: 15.sp,
                  fontWeight: MyFontWeight.medium,
                  color: Color(0xFF1A1A1A),
                ),
              ),
              Text(
                "共${chapterList.length}集",
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: MyFontWeight.regular,
                  color: Color(0xFF1A1A1A),
                ),
              ),
            ],
          ),
          Container(
            height: 70.h,
            margin: EdgeInsets.only(top: 10),
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              physics: BouncingScrollPhysics(),
              itemCount: chapterList.length,
              itemBuilder: (context, position) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      chapterIndex = position;
                      isShowImg = true;
                      if (chewieAudioController != null)
                        chewieAudioController.pause();
                      initVideo(chapterList[position].content.fileUrl);
                    });
                  },
                  child: classSelectItem(chapterList[position], position),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget classSelectItem(Chapter chapterList, position) {
    return Container(
      width: 106.w,
      alignment: Alignment.center,
      margin: EdgeInsets.symmetric(
        horizontal: 6.w,
        vertical: 3,
      ),
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4),
        color: position == chapterIndex ? Color(0xFF32A060) : Color(0xFFE5E5E5),
      ),
      child: Text(
        chapterList?.name ?? chapterList.name ?? "",
        style: TextStyle(
          fontSize: 12.sp,
          fontWeight: MyFontWeight.regular,
          color: position == chapterIndex ? Colors.white : Color(0xFF7C7C7C),
        ),
      ),
    );
  }

  ///课程点赞
  _queryCourseLikes() async {
    BaseData baseData = await apiService
        .courseLikes(widget.arguments["id"])
        .catchError((onError) {});
    if (baseData != null && baseData.isSuccess) {
      setState(() {
        if (course.selfLiked ?? false)
          course.likes -= 1;
        else
          course.likes += 1;
        course.selfLiked = !course.selfLiked ?? false;
      });
      commentKey.currentState.setState(() {});
    } else {
      // SmartDialog.showToast(baseData.msg, alignment: Alignment.center);
    }
  }

  ///发布评论
  _queryMemberComment(String content) async {
    BaseData baseData = await apiService.memberComment({
      "content": content,
      "parentId": parenId,
      "relationalId": widget.arguments["id"],
      "relationalType": 3
    }).catchError((error) {});
    if (baseData != null && baseData.isSuccess) {
      CommentListState state = commentKey.currentState;
      state.queryMemberCommentList();
      commentTextController.text = "";
      FocusScope.of(context).unfocus();
      // _toComment();
    }
  }

  ///滑动到评论列表
  _toComment() {
    if (commentKey.currentContext == null) return;
    RenderBox firstRenderBox = commentKey.currentContext.findRenderObject();
    Offset first = firstRenderBox.localToGlobal(Offset.zero);
    scrollController.animateTo(
      first.dy +
          scrollController.offset -
          (kToolbarHeight + MediaQuery.of(context).padding.top),
      duration: Duration(milliseconds: 300),
      curve: Curves.easeIn,
    );
  }

  ///评论 回复
  _reply(memberComment) {
    FocusScope.of(context).requestFocus(commentFocus);
    parenId = memberComment.id;
    hintText = S.of(context).huifu_("${memberComment.username}");
  }

  ///删除评论
  delComment(memberComment) async {
    BaseData baseData = await apiService.delComment(memberComment.id);
    if (baseData != null && baseData.isSuccess) {
      CommentListState state = commentKey.currentState;
      state.queryMemberCommentList();
    }
  }

  ///删除评论的提示
  _delCommentTips(memberComment) {
    SmartDialog.show(widget: Tips(() {
      delComment(memberComment);
    }));
  }
}