Skip to content

Commit

Permalink
Merge pull request #476 from lamarios/feature/tablet_ui
Browse files Browse the repository at this point in the history 
Better tablet ui
  • Loading branch information
@lamarios
lamarios authored Feb 13, 2024
2 parents 40d339a + 5192e97 commit 215ea87
Show file tree
Hide file tree
Showing 54 changed files with 2,392 additions and 1,262 deletions.
Binary file modified fastlane/metadata/android/en-US/images/phoneScreenshots/1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified fastlane/metadata/android/en-US/images/phoneScreenshots/3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified fastlane/metadata/android/en-US/images/tenInchScreenshots/1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified fastlane/metadata/android/en-US/images/tenInchScreenshots/2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified fastlane/metadata/android/en-US/images/tenInchScreenshots/3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified fastlane/metadata/android/en-US/images/tenInchScreenshots/4.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 16 additions & 2 deletions lib/app/views/screens/main.dart
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:invidious/app/views/components/player_placeholder.dart';
import 'package:invidious/player/views/components/player.dart';

import '../../../player/states/player.dart';
import '../../../player/views/components/mini_player_aware.dart';
import '../../../utils.dart';

@RoutePage()
class MainScreen extends StatelessWidget {
Expand All @@ -12,6 +15,14 @@ class MainScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
final deviceType = getDeviceType();
final orientation =
context.select((PlayerCubit value) => value.state.orientation);

final playerHorizontalPosition = orientation == Orientation.landscape &&
deviceType == DeviceType.tablet
? getFractionOfAvailableSpace(context, tabletMiniPlayerFraction)
: const Size(0, 0);
return Container(
color: Theme.of(context).colorScheme.background,
child: Stack(
Expand All @@ -25,8 +36,11 @@ class MainScreen extends StatelessWidget {
child: AutoRouter(),
),
),
const Positioned(
left: 0, bottom: 0, right: 0, child: PlayerPlaceHolder()),
Positioned(
left: playerHorizontalPosition.width,
bottom: 0,
right: playerHorizontalPosition.width,
child: const PlayerPlaceHolder()),
Player(constraints.maxHeight),
],
),
Expand Down
59 changes: 42 additions & 17 deletions lib/channels/views/components/info.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,31 @@ class ChannelInfo extends StatelessWidget {
var locals = AppLocalizations.of(context)!;
ColorScheme colors = Theme.of(context).colorScheme;
var textTheme = Theme.of(context).textTheme;

final deviceType = getDeviceType();

List<Widget> widgets = [
Container(
padding: const EdgeInsets.only(top: 10),
child: Text(
channel.author,
style: textTheme.titleLarge?.copyWith(color: colors.primary),
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Thumbnail(
width: 50,
height: 50,
thumbnailUrl:
ImageObject.getBestThumbnail(channel.authorThumbnails)?.url ??
'',
decoration: BoxDecoration(
color: colors.secondaryContainer,
shape: BoxShape.circle,
)),
const SizedBox(
width: 8,
),
Text(
channel.author,
style: textTheme.titleLarge?.copyWith(color: colors.primary),
),
],
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
Expand Down Expand Up @@ -92,17 +110,24 @@ class ChannelInfo extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 230,
child: Thumbnail(
width: double.infinity,
thumbnailUrl:
ImageObject.getBestThumbnail(channel.authorThumbnails)
?.url ??
'',
decoration: BoxDecoration(
color: colors.secondaryContainer,
)),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: innerHorizontalPadding),
child: SizedBox(
height: deviceType == DeviceType.phone ? 100 : 230,
child: Thumbnail(
width: double.infinity,
thumbnailUrl:
ImageObject.getBestThumbnail(channel.authorBanners)
?.url ??
'',
decoration: BoxDecoration(
color: colors.secondaryContainer,
borderRadius: BorderRadius.circular(10))),
),
),
const SizedBox(
height: 10,
),
Padding(
padding:
Expand Down
249 changes: 142 additions & 107 deletions lib/channels/views/screens/channel.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,117 +26,152 @@ class ChannelScreen extends StatelessWidget {
ColorScheme colorScheme = Theme.of(context).colorScheme;
var locals = AppLocalizations.of(context)!;

return BlocProvider(
create: (BuildContext context) =>
ChannelCubit(ChannelController(channelId: channelId)),
child: BlocBuilder<ChannelCubit, ChannelController>(
builder: (context, channelState) {
var cubit = context.read<ChannelCubit>();
return Scaffold(
appBar: AppBar(
title: Text(
channelState.channel?.author ?? '',
return OrientationBuilder(builder: (context, orientation) {
return BlocProvider(
create: (BuildContext context) =>
ChannelCubit(ChannelController(channelId: channelId)),
child: BlocBuilder<ChannelCubit, ChannelController>(
builder: (context, channelState) {
var cubit = context.read<ChannelCubit>();
var deviceType = getDeviceType();
return Scaffold(
appBar: AppBar(
title: Text(
channelState.channel?.author ?? '',
),
actions: channelState.loading
? []
: [
Visibility(
visible: channelState.channel != null,
child: Row(
children: <Widget>[
IconButton(
onPressed: () => showSharingSheet(
context, channelState.channel!),
icon: const Icon(Icons.share),
),
],
),
),
],
),
actions: channelState.loading
? []
: [
Visibility(
visible: channelState.channel != null,
child: Row(
children: <Widget>[
IconButton(
onPressed: () => showSharingSheet(
context, channelState.channel!),
icon: const Icon(Icons.share),
),
backgroundColor: colorScheme.background,
bottomNavigationBar:
deviceType == DeviceType.tablet || channelState.loading
? null
: FadeIn(
child: NavigationBar(
onDestinationSelected: cubit.selectIndex,
selectedIndex: channelState.selectedIndex,
destinations: <Widget>[
NavigationDestination(
icon: const Icon(Icons.info),
label: locals.info),
NavigationDestination(
icon: const Icon(Icons.play_arrow),
label: locals.videos),
NavigationDestination(
icon: const Icon(Icons.videocam),
label: locals.shorts),
NavigationDestination(
icon: const Icon(Icons.stream),
label: locals.streams),
NavigationDestination(
icon: const Icon(Icons.playlist_play),
label: locals.playlists)
],
),
),
body: SafeArea(
bottom: false,
child: Row(
children: [
if (deviceType == DeviceType.tablet)
NavigationRail(
extended: getOrientation() == Orientation.landscape,
destinations: [
NavigationRailDestination(
icon: const Icon(Icons.info),
label: Text(locals.info)),
NavigationRailDestination(
icon: const Icon(Icons.play_arrow),
label: Text(locals.videos)),
NavigationRailDestination(
icon: const Icon(Icons.videocam),
label: Text(locals.shorts)),
NavigationRailDestination(
icon: const Icon(Icons.stream),
label: Text(locals.streams)),
NavigationRailDestination(
icon: const Icon(Icons.playlist_play),
label: Text(locals.playlists))
],
selectedIndex: channelState.selectedIndex,
onDestinationSelected: cubit.selectIndex,
),
Expanded(
child: NavigationSwitcher(
child: <Widget>[
channelState.loading
? const ChannelPlaceHolder()
: ChannelInfo(
key: const ValueKey('info'),
channel: channelState.channel!),
if (!channelState.loading)
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.only(
right: innerHorizontalPadding),
child: SortDropdownButton(
selectedSortingOption:
channelState.sortBy,
onChanged: (ChannelSortBy newValue) =>
cubit.onSortByChanged(newValue),
),
),
Expanded(
child: ChannelVideosView(
key: UniqueKey(),
channel: channelState.channel!,
getVideos: (String channelId,
String? continuation) {
return service.getChannelVideos(
channelId, continuation,
sortBy: channelState.sortBy);
},
),
),
],
),
if (!channelState.loading)
ChannelVideosView(
key: const ValueKey('shorts'),
channel: channelState.channel!,
getVideos: service.getChannelShorts,
),
if (!channelState.loading)
ChannelVideosView(
key: const ValueKey('streams'),
channel: channelState.channel!,
getVideos: service.getChannelStreams,
),
if (!channelState.loading)
ChannelPlayListsView(
key: const ValueKey('playlists'),
channelId: channelState.channel!.authorId,
canDeleteVideos: false)
][channelState.selectedIndex],
),
),
],
),
backgroundColor: colorScheme.background,
bottomNavigationBar: channelState.loading
? null
: FadeIn(
child: NavigationBar(
onDestinationSelected: cubit.selectIndex,
selectedIndex: channelState.selectedIndex,
destinations: <Widget>[
NavigationDestination(
icon: const Icon(Icons.info), label: locals.info),
NavigationDestination(
icon: const Icon(Icons.play_arrow),
label: locals.videos),
NavigationDestination(
icon: const Icon(Icons.videocam),
label: locals.shorts),
NavigationDestination(
icon: const Icon(Icons.stream),
label: locals.streams),
NavigationDestination(
icon: const Icon(Icons.playlist_play),
label: locals.playlists)
],
),
),
body: SafeArea(
bottom: false,
child: NavigationSwitcher(
child: <Widget>[
channelState.loading
? const ChannelPlaceHolder()
: ChannelInfo(
key: const ValueKey('info'),
channel: channelState.channel!),
if (!channelState.loading)
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.only(
right: innerHorizontalPadding),
child: SortDropdownButton(
selectedSortingOption: channelState.sortBy,
onChanged: (ChannelSortBy newValue) =>
cubit.onSortByChanged(newValue),
),
),
Expanded(
child: ChannelVideosView(
key: UniqueKey(),
channel: channelState.channel!,
getVideos:
(String channelId, String? continuation) {
return service.getChannelVideos(
channelId, continuation,
sortBy: channelState.sortBy);
},
),
),
],
),
if (!channelState.loading)
ChannelVideosView(
key: const ValueKey('shorts'),
channel: channelState.channel!,
getVideos: service.getChannelShorts,
),
if (!channelState.loading)
ChannelVideosView(
key: const ValueKey('streams'),
channel: channelState.channel!,
getVideos: service.getChannelStreams,
),
if (!channelState.loading)
ChannelPlayListsView(
key: const ValueKey('playlists'),
channelId: channelState.channel!.authorId,
canDeleteVideos: false)
][channelState.selectedIndex],
)),
);
},
),
);
)),
);
},
),
);
});
}
}
Loading

0 comments on commit 215ea87

Please sign in to comment.