@netless/app-presentation 0.1.2 → 0.1.3

package/dist/index.d.ts

@@ -195,17 +195,32 @@ interface ILazyLoadInstance {
   toLoadCount: number;
 }
 
+declare enum ELoadState {
+    unloaded = 0,
+    loading = 1,
+    loaded = 2,
+    error = 3
+}
+interface IPreloadMapValue {
+    src: string;
+    state: ELoadState;
+}
 declare class Preload implements IDisposable {
     readonly pages: PresentationPage[];
-    readonly links: HTMLLinkElement[];
-    head: number;
-    tail: number;
-    timer: number;
-    count: number;
-    get done(): boolean;
+    static maxLinks: number;
+    readonly loadingLinks: Map<number, HTMLLinkElement>;
+    readonly preloadMap: Map<number, IPreloadMapValue>;
+    readonly waitingLoadSet: Set<number>;
+    readonly waitinglinks: number[];
+    touchIndex: number;
+    preloadSize: number;
     constructor(pages: PresentationPage[]);
-    touch(index: number): void;
-    handler(): void;
+    touch(index: number): Promise<ELoadState>;
+    private autoTouch;
+    private createLink;
+    private handler;
+    private requestAsyncCallBack;
+    private destroyLink;
     dispose(): void;
 }
 
