Icon Schmicon

- overlay buttons
- encrypted storage
- downloadbutton (wip)

.gitea/workflows/android.yml

@@ -13,6 +13,13 @@ jobs:
       - name: checkout code
         uses: actions/checkout@v4
       
+      - name: cache pub deps
+        uses: actions/cache@v4
+        with:
+          path: ~/.pub-cache
+          key: ${{ runner.os }}-pub-${{ hashFiles('**/pubspec.yaml') }}
+          restore-keys: ${{ runner.os }}-pub-
+      
       - name: set up jdk
         uses: actions/setup-java@v3
         with:

android/app/build.gradle.kts

@@ -11,12 +11,12 @@ android {
     ndkVersion = flutter.ndkVersion
 
     compileOptions {
-        sourceCompatibility = JavaVersion.VERSION_11
-        targetCompatibility = JavaVersion.VERSION_11
+        sourceCompatibility = JavaVersion.VERSION_17
+        targetCompatibility = JavaVersion.VERSION_17
     }
 
     kotlinOptions {
-        jvmTarget = JavaVersion.VERSION_11.toString()
+        jvmTarget = JavaVersion.VERSION_17.toString()
     }
 
     defaultConfig {

android/app/src/main/AndroidManifest.xml

@@ -4,7 +4,8 @@
     <application
         android:label="f0ckapp"
         android:name="${applicationName}"
-        android:icon="@mipmap/ic_launcher">
+        android:icon="@mipmap/ic_launcher"
+        android:enableOnBackInvokedCallback="true">
         <activity
             android:name=".MainActivity"
             android:exported="true"

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <background android:drawable="@mipmap/ic_launcher_background"/>
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
+</adaptive-icon>

lib/main.dart

@@ -2,26 +2,32 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
 import 'package:f0ckapp/screens/MediaGrid.dart';
+import 'package:f0ckapp/utils/AppVersion.dart';
+import 'package:f0ckapp/providers/ThemeProvider.dart';
+
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
   await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
-  runApp(const F0ckApp());
+  await AppVersion.init();
+
+  runApp(ProviderScope(child: const F0ckApp()));
 }
 
-class F0ckApp extends StatelessWidget {
+class F0ckApp extends ConsumerWidget {
   const F0ckApp({super.key});
 
   @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      debugShowCheckedModeBanner: false,
-      theme: ThemeData(
-        scaffoldBackgroundColor: const Color.fromARGB(255, 23, 23, 23),
-      ),
-      home: Scaffold(
-        body: MediaGrid(),
-      ),
+  Widget build(BuildContext context, WidgetRef ref) {
+    return Consumer(
+      builder: (context, ref, _) {
+        return MaterialApp(
+          debugShowCheckedModeBanner: false,
+          theme: ref.watch(themeNotifierProvider),
+          home: const MediaGrid(),
+        );
+      },
     );
   }
 }

lib/models/MediaItem.dart

@@ -34,6 +34,7 @@ class MediaItem {
   String get thumbnailUrl => 'https://f0ck.me/t/$id.webp';
   String get mediaUrl => 'https://f0ck.me/b/$dest';
   String get coverUrl => 'https://f0ck.me/ca/$id.webp';
+  String get postUrl => 'https://f0ck.me/$id';
 }
 
 class Tag {

lib/providers/MediaProvider.dart

@@ -0,0 +1,142 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_secure_storage/flutter_secure_storage.dart';
+
+import 'package:f0ckapp/models/MediaItem.dart';
+import 'package:f0ckapp/services/Api.dart';
+
+const List<String> mediaTypes = ["alles", "image", "video", "audio"];
+const List<String> mediaModes = ["sfw", "nsfw", "untagged", "all"];
+const _unsetTag = Object();
+
+class MediaState {
+  final int typeIndex;
+  final int modeIndex;
+  final bool random;
+  final String? tag;
+  final int crossAxisCount;
+  final List<MediaItem> mediaItems;
+  final bool isLoading;
+  final bool muted;
+
+  const MediaState({
+    this.typeIndex = 0,
+    this.modeIndex = 0,
+    this.random = false,
+    this.tag,
+    this.crossAxisCount = 0,
+    this.mediaItems = const [],
+    this.isLoading = false,
+    this.muted = false,
+  });
+
+  MediaState replace({
+    int? typeIndex,
+    int? modeIndex,
+    bool? random,
+    Object? tag = _unsetTag,
+    int? crossAxisCount,
+    List<MediaItem>? mediaItems,
+    bool? isLoading,
+    bool? muted,
+  }) {
+    return MediaState(
+      typeIndex: typeIndex ?? this.typeIndex,
+      modeIndex: modeIndex ?? this.modeIndex,
+      random: random ?? this.random,
+      tag: identical(tag, _unsetTag) ? this.tag : tag as String?,
+      crossAxisCount: crossAxisCount ?? this.crossAxisCount,
+      mediaItems: mediaItems ?? this.mediaItems,
+      isLoading: isLoading ?? this.isLoading,
+      muted: muted ?? this.muted,
+    );
+  }
+}
+
+class MediaNotifier extends StateNotifier<MediaState> {
+  final _storage = const FlutterSecureStorage(
+    aOptions: AndroidOptions(encryptedSharedPreferences: true),
+  );
+
+  MediaNotifier() : super(const MediaState()) {
+    _loadMutedState();
+  }
+
+  Future<void> _loadMutedState() async {
+    final storedMuted = await _storage.read(key: 'muted');
+    final isMuted = storedMuted == 'true';
+    state = state.replace(muted: isMuted);
+  }
+
+  Future<void> _saveMutedState() async {
+    await _storage.write(key: 'muted', value: state.muted.toString());
+  }
+
+  void setType(String type) {
+    final newIndex = mediaTypes.indexOf(type);
+    state = state.replace(typeIndex: newIndex);
+    resetMedia();
+  }
+
+  void setMode(int modeIndex) {
+    state = state.replace(modeIndex: modeIndex);
+    resetMedia();
+  }
+
+  void toggleRandom() {
+    state = state.replace(random: !state.random);
+    resetMedia();
+  }
+
+  void setTag(String? tag) {
+    state = state.replace(tag: tag);
+    resetMedia();
+  }
+
+  void setCrossAxisCount(int count) {
+    state = state.replace(crossAxisCount: count);
+  }
+
+  void resetMedia() {
+    state = state.replace(mediaItems: []);
+    loadMedia();
+  }
+
+  void addMediaItems(List<MediaItem> newItems) {
+    final updated = List<MediaItem>.from(state.mediaItems)..addAll(newItems);
+    state = state.replace(mediaItems: updated);
+  }
+
+  Future<void> loadMedia() async {
+    if (state.isLoading) return;
+
+    state = state.replace(isLoading: true);
+    try {
+      final older = state.mediaItems.isNotEmpty
+          ? state.mediaItems.last.id
+          : null;
+      final newMedia = await fetchMedia(
+        older: older,
+        type: mediaTypes[state.typeIndex],
+        mode: state.modeIndex,
+        random: state.random,
+        tag: state.tag,
+      );
+      if (newMedia.isNotEmpty) {
+        addMediaItems(newMedia);
+      }
+    } catch (e) {
+      print('Fehler beim Laden der Medien: $e');
+    } finally {
+      state = state.replace(isLoading: false);
+    }
+  }
+
+  void toggleMute() {
+    state = state.replace(muted: !state.muted);
+    _saveMutedState();
+  }
+}
+
+final mediaProvider = StateNotifierProvider<MediaNotifier, MediaState>(
+  (ref) => MediaNotifier(),
+);

lib/providers/ThemeProvider.dart

@@ -0,0 +1,240 @@
+import 'package:flutter/material.dart';
+
+import 'package:flutter_secure_storage/flutter_secure_storage.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+class ThemeNotifier extends StateNotifier<ThemeData> {
+  final FlutterSecureStorage secureStorage;
+
+  ThemeNotifier({required this.secureStorage}) : super(f0ckTheme) {
+    _loadTheme();
+  }
+
+  Future<void> _loadTheme() async {
+    String? savedThemeName = await secureStorage.read(key: 'theme');
+    if (savedThemeName != null) {
+      final customTheme = themes.firstWhere(
+        (t) => t.name == savedThemeName,
+        orElse: () => CustomTheme(name: 'f0ck', theme: f0ckTheme),
+      );
+      state = customTheme.theme;
+    }
+  }
+
+  Future<void> updateTheme(String themeName) async {
+    await secureStorage.write(key: 'theme', value: themeName);
+    final newTheme = themes.firstWhere(
+      (t) => t.name == themeName,
+      orElse: () => CustomTheme(name: 'f0ck', theme: f0ckTheme),
+    );
+    state = newTheme.theme;
+  }
+}
+
+final themeNotifierProvider = StateNotifierProvider<ThemeNotifier, ThemeData>((
+  ref,
+) {
+  return ThemeNotifier(
+    secureStorage: FlutterSecureStorage(
+      aOptions: AndroidOptions(encryptedSharedPreferences: true),
+    ),
+  );
+});
+
+class CustomTheme {
+  final String name;
+  final ThemeData theme;
+
+  CustomTheme({required this.name, required this.theme});
+}
+
+final List<CustomTheme> themes = [
+  CustomTheme(name: 'f0ck', theme: f0ckTheme),
+  CustomTheme(name: 'Paper', theme: paperTheme),
+  CustomTheme(name: 'Orange', theme: orangeTheme),
+  CustomTheme(name: 'Amoled', theme: amoledTheme),
+  CustomTheme(name: 'f0ck95', theme: f0ck95Theme),
+  CustomTheme(name: 'f0ck95d', theme: f0ck95dTheme),
+];
+
+final ThemeData f0ckTheme = ThemeData(
+  brightness: Brightness.dark,
+  primaryColor: const Color(0xFF9FFF00),
+  scaffoldBackgroundColor: const Color(0xFF000000),
+  colorScheme: const ColorScheme.dark(
+    primary: Color(0xFF9FFF00),
+    secondary: Color(0xFF262626),
+    surface: Color(0xFF232323),
+    onPrimary: Color(0xFF000000),
+    onSecondary: Colors.white,
+    onSurface: Colors.white,
+  ),
+  appBarTheme: const AppBarTheme(
+    backgroundColor: Color(0xFF2B2B2B),
+    foregroundColor: Color(0xFF9FFF00),
+    elevation: 2,
+  ),
+  textTheme: const TextTheme(
+    bodyLarge: TextStyle(color: Colors.white),
+    bodyMedium: TextStyle(color: Colors.white),
+  ),
+  buttonTheme: ButtonThemeData(
+    buttonColor: const Color(0xFF9FFF00),
+    textTheme: ButtonTextTheme.primary,
+  ),
+  scrollbarTheme: ScrollbarThemeData(
+    thumbColor: WidgetStatePropertyAll<Color>(Color(0xFF2B2B2B)),
+    trackColor: WidgetStatePropertyAll<Color>(Color(0xFF424242)),
+  ),
+);
+
+final ThemeData paperTheme = ThemeData(
+  brightness: Brightness.light,
+  primaryColor: const Color(0xFF000000),
+  scaffoldBackgroundColor: const Color(0xFFFFFFFF),
+  colorScheme: const ColorScheme.light(
+    primary: Color(0xFF000000),
+    secondary: Color(0xFF262626),
+    surface: Color(0xFFFFFFFF),
+    onPrimary: Colors.white,
+    onSecondary: Colors.white,
+    onSurface: Color(0xFF000000),
+  ),
+  appBarTheme: const AppBarTheme(
+    backgroundColor: Color(0xFFFFFFFF),
+    foregroundColor: Color(0xFF000000),
+    elevation: 0,
+  ),
+  textTheme: const TextTheme(
+    bodyLarge: TextStyle(color: Color(0xFF000000)),
+    bodyMedium: TextStyle(color: Color(0xFF000000)),
+  ),
+  buttonTheme: ButtonThemeData(
+    buttonColor: const Color(0xFF000000),
+    textTheme: ButtonTextTheme.primary,
+  ),
+);
+
+final ThemeData orangeTheme = ThemeData(
+  brightness: Brightness.dark,
+  primaryColor: const Color(0xFFFF6F00),
+  scaffoldBackgroundColor: const Color(0xFF171717),
+  colorScheme: const ColorScheme.dark(
+    primary: Color(0xFFFF6F00),
+    secondary: Color(0xFF262626),
+    surface: Color(0xFF232323),
+    onPrimary: Colors.white,
+    onSecondary: Colors.white,
+    onSurface: Colors.white,
+  ),
+  appBarTheme: const AppBarTheme(
+    backgroundColor: Color(0xFF2B2B2B),
+    foregroundColor: Color(0xFFFF6F00),
+    elevation: 2,
+  ),
+  textTheme: const TextTheme(
+    bodyLarge: TextStyle(color: Colors.white),
+    bodyMedium: TextStyle(color: Colors.white),
+  ),
+  buttonTheme: ButtonThemeData(
+    buttonColor: const Color(0xFFFF6F00),
+    textTheme: ButtonTextTheme.primary,
+  ),
+  scrollbarTheme: ScrollbarThemeData(
+    thumbColor: WidgetStatePropertyAll<Color>(Color(0xFF2B2B2B)),
+    trackColor: WidgetStatePropertyAll<Color>(Color(0xFF424242)),
+  ),
+);
+
+final ThemeData amoledTheme = ThemeData(
+  brightness: Brightness.dark,
+  primaryColor: const Color(0xFFFFFFFF),
+  scaffoldBackgroundColor: const Color(0xFF000000),
+  canvasColor: const Color(0xFF000000),
+  cardColor: const Color(0xFF000000),
+  colorScheme: const ColorScheme.dark(
+    primary: Color(0xFFFFFFFF),
+    secondary: Color(0xFF1F1F1F),
+    surface: Color(0xFF000000),
+    onPrimary: Color(0xFF000000),
+    onSecondary: Colors.white,
+    onSurface: Colors.white,
+  ),
+  appBarTheme: const AppBarTheme(
+    backgroundColor: Color(0xFF000000),
+    foregroundColor: Colors.white,
+    elevation: 2,
+  ),
+  textTheme: const TextTheme(
+    bodyLarge: TextStyle(color: Colors.white),
+    bodyMedium: TextStyle(color: Colors.white),
+  ),
+  buttonTheme: ButtonThemeData(
+    buttonColor: const Color(0xFFFFFFFF),
+    textTheme: ButtonTextTheme.primary,
+  ),
+  scrollbarTheme: ScrollbarThemeData(
+    thumbColor: WidgetStateProperty.all<Color>(const Color(0xFF1D1C1C)),
+    trackColor: WidgetStateProperty.all<Color>(const Color(0xFF000000)),
+  ),
+);
+
+final ThemeData f0ck95Theme = ThemeData(
+  brightness: Brightness.light,
+  primaryColor: const Color(0xFFC0C0C0),
+  scaffoldBackgroundColor: const Color(0xFF008080),
+  colorScheme: const ColorScheme.light(
+    primary: Color(0xFFC0C0C0),
+    secondary: Color(0xFF808080),
+    surface: Color(0xFFC0C0C0),
+    onPrimary: Colors.black,
+    onSecondary: Colors.white,
+  ),
+  appBarTheme: const AppBarTheme(
+    backgroundColor: Color(0xFFC0C0C0),
+    foregroundColor: Colors.black,
+    elevation: 2,
+  ),
+  textTheme: const TextTheme(
+    bodyLarge: TextStyle(color: Colors.black),
+    bodyMedium: TextStyle(color: Colors.black),
+  ),
+  buttonTheme: ButtonThemeData(
+    buttonColor: Colors.black,
+    textTheme: ButtonTextTheme.primary,
+  ),
+  scrollbarTheme: ScrollbarThemeData(
+    thumbColor: WidgetStatePropertyAll<Color>(Color(0xFF2B2B2B)),
+    trackColor: WidgetStatePropertyAll<Color>(Color(0xFF424242)),
+  ),
+);
+
+final ThemeData f0ck95dTheme = ThemeData(
+  brightness: Brightness.dark,
+  primaryColor: const Color(0xFFFFFFFF),
+  scaffoldBackgroundColor: const Color(0xFF0E0F0F),
+  colorScheme: const ColorScheme.dark(
+    primary: Color(0xFFFFFFFF),
+    secondary: Color(0xFFC0C0C0),
+    surface: Color(0xFF333131),
+    onPrimary: Colors.black,
+    onSecondary: Colors.white,
+  ),
+  appBarTheme: const AppBarTheme(
+    backgroundColor: Color(0xFF0B0A0A),
+    foregroundColor: Colors.white,
+    elevation: 2,
+  ),
+  textTheme: const TextTheme(
+    bodyLarge: TextStyle(color: Colors.white),
+    bodyMedium: TextStyle(color: Colors.white),
+  ),
+  buttonTheme: ButtonThemeData(
+    buttonColor: Colors.white,
+    textTheme: ButtonTextTheme.primary,
+  ),
+  scrollbarTheme: ScrollbarThemeData(
+    thumbColor: WidgetStatePropertyAll<Color>(Color(0xFF2B2B2B)),
+    trackColor: WidgetStatePropertyAll<Color>(Color(0xFF424242)),
+  ),
+);

lib/screens/DetailView.dart

@@ -1,59 +1,64 @@
+import 'dart:io';
+import 'dart:typed_data';
+
 import 'package:flutter/material.dart';
+
 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_cache_manager/flutter_cache_manager.dart';
+import 'package:share_plus/share_plus.dart';
+
 import 'package:f0ckapp/models/MediaItem.dart';
-import 'package:f0ckapp/services/Api.dart';
 import 'package:f0ckapp/widgets/VideoWidget.dart';
 import 'package:f0ckapp/utils/SmartRefreshIndicator.dart';
 import 'package:f0ckapp/utils/PageTransformer.dart';
+import 'package:f0ckapp/providers/MediaProvider.dart';
 
-class DetailView extends StatefulWidget {
+class DetailView extends ConsumerStatefulWidget {
   final int initialItemId;
-  final List<MediaItem> mediaItems;
-  final String type;
-  final int mode;
-  final bool random;
 
-  const DetailView({
-    super.key,
-    required this.initialItemId,
-    required this.mediaItems,
-    required this.type,
-    required this.mode,
-    required this.random,
-  });
+  const DetailView({super.key, required this.initialItemId});
 
   @override
-  State createState() => _DetailViewState();
+  ConsumerState<DetailView> createState() => _DetailViewState();
 }
 
-class _DetailViewState extends State<DetailView> {
+class _DetailViewState extends ConsumerState<DetailView> {
   late PageController _pageController;
-  late List<MediaItem> mediaItems;
-  int currentItemId = 0;
   bool isLoading = false;
+  int _currentIndex = 0;
 
   @override
   void initState() {
     super.initState();
-    mediaItems = widget.mediaItems;
-    final initialIndex = mediaItems.indexWhere(
+
+    final mediaState = ref.read(mediaProvider);
+    final initialIndex = mediaState.mediaItems.indexWhere(
       (item) => item.id == widget.initialItemId,
     );
     _pageController = PageController(initialPage: initialIndex);
-    currentItemId = mediaItems[initialIndex].id;
+    _currentIndex = initialIndex;
 
-    _pageController.addListener(_onPageScroll);
+    _pageController.addListener(() {
+      setState(() => _currentIndex = _pageController.page?.round() ?? 0);
+    });
+
+    _preloadAdjacentMedia(initialIndex);
   }
 
-  void _onPageScroll() {
-    final newIndex = _pageController.page?.round();
-    if (newIndex != null && newIndex < mediaItems.length) {
-      setState(() => currentItemId = mediaItems[newIndex].id);
+  void _preloadAdjacentMedia(int index) async {
+    final mediaState = ref.read(mediaProvider);
+    if (index + 1 < mediaState.mediaItems.length) {
+      final nextUrl = mediaState.mediaItems[index + 1].mediaUrl;
+      if (await DefaultCacheManager().getFileFromCache(nextUrl) == null) {
+        await DefaultCacheManager().downloadFile(nextUrl);
+      }
     }
-
-    if (_pageController.position.pixels >=
-        _pageController.position.maxScrollExtent - 100) {
-      _loadMoreMedia();
+    if (index - 1 >= 0) {
+      final prevUrl = mediaState.mediaItems[index - 1].mediaUrl;
+      if (await DefaultCacheManager().getFileFromCache(prevUrl) == null) {
+        await DefaultCacheManager().downloadFile(prevUrl);
+      }
     }
   }
 
@@ -62,95 +67,163 @@ class _DetailViewState extends State<DetailView> {
     setState(() => isLoading = true);
 
     try {
-      final newMedia = await fetchMedia(
-        older: mediaItems.last.id.toString(),
-        type: widget.type,
-        mode: widget.mode,
-        random: widget.random,
-      );
-      if (mounted && newMedia.isNotEmpty) {
-        setState(() => mediaItems.addAll(newMedia));
-      }
+      await ref.read(mediaProvider.notifier).loadMedia();
     } catch (e) {
-      _showError("Fehler beim Laden weiterer Medien: $e");
+      _showError("Fehler beim Laden der Medien: $e");
     } finally {
       setState(() => isLoading = false);
     }
   }
 
-  Future<void> _refreshMediaItem() async {
-    try {
-      final updatedItem = await fetchMediaDetail(currentItemId);
-      if (mounted) {
-        final index = mediaItems.indexWhere((item) => item.id == currentItemId);
-        if (index != -1) {
-          setState(() => mediaItems[index] = updatedItem);
-        }
-      }
-    } catch (e) {
-      _showError("Fehler beim Aktualisieren des Items: $e");
-    }
+  void _showError(String message) {
+    if (!mounted) return;
+    ScaffoldMessenger.of(context)
+      ..removeCurrentSnackBar()
+      ..showSnackBar(SnackBar(content: Text(message)));
   }
 
-  void _showError(String message) {
-    if (mounted) {
-      ScaffoldMessenger.of(
-        context,
-      ).showSnackBar(SnackBar(content: Text(message)));
-    }
+  @override
+  void dispose() {
+    _pageController.dispose();
+    super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
+    final mediaState = ref.watch(mediaProvider);
+    final mediaNotifier = ref.read(mediaProvider.notifier);
+
+    if (mediaState.mediaItems.isEmpty) {
+      return Scaffold(
+        appBar: AppBar(),
+        body: const Center(child: CircularProgressIndicator()),
+      );
+    }
+
     return Scaffold(
-      backgroundColor: const Color(0xFF171717),
       appBar: AppBar(
-        backgroundColor: const Color(0xFF2B2B2B),
-        foregroundColor: Colors.white,
-        title: Text('f0ck #$currentItemId (${widget.type})'),
         centerTitle: true,
-      ),
-      body: PageTransformer(
-        controller: _pageController,
-        pages: mediaItems.map((item) {
-          return Scaffold(
-            body: SafeArea(
-              child: SmartRefreshIndicator(
-                onRefresh: _refreshMediaItem,
-                child: _buildMediaItem(item),
+        title: Text('f0ck #${mediaState.mediaItems[_currentIndex].id}'),
+        actions: [
+          IconButton(
+            icon: Icon(Icons.download),
+            onPressed: () {
+              // wip
+            },
+          ),
+          PopupMenuButton<String>(
+            onSelected: (value) async {
+              final item = mediaState.mediaItems[_currentIndex];
+              switch (value) {
+                case 'media':
+                  File file = await DefaultCacheManager().getSingleFile(
+                    item.mediaUrl,
+                  );
+                  Uint8List bytes = await file.readAsBytes();
+                  final params = ShareParams(
+                    files: [XFile.fromData(bytes, mimeType: item.mime)],
+                  );
+                  await SharePlus.instance.share(params);
+                  break;
+                case 'direct_link':
+                  await SharePlus.instance.share(
+                    ShareParams(text: item.mediaUrl),
+                  );
+                  break;
+                case 'post_link':
+                  await SharePlus.instance.share(
+                    ShareParams(text: item.postUrl),
+                  );
+                  break;
+              }
+            },
+            itemBuilder: (context) => [
+              PopupMenuItem(
+                value: 'media',
+                child: ListTile(
+                  leading: const Icon(Icons.image),
+                  title: const Text('Als Datei'),
+                ),
               ),
-            ),
-          );
-        }).toList(),
+              PopupMenuItem(
+                value: 'direct_link',
+                child: ListTile(
+                  leading: const Icon(Icons.link),
+                  title: const Text('Link zur Datei'),
+                ),
+              ),
+              PopupMenuItem(
+                value: 'post_link',
+                child: ListTile(
+                  leading: const Icon(Icons.article),
+                  title: const Text('Link zum f0ck'),
+                ),
+              ),
+            ],
+            icon: const Icon(Icons.share),
+          ),
+        ],
       ),
+      body: Stack(
+        children: [
+          PageTransformer(
+            controller: _pageController,
+            pages: mediaState.mediaItems.map((item) {
+              int itemIndex = mediaState.mediaItems.indexOf(item);
+              return SafeArea(
+                child: SmartRefreshIndicator(
+                  onRefresh: _loadMoreMedia,
+                  child: _buildMediaItem(item, _currentIndex == itemIndex),
+                ),
+              );
+            }).toList(),
+          ),
+        ],
+      ),
+      persistentFooterButtons: mediaState.tag != null
+          ? [
+              Center(
+                child: InputChip(
+                  label: Text(mediaState.tag!),
+                  onDeleted: () {
+                    mediaNotifier.setTag(null);
+                    Navigator.pop(context);
+                  },
+                ),
+              ),
+            ]
+          : null,
     );
   }
 
-  Widget _buildMediaItem(MediaItem item) {
+  Widget _buildMediaItem(MediaItem item, bool isActive) {
+    final mediaNotifier = ref.read(mediaProvider.notifier);
+
     return SingleChildScrollView(
       child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
         children: [
           if (item.mime.startsWith('image'))
             CachedNetworkImage(
               imageUrl: item.mediaUrl,
               fit: BoxFit.contain,
-              placeholder: (context, url) => CircularProgressIndicator(),
-              errorWidget: (context, url, error) => Icon(Icons.error),
+              placeholder: (context, url) => const CircularProgressIndicator(),
+              errorWidget: (context, url, error) => const Icon(Icons.error),
             )
           else
-            VideoWidget(details: item),
-          const SizedBox(height: 20),
-          Text(
-            item.mime,
-            style: const TextStyle(color: Colors.white, fontSize: 18),
-          ),
+            VideoWidget(details: item, isActive: isActive),
           const SizedBox(height: 10, width: double.infinity),
           Wrap(
             alignment: WrapAlignment.center,
             spacing: 5.0,
             children: item.tags.map((tag) {
-              return Chip(
+              return ActionChip(
+                onPressed: () {
+                  if (tag.tag == 'sfw' || tag.tag == 'nsfw') return;
+                  setState(() {
+                    mediaNotifier.setTag(tag.tag);
+                    Navigator.pop(context, true);
+                  });
+                },
                 label: Text(tag.tag),
                 backgroundColor: switch (tag.id) {
                   1 => Colors.green,

lib/screens/MediaGrid.dart

@@ -1,270 +1,314 @@
-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';
-import 'package:f0ckapp/screens/DetailView.dart';
-import 'dart:async';
 
-class MediaGrid extends StatefulWidget {
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import 'package:f0ckapp/screens/DetailView.dart';
+import 'package:f0ckapp/providers/MediaProvider.dart';
+import 'package:f0ckapp/utils/AppVersion.dart';
+import 'package:f0ckapp/providers/ThemeProvider.dart';
+
+const List<String> mediaTypes = ["alles", "image", "video", "audio"];
+const List<String> mediaModes = ["sfw", "nsfw", "untagged", "all"];
+
+class MediaGrid extends ConsumerStatefulWidget {
   const MediaGrid({super.key});
 
   @override
-  State createState() => _MediaGridState();
+  ConsumerState<MediaGrid> createState() => _MediaGridState();
 }
 
-class _MediaGridState extends State<MediaGrid> {
+class _MediaGridState extends ConsumerState<MediaGrid> {
   final ScrollController _scrollController = ScrollController();
-  final String _version = '1.0.22+22';
-  List<MediaItem> mediaItems = [];
-  bool isLoading = false;
-  Timer? _debounceTimer;
-  Completer<void>? _navigationCompleter;
-  int _crossAxisCount = 0;
-  String _selectedType = 'alles';
-  int _selectedMode = 0;
-  bool _random = false;
-  final List<String> _modes = ["sfw", "nsfw", "untagged", "all"];
+  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
+
+  final TextEditingController _usernameController = TextEditingController();
+  final TextEditingController _passwordController = TextEditingController();
+
+  int _calculateCrossAxisCount(BuildContext context, int defaultCount) {
+    return defaultCount == 0
+        ? (MediaQuery.of(context).size.width / 110).clamp(3, 5).toInt()
+        : defaultCount;
+  }
 
   @override
   void initState() {
     super.initState();
-    _loadMedia();
+    Future.microtask(() {
+      ref.read(mediaProvider.notifier).loadMedia();
+    });
     _scrollController.addListener(() {
       if (_scrollController.position.pixels >=
-          _scrollController.position.maxScrollExtent - 100) {
-        _debounceLoadMedia();
+          _scrollController.position.maxScrollExtent - 200) {
+        ref.read(mediaProvider.notifier).loadMedia();
       }
     });
   }
 
-  void _debounceLoadMedia() {
-    _debounceTimer?.cancel();
-    _debounceTimer = Timer(const Duration(milliseconds: 500), _loadMedia);
-  }
-
-  int _calculateCrossAxisCount(BuildContext context) {
-    if (_crossAxisCount != 0) {
-      return _crossAxisCount;
-    }
-
-    double screenWidth = MediaQuery.of(context).size.width;
-    int columnCount = (screenWidth / 110).clamp(3, 5).toInt();
-
-    return columnCount;
-  }
-
-  Future<void> _loadMedia() async {
-    if (isLoading) return;
-    setState(() => isLoading = true);
-
-    try {
-      final newMedia = await fetchMedia(
-        older: mediaItems.isNotEmpty ? mediaItems.last.id.toString() : null,
-        type: _selectedType,
-        mode: _selectedMode,
-        random: _random,
-      );
-      if (mounted) {
-        setState(() => mediaItems.addAll(newMedia));
-      }
-    } catch (e) {
-      if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(content: Text('Fehler beim Laden der Medien: $e')),
-        );
-      }
-    } finally {
-      if (mounted) setState(() => isLoading = false);
-    }
-  }
-
-  Future<void> _refreshMedia() async {
-    setState(() => isLoading = true);
-    try {
-      final freshMedia = await fetchMedia(
-        older: null,
-        type: _selectedType,
-        mode: _selectedMode,
-        random: _random,
-      );
-      if (mounted) {
-        setState(() {
-          mediaItems.clear();
-          mediaItems.addAll(freshMedia);
-        });
-      }
-    } catch (e) {
-      if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(content: Text('Fehler beim Aktualisieren: $e')),
-        );
-      }
-    } finally {
-      if (mounted) setState(() => isLoading = false);
-    }
-  }
-
-  Future<void> _navigateToDetail(MediaItem item) async {
-    if (_navigationCompleter?.isCompleted == false) return;
-
-    _navigationCompleter = Completer();
-    try {
-      if (mounted) {
-        await Navigator.push(
-          context,
-          MaterialPageRoute(
-            builder: (context) => DetailView(
-              initialItemId: item.id,
-              mediaItems: mediaItems,
-              type: _selectedType,
-              mode: _selectedMode,
-              random: _random,
-            ),
-          ),
-        );
-      }
-    } catch (e) {
-      if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(content: Text('Fehler beim Laden der Details: $e')),
-        );
-      }
-    } finally {
-      _navigationCompleter?.complete();
-    }
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    _usernameController.dispose();
+    _passwordController.dispose();
+    super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
+    final mediaState = ref.watch(mediaProvider);
+    final mediaNotifier = ref.read(mediaProvider.notifier);
+
     return Scaffold(
+      key: _scaffoldKey,
       appBar: AppBar(
-        centerTitle: true,
-        backgroundColor: const Color.fromARGB(255, 43, 43, 43),
-        foregroundColor: const Color.fromARGB(255, 255, 255, 255),
-        title: Row(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          children: [
-            Text('f0ck v$_version'),
-            Checkbox(
-              value: _random,
-              onChanged: (bool? value) {
-                setState(() {
-                  _random = !_random;
-                  _refreshMedia();
-                });
-              },
-            )
-          ]
-        )
-      ),
-      bottomNavigationBar: BottomAppBar(
-        color: const Color.fromARGB(255, 43, 43, 43),
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 16.0),
+        title: GestureDetector(
           child: Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            crossAxisAlignment: CrossAxisAlignment.end,
+            spacing: 10,
             children: [
-              DropdownButton<String>(
-                value: _selectedType,
-                dropdownColor: const Color.fromARGB(255, 43, 43, 43),
-                iconEnabledColor: Colors.white,
-                items: ["alles", "image", "video", "audio"].map((String value) {
-                  return DropdownMenuItem<String>(
-                    value: value,
-                    child: Text(value, style: TextStyle(color: Colors.white)),
-                  );
-                }).toList(),
-                onChanged: (String? newValue) {
-                  if (newValue != null) {
-                    setState(() {
-                      _selectedType = newValue;
-                      _refreshMedia();
-                    });
-                  }
-                },
-              ),
-              DropdownButton<String>(
-                value: _modes[_selectedMode],
-                dropdownColor: const Color.fromARGB(255, 43, 43, 43),
-                iconEnabledColor: Colors.white,
-                items: _modes.map((String value) {
-                  return DropdownMenuItem<String>(
-                    value: value,
-                    child: Text(value, style: TextStyle(color: Colors.white)),
-                  );
-                }).toList(),
-                onChanged: (String? newValue) {
-                  if (newValue != null) {
-                    setState(() {
-                      _selectedMode = _modes.indexOf(newValue);
-                      _refreshMedia();
-                    });
-                  }
-                },
-              ),
-              DropdownButton<int>(
-                value: _crossAxisCount,
-                dropdownColor: const Color.fromARGB(255, 43, 43, 43),
-                iconEnabledColor: Colors.white,
-                items: [0, 3, 4].map((int value) {
-                  return DropdownMenuItem<int>(
-                    value: value,
-                    child: Text(
-                      value == 0 ? 'auto' : '$value Spalten',
-                      style: TextStyle(color: Colors.white),
-                    ),
-                  );
-                }).toList(),
-                onChanged: (int? newValue) {
-                  if (newValue != null) {
-                    setState(() {
-                      _crossAxisCount = newValue;
-                    });
-                  }
-                },
+              Image.asset(
+                'assets/images/f0ck_small.webp',
+                fit: BoxFit.fitHeight,
               ),
+              Text('fApp', style: TextStyle(fontSize: 24)),
             ],
           ),
+          onTap: () {
+            mediaNotifier.setTag(null);
+            _scrollController.jumpTo(0);
+          },
+        ),
+        actions: [
+          IconButton(
+            icon: Icon(
+              mediaState.random ? Icons.shuffle_on_outlined : Icons.shuffle,
+            ),
+            onPressed: () {
+              mediaNotifier.toggleRandom();
+              _scrollController.jumpTo(0);
+            },
+          ),
+          IconButton(
+            icon: const Icon(Icons.menu),
+            onPressed: () {
+              _scaffoldKey.currentState?.openEndDrawer();
+            },
+          ),
+        ],
+      ),
+      bottomNavigationBar: BottomAppBar(
+        height: 50,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceAround,
+          children: [
+            const Text('type: '),
+            DropdownButton<String>(
+              value: mediaTypes[mediaState.typeIndex],
+              isDense: true,
+              items: mediaTypes.map((String value) {
+                return DropdownMenuItem<String>(
+                  value: value,
+                  child: Text(value),
+                );
+              }).toList(),
+              onChanged: (String? newValue) {
+                if (newValue != null) {
+                  mediaNotifier.setType(newValue);
+                  _scrollController.jumpTo(0);
+                }
+              },
+            ),
+            const Text('mode: '),
+            DropdownButton<String>(
+              value: mediaModes[mediaState.modeIndex],
+              isDense: true,
+              items: mediaModes.map((String value) {
+                return DropdownMenuItem<String>(
+                  value: value,
+                  child: Text(value),
+                );
+              }).toList(),
+              onChanged: (String? newValue) {
+                if (newValue != null) {
+                  mediaNotifier.setMode(mediaModes.indexOf(newValue));
+                  _scrollController.jumpTo(0);
+                }
+              },
+            ),
+          ],
         ),
       ),
+      endDrawer: Drawer(
+        child: ListView(
+          padding: EdgeInsets.zero,
+          children: [
+            DrawerHeader(
+              decoration: const BoxDecoration(
+                image: DecorationImage(
+                  image: AssetImage('assets/images/menu.webp'),
+                  fit: BoxFit.cover,
+                  alignment: Alignment.topCenter,
+                ),
+              ),
+              child: null,
+            ),
+            ExpansionTile(
+              title: const Text('Login'),
+              children: [
+                Padding(
+                  padding: const EdgeInsets.all(16.0),
+                  child: Column(
+                    children: [
+                      TextField(
+                        readOnly: true,
+                        controller: _usernameController,
+                        decoration: const InputDecoration(
+                          labelText: 'Benutzername',
+                        ),
+                      ),
+                      const SizedBox(height: 10),
+                      TextField(
+                        readOnly: true,
+                        controller: _passwordController,
+                        obscureText: true,
+                        decoration: const InputDecoration(
+                          labelText: 'Passwort',
+                        ),
+                      ),
+                      const SizedBox(height: 20),
+                      ElevatedButton(
+                        onPressed: () async {
+                          ScaffoldMessenger.of(context).showSnackBar(
+                            const SnackBar(
+                              content: Text("noch nicht implementiert lol"),
+                            ),
+                            /*final success = await login(
+                              _usernameController.text,
+                              _passwordController.text,
+                            );
+
+                            if (success) {
+                              Navigator.pop(context);
+                            } else {
+                              ScaffoldMessenger.of(context).showSnackBar(
+                                SnackBar(content: Text("Login fehlgeschlagen!")),
+                              );
+                            }*/
+                          );
+                        },
+                        child: const Text('Login'),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+            ExpansionTile(
+              title: const Text('Theme'),
+              children: [
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
+                  child: Column(
+                    children: themes.map((themeData) {
+                      final currentTheme = ref.watch(themeNotifierProvider);
+                      final isSelected = currentTheme == themeData.theme;
+                      return ListTile(
+                        title: Text(themeData.name),
+                        selected: isSelected,
+                        selectedTileColor: Colors.blue.withValues(alpha: 0.2),
+                        onTap: () async {
+                          await ref
+                              .read(themeNotifierProvider.notifier)
+                              .updateTheme(themeData.name);
+                        },
+                      );
+                    }).toList(),
+                  ),
+                ),
+              ],
+            ),
+
+            ListTile(
+              title: Text('v${AppVersion.version}'),
+              onTap: () {
+                ScaffoldMessenger.of(context).showSnackBar(
+                  const SnackBar(
+                    content: Text('jooong lass das, hier ist nichts'),
+                  ),
+                );
+              },
+            ),
+          ],
+        ),
+      ),
+      persistentFooterButtons: mediaState.tag != null
+          ? [
+              Center(
+                child: InputChip(
+                  label: Text(mediaState.tag!),
+                  onDeleted: () {
+                    mediaNotifier.setTag(null);
+                    _scrollController.jumpTo(0);
+                  },
+                ),
+              ),
+            ]
+          : null,
       body: RefreshIndicator(
-        onRefresh: _refreshMedia,
+        onRefresh: () async {
+          mediaNotifier.resetMedia();
+          _scrollController.jumpTo(0);
+        },
         child: GridView.builder(
+          key: const PageStorageKey('mediaGrid'),
           controller: _scrollController,
           gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-            crossAxisCount: _calculateCrossAxisCount(context),
+            crossAxisCount: _calculateCrossAxisCount(
+              context,
+              mediaState.crossAxisCount,
+            ),
             crossAxisSpacing: 5.0,
             mainAxisSpacing: 5.0,
           ),
-          itemCount: mediaItems.length + (isLoading ? 1 : 0),
+          itemCount:
+              mediaState.mediaItems.length + (mediaState.isLoading ? 1 : 0),
           itemBuilder: (context, index) {
-            if (index >= mediaItems.length) {
+            if (index >= mediaState.mediaItems.length) {
               return const Center(child: CircularProgressIndicator());
             }
-            final item = mediaItems[index];
+            final item = mediaState.mediaItems[index];
 
             return InkWell(
-              onTap: () => _navigateToDetail(item),
+              onTap: () async {
+                bool? ret = await Navigator.push(
+                  context,
+                  MaterialPageRoute(
+                    builder: (context) => DetailView(initialItemId: item.id),
+                  ),
+                );
+                if (ret != null && ret) {
+                  _scrollController.jumpTo(0);
+                }
+              },
               child: Stack(
                 fit: StackFit.expand,
                 children: <Widget>[
                   CachedNetworkImage(
                     imageUrl: item.thumbnailUrl,
                     fit: BoxFit.cover,
-                    placeholder: (context, url) => SizedBox.shrink(),
-                    errorWidget: (context, url, error) => Icon(Icons.error),
+                    placeholder: (context, url) => const SizedBox.shrink(),
+                    errorWidget: (context, url, error) =>
+                        const Icon(Icons.error),
                   ),
                   Align(
-                    alignment: FractionalOffset.bottomRight,
+                    alignment: Alignment.bottomRight,
                     child: Icon(
                       Icons.square,
                       color: switch (item.mode) {
                         1 => Colors.green,
                         2 => Colors.red,
-                        _ => Colors.yellow
+                        _ => Colors.yellow,
                       },
-                      size: 15.0
+                      size: 15.0,
                     ),
                   ),
                 ],
@@ -275,11 +319,4 @@ class _MediaGridState extends State<MediaGrid> {
       ),
     );
   }
-
-  @override
-  void dispose() {
-    _scrollController.dispose();
-    _debounceTimer?.cancel();
-    super.dispose();
-  }
 }

lib/services/Api.dart

@@ -1,20 +1,26 @@
 import 'dart:convert';
+
 import 'package:http/http.dart' as http;
+import 'package:flutter_secure_storage/flutter_secure_storage.dart';
 
 import 'package:f0ckapp/models/MediaItem.dart';
 
+final storage = FlutterSecureStorage();
+
 Future<List<MediaItem>> fetchMedia({
-  String? older,
+  int? older,
   String? type,
   int? mode,
   bool? random,
+  String? tag,
 }) async {
   final Uri url = Uri.parse('https://api.f0ck.me/items/get').replace(
     queryParameters: {
       'type': type ?? 'image',
       'mode': (mode ?? 0).toString(),
       'random': (random! ? 1 : 0).toString(),
-      if (older != null) 'older': older,
+      if (tag != null) 'tag': tag,
+      if (older != null) 'older': older.toString(),
     },
   );
 
@@ -41,3 +47,23 @@ Future<MediaItem> fetchMediaDetail(int itemId) async {
     );
   }
 }
+
+Future<bool> login(String username, String password) async {
+  final Uri url = Uri.parse('https://api.f0ck.me/login');
+
+  final response = await http.post(
+    url,
+    body: {'username': username, 'password': password},
+  );
+
+  if (response.statusCode == 200) {
+    final data = jsonDecode(response.body);
+    final token = data['token'];
+
+    await storage.write(key: "token", value: token);
+
+    return true;
+  } else {
+    return false;
+  }
+}

lib/utils/AppVersion.dart

@@ -0,0 +1,10 @@
+import 'package:package_info_plus/package_info_plus.dart';
+
+class AppVersion {
+  static String version = "";
+
+  static Future<void> init() async {
+    PackageInfo packageInfo = await PackageInfo.fromPlatform();
+    version = '${packageInfo.version}+${packageInfo.buildNumber}';
+  }
+}

lib/widgets/VideoOverlay.dart

@@ -1,8 +1,12 @@
 import 'package:flutter/material.dart';
-import 'package:video_player/video_player.dart';
 
-class VideoControlsOverlay extends StatelessWidget {
-  final VideoPlayerController controller;
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:cached_video_player_plus/cached_video_player_plus.dart';
+
+import 'package:f0ckapp/providers/MediaProvider.dart';
+
+class VideoControlsOverlay extends ConsumerWidget {
+  final CachedVideoPlayerPlusController controller;
   final VoidCallback button;
 
   const VideoControlsOverlay({
@@ -12,19 +16,42 @@ class VideoControlsOverlay extends StatelessWidget {
   });
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, ref) {
+    final mediaState = ref.watch(mediaProvider);
+    final mediaNotifier = ref.read(mediaProvider.notifier);
+
     return Stack(
       alignment: Alignment.center,
       children: [
+        Positioned(
+          right: 12,
+          top: 12,
+          child: _ControlButton(
+            mediaState.muted ? Icons.volume_off : Icons.volume_up,
+            () {
+              button();
+              mediaNotifier.toggleMute();
+            },
+            size: 16,
+          ),
+        ),
+        Positioned(
+          right: 12,
+          bottom: 12,
+          child: _ControlButton(Icons.fullscreen, () {
+            button();
+          }, size: 16),
+        ),
         Center(
           child: Row(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               _ControlButton(Icons.replay_10, () {
                 button();
-                controller.seekTo(
-                  controller.value.position - Duration(seconds: 10),
-                );
+                Duration newPosition =
+                    controller.value.position - const Duration(seconds: 10);
+                if (newPosition < Duration.zero) newPosition = Duration.zero;
+                controller.seekTo(newPosition);
               }),
               SizedBox(width: 40),
               _ControlButton(
@@ -40,17 +67,75 @@ class VideoControlsOverlay extends StatelessWidget {
               SizedBox(width: 40),
               _ControlButton(Icons.forward_10, () {
                 button();
-                controller.seekTo(
-                  controller.value.position + Duration(seconds: 10),
-                );
+                Duration newPosition =
+                    controller.value.position + const Duration(seconds: 10);
+                if (newPosition > controller.value.duration) {
+                  newPosition = controller.value.duration;
+                }
+                controller.seekTo(newPosition);
               }),
             ],
           ),
         ),
-        _ProgressIndicator(controller: controller)
+        Align(
+          alignment: Alignment.bottomCenter,
+          child: Padding(
+            padding: const EdgeInsets.only(bottom: 0),
+            child: Stack(
+              clipBehavior: Clip.none,
+              children: [
+                Positioned(
+                  left: 10,
+                  bottom: 12,
+                  child: Text(
+                    '${_formatDuration(controller.value.position)} / ${_formatDuration(controller.value.duration)}',
+                    style: TextStyle(color: Colors.white),
+                  ),
+                ),
+                Listener(
+                  onPointerDown: (_) {
+                    button();
+                  },
+                  child: VideoProgressIndicator(
+                    controller,
+                    allowScrubbing: true,
+                    padding: const EdgeInsets.only(top: 25.0),
+                    colors: const 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),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
       ],
     );
   }
+
+  String _formatDuration(Duration duration) {
+    String twoDigits(int n) => n.toString().padLeft(2, '0');
+    return "${twoDigits(duration.inMinutes % 60)}:${twoDigits(duration.inSeconds % 60)}";
+  }
 }
 
 class _ControlButton extends StatelessWidget {
@@ -74,61 +159,3 @@ class _ControlButton extends StatelessWidget {
     );
   }
 }
-
-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: [
-          VideoProgressIndicator(
-            controller,
-            allowScrubbing: true,
-            padding: const EdgeInsets.only(top: 25.0),
-            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');
-    return "${twoDigits(duration.inMinutes % 60)}:${twoDigits(duration.inSeconds % 60)}";
-  }
-}