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

package/src/style.scss

@@ -1,14 +1,256 @@
-@import "./DocsViewer/style.scss";
-@import "./SlideDocsViewer/style.scss";
+@import "./fancy-scrollbar.scss";
 
-.netless-app-slide-slide {
+$namespace: "netless-app-slide";
+
+.#{$namespace}-content {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+
+.#{$namespace}-slide {
   width: 100%;
   height: 100%;
+}
+
+.#{$namespace}-preview-mask {
+  display: none;
+  position: absolute;
+  z-index: 6000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.#{$namespace}-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  z-index: 6100;
+  top: 0;
+  left: 0;
+  width: 33%;
+  max-width: 200px;
+  height: 100%;
+  padding-top: 10px;
+  transform: translateX(-100%);
+  background: rgba(237, 237, 240, 0.9);
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.11);
+  transition: transform 0.4s;
+}
+
+.#{$namespace}-preview-active {
+  .#{$namespace}-preview-mask {
+    display: block;
+  }
+
+  .#{$namespace}-preview {
+    transform: translateX(0);
+  }
+}
+
+.#{$namespace}-preview-page {
+  position: relative;
+  display: block;
+  width: 55%;
+  margin-bottom: 10px;
+  font-size: 0;
+  color: transparent;
+  outline: none;
+  border: 7px solid transparent;
+  border-radius: 4px;
+  transition: border-color 0.3s;
+  user-select: none;
+
+  &:hover,
+  &.#{$namespace}-preview-page-active {
+    border-color: rgba(68, 78, 96, 0.1);
+  }
+
+  & > img {
+    width: 100%;
+    height: auto;
+    box-sizing: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    border-radius: 1px;
+    background-color: rgba(255, 255, 255, 1);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
+  }
+}
+
+.#{$namespace}-preview-page-name {
+  position: absolute;
+  top: 1px;
+  left: -10px;
+  transform: translate(-100%);
+  text-align: right;
+  font-size: 12px;
+  color: #5f5f5f;
+  user-select: none;
+}
+
+.#{$namespace}-footer {
+  box-sizing: border-box;
+  height: 26px;
   display: flex;
   align-items: center;
+  padding: 0 16px;
+  border-top: 1px solid #eeeef7;
+  color: #191919;
+}
+
+.#{$namespace}-float-footer {
+  width: 100%;
+  min-height: 26px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 2000;
+  background: rgba(249, 249, 252, 0.9);
+  transition: opacity 0.4s;
+}
+
+.#{$namespace}-footer-btn {
+  box-sizing: border-box;
+  width: 26px;
+  height: 26px;
+  font-size: 0;
+  margin: 0;
+  padding: 3px;
+  border: none;
+  border-radius: 1px;
+  outline: none;
+  color: currentColor;
+  background: transparent;
+  transition: background 0.4s;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &:hover {
+    background: rgba(237, 237, 240, 0.9);
+  }
+
+  @media (hover: none) {
+    &:hover {
+      background: transparent !important;
+    }
+  }
+
+  & > svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  & > svg:nth-of-type(2) {
+    display: none;
+  }
+
+  &.#{$namespace}-footer-btn-playing {
+    & > svg:nth-of-type(1) {
+      display: none;
+    }
+
+    & > svg:nth-of-type(2) {
+      display: initial;
+    }
+  }
+
+  & ~ & {
+    margin-left: 15px;
+  }
+}
+
+.#{$namespace}-page-jumps {
+  flex: 1;
+  display: flex;
   justify-content: center;
