Fix audio player overlapping on small screens

[thornbill]

Changes
Fixes the audio player ui on small screens.

This is an alternative to #2972 and #2682 that uses flexbox to size items correctly.

Issues
N/A

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[thornbill]

This has an issue where the player and playlist controls overlap on small screens on iOS 10. I believe this is an issue with flex-shrink not working correctly in this version of Safari such that the album art is not properly scaled. imho this should probably not be considered a blocker since it seems to work correctly on any newer browser and iOS 10 usage should be pretty low at this point. We are also going to be dropping support for iOS 10 and 11 in the next app update (due to Expo no longer supporting those versions).

(Screenshot is from an iPhone 7 running iOS 10 via BrowserStack)

[dmitrylyzo]

Safari 10 seems to handle flexbox in a non-standard way (#3456).

UPD:
Also need to trim these (for remote video):

jellyfin-web/src/components/remotecontrol/remotecontrol.scss

Lines 406 to 414 in eb0479b

	.nowPlayingPageImageContainer.nowPlayingPageImagePoster {
	height: 50%;
	overflow: hidden;
	}
	.nowPlayingPageImageContainer.nowPlayingPageImagePoster img {
	height: 100%;
	width: auto;
	}

[dmitrylyzo]

During video playback, the volume slider is overlapped by the buttons:

As a quick fix, remove this line:

jellyfin-web/src/components/remotecontrol/remotecontrol.scss

Line 324 in 68f7002

height: 100%;

Will be

[dmitrylyzo]

There is a poster for cover-less audio.

jellyfin-web/src/components/remotecontrol/remotecontrol.scss

Line 105 in 7ad5614

.nowPlayingPageImageContainerNoAlbum {

I tried width: 80% for small media.

UPD:
But the icon looks too big on a small card - need to adjust the font size. In the next PR?

Btw, here is the custom CSS I use for debugging:

.nowPlayingInfoContainer{background-color:rgba(0,255,0,0.5)!important}
.nowPlayingPageImageContainer{background-color:rgba(255,0,0,0.5)!important}
.nowPlayingInfoControls{background-color:rgba(0,0,255,0.5)!important}
.nowPlayingInfoButtons{background-color:rgba(0,255,255,0.5)!important}
.nowPlayingPageImageAudio{opacity:0.5!important}

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[phcreery]

This has an issue where the player and playlist controls overlap on small screens on iOS 10. I believe this is an issue with flex-shrink not working correctly in this version of Safari such that the album art is not properly scaled. imho this should probably not be considered a blocker since it seems to work correctly on any newer browser and iOS 10 usage should be pretty low at this point. We are also going to be dropping support for iOS 10 and 11 in the next app update (due to Expo no longer supporting those versions).

(Screenshot is from an iPhone 7 running iOS 10 via BrowserStack)

Not sure if this is entirely related to outdated Safari client as it is reproducible in chrome desktop.
https://user-images.githubusercontent.com/44987569/119747193-ca46c580-be57-11eb-9106-91d2f5d03d03.png.

Regardless, I am happy to see a resolution.