@netless/forge-slide 0.1.1-alpha.9 → 1.0.0-alpha.1

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,19 +1,19 @@
 {
   "name": "@netless/forge-slide",
-  "version": "0.1.1-alpha.9",
+  "version": "1.0.0-alpha.1",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@netless/slide": "^1.4.15"
+    "@netless/slide": "^1.4.21"
   },
   "peerDependencies": {
     "eventemitter3": "^5.0.1",
     "yjs": "^13.6.18",
     "uuid": "^11.0.5",
-    "@netless/forge-room": "0.1.11",
-    "@netless/forge-whiteboard": "0.1.15"
+    "@netless/forge-room": "1.0.0-alpha.1",
+    "@netless/forge-whiteboard": "0.1.20-alpha.1"
   },
   "keywords": [],
   "author": "",

package/src/FooterView.ts

@@ -15,20 +15,25 @@ export class FooterView extends EventEmitter<FooterViewEvents> {
 
   public readonly root: HTMLDivElement;
 
-  private prevStep: HTMLDivElement;
   private nextStep: HTMLDivElement;
+  private pauseIcon: HTMLDivElement;
 
   private prevPage: HTMLDivElement;
   private nextPage: HTMLDivElement;
 
   private sideBarToggle: HTMLDivElement;
-  
+
+  private currentPageIndex: number = 0;
+  private totalPageIndex: number = 0;
+  private pageIndexContainer: HTMLDivElement;
+
   private eventMap: Map<HTMLDivElement, (() => void)[]> = new Map();
 
   public constructor() {
     super();
     this.root = document.createElement('div');
     this.root.classList.add('forge-slide-footer');
+    this.root.style.padding = '0 16px 0 0';
     this.root.style.height = '24px';
     this.root.style.zIndex = '6';
     this.root.style.display = 'flex';
@@ -36,17 +41,19 @@ export class FooterView extends EventEmitter<FooterViewEvents> {
     this.root.style.justifyContent = 'center';
     this.root.style.backgroundColor = '#fff';
 
-    this.prevStep = this.createIcon(Icons.prevStep(EM_COLOR), () => {
-      this.emit('prevStep');
+
+    this.prevPage = this.createIcon(Icons.prevPage(EM_COLOR), () => {
+      this.emit('prevPage');
     });
 
     this.nextStep = this.createIcon(Icons.nextStep(EM_COLOR), () => {
       this.emit('nextStep');
     });
 
-    this.prevPage = this.createIcon(Icons.prevPage(EM_COLOR), () => {
-      this.emit('prevPage');
+    this.pauseIcon = this.createIcon(Icons.pause(EM_COLOR), () => {
+
     });
+    this.pauseIcon.style.display = 'none';
 
     this.nextPage = this.createIcon(Icons.nextPage(EM_COLOR), () => {
       this.emit('nextPage');
@@ -56,13 +63,36 @@ export class FooterView extends EventEmitter<FooterViewEvents> {
       this.emit('sideBarToggle');
     });
 
+
+    this.pageIndexContainer = this.createPageNumber();
+
     this.root.appendChild(this.sideBarToggle);
     this.root.appendChild(this.createSpacer());
     this.root.appendChild(this.prevPage);
-    this.root.appendChild(this.prevStep);
     this.root.appendChild(this.nextStep);
+    this.root.appendChild(this.pauseIcon);
     this.root.appendChild(this.nextPage);
     this.root.appendChild(this.createSpacer());
+    this.root.appendChild(this.pageIndexContainer);
+  }
+
+  public changeIconToPause(): void {
+    this.nextStep.style.display = 'none';
+    this.pauseIcon.style.display = 'block';
+  }
+
+  public changeIconToNextStep(): void {
+    this.nextStep.style.display = 'block';
+    this.pauseIcon.style.display = 'none';
+  }
+
+  public setCurrentPageIndex(index: number): void {
+    this.currentPageIndex = index;
+    this.pageIndexContainer.textContent = `${this.currentPageIndex} / ${this.totalPageIndex}`;
+  }
+
+  public setTotalPageIndex(count: number): void {
+    this.totalPageIndex = count;
   }
 
   public prevPageState(enable: boolean): void {
@@ -75,22 +105,24 @@ export class FooterView extends EventEmitter<FooterViewEvents> {
     }
   }
 
-  public nextPageState(enable: boolean): void {
-    if (enable) {
-      this.nextPage.style.pointerEvents = 'all';
-      this.nextPage.style.opacity = '1';
-    } else {
-      this.nextPage.style.pointerEvents = 'none';
-      this.nextPage.style.opacity = '0.5';
-    }
-  }
-
   private createSpacer(): HTMLDivElement {
     const div = document.createElement('div');
     div.style.flex = '1 1 auto';
     return div;
   }
 
+  private createPageNumber(): HTMLDivElement {
+    const div = document.createElement('div');
+    div.style.fontSize = '13px';
+    div.style.margin = '6px';
+    div.style.color = '#191919';
+    div.style.fontFamily = 'system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"';
+    div.style.fontWeight = '400';
+    div.style.lineHeight = '18px';
+    div.style.userSelect = 'none';
+    return div;
+  }
+
   private createIcon(svgContent: string, action: () => void): HTMLDivElement {
     const icon = document.createElement('div');
     icon.style.width = '18px';
@@ -129,4 +161,4 @@ export class FooterView extends EventEmitter<FooterViewEvents> {
     this.removeAllListeners();
     this.clearHTMLEventListeners();
   }
-}
+}

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();
@@ -26,62 +32,130 @@ export class SideBarView extends EventEmitter<SideBarViewEvents> {
     this.root.style.flexDirection = 'column';
     this.root.style.justifyContent = 'flex-start';
     this.root.style.alignItems = 'center';
+    this.root.style.userSelect = 'none';
   }
 
   get isShowSideBar(): boolean {
     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 +183,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

@@ -6,8 +6,7 @@ import { ForgeSlidePermissionFlag, ForgeSlidePermissions } from './ForgeSlidePer
 import { FooterView } from './FooterView';
 import * as Y from 'yjs';
 import { SideBarView } from './SiderBarView';
-import { deepEqual, delay } from './utils';
-// import { slidePool } from './SlidePool';
+import { deepEqual } from './utils';
 
 export interface SlideApplicationOption {
     prefix: string;
@@ -49,12 +48,15 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
   private taskId: string = '';
   private prefix: string = '';
   private slideCount: number = 0;
+  private lastDispatchUuid: string = '';
+  private syncMessageQueue: { state: any, dispatch: any }[] = [];
+  private isSyncing: boolean = false;
 
   constructor() {
     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%';
@@ -114,7 +116,6 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
         this.slide.renderSlide(this.currentSlideIndex + 1);
       }
     });
-
     this.footer.on('sideBarToggle', () => {
       if (!this.permissions.hasPermission(ForgeSlidePermissionFlag.changePage)) {
         return;
@@ -213,7 +214,6 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
         return this.getImageContent(pageIndex);
       },
     });
-
     Object.defineProperty(this.emitter, 'imgUrl', {
       writable: false,
       enumerable: false,
@@ -221,7 +221,6 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
         return this.getImageUrl(pageIndex);
       },
     });
-
     Object.defineProperty(this.emitter, 'imgSize', {
       writable: false,
       enumerable: false,
@@ -229,6 +228,7 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
         return this.getImageSize(pageIndex);
       },
     });
+    this.applySlideState();
   }
 
   private getPreviewImageUrl (pageIndex: number) {
@@ -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,23 +271,50 @@ 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;
   }
 
-  private applySlideState = async (slideState: any, lastDispatch: any) => {
-    if (this.slide.slideState.currentSlideIndex < 0) {
-      this.slide.emit(SLIDE_EVENTS.syncReceive, lastDispatch);
+  private nextTick = () => {
+    this.isSyncing = false;
+    requestAnimationFrame(() => {
+      this.applySlideState().catch((error) => {
+        console.error('Error in applySlideState:', error);
+      });
+    });
+  };
+
+  private applySlideState = async () => {
+    if (this.isSyncing) {
       return;
     }
-    if (this.slide.slideState.currentSlideIndex > 0 && deepEqual(this.slide.slideState, slideState)) {
-      this.slide.emit(SLIDE_EVENTS.syncReceive, lastDispatch);
+
+    const lastSyncMessage = this.syncMessageQueue.pop();
+    if (!lastSyncMessage) {
+      return this.nextTick();
+    }
+
+    this.syncMessageQueue = [];
+    this.isSyncing = true;
+    const { state, dispatch } = lastSyncMessage;
+    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, ignoreKeys)) {
+      await this.slide.setSlideState(state);
+      // @ts-ignore
+      await this.slide.receiveSyncHandler(dispatch);
     } else {
-      await this.slide.setSlideState(slideState);
-      await delay(200);
-      this.slide.emit(SLIDE_EVENTS.syncReceive, lastDispatch);
+      this.slide.emit(SLIDE_EVENTS.syncReceive, dispatch);
     }
+    return this.nextTick();
+
   };
 
   private onSlideEventHandler = async (event: Y.YMapEvent<any>) => {
@@ -318,7 +322,15 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
       if (key === 'syncSlide') {
         if (value.action === 'add' || value.action === 'update') {
           const { slideState: slideStateFromServer, dispatch: dispatchFromServer } = this.getMap(this.name).get('syncSlide');
-          this.applySlideState(slideStateFromServer, dispatchFromServer);
+          if (this.lastDispatchUuid === dispatchFromServer.uuid) {
+            return;
+          }
+          this.lastDispatchUuid = dispatchFromServer.uuid;
+          this.syncMessageQueue.push({
+            state: slideStateFromServer,
+            dispatch: dispatchFromServer,
+          });
+          this.applySlideState();
         }
       }
     }
@@ -359,24 +371,27 @@ 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;
+    this.footer.setTotalPageIndex(this.slideCount);
     await whiteboardApp.initialize({
       width: json.width,
       height: json.height,
+      maxScaleRatio: 1,
     });
     this.whiteboardApp = whiteboardApp;
     this.whiteboard = whiteboardApp.emitter;
+    this.whiteboard.enableCameraBoundaryHighlight = false;
     this.whiteboard.enableCameraByMouse = false;
     this.whiteboard.enableCameraByTouch = false;
     this.whiteboard.view.style.width = '100%';
@@ -414,6 +429,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,
@@ -432,16 +453,14 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
 
     this.slide.on(SLIDE_EVENTS.mainSeqStepStart, (animateIndex: number) => {
       this.emitter.emit('mainSeqStepStart', animateIndex);
+      this.footer.changeIconToPause();
     });
 
     this.slide.on(SLIDE_EVENTS.mainSeqStepEnd, (animateIndex: number) => {
       this.emitter.emit('mainSeqStepEnd', animateIndex);
+      this.footer.changeIconToNextStep();
     });
 
-    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);
@@ -449,21 +468,28 @@ 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();
-      const { slideState: slideStateFromServer, dispatch: dispatchFromServer } = this.getMap(this.name).get('syncSlide');
-      this.applySlideState(slideStateFromServer, dispatchFromServer);
-      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.footer.changeIconToPause();
+        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';
+        this.footer.setCurrentPageIndex(slideIndex);
+        // slidePool.active(this.appId, this.slide);
+        // slidePool.onRenderEnd(this.appId, this.window?.focused ?? false);
+        this.footer.changeIconToNextStep();
+        this.emitter.emit('renderEnd', slideIndex);
+      }
     });
 
     this.slide.on(SLIDE_EVENTS.stateChange, (state) => {
@@ -476,6 +502,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);
@@ -519,6 +549,7 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
           this.onRefocusInstance();
         }
       });
+      this.bindKeyBoardEvent();
     }
     // @ts-ignore
     window.__forge_slide = this;
@@ -531,8 +562,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();
@@ -542,4 +576,4 @@ export class SlideApplication extends AbstractApplication<SlideApplicationOption
     // slidePool.remove(this.appId);
   }
 
-}
+}