@cloud-app-dev/vidc 3.0.33 → 3.0.35

package/es/CustomRenderSelect/index.d.ts

@@ -5,6 +5,8 @@ interface ICustomRenderSelectProps extends SelectProps {
     children?: React.ReactNode;
     value: any;
     customRender: (value: any) => JSX.Element;
+    onChange: (value: any) => void;
+    selectAotoClose?: boolean;
 }
-declare function CustomRenderSelect({ children, value, customRender, popupClassName, getPopupContainer, ...props }: ICustomRenderSelectProps): JSX.Element;
+declare function CustomRenderSelect({ children, value, customRender, popupClassName, getPopupContainer, onChange, selectAotoClose, ...props }: ICustomRenderSelectProps): JSX.Element;
 export default CustomRenderSelect;

package/es/CustomRenderSelect/index.js

@@ -26,7 +26,10 @@ function CustomRenderSelect(_a) {
       customRender = _a.customRender,
       popupClassName = _a.popupClassName,
       getPopupContainer = _a.getPopupContainer,
-      props = __rest(_a, ["children", "value", "customRender", "popupClassName", "getPopupContainer"]);
+      onChange = _a.onChange,
+      _a$selectAotoClose = _a.selectAotoClose,
+      selectAotoClose = _a$selectAotoClose === void 0 ? true : _a$selectAotoClose,
+      props = __rest(_a, ["children", "value", "customRender", "popupClassName", "getPopupContainer", "onChange", "selectAotoClose"]);
 
   var classname = useMemo(function () {
     return "custom-render-select-dropdown-".concat(_uuid());
@@ -52,6 +55,14 @@ function CustomRenderSelect(_a) {
     return set(false);
   }, getDoms, ['click']);
 
+  var onSelectChange = function onSelectChange(v) {
+    onChange && onChange(v);
+
+    if (selectAotoClose) {
+      set(false);
+    }
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: "custom-render-select",
     ref: domRef
@@ -61,7 +72,8 @@ function CustomRenderSelect(_a) {
     getPopupContainer: getPopupContainer ? getPopupContainer : function () {
       return domRef.current.parentElement.parentElement;
     },
-    open: open
+    open: open,
+    onChange: onSelectChange
   }), children), /*#__PURE__*/React.createElement("div", {
     className: "custom-render-box",
     onClick: toggle

package/es/DisableMark/index.js

@@ -4,7 +4,13 @@ export default function DisableMark(_ref) {
   var children = _ref.children,
       disabled = _ref.disabled,
       width = _ref.width;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, disabled ? /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      height: 'max-content',
+      position: 'relative'
+    }
+  }, disabled ? /*#__PURE__*/React.createElement("div", {
     className: "disable-mark",
     style: {
       width: width

package/es/Player/util.d.ts

@@ -20,7 +20,7 @@ export declare const playUnload: (video: HTMLVideoElement, flv?: Flvjs.Player, h
  * 获取播放文件类型
  * @param {*} url
  */
-export declare function getVideoType(url: string): "flv" | "native" | "m3u8";
+export declare function getVideoType(url: string): "flv" | "native" | "hls";
 export declare function timeStamp(second: number): string;
 export declare function getRandom(): string;
 export declare function tryCatch(fn: () => void | Promise<any>): Promise<void>;

package/es/Player/util.js

@@ -110,7 +110,7 @@ export function getVideoType(url) {
     return 'native';
   }
 
-  return url.indexOf('.flv') > -1 ? 'flv' : url.indexOf('.m3u8') > -1 ? 'm3u8' : 'native';
+  return url.indexOf('.flv') > -1 ? 'flv' : url.indexOf('.m3u8') > -1 ? 'hls' : 'native';
 }
 export function timeStamp(second) {
   // 转换为式分秒

package/es/ScreenPlayer/RatePick.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface IRatePick {
+    onChange: (rate: number) => void;
+}
+declare function RatePick({ onChange }: IRatePick): JSX.Element;
+export default RatePick;

package/es/ScreenPlayer/RatePick.js

@@ -0,0 +1,59 @@
+import "antd/lib/select/style";
+import _Select from "antd/lib/select";
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useState } from 'react';
+import CustomRenderSelect from '../CustomRenderSelect';
+
+function RatePick(_ref) {
+  var onChange = _ref.onChange;
+
+  var _useState = useState({
+    rate: 1
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  _useUpdateEffect(function () {
+    return onChange(state.rate);
+  }, []);
+
+  return /*#__PURE__*/React.createElement(CustomRenderSelect, {
+    value: state.rate,
+    popupClassName: "rate-select-dropdown ",
+    customRender: function customRender() {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "select-current-rate-item"
+      }, "\u500D\u901F x".concat(state.rate));
+    },
+    onChange: function onChange(v) {
+      return setState({
+        rate: v
+      });
+    },
+    placement: "topLeft"
+  }, /*#__PURE__*/React.createElement(_Select.Option, {
+    value: 2
+  }, "x2"), /*#__PURE__*/React.createElement(_Select.Option, {
+    value: 1.5
+  }, "x1.5"), /*#__PURE__*/React.createElement(_Select.Option, {
+    value: 1
+  }, "x1"), /*#__PURE__*/React.createElement(_Select.Option, {
+    value: 0.5
+  }, "x0.5"));
+}
+
+export default RatePick;

package/es/ScreenPlayer/RecordTools.js

@@ -22,6 +22,7 @@ import TimeSelect from './TimeSelect';
 import TimeMode from './TimeMode';
 import useFullscreen from '../useFullscreen';
 import Volume from '../Player/contraller_bar/volume';
+import RatePick from './RatePick';
 
 function RecordTools(_ref) {
   var containerRef = _ref.containerRef,
@@ -73,6 +74,11 @@ function RecordTools(_ref) {
     snapshot === null || snapshot === void 0 ? void 0 : snapshot(player === null || player === void 0 ? void 0 : player.api.snapshot());
   };
 
+  var ratechange = function ratechange(value) {
+    var player = getPlayerItem();
+    player === null || player === void 0 ? void 0 : player.api.setPlaybackRate(value);
+  };
+
   var player = getPlayerItem();
 
   _useUpdateEffect(function () {
@@ -137,7 +143,9 @@ function RecordTools(_ref) {
       color: 'var(--primary)'
     } : null,
     title: "\u9010\u5E27\u64AD\u653E"
-  })), oneWinExtTools), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement(RatePick, {
+    onChange: ratechange
+  }), oneWinExtTools), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-mid"
   }, /*#__PURE__*/React.createElement("div", {
     className: "player-tools-item",

package/es/ScreenPlayer/index.css

@@ -43,7 +43,7 @@
 }
 .split-screen-player-wrapper .player-tools {
   height: 42px;
-  background-color: var(--gray12);
+  background-color: #242c3d;
   padding: 0 10px;
   display: flex;
   align-items: center;
@@ -151,3 +151,16 @@
 .custom-select-dropdown .cloudapp-select-item {
   font-size: var(--fs-small);
 }
+.select-current-rate-item {
+  color: var(--gray1);
+  font-size: 12px;
+  border: 1px solid var(--gray1);
+  padding: 2px 0;
+  display: inline-block;
+  width: 64px;
+  border-radius: 2px;
+  cursor: pointer;
+  text-align: center;
+  position: relative;
+  top: 4px;
+}

package/package.json

@@ -2,7 +2,7 @@
   "private": false,
   "name": "@cloud-app-dev/vidc",
   "description": "Video Image Data Componennts",
-  "version": "3.0.33",
+  "version": "3.0.35",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",