@netless/app-slide 0.3.0-canary.2 → 0.3.0-canary.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.3.0-canary.2",
+  "version": "0.3.0-canary.3",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "dist/index.d.ts",

package/src/SlideViewer.ts

@@ -429,6 +429,11 @@ export class SlideViewer {
 
     this.sideEffect.addDisposer(this.sidebar.destroy);
     this.sideEffect.addDisposer(() => this.slide.destroy());
+    this.sideEffect.addDisposer(() => {
+      this.$content.parentElement && this.$content.remove();
+      this.$footer.parentElement && this.$footer.remove();
+      this.$slide.parentElement && this.$slide.remove();
+    });
 
     let saved_is_frozen = false;
     this.sideEffect.addDisposer(

package/src/index.ts

@@ -23,7 +23,6 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
     }
 
     const options = context.getAppOptions() || {};
-    const debug = Boolean(options.debug);
     const logger = make_logger(context);
     logger.info("[Slide] setup @ " + __APP_VERSION__);
 
@@ -35,7 +34,6 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
       mode: "interactive",
       resize: true,
       enableGlobalClick: true,
-      controller: debug,
       timestamp: make_timestamp(context),
       logger,
       renderOptions: {
@@ -92,6 +90,11 @@ export function previewSlide(options: SlideViewerOptions & { container: HTMLElem
   return viewer;
 }
 
+if (import.meta.env.DEV) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (window as any).previewSlide = previewSlide;
+}
+
 function make_timestamp(context: AppContext): () => number {
   const room = context.room;
   const player = context.displayer as Player;
@@ -166,7 +169,7 @@ function connect({ context, viewer, sideEffect, logger }: ConnectParams) {
   viewer.prepare(({ width, height, slideCount }) => {
     if (context.destroyed) return;
     width && context.box.setStageRatio(height / width);
-    whiteboard = context.createWhiteBoardView(slideCount);
+    whiteboard = context.createWhiteBoardView({ size: slideCount });
     kick_start();
   });
 

package/src/style.scss

@@ -16,7 +16,7 @@ $namespace: "netless-app-slide";
 .#{$namespace}-preview-mask {
   display: none;
   position: absolute;
-  z-index: 6000;
+  z-index: 10200;
   top: 0;
   left: 0;
   width: 100%;
@@ -28,7 +28,7 @@ $namespace: "netless-app-slide";
   flex-direction: column;
   align-items: center;
   position: absolute;
-  z-index: 6100;
+  z-index: 10300;
   top: 0;
   left: 0;
   width: 33%;
@@ -87,7 +87,7 @@ $namespace: "netless-app-slide";
   transform: translate(-100%);
   text-align: right;
   font-size: 12px;
-  color: #5f5f5f;
+  // color: #5f5f5f;
   user-select: none;
 }
 
@@ -98,7 +98,8 @@ $namespace: "netless-app-slide";
   align-items: center;
   padding: 0 16px;
   border-top: 1px solid #eeeef7;
-  color: #191919;
+  font-family: 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";
 }
 
 .#{$namespace}-float-footer {
@@ -171,11 +172,15 @@ $namespace: "netless-app-slide";
 }
 
 .#{$namespace}-page-number {
+  display: flex;
+  align-items: center;
+  height: 26px;
   margin-left: auto;
   font-size: 13px;
   user-select: none;
   white-space: nowrap;
   word-break: keep-all;
+  font-variant-numeric: tabular-nums;
 }
 
 .#{$namespace}-page-number-input {
@@ -183,7 +188,7 @@ $namespace: "netless-app-slide";
   outline: none;
   width: 3em;
   margin: 0;
-  padding: 0 2px;
+  padding: 0 0.5em 0 2px;
   text-align: right;
   font-size: 13px;
   line-height: 1;
@@ -191,9 +196,12 @@ $namespace: "netless-app-slide";
   font-family: inherit;
   border-radius: 2px;
   color: currentColor;
+  font-family: 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";
   background: transparent;
   transition: background 0.4s;
   user-select: text;
+  font-variant-numeric: tabular-nums;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   &:hover,
@@ -234,17 +242,13 @@ $namespace: "netless-app-slide";
 }
 
 .telebox-color-scheme-dark {
-  .#{$namespace}-page-number-input {
-    color: #a6a6a8;
-  }
   .#{$namespace}-page-number-input:active,
   .#{$namespace}-page-number-input:focus,
   .#{$namespace}-page-number-input:hover {
-    color: #222;
+    color: currentColor;
+    background: #25282e;
   }
   .#{$namespace}-footer {
-    color: #a6a6a8;
-    background: #2d2d33;
     border-top: none;
   }
   .#{$namespace}-footer-btn:hover {