video_detail_page.dart 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
  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?.dispose();
  183. subscription?.close();
  184. super.dispose();
  185. }
  186. @override
  187. void initState() {
  188. super.initState();
  189. consoleLog("VideoDetailPage: initState called, param.id = ${widget.param.id}");
  190. setImmersiveStatusBar();
  191. _checkWeChatInstallation();
  192. ref.read(videoDetailProvider.notifier).fetchVideoDetail(widget.param.id);
  193. if (widget.param.videoUrl?.isNotEmpty == true) {
  194. consoleLog("VideoDetailPage: videoUrl from param = ${widget.param.videoUrl}");
  195. _initPlayer(widget.param.videoUrl);
  196. } else {
  197. consoleLog("VideoDetailPage: videoUrl not in param, waiting for provider");
  198. subscription = ref.listenManual(videoDetailProvider, (pre, next) {
  199. consoleLog("VideoDetailPage: provider updated, url = ${next.url}");
  200. if (pre?.url != next.url && next.url?.isNotEmpty == true) {
  201. _initPlayer(next.url);
  202. }
  203. });
  204. }
  205. // 监听 App 生命周期变化
  206. WidgetsBinding.instance.addObserver(this);
  207. }
  208. @override
  209. void didChangeAppLifecycleState(AppLifecycleState state) {
  210. super.didChangeAppLifecycleState(state);
  211. if (_betterPlayerController == null) return;
  212. if (state == AppLifecycleState.inactive ||
  213. state == AppLifecycleState.paused) {
  214. // App进入后台或锁屏,暂停播放
  215. _betterPlayerController?.pause();
  216. } else if (state == AppLifecycleState.resumed) {
  217. // App回到前台(是否继续播放可根据需求选择)如果希望回到前台自动播放,就取消注释
  218. // _betterPlayerController?.play();
  219. }
  220. }
  221. void _initPlayer(String? url) {
  222. consoleLog("VideoDetailPage: _initPlayer called with url: $url");
  223. if (url == null || url.isEmpty) {
  224. consoleLog("VideoDetailPage: url is null or empty, returning");
  225. return;
  226. }
  227. _betterPlayerController?.dispose(); // dispose 旧的
  228. consoleLog("VideoDetailPage: creating BetterPlayerDataSource");
  229. final dataSource = BetterPlayerDataSource(
  230. BetterPlayerDataSourceType.network,
  231. url,
  232. videoFormat: BetterPlayerVideoFormat.other, // 避免格式识别失败
  233. );
  234. consoleLog("VideoDetailPage: creating BetterPlayerController");
  235. _betterPlayerController = BetterPlayerController(
  236. BetterPlayerConfiguration(
  237. errorBuilder: (context, errorMessage) {
  238. consoleLog("VideoDetailPage: errorBuilder called - $errorMessage");
  239. return Center(
  240. child: myTxt(text: "视频加载失败", color: Colors.white, fontSize: 14.sp),
  241. );
  242. },
  243. autoPlay: true,
  244. aspectRatio: 16 / 9,
  245. fit: BoxFit.fitWidth,
  246. controlsConfiguration: const BetterPlayerControlsConfiguration(
  247. showControls: false,
  248. ),
  249. ),
  250. betterPlayerDataSource: dataSource,
  251. );
  252. // 添加播放器事件监听
  253. _betterPlayerController!.addEventsListener((event) {
  254. consoleLog("VideoDetailPage: BetterPlayerEvent: ${event.betterPlayerEventType}");
  255. if (event.betterPlayerEventType == BetterPlayerEventType.play) {
  256. consoleLog("VideoDetailPage: Video started playing");
  257. }
  258. });
  259. consoleLog("VideoDetailPage: BetterPlayerController created successfully");
  260. }
  261. @override
  262. Widget build(BuildContext context) {
  263. final video = ref.watch(videoDetailProvider);
  264. consoleLog("VideoDetailPage: build called, controller = $_betterPlayerController, video.url = ${video.url}");
  265. return Material(
  266. color: Colors.black,
  267. child: Stack(
  268. fit: StackFit.expand,
  269. alignment: Alignment.centerRight,
  270. children: [
  271. if (_betterPlayerController != null)
  272. ColoredBox(
  273. color: Colors.black,
  274. child: AspectRatio(
  275. aspectRatio: 16 / 9,
  276. child: BetterPlayer(controller: _betterPlayerController!),
  277. ),
  278. )
  279. else
  280. Center(
  281. child: myTxt(
  282. text: "视频加载中...",
  283. color: Colors.white,
  284. fontSize: 14.sp,
  285. ),
  286. ),
  287. Positioned(
  288. left: 20.w,
  289. top: 54.h,
  290. child: GestureDetector(
  291. onTap: () => context.pop(),
  292. child: Icon(Icons.arrow_back_ios, color: Colors.white),
  293. ),
  294. ),
  295. Positioned(
  296. right: 20.h,
  297. bottom: 150.h,
  298. child: Column(
  299. mainAxisAlignment: MainAxisAlignment.center,
  300. children: [
  301. SizedBox(height: 100.h),
  302. AuthGestureDetector(
  303. onTap: () {
  304. ref
  305. .read(videoDetailProvider.notifier)
  306. .likeVideo(video.isLiked ?? false);
  307. ref
  308. .read(recommendListProvider.notifier)
  309. .fetchVideoLike(
  310. videoId: widget.param.id,
  311. current: video.isLiked ?? false,
  312. );
  313. },
  314. child: Icon(
  315. Icons.favorite,
  316. color: video.isLiked == true ? Colors.red : Colors.white,
  317. size: 25.sp,
  318. ),
  319. ),
  320. myTxt(
  321. text: video.likeCount.toSafeString,
  322. color: Colors.white,
  323. fontSize: 12.sp,
  324. ),
  325. SizedBox(height: 15.h),
  326. AuthGestureDetector(
  327. onTap: () {
  328. String? contentId = video.contentId;
  329. String? title = video.title;
  330. //1.活动中的视频 2.视频Tab进来的普通视频
  331. _showBottomCommentDialog(
  332. context,
  333. contentId,
  334. title,
  335. CommentType.video,
  336. );
  337. },
  338. child: Icon(Icons.message, color: Colors.white, size: 25.sp),
  339. ),
  340. myTxt(
  341. text: video.commentCount.toSafeString,
  342. color: Colors.white,
  343. fontSize: 12.sp,
  344. ),
  345. SizedBox(height: 15.h),
  346. AuthGestureDetector(
  347. onTap: () {
  348. ref
  349. .read(videoDetailProvider.notifier)
  350. .favoriteVideo(video.isFavorite ?? false);
  351. ref
  352. .read(recommendListProvider.notifier)
  353. .fetchVideoFavorite(
  354. videoId: widget.param.id,
  355. current: video.isFavorite ?? false,
  356. );
  357. },
  358. child: Icon(
  359. Icons.star,
  360. color: video.isFavorite == true ? Colors.red : Colors.white,
  361. size: 25.sp,
  362. ),
  363. ),
  364. myTxt(
  365. text: video.favoriteCount.toSafeString,
  366. color: Colors.white,
  367. fontSize: 12.sp,
  368. ),
  369. SizedBox(height: 15.h),
  370. GestureDetector(
  371. onTap: () {
  372. // shareUrl(
  373. // title: video.shareDesc ?? "",
  374. // url: video.shareUrl ?? "",
  375. // );
  376. shareAction(video);
  377. if (uuid.isNotEmpty) {
  378. ref
  379. .read(recommendListProvider.notifier)
  380. .fetchVideoShare(contentId: widget.param.id);
  381. }
  382. },
  383. child: Icon(
  384. Icons.screen_share,
  385. color: Colors.white,
  386. size: 25.sp,
  387. ),
  388. ),
  389. myTxt(
  390. text: video.shareCount.toSafeString,
  391. color: Colors.white,
  392. fontSize: 12.sp,
  393. ),
  394. SizedBox(height: 15.h),
  395. ],
  396. ),
  397. ),
  398. ],
  399. ),
  400. );
  401. }
  402. void _showBottomCommentDialog(
  403. BuildContext ctx,
  404. String? contentId,
  405. String? title,
  406. CommentType commentType,
  407. ) {
  408. showModalBottomSheet(
  409. useSafeArea: true,
  410. backgroundColor: Colors.white,
  411. context: ctx,
  412. isScrollControlled: true,
  413. // 允许内容滚动并控制高度
  414. builder: (context) {
  415. return Container(
  416. padding: EdgeInsets.all(horizontalPadding),
  417. height: screenHeight * 0.7,
  418. child: Column(
  419. crossAxisAlignment: CrossAxisAlignment.start,
  420. children: [
  421. SizedBox(height: 15.h),
  422. myTxt(text: title ?? "", color: color333333, fontSize: 15.sp),
  423. Container(
  424. height: 0.5,
  425. width: screenWidth,
  426. color: colorE5E5E5,
  427. margin: EdgeInsets.symmetric(vertical: 10.h),
  428. ),
  429. Expanded(
  430. child: CommentPage(
  431. type: commentType,
  432. articleId: contentId ?? "",
  433. ),
  434. ),
  435. ],
  436. ),
  437. );
  438. },
  439. );
  440. }
  441. }