@netless/app-slide 0.3.0-canary.1 → 0.3.0-canary.11

package/src/index.ts

@@ -6,11 +6,15 @@ export type { SlideState, AddHooks, AppOptions, Attributes, MagixEvents, SlideVi
 
 import ColorString from "color-string";
 import { SideEffectManager } from "side-effect-manager";
+import { Slide } from "@netless/slide";
 import { SlideViewer } from "./SlideViewer";
 import { refrigerator, addHooks } from "./Refrigerator";
-import { noop } from "./utils";
+import { DefaultUrl } from "./constants";
 
-export { SlideViewer, refrigerator, addHooks };
+export { Slide, SlideViewer, refrigerator, addHooks, DefaultUrl };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const usePlugin = /* @__PURE__ */ Slide.usePlugin.bind(Slide) as (plugin: any) => void;
 
 export const version = __APP_VERSION__;
 
@@ -23,29 +27,36 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
       throw new Error("[Slide] no taskId");
     }
 
-    const options = context.getAppOptions() || {};
-    const debug = Boolean(options.debug);
+    const appOptions = context.getAppOptions() || {};
+    const options = appOptions.renderOptions || {};
+    const logger = make_logger(context, appOptions.debug);
+    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: appOptions.logger || logger,
       renderOptions: {
         minFPS: options.minFPS || 25,
         maxFPS: options.maxFPS || 30,
         autoFPS: options.autoFPS ?? true,
         autoResolution: options.autoResolution ?? true,
         resolution: options.resolution,
-        transactionBgColor: options.bgColor || make_bg_color(context.box.$content),
+        maxResolutionLevel: options.maxResolutionLevel,
+        transactionBgColor: options.transactionBgColor || make_bg_color(context.box.$content),
       },
-
+      rtcAudio: appOptions.rtcAudio,
+      useLocalCache: appOptions.useLocalCache,
+      resourceTimeout: appOptions.resourceTimeout,
+      loaderDelegate: appOptions.loaderDelegate,
+      navigatorDelegate: appOptions.navigatorDelegate,
+      fixedFrameSize: appOptions.fixedFrameSize,
       taskId: context.storage.state.taskId,
       url: context.storage.state.url,
     });
@@ -61,37 +72,45 @@ 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();
     });
+
+    return viewer;
   },
 };
 
 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);
+  const { container, ...slideOptions } = options;
+  const wrapper = document.createElement("div");
+  wrapper.className = "netless-app-slide-preview-wrapper";
+  const viewer = new SlideViewer(slideOptions);
+  wrapper.appendChild(document.createElement("style")).textContent = SlideViewer.styles;
+  wrapper.appendChild(viewer.$content);
+  wrapper.appendChild(viewer.$footer);
+  container.appendChild(wrapper);
   viewer.prepare(() => viewer.slide.renderSlide(1));
-  viewer.slide.on("slideChange", page => viewer.setPage(page));
   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;
@@ -104,7 +123,8 @@ function make_timestamp(context: AppContext): () => number {
   }
 }
 
-function make_logger(context: AppContext) {
+function make_logger(context: AppContext, debug?: boolean): { info: (msg: string) => void } {
+  void debug; // not used for now
   if (import.meta.env.DEV) {
     return { info: console.debug.bind(console) };
   }
@@ -155,18 +175,19 @@ 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 });
+    whiteboard.setBaseRect({ width, height });
     kick_start();
   });
 
@@ -229,9 +250,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
@@ -241,4 +263,15 @@ function connect({ context, viewer, sideEffect, debug }: ConnectParams) {
       viewer.setReadonly(!w);
     })
   );
+
+  sideEffect.addEventListener(window, "keydown", ev => {
+    if (context.box.focus) {
+      if (ev.key === "ArrowUp" || ev.key === "ArrowLeft") {
+        viewer.slide.prevStep();
+      }
+      if (ev.key === "ArrowRight" || ev.key === "ArrowDown") {
+        viewer.slide.nextStep();
+      }
+    }
+  });
 }

package/src/style.scss

@@ -1,5 +1,13 @@
 @import "./fancy-scrollbar.scss";
 
