yanyy/flutter_kinetra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：详情推荐，首页悬浮小视频卡片，5s自动隐藏

Browse Source
This commit is contained in:
pengtao 2025-10-14 16:02:11 +08:00
parent be0d7eae45
commit bcdce80889
9 changed files with 524 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/home_bottom_video.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
assets/video_recommend_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 274 KiB

BIN
assets/video_recommend_btn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
assets/video_recommend_play.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 617 B

84
lib/kt_pages/kt_home/view.dart
View File

@ -66,6 +66,87 @@ class _KtHomePageState extends State<KtHomePage>
),
),
),
// 悬浮小视频卡片
if (state.showVideo && state.curVideo != null)
Positioned(
bottom: 2.w,
right: 15.w,
child: GestureDetector(
onTap: () => Get.toNamed(
KtRoutes.shortVideo,
arguments: {
'shortPlayId': state.curVideo?.shortPlayId,
'imageUrl': state.curVideo?.imageUrl ?? '',
},
),
child: Container(
width: 345.w,
height: 40.w,
padding: EdgeInsets.only(right: 10.w),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20.w),
),
child: Row(
children: [
Container(
width: 40.w,
height: 40.w,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('home_bottom_video.png'.ktIcon),
fit: BoxFit.fill,
),
),
child: Center(
child: KtNetworkImage(
imageUrl: state.curVideo?.imageUrl ?? '',
width: 30.w,
height: 30.w,
borderRadius: BorderRadius.circular(15.w),
),
),
),
SizedBox(width: 8.w),
Container(
constraints: BoxConstraints(maxWidth: 160.w),
child: Text(
state.curVideo?.name ?? '',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w400,
color: Color(0xFF1E1E20),
),
),
),
SizedBox(width: 20.w),
Text(
'Ep.${state.curVideo?.process}',
style: TextStyle(
fontSize: 12.sp,
fontWeight: FontWeight.w400,
color: Color(0xFF94949B),
),
),
const Spacer(),
Image.asset(
'ic_home_play.png'.ktIcon,
width: 24.w,
height: 24.w,
),
SizedBox(width: 14.w),
Image.asset(
'ic_home_eposide.png'.ktIcon,
width: 24.w,
height: 24.w,
),
],
),
),
),
),
],
);
},
@ -1098,8 +1179,7 @@ class _KtHomePageState extends State<KtHomePage>
height: 127.w,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
video.name ?? '',

3
lib/kt_pages/kt_main_page/view.dart
View File

@ -95,6 +95,7 @@ class _KtMainPageState extends State<KtMainPage>
itemCount: _tabsTitle.length,
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.white,
selectedItemColor: Color(0xFF1E1E20),
selectedLabelStyle: TextStyle(
fontSize: 10.sp,
@ -102,7 +103,7 @@ class _KtMainPageState extends State<KtMainPage>
),
unselectedLabelStyle: TextStyle(
fontSize: 10.sp,
color: Color(0xFF95959C),
color: Color(0xFF94949B),
fontWeight: FontWeight.w400,
),
type: BottomNavigationBarType.fixed,

301
lib/kt_pages/kt_short_video/logic.dart
View File

