Merge pull request #651 from lamarios/feature/add-fallback-for-thumbn…

…ails add fallback to make sure the thumbnail fails as little as possible
lamarios · Dec 15, 2024 · 4dd37be · 4dd37be
2 parents e6bf7eb + 3e8e663
commit 4dd37be
Show file tree

Hide file tree

Showing 26 changed files with 466 additions and 240 deletions.
diff --git a/lib/channels/views/components/info.dart b/lib/channels/views/components/info.dart
@@ -1,15 +1,15 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_gen/gen_l10n/app_localizations.dart';
-import 'package:flutter_linkify/flutter_linkify.dart';
 import 'package:clipious/channels/models/channel.dart';
 import 'package:clipious/globals.dart';
 import 'package:clipious/utils.dart';
+import 'package:clipious/utils/views/components/thumbnail.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:flutter_linkify/flutter_linkify.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 import '../../../subscription_management/view/components/subscribe_button.dart';
 import '../../../utils/models/image_object.dart';
 import '../../../videos/views/components/video_in_list.dart';
-import '../../../videos/views/components/video_thumbnail.dart';
 
 class ChannelInfo extends StatelessWidget {
   final Channel channel;
@@ -30,9 +30,8 @@ class ChannelInfo extends StatelessWidget {
           Thumbnail(
               width: 50,
               height: 50,
-              thumbnailUrl:
-                  ImageObject.getBestThumbnail(channel.authorThumbnails)?.url ??
-                      '',
+              thumbnails: ImageObject.getThumbnailUrlsByPreferredOrder(
+                  channel.authorThumbnails),
               decoration: BoxDecoration(
                 color: colors.secondaryContainer,
                 shape: BoxShape.circle,
@@ -104,7 +103,7 @@ class ChannelInfo extends StatelessWidget {
                 height: deviceType == DeviceType.phone ? 100 : 230,
                 child: Thumbnail(
                     width: double.infinity,
-                    thumbnailUrl: bannerUrl,
+                    thumbnails: [bannerUrl],
                     decoration: BoxDecoration(
                         color: colors.secondaryContainer,
                         borderRadius: BorderRadius.circular(10))),

diff --git a/lib/channels/views/tv/screens/channel.dart b/lib/channels/views/tv/screens/channel.dart
@@ -2,25 +2,25 @@ import 'dart:ui';
 
 import 'package:auto_route/annotations.dart';
 import 'package:cached_network_image/cached_network_image.dart';
-import 'package:clipious/videos/models/video.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:clipious/app/views/tv/screens/tv_home.dart';
 import 'package:clipious/channels/states/channel.dart';
 import 'package:clipious/globals.dart';
 import 'package:clipious/subscription_management/view/tv/tv_subscribe_button.dart';
 import 'package:clipious/utils/models/image_object.dart';
 import 'package:clipious/utils/models/paginated_list.dart';
 import 'package:clipious/utils/views/components/placeholders.dart';
+import 'package:clipious/utils/views/components/thumbnail.dart';
 import 'package:clipious/utils/views/tv/components/tv_expandable_text.dart';
 import 'package:clipious/utils/views/tv/components/tv_horizontal_item_list.dart';
 import 'package:clipious/utils/views/tv/components/tv_overscan.dart';
+import 'package:clipious/videos/models/video.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 import '../../../../playlists/models/playlist.dart';
 import '../../../../playlists/views/components/playlist_in_list.dart';
 import '../../../../utils.dart';
-import '../../../../videos/views/components/video_thumbnail.dart';
 import '../../../states/tv_channel.dart';
 
 @RoutePage()
@@ -119,12 +119,11 @@ class TvChannelScreen extends StatelessWidget {
                                                           MainAxisSize.min,
                                                       children: [
                                                         Thumbnail(
-                                                          thumbnailUrl:
-                                                              ImageObject.getBestThumbnail(channel
-                                                                          .channel
-                                                                          ?.authorThumbnails)
-                                                                      ?.url ??
-                                                                  '',
+                                                          thumbnails: ImageObject
+                                                              .getThumbnailUrlsByPreferredOrder(
+                                                                  channel
+                                                                      .channel
+                                                                      ?.authorThumbnails),
                                                           width: 70,
                                                           height: 70,
                                                           decoration: BoxDecoration(

diff --git a/lib/comments/views/components/comment.dart b/lib/comments/views/components/comment.dart
@@ -1,13 +1,13 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:clipious/videos/models/video.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:clipious/comments/states/single_comment.dart';
 import 'package:clipious/comments/views/components/comments.dart';
 import 'package:clipious/router.dart';
 import 'package:clipious/utils/views/components/text_linkified.dart';
-import 'package:clipious/videos/views/components/video_thumbnail.dart';
+import 'package:clipious/utils/views/components/thumbnail.dart';
+import 'package:clipious/videos/models/video.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 import '../../../player/states/player.dart';
 import '../../../utils/models/image_object.dart';
@@ -49,10 +49,8 @@ class SingleCommentView extends StatelessWidget {
                     child: Thumbnail(
                       width: 20,
                       height: 20,
-                      thumbnailUrl: ImageObject.getBestThumbnail(
-                                  state.comment.authorThumbnails)
-                              ?.url ??
-                          '',
+                      thumbnails: ImageObject.getThumbnailUrlsByPreferredOrder(
+                          state.comment.authorThumbnails),
                       decoration: BoxDecoration(
                           borderRadius: BorderRadius.circular(20)),
                     ),

diff --git a/lib/home/models/db/home_layout.g.dart b/lib/home/models/db/home_layout.g.dart
diff --git a/lib/player/views/components/audio_player.dart b/lib/player/views/components/audio_player.dart
@@ -1,9 +1,8 @@
-import 'package:clipious/utils/models/image_object.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:clipious/player/views/components/player_controls.dart';
 import 'package:clipious/settings/states/settings.dart';
 import 'package:clipious/videos/views/components/offline_video_thumbnail.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 
 import '../../../downloads/models/downloaded_video.dart';
 import '../../../videos/models/video.dart';
@@ -49,11 +48,7 @@ class AudioPlayer extends StatelessWidget {
                     ? VideoThumbnailView(
                         decoration: const BoxDecoration(),
                         videoId: playerState.video!.videoId,
-                        thumbnailUrl: playerState.video?.deArrowThumbnailUrl ??
-                            ImageObject.getBestThumbnail(
-                                    playerState.video?.videoThumbnails ?? [])
-                                ?.url ??
-                            '',
+                        thumbnails: playerState.video?.thumbnails ?? [],
                       )
                     : playerState.offlineVideo != null
                         ? OfflineVideoThumbnail(

diff --git a/lib/player/views/tv/components/player_controls.dart b/lib/player/views/tv/components/player_controls.dart
@@ -1,18 +1,18 @@
-import 'package:clipious/videos/models/video.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:clipious/player/states/tv_player_controls.dart';
 import 'package:clipious/player/views/tv/components/player_settings.dart';
+import 'package:clipious/utils/views/components/thumbnail.dart';
 import 'package:clipious/utils/views/tv/components/tv_button.dart';
 import 'package:clipious/utils/views/tv/components/tv_horizontal_item_list.dart';
 import 'package:clipious/utils/views/tv/components/tv_overscan.dart';
+import 'package:clipious/videos/models/video.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 import '../../../../globals.dart';
 import '../../../../utils.dart';
 import '../../../../utils/models/image_object.dart';
 import '../../../../utils/models/paginated_list.dart';
-import '../../../../videos/views/components/video_thumbnail.dart';
 import '../../../states/player.dart';
 
 class TvPlayerControls extends StatelessWidget {
@@ -107,12 +107,10 @@ class TvPlayerControls extends StatelessWidget {
                                         mainAxisSize: MainAxisSize.min,
                                         children: [
                                           Thumbnail(
-                                            thumbnailUrl:
-                                                ImageObject.getBestThumbnail(
-                                                            currentlyPlaying
-                                                                ?.authorThumbnails)
-                                                        ?.url ??
-                                                    '',
+                                            thumbnails: ImageObject
+                                                .getThumbnailUrlsByPreferredOrder(
+                                                    currentlyPlaying
+                                                        ?.authorThumbnails),
                                             width: 40,
                                             height: 40,
                                             decoration: BoxDecoration(

diff --git a/lib/playlists/views/components/playlist_in_list.dart b/lib/playlists/views/components/playlist_in_list.dart
@@ -70,7 +70,6 @@ class PlaylistInList extends StatelessWidget {
                           padding: const EdgeInsets.all(8.0),
                           child: PlaylistThumbnails(
                             videos: state.videos,
-                            bestThumbnails: isTv,
                           ),
                         )),
                     Text(
@@ -118,7 +117,6 @@ class PlaylistInList extends StatelessWidget {
                                         height: 140,
                                         child: PlaylistThumbnails(
                                           videos: state.videos,
-                                          bestThumbnails: isTv,
                                         )),
                                     Expanded(
                                         child: Text(
@@ -152,7 +150,6 @@ class PlaylistInList extends StatelessWidget {
                   children: [
                     PlaylistThumbnails(
                       videos: state.videos,
-                      bestThumbnails: isTv,
                     ),
                     Text(
                       playlist.title,
@@ -181,7 +178,6 @@ class PlaylistInList extends StatelessWidget {
                           padding: const EdgeInsets.all(8.0),
                           child: PlaylistThumbnails(
                             videos: state.videos,
-                            bestThumbnails: isTv,
                           ),
                         )),
                     Expanded(

diff --git a/lib/playlists/views/components/playlist_inner_view.dart b/lib/playlists/views/components/playlist_inner_view.dart
@@ -42,7 +42,6 @@ class PlaylistInnerView extends StatelessWidget {
                           height: 250,
                           child: PlaylistThumbnails(
                             videos: playlistState.playlist.videos,
-                            bestThumbnails: true,
                             children: playlistState.loading
                                 ? [
                                     Center(

diff --git a/lib/playlists/views/components/playlist_thumbnail.dart b/lib/playlists/views/components/playlist_thumbnail.dart
@@ -1,15 +1,13 @@
-import 'package:clipious/videos/models/video.dart';
-import 'package:flutter/material.dart';
 import 'package:clipious/globals.dart';
 import 'package:clipious/utils/views/components/placeholders.dart';
+import 'package:clipious/videos/models/video.dart';
+import 'package:flutter/material.dart';
 
-import '../../../utils/models/image_object.dart';
 import '../../../videos/views/components/video_thumbnail.dart';
 
 class PlaylistThumbnails extends StatelessWidget {
   final List<Video> videos;
   final List<Widget>? children;
-  final bool bestThumbnails;
   final double scale = 0.7;
   final int maxThumbs;
   final bool isPlaceHolder;
@@ -18,7 +16,6 @@ class PlaylistThumbnails extends StatelessWidget {
       {super.key,
       required this.videos,
       this.children,
-      this.bestThumbnails = false,
       this.maxThumbs = 4,
       this.isPlaceHolder = false});
 
@@ -50,16 +47,7 @@ class PlaylistThumbnails extends StatelessWidget {
                       : videosToUse.length > i
                           ? VideoThumbnailView(
                               videoId: videosToUse[i].videoId,
-                              thumbnailUrl: videosToUse[i]
-                                      .deArrowThumbnailUrl ??
-                                  (bestThumbnails
-                                      ? ImageObject.getBestThumbnail(
-                                              videosToUse[i].videoThumbnails)
-                                          ?.url
-                                      : ImageObject.getWorstThumbnail(
-                                              videosToUse[i].videoThumbnails)
-                                          ?.url) ??
-                                  '',
+                              thumbnails: videosToUse[i].thumbnails,
                             )
                           : const SizedBox.shrink(),
                   secondChild: Container(

diff --git a/lib/playlists/views/tablet/playlist_inner_view.dart b/lib/playlists/views/tablet/playlist_inner_view.dart
@@ -87,7 +87,6 @@ class TabletPlaylistInnerView extends StatelessWidget {
                             : 275,
                         child: PlaylistThumbnails(
                           videos: playlistState.playlist.videos,
-                          bestThumbnails: true,
                           children: playlistState.loading
                               ? [
                                   Center(

diff --git a/lib/playlists/views/tv/screens/playlist.dart b/lib/playlists/views/tv/screens/playlist.dart
@@ -2,10 +2,6 @@ import 'dart:ui';
 
 import 'package:auto_route/auto_route.dart';
 import 'package:carousel_slider/carousel_slider.dart';
-import 'package:clipious/videos/models/video.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:clipious/app/views/tv/screens/tv_home.dart';
 import 'package:clipious/globals.dart';
 import 'package:clipious/playlists/states/playlist.dart';
@@ -14,10 +10,13 @@ import 'package:clipious/router.dart';
 import 'package:clipious/utils/views/components/placeholders.dart';
 import 'package:clipious/utils/views/tv/components/tv_button.dart';
 import 'package:clipious/utils/views/tv/components/tv_overscan.dart';
+import 'package:clipious/videos/models/video.dart';
 import 'package:clipious/videos/views/tv/components/video_item.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 import '../../../../player/states/player.dart';
-import '../../../../utils/models/image_object.dart';
 import '../../../../videos/views/components/video_thumbnail.dart';
 
 @RoutePage()
@@ -57,11 +56,7 @@ class TvPlaylistScreen extends PlaylistViewScreen {
                           return VideoThumbnailView(
                               videoId: video.videoId,
                               decoration: const BoxDecoration(),
-                              thumbnailUrl: video.deArrowThumbnailUrl ??
-                                  ImageObject.getBestThumbnail(
-                                          video.videoThumbnails)
-                                      ?.url ??
-                                  '');
+                              thumbnails: video.thumbnails);
                         },
                         options: CarouselOptions(
                           autoPlayCurve: Curves.easeInOutQuad,