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

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,25 @@ $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%;
+  padding: 10px;
+  box-sizing: border-box;
+  background: rgba(255, 0, 0, 0.25);
+  transition: opacity 0.3s;
+  opacity: 0;
+  pointer-events: none;
 }
 
 .#{$namespace}-footer {
@@ -98,7 +126,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 +155,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 +200,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,22 +216,24 @@ $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;
   font-weight: normal;
-  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;
   }
@@ -233,18 +268,18 @@ $namespace: "netless-app-slide";
   }
 }
 
+.#{$namespace}-wb-view-hidden {
+  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;
+    color: currentColor;
+    background: #25282e;
   }
   .#{$namespace}-footer {
-    color: #a6a6a8;
-    background: #2d2d33;
     border-top: none;
   }
   .#{$namespace}-footer-btn:hover {
@@ -254,3 +289,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,21 @@ export interface MagixEvents {
   [SLIDE_EVENTS.syncDispatch]: SyncEvent;
 }
 
-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;
+export interface AppOptions
+  extends Pick<
+    ISlideConfig,
+    | "renderOptions"
+    | "rtcAudio"
+    | "useLocalCache"
+    | "resourceTimeout"
+    | "loaderDelegate"
+    | "navigatorDelegate"
+    | "fixedFrameSize"
+    | "logger"
+  > {}
+
+export interface ILogger {
+  info?(msg: string): void;
+  error?(msg: string): void;
+  warn?(msg: string): void;
 }

package/src/utils.ts

@@ -1,3 +1,93 @@
+import type { AppContext, Player } from "@netless/window-manager";
+
+import ColorString from "color-string";
+import { class_name } from "./constants";
+
 export function noop() {
   return;
 }
+
+export function h<K extends keyof HTMLElementTagNameMap>(tag: K) {
+  return document.createElement(tag);
+}
+
+export function hc<K extends keyof HTMLElementTagNameMap>(tag: K, name: string) {
+  const el = h(tag);
+  set_class(el, name);
+  return el;
+}
+
+export function append(parent: HTMLElement, child: HTMLElement) {
+  return parent.appendChild(child);
+}
+
+export function wrap_class(name: string) {
+  return `${class_name}-${name}`;
+}
+
+export function set_class(el: HTMLElement, name: string) {
+  el.className = wrap_class(name);
+}
+
+export function trim_slash(s: string) {
+  return s.endsWith("/") ? s.slice(0, -1) : s;
+}
+
+export function get(o: unknown, k: string): unknown {
+  if (typeof o === "object" && o !== null) return (o as Record<string, unknown>)[k];
+}
+
+export function block<T = void>(): [p: Promise<T>, resolve: (t: T) => void] {
+  let resolve!: (t: T) => void;
+  const p = new Promise<T>(r => {
+    resolve = r;
+  });
+  return [p, resolve];
+}
+
+export function make_timestamp(context: AppContext): () => number {
+  const room = context.room;
+  const player = context.displayer as Player;
+  if (room) {
+    return () => room.calibrationTimestamp;
+  } else if (player) {
+    return () => player.beginTimestamp + player.progressTime;
+  } else {
+    return () => Date.now();
+  }
+}
+
+export function make_bg_color(el: HTMLElement): string {
+  try {
+    let bg = window.getComputedStyle(el).backgroundColor;
+    if (bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+      bg = hex(bg);
+      console.log("[Slide] guess bg color:", bg);
+      return bg;
+    }
+    if (el.parentElement) {
+      return make_bg_color(el.parentElement);
+    }
+  } catch {
+    // ignored
+  }
+  return "#ffffff";
+}
+
+// https://github.com/Qix-/color-convert/blob/8dfdbbc6b46fa6a305bf394d942cc1b08e23fca5/conversions.js#L616
+export function hex(color: string): string {
+  const result = ColorString.get(color);
+  if (result && result.model === "rgb") {
+    const args = result.value;
+
+    const integer =
+      ((Math.round(args[0]) & 0xff) << 16) +
+      ((Math.round(args[1]) & 0xff) << 8) +
+      (Math.round(args[2]) & 0xff);
+
+    const string = integer.toString(16);
+    return "#" + "000000".substring(string.length) + string;
+  } else {
+    return color;
+  }
+}