You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
635 lines
20 KiB
635 lines
20 KiB
3 years ago
|
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);
|
||
|
}));
|
||
|
}
|
||
|
}
|