detailview lol

lib/widgets/video_widget.dart

@@ -1,14 +1,13 @@
-import 'package:f0ckapp/models/mediaitem_detail.dart';
+import 'package:f0ckapp/models/mediaitem.dart';
 import 'package:flutter/material.dart';
 import 'package:video_player/video_player.dart';
 
 class VideoWidget extends StatefulWidget {
-  final MediaItemDetail details;
-  //const VideoWidget({super.key, required this.details}): super(key: key);
-  const VideoWidget({Key? key, required this.details}) : super(key: key);
+  final MediaItem details;
+  const VideoWidget({super.key, required this.details});
 
   @override
-  _VideoWidgetState createState() => _VideoWidgetState();
+  State createState() => _VideoWidgetState();
 }
 
 class _VideoWidgetState extends State<VideoWidget> {
@@ -18,11 +17,15 @@ class _VideoWidgetState extends State<VideoWidget> {
   void initState() {
     super.initState();
 
-    _controller = VideoPlayerController.networkUrl(
-      Uri.parse(widget.details.mediaUrl)
-    )..initialize().then((_) {
-      setState(() {});
-    });
+    _controller =
+        VideoPlayerController.networkUrl(
+            Uri.parse('https://f0ck.me/b/${widget.details.dest}'),
+          )
+          ..initialize().then((_) {
+            setState(() {});
+          });
+
+    _controller.addListener(() => setState(() {}));
     _controller.play();
   }
 
@@ -32,20 +35,137 @@ class _VideoWidgetState extends State<VideoWidget> {
     super.dispose();
   }
 
+  String _formatDuration(Duration duration) {
+    String twoDigits(int n) => n.toString().padLeft(2, '0');
+    final minutes = twoDigits(duration.inMinutes.remainder(60));
+    final seconds = twoDigits(duration.inSeconds.remainder(60));
+    return "$minutes:$seconds";
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: Colors.white,
-      body: Center(
-        child: _controller.value.isInitialized
-          ? AspectRatio(
-              aspectRatio: _controller.value.aspectRatio,
-              child: VideoPlayer(_controller),
-            )
-          : Center(
-              child: CircularProgressIndicator(),
-            ),
-      ),
+    bool isAudio = widget.details.mime.startsWith('audio');
+
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        AspectRatio(
+          aspectRatio: isAudio ? 1.0 : _controller.value.aspectRatio,
+          child: Stack(
+            alignment: Alignment.center,
+            children: [
+              GestureDetector(
+                onTap: () {
+                  setState(() {
+                    _controller.value.isPlaying
+                        ? _controller.pause()
+                        : _controller.play();
+                  });
+                },
+                child: isAudio
+                    ? Image.network(
+                        'https://f0ck.me/ca/${widget.details.id}.webp',
+                        fit: BoxFit.cover,
+                      )
+                    : VideoPlayer(_controller),
+              ),
+              Align(
+                alignment: Alignment.bottomCenter,
+                child: Stack(
+                  children: [
+                    SizedBox(
+                      height: 10,
+                      child: VideoProgressIndicator(
+                        _controller,
+                        allowScrubbing: true,
+                        padding: EdgeInsets.only(bottom: 0),
+                        colors: VideoProgressColors(
+                          playedColor: Colors.red,
+                          bufferedColor: Colors.grey,
+                          backgroundColor: Colors.black.withValues(alpha: 0.5),
+                        ),
+                      ),
+                    ),
+                    Positioned(
+                      left:
+                          (_controller.value.position.inMilliseconds /
+                                  _controller.value.duration.inMilliseconds) *
+                              MediaQuery.of(context).size.width -
+                          6,
+                      bottom: -1,
+                      child: Container(
+                        width: 12,
+                        height: 12,
+                        decoration: BoxDecoration(
+                          shape: BoxShape.circle,
+                          color: Colors.white,
+                          border: Border.all(color: Colors.red, width: 2),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+        SizedBox(
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                _formatDuration(_controller.value.position),
+                style: const TextStyle(color: Colors.white),
+              ),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  IconButton(
+                    icon: const Icon(Icons.replay_10),
+                    color: Colors.white,
+                    onPressed: () {
+                      _controller.seekTo(
+                        _controller.value.position -
+                            const Duration(seconds: 10),
+                      );
+                    },
+                  ),
+                  IconButton(
+                    color: Colors.white,
+                    icon: Icon(
+                      _controller.value.isPlaying
+                          ? Icons.pause
+                          : Icons.play_arrow,
+                    ),
+                    onPressed: () {
+                      setState(() {
+                        _controller.value.isPlaying
+                            ? _controller.pause()
+                            : _controller.play();
+                      });
+                    },
+                  ),
+                  IconButton(
+                    color: Colors.white,
+                    icon: const Icon(Icons.forward_10),
+                    onPressed: () {
+                      _controller.seekTo(
+                        _controller.value.position +
+                            const Duration(seconds: 10),
+                      );
+                    },
+                  ),
+                ],
+              ),
+              Text(
+                _formatDuration(_controller.value.duration),
+                style: const TextStyle(color: Colors.white),
+              ),
+            ],
+          ),
+        ),
+      ],
     );
   }
 }