@netless/ppt-plugindeprecated

> TODO: description

Usage no npm install needed!

<script type="module">
  import netlessPptPlugin from 'https://cdn.skypack.dev/@netless/ppt-plugin';
</script>

README

@netless/ppt-plugin

用于 white-web-sdk 的 ppt 播放插件.

与 white-web-sdk 内置播放器的差别

  1. @netless/ppt-plugin 会自动更新 netless-ppt.js 文件, 后者是 ppt 播放器的主要运行代码.
  2. @netless/ppt-plugin 附加了切页动画功能

用法

初始化

import { WhitePPTPlugin, Player } from "@netless/ppt-plugin";

const whiteWebSdk = new WhiteWebSdk({
    ..., // 其他配置
    // WhitePPTPlugin 负责操作 ppt
    invisiblePlugins: [WhitePPTPlugin],
    // Player 作为展示 ppt 的 react 组件, 将添加到白板下层
    wrappedComponents: [Player]
});

// 以下代码需在加入房间成功之后执行
let pptPlugin = room.getInvisiblePlugin(WhitePPTPlugin.kind) as WhitePPTPlugin;
if (!pptPlugin) {
    await room.createInvisiblePlugin(WhitePPTPlugin, {});
}
pptPlugin = room.getInvisiblePlugin(WhitePPTPlugin.kind) as WhitePPTPlugin;

// 初始化插件
pptPlugin.setupConfig({
    // ppt 资源 host
    assetsDomain: "https://convertcdn.netless.link",
    // white-web-sdk token
    sdkToken: netlessToken.sdkToken,
    loadConfig: {
        // ppt 资源前缀
        scheme: "https",
        // 是否启用后端排版
        useServerWrap: true,
    },
});

// 插件的报错, 可以在这里监听
WhitePPTPlugin.eventHub.on(WhitePPTPlugin.EVENTS.ERROR, e => console.log(e));

ppt 操作

  1. 发起 ppt 转换任务
// 返回任务的 taskId
const taskId = await pptPlugin.convertPPT({
    // ppt 源文件 url,
    url: "",
    // 转换进度回调, progress 为 0 - 100 的整数, 可选参数
    onProgressUpdated: (progress: number) => {},
    // 进度查询间隔, 单位 ms, 默认 500ms, 可选参数
    checkProgressInterval: 500,
    // 进度查询超时时间, 单位 ms, 如果查询时间超过超时限制, 则任务转换失败, 默认 15 分钟, 可选参数
    checkProgressTimeout: 60 * 1000 * 15,
    // 是否开启预览功能
    preview: false,
})
  1. 加载 ppt
// 通过 ppt 转换任务的 taksId 加载 ppt
// 只有加载完成后才可以调用 pptPlugin.gotoSlide
await pptPlugin.loadPPT(taskId: string);
  1. ppt 操作
// ppt 下一步
pptPlugin.nextStep();

// ppt 上一步
pptPlugin.prevStep();

// 切页, 页码从 0 开始
pptPlugin.gotoSlide(no: number);

// 判断当前场景是否由 pptPlugin 管理, 返回 boolean 值.
// 当前场景由 pptPlugin 管理, 意味着
// 1. 正在显示 ppt
// 2. pptPlugin 会自动同步 ppt 页面和房间场景
pptPlugin.isHandleCurrentScene();

关于 ppt 页面管理

初次加载

WhitePPTPlugin 内部已经处理了与 white-web-sdk 场景相关的逻辑. 具体行为是,

  1. 加载 ppt 成功
  2. 根据 ppt 的页数, 为当前 ppt 生成场景组, 有多少页就有多少场景

其中并不会自动显示 ppt 第一页所以, 在初次加载 ppt 完成后, 需要你手动切换到第一页 pptPlugin.gotoSlide(0).

加载完成

ppt 第一页显示成功后, 房间内的场景就与 ppt 的页码完全绑定了。你有两种方式切换到下一页(注意，是直接切换到下一页, 而不是下一步)

  1. 调用 white-web-sdk api, room.pptPreviousStep()
    在你使用 @netless/ppt-plugin 的情况下, white-web-sdk 已经不知道 ppt 的存在, 调用 pptPreviousStep 会直接场景到场景组中的下一个场景. 而后, @netless-ppt-plugin 监听到场景的变化, 会展示场景对应的 ppt 页面.

  2. 调用 @netless/ppt-plugin 提供的 pptPlugin.gotoSlide. gotoSlide 会展示相应页面, 同时将房间场景的 path 值设置为 ppt 页面对应的值.

房间内刷新

在房间内, 如果刷新页面。 @netless/ppt-plugin 会根据房间数据, 自动恢复到刷新之前的场景.