+  align-items: center;
+}
+
+.#{$namespace}-page-number {
+  margin-left: auto;
+  font-size: 13px;
+  user-select: none;
+  white-space: nowrap;
+  word-break: keep-all;
+}
+
+.#{$namespace}-page-number-input {
+  border: none;
+  outline: none;
+  width: 3em;
+  margin: 0;
+  padding: 0 2px;
+  text-align: right;
+  font-size: 13px;
+  line-height: 1;
+  font-weight: normal;
+  font-family: inherit;
+  border-radius: 2px;
+  color: currentColor;
+  background: transparent;
+  transition: background 0.4s;
+  user-select: text;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-  canvas {
-    transform: scale(var(--netless-app-slide-scale, 1));
+  &:hover,
+  &:focus,
+  &:active {
+    background: #fff;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  }
+}
+
+.#{$namespace}-readonly {
+  .#{$namespace}-footer-btn {
+    cursor: not-allowed;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  .#{$namespace}-page-number-input {
+    cursor: not-allowed;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background: transparent;
+      box-shadow: none;
+    }
+
+    &:disabled {
+      color: inherit;
+    }
+  }
+
+  &.#{$namespace}-float-footer {
+    display: none;
+  }
+}
+
+.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;
+  }
+  .#{$namespace}-footer {
+    color: #a6a6a8;
+    background: #2d2d33;
+    border-top: none;
+  }
+  .#{$namespace}-footer-btn:hover {
+    background: #212126;
+  }
+  .#{$namespace}-preview {
+    background: rgba(50, 50, 50, 0.9);
   }
 }

package/src/typings.ts

@@ -1,23 +1,36 @@
 import type { Slide, SLIDE_EVENTS, SyncEvent } from "@netless/slide";
+import type { RegisterParams } from "@netless/window-manager";
 
 export type SlideState = Slide["slideState"];
 
+export type AddHooks = NonNullable<RegisterParams["addHooks"]>;
+
 export interface Attributes {
   /** convert task id */
   taskId: string;
-  /** base url of converted resources */
+  /** base url of converted resources, default `https://convertcdn.netless.link/dynamicConvert` */
   url: string;
   /** internal state of slide, do not change */
   state: SlideState | null;
 }
 
-export type MagixPayload = {
-  type: typeof SLIDE_EVENTS.syncDispatch;
-  payload: SyncEvent;
-};
-
-export type MagixEvents = {
-  [SLIDE_EVENTS.syncDispatch]: MagixPayload;
-};
+export interface MagixEvents {
+  [SLIDE_EVENTS.syncDispatch]: SyncEvent;
+}
 
-export interface A {}
+export interface AppOptions {
+  /** show debug controller */
+  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;
+}

package/src/utils.ts

@@ -0,0 +1,3 @@
+export function noop() {
+  return;
+}

package/dist/DocsViewer/index.d.ts

@@ -1,53 +0,0 @@
-import { SideEffectManager } from "side-effect-manager";
-export interface DocsViewerPage {
-    src: string;
-    height: number;
-    width: number;
-    thumbnail?: string;
-}
-export interface DocsViewerConfig {
-    readonly: boolean;
-    onNewPageIndex: (index: number) => void;
-    onPlay?: () => void;
-}
-export declare class DocsViewer {
-    constructor({ readonly, onNewPageIndex, onPlay }: DocsViewerConfig);
-    protected readonly: boolean;
-    protected onNewPageIndex: (index: number) => void;
-    protected onPlay?: () => void;
-    private _pages;
-    set pages(value: DocsViewerPage[]);
-    get pages(): DocsViewerPage[];
-    $content: HTMLElement;
-    $preview: HTMLElement;
-    $previewMask: HTMLElement;
-    $footer: HTMLElement;
-    $pageNumberInput: HTMLInputElement;
-    $totalPage: HTMLSpanElement;
-    $btnPlay: HTMLButtonElement;
-    $btnSidebar: HTMLButtonElement;
-    pageIndex: number;
-    unmount(): void;
-    setReadonly(readonly: boolean): void;
-    destroy(): void;
-    setPageIndex(pageIndex: number): void;
-    refreshTotalPage(): void;
-    setSmallBox(isSmallBox: boolean): void;
-    render(): HTMLElement;
-    protected renderContent(): HTMLElement;
-    private previewLazyLoad?;
-    protected renderPreview(): HTMLElement;
-    private refreshPreview;
-    protected renderPreviewMask(): HTMLElement;
-    setPaused: () => void;
-    setPlaying: () => void;
-    refreshBtnSidebar(): void;
-    protected renderFooter(): HTMLElement;
-    protected renderFooterBtn(className: string, $icon: SVGElement, $iconActive?: SVGElement): HTMLButtonElement;
-    protected togglePreview(isShowPreview?: boolean): void;
-    protected wrapClassName(className: string): string;
-    protected namespace: string;
-    protected isShowPreview: boolean;
-    protected isSmallBox: boolean;
-    protected sideEffect: SideEffectManager;
-}

