video_detail_page.dart 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465
  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: 16 / 9,
  246. fit: BoxFit.fitWidth,
  247. controlsConfiguration: const BetterPlayerControlsConfiguration(
  248. showControls: false,
  249. ),
  250. ),
  251. betterPlayerDataSource: dataSource,
  252. );
  253. // 添加播放器事件监听
  254. _betterPlayerController!.addEventsListener((event) {
  255. consoleLog("VideoDetailPage: BetterPlayerEvent: ${event.betterPlayerEventType}");
  256. if (event.betterPlayerEventType == BetterPlayerEventType.play) {
  257. consoleLog("VideoDetailPage: Video started playing");
  258. }
  259. });
  260. consoleLog("VideoDetailPage: BetterPlayerController created successfully");
  261. }
  262. @override
  263. Widget build(BuildContext context) {
  264. final video = ref.watch(videoDetailProvider);
  265. consoleLog("VideoDetailPage: build called, controller = $_betterPlayerController, video.url = ${video.url}");
  266. return Material(
  267. color: Colors.black,
  268. child: Stack(
  269. fit: StackFit.expand,
  270. alignment: Alignment.centerRight,
  271. children: [
  272. if (_betterPlayerController != null)
  273. ColoredBox(
  274. color: Colors.black,
  275. child: AspectRatio(
  276. aspectRatio: 16 / 9,
  277. child: BetterPlayer(controller: _betterPlayerController!),
  278. ),
  279. )
  280. else
  281. Center(
  282. child: myTxt(
  283. text: "视频加载中...",
  284. color: Colors.white,
  285. fontSize: 14.sp,
  286. ),
  287. ),
  288. Positioned(
  289. left: 20.w,
  290. top: 54.h,
  291. child: GestureDetector(
  292. onTap: () => context.pop(),
  293. child: Icon(Icons.arrow_back_ios, color: Colors.white),
  294. ),
  295. ),
  296. Positioned(
  297. right: 20.h,
  298. bottom: 150.h,
  299. child: Column(
  300. mainAxisAlignment: MainAxisAlignment.center,
  301. children: [
  302. SizedBox(height: 100.h),
  303. AuthGestureDetector(
  304. onTap: () {
  305. ref
  306. .read(videoDetailProvider.notifier)
  307. .likeVideo(video.isLiked ?? false);
  308. ref
  309. .read(recommendListProvider.notifier)
  310. .fetchVideoLike(
  311. videoId: widget.param.id,
  312. current: video.isLiked ?? false,
  313. );
  314. },
  315. child: Icon(
  316. Icons.favorite,
  317. color: video.isLiked == true ? Colors.red : Colors.white,
  318. size: 25.sp,
  319. ),
  320. ),
  321. myTxt(
  322. text: video.likeCount.toSafeString,
  323. color: Colors.white,
  324. fontSize: 12.sp,
  325. ),
  326. SizedBox(height: 15.h),
  327. AuthGestureDetector(
  328. onTap: () {
  329. String? contentId = video.contentId;
  330. String? title = video.title;
  331. //1.活动中的视频 2.视频Tab进来的普通视频
  332. _showBottomCommentDialog(
  333. context,
  334. contentId,
  335. title,
  336. CommentType.video,
  337. );
  338. },
  339. child: Icon(Icons.message, color: Colors.white, size: 25.sp),
  340. ),
  341. myTxt(
  342. text: video.commentCount.toSafeString,
  343. color: Colors.white,
  344. fontSize: 12.sp,
  345. ),
  346. SizedBox(height: 15.h),
  347. AuthGestureDetector(
  348. onTap: () {
  349. ref
  350. .read(videoDetailProvider.notifier)
  351. .favoriteVideo(video.isFavorite ?? false);
  352. ref
  353. .read(recommendListProvider.notifier)
  354. .fetchVideoFavorite(
  355. videoId: widget.param.id,
  356. current: video.isFavorite ?? false,
  357. );
  358. },
  359. child: Icon(
  360. Icons.star,
  361. color: video.isFavorite == true ? Colors.red : Colors.white,
  362. size: 25.sp,
  363. ),
  364. ),
  365. myTxt(
  366. text: video.favoriteCount.toSafeString,
  367. color: Colors.white,
  368. fontSize: 12.sp,
  369. ),
  370. SizedBox(height: 15.h),
  371. GestureDetector(
  372. onTap: () {
  373. // shareUrl(
  374. // title: video.shareDesc ?? "",
  375. // url: video.shareUrl ?? "",
  376. // );
  377. shareAction(video);
  378. if (uuid.isNotEmpty) {
  379. ref
  380. .read(recommendListProvider.notifier)
  381. .fetchVideoShare(contentId: widget.param.id);
  382. }
  383. },
  384. child: Icon(
  385. Icons.screen_share,
  386. color: Colors.white,
  387. size: 25.sp,
  388. ),
  389. ),
  390. myTxt(
  391. text: video.shareCount.toSafeString,
  392. color: Colors.white,
  393. fontSize: 12.sp,
  394. ),
  395. SizedBox(height: 15.h),
  396. ],
  397. ),
  398. ),
  399. ],
  400. ),
  401. );
  402. }
  403. void _showBottomCommentDialog(
  404. BuildContext ctx,
  405. String? contentId,
  406. String? title,
  407. CommentType commentType,
  408. ) {
  409. showModalBottomSheet(
  410. useSafeArea: true,
  411. backgroundColor: Colors.white,
  412. context: ctx,
  413. isScrollControlled: true,
  414. // 允许内容滚动并控制高度
  415. builder: (context) {
  416. return Container(
  417. padding: EdgeInsets.all(horizontalPadding),
  418. height: screenHeight * 0.7,
  419. child: Column(
  420. crossAxisAlignment: CrossAxisAlignment.start,
  421. children: [
  422. SizedBox(height: 15.h),
  423. myTxt(text: title ?? "", color: color333333, fontSize: 15.sp),
  424. Container(
  425. height: 0.5,
  426. width: screenWidth,
  427. color: colorE5E5E5,
  428. margin: EdgeInsets.symmetric(vertical: 10.h),
  429. ),
  430. Expanded(
  431. child: CommentPage(
  432. type: commentType,
  433. articleId: contentId ?? "",
  434. ),
  435. ),
  436. ],
  437. ),
  438. );
  439. },
  440. );
  441. }
  442. }