feature: Re-implemented syncing

lib/screens/shared/detail_scaffold.dart

@@ -6,7 +6,10 @@ import 'package:iconsax_plus/iconsax_plus.dart';
 
 import 'package:fladder/models/item_base_model.dart';
 import 'package:fladder/models/items/images_models.dart';
+import 'package:fladder/providers/sync/sync_provider_helpers.dart';
 import 'package:fladder/routes/auto_router.gr.dart';
+import 'package:fladder/screens/syncing/sync_button.dart';
+import 'package:fladder/screens/syncing/sync_item_details.dart';
 import 'package:fladder/theme.dart';
 import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
 import 'package:fladder/util/fladder_image.dart';
@@ -196,6 +199,19 @@ class _DetailScaffoldState extends ConsumerState<DetailScaffold> {
                           mainAxisSize: MainAxisSize.min,
                           children: [
                             if (widget.item != null) ...[
+                              ref.watch(syncedItemProvider(widget.item)).when(
+                                    error: (error, stackTrace) => const SizedBox.shrink(),
+                                    data: (syncedItem) {
+                                      if (syncedItem == null) {
+                                        return const SizedBox.shrink();
+                                      }
+                                      return IconButton(
+                                        onPressed: () => showSyncItemDetails(context, syncedItem, ref),
+                                        icon: SyncButton(item: widget.item!, syncedItem: syncedItem),
+                                      );
+                                    },
+                                    loading: () => const SizedBox.shrink(),
+                                  ),
                               Builder(
                                 builder: (context) {
                                   final newActions = widget.actions?.call(context);

lib/screens/shared/fladder_snackbar.dart

@@ -10,6 +10,7 @@ void fladderSnackbar(
   bool showCloseButton = false,
   Duration duration = const Duration(seconds: 3),
 }) {
+  if (!context.mounted) return;
   ScaffoldMessenger.of(context).showSnackBar(SnackBar(
     content: Text(
       title,

lib/screens/shared/media/components/next_up_episode.dart

@@ -4,7 +4,6 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
 
 import 'package:fladder/models/items/episode_model.dart';
-import 'package:fladder/providers/sync_provider.dart';
 import 'package:fladder/screens/details_screens/components/media_stream_information.dart';
 import 'package:fladder/screens/shared/media/episode_posters.dart';
 import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
@@ -31,7 +30,7 @@ class NextUpEpisode extends ConsumerWidget {
         Opacity(
           opacity: 0.75,
           child: SelectableText(
-            "${context.localized.season(1)} ${nextEpisode.season} - ${context.localized.episode(1)} ${nextEpisode.episode}",
+            nextEpisode.seasonEpisodeLabelFull(context),
             style: Theme.of(context).textTheme.titleMedium,
           ),
         ),
@@ -42,13 +41,11 @@ class NextUpEpisode extends ConsumerWidget {
         const SizedBox(height: 16),
         LayoutBuilder(
           builder: (context, constraints) {
-            final syncedItem = ref.read(syncProvider.notifier).getSyncedItem(nextEpisode);
             if (constraints.maxWidth < 550) {
               return Column(
                 children: [
                   EpisodePoster(
                     episode: nextEpisode,
-                    syncedItem: syncedItem,
                     showLabel: false,
                     onTap: () => nextEpisode.navigateTo(context),
                     actions: const [],
@@ -71,7 +68,6 @@ class NextUpEpisode extends ConsumerWidget {
                         maxWidth: MediaQuery.of(context).size.width / 2),
                     child: EpisodePoster(
                       episode: nextEpisode,
-                      syncedItem: syncedItem,
                       showLabel: false,
                       onTap: () => nextEpisode.navigateTo(context),
                       actions: const [],

lib/screens/shared/media/episode_details_list.dart

@@ -1,16 +1,16 @@
+import 'package:flutter/material.dart';
+
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:iconsax_plus/iconsax_plus.dart';
+
+import 'package:fladder/models/items/episode_model.dart';
 import 'package:fladder/providers/settings/client_settings_provider.dart';
-import 'package:fladder/providers/sync_provider.dart';
 import 'package:fladder/screens/shared/media/episode_posters.dart';
 import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
+import 'package:fladder/util/humanize_duration.dart';
 import 'package:fladder/util/item_base_model/item_base_model_extensions.dart';
 import 'package:fladder/util/list_padding.dart';
 import 'package:fladder/util/localization_helper.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-
-import 'package:fladder/models/items/episode_model.dart';
-import 'package:fladder/util/humanize_duration.dart';
 
 enum EpisodeDetailsViewType {
   list(icon: IconsaxPlusBold.grid_6),
@@ -48,14 +48,12 @@ class EpisodeDetailsList extends ConsumerWidget {
             itemCount: episodes.length,
             itemBuilder: (context, index) {
               final episode = episodes[index];
-              final syncedItem = ref.watch(syncProvider.notifier).getSyncedItem(episode);
               List<Widget> children = [
                 Flexible(
                   flex: 1,
                   child: EpisodePoster(
                     episode: episode,
                     showLabel: false,
-                    syncedItem: syncedItem,
                     actions: episode.generateActions(context, ref),
                     onTap: () => episode.navigateTo(context),
                     isCurrentEpisode: false,

lib/screens/shared/media/episode_posters.dart

@@ -3,10 +3,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import 'package:fladder/models/items/episode_model.dart';
-import 'package:fladder/models/syncing/sync_item.dart';
 import 'package:fladder/providers/settings/client_settings_provider.dart';
 import 'package:fladder/providers/sync/sync_provider_helpers.dart';
-import 'package:fladder/providers/sync_provider.dart';
 import 'package:fladder/screens/shared/flat_button.dart';
 import 'package:fladder/screens/syncing/sync_button.dart';
 import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
@@ -88,11 +86,9 @@ class _EpisodePosterState extends ConsumerState<EpisodePosters> {
       itemBuilder: (context, index) {
         final episode = episodes[index];
         final isCurrentEpisode = index == indexOfCurrent;
-        final syncedItem = ref.watch(syncProvider.notifier).getSyncedItem(episode);
         return EpisodePoster(
           episode: episode,
           blur: allPlayed ? false : indexOfCurrent < index,
-          syncedItem: syncedItem,
           onTap: widget.onEpisodeTap != null
               ? () {
                   widget.onEpisodeTap?.call(
@@ -130,7 +126,6 @@ class _EpisodePosterState extends ConsumerState<EpisodePosters> {
 
 class EpisodePoster extends ConsumerWidget {
   final EpisodeModel episode;
-  final SyncedItem? syncedItem;
   final bool showLabel;
   final Function()? onTap;
   final Function()? onLongPress;
@@ -141,7 +136,6 @@ class EpisodePoster extends ConsumerWidget {
   const EpisodePoster({
     super.key,
     required this.episode,
-    this.syncedItem,
     this.showLabel = true,
     this.onTap,
     this.onLongPress,
@@ -156,7 +150,6 @@ class EpisodePoster extends ConsumerWidget {
       color: Theme.of(context).colorScheme.surfaceContainerHighest,
       child: const Icon(Icons.local_movies_outlined),
     );
-    final SyncedItem? iSyncedItem = syncedItem;
     bool episodeAvailable = episode.status == EpisodeStatus.available;
     return AspectRatio(
       aspectRatio: 1.76,
@@ -203,15 +196,18 @@ class EpisodePoster extends ConsumerWidget {
                     child: Row(
                       mainAxisAlignment: MainAxisAlignment.end,
                       children: [
-                        if (iSyncedItem != null)
-                          Consumer(builder: (context, ref, child) {
-                            final SyncStatus syncStatus =
-                                ref.watch(syncStatusesProvider(iSyncedItem, null)).value ?? SyncStatus.partially;
-                            return StatusCard(
-                              color: syncStatus.color,
-                              child: SyncButton(item: episode, syncedItem: syncedItem),
-                            );
-                          }),
+                        ref.watch(syncedItemProvider(episode)).when(
+                              error: (error, stackTrace) => const SizedBox.shrink(),
+                              data: (syncedItem) {
+                                if (syncedItem == null) {
+                                  return const SizedBox.shrink();
+                                }
+                                return StatusCard(
+                                  child: SyncButton(item: episode, syncedItem: syncedItem),
+                                );
+                              },
+                              loading: () => const SizedBox.shrink(),
+                            ),
                         if (episode.userData.isFavourite)
                           const StatusCard(
                             color: Colors.red,
@@ -259,7 +255,7 @@ class EpisodePoster extends ConsumerWidget {
                       child: Align(
                         alignment: Alignment.bottomRight,
                         child: PopupMenuButton(
-                          tooltip: "Options",
+                          tooltip: context.localized.options,
                           icon: const Icon(
                             Icons.more_vert,
                             color: Colors.white,

lib/screens/shared/media/poster_widget.dart

@@ -19,6 +19,7 @@ class PosterWidget extends ConsumerWidget {
   final int maxLines;
   final double? aspectRatio;
   final bool inlineTitle;
+  final bool underTitle;
   final Set<ItemActions> excludeActions;
   final List<ItemAction> otherActions;
   final Function(String id, UserData? newData)? onUserDataChanged;
@@ -33,6 +34,7 @@ class PosterWidget extends ConsumerWidget {
       this.heroTag,
       this.aspectRatio,
       this.inlineTitle = false,
+      this.underTitle = true,
       this.excludeActions = const {},
       this.otherActions = const [],
       this.onUserDataChanged,
@@ -64,7 +66,7 @@ class PosterWidget extends ConsumerWidget {
               onPressed: onPressed,
             ),
           ),
-          if (!inlineTitle)
+          if (!inlineTitle && underTitle)
             Column(
               mainAxisSize: MainAxisSize.min,
               crossAxisAlignment: CrossAxisAlignment.stretch,

lib/screens/shared/media/season_row.dart

@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import 'package:fladder/models/items/season_model.dart';
-import 'package:fladder/providers/sync_provider.dart';
+import 'package:fladder/providers/sync/sync_provider_helpers.dart';
 import 'package:fladder/screens/shared/flat_button.dart';
 import 'package:fladder/screens/syncing/sync_button.dart';
 import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
@@ -58,7 +58,6 @@ class SeasonPoster extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final syncedItem = ref.watch(syncProvider.notifier).getSyncedItem(season);
     Padding placeHolder(String title) {
       return Padding(
         padding: const EdgeInsets.all(4),
@@ -100,19 +99,25 @@ class SeasonPoster extends ConsumerWidget {
                       alignment: Alignment.topLeft,
                       child: placeHolder(season.name),
                     ),
-                  if (season.userData.unPlayedItemCount != 0)
-                    Align(
-                      alignment: Alignment.topRight,
-                      child: Row(
-                        mainAxisAlignment: MainAxisAlignment.end,
-                        children: [
-                          if (syncedItem != null)
-                            StatusCard(
-                              child: SyncButton(
-                                item: season,
-                                syncedItem: syncedItem,
-                              ),
+                  Align(
+                    alignment: Alignment.topRight,
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.end,
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        ref.watch(syncedItemProvider(season)).when(
+                              error: (error, stackTrace) => const SizedBox.shrink(),
+                              data: (syncedItem) {
+                                if (syncedItem == null) {
+                                  return const SizedBox.shrink();
+                                }
+                                return StatusCard(
+                                  child: SyncButton(item: season, syncedItem: syncedItem),
+                                );
+                              },
+                              loading: () => const SizedBox.shrink(),
                             ),
+                        if (season.userData.unPlayedItemCount != 0)
                           StatusCard(
                             color: Theme.of(context).colorScheme.primary,
                             useFittedBox: true,
@@ -122,20 +127,20 @@ class SeasonPoster extends ConsumerWidget {
                                 style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 14),
                               ),
                             ),
+                          )
+                        else
+                          Align(
+                            alignment: Alignment.topRight,
+                            child: StatusCard(
+                              color: Theme.of(context).colorScheme.primary,
+                              child: const Icon(
+                                Icons.check_rounded,
+                              ),
+                            ),
                           ),
-                        ],
-                      ),
-                    )
-                  else
-                    Align(
-                      alignment: Alignment.topRight,
-                      child: StatusCard(
-                        color: Theme.of(context).colorScheme.primary,
-                        child: const Icon(
-                          Icons.check_rounded,
-                        ),
-                      ),
+                      ],
                     ),
+                  ),
                   LayoutBuilder(
                     builder: (context, constraints) {
                       return FlatButton(