1.0.21+21

lib/mediagrid.dart

@@ -1,3 +1,4 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:f0ckapp/services/api.dart';
 import 'package:f0ckapp/models/mediaitem.dart';
@@ -13,7 +14,7 @@ class MediaGrid extends StatefulWidget {
 
 class _MediaGridState extends State<MediaGrid> {
   final ScrollController _scrollController = ScrollController();
-  final String _version = '1.0.20+20';
+  final String _version = '1.0.21+21';
   List<MediaItem> mediaItems = [];
   bool isLoading = false;
   Timer? _debounceTimer;
@@ -243,18 +244,28 @@ class _MediaGridState extends State<MediaGrid> {
             }
             final item = mediaItems[index];
 
-            final mode =
-                {1: Colors.green, 2: Colors.red}[item.mode] ?? Colors.yellow;
-
             return InkWell(
               onTap: () => _navigateToDetail(item),
               child: Stack(
                 fit: StackFit.expand,
                 children: <Widget>[
-                  Image.network(item.thumbnailUrl, fit: BoxFit.cover),
+                  CachedNetworkImage(
+                    imageUrl: item.thumbnailUrl,
+                    fit: BoxFit.cover,
+                    placeholder: (context, url) => CircularProgressIndicator(),
+                    errorWidget: (context, url, error) => Icon(Icons.error),
+                  ),
                   Align(
                     alignment: FractionalOffset.bottomRight,
-                    child: Icon(Icons.square, color: mode, size: 15.0),
+                    child: Icon(
+                      Icons.square,
+                      color: switch (item.mode) {
+                        1 => Colors.green,
+                        2 => Colors.red,
+                        _ => Colors.yellow
+                      },
+                      size: 15.0
+                    ),
                   ),
                 ],
               ),

lib/screens/detailview.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:f0ckapp/models/mediaitem.dart';
 import 'package:f0ckapp/services/api.dart';
 import 'package:f0ckapp/widgets/video_widget.dart';
@@ -131,9 +132,11 @@ class _DetailViewState extends State<DetailView> {
       child: Column(
         children: [
           if (item.mime.startsWith('image'))
-            Image.network(
-              item.mediaUrl,
+            CachedNetworkImage(
+              imageUrl: item.mediaUrl,
               fit: BoxFit.contain,
+              placeholder: (context, url) => CircularProgressIndicator(),
+              errorWidget: (context, url, error) => Icon(Icons.error),
             )
           else
             VideoWidget(details: item),

lib/widgets/video_overlay.dart

@@ -0,0 +1,130 @@
+import 'package:flutter/material.dart';
+import 'package:video_player/video_player.dart';
+
+class VideoControlsOverlay extends StatelessWidget {
+  final VideoPlayerController controller;
+  const VideoControlsOverlay({super.key, required this.controller});
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      alignment: Alignment.center,
+      children: [
+        Center(
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              _ControlButton(Icons.replay_10, () {
+                controller.seekTo(
+                  controller.value.position - Duration(seconds: 10),
+                );
+              }),
+              SizedBox(width: 32),
+              _ControlButton(
+                controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
+                () {
+                  controller.value.isPlaying
+                      ? controller.pause()
+                      : controller.play();
+                },
+                size: 64,
+              ),
+              SizedBox(width: 32),
+              _ControlButton(Icons.forward_10, () {
+                controller.seekTo(
+                  controller.value.position + Duration(seconds: 10),
+                );
+              }),
+            ],
+          ),
+        ),
+        _ProgressIndicator(controller: controller),
+      ],
+    );
+  }
+}
+
+class _ControlButton extends StatelessWidget {
+  final IconData icon;
+  final VoidCallback onPressed;
+  final double size;
+
+  const _ControlButton(this.icon, this.onPressed, {this.size = 24});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        color: Colors.black.withValues(alpha: 0.4),
+      ),
+      child: IconButton(
+        icon: Icon(icon, color: Colors.white, size: size),
+        onPressed: onPressed,
+      ),
+    );
+  }
+}
+
+class _ProgressIndicator extends StatelessWidget {
+  final VideoPlayerController controller;
+  const _ProgressIndicator({required this.controller});
+
+  @override
+  Widget build(BuildContext context) {
+    return Align(
+      alignment: Alignment.bottomCenter,
+      child: Stack(
+        clipBehavior: Clip.none,
+        children: [
+          Container(
+            height: 20,
+            alignment: Alignment.bottomCenter,
+            color: Colors.transparent,
+            child: VideoProgressIndicator(
+              controller,
+              allowScrubbing: true,
+              colors: VideoProgressColors(
+                playedColor: Colors.red,
+                backgroundColor: Colors.grey,
+                bufferedColor: Colors.white54,
+              ),
+            ),
+          ),
+          Positioned(
+            left:
+                (controller.value.position.inMilliseconds /
+                        controller.value.duration.inMilliseconds) *
+                    MediaQuery.of(context).size.width -
+                6,
+            bottom: -4,
+            child: Container(
+              width: 12,
+              height: 12,
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                color: Colors.red,
+                border: Border.all(color: Colors.red, width: 2),
+              ),
+            ),
+          ),
+          Positioned(
+            left: 16,
+            bottom: 10,
+            child: Text(
+              '${_formatDuration(controller.value.position)} / ${_formatDuration(controller.value.duration)}',
+              style: TextStyle(color: Colors.white),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  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";
+  }
+}

lib/widgets/video_widget.dart

@@ -1,6 +1,10 @@
-import 'package:f0ckapp/models/mediaitem.dart';
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:video_player/video_player.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:f0ckapp/models/mediaitem.dart';
+import 'package:f0ckapp/widgets/video_overlay.dart';
 
 class VideoWidget extends StatefulWidget {
   final MediaItem details;
@@ -12,6 +16,7 @@ class VideoWidget extends StatefulWidget {
 
 class _VideoWidgetState extends State<VideoWidget> {
   late VideoPlayerController _controller;
+  bool _showControls = false;
 
   @override
   void initState() {
@@ -37,13 +42,6 @@ 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) {
     bool isAudio = widget.details.mime.startsWith('audio');
@@ -61,115 +59,38 @@ class _VideoWidgetState extends State<VideoWidget> {
               GestureDetector(
                 onTap: () {
                   setState(() {
-                    _controller.value.isPlaying
-                        ? _controller.pause()
-                        : _controller.play();
+                    _showControls = !_showControls;
                   });
                 },
                 child: isAudio
-                    ? Image.network(widget.details.coverUrl, fit: BoxFit.cover)
+                    ? CachedNetworkImage(
+                        imageUrl: widget.details.coverUrl,
+                        fit: BoxFit.cover,
+                        placeholder: (context, url) =>
+                            CircularProgressIndicator(),
+                        errorWidget: (context, url, error) => Image.network(
+                          "https://f0ck.me/s/img/music.webp",
+                          fit: BoxFit.contain,
+                        ),
+                      )
                     : _controller.value.isInitialized
                     ? VideoPlayer(_controller)
                     : Center(child: CircularProgressIndicator()),
               ),
-              if (_controller.value.isInitialized)
-                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.withAlpha(128),
-                          ),
-                        ),
-                      ),
-                      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),
-                          ),
-                        ),
-                      ),
-                    ],
+              if (_controller.value.isInitialized && _showControls) ...[
+                IgnorePointer(
+                  ignoring: true,
+                  child: Container(
+                    color: Colors.black.withValues(alpha: 0.5),
+                    width: double.infinity,
+                    height: double.infinity,
                   ),
                 ),
+                VideoControlsOverlay(controller: _controller),
+              ],
             ],
           ),
         ),
