From e62a0fc3735e8093c7d332b1c6688f2addf3a5cf Mon Sep 17 00:00:00 2001 From: tommyxchow Date: Sun, 16 Jan 2022 17:31:48 -0500 Subject: [PATCH] Add dynamic sizes for thumbnails and box art --- .../home/search/search_results_categories.dart | 12 +++++++++++- lib/screens/home/top/categories.dart | 12 +++++++++++- lib/screens/home/top/category_streams.dart | 13 ++++++++++++- lib/screens/home/widgets/category_card.dart | 11 +++++++++-- lib/screens/home/widgets/stream_card.dart | 6 +++++- lib/screens/home/widgets/streams_list.dart | 8 ++++++++ 6 files changed, 56 insertions(+), 6 deletions(-) diff --git a/lib/screens/home/search/search_results_categories.dart b/lib/screens/home/search/search_results_categories.dart index 579e2581..53de88f0 100644 --- a/lib/screens/home/search/search_results_categories.dart +++ b/lib/screens/home/search/search_results_categories.dart @@ -13,6 +13,12 @@ class SearchResultsCategories extends StatelessWidget { @override Widget build(BuildContext context) { + final size = MediaQuery.of(context).size; + final pixelRatio = MediaQuery.of(context).devicePixelRatio; + + final artWidth = (size.width * pixelRatio) ~/ 3; + final artHeight = (artWidth * (4 / 3)).toInt(); + return Observer( builder: (context) { final future = searchStore.categoryFuture; @@ -56,7 +62,11 @@ class SearchResultsCategories extends StatelessWidget { children: categories.data .map( (category) => GridTile( - child: CategoryCard(category: category), + child: CategoryCard( + category: category, + width: artWidth, + height: artHeight, + ), ), ) .toList(), diff --git a/lib/screens/home/top/categories.dart b/lib/screens/home/top/categories.dart index ef8dfc6c..6e25ee2e 100644 --- a/lib/screens/home/top/categories.dart +++ b/lib/screens/home/top/categories.dart @@ -24,6 +24,12 @@ class _CategoriesState extends State with AutomaticKeepAliveClientMi super.build(context); final store = widget.store; + final size = MediaQuery.of(context).size; + final pixelRatio = MediaQuery.of(context).devicePixelRatio; + + final artWidth = (size.width * pixelRatio) ~/ 3; + final artHeight = (artWidth * (4 / 3)).toInt(); + return RefreshIndicator( onRefresh: () async { HapticFeedback.lightImpact(); @@ -56,7 +62,11 @@ class _CategoriesState extends State with AutomaticKeepAliveClientMi if (index > store.categories.length / 2 && store.hasMore) { store.getCategories(); } - return CategoryCard(category: store.categories[index]); + return CategoryCard( + category: store.categories[index], + width: artWidth, + height: artHeight, + ); }, ), Observer( diff --git a/lib/screens/home/top/category_streams.dart b/lib/screens/home/top/category_streams.dart index b526bba2..115a1c40 100644 --- a/lib/screens/home/top/category_streams.dart +++ b/lib/screens/home/top/category_streams.dart @@ -16,6 +16,15 @@ class CategoryStreams extends StatelessWidget { @override Widget build(BuildContext context) { + final size = MediaQuery.of(context).size; + final pixelRatio = MediaQuery.of(context).devicePixelRatio; + + final artWidth = (size.width * pixelRatio).toInt(); + final artHeight = (artWidth * (4 / 3)).toInt(); + + final thumbnailWidth = (size.width * pixelRatio) ~/ 3; + final thumbnailHeight = (thumbnailWidth * (9 / 16)).toInt(); + return Scaffold( body: RefreshIndicator( onRefresh: () async { @@ -62,7 +71,7 @@ class CategoryStreams extends StatelessWidget { imageUrl: store.categoryInfo!.boxArtUrl.replaceRange( store.categoryInfo!.boxArtUrl.lastIndexOf('-') + 1, null, - '300x400.jpg', + '${artWidth}x$artHeight.jpg', ), color: const Color.fromRGBO(255, 255, 255, 0.5), colorBlendMode: BlendMode.modulate, @@ -81,6 +90,8 @@ class CategoryStreams extends StatelessWidget { return Observer( builder: (context) => StreamCard( streamInfo: store.streams[index], + width: thumbnailWidth, + height: thumbnailHeight, showUptime: context.read().showThumbnailUptime, ), ); diff --git a/lib/screens/home/widgets/category_card.dart b/lib/screens/home/widgets/category_card.dart index 363d8095..20e978ec 100644 --- a/lib/screens/home/widgets/category_card.dart +++ b/lib/screens/home/widgets/category_card.dart @@ -10,8 +10,15 @@ import 'package:provider/provider.dart'; /// A tappable card widget that displays a category's box art and name. class CategoryCard extends StatelessWidget { final CategoryTwitch category; + final int width; + final int height; - const CategoryCard({Key? key, required this.category}) : super(key: key); + const CategoryCard({ + Key? key, + required this.category, + required this.width, + required this.height, + }) : super(key: key); @override Widget build(BuildContext context) { @@ -35,7 +42,7 @@ class CategoryCard extends StatelessWidget { children: [ Expanded( child: CachedNetworkImage( - imageUrl: category.boxArtUrl.replaceRange(category.boxArtUrl.lastIndexOf('-') + 1, null, '300x400.jpg'), + imageUrl: category.boxArtUrl.replaceRange(category.boxArtUrl.lastIndexOf('-') + 1, null, '${width}x$height.jpg'), ), ), const SizedBox(height: 5.0), diff --git a/lib/screens/home/widgets/stream_card.dart b/lib/screens/home/widgets/stream_card.dart index 3f9d1e19..cc011db7 100644 --- a/lib/screens/home/widgets/stream_card.dart +++ b/lib/screens/home/widgets/stream_card.dart @@ -18,11 +18,15 @@ import 'package:provider/provider.dart'; /// A tappable card widget that displays a stream's thumbnail and details. class StreamCard extends StatelessWidget { final StreamTwitch streamInfo; + final int width; + final int height; final bool showUptime; const StreamCard({ Key? key, required this.streamInfo, + required this.width, + required this.height, required this.showUptime, }) : super(key: key); @@ -32,7 +36,7 @@ class StreamCard extends StatelessWidget { final cacheUrlExtension = time.day.toString() + time.hour.toString() + (time.minute ~/ 5).toString(); final thumbnail = CachedNetworkImage( - imageUrl: streamInfo.thumbnailUrl.replaceFirst('-{width}x{height}', '-440x248') + cacheUrlExtension, + imageUrl: streamInfo.thumbnailUrl.replaceFirst('-{width}x{height}', '-${width}x$height') + cacheUrlExtension, useOldImageOnUrlChange: true, ); diff --git a/lib/screens/home/widgets/streams_list.dart b/lib/screens/home/widgets/streams_list.dart index 9a72afe9..2734f3fc 100644 --- a/lib/screens/home/widgets/streams_list.dart +++ b/lib/screens/home/widgets/streams_list.dart @@ -23,6 +23,12 @@ class _StreamsListState extends State with AutomaticKeepAliveClient super.build(context); final store = widget.store; + final size = MediaQuery.of(context).size; + final pixelRatio = MediaQuery.of(context).devicePixelRatio; + + final thumbnailWidth = (size.width * pixelRatio) ~/ 3; + final thumbnailHeight = (thumbnailWidth * (9 / 16)).toInt(); + return RefreshIndicator( onRefresh: () async { HapticFeedback.lightImpact(); @@ -55,6 +61,8 @@ class _StreamsListState extends State with AutomaticKeepAliveClient return Observer( builder: (context) => StreamCard( streamInfo: store.streams[index], + width: thumbnailWidth, + height: thumbnailHeight, showUptime: context.read().showThumbnailUptime, ), );