工作室-组件-嵌入式编码-模式

使用量

要建设

npm run build

发展

要运行此模块用于开发克隆 Repo 并运行

npm install
npm run demo

以 Studio UI( Marketing Studio) 启用的账户签名到 Studio 。 如有必要,点击配置文件图标,然后切换到 Studio 链接.

导航到 https://studio.brightcove.com/出品/videocloud/media/dev/sdk:remote。 。 。 .

App 运行于 https://localhost.brightcove.com:12345/js/app.js (中文(简体) ) 说明 创建模块

API调取玩家的结果将取决于权限中的签名.

与模块结合

本部分是为营销工作室模块而建,例如: 工作室-媒体-单元-四。 。 。 .

下面将找到如何使用这些模块内部组件的指令 .

安装软件包

npm i @brightcove/components-embed-code-modal

导入组件和所需类型

import {
  EmbedCodeModal,
  VideoPayload,
} from '@brightcove/components-embed-code-modal';

VideoPayload 是一个 TypeScript 接口,它描述一个对象,它将被接受为您的道具 <EmbedCodeModal> 组件.

本文概述 VideoPayload 接口 :

  videoId: string; // Video id, required
  videoName: string; // Video title, required
  accountId: string; // BC account id, required
  posterUrl?: string; // Video poster url, not required
  duration: number; // Video duration in seconds, required

组件道具

该部分目前采用两种道具:

  language?: 'en' | 'es' | 'fr' | 'ko' | 'ja' | 'zh';
  video: VideoPayload;

• 这个 VideoPayload 界面由组件导出.
• 这个 language 道具是可选的,如果不通过,组件将获得语言 StudioModule.config.lang目前,我们在本地沙盒里用它做测试.

通过模块连接

模式只有在 video 道具已经传入 EmbedCodeModal 组件.

为了使我们的组件完全脱钩, 我们期待我们的母模块 连接我们的组件.

以下是一个实例,说明媒体模块的VideoLibrary如何将两个独立的组件接上来打开EmbedCode Modal:

const [embedVideo, setEmbedVideo] = useState<VideoPayload>(null);

const handleAction = (event: DataGridAction) => {
  if (event.type === DataGridEvents.GetCode) {
    // build VideoPayload for EmbedCodeModal component here
    // this way we are completely de-coupling the EmbedCodeModal from the module
    const { payload: video } = event;
    setEmbedVideo({
      videoId: video.id,
      videoName: video.name,
      accountId: video.account_id,
      posterUrl: video?.images?.poster?.src,
      duration: video.duration,
    });
  }
};

1. 媒体单元导入 DataGrid 打开 EmbedCodeModal 组件。 两个组件都没有编码来识别另一个组件.
2. 这个 DataGrid 组件发送 GetCode 动作告诉其母模块: 我想找一些代码,去做,不管你的模块处理这个动作。 。 。 .
3. Media模块通过使用DataGrid传送的视频信息创建出新的有效载荷来处理这一动作. 它知道它想要打开EmbedCode Modal, 所以它会看着 VideoPayload 接口来创建它所需要的.
4. 此视频对象设定为模块的本地状态.
5. 我们的EmbedCode Modal应该将这段视频内容传递给部分: <EmbedCodeModal video={embedVideo} />
6. 无论何时 embedVideo 模块中的更新 - 它触发了嵌入码 Modal 打开.

我们用这种方式连接东西的原因 是为了实现我们的目标 保持微前端脱钩。 EmbedCode Modal & DataGrid 互不直接互动 。 DataGrid提供正在使用的视频数据,但当它触发时 Get Code 事件,它可以随同发送整个视频对象。 它不需要知道Embed Code Modal为了成功操作需要什么确切的信息.

同样地,嵌入码Modal也可能被任何其他数量的接口所触发,而这种抽象帮助我们更好地为未来的融合做准备.

SPA 条目@brightcove/components-embed-code-modal/spa(中文(简体) )