package/dist/SlideController/helpers.d.ts

@@ -1,6 +0,0 @@
-import type { AppContext, Room } from "@netless/window-manager";
-import type { Slide } from "@netless/slide";
-import type { DocsViewerPage } from "../DocsViewer";
-import type { Attributes } from "../typings";
-export declare function createDocsViewerPages(slide: Slide): DocsViewerPage[];
-export declare function syncSceneWithSlide(room: Room, context: AppContext<Attributes>, slide: Slide, baseScenePath: string): void;

package/dist/SlideController/index.d.ts

@@ -1,60 +0,0 @@
-import type { AppContext } from "@netless/window-manager";
-import type { Attributes, MagixEvents } from "../typings";
-import type { AppOptions } from "..";
-import { Slide } from "@netless/slide";
-export { syncSceneWithSlide, createDocsViewerPages } from "./helpers";
-export declare const DefaultUrl = "https://convertcdn.netless.link/dynamicConvert";
-export declare const MaxPollCount = 40;
-export declare const EmptyAttributes: Attributes;
-export interface SlideControllerOptions {
-    context: AppContext<Attributes, MagixEvents, AppOptions>;
-    anchor: HTMLDivElement;
-    onPageChanged: (page: number) => void;
-    onTransitionStart: () => void;
-    onTransitionEnd: () => void;
-    onError: (args: {
-        error: Error;
-    }) => void;
-}
-export declare class SlideController {
-    readonly context: SlideControllerOptions["context"];
-    readonly slide: Slide;
-    private readonly room?;
-    private readonly player?;
-    private readonly sideEffect;
-    private readonly onPageChanged;
-    private readonly onTransitionStart;
-    private readonly onTransitionEnd;
-    private readonly onError;
-    private syncStateOnceFlag;
-    private visible;
-    private savedIsFrozen;
-    constructor({ context, anchor, onPageChanged, onTransitionStart, onTransitionEnd, onError, }: SlideControllerOptions);
-    ready: boolean;
-    private resolveReady;
-    readonly readyPromise: Promise<void>;
-    jumpToPage(page: number): void;
-    private initialize;
-    private kickStart;
-    private registerEventListeners;
-    private onSyncDispatch;
-    private magixEventListener;
-    private syncStateOnce;
-    private onStateChange;
-    private pollCount;
-    private pollReadyState;
-    private _pageCount;
-    get pageCount(): number;
-    get page(): number;
-    private createSlide;
-    private destroyed;
-    destroy(): void;
-    timestamp: () => number;
-    isFrozen: boolean;
-    private _toFreeze;
-    private freezePromise;
-    private afterFreeze;
-    freeze: () => void;
-    unfreeze: () => Promise<void>;
-    private onVisibilityChange;
-}

package/dist/SlideDocsViewer/index.d.ts

@@ -1,45 +0,0 @@
-import type { ReadonlyTeleBox, View } from "@netless/window-manager";
-import type { SlideController, SlideControllerOptions } from "../SlideController";
-import { SideEffectManager } from "side-effect-manager";
-import { DocsViewer } from "../DocsViewer";
-export declare const ClickThroughAppliances: Set<string>;
-export declare type MountSlideOptions = Omit<SlideControllerOptions, "context" | "onPageChanged"> & {
-    onReady: () => void;
-};
-export interface SlideDocsViewerConfig {
-    box: ReadonlyTeleBox;
-    view: View;
-    mountSlideController: (options: MountSlideOptions) => SlideController;
-    mountWhiteboard: (dom: HTMLDivElement) => void;
-}
-export declare class SlideDocsViewer {
-    viewer: DocsViewer;
-    slideController: SlideController | null;
-    protected readonly box: ReadonlyTeleBox;
-    protected readonly whiteboardView: SlideDocsViewerConfig["view"];
-    protected readonly mountSlideController: SlideDocsViewerConfig["mountSlideController"];
-    protected readonly mountWhiteboard: SlideDocsViewerConfig["mountWhiteboard"];
-    private isViewMounted;
-    constructor({ box, view, mountSlideController, mountWhiteboard }: SlideDocsViewerConfig);
-    $slide: HTMLDivElement;
-    $whiteboardView: HTMLDivElement;
-    render(): void;
-    protected renderSlideContainer(): HTMLDivElement;
-    protected renderWhiteboardView(): HTMLDivElement;
-    mount(): this;
-    protected onError: ({ error }: {
-        error: Error;
-    }) => void;
-    protected refreshPages: () => void;
-    protected getPageIndex(page: number): number;
-    unmount(): this;
-    setReadonly(readonly: boolean): void;
-    destroy(): void;
-    toggleClickThrough(tool?: string): void;
-    protected scaleDocsToFit: () => void;
-    protected onPlay: () => void;
-    protected onNewPageIndex: (index: number) => void;
-    protected sideEffect: SideEffectManager;
-    protected wrapClassName(className: string): string;
-    protected namespace: string;
-}

