Skip to content

Commit

Permalink
feat: change miniplayer style
Browse files Browse the repository at this point in the history
  • Loading branch information
phanan committed Nov 22, 2023
1 parent 0e94663 commit 34a1f6f
Show file tree
Hide file tree
Showing 7 changed files with 123 additions and 108 deletions.
14 changes: 10 additions & 4 deletions ios/Runner.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@
isa = PBXProject;
attributes = {
BuildIndependentTargetsInParallel = YES;
LastUpgradeCheck = 1300;
LastUpgradeCheck = 1500;
ORGANIZATIONNAME = "";
TargetAttributes = {
97C146ED1CF9000F007C117D = {
Expand Down Expand Up @@ -337,6 +337,7 @@
DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
ENABLE_USER_SCRIPT_SANDBOXING = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_NO_COMMON_BLOCKS = YES;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
Expand Down Expand Up @@ -366,7 +367,8 @@
CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
DEVELOPMENT_TEAM = PTBU9CDS3L;
ENABLE_BITCODE = NO;
FLUTTER_BUILD_NUMBER = 19;
FLUTTER_BUILD_NAME = 2.1.0;
FLUTTER_BUILD_NUMBER = 20;
INFOPLIST_FILE = Runner/Info.plist;
INFOPLIST_KEY_CFBundleDisplayName = "Koel Player";
INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.music";
Expand Down Expand Up @@ -419,6 +421,7 @@
DEBUG_INFORMATION_FORMAT = dwarf;
ENABLE_STRICT_OBJC_MSGSEND = YES;
ENABLE_TESTABILITY = YES;
ENABLE_USER_SCRIPT_SANDBOXING = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_DYNAMIC_NO_PIC = NO;
GCC_NO_COMMON_BLOCKS = YES;
Expand Down Expand Up @@ -475,6 +478,7 @@
DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
ENABLE_USER_SCRIPT_SANDBOXING = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_NO_COMMON_BLOCKS = YES;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
Expand Down Expand Up @@ -506,7 +510,8 @@
CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
DEVELOPMENT_TEAM = PTBU9CDS3L;
ENABLE_BITCODE = NO;
FLUTTER_BUILD_NUMBER = 19;
FLUTTER_BUILD_NAME = 2.1.0;
FLUTTER_BUILD_NUMBER = 20;
INFOPLIST_FILE = Runner/Info.plist;
INFOPLIST_KEY_CFBundleDisplayName = "Koel Player Test";
INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.music";
Expand Down Expand Up @@ -538,7 +543,8 @@
CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
DEVELOPMENT_TEAM = PTBU9CDS3L;
ENABLE_BITCODE = NO;
FLUTTER_BUILD_NUMBER = 19;
FLUTTER_BUILD_NAME = 2.1.0;
FLUTTER_BUILD_NUMBER = 20;
INFOPLIST_FILE = Runner/Info.plist;
INFOPLIST_KEY_CFBundleDisplayName = "Koel Player";
INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.music";
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<Scheme
LastUpgradeVersion = "1300"
LastUpgradeVersion = "1500"
version = "1.3">
<BuildAction
parallelizeBuildables = "YES"
Expand Down
2 changes: 1 addition & 1 deletion lib/enums.dart
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@ extension SortOrderExtension on SortOrder {
String get value => toString().split('.').last;
}

enum ThumbnailSize { sm, md, lg, xl }
enum ThumbnailSize { xs, sm, md, lg, xl }
1 change: 0 additions & 1 deletion lib/ui/widgets/album_card.dart
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import 'package:app/enums.dart';
import 'package:app/models/models.dart';
import 'package:app/router.dart';
import 'package:app/ui/widgets/widgets.dart';
Expand Down
198 changes: 100 additions & 98 deletions lib/ui/widgets/mini_player.dart
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import 'package:app/providers/providers.dart';
import 'package:app/router.dart';
import 'package:app/ui/widgets/widgets.dart';
import 'package:audio_service/audio_service.dart';
import 'package:figma_squircle/figma_squircle.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
Expand Down Expand Up @@ -73,115 +74,116 @@ class _MiniPlayerState extends State<MiniPlayer> with StreamSubscriber {
isLoading = false;
}

return FrostedGlassBackground(
sigma: 10.0,
child: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: AppColors.white.withOpacity(0.1),
width: .5,
),
bottom: BorderSide(
color: AppColors.white.withOpacity(0.1),
width: .5,
),
),
),
child: InkWell(
onTap: () => widget.router.openNowPlayingScreen(context),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Stack(
children: [
Hero(
tag: 'hero-now-playing-thumbnail',
child: SongThumbnail.sm(song: song),
),
if (isLoading)
SizedBox.square(
dimension: SongThumbnail.dimensionForSize(
ThumbnailSize.sm,
),
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(
SongThumbnail.borderRadiusForSize(
ThumbnailSize.sm,
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: ClipSmoothRect(
radius: SmoothBorderRadius(
cornerRadius: 14.0,
cornerSmoothing: .8,
),
child: FrostedGlassBackground(
sigma: 20.0,
child: Container(
color: Color.fromRGBO(25, 0, 64, .5),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
border: Border.all(
color: AppColors.white.withOpacity(0.1),
width: .5,
),
),
child: InkWell(
onTap: () => widget.router.openNowPlayingScreen(context),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Stack(
children: [
Hero(
tag: 'hero-now-playing-thumbnail',
child: SongThumbnail.xs(song: song),
),
if (isLoading)
SizedBox.square(
dimension: SongThumbnail.dimensionForSize(
ThumbnailSize.xs,
),
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(
SongThumbnail.borderRadiusForSize(
ThumbnailSize.xs,
),
),
),
color: Colors.black54,
),
),
),
color: Colors.black54,
if (isLoading)
SizedBox.square(
dimension: SongThumbnail.dimensionForSize(
ThumbnailSize.xs,
),
child: statusIndicator,
),
],
),
Expanded(
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 16),
child: Text(
song.title,
overflow: TextOverflow.ellipsis,
),
),
),
if (isLoading)
SizedBox.square(
dimension: SongThumbnail.dimensionForSize(
ThumbnailSize.sm,
),
child: statusIndicator,
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
IconButton(
key: MiniPlayer.pauseButtonKey,
onPressed: audioHandler.playOrPause,
icon: Icon(
state.playing
? CupertinoIcons.pause_fill
: CupertinoIcons.play_fill,
size: 24,
),
),
IconButton(
key: MiniPlayer.nextButtonKey,
onPressed: audioHandler.skipToNext,
icon: const Icon(
CupertinoIcons.forward_fill,
size: 24,
),
),
],
),
],
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
song.title,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
Text(
song.artistName,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Colors.white60),
)
],
),
],
),
),
Row(
children: <Widget>[
IconButton(
key: MiniPlayer.pauseButtonKey,
onPressed: audioHandler.playOrPause,
icon: Icon(
state.playing
? CupertinoIcons.pause_fill
: CupertinoIcons.play_fill,
size: 24,
),
),
IconButton(
key: MiniPlayer.nextButtonKey,
onPressed: audioHandler.skipToNext,
icon: const Icon(
CupertinoIcons.forward_fill,
size: 24,
),
),
],
),
],
],
),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: const MiniPlayerProgressBar(),
),
],
),
),
const MiniPlayerProgressBar(),
],
),
),
);
}
Expand Down
12 changes: 10 additions & 2 deletions lib/ui/widgets/song_thumbnail.dart
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ class SongThumbnail extends StatelessWidget {
final ThumbnailSize size;
final bool playing;

const SongThumbnail.xs({Key? key, required this.song, this.playing = false})
: size = ThumbnailSize.xs,
super(key: key);

const SongThumbnail.sm({Key? key, required this.song, this.playing = false})
: size = ThumbnailSize.sm,
super(key: key);
Expand Down Expand Up @@ -58,10 +62,12 @@ class SongThumbnail extends StatelessWidget {

static double dimensionForSize(ThumbnailSize size) {
switch (size) {
case ThumbnailSize.lg:
return 192;
case ThumbnailSize.xs:
return 32;
case ThumbnailSize.md:
return 144;
case ThumbnailSize.lg:
return 192;
case ThumbnailSize.xl:
return 256;
default:
Expand All @@ -71,6 +77,8 @@ class SongThumbnail extends StatelessWidget {

static double borderRadiusForSize(ThumbnailSize size) {
switch (size) {
case ThumbnailSize.xs:
return 8;
case ThumbnailSize.md:
return 16;
case ThumbnailSize.lg:
Expand Down
2 changes: 1 addition & 1 deletion pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 2.0.4
version: 2.1.0+20

environment:
sdk: ">=2.17.0-0 <3.0.0"
Expand Down

0 comments on commit 34a1f6f

Please sign in to comment.