demo/xinhuaribao/lib/ui/video/video_recommend_list_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:news_app/constant/size_res.dart';
import 'package:news_app/ui/video/video_play_item_widget.dart';
import 'package:news_app/util/log.util.dart';
import 'package:visibility_detector/visibility_detector.dart';

import '../../model/video_new_model.dart';
import '../../provider/video_commend_provider.dart';

/// @author: bo.zeng
/// @email: cnhbwds@gmail.com
/// @date: 2025 2025/4/9 16:00
/// @description:
class VideoRecommendListPage extends ConsumerStatefulWidget {
  const VideoRecommendListPage({super.key});

  @override
  ConsumerState<VideoRecommendListPage> createState() =>
      _VideoRecommendListPageState();
}

final recommendListProvider =
    NotifierProvider<VideoRecommendProvider, List<VideoNewModel>>(() {
      return VideoRecommendProvider();
    });

class _VideoRecommendListPageState extends ConsumerState<VideoRecommendListPage>
    with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    super.initState();
    ref.read(recommendListProvider.notifier).fetchRecommendVideos();
  }

  bool _isVisible = false;

  void _onVisibilityChanged(VisibilityInfo info) {
    final visible = info.visibleFraction > 0.5; // 页面超过一半可见就算“可见”
    if (_isVisible != visible) {
      setState(() {
        _isVisible = visible;
      });
    }
    if (visible) {
      // 页面可见时恢复播放
      consoleLog("页面可见");
    } else {
      // 页面不可见时暂停播放
      consoleLog("页面不可见");
    }
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    final videos = ref.watch(recommendListProvider);
    return VisibilityDetector(
      key: const Key("value"),
      onVisibilityChanged: _onVisibilityChanged,
      child: Padding(
        padding: EdgeInsets.symmetric(
          horizontal: horizontalPadding,
          vertical: horizontalPadding,
        ),
        child: PageView(
          pageSnapping: true,
          scrollDirection: Axis.vertical,
          children: List.generate(videos.length, (index) {
            return VideoPlayItemWidget(
              item: videos[index],
              isActive: _isVisible,
            );
          }),
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}