From 7cd0d50ea0c6ef792f5a851fc5898a03f4cc7c2d Mon Sep 17 00:00:00 2001
From: "ug.rp" <ugrp@duck.com>
Date: Sun, 21 Apr 2024 17:04:00 +0200
Subject: [PATCH] update info for non migrated radio

---
 public/themes/hash.css       | 26 ++++++++++++++++++--------
 src/index.css                | 14 +++++++++++---
 src/pages/base-channel.js    |  7 -------
 src/pages/r4-page-channel.js | 11 ++++++-----
 4 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/public/themes/hash.css b/public/themes/hash.css
index 2ff358de..78b22183 100644
--- a/public/themes/hash.css
+++ b/public/themes/hash.css
@@ -3,31 +3,40 @@ r4-app {
 	/* colors */
 	--c-light: cornsilk;
 	--c-dark: black;
-	--c-high: dimgray;
-	--c-theme: chartreuse;
-	--c-theme2: rebeccapurple;
+	--c-dim: dimgray;
+	--c-intense: chartreuse;
+	--c-moderate: rebeccapurple;
 }
 
 /* color schemes */
 r4-app[color-scheme='os'] {
+	--c-bg: inherit;
+	--c-fg: inherit;
+	--c-link: inherit;
+	--c-menu-bg: inherit;
+	--c-form-bg: inherit;
 }
 r4-app[color-scheme='dark'] {
 	color-scheme: dark;
 	--c-bg: var(--c-dark);
 	--c-fg: var(--c-light);
-	--c-hi
-	--c-high: var(--c-theme);
+	--c-link: var(--c-intense);
+	--c-menu-bg: var(--c-dim);
+	--c-form-bg: var(--c-dim);
 }
 r4-app[color-scheme='light'] {
 	color-scheme: light;
 	--c-bg: var(--c-light);
 	--c-fg: var(--c-dark);
-	--c-high: var(--c-theme);
+	--c-link: var(--c-moderate);
+	--c-menu-bg: var(--c-dim);
+	--c-form-bg: var(--c-dim);
 }
 
 /* app */
 r4-app a {
 	text-decoration: none;
+	color: var(--c-link);
 }
 r4-app h1,
 r4-app h2,
@@ -40,7 +49,7 @@ r4-app menu li {
 	padding: calc(var(--s) / 2);
 }
 r4-app menu a {
-	background-color: var(--c-high);
+	background-color: var(--c-menu-bg);
 	padding: calc(var(--s) / 2);
 }
 r4-app a[aria-current='page'] {
@@ -60,7 +69,7 @@ r4-app summary {
 r4-app form {
 	max-width: calc(var(--s) * 100);
 	padding: var(--s);
-	background-color: var(--c-high);
+	background-color: var(--c-form-bg);
 	border-radius: calc(var(--s) / 3);
 }
 r4-app summary,
@@ -98,6 +107,7 @@ r4-page-header h1 {
 r4-list-item + r4-list-item {
 	margin-top: var(--s);
 }
+r4-track-title::before,
 r4-track-description::before,
 r4-track-discogs-url::before,
 r4-track-mentions menu::before,
diff --git a/src/index.css b/src/index.css
index d2f7c23d..13ed3e2e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -239,7 +239,7 @@ r4-layout::part(playback-menu) {
 */
 
 /* keep the player visible, but small */
-r4-layout[ui-state='minimize'] radio4000-player {
+r4-layout[ui-state='minimize'] r4-player radio4000-player {
 	min-height: auto;
 	max-height: var(--s-youtube); /* youtube guidelines for video, @to-keep */
 	/* 6.4rem height to hide video completely */
@@ -250,11 +250,19 @@ r4-layout r4-player radio4000-player .Layout {
 	border-color: var(--c-link);
 }
 /* overwrite some of radio4000-player library styles */
-r4-layout[ui-state='minimize'] radio4000-player .Layout-header,
-r4-layout[ui-state='minimize'] radio4000-player .Layout-main {
+r4-layout[ui-state='minimize'] r4-player radio4000-player .Layout-header,
+r4-layout[ui-state='minimize'] r4-player radio4000-player .Layout-main {
 	display: none;
 }
 
+r4-layout r4-page-main:has(radio4000-player) {
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+}
+r4-layout r4-page-main radio4000-player {
+	max-height: none;
+}
 /*
 	ui-state = minimal & dock
 	- make the playback sticky at top of viewport,
diff --git a/src/pages/base-channel.js b/src/pages/base-channel.js
index 056fc4ab..8aad5331 100644
--- a/src/pages/base-channel.js
+++ b/src/pages/base-channel.js
@@ -96,13 +96,6 @@ export default class BaseChannel extends R4Page {
 	}
 
 	renderHeader() {
-		if (this.isFirebaseChannel) {
-			return html`
-				<h1>@${this.params.slug}</h1>
-				<p>${this.isFirebaseChannel.body}</p>
-				<r4-avatar image=${this.isFirebaseChannel?.image} size="medium"></r4-avatar>
-			`
-		}
 		if (this.channelError) {
 			return this.renderChannelError()
 		}
diff --git a/src/pages/r4-page-channel.js b/src/pages/r4-page-channel.js
index 7de11254..f28f8f66 100644
--- a/src/pages/r4-page-channel.js
+++ b/src/pages/r4-page-channel.js
@@ -44,13 +44,14 @@ export default class R4PageChannel extends BaseChannel {
 	renderMain() {
 		if (this.isFirebaseChannel) {
 			return html`
-				<radio4000-player channel-slug=${this.params.slug}></radio4000-player>
-				<p>
+				<r4-info>
 					<small>
-						This channel has not yet migrated to the new Radio4000. That's ok, you can still listen here or on
-						<a href="https://v1.radio4000.com/${this.params.slug}">v1</a>
+						This Radio4000 channel is from <a href="https://v1.radio4000.com/${this.params.slug}">version 1</a>. If your
+						are the channel operator, import it to
+						<a href="https://migrate.radio4000.com/?slug=${this.params.slug}">version 2</a>.
 					</small>
-				</p>
+				</r4-info>
+				<radio4000-player channel-slug=${this.params.slug}></radio4000-player>
 			`
 		}
 		// if (this.channelError) {}