UX Overhaul Part 1 (#3047)

Co-authored-by: Joseph Milazzo <joseph.v.milazzo@gmail.com>

UI/Web/src/app/_services/theme.service.ts

@@ -1,9 +1,17 @@
 import {DOCUMENT} from '@angular/common';
 import {HttpClient} from '@angular/common/http';
-import {DestroyRef, inject, Inject, Injectable, Renderer2, RendererFactory2, SecurityContext} from '@angular/core';
+import {
+  DestroyRef,
+  inject,
+  Inject,
+  Injectable,
+  Renderer2,
+  RendererFactory2,
+  SecurityContext
+} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
 import {ToastrService} from 'ngx-toastr';
-import {map, ReplaySubject, take} from 'rxjs';
+import {filter, map, ReplaySubject, take, tap} from 'rxjs';
 import {environment} from 'src/environments/environment';
 import {ConfirmService} from '../shared/confirm.service';
 import {NotificationProgressEvent} from '../_models/events/notification-progress-event';
@@ -15,7 +23,9 @@ import {translate} from "@ngneat/transloco";
 import {DownloadableSiteTheme} from "../_models/theme/downloadable-site-theme";
 import {NgxFileDropEntry} from "ngx-file-drop";
 import {SiteThemeUpdatedEvent} from "../_models/events/site-theme-updated-event";
-
+import {NavigationEnd, Router} from "@angular/router";
+import {ColorscapeService} from "./colorscape.service";
+import {ColorScape} from "../_models/theme/colorscape";
 
 @Injectable({
   providedIn: 'root'
@@ -23,6 +33,8 @@ import {SiteThemeUpdatedEvent} from "../_models/events/site-theme-updated-event"
 export class ThemeService {
 
   private readonly destroyRef = inject(DestroyRef);
+  private readonly colorTransitionService = inject(ColorscapeService);
+
   public defaultTheme: string = 'dark';
   public defaultBookTheme: string = 'Dark';
 
@@ -42,9 +54,16 @@ export class ThemeService {
 
 
   constructor(rendererFactory: RendererFactory2, @Inject(DOCUMENT) private document: Document, private httpClient: HttpClient,
-  messageHub: MessageHubService, private domSanitizer: DomSanitizer, private confirmService: ConfirmService, private toastr: ToastrService) {
+  messageHub: MessageHubService, private domSanitizer: DomSanitizer, private confirmService: ConfirmService, private toastr: ToastrService,
+  private router: Router) {
     this.renderer = rendererFactory.createRenderer(null, null);
 
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationEnd)
+    ).subscribe(() => {
+      this.setColorScape('');
+    });
+
     messageHub.messages$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(message => {
 
       if (message.event === EVENTS.NotificationProgress) {
@@ -90,21 +109,21 @@ export class ThemeService {
     return getComputedStyle(this.document.body).getPropertyValue('--color-scheme').trim();
   }
 
-    /**
-     * --theme-color from theme. Updates the meta tag
-     * @returns
-     */
-    getThemeColor() {
-      return getComputedStyle(this.document.body).getPropertyValue('--theme-color').trim();
-    }
+  /**
+   * --theme-color from theme. Updates the meta tag
+   * @returns
+   */
+  getThemeColor() {
+    return getComputedStyle(this.document.body).getPropertyValue('--theme-color').trim();
+  }
 
-    /**
-     * --msapplication-TileColor from theme. Updates the meta tag
-     * @returns
-     */
-    getTileColor() {
-      return getComputedStyle(this.document.body).getPropertyValue('--title-color').trim();
-    }
+  /**
+   * --msapplication-TileColor from theme. Updates the meta tag
+   * @returns
+   */
+  getTileColor() {
+    return getComputedStyle(this.document.body).getPropertyValue('--title-color').trim();
+  }
 
   getCssVariable(variable: string) {
     return getComputedStyle(this.document.body).getPropertyValue(variable).trim();
@@ -166,6 +185,26 @@ export class ThemeService {
   }
 
 
+  /**
+   * Set's the background color from a single primary color.
+   * @param primaryColor
+   * @param complementaryColor
+   */
+  setColorScape(primaryColor: string, complementaryColor: string | null = null) {
+    this.colorTransitionService.setColorScape(primaryColor, complementaryColor);
+  }
+
+  /**
+   * Trigger a request to get the colors for a given entity and apply them
+   * @param entity
+   * @param id
+   */
+  refreshColorScape(entity: 'series' | 'volume' | 'chapter', id: number) {
+    return this.httpClient.get<ColorScape>(`${this.baseUrl}colorscape/${entity}?id=${id}`).pipe(tap((cs) => {
+      this.setColorScape(cs.primary || '', cs.secondary);
+    }));
+  }
+
   /**
    * Sets the theme as active. Will inject a style tag into document to load a custom theme and apply the selector to the body
    * @param themeName
@@ -187,7 +226,6 @@ export class ThemeService {
           const styleElem = this.document.createElement('style');
           styleElem.id = 'theme-' + theme.name;
           styleElem.appendChild(this.document.createTextNode(content));
-
           this.renderer.appendChild(this.document.head, styleElem);
 
           // Check if the theme has --theme-color and apply it to meta tag
@@ -238,6 +276,4 @@ export class ThemeService {
   private unsetBookThemes() {
     Array.from(this.document.body.classList).filter(cls => cls.startsWith('brtheme-')).forEach(c => this.document.body.classList.remove(c));
   }
-
-
 }