@netless/app-slide 0.3.0-canary.4 → 0.3.0-canary.7

package/dist/typings.d.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 declare type SlideState = Slide["slideState"];
 export declare type AddHooks = NonNullable<RegisterParams["addHooks"]>;
@@ -13,19 +13,11 @@ export interface Attributes {
 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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.3.0-canary.4",
+  "version": "0.3.0-canary.7",
   "main": "dist/main.js",
   "module": "dist/main.mjs",
   "types": "dist/index.d.ts",
@@ -9,13 +9,15 @@
     "dist",
     "README-zh.md"
   ],
+  "dependencies": {
+    "@netless/slide": "^0.5.13"
+  },
   "devDependencies": {
-    "@netless/slide": "^0.5.3",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
-    "side-effect-manager": "^1.1.1",
-    "value-enhancer": "^1.3.0",
-    "vanilla-lazyload": "^17.8.2"
+    "side-effect-manager": "^1.1.2",
+    "value-enhancer": "^1.3.2",
+    "vanilla-lazyload": "^17.8.3"
   },
   "scripts": {
     "types": "cross-env NODE_ENV=production tsc --declaration --emitDeclarationOnly --outDir dist",

package/src/SlideViewer.ts

@@ -45,15 +45,25 @@ interface PreviewPage {
   thumbnail: string;
 }
 
-async function fetch_slide_info({ taskId, url }: SlideAttributes) {
+interface PreviewInfo {
+  width: number;
+  height: number;
+}
+
+interface SlideInfo {
+  width: number;
+  height: number;
+  slideCount: number;
+}
+
+async function fetch_slide_info({ taskId, url }: SlideAttributes): Promise<{
+  preview: PreviewInfo | null;
+  slide: SlideInfo;
+}> {
   const prefix = make_prefix(taskId, url);
   const imgSrc = `${prefix}/preview/1.png`;
   const jsonUrl = `${prefix}/jsonOutput/slide-1.json`;
 
-  interface PreviewInfo {
-    width: number;
-    height: number;
-  }
   const p1 = new Promise<PreviewInfo | null>(resolve => {
     const image = new Image();
     image.onload = () => resolve(image);
@@ -61,11 +71,6 @@ async function fetch_slide_info({ taskId, url }: SlideAttributes) {
     image.src = imgSrc;
   });
 
-  interface SlideInfo {
-    width: number;
-    height: number;
-    slideCount: number;
-  }
   const p2: Promise<SlideInfo> = fetch(jsonUrl).then(r => r.json());
 
   return { preview: await p1, slide: await p2 };
@@ -176,8 +181,8 @@ function create_sidebar() {
     }
   }
 
-  function set_page_index(page_index_: number) {
-    if (page_index !== page_index_) {
+  function set_page_index(page_index_: number, force = false) {
+    if (force || page_index !== page_index_) {
       page_index = page_index_;
       const $page = $preview.querySelector<HTMLElement>(
         `.${wrap_class(`preview-page-${page_index}`)}`
@@ -292,9 +297,6 @@ function create_footer() {
   const $pageNumberInput = h("input");
   set_class($pageNumberInput, "page-number-input");
   $pageNumberInput.value = String(page_index + 1);
-  $pageNumberInput.onfocus = function on_focus_page_number_input() {
-    $pageNumberInput.select();
-  };
   $pageNumberInput.onchange = function on_change_page_number_input() {
     if (readonly) return;
     if ($pageNumberInput.value) {
@@ -329,8 +331,8 @@ function create_footer() {
     }
   }
 
-  function set_page_index(page_index_: number) {
-    if (page_index !== page_index_) {
+  function set_page_index(page_index_: number, force = false) {
+    if (force || page_index !== page_index_) {
       page_index = page_index_;
       $pageNumberInput.value = String(page_index + 1);
     }
@@ -384,6 +386,7 @@ export interface SlideViewerInfoResponse {
 
 export class SlideViewer {
   static styles = styles;
+  static fetchSlideInfo = fetch_slide_info;
 
   private readonly sideEffect = new SideEffectManager();
 
@@ -414,6 +417,8 @@ export class SlideViewer {
     const on_new_page_index = (index: number) => {
       if (this._ready && index >= 0 && index < this._slideCount) {
         this.slide.renderSlide(index + 1);
+      } else {
+        this.setPage(this.slide.slideState.currentSlideIndex);
       }
     };
     this.sidebar.on_new_page_index(on_new_page_index);
@@ -533,8 +538,8 @@ export class SlideViewer {
   }
 
   setPage(page: number) {
-    this.sidebar.set_page_index(page - 1);
-    this.footer.set_page_index(page - 1);
+    this.sidebar.set_page_index(page - 1, true);
+    this.footer.set_page_index(page - 1, true);
   }
 
   private _isFrozen = false;

package/src/index.ts

@@ -6,10 +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 { 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__;
 
@@ -22,8 +27,9 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
       throw new Error("[Slide] no taskId");
     }
 
-    const options = context.getAppOptions() || {};
-    const logger = make_logger(context);
+    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();
@@ -35,16 +41,22 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
       resize: true,
       enableGlobalClick: true,
       timestamp: make_timestamp(context),
-      logger,
+      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,
     });
@@ -74,15 +86,17 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
       logger.info("[Slide] destroy");
       sideEffect.flushAll();
     });
+
+    return viewer;
   },
 };
 
 export default SlideApp;
 
 export function previewSlide(options: SlideViewerOptions & { container: HTMLElement }) {
-  const { container } = options;
+  const { container, ...slideOptions } = options;
   container.style.cssText = "display:flex;flex-direction:column";
-  const viewer = new SlideViewer(options);
+  const viewer = new SlideViewer(slideOptions);
   container.appendChild(document.createElement("style")).textContent = SlideViewer.styles;
   container.appendChild(viewer.$content);
   container.appendChild(viewer.$footer);
@@ -107,7 +121,8 @@ function make_timestamp(context: AppContext): () => number {
   }
 }
 
-function make_logger(context: AppContext): { info: (msg: string) => void } {
+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) };
   }

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,6 +19,7 @@ $namespace: "netless-app-slide";
 .#{$namespace}-slide {
   width: 100%;
   height: 100%;
+  @include no-user-select;
 }
 
 .#{$namespace}-preview-mask {
@@ -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,7 @@ $namespace: "netless-app-slide";
   text-align: right;
   font-size: 12px;
   color: #5f5f5f;
-  user-select: none;
+  @include no-user-select;
 }
 
 .#{$namespace}-footer {
@@ -127,7 +137,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 {
@@ -177,7 +187,7 @@ $namespace: "netless-app-slide";
   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;
@@ -200,13 +210,13 @@ $namespace: "netless-app-slide";
     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;
   }

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;
 }