@netless/app-slide 0.2.39 → 0.2.40

package/src/DocsViewer/style.scss

@@ -1,228 +1,228 @@
-@import "./variables.scss";
-
-$namespace: $slide-namespace;
-
-.#{$namespace}-content {
-  position: relative;
-  height: 100%;
-  overflow: hidden;
-}
-
-.#{$namespace}-preview-mask {
-  display: none;
-  position: absolute;
-  z-index: 200;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.#{$namespace}-preview {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: absolute;
-  z-index: 300;
-  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);
-
-  &:hover,
-  &:focus,
-  &:active {
-    background: #fff;
-    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-  }
-}
-
-.#{$namespace}-readonly {
-  &.#{$namespace}-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);
-  }
-}
+@import "./variables.scss";
+
+$namespace: $slide-namespace;
+
+.#{$namespace}-content {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+
+.#{$namespace}-preview-mask {
+  display: none;
+  position: absolute;
+  z-index: 200;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.#{$namespace}-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  z-index: 300;
+  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);
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: #fff;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  }
+}
+
+.#{$namespace}-readonly {
+  &.#{$namespace}-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/DocsViewer/variables.scss

@@ -1 +1 @@
-$slide-namespace: "netless-app-slide";
+$slide-namespace: "netless-app-slide";

package/src/SlideController/helpers.ts

@@ -1,48 +1,48 @@
-import type { AppContext, Room } from "@netless/window-manager";
-import type { ScenePathType } from "white-web-sdk";
-import type { Slide } from "@netless/slide";
-import type { DocsViewerPage } from "../DocsViewer";
-import type { Attributes } from "../typings";
-
-export function createDocsViewerPages(slide: Slide): DocsViewerPage[] {
-  const { width, height, slideCount, slideState } = slide;
-  const { taskId, url } = slideState;
-  const pages: DocsViewerPage[] = [];
-  for (let i = 1; i <= slideCount; ++i) {
-    pages.push({ width, height, thumbnail: `${url}/${taskId}/preview/${i}.png`, src: "ppt" });
-  }
-  return pages;
-}
-
-// because `renderSlide()` is slow, but switching between scenes in whiteboard is fast
-// so here we make scenes sync with slide page
-export function syncSceneWithSlide(
-  room: Room,
-  context: AppContext<Attributes>,
-  slide: Slide,
-  baseScenePath: string
-) {
-  const page = slide.slideState.currentSlideIndex;
-  if (!(page > 0) || !context.getIsWritable()) return;
-
-  const scenePath = [baseScenePath, page].join("/");
-
-  if (room.scenePathType(scenePath) !== ("page" as ScenePathType.Page)) {
-    room.removeScenes(baseScenePath);
-    const count = slide.slideCount;
-    const scenes: { name: string }[] = [];
-    for (let i = 1; i <= count; ++i) scenes.push({ name: `${i}` });
-    room.putScenes(baseScenePath, scenes);
-  }
-
-  let currentScenePath: string;
-  if (context.getBox().focus) {
-    currentScenePath = room.state.sceneState.scenePath;
-  } else {
-    currentScenePath = context.getView()?.focusScenePath || "";
-  }
-
-  if (currentScenePath !== scenePath) {
-    context.setScenePath(scenePath);
-  }
-}
+import type { AppContext, Room } from "@netless/window-manager";
+import type { ScenePathType } from "white-web-sdk";
+import type { Slide } from "@netless/slide";
+import type { DocsViewerPage } from "../DocsViewer";
+import type { Attributes } from "../typings";
+
+export function createDocsViewerPages(slide: Slide): DocsViewerPage[] {
+  const { width, height, slideCount, slideState } = slide;
+  const { taskId, url } = slideState;
+  const pages: DocsViewerPage[] = [];
+  for (let i = 1; i <= slideCount; ++i) {
+    pages.push({ width, height, thumbnail: `${url}/${taskId}/preview/${i}.png`, src: "ppt" });
+  }
+  return pages;
+}
+
+// because `renderSlide()` is slow, but switching between scenes in whiteboard is fast
+// so here we make scenes sync with slide page
+export function syncSceneWithSlide(
+  room: Room,
+  context: AppContext<Attributes>,
+  slide: Slide,
+  baseScenePath: string
+) {
+  const page = slide.slideState.currentSlideIndex;
+  if (!(page > 0) || !context.getIsWritable()) return;
+
+  const scenePath = [baseScenePath, page].join("/");
+
+  if (room.scenePathType(scenePath) !== ("page" as ScenePathType.Page)) {
+    room.removeScenes(baseScenePath);
+    const count = slide.slideCount;
+    const scenes: { name: string }[] = [];
+    for (let i = 1; i <= count; ++i) scenes.push({ name: `${i}` });
+    room.putScenes(baseScenePath, scenes);
+  }
+
+  let currentScenePath: string;
+  if (context.getBox().focus) {
+    currentScenePath = room.state.sceneState.scenePath;
+  } else {
+    currentScenePath = context.getView()?.focusScenePath || "";
+  }
+
+  if (currentScenePath !== scenePath) {
+    context.setScenePath(scenePath);
+  }
+}