Merge branch 'dev'

Author: Dartegnian

images/web-stories-min.png

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { Component, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { AccentService } from 'src/app/services/accent-service.service';
 
@@ -7,13 +7,18 @@ import { AccentService } from 'src/app/services/accent-service.service';
 	templateUrl: './accent-switcher.component.html',
 	styleUrls: ['./accent-switcher.component.scss']
 })
-export class AccentSwitcherComponent implements OnInit, OnDestroy {
+export class AccentSwitcherComponent implements OnDestroy {
 	images: Array<string>;
 	selected: string;
 	accentSubscription: Subscription;
 	customImageSubscription: Subscription;
 	customImage: string | ArrayBuffer | null = null;
 	index: number = 1;
+	titleMappings: { [key: string]: string } = {
+		"primary": "Dartegnian Blue",
+		"secondary": "Vibrant Green",
+		"tertiary": "Filling Station Purple",
+	};
 
 	constructor(
 		private accent: AccentService,
@@ -40,9 +45,6 @@ export class AccentSwitcherComponent implements OnInit, OnDestroy {
 		);
 	}
 
-	ngOnInit(): void {
-	}
-
 	ngOnDestroy(): void {
 		this.accentSubscription.unsubscribe();
 		this.customImageSubscription.unsubscribe();
@@ -68,7 +70,8 @@ export class AccentSwitcherComponent implements OnInit, OnDestroy {
 
 	removeCustomImage() {
 		this.customImage = null;
-		this.accent.setCustomImage(null, true);
+		this.accent.setCustomImage(null);
+		this.changeAccent(1, "primary");
 	}
 
 	private getFileDataUrl(file: File): Promise<string> {

src/app/components/accent-switcher/accent-switcher.component.ts

@@ -1,11 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
 	selector: 'other-sites',
 	templateUrl: './other-sites.component.html',
 	styleUrls: ['./other-sites.component.scss']
 })
-export class OtherSitesComponent implements OnInit {
+export class OtherSitesComponent {
 	otherSites: any[];
 
 	constructor() {
@@ -28,6 +28,12 @@ export class OtherSitesComponent implements OnInit {
 				image: "blog",
 				description: "My new blog that's self-hosted and powered by Ghost CMS. Has a custom theme with my standard Material You color scheme."
 			},
+			{
+				name: "Web Stories",
+				link: "https://stories.dartegnian.com",
+				image: "web-stories",
+				description: "Stories from my life, now on the web. Accelerated Mobile Pages (AMPs) built from scratch using Next.js."
+			},
 			{
 				name: "Forever One (WG-Easy)",
 				link: "https://wg.dartegnian.com",
@@ -42,7 +48,4 @@ export class OtherSitesComponent implements OnInit {
 			}
 		];
 	}
-
-	ngOnInit(): void {
-	}
 }

src/app/components/other-sites/other-sites.component.ts

@@ -26,6 +26,8 @@ export class AccentService {
 	customImage: string | ArrayBuffer | null = null;
 	customImageSubscription: Subject<string | ArrayBuffer>;
 
+	isPlaying = false;
+
 	constructor(
 		private idb: IdbService,
 		private meta: Meta
@@ -39,21 +41,29 @@ export class AccentService {
 		index = Number(index);
 		this.activeIndex = index;
 		this.accentSubscription.next(index);
-		this.setThemeFromM3();
 		this.setThemeInIdb(index);
+
+		if (!this.isPlaying) {
+			this.setThemeFromM3();
+		}
 	}
 
 	public setThemeMode(mode: "light" | "dark") {
 		this.themeMode = mode;
-		this.setThemeFromM3();
 		this.themeSubscription.next(mode);
+
+		if (!this.isPlaying) {
+			this.setThemeFromM3();
+		}
 	}
 
-	public setMetaTagColor() {
+	public setMetaTagColor(theme?: Theme) {
+		const primaryColorNumber: number = theme ? theme.schemes[this.themeMode].primaryContainer as number : this.themeRawColorData?.schemes[this.themeMode].primaryContainer as number;
+
 		this.meta.updateTag({
 			name: "theme-color",
 			content: this.argbToRgb(
-				this.themeRawColorData?.schemes[this.themeMode].primaryContainer as number
+				primaryColorNumber
 			)
 		});
 	}
@@ -67,7 +77,7 @@ export class AccentService {
 		});
 	}
 
-	async setThemeFromM3(element?: HTMLImageElement) {
+	async setThemeFromM3() {
 		const theme = await this.setM3ColorAndTarget(
 			"accent-" + this.images[this.activeIndex],
 			document.body
@@ -136,7 +146,8 @@ export class AccentService {
 
 	async setM3ColorAndTarget(
 		parentOfImg: string,
-		target: string | HTMLElement
+		target: string | HTMLElement,
+		isSiteFrameThemed?: boolean
 	) {
 		let theme = null;
 		const parentElement = document.getElementById(parentOfImg);
@@ -167,9 +178,16 @@ export class AccentService {
 					dark: this.themeMode === "light" ? false : true
 				}
 			);
+		}
 
+		if (theme && isSiteFrameThemed) {
+			this.setMetaTagColor(theme);
 		}
 
 		return theme;
 	}
+
+	setIsPlaying(isPlaying: boolean): void {
+		this.isPlaying = isPlaying;
+	}
 }