@ -1,12 +1,15 @@
import 'package:easy_debounce/easy_throttle.dart';
import 'dart:io';
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter_kinetra/kt_pages/kt_mine/logic.dart';
import 'package:flutter_kinetra/kt_pages/kt_short_video/state.dart';
import 'package:flutter_kinetra/kt_utils/kt_string_extend.dart';
import 'package:flutter_kinetra/kt_utils/kt_toast_utils.dart';
import 'package:flutter_kinetra/kt_pages/kt_home/logic.dart';
import 'package:flutter_kinetra/kt_pages/kt_my_list/logic.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:video_player/video_player.dart';
@ -14,10 +17,13 @@ import 'package:video_player/video_player.dart';
import '../../dio_cilent/kt_apis.dart';
import '../../dio_cilent/kt_request.dart';
import '../../kt_model/kt_video_detail_bean.dart';
import '../../kt_model/kt_short_video_bean.dart';
import '../../kt_utils/kt_device_info_utils.dart';
import '../../kt_widgets/kt_status_widget.dart';
import '../../kt_widgets/kt_store_widget.dart';
import '../../kt_widgets/kt_dialog.dart';
import '../kt_mine/kt_store/logic.dart';
import '../../kt_widgets/kt_network_image.dart';
class VideoPlayLogic extends GetxController {
final state = VideoPlayState();
@ -30,6 +36,9 @@ class VideoPlayLogic extends GetxController {
bool _disposed = false;
final userLogic = Get.put(KtMineLogic());
final mylistLogic = Get.put(MyListLogic());
final mylistState = Get.find<MyListLogic>().state;
@override
void onInit() {
super.onInit();
@ -45,16 +54,44 @@ class VideoPlayLogic extends GetxController {
state.imageUrl = Get.arguments['imageUrl'] ?? '';
state.activityId = Get.arguments['activityId'];
state.isFromDiscover = Get.arguments['isFromDiscover'] ?? false;
startTimer();
fetchData();
getRecommend();
startVideoTimer();
}
@override
void onClose() {
_disposed = true;
clearCacheCtrl();
state.timer?.cancel();
state.videotimer?.cancel();
super.onClose();
}
// 推荐点击
initData(shortPlayId, imageUrl) {
uploadHistorySeconds(
controllers[currentIndex]?.value.position.inMilliseconds ?? 0,
);
Get.back();
state.shortPlayId = shortPlayId;
state.videoId = 0;
state.imageUrl = imageUrl;
state.isRecommend = false;
// pageController.dispose();
currentIndex = 0;
pageController.jumpToPage(currentIndex);
// pageController = PageController(initialPage: currentIndex);
clearCacheCtrl();
fetchData();
state.recommendList.clear();
getRecommend();
startTimer();
startVideoTimer();
}
clearCacheCtrl() {
for (var controller in controllers) {
controller?.pause();
@ -123,6 +160,37 @@ class VideoPlayLogic extends GetxController {
}
}
// 5s之后返回推荐
void startTimer() {
state.timer = Timer(const Duration(seconds: 5), () {
state.isRecommend = true;
update();
});
}
// 5s 之后隐藏控制器
void startVideoTimer() {
state.videotimer?.cancel();
state.videotimer = Timer(const Duration(seconds: 5), () {
state.isVideoctrHide = true;
update();
});
}
// 获取推荐列表
getRecommend() async {
ApiResponse res = await KtHttpClient().request(
KtApis.getDetailsRecommand,
method: HttpMethod.get,
);
if (res.success) {
state.recommendList = [
...res.data['list'].map((item) => KtShortVideoBean.fromJson(item)),
];
update();
}
}
void reportHistory() {
if (currentIndex < 0 || currentIndex >= state.episodeList.length) return;
Map<String, dynamic> params = {
@ -141,6 +209,19 @@ class VideoPlayLogic extends GetxController {
KtHttpClient().request(KtApis.activeAfterWatchingVideo, data: params);
}
void updateHomeVideo() {
final homeLogic = Get.put(KtHomeLogic());
final homeState = Get.find<KtHomeLogic>().state;
int playTime = controllers[currentIndex]?.value.position.inSeconds ?? 0;
homeState.curVideo = KtShortVideoBean()
..shortPlayId = state.shortPlayId
..imageUrl = state.video?.shortPlayInfo?.imageUrl
..name = state.video?.shortPlayInfo?.name
..playTime = playTime
..process = currentIndex + 1;
homeLogic.update();
}
// 切换剧集时处理视频状态
Future<void> onPageChanged(
int index, {
@ -200,7 +281,7 @@ class VideoPlayLogic extends GetxController {
}
}
controllers[index]?.setPlaybackSpeed(state.currentSpeed);
// updateHomeVideo();
updateHomeVideo();
// print('----curIndex:$currentIndex');
// 预加载新的相邻视频，并释放多余控制器
_preloadAdjacentVideos();
@ -241,7 +322,8 @@ class VideoPlayLogic extends GetxController {
try {
await controller.initialize();
if (index == currentIndex && (episode.isLock == false || userLogic.state.userInfo.isVip == true)) {
if (index == currentIndex &&
(episode.isLock == false || userLogic.state.userInfo.isVip == true)) {
controller.play();
update();
}
@ -251,7 +333,7 @@ class VideoPlayLogic extends GetxController {
if (currentIndex == index && !_disposed) update();
if (currentIndex == state.episodeList.length - 1 &&
(controllers.last?.value.isCompleted ?? false)) {
// showRecommendDialog();
showRecommendDialog();
}
if (controller.value.isCompleted && !controller.value.isBuffering) {
onPageChanged(index + 1, isToggle: true);
@ -291,20 +373,21 @@ class VideoPlayLogic extends GetxController {
Future<void> likeVideo() async {
if (state.video == null) return;
Map<String, dynamic> params = {
"short_play_id": state.video?.shortPlayInfo?.shortPlayId,
"video_id": state.episodeList[currentIndex].id,
};
if (state.video?.shortPlayInfo?.isCollect ?? false) {
await KtHttpClient().request(KtApis.deleteFavoriteVideo, data: params);
// await KtHttpClient().request(KtApis.deleteFavoriteVideo, data: params);
cancelCollect(state.video!.shortPlayInfo!.shortPlayId!);
} else {
await KtHttpClient().request(KtApis.collectVideo, data: params);
state.video?.shortPlayInfo?.isCollect =
!(state.video?.shortPlayInfo?.isCollect ?? false);
update();
mylistLogic.getCollectList(refresh: true);
mylistLogic.getHistoryList(refresh: true);
}
state.video?.shortPlayInfo?.isCollect =
!(state.video?.shortPlayInfo?.isCollect ?? false);
update();
}
// 购买剧集
@ -428,4 +511,202 @@ class VideoPlayLogic extends GetxController {
),
);
}
cancelCollect(num id) async {
Get.dialog(
KtDialog(
title: 'Remove from your list?',
subTitle: 'This drama will be removed from your saved list.',
rightBtnText: 'Remove',
rightBtnIcon: 'ic_dialog_delete.png',
rightBtnFunc: () async {
ApiResponse res = await KtHttpClient().request(
KtApis.deleteFavoriteVideo,
queryParameters: {'short_play_id': id},
);
if (res.success) {
state.video?.shortPlayInfo?.isCollect =
!(state.video?.shortPlayInfo?.isCollect ?? false);
update();
// state.favoriteList.removeWhere((item) => id == item.shortPlayId);
mylistState.chestList.removeWhere((item) => id == item.shortPlayId);
mylistState.historyList
.firstWhereOrNull((item) => id == item.shortPlayId)
?.isCollect =
0;
mylistLogic.update();
}
},
),
);
}
showRecommendDialog() {
EasyThrottle.throttle('show-recommend', Duration(seconds: 3), () async {
controllers[currentIndex]?.pause();
Get.bottomSheet(
isScrollControlled: true,
isDismissible: false,
enableDrag: false,
Stack(
children: [
Positioned(
top: ScreenUtil().statusBarHeight + 10.w,
left: 16.w,
child: GestureDetector(
onTap: () {
EasyThrottle.throttle(
'back-recommend',
Duration(seconds: 3),
() async {
Get.back();
Get.back();
},
);
},
child: Image.asset('ic_back_white.png'.ktIcon, width: 24.w),
),
),
Positioned(
bottom: 0,
left: 0,
child: Container(
height: 503.w,
width: ScreenUtil().screenWidth,
padding: EdgeInsets.fromLTRB(0.w, 75.w, 0.w, 20.w),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('video_recommend_bg.png'.ktIcon),
fit: BoxFit.fill,
),
),
child: Column(
children: [
Row(
children: [
SizedBox(width: 15.w),
Image.asset('ip.png'.ktIcon, width: 38.w, height: 40.w),
SizedBox(width: 6.w),
Container(
height: 30.w,
padding: EdgeInsets.symmetric(horizontal: 14.w),
decoration: BoxDecoration(
color: Color(0xFF1E1E20),
borderRadius: BorderRadius.circular(15.w),
),
child: Center(
child: Text(
'More Drama Gold Below!',
style: TextStyle(
color: Color(0xFFA7F62F),
fontSize: 16.sp,
fontWeight: FontWeight.w500,
),
),
),
),
],
),
SizedBox(
height: 290.w,
child: Swiper(
layout: SwiperLayout.CUSTOM,
customLayoutOption:
CustomLayoutOption(startIndex: -1, stateCount: 3)
..addRotate([-20.0 / 180, 0.0, 20.0 / 180])
..addTranslate([
Offset(-220.w, 0),
Offset(0, 0),
Offset(220.w, 0),
]),
itemWidth: 190.w,
itemHeight: 226.w,
itemBuilder: (context, index) {
final item =
state.recommendList[index %
state.recommendList.length];
return GestureDetector(
onTap: () {
initData(
state.recommendList[index].shortPlayId ?? -1,
state.recommendList[index].imageUrl ?? '',
);
},
child: KtNetworkImage(
imageUrl: item.imageUrl ?? '',
width: 190.w,
height: 226.w,
borderRadius: BorderRadius.circular(20.w),
),
);
},
itemCount: state.recommendList.length,
loop: true,
autoplay: true,
onIndexChanged: (index) => state.recommendIndex = index,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
initData(
state
.recommendList[state.recommendIndex]
.shortPlayId ??
-1,
state
.recommendList[state.recommendIndex]
.imageUrl ??
'',
);
},
child: Container(
width: 280.w,
height: 64.w,
padding: EdgeInsets.only(bottom: 16.w),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'video_recommend_btn.png'.ktIcon,
),
fit: BoxFit.cover,
),
),
child: Container(
height: 48.w,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'video_recommend_play.png'.ktIcon,
width: 18.w,
height: 18.w,
),
SizedBox(width: 4.w),
Text(
'watch now',
style: TextStyle(
color: Colors.black,
fontSize: 14.sp,
fontWeight: FontWeight.w500,
),
),
],
),
),
),
),
],
),
],
),
),
),
],
),
);
});
}
}

