feat: add support for sankakucomplex

Author: drunkg00se

src/assets/styles/artworkButton.scss

@@ -37,4 +37,8 @@
   &.fluid_video {
     --pdl-sticky-container-safe-area-bottom: 56px;
   }
+
+  &.sankaku_video {
+    --pdl-sticky-container-safe-area-bottom: 80px;
+  }
 }

src/lib/components/Button/artworkButton.ts

@@ -11,7 +11,8 @@ type ArtworkButtonProps = Omit<ThumbnailBtnProp, 'type'> & {
     | 'moebooru_image'
     | 'native_video'
     | 'vjs_video'
-    | 'fluid_video';
+    | 'fluid_video'
+    | 'sankaku_video';
 };
 
 export class ArtworkButton extends HTMLElement {

src/lib/components/Button/thumbnailButton.ts

@@ -46,7 +46,7 @@ export interface ThumbnailBtnProp {
 export class ThumbnailButton extends HTMLElement {
   private btn?: HTMLButtonElement;
   private status: ThumbnailBtnStatus = ThumbnailBtnStatus.Init;
-  private mediaId: number;
+  private mediaId: string;
   private page?: number;
   private type?: ThumbnailBtnType;
   private onClick: ThumbnailBtnProp['onClick'];
@@ -56,7 +56,7 @@ export class ThumbnailButton extends HTMLElement {
   private progress = 0;
   private dirty = false;
 
-  #downloadingId: number | null = null;
+  #downloadingId: string | null = null;
   #downloadingPage: number | undefined | null = null;
 
   constructor(props: ThumbnailBtnProp) {
@@ -65,8 +65,8 @@ export class ThumbnailButton extends HTMLElement {
     this.onClick = props.onClick;
 
     // modifying `dataset` triggers `attributeChangedCallback`, so we should assign private value before dataset.
-    this.mediaId = this.toValidatedNumber(props.id);
-    this.dataset.id = String(this.mediaId);
+    this.mediaId = String(props.id);
+    this.dataset.id = this.mediaId;
 
     if (props.type) {
       this.dataset.type = this.type = props.type;
@@ -158,15 +158,15 @@ export class ThumbnailButton extends HTMLElement {
     try {
       if (id === null) throw new Error('Attribute "data-id" is required.');
 
-      this.mediaId = this.toValidatedNumber(id);
+      this.mediaId = id;
 
       this.#resetStatus();
       this.#downloadingId && (this.#downloadingId = null);
 
       this.connectedFlag && this.shouldObserveDb && this.observeDb()();
     } catch (error) {
       logger.error(error);
-      this.dataset.id = String(this.mediaId);
+      this.dataset.id = this.mediaId;
     }
   }
 

src/lib/db.ts

@@ -5,7 +5,7 @@ import type { Readable, Unsubscriber } from 'svelte/store';
 import { channelEvent } from './channelEvent';
 
 interface HistoryItemBase {
-  pid: number;
+  pid: number | string;
   userId?: number;
   user?: string;
   title?: string;
@@ -30,7 +30,7 @@ interface pixivSeasonalEffectItem {
 }
 
 interface CacheItem {
-  pid: number;
+  pid: number | string;
   page: Uint8Array | null;
 }
 
@@ -49,7 +49,7 @@ type DBEventArgsMap = {
 };
 
 class HistoryDb extends Dexie {
-  private history!: Table<HistoryItem, number>;
+  private history!: Table<HistoryItem, number | string>;
   private imageEffect!: Table<pixivSeasonalEffectItem, string>;
   private filehandle!: Table<FileSystemDirectoryHandle, string>;
   #DIRECTORY_HANDLE_NAME = 'directory-handle';
@@ -63,20 +63,19 @@ class HistoryDb extends Dexie {
     });
   }
 
-  protected throwIfInvalidNumber(num: number | string): number {
-    if (typeof num === 'string') {
-      if (num !== '') {
-        num = +num;
-      } else {
+  protected throwIfInvalidNumber(numOrString: number | string): number | string {
+    if (typeof numOrString === 'string') {
+      if (numOrString === '') {
         return logger.throw('Invalid argument: can not be "".', RangeError);
       }
+      return numOrString;
     }
 
-    if (num < 0 || !Number.isSafeInteger(num)) {
-      logger.throw(`Invalid number: ${num}, must be a non-negative integer.`, RangeError);
+    if (numOrString < 0 || !Number.isSafeInteger(numOrString)) {
+      logger.throw(`Invalid number: ${numOrString}, must be a non-negative integer.`, RangeError);
     }
 
-    return num;
+    return numOrString;
   }
 
   public async add(historyData: HistoryData) {

src/main.ts

@@ -15,6 +15,7 @@ import { Rule34Vault } from './sites/rule34vault';
 import { Rule34Paheal } from './sites/rule34paheal';
 import './lib/components/app.tailwind.css';
 import { Rule34Us } from './sites/rule34us';
+import { SankakuApp } from './sites/sankakuComplex';
 
 // Remove CSS injected into dom in the dev server
 if (import.meta.env.DEV) {
@@ -36,7 +37,8 @@ function getSiteInjector() {
     Nijie,
     Rule34Vault,
     Rule34Paheal,
-    Rule34Us
+    Rule34Us,
+    SankakuApp
   ];
   const hostname = location.hostname;