From 1de6b750e1e15b0dec9baf7e0ce58bb8b6a4d504 Mon Sep 17 00:00:00 2001 From: Oskar Rough Date: Mon, 22 Apr 2024 10:08:28 +0200 Subject: [PATCH 1/4] Fix event target --- src/components/r4-layout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/r4-layout.js b/src/components/r4-layout.js index 838748a6..cb10916d 100644 --- a/src/components/r4-layout.js +++ b/src/components/r4-layout.js @@ -135,7 +135,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) From 67112c189e32c4515723d9fe1c214934330754fa Mon Sep 17 00:00:00 2001 From: Oskar Rough Date: Mon, 22 Apr 2024 10:17:59 +0200 Subject: [PATCH 2/4] Add comments and new fullscreen icon --- src/components/r4-icon.js | 2 +- src/libs/appearence.js | 25 +++++++++++++++++++------ 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/src/components/r4-icon.js b/src/components/r4-icon.js index 7b49e6cd..aa114c7d 100644 --- a/src/components/r4-icon.js +++ b/src/components/r4-icon.js @@ -24,7 +24,7 @@ const ICONS = { player_close: 'x', player_dock: '⌃', player_minimize: '⌄', - player_fullscreen: '⌆', + player_fullscreen: '⛶', // ⌆ follow: '☆', unfollow: '★', } diff --git a/src/libs/appearence.js b/src/libs/appearence.js index e7b45277..b8e7fe61 100644 --- a/src/libs/appearence.js +++ b/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" - is the the one you always wanted, player still there playing, but not visible +"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", what you always wanted too +*/ From 89f259b8fc739f7b73910bdf90f895c8b9974868 Mon Sep 17 00:00:00 2001 From: Oskar Rough Date: Mon, 22 Apr 2024 10:19:48 +0200 Subject: [PATCH 3/4] Remove some comments --- src/libs/appearence.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/appearence.js b/src/libs/appearence.js index b8e7fe61..e5548491 100644 --- a/src/libs/appearence.js +++ b/src/libs/appearence.js @@ -15,10 +15,10 @@ export const UI_STATES = { } /* -"detail" is "micro" - is the the one you always wanted, player still there playing, but not visible +"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", what you always wanted too +"close" is to "finish playback" */ From 0a63d5c03a2728c6b6cd9dd179b5bad59e7b98ef Mon Sep 17 00:00:00 2001 From: Oskar Rough Date: Mon, 22 Apr 2024 10:39:32 +0200 Subject: [PATCH 4/4] Add currently playing info to player summary --- src/components/r4-app.js | 2 +- src/components/r4-layout.js | 5 ++++- src/index.css | 22 ++++++++++++++++++++-- 3 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/components/r4-app.js b/src/components/r4-app.js index a334d5da..4f0cafa8 100644 --- a/src/components/r4-app.js +++ b/src/components/r4-app.js @@ -226,7 +226,7 @@ export default class R4App extends LitElement { return html`` } return html` - + ${!this.config.singleChannel ? this.renderMenu() : null}
${this.renderRouter()}
- ${this.isPlaying ? this.renderPlaybackIcon() : null} + ${this.isPlaying ? + html`${this.renderPlaybackIcon()} + ${this.config.playingChannel?.name} - ${this.config.playingTrack?.title} + ` : null} ${Object.entries(this.uiStates).map(this.renderUiState.bind(this))} diff --git a/src/index.css b/src/index.css index 2bd65e49..29737a48 100644 --- a/src/index.css +++ b/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;