AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Theme Viewer + Theme Updater (#2952)

Browse source
This commit is contained in:
Joe Milazzo 2024-05-13 17:00:13 -05:00 • committed by GitHub
parent 24302d4fcc
commit 38e7c1c131
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
35 changed files with 4563 additions and 284 deletions
Download patch file Download diff file Expand all files Collapse all files

80
UI/Web/src/app/_services/theme.service.ts
View file

@ -1,25 +1,20 @@
import { DOCUMENT } from '@angular/common';
import { HttpClient } from '@angular/common/http';
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 { environment } from 'src/environments/environment';
import { ConfirmService } from '../shared/confirm.service';
import { NotificationProgressEvent } from '../_models/events/notification-progress-event';
import { SiteTheme, ThemeProvider } from '../_models/preferences/site-theme';
import { TextResonse } from '../_types/text-response';
import { EVENTS, MessageHubService } from './message-hub.service';
import {DOCUMENT} from '@angular/common';
import {HttpClient} from '@angular/common/http';
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 {environment} from 'src/environments/environment';
import {ConfirmService} from '../shared/confirm.service';
import {NotificationProgressEvent} from '../_models/events/notification-progress-event';
import {SiteTheme, ThemeProvider} from '../_models/preferences/site-theme';
import {TextResonse} from '../_types/text-response';
import {EVENTS, MessageHubService} from './message-hub.service';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
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";
@Injectable({
@ -52,18 +47,45 @@ export class ThemeService {
messageHub.messages$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(message => {
if (message.event !== EVENTS.NotificationProgress) return;
const notificationEvent = (message.payload as NotificationProgressEvent);
if (notificationEvent.name !== EVENTS.SiteThemeProgress) return;
if (message.event === EVENTS.NotificationProgress) {
const notificationEvent = (message.payload as NotificationProgressEvent);
if (notificationEvent.name !== EVENTS.SiteThemeProgress) return;
if (notificationEvent.eventType === 'ended') {
if (notificationEvent.name === EVENTS.SiteThemeProgress) this.getThemes().subscribe(() => {
if (notificationEvent.eventType === 'ended') {
if (notificationEvent.name === EVENTS.SiteThemeProgress) this.getThemes().subscribe();
}
return;
}
if (message.event === EVENTS.SiteThemeUpdated) {
const evt = (message.payload as SiteThemeUpdatedEvent);
this.currentTheme$.pipe(take(1)).subscribe(currentTheme => {
if (currentTheme && currentTheme.name !== EVENTS.SiteThemeProgress) return;
console.log('Active theme has been updated, refreshing theme');
this.setTheme(currentTheme.name);
});
}
});
}
getDownloadableThemes() {
return this.httpClient.get<Array<DownloadableSiteTheme>>(this.baseUrl + 'theme/browse');
}
downloadTheme(theme: DownloadableSiteTheme) {
return this.httpClient.post<SiteTheme>(this.baseUrl + 'theme/download-theme', theme);
}
uploadTheme(themeFile: File, fileEntry: NgxFileDropEntry) {
const formData = new FormData()
formData.append('formFile', themeFile, fileEntry.relativePath);
return this.httpClient.post<SiteTheme>(this.baseUrl + 'theme/upload-theme', formData);
}
getColorScheme() {
return getComputedStyle(this.document.body).getPropertyValue('--color-scheme').trim();
}
@ -113,6 +135,12 @@ export class ThemeService {
this.unsetThemes();
}
deleteTheme(themeId: number) {
return this.httpClient.delete(this.baseUrl + 'theme?themeId=' + themeId).pipe(map(() => {
this.getThemes().subscribe(() => {});
}));
}
setDefault(themeId: number) {
return this.httpClient.post(this.baseUrl + 'theme/update-default', {themeId: themeId}).pipe(map(() => {
// Refresh the cache when a default state is changed
@ -148,7 +176,7 @@ export class ThemeService {
this.unsetThemes();
this.renderer.addClass(this.document.querySelector('body'), theme.selector);
if (theme.provider === ThemeProvider.User && !this.hasThemeInHead(theme.name)) {
if (theme.provider !== ThemeProvider.System && !this.hasThemeInHead(theme.name)) {
// We need to load the styles into the browser
this.fetchThemeContent(theme.id).subscribe(async (content) => {
if (content === null) {