-        if (_controller.value.isInitialized)
-          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),
-                ),
-              ],
-            ),
-          ),
       ],
     );
   }

macos/Flutter/GeneratedPluginRegistrant.swift

@@ -5,8 +5,12 @@
 import FlutterMacOS
 import Foundation
 
+import path_provider_foundation
+import sqflite_darwin
 import video_player_avfoundation
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
+  PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
+  SqflitePlugin.register(with: registry.registrar(forPlugin: "SqflitePlugin"))
   FVPVideoPlayerPlugin.register(with: registry.registrar(forPlugin: "FVPVideoPlayerPlugin"))
 }

pubspec.lock

@@ -17,6 +17,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.2"
+  cached_network_image:
+    dependency: "direct main"
+    description:
+      name: cached_network_image
+      sha256: "7c1183e361e5c8b0a0f21a28401eecdbde252441106a9816400dd4c2b2424916"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.4.1"
+  cached_network_image_platform_interface:
+    dependency: transitive
+    description:
+      name: cached_network_image_platform_interface
+      sha256: "35814b016e37fbdc91f7ae18c8caf49ba5c88501813f73ce8a07027a395e2829"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.1.1"
+  cached_network_image_web:
+    dependency: transitive
+    description:
+      name: cached_network_image_web
+      sha256: "980842f4e8e2535b8dbd3d5ca0b1f0ba66bf61d14cc3a17a9b4788a3685ba062"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.1"
   characters:
     dependency: transitive
     description:
