f0ck/fApp
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 51 Wiki Activity

detailview lol

Browse Source
This commit is contained in:
Flummi
2025-06-02 10:47:06 +02:00
parent 0a9c0bac64
commit 9c54010925
9 changed files with 366 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
lib/mediagrid.dart
View File

@ -1,7 +1,7 @@
import 'package:flutter/material.dart';
import 'package:f0ckapp/services/api.dart';
import 'package:f0ckapp/models/mediaitem.dart';
import 'package:f0ckapp/screens/detail.dart';
import 'package:f0ckapp/screens/detailview.dart';
import 'dart:async';
class MediaGrid extends StatefulWidget {
@ -18,6 +18,7 @@ class _MediaGridState extends State<MediaGrid> {
Timer? _debounceTimer;
Completer<void>? _navigationCompleter;
int _crossAxisCount = 3;
String _selectedMode = "alles";
@override
void initState() {
@ -43,6 +44,7 @@ class _MediaGridState extends State<MediaGrid> {
try {
final newMedia = await fetchMedia(
older: mediaItems.isNotEmpty ? mediaItems.last.id.toString() : null,
mode: _selectedMode,
);
if (mounted) {
setState(() => mediaItems.addAll(newMedia));
@ -61,7 +63,7 @@ class _MediaGridState extends State<MediaGrid> {
Future<void> _refreshMedia() async {
setState(() => isLoading = true);
try {
final freshMedia = await fetchMedia(older: null);
final freshMedia = await fetchMedia(older: null, mode: _selectedMode);
if (mounted) {
setState(() {
mediaItems.clear();
@ -80,17 +82,20 @@ class _MediaGridState extends State<MediaGrid> {
}
Future<void> _navigateToDetail(MediaItem item) async {
print('Tapped item: ${item.id}');
if (_navigationCompleter?.isCompleted == false) return;
_navigationCompleter = Completer();
try {
final details = await fetchMediaDetail(item.id);
if (mounted) {
await Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailView(details: details)),
MaterialPageRoute(
builder: (context) => DetailView(
initialItemId: item.id,
mediaItems: mediaItems,
mode: _selectedMode,
),
),
);
}
} catch (e) {
@ -114,6 +119,25 @@ class _MediaGridState extends State<MediaGrid> {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text('f0cks'),
DropdownButton<String>(
value: _selectedMode,
dropdownColor: const Color.fromARGB(255, 43, 43, 43),
iconEnabledColor: const Color.fromARGB(255, 255, 255, 255),
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(() {
_selectedMode = newValue;
_refreshMedia();
});
}
},
),
DropdownButton<int>(
value: _crossAxisCount,
dropdownColor: const Color.fromARGB(255, 43, 43, 43),
@ -121,7 +145,10 @@ class _MediaGridState extends State<MediaGrid> {
items: [3, 4].map((int value) {
return DropdownMenuItem<int>(
value: value,
child: Text('$value Spalten', style: TextStyle(color: Colors.white)),
child: Text(
'$value Spalten',
style: TextStyle(color: Colors.white),
),
);
}).toList(),
onChanged: (int? newValue) {
@ -152,7 +179,7 @@ class _MediaGridState extends State<MediaGrid> {
final item = mediaItems[index];
final mode =
{1: Colors.green, 2: Colors.red}[item.tagid] ?? Colors.yellow;
{1: Colors.green, 2: Colors.red}[item.mode] ?? Colors.yellow;
return InkWell(
onTap: () => _navigateToDetail(item),

40
lib/models/mediaitem.dart
View File

@ -1,17 +1,51 @@
class MediaItem {
final int id;
final String mime;
final int tagid;
final int size;
final int stamp;
final String dest;
final int mode;
final List<Tag> tags;
MediaItem({required this.id, required this.mime, required this.tagid});
MediaItem({
required this.id,
required this.mime,
required this.size,
required this.stamp,
required this.dest,
required this.mode,
required this.tags,
});
factory MediaItem.fromJson(Map<String, dynamic> json) {
return MediaItem(
id: json['id'],
mime: json['mime'],
tagid: json['tag_id'],
size: json['size'],
stamp: json['stamp'],
dest: json['dest'],
mode: json['mode'],
tags: (json['tags'] as List<dynamic>)
.map((tagJson) => Tag.fromJson(tagJson))
.toList(),
);
}
String get thumbnailUrl => 'https://f0ck.me/t/$id.webp';
}
class Tag {
final int id;
final String tag;
final String normalized;
Tag({required this.id, required this.tag, required this.normalized});
factory Tag.fromJson(Map<String, dynamic> json) {
return Tag(
id: json['id'],
tag: json['tag'],
normalized: json['normalized'],
);
}
}

205
lib/screens/detail.dart
View File

@ -1,205 +0,0 @@
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:f0ckapp/models/mediaitem_detail.dart';
import 'package:f0ckapp/services/api.dart';
class DetailView extends StatefulWidget {
final MediaItemDetail details;
const DetailView({super.key, required this.details});
@override
State<DetailView> createState() => _DetailViewState();
}
class _DetailViewState extends State<DetailView> {
late VideoPlayerController _controller;
late Future<void> _initializeVideoPlayer;
bool isAudio = false;
@override
void initState() {
super.initState();
isAudio = widget.details.mime.startsWith("audio/");
_controller = VideoPlayerController.networkUrl(
Uri.parse(widget.details.mediaUrl),
);
if (!widget.details.mime.startsWith("image/")) {
_initializeVideoPlayer = _controller
.initialize()
.then((_) {
setState(() {
_controller.play();
_controller.setLooping(true);
});
})
.catchError((error) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Fehler beim Laden des Videos: $error")),
);
});
}
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
Future<void> _loadNewMediaItem(int itemId, bool swipeLeft) async {
try {
var newDetails = await fetchMediaDetail(itemId);
Navigator.of(context).pushReplacement(
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) =>
DetailView(details: newDetails),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
Offset begin = swipeLeft
? const Offset(-1.0, 0.0)
: const Offset(1.0, 0.0);
const Offset end = Offset.zero;
const curve = Curves.easeInOut;
var tween = Tween(
begin: begin,
end: end,
).chain(CurveTween(curve: curve));
var offsetAnimation = animation.drive(tween);
return SlideTransition(position: offsetAnimation, child: child);
},
),
);
} catch (error) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Fehler beim Laden des Items: $error")),
);
}
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onHorizontalDragEnd: (details) {
if (details.velocity.pixelsPerSecond.dx > 0 && widget.details.next != null) {
_loadNewMediaItem(widget.details.next!, true);
} else if (details.velocity.pixelsPerSecond.dx < 0 && widget.details.prev != null) {
_loadNewMediaItem(widget.details.prev!, false);
}
},
child: Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xFF2B2B2B),
foregroundColor: Colors.white,
title: Text('f0ck #${widget.details.id}'),
centerTitle: true,
),
body: SingleChildScrollView(
child: Column(
children: [
if (widget.details.mime.contains(
RegExp(r'image/(jpeg|png|gif|webp)'),
)) ...[
Image.network(widget.details.mediaUrl),
] else ...[
Stack(
alignment: Alignment.center,
children: [
if (isAudio)
Image.network(
'https://f0ck.me/ca/${widget.details.id}.webp',
),
FutureBuilder(
future: _initializeVideoPlayer,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done &&
_controller.value.isInitialized) {
return AspectRatio(
aspectRatio: isAudio
? 1
: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
);
} else {
return const CircularProgressIndicator();
}
},
),
],
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: VideoProgressIndicator(
_controller,
allowScrubbing: true,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: const Icon(Icons.replay_10),
onPressed: () {
_controller.seekTo(
_controller.value.position -
const Duration(seconds: 10),
);
},
),
IconButton(
icon: Icon(
_controller.value.isPlaying
? Icons.pause
: Icons.play_arrow,
),
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
),
IconButton(
icon: const Icon(Icons.forward_10),
onPressed: () {
_controller.seekTo(
_controller.value.position +
const Duration(seconds: 10),
);
},
),
],
),
],
const SizedBox(height: 16),
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${widget.details.mime}',
style: const TextStyle(fontSize: 16, color: Colors.white),
),
Text(
"Benutzername: ${widget.details.username}",
style: const TextStyle(fontSize: 16, color: Colors.white),
),
Text(
"Zeitstempel: ${widget.details.stamp}",
style: const TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
],
),
),
),
);
}
}

144
lib/screens/detailview.dart Normal file
View File

@ -0,0 +1,144 @@
import 'package:flutter/material.dart';
import 'package:f0ckapp/models/mediaitem.dart';
import 'package:f0ckapp/services/api.dart';
import 'package:f0ckapp/widgets/video_widget.dart';
class DetailView extends StatefulWidget {
final int initialItemId;
final List<MediaItem> mediaItems;
final String mode;
const DetailView({
super.key,
required this.initialItemId,
required this.mediaItems,
required this.mode,
});
@override
State createState() => _DetailViewState();
}
class _DetailViewState extends State<DetailView> {
late PageController _pageController;
late List<MediaItem> mediaItems;
int currentItemId = 0;
bool isLoading = false;
@override
void initState() {
super.initState();
mediaItems = widget.mediaItems;
final initialIndex = mediaItems.indexWhere(
(item) => item.id == widget.initialItemId,
);
_pageController = PageController(initialPage: initialIndex);
currentItemId = mediaItems[initialIndex].id;
_pageController.addListener(() {
final newIndex = _pageController.page?.round();
if (newIndex != null && newIndex < mediaItems.length) {
setState(() => currentItemId = mediaItems[newIndex].id);
}
if (_pageController.position.pixels >=
_pageController.position.maxScrollExtent - 100) {
_loadMoreMedia();
}
});
}
Future<void> _loadMoreMedia() async {
if (isLoading) return;
setState(() => isLoading = true);
try {
final newMedia = await fetchMedia(
older: mediaItems.last.id.toString(),
mode: widget.mode,
);
if (mounted) {
setState(() => mediaItems.addAll(newMedia));
}
} catch (e) {
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Fehler beim Laden weiterer Medien: $e')),
);
}
} finally {
setState(() => isLoading = false);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF171717),
appBar: AppBar(
backgroundColor: const Color(0xFF2B2B2B),
foregroundColor: Colors.white,
title: Text('f0ck #$currentItemId (${widget.mode})'),
centerTitle: true,
),
body: PageView.builder(
controller: _pageController,
itemCount: mediaItems.length + (isLoading ? 1 : 0),
itemBuilder: (context, index) {
if (index >= mediaItems.length) {
return const Center(child: CircularProgressIndicator());
}
final item = mediaItems[index];
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
if (item.mime.startsWith('image')) ...[
Image.network(
'https://f0ck.me/b/${item.dest}',
fit: BoxFit.contain,
),
] else ...[
VideoWidget(details: item),
],
const SizedBox(height: 20),
Text(
item.mime,
style: const TextStyle(color: Colors.white, fontSize: 18),
),
const SizedBox(height: 10),
Wrap(
alignment: WrapAlignment.center,
spacing: 5.0,
children: item.tags.map((tag) {
Color tagColor;
switch (tag.id) {
case 1:
tagColor = Colors.green;
break;
case 2:
tagColor = Colors.red;
break;
default:
tagColor = Color(0xFF090909);
}
return Chip(
label: Text(tag.tag),
backgroundColor: tagColor,
labelStyle: const TextStyle(color: Colors.white),
);
}).toList(),
),
const SizedBox(height: 40),
],
),
);
},
),
);
}
}

14
lib/services/api.dart
View File

@ -4,16 +4,16 @@ import 'package:http/http.dart' as http;
import 'package:f0ckapp/models/mediaitem.dart';
import 'package:f0ckapp/models/mediaitem_detail.dart';
Future<List<MediaItem>> fetchMedia({String? older}) async {
final Uri url = Uri.parse('https://f0ck.me/api/v2/items/get')
.replace(queryParameters: {
if (older != null) 'older': older,
});
Future<List<MediaItem>> fetchMedia({String? older, String? mode}) async {
final Uri url = Uri.parse('https://api.f0ck.me/items/get')
.replace(queryParameters: {
'mode': mode ?? 'image',
if (older != null) 'older': older,
});
final response = await http.get(url);
if (response.statusCode == 200) {
final Map<String, dynamic> jsonResponse = jsonDecode(response.body);
final List<dynamic> jsonList = jsonResponse['items'];
final List<dynamic> jsonList = jsonDecode(response.body);
return jsonList.map((item) => MediaItem.fromJson(item)).toList();
} else {
throw Exception('Fehler beim Abrufen der Medien: ${response.statusCode}');

164
lib/widgets/video_widget.dart
View File

@ -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),
),
],
),
),
],
);
}
}