Studio SPA 文档装入无模块核心, 所以 window.StudioModule 没有 已经存在。 这个 ./spa 输入会暴露LIVE和Project的表面,并带走 调用者而不是全局的每个能力:

import {
  SpaEmbedCodeModal,
  EmbedCodeModalTypes,
} from '@brightcove/components-embed-code-modal/spa';
import type {
  LivePayload,
  EmbedCodeModalRuntime,
} from '@brightcove/components-embed-code-modal/spa';

<SpaEmbedCodeModal
  data={livePayload}
  embedCodeModalType={EmbedCodeModalTypes.LIVE}
  runtime={{
    api: {
      config: { publisherId, api }, // the module API config
      execute: (descriptor, options) => studioApiCall(descriptor, options),
    },
    environment, // session.product.env — decides the player origins
    locale, // seeds the package-private i18next instance
    favoritePlayerId, // optional; absent falls back to 'default'
    onNotify, // optional; { variant, title?, message }
    shortenUrl, // cookie-authenticated /shortener/shorten adapter
  }}
/>;

PROJECT表面使遗留项目嵌入模式(蓝钢) 演示文稿,而非棱镜-核心),并需要相同的运行时间加3个 能力:

<SpaEmbedCodeModal
  embedCodeModalType={EmbedCodeModalTypes.PROJECT}
  data={projectPayload}
  runtime={{
    api, // as above
    environment,
    locale,
    favoritePlayerId,
    shortenUrl,
    hasPublishingRole, // getCurrentUserAccount().roles includes PUBLISHING
    playersModuleUrl, // e.g. `${product.path}/players`
    onNotify, // required: creation failures and copy feedback
  }}
/>;

PROJECT 挂载会让玩家自己接来,只给玩家提供 主分支配置带有交互插件。 当没有人知道时, 它显示创建- 播放器的流量, 如果 hasPublishingRole 设定,和 激活复制链接到 playersModuleUrl 否则。 创建员额 交互播放器并重写列表,它从未发布.

SpaEmbedCodeModal 接受 SpaEmbedCodeModalEntryProps生命的结合 和项目道具. SpaEmbedCodeModalProps 仍为LIVE道具,所以 现有 Omit<SpaEmbedCodeModalProps, 'runtime'> 保存每个活键 : Omit 工会倒闭 会员分享的钥匙.

该条目拥有什么和它没有:

• 拥有 玩家查询( 每架响应- query v3 客户端与后传) retry: 3 编号 : staleTime: 0 语义学),i18next例(6个目录, 登记在 embed-code-modal 名称空间)和 CSS( 范围) 下级 .embed-code-modal 在建设时间.
• 从不 读取 window.StudioModule, (中文(简体) ), window.brightcove默认值 i18next singleton,或外壳的查询客户端. 两个挂起的例子 不同的运行时间不能共享配置,玩家或回调.
• 遗产 EmbedCodeModal 导出没有变化, 仍然读 Studio 文档。 这两个条目是单独的网页包输出(build/index.js 财务报告和审定财务报表 spa.js),所以只保留遗留模块在SPA文件中缺失,而不是 只是没用. npm run build 如果这种隔离倒退,则失败。 项目 平面通过传统根来分享其演示文稿 ProjectModalView,以及 @brightcove/studio-components 最高人民会议要求 捆绑而不是被禁:它已经是一个外部对等点,所以它没有添加字节.

spa.js, (中文(简体) ), spa.js.map 财务报告和审定财务报表 build/ 产出 npm run build 并运入已公布的软件包.

data 必须是稳定的引用: 新对象重开模式, 所以内置 每个渲染物上的对象字面文字使封闭模式立即重新打开.

同伴依赖说明

SPA 条目保留 react-query v3 在运行时间( 每名客户端), 即 为什么 react-query 仍然是这个一揽子方案的同伴依赖关系,如同对 传统条目。 消费者 ./spa 一定是因为 react-query@^3.38.0 已安装.