@netless/forge-slide 0.1.1-alpha.10 → 0.1.1-alpha.11

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,WAAW,GAAE,MAAM,EAAa,WAkDzE;AAWD,wBAAsB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAA8D"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,WAAW,GAAE,MAAM,EAAmB,WAkD/E;AAWD,wBAAsB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAA8D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/forge-slide",
-  "version": "0.1.1-alpha.10",
+  "version": "0.1.1-alpha.11",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -12,8 +12,8 @@
     "eventemitter3": "^5.0.1",
     "yjs": "^13.6.18",
     "uuid": "^11.0.5",
-    "@netless/forge-room": "0.1.12-alpha.0",
-    "@netless/forge-whiteboard": "0.1.15"
+    "@netless/forge-room": "0.1.12-alpha.1",
+    "@netless/forge-whiteboard": "0.1.20-alpha.1"
   },
   "keywords": [],
   "author": "",

package/src/SiderBarView.ts

@@ -1,5 +1,6 @@
 import { SlideApplicationOption } from './SlideApplication';
 import EventEmitter from 'eventemitter3';
+import { kvStore } from '@netless/forge-room';
 
 interface SideBarViewEvents {
     pageChange: (index: number) => void;
@@ -9,6 +10,11 @@ export class SideBarView extends EventEmitter<SideBarViewEvents> {
   public readonly root: HTMLDivElement = document.createElement('div');
   private isShow: boolean = false;
   private eventsMap: Map<HTMLDivElement, (() => void)[]> = new Map();
+  private taskId: string = '';
+  private prefix: string = '';
+  private addImagesPool: number[] = [];
+  private scheduleId: number = 0;
+  private isSchedule = false;
 
   public constructor() {
     super();
@@ -32,56 +38,123 @@ export class SideBarView extends EventEmitter<SideBarViewEvents> {
     return this.isShow;
   }
 
-  public initialize(slideCount: number, option: SlideApplicationOption): void {
-    for (let i = 1; i <= slideCount; i++) {
-      const itemContainer = document.createElement('div');
-      itemContainer.style.width = '60%';
-      itemContainer.style.display = 'flex';
-      itemContainer.style.justifyContent = 'center';
-      itemContainer.style.alignItems = 'flex-start';
-      itemContainer.style.position = 'relative';
-      itemContainer.style.borderRadius = '4px';
-      itemContainer.style.transition = 'border-color .3s';
-      itemContainer.style.marginBottom = '10px';
-      
-      const onMouseOverHandle = () => {
-        itemContainer.style.borderColor = '#ccc';
-      };
-      const onMouseOutHandle = () => {
-        itemContainer.style.borderColor = 'transparent';
-      };
-      const onClickHandle = () => {
-        this.emit('pageChange', i);
+  public async getPreviewImage(imageUrl: string) {
+    const image = await fetch(imageUrl);
+    const blob = await image.blob();
+    return new Promise<PreviewImage>(resolve => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const base64Data = reader.result as string;
+        const img = document.createElement('img');
+        img.src = base64Data;
+        img.onload = () => {
+          resolve({
+            url: imageUrl,
+            src: base64Data,
+            width: img.width,
+            height: img.height,
+          });
+        };
       };
+      reader.readAsDataURL(blob);
+    });
+  }
+
+  private async appendPreviewImage(pageIndex: number) {
+    const itemContainer = document.createElement('div');
+    itemContainer.style.width = '60%';
+    itemContainer.style.display = 'flex';
+    itemContainer.style.justifyContent = 'center';
+    itemContainer.style.alignItems = 'flex-start';
+    itemContainer.style.position = 'relative';
+    itemContainer.style.borderRadius = '4px';
+    itemContainer.style.transition = 'border-color .3s';
+    itemContainer.style.marginBottom = '10px';
+
+    const onMouseOverHandle = () => {
+      itemContainer.style.borderColor = '#ccc';
+    };
+    const onMouseOutHandle = () => {
+      itemContainer.style.borderColor = 'transparent';
+    };
+    const onClickHandle = () => {
+      this.emit('pageChange', pageIndex);
+    };
 
-      itemContainer.addEventListener('click', onClickHandle);
-      itemContainer.addEventListener('mouseover', onMouseOverHandle);
-      itemContainer.addEventListener('mouseout', onMouseOutHandle);
-      this.eventsMap.set(itemContainer, [onClickHandle, onMouseOverHandle, onMouseOutHandle]);
-
-      const pageIndex = document.createElement('span');
-      pageIndex.textContent = `${i}`;
-      pageIndex.style.position = 'absolute';
-      pageIndex.style.top = '1px';
-      pageIndex.style.left = '-10px';
-      pageIndex.style.transform = 'translate(-100%)';
-      pageIndex.style.fontSize = '12px';
-      pageIndex.style.color = '#5f5f5f';
-
-      const preview = document.createElement('img');
-      preview.style.width = '100%';
-      preview.style.display = 'inline-block';
-      preview.src = `${option.prefix}/${option.taskId}/preview/${i}.png`;
-
-      itemContainer.appendChild(preview);
-      itemContainer.appendChild(pageIndex);
-
-      this.root.appendChild(itemContainer);
+    itemContainer.addEventListener('click', onClickHandle);
+    itemContainer.addEventListener('mouseover', onMouseOverHandle);
+    itemContainer.addEventListener('mouseout', onMouseOutHandle);
+    this.eventsMap.set(itemContainer, [onClickHandle, onMouseOverHandle, onMouseOutHandle]);
+
+    const pageIndexContainer = document.createElement('span');
+    pageIndexContainer.textContent = `${pageIndex}`;
+    pageIndexContainer.style.position = 'absolute';
+    pageIndexContainer.style.top = '1px';
+    pageIndexContainer.style.left = '-10px';
+    pageIndexContainer.style.transform = 'translate(-100%)';
+    pageIndexContainer.style.fontSize = '12px';
+    pageIndexContainer.style.color = '#5f5f5f';
+
+    const previewUrl = `${this.prefix}/${this.taskId}/preview/${pageIndex}.png`;
+    const preview = document.createElement('img');
+    const cachePreview = await kvStore.getItem(previewUrl);
+    if (cachePreview) {
+      const { src } = JSON.parse(cachePreview);
+      preview.src = src;
+    } else {
+      const previewInfo = await this.getPreviewImage(previewUrl);
+      await kvStore.setItem(previewUrl, JSON.stringify(previewInfo));
+      const { src } = previewInfo;
+      preview.src = src;
     }
+
+    preview.style.width = '100%';
+    preview.style.display = 'inline-block';
+
+    itemContainer.appendChild(preview);
+    itemContainer.appendChild(pageIndexContainer);
+
+    this.root.appendChild(itemContainer);
+  }
+
+  private async scheduleGetPreviewImage() {
+    if (!this.isSchedule) {
+      this.scheduleId = setTimeout(async () => {
+        await this.scheduleGetPreviewImage();
+      }, 32) as unknown as number;
+      return;
+    }
+    const pageIndex = this.addImagesPool.shift();
+    if (!pageIndex) {
+      clearTimeout(this.scheduleId);
+      this.scheduleId = 0;
+      return;
+    }
+    await this.appendPreviewImage(pageIndex);
+    this.scheduleId = setTimeout(async () => {
+      await this.scheduleGetPreviewImage();
+    }, 32) as unknown as number;
+  }
+
+  public async startGetPreviewImageSchedule() {
+    this.isSchedule = true;
+  }
+
+  public pauseGetPreviewImageSchedule() {
+    this.isSchedule = false;
+  }
+
+  public initialize(slideCount: number, option: SlideApplicationOption): void {
+    this.taskId = option.taskId;
+    this.prefix = option.prefix;
+    for (let i = 1; i <= slideCount; i++) {
+      this.addImagesPool.push(i);
+    }
+    this.scheduleGetPreviewImage();
   }
 
   public hidden() {
-    if (!this.root) {
+    if (!this.root || !this.isShow) {
       return;
     }
     this.root.style.left = '-240px';
@@ -109,5 +182,11 @@ export class SideBarView extends EventEmitter<SideBarViewEvents> {
       element.removeEventListener('mouseout', mouseOutEvent);
     });
   }
+}
 
-}
+interface PreviewImage {
+  url: string;
+  src: string;
+  width: number;
+  height: number;
+}

package/src/SlideApplication.ts

@@ -56,7 +56,7 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     super();
     (window as any).emitter = this.emitter;
     this.rootView.setAttribute('data-forge-app', Slide_APP_NAME);
-    this.rootView.style.background = '#f0f0f0f0';
+    this.rootView.style.background = '#f9f9fc';
     this.rootView.style.overflow = 'hidden';
 
     this.contentContainer.style.width = '100%';
@@ -238,29 +238,6 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     return `${this.prefix}/${this.taskId}/preview/${pageIndex}.png`;
   }
 
-  private async getPreviewImage(imageUrl: string) {
-    const image = fetch(imageUrl);
-    return await image.then(res => res.blob()).then(blob => {
-      return new Promise<PreviewImage>(resolve => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          const base64Data = reader.result as string;
-          const img = document.createElement('img');
-          img.src = base64Data;
-          img.onload = () => {
-            resolve({
-              url: imageUrl,
-              src: base64Data,
-              width: img.width,
-              height: img.height,
-            });
-          };
-        };
-        reader.readAsDataURL(blob);
-      });
-    });
-  }
-
   private async getImageUrl(pageIndex: number) {
     return this.getPreviewImageUrl(pageIndex);
   }
