@netless/app-presentation 0.1.1 → 0.1.3

package/src/preload.ts

@@ -1,68 +1,169 @@
 import type { IDisposable } from "@wopjs/disposable";
 import type { PresentationPage } from "./presentation";
 
-export class Preload implements IDisposable {
-  readonly links: HTMLLinkElement[]
-
-  head = 0
-  tail = 0
-  timer = 0
-  count = 0
+export enum ELoadState {
+  unloaded,
+  loading,
+  loaded,
+  error
+}
 
-  get done(): boolean {
-    return this.head == 0 && this.tail == this.pages.length
-  }
+export interface IPreloadMapValue {
+  src: string
+  state: ELoadState
+}
 
+export class Preload implements IDisposable {
+  static maxLinks: number = 5;
+  readonly loadingLinks: Map<number, HTMLLinkElement> = new Map();
+  readonly preloadMap = new Map<number, IPreloadMapValue>();
+  readonly waitingLoadSet: Set<number> = new Set();
+  readonly waitinglinks: number[] = [];
+  touchIndex: number = 0;
+  preloadSize: number = 0;
   constructor(readonly pages: PresentationPage[]) {
-    this.links = new Array(pages.length)
-    this.touch(0)
+    this.preloadMap = new Map(pages.map((e,index) => [index, {
+      src: e.src,
+      state: ELoadState.unloaded
+    }]));
+    this.waitingLoadSet = new Set(pages.map((e,index) => index));
+    this.preloadSize = this.preloadMap.size;
+    this.touch(0);
   }
-
-  touch(index: number) {
-    if (this.done) return
-    this.head = this.tail = index
-    this.timer ||= setTimeout(this.handler.bind(this))
+  async touch(index: number): Promise<ELoadState> {
+    this.touchIndex = index;
+    const value = this.preloadMap.get(index);
+    let state = ELoadState.unloaded;
+    if (value) {
+      state = value.state;
+      if (value.state === ELoadState.unloaded) {
+        if (this.loadingLinks.size) {
+          for (const [i,link] of this.loadingLinks) {
+            this.destroyLink(i, link);
+            this.waitingLoadSet.add(i);
+            const v = this.preloadMap.get(i);
+            if (v) {
+              v.state = ELoadState.unloaded;
+              this.preloadMap.set(i, v);
+            }
+          }
+          for (const i of this.waitinglinks) {
+            this.waitingLoadSet.add(i);
+          }
+          this.waitinglinks.length = 0;
+        }
+        if (this.waitinglinks.includes(index)) {
+          this.waitinglinks.splice(this.waitinglinks.indexOf(index), 1);
+        }
+        state = await new Promise<ELoadState>(resolve => {
+          this.waitingLoadSet.delete(index);
+          this.createLink(index, resolve);
+        })
+      }
+    }
+    if (this.waitingLoadSet.size) {
+      this.requestAsyncCallBack(()=>{
+        this.autoTouch();
+      }, 1000)
+    }
+    return state;
   }
-
-  handler() {
-    const { links } = this
-
-    while (this.head > 0 && links[this.head]) this.head--
-    if (!links[this.head]) {
-      const link = document.createElement('link')
-      links[this.head] = link
-      link.rel = 'preload'
-      link.as = 'image'
-      link.href = this.pages[this.head].src
-      link.dataset.order = this.count + ''
-      document.head.appendChild(link)
-      this.count++
+  private autoTouch(){
+    this.handler();
+    if (this.waitingLoadSet.size === 0) {
+      return;
     }
-
-    while (links[this.tail]) this.tail++
-    if (this.tail < this.pages.length && !links[this.tail]) {
-      const link = document.createElement('link')
-      links[this.tail] = link
-      link.rel = 'preload'
-      link.as = 'image'
-      link.href = this.pages[this.tail].src
-      link.dataset.order = this.count + ''
-      document.head.appendChild(link)
-      this.count++
+    let nextTouchDelay = 1000;
+    this.touchIndex = (this.touchIndex + 1) % this.preloadSize;
+    const value = this.preloadMap.get(this.touchIndex);
+    if (value) {
+      switch (value.state) {
+        case ELoadState.unloaded:
+        case ELoadState.error:
+          if (!this.waitinglinks.includes(this.touchIndex)) {
+            this.waitinglinks.push(this.touchIndex);
+            this.waitingLoadSet.delete(this.touchIndex);
+          }
+          nextTouchDelay = 0;
+          break;
+      }
     }
-
-    this.timer = setTimeout(this.handler.bind(this), 2_000)
-    this.count++
-
-    if (this.count >= 10) for (const link of this.links)
-      if (link && link.dataset.order && +link.dataset.order < this.count - 10)
-        document.head.contains(link) && document.head.removeChild(link)
+    this.requestAsyncCallBack(()=>{
+      this.autoTouch();
+    }, nextTouchDelay)
   }
 
+  private createLink(index: number, resolve?:(state:ELoadState)=>void) {
+    const value = this.preloadMap.get(index);
+    if (value) {
+      const link = document.createElement('link');
+      link.rel = 'preload';
+      link.as = 'image';
+      link.href = value.src;
+      link.dataset.order = index + '';
+      document.head.appendChild(link);
+      link.onload = () => {
+        value.state = ELoadState.loaded;
+        this.preloadMap.set(index, value);
+        document.head.contains(link) && document.head.removeChild(link);
+        this.loadingLinks.delete(index);
+        resolve && resolve(ELoadState.loaded);
+        this.autoTouch();
+      }
+      link.onerror = () => {
+        value.state = ELoadState.error;
+        this.preloadMap.set(index, value);
+        if (!this.waitinglinks.includes(index)) {
+          this.waitinglinks.push(index);
+          this.waitingLoadSet.delete(this.touchIndex);
+        }
+        document.head.contains(link) && document.head.removeChild(link);
+        this.loadingLinks.delete(index);
+        resolve && resolve(ELoadState.error);
+        this.autoTouch();
+      }
+      this.loadingLinks.set(index, link);
+      value.state = ELoadState.loading;
+      this.preloadMap.set(index, value);
+    }
+  }
+  private handler() {
+    if(!this.waitinglinks.length) {
+      return;
+    }
+    let i = this.loadingLinks.size;
+    while (i < Preload.maxLinks) {
+      const index = this.waitinglinks.shift();
+      if (index !== undefined) {
+        this.createLink(index);
+      }
+      i++;
+    }
+  }
+  private async requestAsyncCallBack (callBack:()=>void, timeout:number):Promise<void> {
+      await new Promise(function(resolve) {
+        if ((window as any).requestIdleCallback) {
+          requestIdleCallback(()=>{
+            resolve(1);
+          },{timeout})
+        } else {
+          setTimeout(()=>{
+            resolve(2);
+          }, timeout)
+        }
+      });
+      callBack();
+  }
+  private destroyLink(index: number, link: HTMLLinkElement) {
+    document.head.contains(link) && document.head.removeChild(link)
+    this.loadingLinks.delete(index)
+  }
   dispose() {
-    clearTimeout(this.timer)
-    for (const link of this.links)
-      link && document.head.contains(link) && document.head.removeChild(link)
-    this.links.length = 0
+    for (const [index,link] of this.loadingLinks) {
+      this.destroyLink(index, link);
+    }
+    this.preloadMap.clear();
+    this.waitingLoadSet.clear();
+    this.waitinglinks.length = 0;
   }
 }

package/src/presentation.ts

@@ -73,6 +73,7 @@ export class Presentation implements IDisposable<void> {
   showPreview = false
   pageIndex = 0
   previewLazyload: ILazyLoadInstance | null = null
+  timer: number | null = null
 
   constructor(config: PresentationConfig) {
     this.pages = config.pages
@@ -285,15 +286,22 @@ export class Presentation implements IDisposable<void> {
   }
 
   updateImage() {
-    const page = this.page()
-    if (!page) {
-      this.image.src = ''
-      return
+    if (this.timer) {
+      clearTimeout(this.timer)
     }
-    this.image.width = page.width
-    this.image.height = page.height
-    this.image.src = page.src
-    this.preload.touch(this.pageIndex)
+    this.timer = setTimeout(() => {
+      this.timer = null;
+      this.preload.touch(this.pageIndex).then(() => {
+        const page = this.page()
+        if (!page) {
+          this.image.src = ''
+          return
+        }
+        this.image.width = page.width
+        this.image.height = page.height
+        this.image.src = page.src
+      })
+    }, 200)
   }
 
   /** Returns a modified URL that points to the thumbnail image. */