@@ -41,6 +65,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.19.1"
+  crypto:
+    dependency: transitive
+    description:
+      name: crypto
+      sha256: "1e445881f28f22d6140f181e07737b22f1e099a5e1ff94b0af2f9e4a463f4855"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.6"
   csslib:
     dependency: transitive
     description:
@@ -65,11 +97,43 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.3"
+  ffi:
+    dependency: transitive
+    description:
+      name: ffi
+      sha256: "289279317b4b16eb2bb7e271abccd4bf84ec9bdcbe999e278a94b804f5630418"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.4"
+  file:
+    dependency: transitive
+    description:
+      name: file
+      sha256: a3b4f84adafef897088c160faf7dfffb7696046cb13ae90b508c2cbc95d3b8d4
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.0.1"
+  fixnum:
+    dependency: transitive
+    description:
+      name: fixnum
+      sha256: b6dc7065e46c974bc7c5f143080a6764ec7a4be6da1285ececdc37be96de53be
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
   flutter:
     dependency: "direct main"
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_cache_manager:
+    dependency: transitive
+    description:
+      name: flutter_cache_manager
+      sha256: "400b6592f16a4409a7f2bb929a9a7e38c72cceb8ffb99ee57bbf2cb2cecf8386"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.4.1"
   flutter_lints:
     dependency: "direct dev"
     description:
@@ -168,6 +232,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.16.0"
+  octo_image:
+    dependency: transitive
+    description:
+      name: octo_image
+      sha256: "34faa6639a78c7e3cbe79be6f9f96535867e879748ade7d17c9b1ae7536293bd"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
   path:
     dependency: transitive
     description:
@@ -176,6 +248,62 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.9.1"
+  path_provider:
+    dependency: transitive
+    description:
+      name: path_provider
+      sha256: "50c5dd5b6e1aaf6fb3a78b33f6aa3afca52bf903a8a5298f53101fdaee55bbcd"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.5"
+  path_provider_android:
+    dependency: transitive
+    description:
+      name: path_provider_android
+      sha256: d0d310befe2c8ab9e7f393288ccbb11b60c019c6b5afc21973eeee4dda2b35e9
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.17"
+  path_provider_foundation:
+    dependency: transitive
+    description:
+      name: path_provider_foundation
+      sha256: "4843174df4d288f5e29185bd6e72a6fbdf5a4a4602717eed565497429f179942"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.1"
+  path_provider_linux:
+    dependency: transitive
+    description:
+      name: path_provider_linux
+      sha256: f7a1fe3a634fe7734c8d3f2766ad746ae2a2884abe22e241a8b301bf5cac3279
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.1"
+  path_provider_platform_interface:
+    dependency: transitive
+    description:
+      name: path_provider_platform_interface
+      sha256: "88f5779f72ba699763fa3a3b06aa4bf6de76c8e5de842cf6f29e2e06476c2334"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.2"
+  path_provider_windows:
+    dependency: transitive
+    description:
+      name: path_provider_windows
+      sha256: bd6f00dbd873bfb70d0761682da2b3a2c2fccc2b9e84c495821639601d81afe7
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.0"
+  platform:
+    dependency: transitive
+    description:
+      name: platform
+      sha256: "5d6b1b0036a5f331ebc77c850ebc8506cbc1e9416c27e59b439f917a902a4984"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.6"
   plugin_platform_interface:
     dependency: transitive
     description:
