fix: detect file ext

fix: add proxy to reddit img

Author: rodzyk

src/app/app-routing.module.ts

@@ -41,6 +41,8 @@ const yandereMod = () => import('./yandere/yandere.module').then(m => m.YandereM
 const pixivMod = () => import('./pixiv/pixiv.module').then(m => m.PixivModule)
 const fileMod = () => import('./file/file.module').then(m => m.FileModule)
 
+const COMPARE_OUTLET_NAME = 'right'
+
 const moduleMap = new Map<string, LoadChildrenCallback>()
   .set(IMGUR_PATH, imgurMod)
   .set(MANGADEX_PATH, mangadexMod)
@@ -50,17 +52,29 @@ const routes: Routes = [
   { path: '', loadChildren: linkParserMod },
   { path: LIST_PATH, loadChildren: () => import('./list/list.module').then(m => m.ListModule) },
   { path: IMGUR_PATH, loadChildren: imgurMod },
+  { outlet: COMPARE_OUTLET_NAME, path: IMGUR_PATH, loadChildren: imgurMod },
   { path: MANGADEX_PATH, loadChildren: mangadexMod },
+  { outlet: COMPARE_OUTLET_NAME, path: MANGADEX_PATH, loadChildren: mangadexMod },
   { path: READ_PATH, loadChildren: readMod },
+  { outlet: COMPARE_OUTLET_NAME, path: READ_PATH, loadChildren: readMod },
   { path: TELEGRAPH_PATH, loadChildren: telegraphMod },
+  { outlet: COMPARE_OUTLET_NAME, path: TELEGRAPH_PATH, loadChildren: telegraphMod },
   { path: REDDIT_PATH, loadChildren: redditMod },
+  { outlet: COMPARE_OUTLET_NAME, path: REDDIT_PATH, loadChildren: redditMod },
   { path: ZENKO_PATH, loadChildren: zenkoMod },
+  { outlet: COMPARE_OUTLET_NAME, path: ZENKO_PATH, loadChildren: zenkoMod },
   { path: NHENTAI_PATH, loadChildren: nhentaiMod },
+  { outlet: COMPARE_OUTLET_NAME, path: NHENTAI_PATH, loadChildren: nhentaiMod },
   { path: COMICK_PATH, loadChildren: comickMod },
+  { outlet: COMPARE_OUTLET_NAME, path: COMICK_PATH, loadChildren: comickMod },
   { path: YANDERE_PATH, loadChildren: yandereMod },
+  { outlet: COMPARE_OUTLET_NAME, path: YANDERE_PATH, loadChildren: yandereMod },
   { path: PIXIV_PATH, loadChildren: pixivMod },
+  { outlet: COMPARE_OUTLET_NAME, path: PIXIV_PATH, loadChildren: pixivMod },
   { path: FILE_PATH, loadChildren: fileMod },
+  { outlet: COMPARE_OUTLET_NAME, path: FILE_PATH, loadChildren: fileMod },
   { matcher: urlMatcher, loadChildren: linkParserMod },
+  { outlet: COMPARE_OUTLET_NAME, matcher: urlMatcher, loadChildren: linkParserMod },
   { path: '**', component: PageNotFoundComponent }
 ];
 

src/app/app.component.ts

@@ -7,7 +7,12 @@ const SCALE_GAP = 128;
 
 @Component({
   selector: 'app-root',
-  template: `<router-outlet></router-outlet>`
+  template: `<div><router-outlet></router-outlet></div><div><router-outlet name="right"></router-outlet></div>`,
+  styles: [`
+    // :host {
+    //   display: flex;
+    // }
+    `]
 })
 export class AppComponent {
   constructor(public lang: LangService, private route: ActivatedRoute) {
@@ -26,7 +31,7 @@ export class AppComponent {
       }
     })
   }
-  
+
   private readonly document = inject(DOCUMENT);
 
   @HostListener('window:resize')

