video_detail_page.dart 17 KB

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