package/dist/SlidePreviewer/index.d.ts

@@ -1,52 +0,0 @@
-import { Slide } from "@netless/slide";
-import { DocsViewer } from "../DocsViewer";
-export interface PreviewParams {
-    container: HTMLElement;
-    taskId: string;
-    url?: string;
-    debug?: boolean;
-}
-export default function previewSlide({ container, taskId, url, debug, }: PreviewParams): SlidePreviewer;
-export declare class SlidePreviewer {
-    readonly viewer: DocsViewer;
-    readonly bgColor: string;
-    readonly target: HTMLElement;
-    slide: Slide | null;
-    debug: boolean;
-    $slide: HTMLDivElement;
-    private readonly sideEffect;
-    ready: boolean;
-    private resolveReady;
-    readonly readyPromise: Promise<void>;
-    constructor(config: {
-        target: HTMLElement;
-    });
-    render(): void;
-    /**
-     * In case you have a different window -- for example, in electron.
-     * Use this method to re-register hotkeys.
-     *
-     * @example
-     * previewer.registerHotKeys(windowLike)
-     */
-    registerHotKeys(windowLike: Window): void;
-    private hotkeyListener;
-    mount(taskId: string, url: string): void;
-    protected renderStyle(): HTMLElement;
-    protected registerEventListeners(): void;
-    protected onPageChanged: (page: number) => void;
-    protected onTransitionStart: () => void;
-    protected onTransitionEnd: () => void;
-    protected onError: ({ error }: {
-        error: Error;
-    }) => void;
-    private destroyed;
-    destroy(): void;
-    protected refreshPages: () => void;
-    protected getPageIndex(page: number): number;
-    protected renderSlideContainer(): HTMLDivElement;
-    protected onPlay: () => void;
-    protected onNewPageIndex: (index: number) => void;
-    protected wrapClassName(className: string): string;
-    protected namespace: string;
-}

package/dist/utils/bgcolor.d.ts

@@ -1,3 +0,0 @@
-export declare function guessBgColor(el: HTMLElement): string;
-export declare function toHex(color: string): string;
-export declare function cachedGetBgColor(el: HTMLElement): string;

package/dist/utils/freezer.d.ts

@@ -1,22 +0,0 @@
-import type { RegisterParams } from "@netless/window-manager";
-export interface FreezableSlide {
-    freeze: () => void;
-    unfreeze: () => void;
-}
-export declare let useFreezer: boolean;
-export declare const FreezerLength = 2;
-export declare const apps: {
-    map: Map<string, FreezableSlide>;
-    queue: string[];
-    validateQueue(): void;
-    set(appId: string, slide: FreezableSlide): void;
-    delete(appId: string): void;
-    focus(appId: string): void;
-};
-export declare type AddHooks = NonNullable<RegisterParams["addHooks"]>;
-/**
- * Put this function in your register code:
- * `WindowManager.register({ addHooks })`
- * So that it will automatically freeze the app when it is not in focus.
- */
-export declare const addHooks: AddHooks;

package/dist/utils/helpers.d.ts

@@ -1,6 +0,0 @@
-export declare function clamp(value: number, min: number, max: number): number;
-export declare function flattenEvent(ev: MouseEvent | TouchEvent): MouseEvent | Touch;
-export declare function preventEvent(ev: Event): void;
-export declare function isObj(obj: unknown): boolean;
-export declare function wait(ms: number): Promise<void>;
-export declare function deepClone<T>(obj: T): T;

package/dist/utils/logger.d.ts