@@ -184,6 +312,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.8"
+  rxdart:
+    dependency: transitive
+    description:
+      name: rxdart
+      sha256: "5c3004a4a8dbb94bd4bf5412a4def4acdaa12e12f269737a5751369e12d1a962"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.28.0"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -197,6 +333,54 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.10.1"
+  sprintf:
+    dependency: transitive
+    description:
+      name: sprintf
+      sha256: "1fc9ffe69d4df602376b52949af107d8f5703b77cda567c4d7d86a0693120f23"
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.0.0"
+  sqflite:
+    dependency: transitive
+    description:
+      name: sqflite
+      sha256: e2297b1da52f127bc7a3da11439985d9b536f75070f3325e62ada69a5c585d03
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.2"
+  sqflite_android:
+    dependency: transitive
+    description:
+      name: sqflite_android
+      sha256: "2b3070c5fa881839f8b402ee4a39c1b4d561704d4ebbbcfb808a119bc2a1701b"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.1"
+  sqflite_common:
+    dependency: transitive
+    description:
+      name: sqflite_common
+      sha256: "84731e8bfd8303a3389903e01fb2141b6e59b5973cacbb0929021df08dddbe8b"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.5.5"
+  sqflite_darwin:
+    dependency: transitive
+    description:
+      name: sqflite_darwin
+      sha256: "279832e5cde3fe99e8571879498c9211f3ca6391b0d818df4e17d9fff5c6ccb3"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.2"
+  sqflite_platform_interface:
+    dependency: transitive
+    description:
+      name: sqflite_platform_interface
+      sha256: "8dd4515c7bdcae0a785b0062859336de775e8c65db81ae33dd5445f35be61920"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.0"
   stack_trace:
     dependency: transitive
     description:
@@ -221,6 +405,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.4.1"
+  synchronized:
+    dependency: transitive
+    description:
+      name: synchronized
+      sha256: "0669c70faae6270521ee4f05bffd2919892d42d1276e6c495be80174b6bc0ef6"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.3.1"
   term_glyph:
     dependency: transitive
     description:
@@ -245,6 +437,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.4.0"
+  uuid:
+    dependency: transitive
+    description:
+      name: uuid
+      sha256: a5be9ef6618a7ac1e964353ef476418026db906c4facdedaa299b7a2e71690ff
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.5.1"
   vector_math:
     dependency: transitive
     description:
@@ -309,6 +509,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
+  xdg_directories:
+    dependency: transitive
+    description:
+      name: xdg_directories
+      sha256: "7a3f37b05d989967cdddcbb571f1ea834867ae2faa29725fd085180e0883aa15"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
 sdks:
   dart: ">=3.9.0-100.2.beta <4.0.0"
   flutter: ">=3.29.0"

pubspec.yaml

@@ -16,7 +16,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 # In Windows, build-name is used as the major, minor, and patch parts
 # of the product and file versions while build-number is used as the build suffix.
-version: 1.0.20+20
+version: 1.0.21+21
 
 environment:
   sdk: ^3.9.0-100.2.beta
@@ -36,6 +36,7 @@ dependencies:
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.8
+  cached_network_image: ^3.4.1
 
 dev_dependencies:
   flutter_test: