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_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;
  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(
        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: 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,
                    widget.arguments["id"],
                    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,
              _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),
        ),
      ),
    );
  }

  ///给文章/活动点赞
  _queryInformationLikes() async {
    BaseData baseData = await apiService.informationLikes(widget.arguments["id"]);
    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":widget.arguments["id"],
      "relationalType": 1
    }).catchError((error) {});
    if (baseData != null && baseData.isSuccess) {
      CommentListState state = commentKey.currentState;
      state.queryMemberCommentList();
      commentTextController.text = "";
      FocusScope.of(context).unfocus();
    }
  }

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