Player status bar

src/components/r4-app.js

@@ -226,7 +226,7 @@ export default class R4App extends LitElement {
 			return html`<r4-layout><r4-loading slot="main"></r4-loading></r4-layout>`
 		}
 		return html`
-			<r4-layout @r4-play=${this.onPlay} ?is-playing=${this.isPlaying}>
+			<r4-layout @r4-play=${this.onPlay} ?is-playing=${this.isPlaying} .config=${this.config}>
 				${!this.config.singleChannel ? this.renderMenu() : null}
 				<main slot="main">${this.renderRouter()}</main>
 				<r4-player

src/components/r4-icon.js

@@ -24,7 +24,7 @@ const ICONS = {
 	player_close: 'x',
 	player_dock: '⌃',
 	player_minimize: '⌄',
-	player_fullscreen: '⌆',
+	player_fullscreen: '⛶', // ⌆
 	follow: '☆',
 	unfollow: '★',
 }

src/components/r4-layout.js

@@ -115,7 +115,10 @@ export default class R4Layout extends LitElement {
 		return html`
 			<details open part="playback-details" ${ref(this.detailsRef)}>
 				<summary part="playback-summary">
-					${this.isPlaying ? this.renderPlaybackIcon() : null}
+					${this.isPlaying ?
+						html`${this.renderPlaybackIcon()}
+							<span part="playback-status-title">${this.config.playingChannel?.name} - ${this.config.playingTrack?.title}</span>
+							` : null}
 					<slot name="playback-controls"> ${Object.entries(this.uiStates).map(this.renderUiState.bind(this))} </slot>
 				</summary>
 				<slot name="player"></slot>
@@ -135,7 +138,7 @@ export default class R4Layout extends LitElement {
 		`
 	}
 
-	onControlClick({target: {value: uiStateNext}}) {
+	onControlClick({currentTarget: {value: uiStateNext}}) {
 		this.uiState = this.uiStates[uiStateNext]
 		if (!this.detailsRef?.value?.getAttribute('open')) {
 			this.detailsRef?.value?.setAttribute('open', true)

src/index.css

@@ -208,9 +208,28 @@ r4-layout[ui-state='close'] [slot='player']::slotted(*) {
 /* make the player summary not display its icon */
 r4-layout::part(playback-summary) {
 	display: flex;
-	justify-content: flex-end;
+	/* justify-content: flex-end; */
+	background-color: var(--c-bg2);
+}
+
+r4-layout::part(playback-status-title) {
+	align-self: center;
+	justify-self: flex-start;
+	font-size: 14px;
+	flex-grow: 1;
+}
+
+r4-layout::part(name=[playback-controls]) {
+	margin-left: auto;
 }
 
+
+r4-layout::part(playback) {
+	position: sticky;
+	top: 0;
+}
+
+
 /* the player */
 r4-layout r4-player,
 r4-layout radio4000-player {
@@ -222,7 +241,6 @@ r4-layout r4-player radio4000-player .Layout {
 
 r4-layout::part(playback-status) {
 	display: flex;
-	flex-grow: 1;
 	align-self: center;
 	padding: calc(var(--s) / 3);
 	opacity: 0.3;

src/libs/appearence.js

@@ -1,11 +1,24 @@
-const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-const THEMES = ['classic', 'jellybeans', 'minimal', 'hash']
-const COLOR_SCHEMES = ['os', 'light', 'dark']
-const UI_STATES = {
+// Each of these correspond to a matching css file in public/themes/.
+export const THEMES = ['classic', 'jellybeans', 'minimal', 'hash']
+
+// We allow the user to choose their prefered appearance as well. It is up to the selected theme to implement.
+export const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+export const COLOR_SCHEMES = ['os', 'light', 'dark']
+
+// This determine the position of the player among other things.
+export const UI_STATES = {
+	// and we have a detail
 	Close: 'close',
-	Dock: 'dock',
 	Minimize: 'minimize',
+	Dock: 'dock',
 	Fullscreen: 'fullscreen',
 }
 
-export {UI_STATES, THEMES, COLOR_SCHEMES, prefersDark}
+/*
+"detail" is "micro"
+"close" is close
+"mini" is displaying just the video
+"dock" is docked to the side/bottom/top (full height or width)
+"fullscreen" is full vh/vw/z-index
+"close" is to "finish playback"
+*/