@@ -1,39 +0,0 @@
-import type { AppContext, Displayer } from "@netless/window-manager";
-import type { SlideController } from "../SlideController";
-declare type DebugMessage = {
-    slide: boolean | "__instance" | "__debug";
-};
-declare type RoomLogger = {
-    debug: (...args: any) => void;
-    info: (...args: any) => void;
-    warn: (...args: any) => void;
-};
-declare class Logger {
-    enable: boolean;
-    apps: Record<string, {
-        context?: AppContext | null;
-        controller?: SlideController | null;
-    }>;
-    setAppContext(appId: string, context: AppContext | null): void;
-    setAppController(appId: string, controller: SlideController | null): void;
-    deleteApp(appId: string): void;
-    level: "debug" | "verbose";
-    roomLogger: RoomLogger | null;
-    constructor(enable: boolean);
-    initialize(): void;
-    dispose(): void;
-    log(...args: any[]): void;
-    verbose(...args: any[]): void;
-    warn(...args: any[]): void;
-    /**
-     * @example
-     * window.postMessage({ slide: '__debug' })
-     * window.dispatchEvent(new MessageEvent('message', { data: { slide: '__debug' } }))
-     */
-    _onMessage: (ev: MessageEvent<DebugMessage> | CustomEvent<DebugMessage>) => void;
-}
-export declare const logger: Logger;
-export declare const log: (...args: any[]) => void;
-export declare const verbose: (...args: any[]) => void;
-export declare const setRoomLogger: (displayer: Displayer) => void;
-export {};

package/src/DocsViewer/icons/arrow-left.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
-    <path
-        d="M177.81 249.959L337.473 90.295c2.722-2.865 2.651-7.378-.143-10.1-2.793-2.65-7.163-2.65-9.956 0l-164.75 164.75c-2.793 2.793-2.793 7.306 0 10.1l164.75 164.75c2.865 2.722 7.378 2.65 10.099-.143 2.651-2.794 2.651-7.163 0-9.957L177.809 249.959z" />
-</svg>

package/src/DocsViewer/icons/arrow-right.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
-    <path
-        d="M322.19 250.041L162.527 409.705c-2.722 2.865-2.651 7.378.143 10.1 2.793 2.65 7.163 2.65 9.956 0l164.75-164.75c2.793-2.793 2.793-7.306 0-10.1l-164.75-164.75c-2.865-2.722-7.378-2.65-10.099.143-2.651 2.794-2.651 7.163 0 9.957l159.664 159.736z" />
-</svg>

package/src/DocsViewer/icons/pause.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
-    <path fill="#1e201d"
-        d="M312.491 78.261c0-6.159 4.893-11.213 11.04-11.213 6.158 0 11.211 5.054 11.211 11.213v343.478c0 6.159-5.053 11.213-11.211 11.213-6.147 0-11.04-5.054-11.04-11.213V78.261zM165.257 78.261c0-6.159 4.893-11.213 11.04-11.213 6.158 0 11.211 5.054 11.211 11.213v343.478c0 6.159-5.053 11.213-11.211 11.213-6.147 0-11.04-5.054-11.04-11.213V78.261z" />
-</svg>

package/src/DocsViewer/icons/play.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
-    <path fill="#1e201d"
-        d="M418.158 257.419L174.663 413.33c-6.017 3.919-15.708 3.772-21.291-.29-2.791-2.018-4.295-4.483-4.295-7.084V94.109c0-5.65 6.883-10.289 15.271-10.289 4.298 0 8.391 1.307 11.181 3.332l242.629 155.484c6.016 3.917 6.451 10.292.649 14.491-.216.154-.432.154-.649.292zM170.621 391.288l223.116-141.301L170.71 107.753l-.089 283.535z" />
-</svg>

package/src/DocsViewer/icons/sidebar.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-    <path
-        d="M50 8H14c-3.309 0-6 2.691-6 6v36c0 3.309 2.691 6 6 6h36c3.309 0 6-2.691 6-6V14c0-3.309-2.691-6-6-6zM12 50V14c0-1.103.897-2 2-2h8v40h-8c-1.103 0-2-.897-2-2zm40 0c0 1.103-.897 2-2 2H26V12h24c1.103 0 2 .897 2 2z" />
-</svg>