src/app/reddit/data-access/reddit.service.ts

@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { Observable, map } from 'rxjs';
 import { environment } from '../../../environments/environment';
 import { CompositionEpisode } from '../../common/common-read';
+import { Base64 } from '../../shared/utils';
 
 @Injectable({
   providedIn: 'root'
@@ -29,8 +30,9 @@ export class RedditService {
       nsfw: post.thumbnail == "nsfw" || post.over_18,
       images: imgs.map((i: any): any => {
         const ext = (media_metadata[i.media_id]?.m).replace('image/', '');
+        const imgSrc = `https://i.redd.it/${i.media_id}.${ext ?? 'jpg'}`
         return {
-          src: `https://i.redd.it/${i.media_id}.${ext ?? 'jpg'}`,
+          src: environment.proxy + Base64.toBase64(imgSrc),
           height: (media_metadata[i.media_id]?.s).y,
           width: (media_metadata[i.media_id]?.s).x,
         }

src/app/shared/ui/file-change/file-change.component.ts

@@ -3,7 +3,6 @@ import { FileService } from '../../../file/data-access/file.service';
 import { Router } from '@angular/router';
 import { FILE_PATH } from '../../../app-routing.module';
 import { LangService } from '../../data-access/lang.service';
-import { DomManipulationService } from '../../data-access';
 
 @Component({
   selector: 'app-file-change',
@@ -13,8 +12,10 @@ import { DomManipulationService } from '../../data-access';
 export class FileChangeComponent implements OnInit {
   ngOnInit(): void {
     this.initFileInput();
-    
+
     if ("launchQueue" in window) {
+      console.log(`"launchQueue" in window`);
+      
       (window as any).launchQueue.setConsumer(async (launchParams: any) => {
         const file: File = launchParams.files[0];
         this.fileHandler(file)
@@ -41,17 +42,26 @@ export class FileChangeComponent implements OnInit {
     this.fs.file = file;
 
     // should be output
-    const t = this.getRouteType(file.type)
+    const t = this.getRouteType(file)
 
     if (t) {
       const url = `/${FILE_PATH}/${t}`;
       this.router.navigateByUrl(url)
     }
   }
 
-  getRouteType(fileType: string): string | undefined {
-    if (fileType.search(/zip|cbz/) >= 0) return "zip"
-    else if (fileType.includes('pdf')) return "pdf"
+  getRouteType(file: File): string | undefined {
+    const fileType = file.type
+
+    if (fileType) {
+      if (fileType.search(/zip|cbz/) >= 0) return "zip"
+      else if (fileType.includes('pdf')) return "pdf"
+    } else {
+      const fileName = file.name
+      const extension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
+
+      return ['cbz', 'zip', 'pdf'].includes(extension) ? extension : undefined
+    }
 
     return;
   }
@@ -70,18 +80,18 @@ export class FileChangeComponent implements OnInit {
   }
 
   openFileDialog() {
-    
+
     this.input.click();
   }
-  
+
   @HostListener('window:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
 
     const code = event.ctrlKey ? `Ctrl+${event.code}` : event.code
 
-    if(code == "Ctrl+KeyO") {
+    if (code == "Ctrl+KeyO") {
       event.preventDefault();
-      
+
       this.openFileDialog()
     }
   }

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

@@ -1,10 +1,10 @@
 :host {
-	--W: 100vw;
+	// --W: 100vw;
 	--H: 100dvh;
 	display: block;
 	container-type: size;
 	container-name: view;
-	width: var(--W);
+	// width: var(--W);
 	height: var(--H);
 	transition: all var(--t) ease-in-out;
 

src/environments/environment.development.ts

@@ -1,4 +1,4 @@
-const PROXY = `http://localhost:3000/api/?url=`
+const PROXY = `https://proxy-seven-xi.vercel.app/api?url=`
 
 export const environment = {
     proxy: PROXY,