feat(player): 新增卡片式播放器

2026-10-19 15:16:40 +08:00
1 parent ec163f905d
commit 689063a694
@@ -0,0 +1,257 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:video_player/video_player.dart';
+
+import '../../../core/theme/app_colors.dart';
+
+/// 1.5px player scrubber with a buffered segment and white thumb.
+class CardSeekBar extends StatefulWidget {
+  const CardSeekBar({
+    super.key,
+    required this.controller,
+    required this.semanticsLabel,
+    required this.episodeLabel,
+    required this.totalEpisodes,
+    this.onScrubStart,
+    this.onSeek,
+  });
+
+  final VideoPlayerController? controller;
+  final String semanticsLabel;
+  final String episodeLabel;
+  final int totalEpisodes;
+  final VoidCallback? onScrubStart;
+  final Future<void> Function(Duration)? onSeek;
+
+  @override
+  State<CardSeekBar> createState() => _CardSeekBarState();
+}
+
+class _CardSeekBarState extends State<CardSeekBar> {
+  final ValueNotifier<double?> _preview = ValueNotifier(null);
+
+  @override
+  void dispose() {
+    _preview.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final controller = widget.controller;
+    if (controller == null) {
+      return _track(context, const VideoPlayerValue.uninitialized());
+    }
+    return ValueListenableBuilder<VideoPlayerValue>(
+      valueListenable: controller,
+      builder: (context, value, _) {
+        return ValueListenableBuilder<double?>(
+          valueListenable: _preview,
+          builder: (context, _, _) => _track(context, value),
+        );
+      },
+    );
+  }
+
+  Widget _track(BuildContext context, VideoPlayerValue video) {
+    final total = video.duration.inMilliseconds;
+    final enabled = video.isInitialized && total > 0 && widget.onSeek != null;
+    final played = total > 0
+        ? (video.position.inMilliseconds / total).clamp(0.0, 1.0)
+        : 0.0;
+    final fraction = _preview.value ?? played;
+    final buffered = _bufferedFraction(video);
+    final previewPosition = _preview.value == null
+        ? video.position
+        : Duration(milliseconds: (fraction * total).round());
+
+    return Column(
+      key: const Key('card-player-progress-bar'),
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        SizedBox(
+          height: 24,
+          child: SliderTheme(
+            data: SliderTheme.of(context).copyWith(
+              trackHeight: 1.5,
+              activeTrackColor: AppColors.blue,
+              inactiveTrackColor: Colors.white.withValues(alpha: 0.15),
+              thumbColor: Colors.white,
+              overlayColor: AppColors.blue.withValues(alpha: 0.16),
+              trackShape: _BufferedTrackShape(buffered: buffered),
+              thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 5),
+              overlayShape: const RoundSliderOverlayShape(overlayRadius: 12),
+            ),
+            child: Semantics(
+              label: widget.semanticsLabel,
+              child: Slider(
+                key: const Key('card-player-progress'),
+                value: fraction,
+                onChangeStart: enabled
+                    ? (value) {
+                        _preview.value = value;
+                        widget.onScrubStart?.call();
+                      }
+                    : null,
+                onChanged: enabled ? (value) => _preview.value = value : null,
+                onChangeEnd: enabled
+                    ? (value) => unawaited(_finish(value, video.duration))
+                    : null,
+              ),
+            ),
+          ),
+        ),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 2),
+          child: Row(
+            children: [
+              Text(
+                _format(previewPosition),
+                key: const Key('card-player-time-current'),
+                style: const TextStyle(
+                  color: AppColors.cream,
+                  fontSize: 10,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+              Expanded(
+                child: Center(
+                  child: Text(
+                    '${widget.episodeLabel} / ${widget.totalEpisodes}',
+                    key: const Key('card-player-episode'),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: const TextStyle(
+                      color: AppColors.subtle,
+                      fontSize: 10,
+                    ),
+                  ),
+                ),
+              ),
+              Text(
+                _format(video.duration),
+                key: const Key('card-player-time-total'),
+                style: const TextStyle(color: AppColors.subtle, fontSize: 10),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+
+  Future<void> _finish(double fraction, Duration duration) async {
+    final source = widget.controller;
+    try {
+      final total = duration.inMilliseconds;
+      final target = total > 250
+          ? (fraction * total).round().clamp(0, total - 250)
+          : 0;
+      await widget.onSeek?.call(Duration(milliseconds: target));
+    } finally {
+      if (mounted && widget.controller == source) _preview.value = null;
+    }
+  }
+
+  double _bufferedFraction(VideoPlayerValue video) {
+    final total = video.duration.inMilliseconds;
+    if (total <= 0 || video.buffered.isEmpty) return 0;
+    var end = Duration.zero;
+    for (final range in video.buffered) {
+      if (range.end > end) end = range.end;
+    }
+    return (end.inMilliseconds / total).clamp(0.0, 1.0);
+  }
+
+  String _format(Duration value) {
+    final minutes = value.inMinutes.remainder(60).toString().padLeft(2, '0');
+    final seconds = value.inSeconds.remainder(60).toString().padLeft(2, '0');
+    return '$minutes:$seconds';
+  }
+}
+
+class _BufferedTrackShape extends SliderTrackShape with BaseSliderTrackShape {
+  const _BufferedTrackShape({required this.buffered});
+
+  final double buffered;
+
+  @override
+  Rect getPreferredRect({
+    required RenderBox parentBox,
+    Offset offset = Offset.zero,
+    required SliderThemeData sliderTheme,
+    bool isEnabled = false,
+    bool isDiscrete = false,
+  }) {
+    final thumbWidth =
+        sliderTheme.thumbShape?.getPreferredSize(isEnabled, isDiscrete).width ??
+        0;
+    final overlayWidth =
+        sliderTheme.overlayShape
+            ?.getPreferredSize(isEnabled, isDiscrete)
+            .width ??
+        0;
+    final trackHeight = sliderTheme.trackHeight ?? 1.5;
+    final trackLeft = offset.dx + overlayWidth / 2;
+    final trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
+    final trackWidth =
+        parentBox.size.width - (overlayWidth - thumbWidth) - thumbWidth;
+    return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
+  }
+
+  @override
+  void paint(
+    PaintingContext context,
+    Offset offset, {
+    required RenderBox parentBox,
+    required SliderThemeData sliderTheme,
+    required Animation<double> enableAnimation,
+    required TextDirection textDirection,
+    required Offset thumbCenter,
+    Offset? secondaryOffset,
+    bool isEnabled = false,
+    bool isDiscrete = false,
+    bool isSecondaryTrack = false,
+  }) {
+    final rect = getPreferredRect(
+      parentBox: parentBox,
+      offset: offset,
+      sliderTheme: sliderTheme,
+      isEnabled: isEnabled,
+      isDiscrete: isDiscrete,
+    );
+    final radius = Radius.circular(rect.height);
+    final canvas = context.canvas;
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(rect, radius),
+      Paint()..color = Colors.white.withValues(alpha: 0.15),
+    );
+    if (buffered > 0) {
+      canvas.drawRRect(
+        RRect.fromRectAndRadius(
+          Rect.fromLTWH(
+            rect.left,
+            rect.top,
+            rect.width * buffered,
+            rect.height,
+          ),
+          radius,
+        ),
+        Paint()..color = Colors.white.withValues(alpha: 0.30),
+      );
+    }
+    final played = ((thumbCenter.dx - rect.left) / rect.width).clamp(0.0, 1.0);
+    if (played > 0) {
+      canvas.drawRRect(
+        RRect.fromRectAndRadius(
+          Rect.fromLTWH(rect.left, rect.top, rect.width * played, rect.height),
+          radius,
+        ),
+        Paint()..color = AppColors.blue,
+      );
+    }
+  }
+}
@@ -0,0 +1,164 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import '../../../core/data/models/comment.dart';
+import '../../../core/data/models/drama.dart';
+import '../../../core/data/repositories/comment_repository.dart';
+import '../../../core/data/repositories/interaction_repository.dart';
+import '../../../core/data/services/comment_controller.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../l10n/app_localizations.dart';
+
+/// First loaded top-level comment shown under the card player.
+class PlayerFeaturedComment extends StatefulWidget {
+  const PlayerFeaturedComment({
+    super.key,
+    required this.drama,
+    required this.onViewAll,
+  });
+
+  final Drama drama;
+  final VoidCallback onViewAll;
+
+  @override
+  State<PlayerFeaturedComment> createState() => _PlayerFeaturedCommentState();
+}
+
+class _PlayerFeaturedCommentState extends State<PlayerFeaturedComment> {
+  late final CommentController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = CommentController(
+      comments: context.read<CommentRepository>(),
+      interactions: context.read<InteractionRepository>(),
+      dramaId: widget.drama.id,
+    );
+    unawaited(_controller.load());
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ListenableBuilder(
+      listenable: _controller,
+      builder: (context, _) {
+        if (_controller.comments.isEmpty) return const SizedBox.shrink();
+        return _card(context, _controller.comments.first);
+      },
+    );
+  }
+
+  Widget _card(BuildContext context, DramaComment comment) {
+    final l10n = AppLocalizations.of(context)!;
+    return Container(
+      key: const Key('player-featured-comment'),
+      padding: const EdgeInsets.fromLTRB(13, 12, 13, 10),
+      decoration: BoxDecoration(
+        color: const Color(0xFF14161E),
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(color: AppColors.border),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            children: [
+              Container(
+                width: 30,
+                height: 30,
+                alignment: Alignment.center,
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  color: AppColors.secondary.withValues(alpha: 0.18),
+                  border: Border.all(
+                    color: AppColors.secondary.withValues(alpha: 0.4),
+                  ),
+                ),
+                child: Text(
+                  _initial(comment.nickname),
+                  style: const TextStyle(
+                    color: AppColors.onSurface,
+                    fontSize: 12,
+                    fontWeight: FontWeight.w700,
+                  ),
+                ),
+              ),
+              const SizedBox(width: 8),
+              Expanded(
+                child: Text(
+                  comment.nickname.isEmpty
+                      ? l10n.localViewer
+                      : comment.nickname,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: const TextStyle(
+                    color: AppColors.onSurface,
+                    fontSize: 11.5,
+                    fontWeight: FontWeight.w700,
+                  ),
+                ),
+              ),
+              if (comment.likeCount > 0) ...[
+                const Icon(
+                  Icons.favorite_rounded,
+                  size: 13,
+                  color: AppColors.blue,
+                ),
+                const SizedBox(width: 3),
+                Text(
+                  '${comment.likeCount}',
+                  style: const TextStyle(color: AppColors.muted, fontSize: 10),
+                ),
+              ],
+            ],
+          ),
+          const SizedBox(height: 8),
+          Text(
+            comment.content,
+            maxLines: 2,
+            overflow: TextOverflow.ellipsis,
+            style: const TextStyle(
+              color: AppColors.cream,
+              fontSize: 11.5,
+              height: 1.4,
+            ),
+          ),
+          const SizedBox(height: 7),
+          Align(
+            alignment: Alignment.centerRight,
+            child: TextButton(
+              key: const Key('player-comments-view-all'),
+              onPressed: widget.onViewAll,
+              style: TextButton.styleFrom(
+                foregroundColor: AppColors.secondary,
+                minimumSize: const Size(44, 32),
+                padding: const EdgeInsets.symmetric(horizontal: 4),
+                textStyle: const TextStyle(
+                  fontSize: 10.5,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+              child: Text(l10n.viewAll),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  String _initial(String nickname) {
+    final trimmed = nickname.trim();
+    return trimmed.isEmpty ? '?' : trimmed.substring(0, 1).toUpperCase();
+  }
+}