fead: Multi lang UI

angular.json

@@ -53,7 +53,8 @@
             "assets": [
               "src/favicon.ico",
               "src/assets",
-              "src/manifest.webmanifest"
+              "src/manifest.webmanifest",
+              "src/manifest-uk.webmanifest"
             ],
             "styles": [
               "src/styles.scss"
@@ -126,7 +127,8 @@
             "assets": [
               "src/favicon.ico",
               "src/assets",
-              "src/manifest.webmanifest"
+              "src/manifest.webmanifest",
+              "src/manifest-uk.webmanifest"
             ],
             "styles": [
               "src/styles.scss"

src/app/app.component.ts

@@ -1,7 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, WritableSignal, signal } from '@angular/core';
+import { LangService } from './shared/data-access/lang.service';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   template: `<router-outlet></router-outlet>`
 })
-export class AppComponent {}
+export class AppComponent {
+  constructor(public lang: LangService, private route: ActivatedRoute) {
+    this.lang.updateManifest()
+    this.lang.updateTranslate()
+  }
+
+  ngOnInit() {
+    this.route.pathFromRoot[0].queryParams.subscribe(q => {
+      const l = q['lang']
+      if (l && this.lang.manifests.has(l)) {
+        this.lang.setLang(l)
+        this.lang.updateManifest()
+      }
+    })
+  }
+}

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule, isDevMode } from '@angular/core';
+import { LOCALE_ID, NgModule, isDevMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -8,6 +8,12 @@ import { ServiceWorkerModule } from '@angular/service-worker';
 import { PageNotFoundComponent } from './page-not-found.component';
 import { SharedModule } from './shared/shared.module';
 
+import { LocaleProvider } from './shared/data-access/locale.provider';
+import { registerLocaleData } from '@angular/common';
+import localeUk from "@angular/common/locales/uk";
+
+registerLocaleData(localeUk)
+
 @NgModule({
   declarations: [
     AppComponent,

src/app/imgur/imgur-shell/imgur-shell.component.html

@@ -5,8 +5,8 @@
         <a href="https://imgur.com" target="_blank" rel="noopener noreferrer" style="display: flex; gap: 1ch; ">
             <img src="/assets/logos/imgur-logo.svg" alt="Imgur logo">
         </a>
-        <p>Images via <a href="https://imgur.com" target="_blank" rel="noopener noreferrer">Imgur</a> API.
-            Thanks!<br>Details on their site. Respect copyrights.</p>
+        <p>{{lang.phrases.imagesVia}}<a href="https://imgur.com" target="_blank" rel="noopener noreferrer">Imgur</a> API.
+            {{lang.phrases.thanks}}<br>{{lang.phrases.detalisCopy}}</p>
     </div>
 </app-viewer>
 <div *ngIf="error$ | async as error" class="error-message">

src/app/imgur/imgur-shell/imgur-shell.component.ts

@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { ImgurService } from '../data-access/imgur.service';
 import { CompositionEpisode } from '../../shared/utils';
 import { BehaviorSubject, Subject, catchError, finalize, forkJoin, of, switchMap, takeUntil } from 'rxjs';
+import { LangService } from '../../shared/data-access/lang.service';
 
 @Component({
   selector: 'app-imgur-shell',
@@ -23,7 +24,7 @@ export class ImgurShellComponent {
 
       return (this.imgur.getComposition(id)).pipe(
         catchError(() => {
-          this.error$.next('Data loading error. Please try again later.');
+          this.error$.next(this.lang.phrases.dataLoadErr);
 
           return of(null);
         }),
@@ -32,5 +33,5 @@ export class ImgurShellComponent {
     })
   );
 
-  constructor(private route: ActivatedRoute, public imgur: ImgurService) { }
+  constructor(private route: ActivatedRoute, public imgur: ImgurService, public lang: LangService) { }
 }

src/app/link-parser/link-parser/link-parser.component.scss

@@ -100,4 +100,8 @@ svg:hover {
 
         scale:  1.16;
     }
+}
+
+app-overlay {
+    position: absolute;
 }

src/app/link-parser/link-parser/link-parser.component.ts

@@ -2,7 +2,13 @@ import { Component, Signal, WritableSignal, computed, signal } from '@angular/co
 import { LinkParserService } from '../data-access/link-parser.service';
 import { ImgurLinkParser, MangadexLinkParser } from '../utils';
 import { ActivatedRoute , Router} from '@angular/router';
+import { LangService } from '../../shared/data-access/lang.service';
+import { ViewModeOption } from '../../shared/data-access';
 
+const LANG_OPTIONS: ViewModeOption[] = [
+  { dir: "rtl", mode: "pages", hintPhraceKey: "english", code: "en", emoji: "🇬🇧" },
+  { dir: "ltr", mode: "pages", hintPhraceKey: "ukrainian", code: "uk", emoji: "🇺🇦" }
+]
 @Component({
   selector: 'app-link-parser',
   templateUrl: './link-parser.component.html',
@@ -16,9 +22,14 @@ export class LinkParserComponent {
   link: WritableSignal<string> = signal('');
   linkParams: Signal<any> = computed(() => this.parser.parse(this.link()));
 
+  langOpt = LANG_OPTIONS
 
-  constructor(private route: ActivatedRoute, private router: Router, public parser: LinkParserService) {
+  optLangValue = () => this.langOpt.filter((opt: any)=>opt.code == this.lang.lang())[0]
+
+  constructor(private route: ActivatedRoute, private router: Router, public parser: LinkParserService, public lang: LangService) {
     this.initParser();
+  //  console.log( this.);
+
   }
 
   initParser() {
@@ -33,10 +44,10 @@ export class LinkParserComponent {
   }
 
   ngOnInit() {
-    const q: string | null = this.route.snapshot.queryParamMap.get('q');
+    const url: string | null = this.route.snapshot.queryParamMap.get('url');
 
-    if (q) {
-      this.link.set(q ?? '')
+    if (url) {
+      this.link.set(url ?? '')
     } else {
       this.initFromclipboard();
     }

src/app/shared/data-access/lang.service.ts

@@ -0,0 +1,65 @@
+import { Injectable, WritableSignal, signal } from '@angular/core';
+import { Phrases } from '../utils/phrases';
+import { Observable, map, of } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+
+type Langs = { en: string, uk: string }
+
+const DEFAULT_LANG = 'en'
+const LANG_STORAGE_NAME = 'lang'
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LangService {
+  public readonly manifests = new Map([
+    ['en', "manifest.webmanifest"],
+    ['uk', "manifest-uk.webmanifest"]
+  ]);
+
+  lang: WritableSignal<string> = signal(localStorage.getItem(LANG_STORAGE_NAME) ?? DEFAULT_LANG);
+  linkManifestElement: WritableSignal<HTMLElement | null> = signal(document.querySelector('link[rel="manifest"]'))
+
+  phrases: Phrases = new Phrases();
+
+  constructor(private http: HttpClient) { }
+
+  setLang(lang: string) {
+    this.lang.set(lang)
+    document.documentElement.lang = lang
+    localStorage.setItem(LANG_STORAGE_NAME, lang)
+    this.updateTranslate()
+  }
+
+  updateManifest() {
+    this.linkManifestElement()?.setAttribute('href', this.manifests.get(this.lang()) ?? 'manifest.webmanifest');
+  }
+
+  updateTranslate() {
+    if (this.lang() == 'en') { this.phrases = new Phrases(); return; }
+
+    this.getTranslate(this.lang()).subscribe(data =>{
+      this.phrases = data
+    })
+  }
+
+  getTranslate(lang: string): Observable<Phrases> {
+    return this.http.get<Phrases>(`assets/langs/${lang}.json`).pipe(
+      map(data => {
+        const ph = new Phrases();
+        const keys = Object.keys(ph);
+
+        keys.forEach((key: string) => {
+          const translatedValue: string = data[key as keyof Phrases] as string
+
+          if (translatedValue) {
+            (ph[key as keyof Phrases] as any) = data[key as keyof Phrases]
+          }
+        })
+
+        return ph;
+      })
+    )
+  }
+}

src/app/shared/data-access/locale.provider.ts

@@ -0,0 +1,8 @@
+import { LOCALE_ID, Provider } from '@angular/core';
+import { LangService } from './lang.service';
+
+export let LocaleProvider: Provider = {
+    provide: LOCALE_ID,
+    deps: [LangService],
+    useFactory: (ls: LangService) => ls.lang(),
+};

src/app/shared/data-access/viewer.service.ts

@@ -3,15 +3,15 @@ import { Injectable } from '@angular/core';
 export interface ViewModeOption {
   dir: "rtl" | "ltr";
   mode: "pages" | "long"
-  title: string;
   code: string;
   emoji: string;
+  hintPhraceKey: string;
 }
 
 export const VIEV_MODE_OPTIONS: ViewModeOption[] = [
-  { dir: "rtl", mode: "pages", title: "Scroll left", code: "", emoji: "⬅️" },
-  { dir: "ltr", mode: "pages", title: "Scroll right", code: "", emoji: "➡️" },
-  { dir: "ltr", mode: "long", title: "Scroll down", code: "", emoji: "⬇️" },
+  { dir: "rtl", mode: "pages", hintPhraceKey: "scrollLeft", code: "", emoji: "⬅️" },
+  { dir: "ltr", mode: "pages", hintPhraceKey: "scrollRight", code: "", emoji: "➡️" },
+  { dir: "ltr", mode: "long", hintPhraceKey: "scrollDown", code: "", emoji: "⬇️" },
 ]
 
 @Injectable({

src/app/shared/shared.module.ts

@@ -31,6 +31,6 @@ import { NsfwWarningComponent } from './ui/nsfw-warning/nsfw-warning.component';
     FormsModule,
     RouterModule
   ],
-  exports: [TruncatePipe, TextEmbracerComponent, ViewerComponent]
+  exports: [TruncatePipe, TextEmbracerComponent, ViewerComponent, OverlayComponent, ViewModeBarComponent]
 })
 export class SharedModule { }

src/app/shared/ui/nsfw-warning/nsfw-warning.component.html

@@ -2,6 +2,6 @@
 <header>{{title}}</header>
 <div [innerHTML]="text"></div>
 <footer>
-    <input class="agree" type="button" (click)="onAgree()" value="Ready for the wild side!" />
-    <input type="button" (click)="onDisagree()" value="I'll pass, let's keep it safe." />
+    <input class="agree" type="button" (click)="onAgree()" [value]="labelAgree" />
+    <input type="button" (click)="onDisagree()" [value]="labelDisagree" />
 </footer>

src/app/shared/ui/nsfw-warning/nsfw-warning.component.ts

@@ -6,8 +6,12 @@ import { Component, EventEmitter, Output, Input } from '@angular/core';
   styleUrl: './nsfw-warning.component.scss'
 })
 export class NsfwWarningComponent {
-  title: string = `⚠️🔞 NSFW Content`;
+  @Input() title: string = `⚠️🔞 NSFW Content`;
   @Input() text = "The following content may be <b>Not Safe For Work</b>. Viewer discretion is advised.";
+
+  @Input() labelAgree: string = "Ready for the wild side!"
+  @Input() labelDisagree: string = "I'll pass, let's keep it safe."
+
   @Output() agree: EventEmitter<void> = new EventEmitter();
   @Output() disagree: EventEmitter<void> = new EventEmitter();
 

src/app/shared/ui/view-mode-bar/view-mode-bar.component.html

@@ -2,7 +2,7 @@
     <input type="radio" name="radio" id="mode-{{option.mode}}-{{option.dir}}" [checked]="value == option"
         [value]="option" (input)="onChange(option)" />
 
-    <label for="mode-{{option.mode}}-{{option.dir}}">
+    <label for="mode-{{option.mode}}-{{option.dir}}" [title]="lang.phrases.getByKey(option.hintPhraceKey)">
         {{option.emoji}}
     </label>
 

src/app/shared/ui/view-mode-bar/view-mode-bar.component.ts

@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { LangService } from '../../data-access/lang.service';
 
 @Component({
   selector: 'app-view-mode-bar',
@@ -14,4 +15,7 @@ export class ViewModeBarComponent {
   onChange(value: any) {
     this.valueChange.emit(value)
   }
+
+  constructor(public lang: LangService) {
+  }
 }

src/app/shared/ui/viewer/viewer.component.html

@@ -4,14 +4,15 @@
     <div>
         <div class="page">
             <app-nsfw-warning style="position: unset;" (agree)="onAgree()" (disagree)="onDisagree()"
-                *ngIf="episode?.nsfw && !showNsfw()" />
-            <h1 style="text-align: center;">{{viewer.viewModeOption.title}}<br />{{viewer.viewModeOption.emoji}}</h1>
+                *ngIf="episode?.nsfw && !showNsfw()" [title]="lang.phrases.nsfwWarnTitle" [text]="lang.phrases.nsfwWarnText" [labelAgree]="lang.phrases.nsfwLabelAgree" [labelDisagree]="lang.phrases.nsfwLabelDisagree" />
+            <h1 style="text-align: center;">
+                {{lang.phrases.getByKey(viewer.viewModeOption.hintPhraceKey)}}<br />{{viewer.viewModeOption.emoji}}</h1>
         </div>
     </div>
 
     <div class="images" *ngFor="let img of episode?.images, let i = index">
         <div class="page">
-            <app-nsfw-warning (agree)="onAgree()" (disagree)="onDisagree()" *ngIf="episode?.nsfw && !showNsfw()" />
+            <app-nsfw-warning (agree)="onAgree()" (disagree)="onDisagree()" *ngIf="episode?.nsfw && !showNsfw()" [title]="lang.phrases.nsfwWarnTitle" [text]="lang.phrases.nsfwWarnText" [labelAgree]="lang.phrases.nsfwLabelAgree" [labelDisagree]="lang.phrases.nsfwLabelDisagree"/>
             <figure [class]="{nsfw:episode?.nsfw, show: episode?.nsfw && showNsfw()}">
 
                 <img [id]="'page_'+(i+1)" [src]="img.src" [alt]="img.alt" [width]="img.width" [height]="img.height"
@@ -28,9 +29,9 @@ <h1 style="text-align: center;">{{viewer.viewModeOption.title}}<br />{{viewer.vi
 
 <app-overlay [ngClass]="{'show': showOverlay}">
     <app-warm-control (valueChange)="viewer.warm=$event" [value]="viewer.warm" />
-    <app-pages-indicator style="margin: auto;" [activeIndexs]="activeIndexs()" [images]="episode?.images"
+    <app-pages-indicator style="margin: auto; overflow-x: auto;" [activeIndexs]="activeIndexs()" [images]="episode?.images"
         [class]="viewer.viewModeOption.mode" [dir]="viewer.viewModeOption.dir" (active)="onActive($event)" />
-    <button (click)="toggleFullScreen()">
+    <button (click)="toggleFullScreen()" [title]="lang.phrases.fullscreen">
         🖥️
     </button>
 </app-overlay>

src/app/shared/ui/viewer/viewer.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, HostListener, Input, Si
 import { CompositionEpisode } from '../../utils';
 import { ViewerService, DomManipulationService } from '../../data-access';
 import { Router } from '@angular/router';
+import { LangService } from '../../data-access/lang.service';
 
 @Component({
   selector: 'app-viewer',
@@ -20,7 +21,7 @@ export class ViewerComponent {
 
   @ViewChild('viewRef', { static: true }) viewRef!: ElementRef;
 
-  constructor(private el: ElementRef, public viewer: ViewerService, private dm: DomManipulationService, private router: Router) { }
+  constructor(private el: ElementRef, public viewer: ViewerService, private dm: DomManipulationService, private router: Router, public lang: LangService) { }
 
   toggleFullScreen = () => this.dm.toggleFullScreen(this.el.nativeElement)
 

src/app/shared/ui/warm-control/warm-control.component.html

@@ -1,4 +1,4 @@
 <input id="warm-range" type="range" orient="vertical" min="0" max="1" step="0.01" [value]="value"
     (input)="onChange($event)">
 
-<label for="warm-range">☀️</label>
+<label for="warm-range" [title]="lang.phrases.nightlight">☀️</label>

src/app/shared/ui/warm-control/warm-control.component.ts

@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { LangService } from '../../data-access/lang.service';
 
 @Component({
   selector: 'app-warm-control',
@@ -15,4 +16,6 @@ export class WarmControlComponent {
     const v = parseFloat((event.target as HTMLInputElement).value)
     this.valueChange.emit(v)
   }
+
+  constructor(public lang: LangService){}
 }