1.0.22+22

lib/screens/DetailView.dart

@@ -1,9 +1,10 @@
 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';
+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';
 
 class DetailView extends StatefulWidget {
   final int initialItemId;
@@ -109,20 +110,18 @@ class _DetailViewState extends State<DetailView> {
         title: Text('f0ck #$currentItemId (${widget.type})'),
         centerTitle: true,
       ),
-      body: PageView.builder(
+      body: PageTransformer(
         controller: _pageController,
-        itemCount: mediaItems.length,
-        itemBuilder: (context, index) {
-          final MediaItem item = mediaItems[index];
+        pages: mediaItems.map((item) {
           return Scaffold(
             body: SafeArea(
               child: SmartRefreshIndicator(
                 onRefresh: _refreshMediaItem,
-                child: _buildMediaItem(item)
+                child: _buildMediaItem(item),
               ),
             ),
           );
-        },
+        }).toList(),
       ),
     );
   }
@@ -130,6 +129,7 @@ class _DetailViewState extends State<DetailView> {
   Widget _buildMediaItem(MediaItem item) {
     return SingleChildScrollView(
       child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
         children: [
           if (item.mime.startsWith('image'))
             CachedNetworkImage(
@@ -145,7 +145,7 @@ class _DetailViewState extends State<DetailView> {
             item.mime,
             style: const TextStyle(color: Colors.white, fontSize: 18),
           ),
-          const SizedBox(height: 10),
+          const SizedBox(height: 10, width: double.infinity),
           Wrap(
             alignment: WrapAlignment.center,
             spacing: 5.0,
@@ -155,7 +155,7 @@ class _DetailViewState extends State<DetailView> {
                 backgroundColor: switch (tag.id) {
                   1 => Colors.green,
                   2 => Colors.red,
-                  _ => const Color(0xFF090909)
+                  _ => const Color(0xFF090909),
                 },
                 labelStyle: const TextStyle(color: Colors.white),
               );

lib/screens/MediaGrid.dart

@@ -0,0 +1,285 @@
+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 {
+  const MediaGrid({super.key});
+
+  @override
+  State createState() => _MediaGridState();
+}
+
+class _MediaGridState extends State<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"];
+
+  @override
+  void initState() {
+    super.initState();
+    _loadMedia();
+    _scrollController.addListener(() {
+      if (_scrollController.position.pixels >=
+          _scrollController.position.maxScrollExtent - 100) {
+        _debounceLoadMedia();
+      }
+    });
+  }
+
+  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
+  Widget build(BuildContext context) {
+    return Scaffold(
+      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),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            crossAxisAlignment: CrossAxisAlignment.end,
+            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;
+                    });
+                  }
+                },
+              ),
+            ],
+          ),
+        ),
+      ),
+      body: RefreshIndicator(
+        onRefresh: _refreshMedia,
+        child: GridView.builder(
+          controller: _scrollController,
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: _calculateCrossAxisCount(context),
+            crossAxisSpacing: 5.0,
+            mainAxisSpacing: 5.0,
+          ),
+          itemCount: mediaItems.length + (isLoading ? 1 : 0),
+          itemBuilder: (context, index) {
+            if (index >= mediaItems.length) {
+              return const Center(child: CircularProgressIndicator());
+            }
+            final item = mediaItems[index];
+
+            return InkWell(
+              onTap: () => _navigateToDetail(item),
+              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),
+                  ),
+                  Align(
+                    alignment: FractionalOffset.bottomRight,
+                    child: Icon(
+                      Icons.square,
+                      color: switch (item.mode) {
+                        1 => Colors.green,
+                        2 => Colors.red,
+                        _ => Colors.yellow
+                      },
+                      size: 15.0
+                    ),
+                  ),
+                ],
+              ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    _debounceTimer?.cancel();
+    super.dispose();
+  }
+}