Improvement: Rework UI with focus on NowPlaying #1004

wutschel · 2024-03-14T06:51:39Z

Description

Closes #994
Closes #930

This PR brings all the UI rework around NowPlaying from the past months. The changes were tested via TF over few weeks and further changes were done based on user feedback. Overall this brings a fresher look for iPad and especially for iPhone/iPod with transparent top and bottom bars, an updated play control bar with highlighted central play/pause button, blurred cover, animation changes, alignment of icon colors, reduction overdone separator lines, removal of disturbing transparent Kodi logos and a new modern looking and common background for all menus.

Summary for release notes

Improvement: Rework UI with focus on NowPlaying
Feature: Add blurred cover feature for iPhone
Feature: Add fullscreen NowPlaying support for iPad
Improvement: Updated play controls with highlighted center play/pause
Improvement: Move iPad play controls to NowPlaying screen
Improvement: Shuffle/repeat now accessible from NowPlaying screen
Improvement: Introduce common gradient dark background for all menus

kambala-decapitator

Fine in general, although it was quite difficult to review such a huge PR

there’s also the place with custom view as separator where you hide the view - seems that the separator can be removed completely instead

kambala-decapitator · 2024-04-01T19:45:59Z

XBMC Remote/NowPlaying.m

@@ -410,13 +417,15 @@ - (void)setButtonImageAndStartDemo:(UIImage*)buttonImage {
 }

 - (void)animateToColors:(UIColor*)color {
+    color = UIColor.clearColor;


Method parameter makes no sense now

Yep. For now I do not want to change this further as I want to have the option to roll back easily, just in case. If we this will stay, I can remove further code which did the coloration of text in the UI.

kambala-decapitator · 2024-04-01T19:47:06Z

XBMC Remote/NowPlaying.m

@@ -710,13 +731,19 @@ - (void)getActivePlayers {
                                         repeatButton.hidden = NO;
                                     }
                                     if ([repeatStatus isEqualToString:@"all"]) {
-                                         [repeatButton setBackgroundImage:[UIImage imageNamed:@"button_repeat_all"] forState:UIControlStateNormal];
+                                         UIImage *image = [UIImage imageNamed:@"button_repeat_all"];
+                                         image = [Utilities colorizeImage:image withColor:KODI_BLUE_COLOR];


these 3 lines are a very common pattern now

Yep, this I kept to not make the PR even bigger -- as you rightly said it is already quite huge and hard to review or to maintain. If ok, I will rework the repeat/shuffle coloration in a dedicated PR. There is even more code duplication which can be avoided as each block for repeat and for shuffle is coded twice in a very similar fashion.

kambala-decapitator · 2024-04-01T19:52:35Z

XBMC Remote/NowPlaying.m

+    [playlistToolbarView addSubview:repeatButton];
+
+    // Update layout of play control bar
+    CGFloat buttonPadding = floor(playlistToolbarView.frame.size.width / 9);


Thanks for pointing me to this one. There were few issues hidden behind this, I added a fixup commit for this which uses defines and now corrected the layout further.

kambala-decapitator · 2024-04-01T19:53:13Z

XBMC Remote/NowPlaying.m

+    button = [playlistToolbarView viewWithTag:TAG_ID_STOP];
+    button.center = CGPointMake(centerX - 3 * buttonPadding, button.center.y);
+    button = [playlistToolbarView viewWithTag:TAG_SEEK_BACKWARD];
+    button.center = CGPointMake(centerX - 2 * buttonPadding, button.center.y);


Positioning these buttons should be done with a loop

Let's please keep. Loops would need introduction of an array with view tags and relative positions in it. I doubt this would be easier to read.

array (actually dictionary, as we can't create an array of pairs out of the box) would explicitly show which parameters change - this is way easier to read than the current wall of text :)

Ok, will give it a try 😃

wutschel · 2024-04-01T20:42:26Z

Shall I create GitHub issues to finish work on the colorization clean up and the repeat/shuffle button refactoring?

wutschel · 2024-04-01T20:59:25Z

Now squashed the fixups and rebased to master.

Introduces a new and centralized Play/Pause icon and new sleek shuffle/repeat icons. Moves the shuffle/repeat button to NowPlaying screen, aligns them horizontally with the play control buttons and accordingly adapts the overlay screen. The NowPlaying labels use white/gray color without font shadows.

For a solid animation experience when toggling iPhone between NowPlaying and playlist the view sizes must be adapted and the underLeft and underRight views must be hidden while animating.

Updates background of all views. For NowPlaying also removes the Kodi overlay icon. Background does now have correct dimensions and does not need to be resized during layout.

On iPad the shuffle/repeat buttons should have the same white color as the other play control buttons because they all reside in the same row. On iPhone the shuffle/repeat buttons are detached from the play controls and should be less prominent until activated.

Moves the play control view out of the toolbar and under the BottomView. This keeps the layout and spacing as it is defined for iPhone. Changes iPhone's playlist/NowPlaying button to iPad's fullscreen toggle button. On press this sends notification to iPad view controller and then animates to fullscreen view. The method to set the NowPlaying dimension is enhanced to handle both fullscreen and split screen.

The font scale factor is taken from the layout height calculation for BottomView which contains the labels. This way the initial vertical relative spacing between the labels is kept same.

Feature can be chosen in Kodi App settings, it is enabled by default. To improve readability of play controls and labels a dark blur effect with an additional gradient overlay is used. Changes between different covers are animated.

Avoids an overlap of toolbar and playlist action and fixes a visible gap between toolbar and play controls.

This button is placed in the iPad toolbar and therefor allows to close all stacked views at one click.

kambala-decapitator · 2024-04-02T17:59:15Z

there’s also the place with custom view as separator where you hide the view - seems that the separator can be removed completely instead

@wutschel what about this?

wutschel · 2024-04-02T18:08:42Z

what about this?

Wanted to ask about this anyhow. You remember by chance where you saw this?

Edit: Nevermind, found it. This happens for at least two controllers. Will create an issue to not forget about it.

wutschel mentioned this pull request Mar 14, 2024

Bugfix: Render scrubbing view on top of NowPlaying overlay on iPad #1001

Closed

This was referenced Mar 24, 2024

Bugfix: Fix top padding #1010

Merged

Feature: Show tagline in movie details #997

Merged

Improvement: Rework power menu #1009

Merged

wutschel force-pushed the rework_ui_nowplaying branch from 662df26 to 8183e9e Compare April 1, 2024 15:02

kambala-decapitator approved these changes Apr 1, 2024

View reviewed changes

wutschel force-pushed the rework_ui_nowplaying branch from f7ac7e4 to c66e0e3 Compare April 1, 2024 20:58

wutschel added 21 commits April 1, 2024 23:06

Transparent navigation bar for NowPlaying

326858d

For a solid animation experience when toggling iPhone between NowPlaying and playlist the view sizes must be adapted and the underLeft and underRight views must be hidden while animating.

Use navbar appearance from iOS 13 on

47062f7

Add gradient background image for all views

4c46848

Updates background of all views. For NowPlaying also removes the Kodi overlay icon. Background does now have correct dimensions and does not need to be resized during layout.

Main menu without separator lines

7d6a24a

RighMenuVC without separator line and with clear background

7c46647

Remove Kodi logo from server connection status

f9e2baf

Gray colored background fanart on iPad

40983bc

Use light gray for iPad bottom toolbar buttons

1ad5b10

Improve font scaling for NowPlaying

5b10e0e

The font scale factor is taken from the layout height calculation for BottomView which contains the labels. This way the initial vertical relative spacing between the labels is kept same.

Update template for repeat and shuffle

4ba389a

Remove outdated templates

e5cca15

Change animation for playlist/NowPlaying on iPhone from flip to dissolve

c627d70

Introduce blurred cover effect iPhone

f4fcba4

Feature can be chosen in Kodi App settings, it is enabled by default. To improve readability of play controls and labels a dark blur effect with an additional gradient overlay is used. Changes between different covers are animated.

Correct layout of playlistActionView

6df3979

Avoids an overlap of toolbar and playlist action and fixes a visible gap between toolbar and play controls.

Introduce button to close all stacks on iPad

ebf6db8

This button is placed in the iPad toolbar and therefor allows to close all stacked views at one click.

No ivar needed for remoteButton

a617e85

Update NowPlaying icon

1f688bf

Update NowPlaying icon in toolbar

07cfda8

wutschel force-pushed the rework_ui_nowplaying branch from c66e0e3 to 07cfda8 Compare April 1, 2024 21:06

kambala-decapitator merged commit 698765b into xbmc:master Apr 2, 2024

wutschel deleted the rework_ui_nowplaying branch April 4, 2024 05:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improvement: Rework UI with focus on NowPlaying #1004

Improvement: Rework UI with focus on NowPlaying #1004

wutschel commented Mar 14, 2024

kambala-decapitator left a comment

kambala-decapitator Apr 1, 2024

wutschel Apr 1, 2024 •

edited

Loading

kambala-decapitator Apr 1, 2024

wutschel Apr 1, 2024

kambala-decapitator Apr 1, 2024

wutschel Apr 1, 2024

kambala-decapitator Apr 1, 2024

wutschel Apr 1, 2024

kambala-decapitator Apr 2, 2024

wutschel Apr 2, 2024

wutschel commented Apr 1, 2024

wutschel commented Apr 1, 2024

kambala-decapitator commented Apr 2, 2024

wutschel commented Apr 2, 2024 •

edited

Loading

Improvement: Rework UI with focus on NowPlaying #1004

Improvement: Rework UI with focus on NowPlaying #1004

Conversation

wutschel commented Mar 14, 2024

Description

Summary for release notes

kambala-decapitator left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wutschel Apr 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wutschel commented Apr 1, 2024

wutschel commented Apr 1, 2024

kambala-decapitator commented Apr 2, 2024

wutschel commented Apr 2, 2024 • edited Loading

wutschel Apr 1, 2024 •

edited

Loading

wutschel commented Apr 2, 2024 •

edited

Loading