feat: 新增视频专区列表与播放功能

吴启风
1 parent 9d058cb4
Showing 8 changed files with 647 additions and 3 deletions
assets/images/video_zone_entry.png
lib/common/request/apis.dart
lib/common/request/dao/video_dao.dart
lib/pages/home/view.dart
lib/pages/video/zone/video_zone_item.dart
lib/pages/video/zone/video_zone_page.dart
lib/pages/video/zone/video_zone_player_page.dart
lib/route/route.dart
@@ -110,4 +110,9 @@ class Apis {
   /// 用户反馈
   static const String feedBack = 'student/feedback';
+  /// 获取已上架的视频列表
+  static const String videoList = 'video/list';
+
+  /// 保存视频播放记录
+  static const String videoPlayRecord = 'video/play/record';
 }
+import 'package:wow_english/common/request/request_client.dart';
+import 'package:wow_english/pages/video/zone/video_zone_item.dart';
+
+class VideoDao {
+  /// 获取已上架的视频列表。
+  static Future<List<VideoZoneItem>> list() async {
+    final data = await requestClient.get<List<dynamic>>(Apis.videoList);
+    return (data ?? const <dynamic>[])
+        .whereType<Map>()
+        .map((item) => VideoZoneItem.fromJson(Map<String, dynamic>.from(item)))
+        .toList();
+  }
+
+  /// 保存视频播放记录。
+  static Future<void> savePlayRecord({
+    required int videoId,
+    required int progressSeconds,
+    required int durationSeconds,
+    required bool completed,
+  }) async {
+    await requestClient.post(
+      Apis.videoPlayRecord,
+      data: {
+        'videoId': videoId,
+        'progressSeconds': progressSeconds,
+        'durationSeconds': durationSeconds,
+        'completed': completed,
+      },
+    );
+  }
+}
@@ -124,7 +124,28 @@ class _HomePageView extends StatelessWidget {
                             ),
                           ),
                         ),
