Jump to content

Layout music now playing


KickVanelli

Recommended Posts

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

Link to post
Share on other sites
Happy2Play

Like this

/*Remove Album-Artist title and Playlist section*/
#nowPlayingPage div.nowPlayingInfoControls h2, #nowPlayingPage div.playlistSection {display: none; }
Link to post
Share on other sites

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

Link to post
Share on other sites
Happy2Play

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%;}
Link to post
Share on other sites

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.

Link to post
Share on other sites
  • 1 month later...
KickVanelli

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.

Link to post
Share on other sites
Happy2Play

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%;}
Link to post
Share on other sites

 

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 ?

Link to post
Share on other sites
Happy2Play

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%;}
Link to post
Share on other sites

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)

Link to post
Share on other sites
Happy2Play

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;}
Link to post
Share on other sites

Its like this now -

 

5dd4802aaf975_EmbyMusicPlaylisttranspare

 

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

Link to post
Share on other sites
Happy2Play

Its like this now -

 

5dd4802aaf975_EmbyMusicPlaylisttranspare

 

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.

5dd4833414d72_image.jpg

Link to post
Share on other sites

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 by arrbee99
Link to post
Share on other sites

@@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.

Link to post
Share on other sites

@@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 by arrbee99
Link to post
Share on other sites

@@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  :) )

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...