Layout music now playing

[KickVanelli 5]

Hi,

I would like a css change for the music now playing page (with backdrop).
Is it possible to remove the playlist information and the artist and album information ?
In that case only the album icon, the play controls and the backdrop would remain.
I'v been trying to figure it out but I can't find a solution.

Thank you

[Happy2Play 9451]

Like this

/*Remove Album-Artist title and Playlist section*/
#nowPlayingPage div.nowPlayingInfoControls h2, #nowPlayingPage div.playlistSection {display: none; }

[KickVanelli 5]

Awesome !!

Thanks very much.

[KickVanelli 5]

Hi,

 

Maybe I ask too much but can anyone give me a hint how to move the play controls and the album card to the bottom of the screen ?

 

Thanks

[Happy2Play 9451]

Hi,

 

Maybe I ask too much but can anyone give me a hint how to move the play controls and the album card to the bottom of the screen ?

 

Thanks

 

Something like this

/*Move NowPlaying Album and controls to bottom*/
#nowPlayingPage div.nowPlayingInfoContainer {
    position: absolute;
    bottom: 0;
    width: 90%;
}


I you want controls at bottom also add this.

#nowPlayingPage div.nowPlayingInfoControls {padding-top: 10%;}

[KickVanelli 5]

The result is exactly what I hoped for (I brought back the song title).

 

Thank you very much Happy2Play !

[Guest]

No picture isn't worth

[KickVanelli 5]

I'm not sure what you exactly mean Carlos, but I have loads of backdrops for collection albums like billboard and they look fantastic after the css edits.

[KickVanelli 5]

HI @@Happy2Play,

 

I like the playlist on the redesigned music OSD but i would like to remove it because I want the full backdrop on the screen.

Is that possible ?

It would be great if the playlist could be swiched on/off with an onscreen button.

[Happy2Play 9451]

HI @@Happy2Play,

 

I like the playlist on the redesigned music OSD but i would like to remove it because I want the full backdrop on the screen.

Is that possible ?

It would be great if the playlist could be swiched on/off with an onscreen button.

Yes a collapse/on-off option would be nice.

 

But some css like this.

/*Remove Now Playing Queue panel*/
div.osdPlayQueue {display: none;}
div.backdropContainer.backdropContainer-remotecontrol {right: 0%;}
div.videoOsdBottom-remotecontrol {right: 0%;}
div.videoOsdHeader-remotecontrol {right: 0%;}

[arrbee99 1712]

 

Yes a collapse/on-off option would be nice.

 

But some css like this.

/*Remove Now Playing Queue panel*/
div.osdPlayQueue {display: none;}
div.backdropContainer.backdropContainer-remotecontrol {right: 0%;}
div.videoOsdBottom-remotecontrol {right: 0%;}
div.videoOsdHeader-remotecontrol {right: 0%;}

 

Would anyone know please how to make the Playing Queue transparent ?

[Happy2Play 9451]

Would anyone know please how to make the Playing Queue transparent ?

There is no background behind it currently do to the shrink of background container.  Does this do what you want?

div.backdropContainer.backdropContainer-remotecontrol {right: 0%;}

[arrbee99 1712]

Was thinking that line 1 of your css kills the list and 2,3 and 4 move stuff back over to the right, so maybe if lines 2,3 and 4 were kept and line 1 modified somehow...

 

(that line you quoted, same as line 2 from post 10, does seem to work)

[Happy2Play 9451]

Was thinking that line 1 of your css kills the list and 2,3 and 4 move stuff back over to the right, so maybe if lines 2,3 and 4 were kept and line 1 modified somehow...

 

(that line you quoted, same as line 2 from post 10, does seem to work)

 

Don't quite understand what you want.  But this makes the backdrop cover the screen and makes the playlist panel transparent.

div.backdropContainer.backdropContainer-remotecontrol {right: 0%;}
div.upNextBar.upNextBar-static.flex.align-items-center {background: transparent;}
div.osdPlaylist.flex.flex-grow.hide.osdPlaylist-hidden {background: transparent;}

[arrbee99 1712]

Its like this now -

 

 

so backdrop covers the screen, top right Play Queue is better, but the queue itself not so transparent

[Happy2Play 9451]

Its like this now -

 

 

so backdrop covers the screen, top right Play Queue is better, but the queue itself not so transparent

 

Other css can/may be interfering, but with the code in post 14 I get this.  Only other tweaks are background opacity and removal of album image.

[arrbee99 1712]

Thanks, thats exactly what I want. Just have to see whats interfering.

[arrbee99 1712]

Found it. Thanks very much.

[arrbee99 1712]

Also, this

 

div.osdPlaylist.flex.flex-grow.hide.osdPlaylist-hidden {text-shadow: 2px 2px #ff0000;}

 

or something similar you could no doubt improve on, seems to help with white text on a light background.

 

Edit - thought that colour might be red, #000000 is black.

Edited November 20, 2019 by arrbee99

[chacawaca 109]

@@arrbee99 i have try a lot of setup and finished with same CSS as you for now playing.

 

but yes you need a text-shadow on text or you cant read it on a white background.

[arrbee99 1712]

@@arrbee99 i have try a lot of setup and finished with same CSS as you for now playing.

 

but yes you need a text-shadow on text or you cant read it on a white background.

 

Yep, think it looks pretty good with a dark background. Bit more iffy on a light one and maybe darker ones with band members lurking under the playlist.

Edited November 20, 2019 by arrbee99

[arrbee99 1712]

@@arrbee99 i have try a lot of setup and finished with same CSS as you for now playing.

 

but yes you need a text-shadow on text or you cant read it on a white background.

 

Might I suggest liking this  https://emby.media/community/index.php?/topic/79463-ability-to-collapse-playlist-on-music-osd/&do=findComment&comment=808744  (unless of course you don't like it   )

[chacawaca 109]

I think we already talk about that 

https://emby.media/community/index.php?/topic/78512-43015-new-audio-osd/?p=801858

[arrbee99 1712]

True. Just a (hopefully) polite suggestion.