Merge remote-tracking branch 'origin/christmas' into staging

.wiki/Configuration.md

@@ -72,6 +72,7 @@ Location: `frontend/dist/config/default.json`
 | `siteSettings.logo_blue` | Path to the blue logo image, by default it is `/assets/blue_wordmark.png`. |
 | `siteSettings.sitename` | Should be the name of the site. |
 | `siteSettings.github` | URL of GitHub repository, defaults to `https://github.com/Musare/MusareNode`. |
+| `siteSettings.christmas` | Whether to enable christmas theming. |
 | `messages.accountRemoval` | Message to return to users on account removal. |
 | `shortcutOverrides` | Overwrite keyboard shortcuts, for example `"editSong.useAllDiscogs": { "keyCode": 68, "ctrl": true, "alt": true, "shift": false, "preventDefault": true }`. |
 | `skipConfigVersionCheck` | Skips checking if the config version is outdated or not. Should almost always be set to false. |

backend/logic/db/schemas/station.js

@@ -42,7 +42,7 @@ export default {
 	owner: { type: String },
 	partyMode: { type: Boolean },
 	playMode: { type: String, enum: ["random", "sequential"], default: "random" },
-	theme: { type: String, enum: ["blue", "purple", "teal", "orange"], default: "blue" },
+	theme: { type: String, enum: ["blue", "purple", "teal", "orange", "red"], default: "blue" },
 	includedPlaylists: [{ type: String }],
 	excludedPlaylists: [{ type: String }],
 	documentVersion: { type: Number, default: 6, required: true }

frontend/dist/config/template.json

@@ -22,7 +22,8 @@
 		"logo_white": "/assets/white_wordmark.png",
 		"logo_blue": "/assets/blue_wordmark.png",
 		"sitename": "Musare",
-		"github": "https://github.com/Musare/Musare"
+		"github": "https://github.com/Musare/Musare",
+		"christmas": false
 	},
 	"messages": {
 		"accountRemoval": "Your account will be deactivated instantly and your data will shortly be deleted by an admin."

frontend/src/components/modals/ManageStation/Tabs/Settings.vue

@@ -90,6 +90,14 @@
 								<i class="material-icons">palette</i>
 								Orange
 							</button>
+							<button
+								class="red"
+								v-if="station.theme !== 'red'"
+								@click="updateTheme('red')"
+							>
+								<i class="material-icons">palette</i>
+								Red
+							</button>
 						</template>
 					</tippy>
 				</div>
@@ -607,6 +615,10 @@ export default {
 				background-color: var(--teal);
 			}
 
+			&.red {
+				background-color: var(--red);
+			}
+
 			i {
 				font-size: 20px;
 				margin-right: 4px;

frontend/src/pages/Station/index.vue

@@ -202,6 +202,7 @@
 										width: `${seekerbarPercentage}%`
 									}"
 									:class="{
+										'christmas-seeker': christmas,
 										nyan:
 											currentSong &&
 											currentSong.youtubeId ===
@@ -908,7 +909,8 @@ export default {
 			socketConnected: null,
 			persistentToastCheckerInterval: null,
 			persistentToasts: [],
-			partyPlaylistLock: false
+			partyPlaylistLock: false,
+			christmas: false
 		};
 	},
 	computed: {
@@ -1041,6 +1043,8 @@ export default {
 
 		this.frontendDevMode = await lofig.get("mode");
 
+		this.christmas = await lofig.get("siteSettings.christmas");
+
 		this.socket.dispatch(
 			"stations.existsByName",
 			this.stationIdentifier,
@@ -2814,6 +2818,25 @@ export default {
 	}
 }
 
+.christmas-seeker {
+	background: repeating-linear-gradient(
+		-45deg,
+		var(--white),
+		var(--white) 1rem,
+		var(--red) 1rem,
+		var(--red) 2rem
+	);
+
+	background-size: 200% 200%;
+	animation: christmas 10s linear infinite;
+}
+
+@keyframes christmas {
+	100% {
+		background-position: 100% 100%;
+	}
+}
+
 .bg-bubbles {
 	top: 0;
 	left: 0;