copilot/frosty
1
0
Fork 0
Code Issues Pull requests Projects Releases 11 Packages Wiki Activity Actions

Add dynamic sizes for thumbnails and box art

Browse source
This commit is contained in:
tommyxchow 2022-01-16 17:31:48 -05:00
parent b1cb1a3d76
commit e62a0fc373
6 changed files with 56 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

12
lib/screens/home/search/search_results_categories.dart
View file

@ -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(),

12
lib/screens/home/top/categories.dart
View file

@ -24,6 +24,12 @@ class _CategoriesState extends State<Categories> 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<Categories> 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(

13
lib/screens/home/top/category_streams.dart
View file

@ -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<SettingsStore>().showThumbnailUptime,
),
);

11
lib/screens/home/widgets/category_card.dart
View file

@ -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),

6
lib/screens/home/widgets/stream_card.dart
View file

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

8
lib/screens/home/widgets/streams_list.dart
View file

@ -23,6 +23,12 @@ class _StreamsListState extends State<StreamsList> 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<StreamsList> with AutomaticKeepAliveClient
return Observer(
builder: (context) => StreamCard(
streamInfo: store.streams[index],
width: thumbnailWidth,
height: thumbnailHeight,
showUptime: context.read<SettingsStore>().showThumbnailUptime,
),
);