Merge pull request #12 from chytanka/develop

feat: Embed - post message when page changed
chytanka · Jul 2, 2024 · 96b6a51 · 96b6a51
2 parents 53dc932 + 938646d
commit 96b6a51
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 8 deletions.
diff --git a/src/app/shared/data-access/embed-halper.service.ts b/src/app/shared/data-access/embed-halper.service.ts
@@ -0,0 +1,21 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EmbedHalperService {
+
+  isEmbedded = signal(window.top !== window)
+
+  constructor() { }
+
+  postMessage(message: any, type: string, targetOrigin: string = "*") {
+    if (!window.top) return
+
+    const msg = { type, message }
+
+    window.top.postMessage(msg, targetOrigin);
+
+    return msg;
+  }
+}
diff --git a/src/app/shared/ui/viewer/viewer.component.html b/src/app/shared/ui/viewer/viewer.component.html
@@ -96,8 +96,10 @@ <h1 style="text-align: center;">
 </app-overlay>
 
 <app-overlay class="top" [ngClass]="{'show': showOverlay}">
+    @if(!embedHelper.isEmbedded()){
     <a class="button empty" [routerLink]="['/']">🏠</a>
     <span class="separator">{{separator}}</span>
+    }
     <button class="button small empty" [title]="lang.ph().share" (click)="showShare()">📢</button>
     <span class="title">{{episode?.title}}</span>
     <app-view-mode-bar (valueChange)="setViewModeOption($event)" [options]="viewer.viewModeOptions"

diff --git a/src/app/shared/ui/viewer/viewer.component.ts b/src/app/shared/ui/viewer/viewer.component.ts
@@ -6,6 +6,7 @@ import { LangService } from '../../data-access/lang.service';
 import { DialogComponent } from '../dialog/dialog.component';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Playlist, PlaylistItem } from '../../../playlist/data-access/playlist.service';
+import { EmbedHalperService } from '../../data-access/embed-halper.service';
 
 const L = window.location;
 
@@ -102,8 +103,16 @@ export class ViewerComponent {
 
     this.showOverlay = false;
     this.activeIndexs.set(activeIndxs);
+
+    this.embedHelper.postMessage({
+      total: this.episode?.images.length,
+      current: activeIndxs.map(i => i + 1)
+    }, 'changepage');
+
   }
 
+  embedHelper = inject(EmbedHalperService)
+
   @HostListener('scroll', ['$event'])
   onScroll(event: Event) {
     this.initActiveIndexes()
@@ -229,10 +238,11 @@ export class ViewerComponent {
   route = inject(ActivatedRoute)
   domMan = inject(DomManipulationService)
   link: Signal<string> =
-    computed(() => decodeURIComponent(`${L.origin + L.pathname}?vm=${this.viewer.viewModeOption().code}&lang=${this.lang.lang()}&list=${this.playlistLink}`));
+    //decodeURIComponent
+    computed(() => (`${L.origin + L.pathname}?vm=${this.viewer.viewModeOption().code}&lang=${this.lang.lang()}&list=${this.playlistLink}`));
 
   iframe = computed(() =>
-    `<iframe src="${this.link()}" frameborder="0" allowfullscreen>\</iframe>`
+    `<iframe style="width: 100%; aspect-ratio: 3/2; overflow: auto; resize: vertical; max-height: 90dvh; padding-bottom: 1ch;" src="${this.link()}" frameborder="0" allowfullscreen title="Chytanka">\</iframe>`
   )
   sanitizer: DomSanitizer = inject(DomSanitizer)
   embed = computed(() => this.sanitizer.bypassSecurityTrustUrl(this.link()));

diff --git a/src/index.html b/src/index.html
@@ -1,9 +1,11 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>Chytanka — read it easily and comfortably!</title>
-  <meta name="description" content="Chytanka is a PWA designed for comfortable manga and comic reading. The minimalist design and the night mode feature make reading easy and comfortable.">
+  <meta name="description"
+    content="Chytanka is a PWA designed for comfortable manga and comic reading. The minimalist design and the night mode feature make reading easy and comfortable.">
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
@@ -12,7 +14,8 @@
 
   <meta property="og:type" content="website">
   <meta property="og:title" content="Chytanka — read it easily and comfortably!">
-  <meta property="og:description" content="Chytanka is a PWA designed for comfortable manga and comic reading. The minimalist design and the night mode feature make reading easy and comfortable.">
+  <meta property="og:description"
+    content="Chytanka is a PWA designed for comfortable manga and comic reading. The minimalist design and the night mode feature make reading easy and comfortable.">
   <meta property="og:image" content="assets/og_image.png">
 
   <link rel="apple-touch-icon" href="assets/icons/icon-192x192.png">
@@ -37,11 +40,17 @@
       }
     }
     </script>
-    <meta name="google-site-verification" content="qezVCOaci5qsNJ2OPgMpxnjNfai8LVt4bPJXqQPmijM" />
-    <meta name="interactive-widget" content="resizes-visual">
+  <meta name="google-site-verification" content="qezVCOaci5qsNJ2OPgMpxnjNfai8LVt4bPJXqQPmijM" />
+  <meta name="interactive-widget" content="resizes-visual">
 </head>
+
 <body>
-  <app-root><div style="display: grid; place-items: center; width: min(50vw, 50vh); margin: auto; aspect-ratio: 1;">⏳ loading...</div></app-root>
+  <app-root>
+    <div
+      style="position: fixed; inset:0; display: grid; place-items: center; width: min(50vw, 50vh); margin: auto; aspect-ratio: 1;">
+      ⏳ loading...</div>
+  </app-root>
   <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
-</html>
+
+</html>