@@ -277,7 +254,7 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     if (preview) {
       return { width: preview.width, height: preview.height };
     }
-    preview = await this.getPreviewImage(imageUrl);
+    preview = await this.sideBar.getPreviewImage(imageUrl);
     await kvStore.setItem(imageUrl, JSON.stringify(preview));
     return { width: preview.width, height: preview.height };
   }
@@ -294,7 +271,7 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     if (preview) {
       return preview.src;
     }
-    preview = await this.getPreviewImage(imageUrl);
+    preview = await this.sideBar.getPreviewImage(imageUrl);
     await kvStore.setItem(imageUrl, JSON.stringify(preview));
     return preview.src;
   }
@@ -321,11 +298,15 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     this.syncMessageQueue = [];
     this.isSyncing = true;
     const { state, dispatch } = lastSyncMessage;
-    if (this.slide.slideState.currentSlideIndex < 0) {
+    let ignoreKeys: string[] | undefined = undefined;
+    if ( dispatch.type === 'mediaPlay' || dispatch.type === 'mediaPause' || dispatch.type === 'mediaFullscreen') {
+      ignoreKeys = [dispatch.id];
+    }
+    if (this.slide.slideState.currentSlideIndex < 0 || state.currentSlideIndex < 0) {
       // @ts-ignore
       await this.slide.receiveSyncHandler(dispatch);
       return this.nextTick();
-    } else if (!deepEqual(this.slide.slideState, state)) {
+    } else if (!deepEqual(this.slide.slideState, state, ignoreKeys)) {
       await this.slide.setSlideState(state);
       // @ts-ignore
       await this.slide.receiveSyncHandler(dispatch);
@@ -390,15 +371,15 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     this.taskId = option.taskId;
     const whiteboardApp = new WhiteboardApplication();
     // @ts-ignore
-    whiteboardApp.roomDoc = this.roomDoc;
+    whiteboardApp.appDoc = this.appDoc;
     // @ts-ignore
-    whiteboardApp.appId = `${option.taskId}_${this.appId}_wb`;
+    whiteboardApp.appId = `${this.appId}_wb`;
     // @ts-ignore
     whiteboardApp.userId = this.userId;
     // @ts-ignore
     whiteboardApp.userManager = this.userManager;
     // @ts-ignore
-    whiteboardApp.applicationManager = this.applicationManager;
+    whiteboardApp.deleteSubDoc = this.deleteSubDoc;
 
     const json = await fetch(`${option.prefix}/${option.taskId}/jsonOutput/slide-1.json`).then(res => res.json());
     this.slideCount = json.slideCount;
@@ -445,6 +426,12 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
       interactive: true,
       anchor: this.slideContainer,
       mode: 'interactive',
+      clientId: Math.random().toString(36).substring(2, 15),
+      timestamp: () => {
+        console.log('timestamp');
+        console.log(Date.now, this.calibrationTimestamp, Date.now() - this.calibrationTimestamp);
+        return this.calibrationTimestamp;
+      },
       // logger: {
       //     info: console.log,
       //     warn: console.warn,
@@ -469,10 +456,6 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
       this.emitter.emit('mainSeqStepEnd', animateIndex);
     });
 
