Merge branch 'feature/primary-color-config' into staging

.env.example

@@ -30,6 +30,7 @@ BACKUP_LOCATION=
 BACKUP_NAME=
 
 MUSARE_SITENAME=Musare
+MUSARE_PRIMARY_COLOR="#03a9f4"
 
 MUSARE_DEBUG_VERSION=true
 MUSARE_DEBUG_GIT_REMOTE=false

.wiki/Configuration.md

@@ -50,6 +50,7 @@ machine, even though the application within the container is listening on `21017
 | `BACKUP_LOCATION` | Directory to store musare.sh backups. Defaults to `/backups` in script location. |
 | `BACKUP_NAME` | Name of musare.sh backup files. Defaults to `musare-$(date +"%Y-%m-%d-%s").dump`. |
 | `MUSARE_SITENAME` | Should be the name of the site. [^1] |
+| `MUSARE_PRIMARY_COLOR` | Primary color of the application, in hex format. [^1] |
 | `MUSARE_DEBUG_VERSION` | Log/expose the current package.json version. [^1] |
 | `MUSARE_DEBUG_GIT_REMOTE` | Log/expose the current Git repository's remote. [^1] |
 | `MUSARE_DEBUG_GIT_REMOTE_URL` | Log/expose the current Git repository's remote URL. [^1] |
@@ -138,6 +139,7 @@ For more information on configuration files please refer to the
 | `siteSettings.christmas` | Whether to enable christmas theme. |
 | `footerLinks` | Add custom links to footer by specifying `"title": "url"`, e.g. `"GitHub": "https://github.com/Musare/Musare"`. You can disable about, team and news links (but not the pages themselves) by setting them to false, e.g. `"about": false`. |
 | `shortcutOverrides` | Overwrite keyboard shortcuts, for example `"editSong.useAllDiscogs": { "keyCode": 68, "ctrl": true, "alt": true, "shift": false, "preventDefault": true }`. |
+| `primaryColor` | Primary color of the application, in hex format. |
 | `registrationDisabled` | If set to `true`, users can't register accounts. |
 | `sendDataRequestEmails` | If `true` all admin users will be sent an email if a data request is received. Requires mail to be enabled and configured. |
 | `skipConfigVersionCheck` | Skips checking if the config version is outdated or not. Should almost always be set to false. |

backend/config/custom-environment-variables.json

@@ -1,5 +1,6 @@
 {
 	"sitename": "MUSARE_SITENAME",
+	"primaryColor": "MUSARE_PRIMARY_COLOR",
 	"redis": {
 		"password": "REDIS_PASSWORD"
 	},

backend/config/default.json

@@ -102,6 +102,7 @@
 		"news": true,
 		"GitHub": "https://github.com/Musare/Musare"
 	},
+	"primaryColor": "#03a9f4",
 	"shortcutOverrides": {},
 	"registrationDisabled": false,
 	"sendDataRequestEmails": true,

backend/logic/ws.js

@@ -579,6 +579,7 @@ class _WSModule extends CoreClass {
 					messages: config.get("messages"),
 					christmas: config.get("christmas"),
 					footerLinks: config.get("footerLinks"),
+					primaryColor: config.get("primaryColor"),
 					shortcutOverrides: config.get("shortcutOverrides"),
 					registrationDisabled: config.get("registrationDisabled"),
 					mailEnabled: config.get("mail.enabled"),

docker-compose.yml

@@ -12,6 +12,7 @@ services:
     environment:
       - CONTAINER_MODE=${CONTAINER_MODE:-production}
       - MUSARE_SITENAME=${MUSARE_SITENAME:-Musare}
+      - MUSARE_PRIMARY_COLOR=${MUSARE_PRIMARY_COLOR:-"#03a9f4"}
       - MUSARE_DEBUG_VERSION=${MUSARE_DEBUG_VERSION:-true}
       - MUSARE_DEBUG_GIT_REMOTE=${MUSARE_DEBUG_GIT_REMOTE:-false}
       - MUSARE_DEBUG_GIT_REMOTE_URL=${MUSARE_DEBUG_GIT_REMOTE_URL:-false}
@@ -36,6 +37,7 @@ services:
         FRONTEND_MODE: "${FRONTEND_MODE:-production}"
         FRONTEND_PROD_DEVTOOLS: "${FRONTEND_PROD_DEVTOOLS:-false}"
         MUSARE_SITENAME: "${MUSARE_SITENAME:-Musare}"
+        MUSARE_PRIMARY_COLOR: "${MUSARE_PRIMARY_COLOR:-#03a9f4}"
         MUSARE_DEBUG_VERSION: "${MUSARE_DEBUG_VERSION:-true}"
         MUSARE_DEBUG_GIT_REMOTE: "${MUSARE_DEBUG_GIT_REMOTE:-false}"
         MUSARE_DEBUG_GIT_REMOTE_URL: "${MUSARE_DEBUG_GIT_REMOTE_URL:-false}"
@@ -54,6 +56,7 @@ services:
       - FRONTEND_DEV_PORT=${FRONTEND_DEV_PORT:-81}
       - FRONTEND_PROD_DEVTOOLS=${FRONTEND_PROD_DEVTOOLS:-false}
       - MUSARE_SITENAME=${MUSARE_SITENAME:-Musare}
+      - MUSARE_PRIMARY_COLOR=${MUSARE_PRIMARY_COLOR:-"#03a9f4"}
       - MUSARE_DEBUG_VERSION=${MUSARE_DEBUG_VERSION:-true}
       - MUSARE_DEBUG_GIT_REMOTE=${MUSARE_DEBUG_GIT_REMOTE:-false}
       - MUSARE_DEBUG_GIT_REMOTE_URL=${MUSARE_DEBUG_GIT_REMOTE_URL:-false}

frontend/Dockerfile

@@ -12,6 +12,7 @@ FROM node:18 AS musare_frontend
 ARG FRONTEND_MODE=production
 ARG FRONTEND_PROD_DEVTOOLS=false
 ARG MUSARE_SITENAME=Musare
+ARG MUSARE_PRIMARY_COLOR="#03a9f4"
 ARG MUSARE_DEBUG_VERSION=true
 ARG MUSARE_DEBUG_GIT_REMOTE=false
 ARG MUSARE_DEBUG_GIT_REMOTE_URL=false
@@ -22,6 +23,7 @@ ARG MUSARE_DEBUG_GIT_LATEST_COMMIT_SHORT=true
 ENV FRONTEND_MODE=${FRONTEND_MODE} \
     FRONTEND_PROD_DEVTOOLS=${FRONTEND_PROD_DEVTOOLS} \
     MUSARE_SITENAME=${MUSARE_SITENAME} \
+    MUSARE_PRIMARY_COLOR=${MUSARE_PRIMARY_COLOR} \
     MUSARE_DEBUG_VERSION=${MUSARE_DEBUG_VERSION} \
     MUSARE_DEBUG_GIT_REMOTE=${MUSARE_DEBUG_GIT_REMOTE} \
     MUSARE_DEBUG_GIT_REMOTE_URL=${MUSARE_DEBUG_GIT_REMOTE_URL} \

frontend/src/App.vue

@@ -105,6 +105,10 @@ watch(christmas, enabled => {
 });
 
 onMounted(async () => {
+	document.getElementsByTagName(
+		"html"
+	)[0].style.cssText = `--primary-color: ${configStore.primaryColor}`;
+
 	window
 		.matchMedia("(prefers-color-scheme: dark)")
 		.addEventListener("change", e => {
@@ -122,6 +126,10 @@ onMounted(async () => {
 	socket.onConnect(() => {
 		socketConnected.value = true;
 
+		document.getElementsByTagName(
+			"html"
+		)[0].style.cssText = `--primary-color: ${configStore.primaryColor}`;
+
 		if (!loggedIn.value) {
 			broadcastChannel.value.user_login = new BroadcastChannel(
 				`${configStore.cookie}.user_login`

frontend/src/components/SoundcloudPlayer.vue

@@ -2,6 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import Toast from "toasters";
 import { useSoundcloudPlayer } from "@/composables/useSoundcloudPlayer";
+import { useConfigStore } from "@/stores/config";
 import { useStationStore } from "@/stores/station";
 
 import aw from "@/aw";
@@ -33,6 +34,7 @@ const {
 	soundcloudUnload
 } = useSoundcloudPlayer();
 
+const configStore = useConfigStore();
 const stationStore = useStationStore();
 const { updateMediaModalPlayingAudio } = stationStore;
 
@@ -169,7 +171,7 @@ const drawCanvas = () => {
 
 	const widthCurrentTime = (currentTime / videoDuration) * width;
 
-	const durationColor = "#03A9F4";
+	const durationColor = configStore.primaryColor;
 	const afterDurationColor = "#41E841";
 	const currentDurationColor = "#3b25e8";
 

frontend/src/components/YoutubePlayer.vue

@@ -2,6 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import Toast from "toasters";
 import { useYoutubePlayer } from "@/composables/useYoutubePlayer";
+import { useConfigStore } from "@/stores/config";
 import { useStationStore } from "@/stores/station";
 
 import aw from "@/aw";
@@ -25,6 +26,7 @@ const {
 	setPlaybackRate: youtubeSetPlaybackRate
 } = useYoutubePlayer();
 
+const configStore = useConfigStore();
 const { updateMediaModalPlayingAudio } = useStationStore();
 
 const interval = ref(null);
@@ -132,7 +134,7 @@ const drawCanvas = () => {
 
 	const widthCurrentTime = (currentTime / videoDuration) * width;
 
-	const durationColor = "#03A9F4";
+	const durationColor = configStore.primaryColor;
 	const afterDurationColor = "#41E841";
 	const currentDurationColor = "#3b25e8";
 

frontend/src/components/modals/EditSong/index.vue

@@ -732,7 +732,7 @@ const drawCanvas = async () => {
 	const widthCurrentTime = (currentTime / videoDuration) * width;
 
 	const skipDurationColor = "#F42003";
-	const durationColor = "#03A9F4";
+	const durationColor = configStore.primaryColor;
 	const afterDurationColor = "#41E841";
 	const currentDurationColor = "#3b25e8";
 

frontend/src/pages/Home.vue

@@ -910,13 +910,7 @@ onBeforeUnmount(() => {
 <style lang="less">
 .christmas-mode .home-page {
 	.header .overlay {
-		background: linear-gradient(
-			180deg,
-			rgba(231, 77, 60, 0.8) 0%,
-			rgba(231, 77, 60, 0.95) 31.25%,
-			rgba(231, 77, 60, 0.9) 54.17%,
-			rgba(231, 77, 60, 0.8) 100%
-		);
+		background-color: var(--red);
 	}
 	.christmas-lights {
 		top: 300px !important;
@@ -966,13 +960,7 @@ html {
 
 .night-mode {
 	.header .overlay {
-		background: linear-gradient(
-			180deg,
-			rgba(34, 34, 34, 0.8) 0%,
-			rgba(34, 34, 34, 0.95) 31.25%,
-			rgba(34, 34, 34, 0.9) 54.17%,
-			rgba(34, 34, 34, 0.8) 100%
-		);
+		background-color: var(--dark-grey-3);
 	}
 	.station-card {
 		background-color: var(--dark-grey-3);
@@ -1016,13 +1004,8 @@ html {
 		user-select: none;
 	}
 	.overlay {
-		background: linear-gradient(
-			180deg,
-			rgba(3, 169, 244, 0.8) 0%,
-			rgba(3, 169, 244, 0.95) 31.25%,
-			rgba(3, 169, 244, 0.9) 54.17%,
-			rgba(3, 169, 244, 0.8) 100%
-		);
+		background-color: var(--primary-color);
+		opacity: 0.85;
 		position: absolute;
 		height: 300px;
 		width: 100%;

frontend/src/pages/Station/index.vue

@@ -54,7 +54,8 @@ const router = useRouter();
 
 const { socket } = useWebsocketsStore();
 const configStore = useConfigStore();
-const { experimental, sitename, christmas } = storeToRefs(configStore);
+const { experimental, primaryColor, sitename, christmas } =
+	storeToRefs(configStore);
 const stationStore = useStationStore();
 const userAuthStore = useUserAuthStore();
 const userPreferencesStore = useUserPreferencesStore();
@@ -1855,7 +1856,9 @@ onMounted(async () => {
 });
 
 onBeforeUnmount(() => {
-	document.getElementsByTagName("html")[0].style.cssText = "";
+	document.getElementsByTagName(
+		"html"
+	)[0].style.cssText = `--primary-color: ${primaryColor.value}`;
 
 	if (experimental.value.media_session) {
 		ms.removeListeners(0);

frontend/src/stores/config.ts

@@ -12,6 +12,7 @@ export const useConfigStore = defineStore("config", {
 		messages: Record<string, string>;
 		christmas: boolean;
 		footerLinks: Record<string, string | boolean>;
+		primaryColor: string;
 		shortcutOverrides: Record<string, any>;
 		registrationDisabled: boolean;
 		mailEnabled: boolean;
@@ -38,6 +39,7 @@ export const useConfigStore = defineStore("config", {
 		},
 		christmas: false,
 		footerLinks: {},
+		primaryColor: MUSARE_PRIMARY_COLOR,
 		shortcutOverrides: {},
 		registrationDisabled: false,
 		mailEnabled: true,

frontend/src/types/vite-env.d.ts

@@ -1 +1,2 @@
 declare const MUSARE_SITENAME: string;
+declare const MUSARE_PRIMARY_COLOR: string;

frontend/vite.config.js

@@ -164,6 +164,9 @@ export default {
 		MUSARE_SITENAME: JSON.stringify(
 			process.env.MUSARE_SITENAME ?? "Musare"
 		),
+		MUSARE_PRIMARY_COLOR: JSON.stringify(
+			process.env.MUSARE_PRIMARY_COLOR ?? "#03a9f4"
+		),
 		MUSARE_VERSION: JSON.stringify(debug.version),
 		MUSARE_GIT_REMOTE: JSON.stringify(debug.git.remote),
 		MUSARE_GIT_REMOTE_URL: JSON.stringify(debug.git.remoteUrl),