@@ -272,6 +287,7 @@ declare class Presentation implements IDisposable<void> {
     showPreview: boolean;
     pageIndex: number;
     previewLazyload: ILazyLoadInstance | null;
+    timer: number | null;
     constructor(config: PresentationConfig);
     initialize(): void;
     setDOM(dom: Element | DocumentFragment): void;

package/dist/index.global.js

@@ -790,66 +790,161 @@ var NetlessAppPresentation = (function (exports) {
   }
 
   // src/preload.ts
-  var Preload = class {
+  var _Preload = class _Preload {
     constructor(pages) {
       this.pages = pages;
-      this.head = 0;
-      this.tail = 0;
-      this.timer = 0;
-      this.count = 0;
-      this.links = new Array(pages.length);
+      this.loadingLinks = /* @__PURE__ */ new Map();
+      this.preloadMap = /* @__PURE__ */ new Map();
+      this.waitingLoadSet = /* @__PURE__ */ new Set();
+      this.waitinglinks = [];
+      this.touchIndex = 0;
+      this.preloadSize = 0;
+      this.preloadMap = new Map(pages.map((e, index) => [index, {
+        src: e.src,
+        state: 0 /* unloaded */
+      }]));
+      this.waitingLoadSet = new Set(pages.map((e, index) => index));
+      this.preloadSize = this.preloadMap.size;
       this.touch(0);
     }
-    get done() {
-      return this.head == 0 && this.tail == this.pages.length;
+    async touch(index) {
+      this.touchIndex = index;
+      const value = this.preloadMap.get(index);
+      let state = 0 /* unloaded */;
+      if (value) {
+        state = value.state;
+        if (value.state === 0 /* 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 = 0 /* 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((resolve) => {
+            this.waitingLoadSet.delete(index);
+            this.createLink(index, resolve);
+          });
+        }
+      }
+      if (this.waitingLoadSet.size) {
+        this.requestAsyncCallBack(() => {
+          this.autoTouch();
+        }, 1e3);
+      }
+      return state;
     }
-    touch(index) {
-      if (this.done)
+    autoTouch() {
+      this.handler();
+      if (this.waitingLoadSet.size === 0) {
         return;
-      this.head = this.tail = index;
-      this.timer || (this.timer = setTimeout(this.handler.bind(this)));
+      }
+      let nextTouchDelay = 1e3;
+      this.touchIndex = (this.touchIndex + 1) % this.preloadSize;
+      const value = this.preloadMap.get(this.touchIndex);
+      if (value) {
+        switch (value.state) {
+          case 0 /* unloaded */:
+          case 3 /* error */:
+            if (!this.waitinglinks.includes(this.touchIndex)) {
+              this.waitinglinks.push(this.touchIndex);
+              this.waitingLoadSet.delete(this.touchIndex);
+            }
+            nextTouchDelay = 0;
+            break;
+        }
+      }
+      this.requestAsyncCallBack(() => {
+        this.autoTouch();
+      }, nextTouchDelay);
     }
-    handler() {
-      const { links } = this;
-      while (this.head > 0 && links[this.head])
-        this.head--;
-      if (!links[this.head]) {
+    createLink(index, resolve) {
+      const value = this.preloadMap.get(index);
+      if (value) {
         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 + "";
+        link.href = value.src;
+        link.dataset.order = index + "";
         document.head.appendChild(link);
-        this.count++;
+        link.onload = () => {
+          value.state = 2 /* loaded */;
+          this.preloadMap.set(index, value);
+          document.head.contains(link) && document.head.removeChild(link);
+          this.loadingLinks.delete(index);
+          resolve && resolve(2 /* loaded */);
+          this.autoTouch();
+        };
+        link.onerror = () => {
+          value.state = 3 /* 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(3 /* error */);
+          this.autoTouch();
+        };
+        this.loadingLinks.set(index, link);
+        value.state = 1 /* loading */;
+        this.preloadMap.set(index, value);
       }
-      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++;
+    }
+    handler() {
+      if (!this.waitinglinks.length) {
+        return;
       }
-      this.timer = setTimeout(this.handler.bind(this), 2e3);
-      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);
+      let i = this.loadingLinks.size;
+      while (i < _Preload.maxLinks) {
+        const index = this.waitinglinks.shift();
+        if (index !== void 0) {
+          this.createLink(index);
+        }
+        i++;
       }
     }
+    async requestAsyncCallBack(callBack, timeout) {
+      await new Promise(function(resolve) {
+        if (window.requestIdleCallback) {
+          requestIdleCallback(() => {
+            resolve(1);
+          }, { timeout });
+        } else {
+          setTimeout(() => {
+            resolve(2);
+          }, timeout);
+        }
+      });
+      callBack();
+    }
+    destroyLink(index, link) {
+      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;
     }
   };
+  _Preload.maxLinks = 5;
+  var Preload = _Preload;
 
   // src/presentation.ts
   var Presentation = class {
@@ -860,6 +955,7 @@ var NetlessAppPresentation = (function (exports) {
       this.showPreview = false;
       this.pageIndex = 0;
       this.previewLazyload = null;
+      this.timer = null;
       var _a;
       this.pages = config.pages;
       this.preload = new Preload(this.pages);
@@ -1062,15 +1158,22 @@ var NetlessAppPresentation = (function (exports) {
       return this.pages[this.pageIndex];
     }
     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. */
     thumbnail(src) {

package/dist/index.js

@@ -791,66 +791,161 @@ function arrowRightSVG(namespace) {
 }
 
 // src/preload.ts
-var Preload = class {
+var _Preload = class _Preload {
   constructor(pages) {
     this.pages = pages;
-    this.head = 0;
-    this.tail = 0;
-    this.timer = 0;
-    this.count = 0;
-    this.links = new Array(pages.length);
+    this.loadingLinks = /* @__PURE__ */ new Map();
+    this.preloadMap = /* @__PURE__ */ new Map();
+    this.waitingLoadSet = /* @__PURE__ */ new Set();
+    this.waitinglinks = [];
+    this.touchIndex = 0;
+    this.preloadSize = 0;
+    this.preloadMap = new Map(pages.map((e, index) => [index, {
+      src: e.src,
+      state: 0 /* unloaded */
+    }]));
+    this.waitingLoadSet = new Set(pages.map((e, index) => index));
+    this.preloadSize = this.preloadMap.size;
     this.touch(0);
   }
-  get done() {
-    return this.head == 0 && this.tail == this.pages.length;
+  async touch(index) {
+    this.touchIndex = index;
+    const value = this.preloadMap.get(index);
+    let state = 0 /* unloaded */;
+    if (value) {
+      state = value.state;
+      if (value.state === 0 /* 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 = 0 /* 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((resolve) => {
+          this.waitingLoadSet.delete(index);
+          this.createLink(index, resolve);
+        });
+      }
+    }
+    if (this.waitingLoadSet.size) {
+      this.requestAsyncCallBack(() => {
+        this.autoTouch();
+      }, 1e3);
+    }
+    return state;
   }
-  touch(index) {
-    if (this.done)
+  autoTouch() {
+    this.handler();
+    if (this.waitingLoadSet.size === 0) {
       return;
-    this.head = this.tail = index;
-    this.timer || (this.timer = setTimeout(this.handler.bind(this)));
+    }
+    let nextTouchDelay = 1e3;
+    this.touchIndex = (this.touchIndex + 1) % this.preloadSize;
+    const value = this.preloadMap.get(this.touchIndex);
+    if (value) {
+      switch (value.state) {
+        case 0 /* unloaded */:
+        case 3 /* error */:
+          if (!this.waitinglinks.includes(this.touchIndex)) {
+            this.waitinglinks.push(this.touchIndex);
+            this.waitingLoadSet.delete(this.touchIndex);
+          }
+          nextTouchDelay = 0;
+          break;
+      }
+    }
+    this.requestAsyncCallBack(() => {
+      this.autoTouch();
+    }, nextTouchDelay);
   }
-  handler() {
-    const { links } = this;
-    while (this.head > 0 && links[this.head])
-      this.head--;
-    if (!links[this.head]) {
+  createLink(index, resolve) {
+    const value = this.preloadMap.get(index);
+    if (value) {
       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 + "";
+      link.href = value.src;
+      link.dataset.order = index + "";
       document.head.appendChild(link);
-      this.count++;
+      link.onload = () => {
+        value.state = 2 /* loaded */;
+        this.preloadMap.set(index, value);
+        document.head.contains(link) && document.head.removeChild(link);
+        this.loadingLinks.delete(index);
+        resolve && resolve(2 /* loaded */);
+        this.autoTouch();
+      };
+      link.onerror = () => {
+        value.state = 3 /* 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(3 /* error */);
+        this.autoTouch();
+      };
+      this.loadingLinks.set(index, link);
+      value.state = 1 /* loading */;
+      this.preloadMap.set(index, value);
     }
-    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++;
+  }
+  handler() {
+    if (!this.waitinglinks.length) {
+      return;
     }
-    this.timer = setTimeout(this.handler.bind(this), 2e3);
-    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);
+    let i = this.loadingLinks.size;
+    while (i < _Preload.maxLinks) {
+      const index = this.waitinglinks.shift();
+      if (index !== void 0) {
+        this.createLink(index);
+      }
+      i++;
     }
   }
+  async requestAsyncCallBack(callBack, timeout) {
+    await new Promise(function(resolve) {
+      if (window.requestIdleCallback) {
+        requestIdleCallback(() => {
+          resolve(1);
+        }, { timeout });
+      } else {
+        setTimeout(() => {
+          resolve(2);
+        }, timeout);
+      }
+    });
+    callBack();
+  }
+  destroyLink(index, link) {
+    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;
   }
 };
+_Preload.maxLinks = 5;
+var Preload = _Preload;
 
 // src/presentation.ts
 var Presentation = class {
@@ -861,6 +956,7 @@ var Presentation = class {
     this.showPreview = false;
     this.pageIndex = 0;
     this.previewLazyload = null;
+    this.timer = null;
     var _a;
     this.pages = config.pages;
     this.preload = new Preload(this.pages);
@@ -1063,15 +1159,22 @@ var Presentation = class {
     return this.pages[this.pageIndex];
   }
   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. */
   thumbnail(src) {