huixiang_app/lib/community/community_view/class_details.dart

import 'package:chewie/chewie.dart';
import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.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/data/member_comment_list.dart';
import 'package:huixiang/retrofit/data/page.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 _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;
  List<MemberCommentList> memberList = [];
  final GlobalKey inputKey = GlobalKey();
  final TextEditingController commentTextController = TextEditingController();
  int commentTotal = 0;
  double commentHeight = 60.h;
  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(
        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: Icon(
                            Icons.arrow_back_ios,
                            color: Colors.white,
                            size: 24,
                          ),
                          onTap: () {
                            Navigator.of(context).pop();
                          },
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              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(
                            "播放次数",
                            overflow: TextOverflow.ellipsis,
                            maxLines: 2,
                            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,
                course?.id ?? course?.id ??"",
                isKeyBoardShow,
                _reply,
                _delCommentTips,
                12.sp,
              ),
              if (memberList == null || memberList.length == 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),
                    ),
                  ),
                ),
              /// 富文本评论的输入框
              InputComment(
                inputKey,
                hintText,
                isKeyBoardShow,
                commentFocus,
                commentTextController,
                _toComment,
                _queryMemberComment,
                _queryInformationLikes,
                isLike: false,
              ),
            ],
          ),
        ),
      ),
    );
  }

  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(() {});
    });
  }

  Future<void> _fullScreenListener() async {
    if (!chewieAudioController.isFullScreen) {
      Future.delayed(Duration(seconds: 1), () {
      });
    }
  }

  Widget videoWidget(double width, double height, src) {
    print("src :  $src");
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(
        textScaleFactor: 0.9,
      ),
      child: !isShowImg
          ? (chewieAudioController != null
          ? Container(
        width: width,
        height: height,
        child: chewies = Chewie(
          controller: chewieAudioController,
        ),
      )
          : Container(
        width: width,
        height: height,
      ))
          : GestureDetector(
        onTap: (){
          setState(() {
            isShowImg = false;
          });
        },
        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;
                      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),
        ),
      ),
    );
  }

  contentHeight() {
    double contentHeight = MediaQuery
        .of(context)
        .size
        .height -
        kToolbarHeight -
        MediaQuery
            .of(context)
            .padding
            .top -
        160.h;
    if ((contentHeight - 60.h) > (128.h * memberList.length)) {
      commentHeight = contentHeight - (128.h * memberList.length);
    }
  }

  ///给文章/活动点赞
  _queryInformationLikes() async {
    BaseData baseData = await apiService.informationLikes("1455102859841372160");
    if (baseData != null && baseData.isSuccess) {
      commentKey.currentState.setState(() {});
      setState(() {
        // if (comunity.selfLike ?? false)
        //   comunity.likes -= 1;
        // else
        //   comunity.likes += 1;
        // comunity.selfLike = !comunity.selfLike ?? false;
      });
    } else {
      // SmartDialog.showToast(baseData.msg, alignment: Alignment.center);
    }
  }

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

  ///评论列表
  _queryMemberCommentList() async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    if (apiService == null)
      apiService = ApiService(
        Dio(),
        context: context,
        token: sharedPreferences.getString("token"),
        showLoading: false,
      );
    BaseData<PageInfo<MemberCommentList>> baseData =
    await apiService.memberCommentList({
      "pageNum": 1,
      "pageSize": 100,
      "relationalId":course.id,
      "relationalType": 1,
    }).catchError((error) {});
    if (baseData != null && baseData.isSuccess) {
      commentTotal = baseData.data.size;
      memberList = baseData.data.list;
      contentHeight();
      if (mounted) setState(() {});
    }
  }

  ///滑动到评论列表
  _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);
    }));
  }
}