improve icons

public/themes/classic.css

@@ -106,6 +106,14 @@ r4-app[color-scheme='dark'] button {
 	box-shadow: none;
 }
 
+r4-layout::part(playback) {
+	position: sticky;
+	top: 0;
+}
+r4-layout::part(playback-summary) {
+	background-color: var(--c-bg2);
+}
+
 /* pages */
 r4-page-header {
 	/* display: flex; */
@@ -122,7 +130,7 @@ r4-page-header menu {
 }
 r4-page-header h1 {
 	margin: 0;
-	padding: var(--s);
+	padding: calc(var(--s) / 2);
 }
 /* Differentiate channels and track lists by using a grid */
 r4-page-explore r4-page-main > r4-list {

src/components/r4-button-follow.js

@@ -28,13 +28,19 @@ export default class R4ButtonFollow extends LitElement {
 	renderUnfollow() {
 		return html`
 			<button @click=${this.unfollow} title="Un-subscribe from this channel's updates, by un-following it">
-				Unfollow
+				<r4-icon name="unfollow"></r4-icon>
 			</button>
 		`
 	}
 	renderFollow() {
 		return html`
-			<button @click=${this.follow} ?disabled=${!this.userChannel} title="Subscribe to this channel's updates, by following it">Follow</button>
+			<button
+				@click=${this.follow}
+				?disabled=${!this.userChannel}
+				title="Subscribe to this channel's updates, by following it"
+			>
+				<r4-icon name="follow"></r4-icon>
+			</button>
 		`
 	}
 

src/components/r4-icon.js

@@ -8,23 +8,8 @@ export default class R4Icon extends HTMLElement {
 	get icon() {
 		return ICONS[this.name] || ''
 	}
-	attributeChangedCallback() {
-		this.render()
-		this.renderAttr()
-	}
 	connectedCallback() {
-		this.render()
-	}
-	render() {
-		this.innerHTML = ''
-		this.innerText = this.icon
-	}
-	renderAttr() {
-		if (this.name) {
-			this.setAttribute('title', `${this.name} icon`)
-		} else {
-			this.removeAttribute('title')
-		}
+		this.replaceChildren(this.icon)
 	}
 }
 
@@ -35,4 +20,11 @@ const ICONS = {
 	globe: '🌍',
 	dark: '🌘',
 	light: '🌖',
+	player_status: '♫',
+	player_close: 'x',
+	player_dock: '⌃',
+	player_minimize: '⌄',
+	player_fullscreen: '⌆',
+	follow: '☆',
+	unfollow: '★',
 }

src/components/r4-layout.js

@@ -1,5 +1,6 @@
 import {html, LitElement} from 'lit'
 import {ref, createRef} from 'lit/directives/ref.js'
+import {UI_STATES} from '../libs/appearence.js'
 
 export default class R4Layout extends LitElement {
 	static properties = {
@@ -14,18 +15,7 @@ export default class R4Layout extends LitElement {
 
 	constructor() {
 		super()
-		this.uiStates = {
-			Close: 'close',
-			Dock: 'dock',
-			Minimize: 'minimize',
-			Fullscreen: 'fullscreen',
-		}
-		this.uiStatesUnicodes = {
-			[this.uiStates.Close]: 'x',
-			[this.uiStates.Dock]: '⌃',
-			[this.uiStates.Minimize]: '⌄',
-			[this.uiStates.Fullscreen]: '⌆',
-		}
+		this.uiStates = UI_STATES
 		this.uiState = this.uiStates.Minimize
 		document.addEventListener('fullscreenchange', this.onFullscreen.bind(this))
 
@@ -125,18 +115,22 @@ 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}
 					<slot name="playback-controls"> ${Object.entries(this.uiStates).map(this.renderUiState.bind(this))} </slot>
 				</summary>
 				<slot name="player"></slot>
 			</details>
 		`
 	}
+	renderPlaybackIcon() {
+		return html`<r4-icon name="player_status" part="playback-status"></r4-icon>`
+	}
 
 	renderUiState(uiState) {
 		const [value, name] = uiState
 		return html`
 			<button @click=${this.onControlClick} value=${value} title=${name} name=${name} part="controls-button">
-				${this.uiStatesUnicodes[name]}
+				<r4-icon name="player_${name}"></r4-icon>
 			</button>
 		`
 	}

src/index.css

@@ -128,6 +128,7 @@ r4-app summary,
 r4-app button,
 r4-app r4-layout::part(controls-button) {
 	cursor: pointer;
+	margin: calc(var(--s) / 10);
 }
 
 r4-app progress[is='r4-loading'] {
@@ -218,6 +219,13 @@ r4-layout r4-player radio4000-player .Layout {
 	border-color: var(--c-link);
 }
 
+r4-layout::part(playback-status) {
+	display: flex;
+	flex-grow: 1;
+	align-self: center;
+	padding: calc(var(--s) / 3);
+	opacity: 0.3;
+}
 /* hide the player summary when fullscreen */
 r4-layout[ui-state='fullscreen']::part(playback-summary) {
 	display: none;

src/libs/appearence.js

@@ -1,5 +1,11 @@
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
 const THEMES = ['classic', 'jellybeans', 'minimal', 'hash']
 const COLOR_SCHEMES = ['os', 'light', 'dark']
-const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+const UI_STATES = {
+	Close: 'close',
+	Dock: 'dock',
+	Minimize: 'minimize',
+	Fullscreen: 'fullscreen',
+}
 
-export {THEMES, COLOR_SCHEMES, prefersDark}
+export {UI_STATES, THEMES, COLOR_SCHEMES, prefersDark}