-                        const Expanded(child: SizedBox.shrink()),
+                        Expanded(
+                          child: GestureDetector(
+                            onTap: () => _checkPermission(() async {
+                              await clickController.playMusicAndPerformAction(
+                                  context, AudioPlayerUtilType.videoTime,
+                                  () async {
+                                await Navigator.of(context)
+                                    .pushNamed(AppRouteName.videoZone);
+                              });
+                            }, bloc,
+                                deniedMessage: '购买课程后即可进入视频专区。',
+                                deniedActionText: '去购买'),
+                            child: Center(
+                              child: Image.asset(
+                                'video_zone_entry'.assetPng,
+                                width: 153.w,
+                                height: 176.h,
+                                fit: BoxFit.contain,
+                              ),
+                            ),
+                          ),
+                        ),
                         Expanded(
                           child: BlocBuilder<UserBloc, UserState>(
                               builder: (context, userState) {
@@ -209,7 +230,12 @@ class _HomePageView extends StatelessWidget {
     }
   }
-  _checkPermission(VoidCallback onAllowed, HomeBloc bloc) {
+  _checkPermission(
+    VoidCallback onAllowed,
+    HomeBloc bloc, {
+    String deniedMessage = '您的课程已到期，请快快续费继续学习吧！',
+    String deniedActionText = '去续费',
+  }) {
     if (UserUtil.isLogined()) {
       if (AppConfigHelper.shouldHidePay()) {
         onAllowed();
@@ -217,7 +243,7 @@ class _HomePageView extends StatelessWidget {
         if (UserUtil.hasPermission()) {
           onAllowed();
         } else {
-          showTwoActionDialog('提示', '忽略', '去续费', '您的课程已到期，请快快续费继续学习吧！',
+          showTwoActionDialog('提示', '忽略', deniedActionText, deniedMessage,
               leftTap: () {
             popPage();
           }, rightTap: () {
+class VideoZoneItem {
+  const VideoZoneItem({
+    required this.id,
+    required this.name,
+    required this.coverUrl,
+    required this.videoUrl,
+    required this.accessible,
+    required this.completed,
+    required this.durationSeconds,
+    required this.progressSeconds,
+    required this.lastPlayTime,
+  });
+
+  factory VideoZoneItem.fromJson(Map<String, dynamic> json) {
+    int toInt(dynamic value) =>
+        value is num ? value.toInt() : int.tryParse('$value') ?? 0;
+    bool toBool(dynamic value) =>
+        value == true || value == 1 || value?.toString() == 'true';
+
+    return VideoZoneItem(
+      id: toInt(json['id']),
+      name: json['name']?.toString() ?? '',
+      coverUrl: json['coverUrl']?.toString() ?? '',
+      videoUrl: json['videoUrl']?.toString() ?? '',
+      accessible: toBool(json['accessible']),
+      completed: toBool(json['completed']),
+      durationSeconds: toInt(json['durationSeconds']),
+      progressSeconds: toInt(json['progressSeconds']),
+      lastPlayTime: json['lastPlayTime']?.toString() ?? '',
+    );
+  }
+
+  final int id;
+  final String name;
+  final String coverUrl;
+  final String videoUrl;
+  final bool accessible;
+  final bool completed;
+  final int durationSeconds;
+  final int progressSeconds;
+  final String lastPlayTime;
+
+  String get title => name;
+}
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:wow_english/common/dialogs/show_dialog.dart';
+import 'package:wow_english/common/request/dao/video_dao.dart';
+import 'package:wow_english/common/widgets/we_app_bar.dart';
+import 'package:wow_english/route/route.dart';
+
+import 'video_zone_item.dart';
+
+class VideoZonePage extends StatefulWidget {
+  const VideoZonePage({super.key});
+
+  @override
+  State<VideoZonePage> createState() => _VideoZonePageState();
+}
+
+class _VideoZonePageState extends State<VideoZonePage> {
+  late Future<List<VideoZoneItem>> _itemsFuture;
+
+  @override
+  void initState() {
+    super.initState();
+    _itemsFuture = VideoDao.list();
+  }
+
+  void _reload() {
+    setState(() => _itemsFuture = VideoDao.list());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.white,
+      appBar: const WEAppBar(
+        titleText: '视频专区',
+        centerTitle: false,
+      ),
+      body: FutureBuilder<List<VideoZoneItem>>(
+        future: _itemsFuture,
+        builder: (context, snapshot) {
+          if (snapshot.connectionState == ConnectionState.waiting) {
+            return const Center(child: CircularProgressIndicator());
+          }
+          if (snapshot.hasError) {
+            return _VideoLoadError(onRetry: _reload);
+          }
+          final items = snapshot.data ?? const <VideoZoneItem>[];
+          if (items.isEmpty) {
+            return const Center(
+              child: Text(
+                '暂无视频',
+                style: TextStyle(color: Color(0xFF999999), fontSize: 18),
+              ),
+            );
+          }
+          return RefreshIndicator(
+            onRefresh: () async {
+              final future = VideoDao.list();
+              setState(() => _itemsFuture = future);
+              await future;
+            },
+            child: GridView.builder(
+              physics: const AlwaysScrollableScrollPhysics(),
+              padding: EdgeInsets.fromLTRB(14.w, 10.h, 14.w, 16.h),
+              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                crossAxisCount: 4,
+                mainAxisSpacing: 14.h,
+                crossAxisSpacing: 12.w,
+                childAspectRatio: 1.55,
+              ),
+              itemCount: items.length,
+              itemBuilder: (context, index) => _VideoCard(
+                item: items[index],
+                onTap: () => _openVideo(items, index),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  void _openVideo(List<VideoZoneItem> items, int index) {
+    final item = items[index];
+    if (!item.accessible || item.videoUrl.isEmpty) {
+      showTwoActionDialog('提示', '取消', '去购买', '购买课程后即可观看视频。', leftTap: popPage,
+          rightTap: () {
+        popPage();
+        pushNamed(AppRouteName.shop);
+      });
+      return;
+    }
+    Navigator.of(context).pushNamed(
+      AppRouteName.videoZonePlayer,
+      arguments: {
+        'items': items
+            .where((video) => video.accessible && video.videoUrl.isNotEmpty)
+            .toList(),
+        'initialVideoId': item.id,
+      },
+    ).then((_) => _reload());
+  }
+}
+
+class _VideoLoadError extends StatelessWidget {
+  const _VideoLoadError({required this.onRetry});
+
+  final VoidCallback onRetry;
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          const Text(
+            '视频加载失败，请稍后重试',
+            style: TextStyle(color: Color(0xFF999999), fontSize: 18),
+          ),
+          const SizedBox(height: 12),
+          FilledButton(onPressed: onRetry, child: const Text('重新加载')),
+        ],
+      ),
+    );
+  }
+}
+
+class _VideoCard extends StatelessWidget {
+  const _VideoCard({required this.item, required this.onTap});
+
+  final VideoZoneItem item;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      borderRadius: BorderRadius.circular(8.r),
+      onTap: onTap,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Expanded(
+            child: ClipRRect(
+              borderRadius: BorderRadius.circular(8.r),
+              child: Stack(
+                fit: StackFit.expand,
+                children: [
+                  CachedNetworkImage(
+                    imageUrl: item.coverUrl,
+                    fit: BoxFit.cover,
+                    placeholder: (_, __) => const ColoredBox(
+                      color: Color(0xFFF2F2F2),
+                      child: Center(child: CircularProgressIndicator()),
+                    ),
+                    errorWidget: (_, __, ___) => const ColoredBox(
+                      color: Color(0xFFF2F2F2),
+                      child: Icon(Icons.broken_image_outlined,
+                          color: Color(0xFFAAAAAA)),
+                    ),
+                  ),
+                  const Center(
+                    child: Icon(Icons.play_circle_fill,
+                        size: 42, color: Colors.white),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          SizedBox(height: 5.h),
+          Text(
+            item.title,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            style: TextStyle(
+              color: const Color(0xFF222222),
+              fontFamily: null,
+              fontSize: 17.sp,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:video_player/video_player.dart';
+import 'package:wow_english/common/request/dao/video_dao.dart';
+
+import 'video_zone_item.dart';
+
+class VideoZonePlayerPage extends StatefulWidget {
+  const VideoZonePlayerPage({
+    super.key,
+    required this.items,
+    this.initialVideoId,
+  }) : assert(items.length > 0, '视频播放列表不能为空');
+
+  final List<VideoZoneItem> items;
+  final int? initialVideoId;
+
+  @override
+  State<VideoZonePlayerPage> createState() => _VideoZonePlayerPageState();
+}
+
+class _VideoZonePlayerPageState extends State<VideoZonePlayerPage>
+    with WidgetsBindingObserver {
+  VideoPlayerController? _controller;
+  Timer? _progressTimer;
+  late int _currentIndex;
+  double _playbackSpeed = 1;
+  bool _showControls = true;
+  bool _switchingVideo = false;
+  bool _handlingCompletion = false;
+  int? _lastReportedPosition;
+  int? _completedReportedVideoId;
+  Object? _loadError;
+
+  VideoZoneItem get _currentItem => widget.items[_currentIndex];
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addObserver(this);
+    final index = widget.initialVideoId == null
+        ? 0
+        : widget.items.indexWhere((item) => item.id == widget.initialVideoId);
+    _currentIndex = index < 0 ? 0 : index;
+    _loadCurrentVideo();
+  }
+
+  Future<void> _loadCurrentVideo() async {
+    _progressTimer?.cancel();
+    final oldController = _controller;
+    oldController?.removeListener(_onVideoChanged);
+    final controller =
+        VideoPlayerController.networkUrl(Uri.parse(_currentItem.videoUrl));
+    _controller = controller;
+    _loadError = null;
+    if (mounted) {
+      setState(() {});
+    }
+    await oldController?.dispose();
+
+    try {
+      await controller.initialize();
+      if (!mounted || controller != _controller) {
+        await controller.dispose();
+        return;
+      }
+      await controller.setLooping(false);
+      await controller.setPlaybackSpeed(_playbackSpeed);
+      final savedProgress =
+          _currentItem.completed ? 0 : _currentItem.progressSeconds;
+      if (savedProgress > 0 &&
+          savedProgress < controller.value.duration.inSeconds) {
+        await controller.seekTo(Duration(seconds: savedProgress));
+      }
+      controller.addListener(_onVideoChanged);
+      await controller.play();
+      _lastReportedPosition = null;
+      _handlingCompletion = false;
+      _progressTimer = Timer.periodic(
+        const Duration(seconds: 5),
+        (_) => _reportCurrentProgress(),
+      );
+      setState(() {});
+    } catch (error) {
+      if (mounted && controller == _controller) {
+        setState(() => _loadError = error);
+      }
+    }
+  }
+
+  void _onVideoChanged() {
+    final controller = _controller;
+    if (!mounted || controller == null) return;
+    if (controller.value.isCompleted &&
+        !_switchingVideo &&
+        !_handlingCompletion &&
+        _completedReportedVideoId != _currentItem.id) {
+      _handlingCompletion = true;
+      unawaited(_handleVideoCompleted());
+      return;
+    }
+    setState(() {});
+  }
+
+  Future<void> _playNext({bool currentCompleted = false}) async {
+    if (_switchingVideo || _currentIndex >= widget.items.length - 1) return;
+    _switchingVideo = true;
+    await _reportCurrentProgress(completed: currentCompleted, force: true);
+    setState(() => _currentIndex++);
+    await _loadCurrentVideo();
+    _switchingVideo = false;
+  }
+
+  Future<void> _handleVideoCompleted() async {
+    if (_currentIndex < widget.items.length - 1) {
+      await _playNext(currentCompleted: true);
+    } else {
+      await _reportCurrentProgress(completed: true, force: true);
+    }
+    _handlingCompletion = false;
+  }
+
+  Future<void> _togglePlay() async {
+    final controller = _controller;
+    if (controller == null || !controller.value.isInitialized) return;
+    if (controller.value.isCompleted) {
+      await controller.seekTo(Duration.zero);
+      _completedReportedVideoId = null;
+    }
+    if (controller.value.isPlaying) {
+      await controller.pause();
+      await _reportCurrentProgress(force: true);
+    } else {
+      await controller.play();
+    }
+    if (mounted) setState(() {});
+  }
+
+  Future<void> _setSpeed(double speed) async {
+    _playbackSpeed = speed;
+    await _controller?.setPlaybackSpeed(speed);
+    if (mounted) setState(() {});
+  }
+
+  @override
+  void dispose() {
+    WidgetsBinding.instance.removeObserver(this);
+    _progressTimer?.cancel();
+    _controller?.removeListener(_onVideoChanged);
+    unawaited(_reportCurrentProgress(force: true));
+    _controller?.dispose();
+    super.dispose();
+  }
+
+  @override
+  void didChangeAppLifecycleState(AppLifecycleState state) {
+    if (state == AppLifecycleState.inactive ||
+        state == AppLifecycleState.paused ||
+        state == AppLifecycleState.detached) {
+      unawaited(_reportCurrentProgress(force: true));
+    }
+  }
+
+  Future<void> _reportCurrentProgress({
+    bool? completed,
+    bool force = false,
+  }) async {
+    final controller = _controller;
+    if (controller == null || !controller.value.isInitialized) return;
+    final durationSeconds = controller.value.duration.inSeconds > 0
+        ? controller.value.duration.inSeconds
+        : _currentItem.durationSeconds;
+    final progressSeconds = controller.value.position.inSeconds
+        .clamp(0, durationSeconds > 0 ? durationSeconds : 0);
+    final isCompleted = completed ?? controller.value.isCompleted;
+    if (!force && _lastReportedPosition == progressSeconds) return;
+    if (isCompleted && _completedReportedVideoId == _currentItem.id) return;
+    _lastReportedPosition = progressSeconds;
+    try {
+      await VideoDao.savePlayRecord(
+        videoId: _currentItem.id,
+        progressSeconds: progressSeconds,
+        durationSeconds: durationSeconds,
+        completed: isCompleted,
+      );
+      if (isCompleted) _completedReportedVideoId = _currentItem.id;
+    } catch (error) {
+      debugPrint('保存视频播放记录失败: $error');
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final controller = _controller;
+    return Scaffold(
+      backgroundColor: Colors.black,
+      body: GestureDetector(
+        behavior: HitTestBehavior.opaque,
+        onTap: () => setState(() => _showControls = !_showControls),
+        onDoubleTap: _togglePlay,
+        child: Stack(
+          fit: StackFit.expand,
+          children: [
+            if (controller?.value.isInitialized == true)
+              Center(
+                child: AspectRatio(
+                  aspectRatio: controller!.value.aspectRatio,
+                  child: VideoPlayer(controller),
+                ),
+              )
+            else if (_loadError != null)
+              Center(
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    const Text('视频加载失败',
+                        style: TextStyle(color: Colors.white, fontSize: 18)),
+                    const SizedBox(height: 12),
+                    FilledButton(
+                        onPressed: _loadCurrentVideo, child: const Text('重试')),
+                  ],
+                ),
+              )
+            else
+              const Center(child: CircularProgressIndicator()),
+            if (_showControls) _buildControls(controller),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildControls(VideoPlayerController? controller) {
+    final initialized = controller?.value.isInitialized == true;
+    return ColoredBox(
+      color: Colors.black38,
+      child: SafeArea(
+        child: Column(
+          children: [
+            Row(
+              children: [
+                IconButton(
+                  onPressed: () => Navigator.of(context).pop(),
+                  icon:
+                      const Icon(Icons.arrow_back_ios_new, color: Colors.white),
+                ),
+                Expanded(
+                  child: Text(
+                    _currentItem.title,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: const TextStyle(color: Colors.white, fontSize: 20),
+                  ),
+                ),
+                PopupMenuButton<double>(
+                  initialValue: _playbackSpeed,
+                  onSelected: _setSpeed,
+                  itemBuilder: (_) => const [0.5, 0.75, 1.0, 1.25, 1.5, 2.0]
+                      .map((speed) => PopupMenuItem(
+                            value: speed,
+                            child: Text('${speed}x'),
+                          ))
+                      .toList(),
+                  child: Padding(
+                    padding: const EdgeInsets.symmetric(
+                        horizontal: 18, vertical: 12),
+                    child: Text('${_playbackSpeed}x',
+                        style:
+                            const TextStyle(color: Colors.white, fontSize: 16)),
+                  ),
+                ),
+              ],
+            ),
+            const Spacer(),
+            if (initialized)
+              IconButton(
+                onPressed: _togglePlay,
+                iconSize: 68,
+                color: Colors.white,
+                icon: Icon(controller!.value.isPlaying
+                    ? Icons.pause_circle_filled
+                    : Icons.play_circle_fill),
+              ),
+            const Spacer(),
+            if (initialized)
+              Padding(
+                padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
+                child: Row(
+                  children: [
+                    Expanded(
+                      child: VideoProgressIndicator(
+                        controller!,
+                        allowScrubbing: true,
+                        padding: const EdgeInsets.symmetric(vertical: 12),
+                        colors: const VideoProgressColors(
+                          playedColor: Color(0xFF00B6F1),
+                          bufferedColor: Colors.white54,
+                          backgroundColor: Colors.white24,
+                        ),
+                      ),
+                    ),
+                    const SizedBox(width: 12),
+                    Text(
+                      '${_formatDuration(controller.value.position)} / '
+                      '${_formatDuration(controller.value.duration)}',
+                      style: const TextStyle(color: Colors.white),
+                    ),
+                    if (_currentIndex < widget.items.length - 1) ...[
+                      const SizedBox(width: 8),
+                      IconButton(
+                        tooltip: '下一集',
+                        onPressed: _playNext,
+                        icon: const Icon(Icons.skip_next, color: Colors.white),
+                      ),
+                    ],
+                  ],
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  String _formatDuration(Duration duration) {
+    final minutes = duration.inMinutes.remainder(60).toString().padLeft(2, '0');
+    final seconds = duration.inSeconds.remainder(60).toString().padLeft(2, '0');
+    if (duration.inHours == 0) return '$minutes:$seconds';
+    return '${duration.inHours.toString().padLeft(2, '0')}:$minutes:$seconds';
+  }
+}
@@ -25,6 +25,9 @@ import &#39;package:wow_english/pages/user/modify/modify_user_information_page.dart&#39;
 import 'package:wow_english/pages/user/setting/setting_page.dart';
 import 'package:wow_english/pages/user/user_page.dart';
 import 'package:wow_english/pages/video/lookvideo/look_video_page.dart';
+import 'package:wow_english/pages/video/zone/video_zone_item.dart';
+import 'package:wow_english/pages/video/zone/video_zone_page.dart';
+import 'package:wow_english/pages/video/zone/video_zone_player_page.dart';
 import '../models/course_module_entity.dart';
 import '../pages/reading/reading_page.dart';
@@ -69,6 +72,12 @@ class AppRouteName {
   ///看视频
   static const String lookVideo = 'lookVideo';
+  ///视频专区
+  static const String videoZone = 'videoZone';
+
+  ///视频专区播放器
+  static const String videoZonePlayer = 'videoZonePlayer';
+
   ///绘本
   static const String reading = 'reading';
@@ -208,6 +217,17 @@ class AppRouter {
                   courseLessonId: courseLessonId,
                   isTopic: isTopic,
                 ));
+      case AppRouteName.videoZone:
+        return CupertinoPageRoute(builder: (_) => const VideoZonePage());
+      case AppRouteName.videoZonePlayer:
+        final arguments = settings.arguments as Map;
+        final items = arguments['items'] as List<VideoZoneItem>;
+        final initialVideoId = arguments['initialVideoId'] as int?;
+        return CupertinoPageRoute(
+            builder: (_) => VideoZonePlayerPage(
+                  items: items,
+                  initialVideoId: initialVideoId,
+                ));
       /*case AppRouteName.setPwd:
       case AppRouteName.setPwd:
                   phoneNum: phoneNum,