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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.3.0-canary.0",
+  "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

@@ -105,7 +105,7 @@ function create_sidebar() {
 
   const $preview = h("div");
   set_class($preview, "preview");
-  $preview.classList.add("tele-fancy-scrollbar");
+  $preview.classList.add(wrap_class("tele-fancy-scrollbar"));
   $preview.onclick = function on_click_preview(ev) {
     if (readonly) return;
     const page_index = (ev.target as HTMLElement).dataset?.pageIndex;
@@ -371,7 +371,10 @@ function on_visibility_change(callback: (visible: boolean) => void) {
   return noop;
 }
 
-export type SlideViewerOptions = Omit<ISlideConfig, "anchor"> & SlideAttributes;
+export type SlideViewerOptions = Omit<ISlideConfig, "anchor" | "mode" | "interactive"> & {
+  mode?: ISlideConfig["mode"];
+  interactive?: ISlideConfig["interactive"];
+} & SlideAttributes;
 
 export interface SlideViewerInfoResponse {
   width: number;
@@ -402,7 +405,6 @@ export class SlideViewer {
     this.$content = this.sidebar.$content;
     this.$footer = this.footer.$footer;
     append(this.$content, this.$slide);
-    append(this.$content, this.$footer);
 
     let resolveReady: () => void;
     this._readyPromise = new Promise(resolve => {
@@ -427,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(
@@ -441,7 +448,14 @@ export class SlideViewer {
       })
     );
 
-    this.slide = new Slide({ anchor: this.$slide, ...options });
+    this.slide = new Slide({
+      anchor: this.$slide,
+      resize: true,
+      mode: "local",
+      interactive: true,
+      enableGlobalClick: true,
+      ...options,
+    });
     this.slide.setResource(options.taskId, options.url || DefaultUrl);
 
     let resolveFetching: (response: SlideViewerInfoResponse) => void;
@@ -449,6 +463,11 @@ export class SlideViewer {
       resolveFetching = resolve;
     });
 
+    this.slide.on("slideChange", page => {
+      if (this._destroyed) return;
+      this.setPage(page);
+    });
+
     this.slide.on("renderEnd", () => {
       if (!this._ready)
         setTimeout(() => {

package/src/fancy-scrollbar.scss

@@ -0,0 +1,57 @@
+$namespace: "netless-app-slide";
+
+$scrollbar-size: 8px;
+$scrollbar-ff-width: auto; // FF-only accepts auto, thin, none
+$scrollbar-minlength: 50px; // Minimum length of scrollbar thumb
+$scrollbar-track-color: transparent;
+$scrollbar-color: rgba(68, 78, 96, 0.1);
+$scrollbar-color-hover: rgba(68, 78, 96, 0.2);
+$scrollbar-color-active: rgba(68, 78, 96, 0.2);
+
+.#{$namespace}-tele-fancy-scrollbar {
+  overscroll-behavior: contain;
+  overflow: auto;
+  overflow-y: scroll;
+  overflow-y: overlay; // for webkit
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  scrollbar-width: $scrollbar-ff-width;
+  // Firefox has incorrect track color
+  // scrollbar-color: $scrollbar-color $scrollbar-track-color;
+
+  &::-webkit-scrollbar {
+    height: $scrollbar-size;
+    width: $scrollbar-size;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: $scrollbar-track-color;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $scrollbar-color;
+    background-color: $scrollbar-track-color;
+    border-radius: $scrollbar-size * 0.5;
+    transition: background-color 0.4s;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: $scrollbar-color;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: $scrollbar-color-hover;
+  }
+
+  &::-webkit-scrollbar-thumb:active {
+    background-color: $scrollbar-color-active;
+  }
+
+  &::-webkit-scrollbar-thumb:vertical {
+    min-height: $scrollbar-minlength;
+  }
+
+  &::-webkit-scrollbar-thumb:horizontal {
+    min-width: $scrollbar-minlength;
+  }
+}

package/src/index.ts

@@ -8,7 +8,6 @@ import ColorString from "color-string";
 import { SideEffectManager } from "side-effect-manager";
 import { SlideViewer } from "./SlideViewer";
 import { refrigerator, addHooks } from "./Refrigerator";
-import { noop } from "./utils";
 
 export { SlideViewer, refrigerator, addHooks };
 
@@ -24,19 +23,19 @@ 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__);
 
     const sideEffect = new SideEffectManager();
 
-    // create ui
+    // Create UI
     const viewer = new SlideViewer({
       interactive: true,
       mode: "interactive",
       resize: true,
       enableGlobalClick: true,
-      controller: debug,
       timestamp: make_timestamp(context),
-      logger: make_logger(context),
+      logger,
       renderOptions: {
         minFPS: options.minFPS || 25,
         maxFPS: options.maxFPS || 30,
@@ -61,18 +60,18 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
       (window as any).slideViewer = viewer;
     }
 
-    // mount ui
+    // Mount UI
     context.box.mountStyles(SlideViewer.styles);
     context.box.mountStage(viewer.$slide);
     context.box.mountFooter(viewer.$footer);
     context.box.mountContent(viewer.$content);
     sideEffect.addDisposer(() => viewer.destroy());
 
-    // connect ui with netless app
-    connect({ context, viewer, sideEffect, debug });
+    // Connect UI with Netless App
+    connect({ context, viewer, sideEffect, logger });
 
     onUnmount(context, () => {
-      console.log("[Slide] destroy");
+      logger.info("[Slide] destroy");
       sideEffect.flushAll();
     });
   },
@@ -82,11 +81,20 @@ export default SlideApp;
 
 export function previewSlide(options: SlideViewerOptions & { container: HTMLElement }) {
   const { container } = options;
+  container.style.cssText = "display:flex;flex-direction:column";
   const viewer = new SlideViewer(options);
+  container.appendChild(document.createElement("style")).textContent = SlideViewer.styles;
   container.appendChild(viewer.$content);
+  container.appendChild(viewer.$footer);
+  viewer.prepare(() => viewer.slide.renderSlide(1));
   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;
@@ -99,7 +107,7 @@ function make_timestamp(context: AppContext): () => number {
   }
 }
 
-function make_logger(context: AppContext) {
+function make_logger(context: AppContext): { info: (msg: string) => void } {
   if (import.meta.env.DEV) {
     return { info: console.debug.bind(console) };
   }
@@ -150,18 +158,18 @@ interface ConnectParams {
   context: AppContext;
   viewer: SlideViewer;
   sideEffect: SideEffectManager;
-  debug: boolean;
+  logger: { info: (msg: string) => void };
 }
 
-function connect({ context, viewer, sideEffect, debug }: ConnectParams) {
-  const log = debug ? console.log.bind(console) : noop;
+function connect({ context, viewer, sideEffect, logger }: ConnectParams) {
+  const log = import.meta.env.DEV ? console.log.bind(console) : logger.info.bind(logger);
 
   let whiteboard: WhiteBoardView | null = null;
 
   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();
   });
 
@@ -224,9 +232,10 @@ function connect({ context, viewer, sideEffect, debug }: ConnectParams) {
 
   // save state
   slide.on("slideChange", page => {
-    log("[Slide] page to", page);
-    whiteboard && whiteboard.jumpPage(page - 1);
-    viewer.setPage(page);
+    if (context.isWritable && whiteboard) {
+      log("[Slide] page to", page);
+      whiteboard.jumpPage(page - 1);
+    }
   });
 
   // handle ui events

package/src/style.scss

@@ -1,3 +1,5 @@
+@import "./fancy-scrollbar.scss";
+
 $namespace: "netless-app-slide";
 
 .#{$namespace}-content {
@@ -14,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%;
@@ -26,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%;
@@ -85,7 +87,7 @@ $namespace: "netless-app-slide";
   transform: translate(-100%);
   text-align: right;
   font-size: 12px;
-  color: #5f5f5f;
+  // color: #5f5f5f;
   user-select: none;
 }
 
@@ -96,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 {
@@ -169,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 {
@@ -181,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;
@@ -189,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,
@@ -232,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 {