@cloud-app-dev/vidc 4.0.20 → 4.0.22

package/es/ScreenPlayer/index.less

@@ -0,0 +1,335 @@
+.split-screen-player-wrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  user-select: none;
+  min-width: 600px;
+
+  .player-layout {
+    height: calc(100% - 88px);
+
+    .player-with-ext-layout {
+      display: flex;
+
+      .lm-player-ext-layout {
+        border: 1px solid var(--gray12);
+        box-sizing: border-box;
+      }
+
+      &.player-current-index {
+        .lm-player-ext-layout {
+          border: 1px solid var(--primary);
+        }
+      }
+    }
+  }
+
+  &.split-screen-player-live-wrapper {
+    .player-layout {
+      height: calc(100% - 42px);
+    }
+  }
+
+  .player-tools-group {
+    position: relative;
+    height: 88px;
+  }
+
+  .player-record-time {
+    padding: 0 16px;
+    margin: 0 20px;
+    font-size: 16px;
+    line-height: 42px;
+    color: var(--gray1);
+    text-align: center;
+    background-color: var(--gray11);
+  }
+
+  .icon-chajian {
+    position: relative;
+    top: 1px;
+    left: 1px;
+    font-size: 22px !important;
+  }
+
+  .player-tools {
+    position: relative;
+    display: flex;
+    height: 42px;
+    padding: 0 10px;
+    background-color: #242c3d;
+    align-items: center;
+    justify-content: space-between;
+
+    .player-tools-left,
+    .player-tools-right {
+      display: grid;
+      width: 35%;
+      grid-template-columns: repeat(auto-fill, 32px);
+      grid-gap: 10px;
+    }
+
+    .player-tools-right {
+      display: flex;
+      justify-content: flex-end;
+      margin-right: 0;
+      margin-left: 4px;
+    }
+
+    .player-tools-mid {
+      display: flex;
+      align-items: center;
+      justify-self: center;
+      height: 100%;
+    }
+
+    .player-tools-item {
+      display: flex;
+      width: 32px;
+      height: 32px;
+      margin: 0;
+      font-size: 18px;
+      color: var(--gray1);
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+
+      .lm-player-iconfont {
+        font-size: 20px;
+      }
+
+      &:hover {
+        background-color: var(--gray11);
+        border-radius: var(--radius1);
+      }
+    }
+
+    .select-current-screen-item {
+      display: flex;
+      width: 32px;
+      height: 32px;
+      font-size: 18px;
+      color: var(--gray1);
+      text-align: center;
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+
+      .lm-player-iconfont {
+        font-size: 20px;
+      }
+
+      &:hover {
+        background-color: var(--gray11);
+        border-radius: var(--radius1);
+      }
+    }
+  }
+
+  // 录像
+  &.split-screen-player-wrapper-record {
+    .record-time-line {
+      position: relative;
+      width: 100%;
+      height: 46px;
+
+      canvas {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        background-color: #030917;
+      }
+
+      .time-line-mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 5;
+        width: 100%;
+        height: 100%;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .ant-popover-inner-content {
+    padding: 4px 0;
+
+    .ant-select-item-option:hover {
+      background-color: var(--form-bg-dark);
+    }
+  }
+
+  /* ------------------------1分屏---------------------- */
+  .container1 {
+    display: grid;
+    grid-template-columns: repeat(1, 100%);
+    grid-template-rows: repeat(1, 100%);
+    grid-auto-flow: row dense; //排列顺序先行后列 紧密排列
+    place-content: center;
+  }
+
+  /* ------------------------4分屏---------------------- */
+  .container4 {
+    display: grid;
+    grid-template-columns: repeat(2, 50%);
+    grid-template-rows: repeat(2, 50%);
+    grid-auto-flow: row dense; //排列顺序先行后列 紧密排列
+    place-content: center;
+  }
+
+  /* ------------------------6分屏---------------------- */
+  .container6 {
+    display: grid;
+    grid-template-columns: repeat(3, 33.3333%);
+    grid-template-rows: repeat(2, 50%);
+    grid-auto-flow: row dense; //排列顺序先行后列 紧密排列
+    place-content: center;
+  }
+
+  /* -----------------------8分屏---------------------- */
+  .container8 {
+    display: grid;
+    grid-template-columns: repeat(24, 4.1667%);
+    grid-template-rows: repeat(24, 4.1667%);
+    grid-auto-flow: row dense; //排列顺序先行后列 紧密排列
+    place-content: center;
+  }
+
+  .item8-1 {
+    grid-column: 1 / 11;
+    grid-row: 1 / 13;
+  }
+
+  .item8-2 {
+    grid-column: 11 / 18;
+    grid-row: 1 / 9;
+  }
+
+  .item8-3 {
+    grid-column: 18 / 25;
+    grid-row: 1 / 9;
+  }
+
+  .item8-4 {
+    grid-column: 11 / 18;
+    grid-row: 9 / 17;
+  }
+
+  .item8-5 {
+    grid-column: 18 / 25;
+    grid-row: 9 / 17;
+  }
+
+  .item8-6 {
+    grid-column: 1 / 11;
+    grid-row: 13 / 25;
+  }
+
+  .item8-7 {
+    grid-column: 11 / 18;
+    grid-row: 17 / 25;
+  }
+
+  .item8-8 {
+    grid-column: 18 / 25;
+    grid-row: 17 / 25;
+  }
+
+  /* ------------------------9分屏---------------------- */
+  .container9 {
+    display: grid;
+    grid-template-columns: repeat(3, 33.3333%);
+    grid-template-rows: repeat(3, 33.3333%);
+    grid-auto-flow: row dense; //排列顺序先行后列 紧密排列
+    place-content: center;
+  }
+
+  /* ------------------------10分屏---------------------- */
+
+  .container10 {
+    display: grid;
+    grid-template-columns: repeat(4, 25%);
+    grid-template-rows: repeat(4, 25%);
+    grid-auto-flow: row dense; //排列顺序先行后列 紧密排列
+    place-content: center;
+  }
+
+  .item10-1 {
+    grid-column: 1 / 3;
+    grid-row: 1 / 3;
+  }
+
+  .item10-2 {
+    grid-column: 3 / 5;
+    grid-row: 1 / 3;
+  }
+
+  /* ------------------------13分屏---------------------- */
+
+  .container13 {
+    display: grid;
+    grid-template-columns: repeat(4, 25%);
+    grid-template-rows: repeat(4, 25%);
+    grid-auto-flow: row dense; //排列顺序先行后列 紧密排列
+    place-content: center;
+  }
+
+  .item13-1 {
+    grid-column: 1 / 3;
+    grid-row: 1 / 3;
+  }
+
+  /* ------------------------16分屏---------------------- */
+  .container16 {
+    display: grid;
+    grid-template-columns: repeat(4, 25%);
+    grid-template-rows: repeat(4, 25%);
+    grid-auto-flow: row dense; //排列顺序先行后列 紧密排列
+    place-content: center;
+  }
+}
+
+.player-time-select {
+  display: flex;
+  width: 190px;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.@{ant-prefix}-select.time-mode-select {
+  font-size: var(--fs-small);
+  color: var(--gray1);
+
+  .cloudapp-select-selector {
+    background-color: transparent !important;
+    border-radius: var(--radius1) !important;
+  }
+
+  .anticon {
+    color: var(--gray1);
+  }
+}
+
+.custom-select-dropdown {
+  font-size: var(--fs-small);
+
+  .cloudapp-select-item {
+    font-size: var(--fs-small);
+  }
+}
+
+.select-current-rate-item {
+  position: relative;
+  top: 4px;
+  display: inline-block;
+  width: 64px;
+  padding: 2px 0;
+  font-size: 12px;
+  color: var(--gray1);
+  text-align: center;
+  cursor: pointer;
+  border: 1px solid var(--gray1);
+  border-radius: 2px;
+}

package/es/ScreenPlayer/interface.d.ts

@@ -0,0 +1,216 @@
+import type React from 'react';
+import type { ExportPlayerType, ISegmentType } from '../Player/player';
+import type { PlayModeType } from '../PlayerExt';
+
+export type RecordItem = {
+  type?: 'flv' | 'hls' | 'native';
+  date?: number; //视频窗口日期
+  endDate?: number;
+  cid?: string;
+  segments?: ISegmentType[];
+  url?: string;
+  recordType?: 1 | 2; //1云录像 2前端录像
+  mode?: PlayModeType;
+  loading?: boolean; // 录像获取状态
+};
+
+export interface IRecordPlayerProps {
+  /**
+   * 播放对象
+   */
+  list?: RecordItem[];
+  children?: JSX.Element;
+
+  /**
+   * 窗口索引变化，后续基于索引传入播放必要数据
+   */
+  onIndexChange?: (idx: number) => void;
+
+  /**
+   * 关闭单个窗口
+   */
+  onClose?: () => void;
+
+  /**
+   * 关闭所有窗口
+   */
+  onCloseAll?: () => void;
+  /**
+   * 录像下载回调
+   */
+  download?: (segments: ISegmentType[]) => void;
+
+  /**
+   * 截图
+   */
+  snapshot?: (base64: string) => void;
+
+  /**
+   * 窗口变化
+   */
+  screenChange?: (num: number) => void;
+
+  /**
+   * 默认窗口数量
+   */
+  defaultScreen?: 1 | 4 | 6 | 9 | 16;
+
+  /**
+   * 窗口数量，若有值数量将由外部控制
+   */
+  screenNum?: 1 | 4 | 6 | 9 | 16;
+
+  /**
+   * 默认选中窗口
+   * @default 0
+   */
+  defaultSelectIndex?: number;
+  /**
+   * 单窗口拓展工具条,左侧
+   */
+  oneWinExtTools?: JSX.Element;
+
+  /**
+   * 全局窗口工具条，右侧
+   */
+  allWinExtTools?: JSX.Element;
+
+  fpsDelay?: number;
+  fps?: number;
+
+  /**
+   * 自定义合成前端录像
+   */
+  getLocalRecordUrl?: (options: { url: URL; begin: number; end: number; screenIndex: number }) => Promise<string>;
+
+  /**
+   * 插件下载地址
+   */
+  pluginDownloadUrl?: string;
+
+  /**
+   * 轴发生变化
+   */
+  onTimeLineChange?: (time: number) => void;
+
+  /**
+   * 用户控制seek频率
+   */
+  seekLoading?: boolean;
+
+  /**
+   * 控制播放倍数数组
+   */
+  multipleList?: number[];
+}
+
+export interface IRecordPlayerState {
+  /**
+   * 窗口数量
+   */
+  screenNum: number;
+
+  /**
+   * 当前窗口索引
+   */
+  selectIndex: number;
+
+  /**
+   * 插件OR浏览器
+   */
+  modes: { [key: string]: PlayModeType };
+
+  /**
+   * 时间轴开始时间
+   */
+  currentTimes: { [key: string]: number };
+
+  /**
+   *
+   */
+  begins: { [key: string]: number };
+
+  /**
+   * 需要seek的时间针对当前窗口，为0时忽略
+   */
+  seekTo?: { [key: string]: number };
+
+  /**
+   * 录像时间轴单页绘制时长单位（hour）
+   */
+  timeMode: number;
+}
+
+export type ScreenItemLivePlayerType = {
+  url?: string;
+  type?: 'flv' | 'hls' | 'native';
+  mode?: PlayModeType;
+  cid?: string;
+};
+
+export interface ILivePlayerProps {
+  list?: ScreenItemLivePlayerType[];
+  children?: JSX.Element;
+
+  /**
+   * 关闭单个窗口
+   */
+  onClose?: () => void;
+
+  /**
+   * 关闭所有窗口
+   */
+  onCloseAll?: () => void;
+  /**
+   * 窗口索引变化，后续基于索引传入播放必要数据
+   */
+  onIndexChange?: (idx: number) => void;
+
+  /**
+   * 截图
+   */
+  snapshot?: (base64: string) => void;
+
+  /**
+   * 窗口变化
+   */
+  screenChange?: (num: number) => void;
+
+  /**
+   * 默认窗口数量
+   */
+  defaultScreen?: 1 | 4 | 6 | 9 | 16;
+
+  /**
+   * 窗口数量，若有值由外部来完全控制
+   */
+  screenNum?: 1 | 4 | 6 | 9 | 16;
+
+  /**
+   * 默认选中窗口
+   * @default 0
+   */
+  defaultSelectIndex?: number;
+
+  /**
+   * 单窗口拓展工具条,左侧
+   */
+  oneWinExtTools?: JSX.Element;
+
+  /**
+   * 全局窗口工具条，右侧
+   */
+  allWinExtTools?: JSX.Element;
+
+  pluginDownloadUrl?: string;
+}
+
+export interface ILivePlayerState {
+  screenNum: number;
+  selectIndex: number;
+  modes: { [key: string]: PlayModeType };
+}
+
+export const RecordPlayer: React.FC<IRecordPlayerProps>;
+
+export type PlayItemMapType = { [key: string]: React.MutableRefObject<ExportPlayerType> };