+@mixin no-user-select {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 $namespace: "netless-app-slide";
 
 .#{$namespace}-content {
@@ -11,12 +19,13 @@ $namespace: "netless-app-slide";
 .#{$namespace}-slide {
   width: 100%;
   height: 100%;
+  @include no-user-select;
 }
 
 .#{$namespace}-preview-mask {
   display: none;
   position: absolute;
-  z-index: 6000;
+  z-index: 10200;
   top: 0;
   left: 0;
   width: 100%;
@@ -28,7 +37,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%;
@@ -39,6 +48,7 @@ $namespace: "netless-app-slide";
   background: rgba(237, 237, 240, 0.9);
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.11);
   transition: transform 0.4s;
+  @include no-user-select;
 }
 
 .#{$namespace}-preview-active {
@@ -62,7 +72,7 @@ $namespace: "netless-app-slide";
   border: 7px solid transparent;
   border-radius: 4px;
   transition: border-color 0.3s;
-  user-select: none;
+  @include no-user-select;
 
   &:hover,
   &.#{$namespace}-preview-page-active {
@@ -88,7 +98,23 @@ $namespace: "netless-app-slide";
   text-align: right;
   font-size: 12px;
   color: #5f5f5f;
-  user-select: none;
+  @include no-user-select;
+}
+
+.#{$namespace}-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 10100;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 0, 0, 0.25);
+  transition: opacity 0.3s;
+  opacity: 0;
+  pointer-events: none;
 }
 
 .#{$namespace}-footer {
@@ -98,7 +124,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 {
@@ -126,7 +153,7 @@ $namespace: "netless-app-slide";
   background: transparent;
   transition: background 0.4s;
   cursor: pointer;
-  user-select: none;
+  @include no-user-select;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   &:hover {
@@ -171,11 +198,15 @@ $namespace: "netless-app-slide";
 }
 
 .#{$namespace}-page-number {
+  display: flex;
+  align-items: center;
+  height: 26px;
   margin-left: auto;
   font-size: 13px;
-  user-select: none;
+  @include no-user-select;
   white-space: nowrap;
   word-break: keep-all;
+  font-variant-numeric: tabular-nums;
 }
 
 .#{$namespace}-page-number-input {
@@ -183,7 +214,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,14 +222,17 @@ $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,
   &:focus,
   &:active {
+    user-select: text;
     background: #fff;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   }
@@ -234,17 +268,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 {
@@ -254,3 +284,19 @@ $namespace: "netless-app-slide";
     background: rgba(50, 50, 50, 0.9);
   }
 }
+
+.#{$namespace}-preview-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-flow: column nowrap;
+
+  .#{$namespace}-content {
+    flex: 1;
+  }
+
+  .#{$namespace}-footer {
+    flex-shrink: 0;
+  }
+}

package/src/typings.ts

@@ -1,4 +1,4 @@
-import type { Slide, SLIDE_EVENTS, SyncEvent } from "@netless/slide";
+import type { ISlideConfig, Slide, SLIDE_EVENTS, SyncEvent } from "@netless/slide";
 import type { RegisterParams } from "@netless/window-manager";
 
 export type SlideState = Slide["slideState"];
@@ -18,19 +18,23 @@ export interface MagixEvents {
   [SLIDE_EVENTS.syncDispatch]: SyncEvent;
 }
 
-export interface AppOptions {
-  /** show debug controller */
+export interface AppOptions
+  extends Pick<
+    ISlideConfig,
+    | "renderOptions"
+    | "rtcAudio"
+    | "useLocalCache"
+    | "resourceTimeout"
+    | "loaderDelegate"
+    | "navigatorDelegate"
+    | "fixedFrameSize"
+    | "logger"
+  > {
   debug?: boolean;
-  /** scale */
-  resolution?: number;
-  /** background color for slide animations */
-  bgColor?: string;
-  /** minimal fps  (default: 25) */
-  minFPS?: number;
-  /** maximal fps  (default: 30) */
-  maxFPS?: number;
-  /** automatically decrease fps  (default: true) */
-  autoFPS?: boolean;
-  /** whether to re-scale automatically (default: true) */
-  autoResolution?: boolean;
+}
+
+export interface ILogger {
+  info?(msg: string): void;
+  error?(msg: string): void;
+  warn?(msg: string): void;
 }