video_detail_page.dart 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  1. import 'dart:io';
  2. import 'package:better_player_plus/better_player_plus.dart';
  3. import 'package:flutter/material.dart';
  4. import 'package:flutter_riverpod/flutter_riverpod.dart';
  5. import 'package:flutter_screenutil/flutter_screenutil.dart';
  6. import 'package:go_router/go_router.dart';
  7. import 'package:news_app/constant/config.dart';
  8. import 'package:news_app/constant/size_res.dart';
  9. import 'package:news_app/extension/base.dart';
  10. import 'package:news_app/model/video_new_model.dart';
  11. import 'package:news_app/ui/video/comment_page.dart';
  12. import 'package:news_app/ui/video/video_recommend_list_page.dart';
  13. import 'package:news_app/util/device_util.dart';
  14. import 'package:news_app/util/log.util.dart';
  15. import 'package:news_app/util/share_util.dart';
  16. import 'package:news_app/widget/my_txt.dart';
  17. import '../../constant/color_res.dart';
  18. import '../../provider/video_detail_provider.dart';
  19. import '../../util/theme_util.dart';
  20. import '../../widget/auth_gesture_detector.dart';
  21. import '../../widget/load_image.dart';
  22. /// @author: bo.zeng
  23. /// @email: cnhbwds@gmail.com
  24. /// @date: 2025 2025/4/9 16:00
  25. /// @description:
  26. class VideoParam {
  27. final String id;
  28. final String? videoUrl;
  29. VideoParam({required this.id, this.videoUrl});
  30. }
  31. class VideoDetailPage extends ConsumerStatefulWidget {
  32. final VideoParam param;
  33. const VideoDetailPage({super.key, required this.param});
  34. @override
  35. ConsumerState<VideoDetailPage> createState() => _VideoDetailPageState();
  36. }
  37. final videoDetailProvider =
  38. NotifierProvider<VideoDetailProvider, VideoNewModel>(
  39. () => VideoDetailProvider(),
  40. );
  41. class _VideoDetailPageState extends ConsumerState<VideoDetailPage>
  42. with WidgetsBindingObserver {
  43. BetterPlayerController? _betterPlayerController;
  44. ProviderSubscription? subscription;
  45. bool _isWeChatInstalled = false;
  46. Future<void> _checkWeChatInstallation() async {
  47. if (Platform.isAndroid) {
  48. final installed = await isWeChatInstalledOnlyAndroid();
  49. setState(() => _isWeChatInstalled = installed);
  50. } else if (Platform.isIOS) {
  51. final installed = await fluwx.isWeChatInstalled;
  52. setState(() => _isWeChatInstalled = installed);
  53. }
  54. }
  55. Future<void> shareAction(VideoNewModel data) async {
  56. showModalBottomSheet(
  57. context: context,
  58. builder:
  59. (context) => SafeArea(
  60. child: Column(
  61. mainAxisSize: MainAxisSize.min,
  62. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  63. children: [
  64. SizedBox(height: 10.h),
  65. Container(
  66. width: double.infinity,
  67. height: 80.h,
  68. decoration: BoxDecoration(
  69. borderRadius: BorderRadius.only(
  70. topLeft: Radius.circular(10.r),
  71. topRight: Radius.circular(10.r),
  72. ),
  73. color: Colors.white,
  74. ),
  75. child: Row(
  76. crossAxisAlignment: CrossAxisAlignment.center,
  77. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  78. children: [
  79. if (_isWeChatInstalled)
  80. GestureDetector(
  81. onTap: () {
  82. Navigator.pop(context);
  83. shareWeiXinUrl(
  84. title: data.shareDesc ?? "",
  85. url: data.shareUrl ?? "",
  86. );
  87. },
  88. child: Container(
  89. width: 100.w,
  90. height: 80.h,
  91. child: Column(
  92. crossAxisAlignment: CrossAxisAlignment.center,
  93. mainAxisAlignment: MainAxisAlignment.center,
  94. children: [
  95. LoadAssetImage(
  96. 'share_wxhy',
  97. width: 40.w,
  98. height: 40.h,
  99. ),
  100. SizedBox(height: 10.h),
  101. myTxt(
  102. text: "微信好友",
  103. color: Colors.black,
  104. fontSize: 12.sp,
  105. fontWeight: FontWeight.bold,
  106. ),
  107. ],
  108. ),
  109. ),
  110. ),
  111. if (_isWeChatInstalled)
  112. GestureDetector(
  113. onTap: () {
  114. Navigator.pop(context);
  115. shareWeiXinPYUrl(
  116. title: data.shareDesc ?? "",
  117. url: data.shareUrl ?? "",
  118. );
  119. },
  120. child: Container(
  121. width: 100.w,
  122. height: 80.h,
  123. child: Column(
  124. mainAxisAlignment: MainAxisAlignment.center,
  125. children: [
  126. LoadAssetImage(
  127. 'share_pyq',
  128. width: 40.w,
  129. height: 40.h,
  130. ),
  131. SizedBox(height: 10.h),
  132. myTxt(
  133. text: "朋友圈",
  134. color: Colors.black,
  135. fontSize: 12.sp,
  136. fontWeight: FontWeight.bold,
  137. ),
  138. ],
  139. ),
  140. ),
  141. ),
  142. GestureDetector(
  143. onTap: () {
  144. Navigator.pop(context);
  145. shareUrl(
  146. title: data.shareDesc ?? "",
  147. url: data.shareUrl ?? "",
  148. );
  149. },
  150. child: Container(
  151. width: 100.w,
  152. height: 80.h,
  153. child: Column(
  154. mainAxisAlignment: MainAxisAlignment.center,
  155. children: [
  156. LoadAssetImage(
  157. 'share_xtfx',
  158. width: 40.w,
  159. height: 40.h,
  160. ),
  161. SizedBox(height: 10.h),
  162. myTxt(
  163. text: "系统分享",
  164. color: Colors.black,
  165. fontSize: 12.sp,
  166. fontWeight: FontWeight.bold,
  167. ),
  168. ],
  169. ),
  170. ),
  171. ),
  172. ],
  173. ),
  174. ),
  175. ],
  176. ),
  177. ),
  178. );
  179. }
  180. @override
  181. void dispose() {
  182. _betterPlayerController?.pause();
  183. _betterPlayerController?.dispose();
  184. subscription?.close();
  185. super.dispose();
  186. }
  187. @override
  188. void initState() {
  189. super.initState();
  190. consoleLog("VideoDetailPage: initState called, param.id = ${widget.param.id}");
  191. setImmersiveStatusBar();
  192. _checkWeChatInstallation();
  193. ref.read(videoDetailProvider.notifier).fetchVideoDetail(widget.param.id);
  194. if (widget.param.videoUrl?.isNotEmpty == true) {
  195. consoleLog("VideoDetailPage: videoUrl from param = ${widget.param.videoUrl}");
  196. _initPlayer(widget.param.videoUrl);
  197. } else {
  198. consoleLog("VideoDetailPage: videoUrl not in param, waiting for provider");
  199. subscription = ref.listenManual(videoDetailProvider, (pre, next) {
  200. consoleLog("VideoDetailPage: provider updated, url = ${next.url}");
  201. if (pre?.url != next.url && next.url?.isNotEmpty == true) {
  202. _initPlayer(next.url);
  203. }
  204. });
  205. }
  206. // 监听 App 生命周期变化
  207. WidgetsBinding.instance.addObserver(this);
  208. }
  209. @override
  210. void didChangeAppLifecycleState(AppLifecycleState state) {
  211. super.didChangeAppLifecycleState(state);
  212. if (_betterPlayerController == null) return;
  213. if (state == AppLifecycleState.inactive ||
  214. state == AppLifecycleState.paused) {
  215. // App进入后台或锁屏,暂停播放
  216. _betterPlayerController?.pause();
  217. } else if (state == AppLifecycleState.resumed) {
  218. // App回到前台(是否继续播放可根据需求选择)如果希望回到前台自动播放,就取消注释
  219. // _betterPlayerController?.play();
  220. }
  221. }
  222. void _initPlayer(String? url) {
  223. consoleLog("VideoDetailPage: _initPlayer called with url: $url");
  224. if (url == null || url.isEmpty) {
  225. consoleLog("VideoDetailPage: url is null or empty, returning");
  226. return;
  227. }
  228. _betterPlayerController?.dispose(); // dispose 旧的
  229. consoleLog("VideoDetailPage: creating BetterPlayerDataSource");
  230. final dataSource = BetterPlayerDataSource(
  231. BetterPlayerDataSourceType.network,
  232. url,
  233. videoFormat: BetterPlayerVideoFormat.other, // 避免格式识别失败
  234. );
  235. consoleLog("VideoDetailPage: creating BetterPlayerController");
  236. _betterPlayerController = BetterPlayerController(
  237. BetterPlayerConfiguration(
  238. errorBuilder: (context, errorMessage) {
  239. consoleLog("VideoDetailPage: errorBuilder called - $errorMessage");
  240. return Center(
  241. child: myTxt(text: "视频加载失败", color: Colors.white, fontSize: 14.sp),
  242. );
  243. },
  244. autoPlay: true,
  245. aspectRatio: 9 / 16, // 使用竖屏宽高比
  246. fit: BoxFit.cover,
  247. controlsConfiguration: const BetterPlayerControlsConfiguration(
  248. showControls: false,
  249. ),
  250. handleLifecycle: false,
  251. ),
  252. betterPlayerDataSource: dataSource,
  253. );
  254. // 添加播放器事件监听
  255. _betterPlayerController!.addEventsListener((event) {
  256. consoleLog("VideoDetailPage: BetterPlayerEvent: ${event.betterPlayerEventType}");
  257. if (event.betterPlayerEventType == BetterPlayerEventType.play) {
  258. consoleLog("VideoDetailPage: Video started playing");
  259. } else if (event.betterPlayerEventType == BetterPlayerEventType.exception) {
  260. consoleLog("VideoDetailPage: Exception occurred, attempting to replay...");
  261. _betterPlayerController?.pause();
  262. Future.delayed(const Duration(milliseconds: 500), () {
  263. _betterPlayerController?.play();
  264. });
  265. } else if (event.betterPlayerEventType == BetterPlayerEventType.bufferingStart) {
  266. consoleLog("VideoDetailPage: Buffering started");
  267. } else if (event.betterPlayerEventType == BetterPlayerEventType.bufferingEnd) {
  268. consoleLog("VideoDetailPage: Buffering ended");
  269. }
  270. });
  271. consoleLog("VideoDetailPage: BetterPlayerController created successfully");
  272. }
  273. @override
  274. Widget build(BuildContext context) {
  275. final video = ref.watch(videoDetailProvider);
  276. consoleLog("VideoDetailPage: build called, controller = $_betterPlayerController, video.url = ${video.url}");
  277. return Material(
  278. color: Colors.black,
  279. child: Stack(
  280. fit: StackFit.expand,
  281. alignment: Alignment.centerRight,
  282. children: [
  283. if (_betterPlayerController != null)
  284. Center(
  285. child: BetterPlayer(controller: _betterPlayerController!),
  286. )
  287. else
  288. Center(
  289. child: myTxt(
  290. text: "视频加载中...",
  291. color: Colors.white,
  292. fontSize: 14.sp,
  293. ),
  294. ),
  295. Positioned(
  296. left: 20.w,
  297. top: 54.h,
  298. child: GestureDetector(
  299. onTap: () => context.pop(),
  300. child: Icon(Icons.arrow_back_ios, color: Colors.white),
  301. ),
  302. ),
  303. Positioned(
  304. right: 20.h,
  305. bottom: 150.h,
  306. child: Column(
  307. mainAxisAlignment: MainAxisAlignment.center,
  308. children: [
  309. SizedBox(height: 100.h),
  310. AuthGestureDetector(
  311. onTap: () {
  312. ref
  313. .read(videoDetailProvider.notifier)
  314. .likeVideo(video.isLiked ?? false);
  315. ref
  316. .read(recommendListProvider.notifier)
  317. .fetchVideoLike(
  318. videoId: widget.param.id,
  319. current: video.isLiked ?? false,
  320. );
  321. },
  322. child: Icon(
  323. Icons.favorite,
  324. color: video.isLiked == true ? Colors.red : Colors.white,
  325. size: 25.sp,
  326. ),
  327. ),
  328. myTxt(
  329. text: video.likeCount.toSafeString,
  330. color: Colors.white,
  331. fontSize: 12.sp,
  332. ),
  333. SizedBox(height: 15.h),
  334. AuthGestureDetector(
  335. onTap: () {
  336. String? contentId = video.contentId;
  337. String? title = video.title;
  338. //1.活动中的视频 2.视频Tab进来的普通视频
  339. _showBottomCommentDialog(
  340. context,
  341. contentId,
  342. title,
  343. CommentType.video,
  344. );
  345. },
  346. child: Icon(Icons.message, color: Colors.white, size: 25.sp),
  347. ),
  348. myTxt(
  349. text: video.commentCount.toSafeString,
  350. color: Colors.white,
  351. fontSize: 12.sp,
  352. ),
  353. SizedBox(height: 15.h),
  354. AuthGestureDetector(
  355. onTap: () {
  356. ref
  357. .read(videoDetailProvider.notifier)
  358. .favoriteVideo(video.isFavorite ?? false);
  359. ref
  360. .read(recommendListProvider.notifier)
  361. .fetchVideoFavorite(
  362. videoId: widget.param.id,
  363. current: video.isFavorite ?? false,
  364. );
  365. },
  366. child: Icon(
  367. Icons.star,
  368. color: video.isFavorite == true ? Colors.red : Colors.white,
  369. size: 25.sp,
  370. ),
  371. ),
  372. myTxt(
  373. text: video.favoriteCount.toSafeString,
  374. color: Colors.white,
  375. fontSize: 12.sp,
  376. ),
  377. SizedBox(height: 15.h),
  378. GestureDetector(
  379. onTap: () {
  380. // shareUrl(
  381. // title: video.shareDesc ?? "",
  382. // url: video.shareUrl ?? "",
  383. // );
  384. shareAction(video);
  385. if (uuid.isNotEmpty) {
  386. ref
  387. .read(recommendListProvider.notifier)
  388. .fetchVideoShare(contentId: widget.param.id);
  389. }
  390. },
  391. child: Icon(
  392. Icons.screen_share,
  393. color: Colors.white,
  394. size: 25.sp,
  395. ),
  396. ),
  397. myTxt(
  398. text: video.shareCount.toSafeString,
  399. color: Colors.white,
  400. fontSize: 12.sp,
  401. ),
  402. SizedBox(height: 15.h),
  403. ],
  404. ),
  405. ),
  406. ],
  407. ),
  408. );
  409. }
  410. void _showBottomCommentDialog(
  411. BuildContext ctx,
  412. String? contentId,
  413. String? title,
  414. CommentType commentType,
  415. ) {
  416. showModalBottomSheet(
  417. useSafeArea: true,
  418. backgroundColor: Colors.white,
  419. context: ctx,
  420. isScrollControlled: true,
  421. // 允许内容滚动并控制高度
  422. builder: (context) {
  423. return Container(
  424. padding: EdgeInsets.all(horizontalPadding),
  425. height: screenHeight * 0.7,
  426. child: Column(
  427. crossAxisAlignment: CrossAxisAlignment.start,
  428. children: [
  429. SizedBox(height: 15.h),
  430. myTxt(text: title ?? "", color: color333333, fontSize: 15.sp),
  431. Container(
  432. height: 0.5,
  433. width: screenWidth,
  434. color: colorE5E5E5,
  435. margin: EdgeInsets.symmetric(vertical: 10.h),
  436. ),
  437. Expanded(
  438. child: CommentPage(
  439. type: commentType,
  440. articleId: contentId ?? "",
  441. ),
  442. ),
  443. ],
  444. ),
  445. );
  446. },
  447. );
  448. }
  449. }