feat(offline+post): Offline Mode Overhaul & Post Details Screen Redesign (v2.2.0)

2026-09-04 11:40:19 +03:00
parent c6a9dcb4d5
commit f603c37c91
11 changed files with 1305 additions and 253 deletions
@@ -12,6 +12,7 @@ class PostActionBar extends StatelessWidget {
    this.onDeleteLocalFile,
    this.onShare,
    this.downloaded = false,
+    this.isDownloading = false,
    this.labels,
    this.onSimilar,
    this.onHide,
@@ -30,76 +31,268 @@ class PostActionBar extends StatelessWidget {
  final VoidCallback? onSimilar;
  final VoidCallback? onHide;
  final bool downloaded;
+  final bool isDownloading;
  final PostActionLabels? labels;

+  void _showMoreActions(BuildContext context, PostActionLabels text) {
+    final scheme = Theme.of(context).colorScheme;
+
+    showModalBottomSheet<void>(
+      context: context,
+      showDragHandle: true,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
+      ),
+      builder: (sheetContext) => SafeArea(
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              // Copy Link
+              ListTile(
+                leading: Container(
+                  padding: const EdgeInsets.all(8),
+                  decoration: BoxDecoration(
+                    color: scheme.surfaceContainerHighest,
+                    borderRadius: BorderRadius.circular(10),
+                  ),
+                  child: const Icon(Icons.copy_rounded, size: 20),
+                ),
+                title: Text(text.copyLink),
+                onTap: () {
+                  Navigator.pop(sheetContext);
+                  onCopy();
+                },
+              ),
+              // Open Original in Browser
+              ListTile(
+                leading: Container(
+                  padding: const EdgeInsets.all(8),
+                  decoration: BoxDecoration(
+                    color: scheme.surfaceContainerHighest,
+                    borderRadius: BorderRadius.circular(10),
+                  ),
+                  child: const Icon(Icons.open_in_new_rounded, size: 20),
+                ),
+                title: Text(text.openOriginal),
+                onTap: () {
+                  Navigator.pop(sheetContext);
+                  onOpen();
+                },
+              ),
+              // Open Source Page
+              if (onOpenSource != null)
+                ListTile(
+                  leading: Container(
+                    padding: const EdgeInsets.all(8),
+                    decoration: BoxDecoration(
+                      color: scheme.surfaceContainerHighest,
+                      borderRadius: BorderRadius.circular(10),
+                    ),
+                    child: const Icon(Icons.article_rounded, size: 20),
+                  ),
+                  title: Text(text.openSource),
+                  onTap: () {
+                    Navigator.pop(sheetContext);
+                    onOpenSource!();
+                  },
+                ),
+              // Find Similar
+              if (onSimilar != null)
+                ListTile(
+                  leading: Container(
+                    padding: const EdgeInsets.all(8),
+                    decoration: BoxDecoration(
+                      color: scheme.primaryContainer.withValues(alpha: 0.5),
+                      borderRadius: BorderRadius.circular(10),
+                    ),
+                    child: Icon(Icons.auto_awesome_rounded,
+                        size: 20, color: scheme.primary),
+                  ),
+                  title: Text(text.similar),
+                  onTap: () {
+                    Navigator.pop(sheetContext);
+                    onSimilar!();
+                  },
+                ),
+              const Divider(height: 16),
+              // Delete Local File (if downloaded)
+              if (downloaded && onDeleteLocalFile != null)
+                ListTile(
+                  leading: Container(
+                    padding: const EdgeInsets.all(8),
+                    decoration: BoxDecoration(
+                      color: scheme.errorContainer.withValues(alpha: 0.4),
+                      borderRadius: BorderRadius.circular(10),
+                    ),
+                    child: Icon(Icons.delete_outline_rounded,
+                        size: 20, color: scheme.error),
+                  ),
+                  title: Text(
+                    text.deleteLocalFile,
+                    style: TextStyle(color: scheme.error),
+                  ),
+                  onTap: () {
+                    Navigator.pop(sheetContext);
+                    onDeleteLocalFile!();
+                  },
+                ),
+              // Hide Post
+              if (onHide != null)
+                ListTile(
+                  leading: Container(
+                    padding: const EdgeInsets.all(8),
+                    decoration: BoxDecoration(
+                      color: scheme.surfaceContainerHighest,
+                      borderRadius: BorderRadius.circular(10),
+                    ),
+                    child: const Icon(Icons.visibility_off_rounded, size: 20),
+                  ),
+                  title: Text(text.hidePost),
+                  onTap: () {
+                    Navigator.pop(sheetContext);
+                    onHide!();
+                  },
+                ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
  @override
  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
    final text = labels ?? const PostActionLabels();
-    return Wrap(
-      spacing: 8,
-      runSpacing: 8,
-      children: [
-        FilledButton.icon(
-          onPressed: onFavorite,
-          icon: Icon(
-            isFavorite ? Icons.favorite_rounded : Icons.favorite_border_rounded,
-          ),
-          label: Text(isFavorite ? text.unfavorite : text.favorite),
+
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+      decoration: BoxDecoration(
+        color: scheme.surfaceContainerLow,
+        borderRadius: BorderRadius.circular(20),
+        border: Border.all(
+          color: scheme.outlineVariant.withValues(alpha: 0.3),
        ),
-        FilledButton.tonalIcon(
-          onPressed: onCollection,
-          icon: const Icon(Icons.add_rounded),
-          label: Text(text.collection),
-        ),
-        if (onSimilar != null)
-          FilledButton.tonalIcon(
-            onPressed: onSimilar,
-            icon: const Icon(Icons.auto_awesome_rounded),
-            label: Text(text.similar),
-          ),
-        IconButton.filledTonal(
-          tooltip: text.openOriginal,
-          onPressed: onOpen,
-          icon: const Icon(Icons.open_in_new_rounded),
-        ),
-        if (onOpenSource != null)
-          IconButton.filledTonal(
-            tooltip: text.openSource,
-            onPressed: onOpenSource,
-            icon: const Icon(Icons.article_rounded),
-          ),
-        IconButton.filledTonal(
-          tooltip: text.copyLink,
-          onPressed: onCopy,
-          icon: const Icon(Icons.copy_rounded),
-        ),
-        if (onDownload != null)
-          IconButton.filledTonal(
-            tooltip: text.download,
-            onPressed: onDownload,
-            icon: Icon(
-              downloaded ? Icons.download_done_rounded : Icons.download_rounded,
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: [
+          // Favorite / Like Button
+          Expanded(
+            flex: 3,
+            child: FilledButton.tonalIcon(
+              style: FilledButton.styleFrom(
+                backgroundColor: isFavorite
+                    ? Colors.redAccent.withValues(alpha: 0.18)
+                    : scheme.secondaryContainer.withValues(alpha: 0.5),
+                foregroundColor:
+                    isFavorite ? Colors.redAccent : scheme.onSecondaryContainer,
+                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(14),
+                ),
+              ),
+              onPressed: onFavorite,
+              icon: Icon(
+                isFavorite
+                    ? Icons.favorite_rounded
+                    : Icons.favorite_border_rounded,
+                size: 20,
+                color: isFavorite ? Colors.redAccent : null,
+              ),
+              label: Text(
+                isFavorite ? text.unfavorite : text.favorite,
+                style: const TextStyle(fontWeight: FontWeight.w600),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
            ),
          ),
-        if (downloaded && onDeleteLocalFile != null)
-          IconButton.filledTonal(
-            tooltip: text.deleteLocalFile,
-            onPressed: onDeleteLocalFile,
-            icon: const Icon(Icons.delete_sweep_rounded),
+          const SizedBox(width: 8),
+
+          // Download Button with Status
+          if (onDownload != null) ...[
+            _ActionButton(
+              tooltip: downloaded ? text.downloaded : text.download,
+              icon: isDownloading
+                  ? SizedBox(
+                      width: 18,
+                      height: 18,
+                      child: CircularProgressIndicator(
+                        strokeWidth: 2,
+                        color: scheme.primary,
+                      ),
+                    )
+                  : Icon(
+                      downloaded
+                          ? Icons.offline_pin_rounded
+                          : Icons.download_rounded,
+                      color: downloaded ? Colors.green : null,
+                      size: 22,
+                    ),
+              onTap: onDownload!,
+            ),
+            const SizedBox(width: 6),
+          ],
+
+          // Add to Collection
+          _ActionButton(
+            tooltip: text.collection,
+            icon: const Icon(Icons.bookmark_add_rounded, size: 22),
+            onTap: onCollection,
          ),
-        if (onHide != null)
-          IconButton.filledTonal(
-            tooltip: text.hidePost,
-            onPressed: onHide,
-            icon: const Icon(Icons.visibility_off_rounded),
+          const SizedBox(width: 6),
+
+          // Share
+          if (onShare != null) ...[
+            _ActionButton(
+              tooltip: text.share,
+              icon: const Icon(Icons.share_rounded, size: 22),
+              onTap: onShare!,
+            ),
+            const SizedBox(width: 6),
+          ],
+
+          // More Options Bottom Sheet
+          _ActionButton(
+            tooltip: text.more,
+            icon: const Icon(Icons.more_horiz_rounded, size: 22),
+            onTap: () => _showMoreActions(context, text),
          ),
-        if (onShare != null)
-          IconButton.filledTonal(
-            tooltip: text.share,
-            onPressed: onShare,
-            icon: const Icon(Icons.share_rounded),
-          ),
-      ],
+        ],
+      ),
+    );
+  }
+}
+
+class _ActionButton extends StatelessWidget {
+  const _ActionButton({
+    required this.tooltip,
+    required this.icon,
+    required this.onTap,
+  });
+
+  final String tooltip;
+  final Widget icon;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    return IconButton(
+      tooltip: tooltip,
+      onPressed: onTap,
+      icon: icon,
+      style: IconButton.styleFrom(
+        backgroundColor: scheme.secondaryContainer.withValues(alpha: 0.35),
+        foregroundColor: scheme.onSecondaryContainer,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(14),
+        ),
+        minimumSize: const Size(44, 44),
+      ),
    );
  }
 }
@@ -107,16 +300,18 @@ class PostActionBar extends StatelessWidget {
 class PostActionLabels {
  const PostActionLabels({
    this.favorite = 'Favorite',
-    this.unfavorite = 'Unfavorite',
+    this.unfavorite = 'Saved',
    this.collection = 'Collection',
    this.similar = 'Similar',
    this.openOriginal = 'Open original',
    this.openSource = 'Open source/page',
    this.copyLink = 'Copy link',
    this.download = 'Download',
+    this.downloaded = 'Downloaded',
    this.deleteLocalFile = 'Delete local file',
    this.hidePost = 'Hide post locally',
    this.share = 'Share',
+    this.more = 'More',
  });

  final String favorite;
@@ -127,7 +322,9 @@ class PostActionLabels {
  final String openSource;
  final String copyLink;
  final String download;
+  final String downloaded;
  final String deleteLocalFile;
  final String hidePost;
  final String share;
+  final String more;
 }
@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:io';

 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:dio/dio.dart';
@@ -17,6 +18,7 @@ final Map<String, VideoPlaybackSnapshot> _playbackMemory =
 class PostMediaViewer extends StatefulWidget {
  const PostMediaViewer({
    required this.post,
+    this.localFilePath,
    this.fullscreen = false,
    this.initialPosition = Duration.zero,
    this.autoplay = false,
@@ -33,6 +35,7 @@ class PostMediaViewer extends StatefulWidget {
  });

  final Post post;
+  final String? localFilePath;
  final bool fullscreen;
  final Duration initialPosition;
  final bool autoplay;
@@ -208,23 +211,40 @@ class _PostMediaViewerState extends State<PostMediaViewer>
    }

    final url = _imageUrls.isEmpty ? '' : _imageUrls[_imageIndex];
+    final isLocal = url.startsWith('/') || url.startsWith('file://');
    final headers = _headersFor(widget.post);
-    final image = CachedNetworkImage(
-      key: ValueKey(url),
-      imageUrl: url,
-      httpHeaders: headers,
-      fit: BoxFit.contain,
-      placeholder: (context, url) =>
-          const Center(child: CircularProgressIndicator()),
-      errorWidget: (context, url, error) {
-        return _DioImageFallback(
-          imageUrl: url,
+    final Widget image;
+    if (isLocal) {
+      final cleanPath =
+          url.startsWith('file://') ? url.replaceFirst('file://', '') : url;
+      image = Image.file(
+        File(cleanPath),
+        fit: BoxFit.contain,
+        errorBuilder: (context, error, stackTrace) => _DioImageFallback(
+          imageUrl: _imageUrls.length > 1 ? _imageUrls[1] : '',
          headers: headers,
          fit: BoxFit.contain,
          onFailed: _advanceImageFallback,
-        );
-      },
-    );
+        ),
+      );
+    } else {
+      image = CachedNetworkImage(
+        key: ValueKey(url),
+        imageUrl: url,
+        httpHeaders: headers,
+        fit: BoxFit.contain,
+        placeholder: (context, url) =>
+            const Center(child: CircularProgressIndicator()),
+        errorWidget: (context, url, error) {
+          return _DioImageFallback(
+            imageUrl: url,
+            headers: headers,
+            fit: BoxFit.contain,
+            onFailed: _advanceImageFallback,
+          );
+        },
+      );
+    }
    final child = Stack(
      alignment: Alignment.center,
      children: [
@@ -325,10 +345,13 @@ class _PostMediaViewerState extends State<PostMediaViewer>
    try {
      setState(() => _videoError = null);
      await player.stop();
+      final currentSource = _videoUrls[_videoIndex];
+      final isLocal =
+          currentSource.startsWith('/') || currentSource.startsWith('file://');
      await player.open(
        Media(
-          _videoUrls[_videoIndex],
-          httpHeaders: _headersFor(widget.post),
+          currentSource,
+          httpHeaders: isLocal ? null : _headersFor(widget.post),
        ),
        play: false,
      );
@@ -349,43 +372,35 @@ class _PostMediaViewerState extends State<PostMediaViewer>
    }
    // If format error occurred on initial load (often due to async referer headers), retry once automatically
    if (!_retriedFormatError &&
-        (message.toLowerCase().contains('format') ||
-            message.toLowerCase().contains('recognize'))) {
+        (message.contains('Failed to recognize file format') ||
+            message.contains('Demuxer error') ||
+            message.contains('Could not open') ||
+            message.contains('Stream format not recognized') ||
+            message.contains('format unrecognized'))) {
      _retriedFormatError = true;
-      await Future<void>.delayed(const Duration(milliseconds: 350));
-      if (!mounted) return;
-      _videoIndex = 0;
-      await _openVideo(play: play);
-      return;
+      await Future<void>.delayed(const Duration(milliseconds: 300));
+      if (mounted && _player != null) {
+        _videoIndex = 0;
+        await _openVideo(play: play);
+        return;
+      }
+    }
+    if (mounted) {
+      setState(() => _videoError = message);
    }
-    if (!mounted) return;
-    setState(() => _videoError = message);
-    _showControls();
  }

  Future<void> _retryVideo() async {
-    final player = _player;
-    if (player == null) return;
-    setState(() {
-      _videoError = null;
-      _videoIndex = 0;
-      _retriedFormatError = false;
-      _controlsVisible = true;
-    });
-    await player.stop();
+    _videoIndex = 0;
+    _retriedFormatError = false;
    await _openVideo(play: true);
-    _showControls();
  }

  void _disposeVideo() {
    _hideTimer?.cancel();
-    _hideTimer = null;
    _errorSubscription?.cancel();
-    _errorSubscription = null;
    _positionSubscription?.cancel();
-    _positionSubscription = null;
    _playingSubscription?.cancel();
-    _playingSubscription = null;
    final snapshot = _snapshot();
    _playbackMemory[widget.post.cacheKey] = snapshot;
    widget.onPlaybackSnapshot?.call(snapshot);
@@ -395,11 +410,21 @@ class _PostMediaViewerState extends State<PostMediaViewer>
  }

  List<String> _buildImageUrls(Post post) {
-    return MediaUrlSelector.details(post, mode: widget.qualityMode);
+    final list = MediaUrlSelector.details(post, mode: widget.qualityMode);
+    final local = widget.localFilePath;
+    if (local != null && local.isNotEmpty && File(local).existsSync()) {
+      return [local, ...list];
+    }
+    return list;
  }

  List<String> _buildVideoUrls(Post post) {
-    return MediaUrlSelector.video(post);
+    final list = MediaUrlSelector.video(post);
+    final local = widget.localFilePath;
+    if (local != null && local.isNotEmpty && File(local).existsSync()) {
+      return [local, ...list];
+    }
+    return list;
  }

  bool _isVideo(Post post) {