13
lib/kt_pages/kt_short_video/state.dart
View File

@ -1,9 +1,12 @@
import 'dart:async';
import 'package:flutter/material.dart';
import '../../kt_model/kt_video_detail_bean.dart';
import '../../kt_widgets/kt_status_widget.dart';
import '../../kt_model/kt_short_video_bean.dart';
class VideoPlayState {
String imageUrl = '';
int shortPlayId = -1;
num shortPlayId = -1;
num videoId = -1;
int curUnlock = 999;
int? activityId;
@ -15,4 +18,12 @@ class VideoPlayState {
int currentVideoIndex = 0;
double currentSpeed = 1.0;
final List<double> speedList = [0.75, 1.0, 1.25, 1.5, 2.0, 3.0];
List<KtShortVideoBean> recommendList = [];
int recommendIndex = 0;
bool isRecommend = false;
Timer? timer;
bool isVideoctrHide = false;
Timer? videotimer;
}

250
lib/kt_pages/kt_short_video/view.dart
View File

@ -32,6 +32,7 @@ class _VideoPlayPageState extends State<VideoPlayPage>
@override
void initState() {
state.imageUrl = Get.arguments['imageUrl'] ?? '';
// state.isFromRecommend = Get.arguments['isFromRecommend'] ?? false;
super.initState();
}
@ -54,9 +55,16 @@ class _VideoPlayPageState extends State<VideoPlayPage>
return PopScope(
canPop: true,
onPopInvokedWithResult: (didPop, result) async {
// if (logic.controllers.isNotEmpty) {
// logic.uploadHistorySeconds(logic.controllers[logic.currentIndex]?.value.position.inMilliseconds ?? 0);
// }
if (logic.controllers.isNotEmpty) {
logic.uploadHistorySeconds(
logic
.controllers[logic.currentIndex]
?.value
.position
.inMilliseconds ??
0,
);
}
if (didPop) return;
},
child: Scaffold(
@ -206,9 +214,22 @@ class _VideoPlayPageState extends State<VideoPlayPage>
GestureDetector(
onTap: () {
if (episode.isLock == true) return;
(controller?.value.isPlaying ?? true)
? controller?.pause()
: controller?.play();
if (controller?.value.isPlaying ?? true) {
if (state.isVideoctrHide) {
state.isVideoctrHide = false;
logic.startVideoTimer();
} else {
controller?.pause();
state.videotimer?.cancel();
}
} else {
logic.startVideoTimer();
controller?.play();
}
// (controller?.value.isPlaying ?? true)
// ? controller?.pause()
// : controller?.play();
setState(() {});
},
child: Container(
@ -298,123 +319,126 @@ class _VideoPlayPageState extends State<VideoPlayPage>
),
],
),
// 顶部返回
Positioned(
top: ScreenUtil().statusBarHeight + 10.w,
left: 16.w,
child: GestureDetector(
onTap: () {
// if (state.isFromRecommend || state.recommendList.isEmpty) {
Get.back();
// } else {
// logic.showRecommendDialog();
// }
},
child: Image.asset('ic_back_white.png'.ktIcon, width: 24.w),
),
),
// 底部控制器
Positioned(
bottom: 0,
left: 0.w,
child: Container(
width: ScreenUtil().screenWidth,
padding: EdgeInsets.fromLTRB(15.w, 40.w, 15.w, 40.w),
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF001D1F).withValues(alpha: 0),
Color(0xFF001D1F),
],
),
if (!state.isVideoctrHide) ...[
// 顶部返回
Positioned(
top: ScreenUtil().statusBarHeight + 10.w,
left: 16.w,
child: GestureDetector(
onTap: () {
if (!state.isRecommend || state.recommendList.isEmpty) {
Get.back();
} else {
logic.showRecommendDialog();
}
},
child: Image.asset('ic_back_white.png'.ktIcon, width: 24.w),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: ScreenUtil().screenWidth - 100.w,
child: Text(
state.video?.shortPlayInfo?.name ?? '',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16.sp,
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
),
// 底部控制器
Positioned(
bottom: 0,
left: 0.w,
child: Container(
width: ScreenUtil().screenWidth,
padding: EdgeInsets.fromLTRB(15.w, 40.w, 15.w, 40.w),
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF001D1F).withValues(alpha: 0),
Color(0xFF001D1F),
],
),
if (logic.controllers[index] != null)
CustomVideoProgressBar(
controller: logic.controllers[index]!,
width: ScreenUtil().screenWidth,
),
SizedBox(height: 16.w),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: showEpSelDialog,
child: Container(
width: 300.w,
padding: EdgeInsets.symmetric(
horizontal: 12.w,
vertical: 9.w,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.w),
color: Colors.white.withValues(alpha: .1),
),
child: Row(
children: [
Image.asset('ic_ep.png'.ktIcon, width: 16.sp),
SizedBox(width: 6.w),
Text(
'EP.${index + 1}',
style: TextStyle(
fontSize: 13.sp,
color: Colors.white,
),
),
const Spacer(),
Text(
'All ${state.video?.shortPlayInfo?.episodeTotal ?? 0} Episodes',
style: TextStyle(
fontSize: 13.sp,
color: Colors.white,
),
),
],
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: ScreenUtil().screenWidth - 100.w,
child: Text(
state.video?.shortPlayInfo?.name ?? '',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16.sp,
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
GetBuilder<VideoPlayLogic>(
id: 'video-like',
builder: (c) {
return GestureDetector(
onTap: () => logic.likeVideo(),
child: Column(
),
if (logic.controllers[index] != null)
CustomVideoProgressBar(
controller: logic.controllers[index]!,
width: ScreenUtil().screenWidth,
),
SizedBox(height: 16.w),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: showEpSelDialog,
child: Container(
width: 300.w,
padding: EdgeInsets.symmetric(
horizontal: 12.w,
vertical: 9.w,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.w),
color: Colors.white.withValues(alpha: .1),
),
child: Row(
children: [
Image.asset(
state.video?.shortPlayInfo?.isCollect == true
? 'ic_collect_sel.png'.ktIcon
: 'ic_collect_unsel.png'.ktIcon,
width: 32.w,
Image.asset('ic_ep.png'.ktIcon, width: 16.sp),
SizedBox(width: 6.w),
Text(
'EP.${index + 1}',
style: TextStyle(
fontSize: 13.sp,
color: Colors.white,
),
),
const Spacer(),
Text(
'All ${state.video?.shortPlayInfo?.episodeTotal ?? 0} Episodes',
style: TextStyle(
fontSize: 13.sp,
color: Colors.white,
),
),
],
),
);
},
),
],
),
],
),
),
GetBuilder<VideoPlayLogic>(
id: 'video-like',
builder: (c) {
return GestureDetector(
onTap: () => logic.likeVideo(),
child: Column(
children: [
Image.asset(
state.video?.shortPlayInfo?.isCollect == true
? 'ic_collect_sel.png'.ktIcon
: 'ic_collect_unsel.png'.ktIcon,
width: 32.w,
),
],
),
);
},
),
],
),
],
),
),
),
),
],
],
);
}