-    this.slide.on(SLIDE_EVENTS.animateStart, () => {
-      this.sideBar.hidden();
-    });
-    
     this.slide.on(SLIDE_EVENTS.renderError, ({ error, index }) => {
       if (error.errorType === 'CANVAS_CRASH') {
         this.slide.renderSlide(index);
@@ -480,19 +463,25 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     });
 
     this.slide.on(SLIDE_EVENTS.renderStart, (slideIndex) => {
-      this.whiteboardApp.emitter.view.style.opacity = '0';
-      this.whiteboardApp.emitter.addPage(`${slideIndex}`);
-      this.whiteboardApp.emitter.gotoPage(`${slideIndex}`);
-      this.sideBar.hidden();
-      this.emitter.emit('renderStart', slideIndex);
+      if (slideIndex >= 0) {
+        this.sideBar.pauseGetPreviewImageSchedule();
+        this.whiteboardApp.emitter.view.style.opacity = '0';
+        this.whiteboardApp.emitter.addPage(`${slideIndex}`);
+        this.whiteboardApp.emitter.gotoPage(`${slideIndex}`);
+        this.sideBar.hidden();
+        this.emitter.emit('renderStart', slideIndex);
+      }
     });
 
     this.slide.on(SLIDE_EVENTS.renderEnd, (slideIndex) => {
-      this.currentSlideIndex = slideIndex;
-      this.whiteboardApp.emitter.view.style.opacity = '1';
-      // slidePool.active(this.appId, this.slide);
-      // slidePool.onRenderEnd(this.appId, this.window?.focused ?? false);
-      this.emitter.emit('renderEnd', slideIndex);
+      if (slideIndex >= 0) {
+        this.sideBar.startGetPreviewImageSchedule();
+        this.currentSlideIndex = slideIndex;
+        this.whiteboardApp.emitter.view.style.opacity = '1';
+        // slidePool.active(this.appId, this.slide);
+        // slidePool.onRenderEnd(this.appId, this.window?.focused ?? false);
+        this.emitter.emit('renderEnd', slideIndex);
+      }
     });
 
     this.slide.on(SLIDE_EVENTS.stateChange, (state) => {
@@ -505,6 +494,10 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     (window as any).slideWhiteboard = this.whiteboardApp;
     (window as any).forgeSlide = this;
 
+    this.whiteboardContainer.addEventListener('click', () => {
+      this.sideBar.hidden();
+    }, false);
+
     const syncSlide = this.getMap(this.name).get('slideState');
     if (syncSlide && syncSlide.taskId === option.taskId) {
       this.slide.setSlideState(syncSlide);
@@ -548,6 +541,7 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
           this.onRefocusInstance();
         }
       });
+      this.bindKeyBoardEvent();
     }
     // @ts-ignore
     window.__forge_slide = this;
@@ -560,8 +554,11 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     return this.getMap(`user/${userId}`);
   }
 
-  public async dispose(): Promise<void> {
-    await this.whiteboardApp.dispose();
+  public async dispose(removeSubDoc: boolean): Promise<void> {
+    if (removeSubDoc) {
+      this.deleteSubDoc(this.appId);
+    }
+    await this.whiteboardApp.dispose(removeSubDoc);
     this.rootView.parentElement?.removeChild(this.rootView);
     this.slide.destroy();
     this.sideBar.dispose();
@@ -571,4 +568,4 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     // slidePool.remove(this.appId);
   }
 
-}
+}

package/src/utils.ts

@@ -1,4 +1,4 @@
-export function deepEqual(a: any, b: any, excludeKeys: string[] = ['time']) {
+export function deepEqual(a: any, b: any, excludeKeys: string[] = ['mediaState']) {
   // 严格相等检查
   if (a === b) return true;
 
@@ -59,4 +59,4 @@ function arrayEqual(arr1: any[], arr2: any[]) {
   return true;
 }
 
-export async function delay(time: number): Promise<void> { return new Promise(resolve => setTimeout(resolve, time)); }
+export async function delay(time: number): Promise<void> { return new Promise(resolve => setTimeout(resolve, time)); }