mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #3018 from thornbill/fix-small-player

Browse source 
Fix audio player overlapping on small screens
This commit is contained in:
Bill Thornton 2022-02-28 09:18:12 -05:00 • committed by GitHub
commit 76b633b62d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/remotecontrol/remotecontrol.js
View file

@ -248,13 +248,9 @@ function setImageUrl(context, state, url) {
if (url) { if (url) {
imgContainer.innerHTML = '<img class="nowPlayingPageImage" src="' + url + '" />'; imgContainer.innerHTML = '<img class="nowPlayingPageImage" src="' + url + '" />';
if (item.Type == 'Audio') {
context.querySelector('.nowPlayingPageImage').classList.add('nowPlayingPageImageAudio'); context.querySelector('.nowPlayingPageImage').classList.toggle('nowPlayingPageImageAudio', item.Type === 'Audio');
context.querySelector('.nowPlayingPageImageContainer').classList.remove('nowPlayingPageImageAudio'); context.querySelector('.nowPlayingPageImage').classList.toggle('nowPlayingPageImagePoster', item.Type !== 'Audio');
} else {
context.querySelector('.nowPlayingPageImageContainer').classList.add('nowPlayingPageImagePoster');
context.querySelector('.nowPlayingPageImage').classList.remove('nowPlayingPageImageAudio');
}
} else { } else {
imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><span class="cardImageIcon material-icons album" aria-hidden="true"></span></button></div>'; imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><span class="cardImageIcon material-icons album" aria-hidden="true"></span></button></div>';
} }

40
src/components/remotecontrol/remotecontrol.scss
View file

@ -145,7 +145,7 @@
width: 100%; width: 100%;
-webkit-box-shadow: 0 0 1.9vh #000; -webkit-box-shadow: 0 0 1.9vh #000;
box-shadow: 0 0 1.9vh #000; box-shadow: 0 0 1.9vh #000;
border: 0.1em solid #222; border-radius: 0.2em;
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
-webkit-user-drag: none; -webkit-user-drag: none;
@ -297,7 +297,6 @@
} }
.nowPlayingPageTitle { .nowPlayingPageTitle {
/* text-align: center; */
margin: 0; margin: 0;
} }
@ -318,17 +317,22 @@
} }
.nowPlayingInfoButtons { .nowPlayingInfoButtons {
/* margin: 1.5em 0 0 0; */
-webkit-box-pack: center; -webkit-box-pack: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
font-size: 1.5em; font-size: 1.5em;
height: 100%;
} }
.nowPlayingPageImageContainer { .nowPlayingPageImageContainer {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
align-items: center;
justify-content: center;
width: 100%; width: 100%;
margin: auto auto 0.5em; min-height: 0;
margin: 0 auto 0.5em;
} }
.nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon { .nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon {
@ -337,7 +341,9 @@
} }
.nowPlayingInfoControls { .nowPlayingInfoControls {
margin: 0.5em 0 1em 0; flex-grow: 0;
flex-shrink: 1;
margin: 0.5em 0 0;
width: 100%; width: 100%;
-webkit-box-pack: start !important; -webkit-box-pack: start !important;
-webkit-justify-content: start !important; -webkit-justify-content: start !important;
@ -392,25 +398,11 @@
font-size: 2em; font-size: 2em;
} }
.nowPlayingPageImage { .nowPlayingPageImage.nowPlayingPageImageAudio,
/* width: inherit; */ .nowPlayingPageImage.nowPlayingPageImagePoster {
overflow-y: hidden;
overflow: hidden;
margin: 0 auto;
}
.nowPlayingPageImage.nowPlayingPageImageAudio {
width: 100%;
}
.nowPlayingPageImageContainer.nowPlayingPageImagePoster {
height: 50%;
overflow: hidden;
}
.nowPlayingPageImageContainer.nowPlayingPageImagePoster img {
height: 100%;
width: auto; width: auto;
max-width: 100%;
max-height: 100%;
} }
.playlistSectionButton .volumecontrol { .playlistSectionButton .volumecontrol {