Atualização geral de optimazação e desing

2026-07-07 11:41:15 +01:00
parent e8afe36cd2
commit a8e04ceeb2
37 changed files with 1688 additions and 2900 deletions
--- a/lib/screens/video_screen.dart
+++ b/lib/screens/video_screen.dart
@@ -4,19 +4,24 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:lottie/lottie.dart';
 import 'package:video_player/video_player.dart';
+import 'package:youtube_player_flutter/youtube_player_flutter.dart';

-// Video data structure - easily editable for future updates
+// Video data structure - easily editable for future updates.
+// Episódios 1-7 tocam via YouTube (não listado); preencha youtubeId ao subir
+// cada vídeo. Episódios 8-13 continuam embutidos no app (assets/videos).
 class VideoData {
  final int id;
  final String title;
  final String description;
-  final String videoPath;
+  final String? videoPath;
+  final String? youtubeId;

  VideoData({
    required this.id,
    required this.title,
    required this.description,
-    required this.videoPath,
+    this.videoPath,
+    this.youtubeId,
  });
 }

@@ -26,43 +31,43 @@ final List<VideoData> videoList = [
    id: 1,
    title: 'Episódio 1',
    description: 'Aprenda sobre saúde bucal neste episódio',
-    videoPath: 'assets/videos/episodio_01.mp4',
+    youtubeId: '', // TODO: colar o ID do vídeo do YouTube (não listado)
  ),
  VideoData(
    id: 2,
    title: 'Episódio 2',
    description: 'Aprenda sobre saúde bucal neste episódio',
-    videoPath: 'assets/videos/episodio_02.mp4',
+    youtubeId: '', // TODO: colar o ID do vídeo do YouTube (não listado)
  ),
  VideoData(
    id: 3,
    title: 'Episódio 3',
    description: 'Aprenda sobre saúde bucal neste episódio',
-    videoPath: 'assets/videos/episodio_03.mp4',
+    youtubeId: '', // TODO: colar o ID do vídeo do YouTube (não listado)
  ),
  VideoData(
    id: 4,
    title: 'Episódio 4',
    description: 'Aprenda sobre saúde bucal neste episódio',
-    videoPath: 'assets/videos/episodio_04.mp4',
+    youtubeId: '', // TODO: colar o ID do vídeo do YouTube (não listado)
  ),
  VideoData(
    id: 5,
    title: 'Episódio 5',
    description: 'Aprenda sobre saúde bucal neste episódio',
-    videoPath: 'assets/videos/episodio_05.mp4',
+    youtubeId: '', // TODO: colar o ID do vídeo do YouTube (não listado)
  ),
  VideoData(
    id: 6,
    title: 'Episódio 6',
    description: 'Aprenda sobre saúde bucal neste episódio',
-    videoPath: 'assets/videos/episodio_06.mp4',
+    youtubeId: '', // TODO: colar o ID do vídeo do YouTube (não listado)
  ),
  VideoData(
    id: 7,
    title: 'Episódio 7',
    description: 'Aprenda sobre saúde bucal neste episódio',
-    videoPath: 'assets/videos/episodio_07.mp4',
+    youtubeId: '', // TODO: colar o ID do vídeo do YouTube (não listado)
  ),
  VideoData(
    id: 8,
@@ -105,6 +110,25 @@ final List<VideoData> videoList = [
 // Cache for video controllers to avoid re-initializing
 final Map<String, VideoPlayerController> _videoControllerCache = {};

+Future<void> showVideoPlayerDialog(BuildContext context, VideoData video) {
+  if (video.youtubeId != null) {
+    if (video.youtubeId!.isEmpty) {
+      ScaffoldMessenger.of(
+        context,
+      ).showSnackBar(const SnackBar(content: Text('Vídeo ainda não disponível')));
+      return Future.value();
+    }
+    return showDialog<void>(
+      context: context,
+      builder: (context) => _YoutubePlayerDialog(video: video),
+    );
+  }
+  return showDialog<void>(
+    context: context,
+    builder: (context) => _VideoPlayerDialog(video: video),
+  );
+}
+
 class VideoScreen extends StatefulWidget {
  const VideoScreen({super.key});

@@ -268,29 +292,41 @@ class _VideoScreenState extends State<VideoScreen> {
  }
 }

-class _VideoButton extends StatefulWidget {
-  const _VideoButton({required this.video});
+/// Preview de um vídeo (frame local ou thumbnail do YouTube), reutilizável
+/// em qualquer card que precise mostrar "a cara" de um episódio.
+class VideoThumbnail extends StatefulWidget {
+  const VideoThumbnail({
+    super.key,
+    required this.video,
+    this.borderRadius = 12,
+    this.iconSize = 48,
+  });

  final VideoData video;
+  final double borderRadius;
+  final double iconSize;

  @override
-  State<_VideoButton> createState() => _VideoButtonState();
+  State<VideoThumbnail> createState() => _VideoThumbnailState();
 }

-class _VideoButtonState extends State<_VideoButton> {
+class _VideoThumbnailState extends State<VideoThumbnail> {
  VideoPlayerController? _controller;
  bool _isInitialized = false;

+  bool get _isYoutube => widget.video.youtubeId != null;
+
  @override
  void initState() {
    super.initState();
-    _initializeVideo();
+    if (!_isYoutube) _initializeVideo();
  }

  Future<void> _initializeVideo() async {
+    final path = widget.video.videoPath!;
    // Check if controller exists in cache
-    if (_videoControllerCache.containsKey(widget.video.videoPath)) {
-      _controller = _videoControllerCache[widget.video.videoPath];
+    if (_videoControllerCache.containsKey(path)) {
+      _controller = _videoControllerCache[path];
      await _controller!.seekTo(const Duration(seconds: 2));
      await _controller!.pause();
      if (mounted) {
@@ -302,12 +338,12 @@ class _VideoButtonState extends State<_VideoButton> {
    }

    // Create new controller and cache it
-    _controller = VideoPlayerController.asset(widget.video.videoPath);
+    _controller = VideoPlayerController.asset(path);
    try {
      await _controller!.initialize();
      await _controller!.seekTo(const Duration(seconds: 2));
      await _controller!.pause();
-      _videoControllerCache[widget.video.videoPath] = _controller!;
+      _videoControllerCache[path] = _controller!;
      if (mounted) {
        setState(() {
          _isInitialized = true;
@@ -332,6 +368,73 @@ class _VideoButtonState extends State<_VideoButton> {
    super.dispose();
  }

+  @override
+  Widget build(BuildContext context) {
+    if (_isYoutube) {
+      final youtubeId = widget.video.youtubeId!;
+      if (youtubeId.isEmpty) {
+        return Center(
+          child: Icon(
+            Icons.hourglass_top_rounded,
+            size: widget.iconSize * 0.85,
+            color: Colors.black26,
+          ),
+        );
+      }
+      return ClipRRect(
+        borderRadius: BorderRadius.circular(widget.borderRadius),
+        child: Image.network(
+          'https://img.youtube.com/vi/$youtubeId/hqdefault.jpg',
+          fit: BoxFit.cover,
+          width: double.infinity,
+          height: double.infinity,
+          errorBuilder: (context, error, stackTrace) => Center(
+            child: Icon(
+              Icons.play_circle_fill_rounded,
+              size: widget.iconSize,
+              color: VideoScreen._accentPink,
+            ),
+          ),
+        ),
+      );
+    }
+    return _isInitialized && _controller != null
+        ? ClipRRect(
+            borderRadius: BorderRadius.circular(widget.borderRadius),
+            child: FittedBox(
+              fit: BoxFit.cover,
+              child: SizedBox(
+                width: _controller!.value.size.width,
+                height: _controller!.value.size.height,
+                child: VideoPlayer(_controller!),
+              ),
+            ),
+          )
+        : Center(
+            child: Icon(
+              Icons.play_circle_fill_rounded,
+              size: widget.iconSize,
+              color: VideoScreen._accentPink,
+            ),
+          );
+  }
+}
+
+class _VideoButton extends StatelessWidget {
+  const _VideoButton({required this.video});
+
+  final VideoData video;
+
+  void _showVideoPlayer(BuildContext context, VideoData video) {
+    if (video.youtubeId == null &&
+        _videoControllerCache.containsKey(video.videoPath)) {
+      // Dispose the cached controller to avoid codec conflict with dialog controller
+      _videoControllerCache[video.videoPath]!.dispose();
+      _videoControllerCache.remove(video.videoPath);
+    }
+    showVideoPlayerDialog(context, video);
+  }
+
  @override
  Widget build(BuildContext context) {
    return Material(
@@ -341,7 +444,7 @@ class _VideoButtonState extends State<_VideoButton> {
      color: Colors.white,
      child: InkWell(
        borderRadius: BorderRadius.circular(16),
-        onTap: () => _showVideoPlayer(context, widget.video),
+        onTap: () => _showVideoPlayer(context, video),
        child: Padding(
          padding: const EdgeInsets.all(12),
          child: Column(
@@ -353,29 +456,11 @@ class _VideoButtonState extends State<_VideoButton> {
                  color: const Color(0xFFFFE6F1),
                  borderRadius: BorderRadius.circular(12),
                ),
-                child: _isInitialized && _controller != null
-                    ? ClipRRect(
-                        borderRadius: BorderRadius.circular(12),
-                        child: FittedBox(
-                          fit: BoxFit.cover,
-                          child: SizedBox(
-                            width: _controller!.value.size.width,
-                            height: _controller!.value.size.height,
-                            child: VideoPlayer(_controller!),
-                          ),
-                        ),
-                      )
-                    : const Center(
-                        child: Icon(
-                          Icons.play_circle_fill_rounded,
-                          size: 48,
-                          color: VideoScreen._accentPink,
-                        ),
-                      ),
+                child: VideoThumbnail(video: video),
              ),
              const SizedBox(height: 10),
              Text(
-                widget.video.title,
+                video.title,
                style: const TextStyle(
                  fontWeight: FontWeight.w900,
                  fontSize: 14,
@@ -386,7 +471,7 @@ class _VideoButtonState extends State<_VideoButton> {
              ),
              const SizedBox(height: 4),
              Text(
-                widget.video.description,
+                video.description,
                style: TextStyle(
                  fontSize: 11,
                  fontWeight: FontWeight.w600,
@@ -401,17 +486,69 @@ class _VideoButtonState extends State<_VideoButton> {
      ),
    );
  }
+}

-  void _showVideoPlayer(BuildContext context, VideoData video) {
-    // Dispose the cached controller to avoid codec conflict with dialog controller
-    if (_videoControllerCache.containsKey(video.videoPath)) {
-      _videoControllerCache[video.videoPath]!.dispose();
-      _videoControllerCache.remove(video.videoPath);
-    }
-    _controller = null;
-    showDialog(
-      context: context,
-      builder: (context) => _VideoPlayerDialog(video: video),
+class _YoutubePlayerDialog extends StatefulWidget {
+  const _YoutubePlayerDialog({required this.video});
+
+  final VideoData video;
+
+  @override
+  State<_YoutubePlayerDialog> createState() => _YoutubePlayerDialogState();
+}
+
+class _YoutubePlayerDialogState extends State<_YoutubePlayerDialog> {
+  late final YoutubePlayerController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = YoutubePlayerController(
+      initialVideoId: widget.video.youtubeId!,
+      flags: const YoutubePlayerFlags(autoPlay: true, mute: false),
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final size = MediaQuery.sizeOf(context);
+    return Dialog(
+      backgroundColor: Colors.transparent,
+      insetPadding: const EdgeInsets.all(16),
+      child: Container(
+        decoration: BoxDecoration(
+          color: VideoScreen._accentPink.withValues(alpha: 0.15),
+          borderRadius: BorderRadius.circular(24),
+          border: Border.all(color: VideoScreen._accentPink, width: 3),
+        ),
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(21),
+          child: SizedBox(
+            width: size.width * 0.9,
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                YoutubePlayer(controller: _controller),
+                Container(
+                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                  color: VideoScreen._accentPink.withValues(alpha: 0.15),
+                  alignment: Alignment.centerRight,
+                  child: IconButton(
+                    icon: const Icon(Icons.close, color: Colors.white),
+                    onPressed: () => Navigator.of(context).pop(),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
    );
  }
 }
@@ -436,7 +573,7 @@ class _VideoPlayerDialogState extends State<_VideoPlayerDialog> {
  }

  Future<void> _initializeVideo() async {
-    _controller = VideoPlayerController.asset(widget.video.videoPath);
+    _controller = VideoPlayerController.asset(widget.video.videoPath!);
    try {
      await _controller.initialize();
      if (mounted) {
@@ -502,7 +639,7 @@ class _VideoPlayerDialogState extends State<_VideoPlayerDialog> {
                if (_isInitialized)
                  _VideoControls(
                    controller: _controller,
-                    videoPath: widget.video.videoPath,
+                    videoPath: widget.video.videoPath!,
                    onClose: () => Navigator.of(context).pop(),
                  ),
              ],