@cloud-app-dev/vidc 2.2.0-alpha.4 → 2.2.0-alpha.5

package/es/Player/api/index.js

@@ -256,7 +256,7 @@ export function useTypeAndPlay(url, type, isLive, container, segments, flvConfig
       video.removeAttribute('src');
       setState({});
     };
-  }, [url, container, segments]);
+  }, [url, container, segments, type]);
   return [state.type, state.flv, state.hls];
 } //创建Api
 

package/es/Player/single_player.js

@@ -55,11 +55,12 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
-      setState = _useState2[1];
+      setState = _useState2[1]; // 视频格式判断，外部可以强制指定，也可以通过url自动判断
+
 
   var vType = useMemo(function () {
     return type || getVideoType(url);
-  }, [url]);
+  }, [url, type]);
   var domRef = useRef(null);
   var video = useMemo(function () {
     return state.container ? state.container.querySelector('video') : undefined;
@@ -81,7 +82,7 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 
   var hasLink = useMemo(function () {
     return !!url || !!flvConfig.mediaDataSource.segments && vType === 'flv';
-  }, [url, flvConfig.mediaDataSource.segments]); // 存储容器
+  }, [url, flvConfig.mediaDataSource.segments, vType]); // 存储容器
 
   useEffect(function () {
     setState(function (old) {

package/es/PlayerExt/demo.js

@@ -38,14 +38,15 @@ var options2 = [{
 }, {
   value: 0,
   label: '录像'
-}];
+}]; //http://192.168.101.162:14088/flv/live/1853e2a5c3308bd62/2.flv?device_id=&channel_id=1853e2a5c3308bd62&stream_index=2&ip=0
 
-function Demo1() {
+function Demo() {
   var _useState = useState({
     type: undefined,
     isLive: 1,
     url: '',
-    tempUrl: ''
+    tempUrl: '',
+    mode: 1
   }),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
@@ -56,7 +57,7 @@ function Demo1() {
       width: '100%',
       height: 800
     }
-  }, /*#__PURE__*/React.createElement("h3", null, "\u6807\u51C6\u89C6\u9891\u64AD\u653E"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("h3", null, "\u63D2\u4EF6\u89C6\u9891\u64AD\u653E"), /*#__PURE__*/React.createElement("div", {
     style: {
       marginBottom: 10,
       display: 'flex'
@@ -103,96 +104,32 @@ function Demo1() {
       key: v.label,
       value: v.value
     }, v.label);
-  })), /*#__PURE__*/React.createElement(_Button, {
-    style: {
-      width: 60,
-      height: 32
-    },
-    onClick: function onClick(e) {
-      return setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
-          url: state.tempUrl
-        });
-      });
-    }
-  }, "\u64AD\u653E")), /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: 600
-    }
-  }, /*#__PURE__*/React.createElement(ExtModel, {
-    url: state.url,
-    mode: 1
-  }, /*#__PURE__*/React.createElement(Player, {
-    type: state.type,
-    url: state.url,
-    isLive: !!state.isLive
-  }))));
-}
-
-function Demo2() {
-  var _useState3 = useState({
-    type: undefined,
-    isLive: 1,
-    url: '',
-    tempUrl: ''
-  }),
-      _useState4 = _slicedToArray(_useState3, 2),
-      state = _useState4[0],
-      setState = _useState4[1];
-
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: '100%',
-      height: 800
-    }
-  }, /*#__PURE__*/React.createElement("h3", null, "\u63D2\u4EF6\u89C6\u9891\u64AD\u653E"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: 10,
-      display: 'flex'
-    }
-  }, /*#__PURE__*/React.createElement(_Select, {
-    value: state.type || '',
+  })), /*#__PURE__*/React.createElement(_Select, {
+    value: state.mode,
     onChange: function onChange(val) {
       return setState(function (old) {
         return Object.assign(Object.assign({}, old), {
-          type: val
+          mode: val
         });
       });
     }
-  }, options.map(function (v) {
-    return /*#__PURE__*/React.createElement(_Select.Option, {
-      key: v.label,
-      value: v.value
-    }, v.label);
-  })), /*#__PURE__*/React.createElement(_Input, {
+  }, /*#__PURE__*/React.createElement(_Select.Option, {
+    value: 1
+  }, "\u6D4F\u89C8\u5668\u6A21\u5F0F"), /*#__PURE__*/React.createElement(_Select.Option, {
+    value: 2
+  }, "\u63D2\u4EF6\u6A21\u5F0F")), /*#__PURE__*/React.createElement(_Button, {
     style: {
-      flex: 1,
+      width: 60,
       height: 32
     },
-    type: "text",
-    placeholder: "\u8BF7\u8F93\u5165\u89C6\u9891\u5730\u5740",
-    onChange: function onChange(e) {
-      return setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
-          tempUrl: e.target.value
-        });
-      });
-    }
-  }), /*#__PURE__*/React.createElement(_Select, {
-    value: state.isLive,
-    onChange: function onChange(val) {
+    onClick: function onClick(e) {
       return setState(function (old) {
         return Object.assign(Object.assign({}, old), {
-          isLive: val
+          url: ''
         });
       });
     }
-  }, options2.map(function (v) {
-    return /*#__PURE__*/React.createElement(_Select.Option, {
-      key: v.label,
-      value: v.value
-    }, v.label);
-  })), /*#__PURE__*/React.createElement(_Button, {
+  }, "\u5173\u95ED"), /*#__PURE__*/React.createElement(_Button, {
     style: {
       width: 60,
       height: 32
@@ -210,7 +147,8 @@ function Demo2() {
     }
   }, /*#__PURE__*/React.createElement(ExtModel, {
     url: state.url,
-    mode: 2
+    mode: state.mode,
+    pluginDownloadUrl: "http://192.168.101.162:19999/plugins/ZVPlayer.exe"
   }, /*#__PURE__*/React.createElement(Player, {
     type: state.type,
     url: state.url,
@@ -221,7 +159,7 @@ function Demo2() {
 var App = function App() {
   return /*#__PURE__*/React.createElement(_ConfigProvider, {
     prefixCls: "cloudapp"
-  }, /*#__PURE__*/React.createElement(Demo1, null), /*#__PURE__*/React.createElement(Demo2, null));
+  }, /*#__PURE__*/React.createElement(Demo, null));
 };
 
 export default App;

package/es/PlayerExt/index.d.ts

@@ -28,8 +28,14 @@ export declare const LOCAL_PORT: string[];
  * @returns
  */
 export declare function getLocalPort(): string;
+/**
+ * @desc 转码插件模式下的url
+ * @param url
+ * @param params
+ * @returns
+ */
 export declare function getLocalPlayPath(url: string, params?: string): string;
-export declare function usePlugin(mode: PlayModeType): {
+export declare function usePlugin(mode: PlayModeType, key: any): {
     needInstall: boolean;
 };
 export declare function ExtModel({ url, children, mode, pluginDownloadUrl, pluginParams }: IPluginProps): JSX.Element;

package/es/PlayerExt/index.js

@@ -1,5 +1,3 @@
-import _useMount from "ahooks/es/useMount";
-
 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."); }
@@ -12,7 +10,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import IconFont from '../Player/iconfont';
 import "./index.css";
 /**
@@ -28,6 +26,13 @@ export var LOCAL_PORT = ['15080', '15081', '15082', '15083', '15084', '15085', '
 export function getLocalPort() {
   return LOCAL_PORT[Math.floor(Math.random() * LOCAL_PORT.length)];
 }
+/**
+ * @desc 转码插件模式下的url
+ * @param url
+ * @param params
+ * @returns
+ */
+
 export function getLocalPlayPath(url) {
   var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   var URL_TEMPLATE = "http://127.0.0.1:<port>/video/v1/transcoding?uri=<pull_uri>";
@@ -35,7 +40,7 @@ export function getLocalPlayPath(url) {
   var pull_uri = window.btoa(url).replaceAll('=', '').replaceAll('/', '_').replaceAll('+', '-');
   return URL_TEMPLATE.replace('<port>', port).replace('<pull_uri>', pull_uri) + params;
 }
-export function usePlugin(mode) {
+export function usePlugin(mode, key) {
   var _useState = useState({
     installed: false
   }),
@@ -43,27 +48,28 @@ export function usePlugin(mode) {
       state = _useState2[0],
       setState = _useState2[1];
 
-  _useMount(function () {
+  useEffect(function () {
     if (mode !== 2) {
       return undefined;
     }
 
     var port = getLocalPort();
-    fetch("http://127.0.0.1:".concat(port, "/video/v1/state")).then(function (res) {
-      if (res.status === 200) {
-        setState({
-          installed: true
-        });
-      }
-    }).catch(function (e) {
-      console.error('插件未安装');
-    });
-  });
+    var url = "http://127.0.0.1:".concat(port, "/video/v1/state");
 
+    var thenFn = function thenFn(res) {
+      return res.status === 200 ? setState({
+        installed: true
+      }) : undefined;
+    };
+
+    fetch(url).then(thenFn).catch(function (e) {
+      return console.error('插件未安装', e);
+    });
+  }, [mode, key]);
   return {
     needInstall: useMemo(function () {
       return mode === 2 && !state.installed;
-    }, [state.installed])
+    }, [state.installed, mode])
   };
 }
 export function ExtModel(_ref) {
@@ -72,16 +78,24 @@ export function ExtModel(_ref) {
       mode = _ref.mode,
       pluginDownloadUrl = _ref.pluginDownloadUrl,
       pluginParams = _ref.pluginParams;
+
+  var _useState3 = useState({
+    forceKey: Date.now()
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      state = _useState4[0],
+      setState = _useState4[1];
+
   var hasUrl = useMemo(function () {
     return !!url;
   }, [url]);
 
-  var _usePlugin = usePlugin(mode),
+  var _usePlugin = usePlugin(mode, state.forceKey),
       needInstall = _usePlugin.needInstall;
 
   var playUrl = useMemo(function () {
-    return needInstall && url ? getLocalPlayPath(url, pluginParams) : url;
-  }, [url]);
+    return mode === 2 && url ? getLocalPlayPath(url, pluginParams) : url;
+  }, [url, mode]);
 
   if (needInstall) {
     return /*#__PURE__*/React.createElement("div", {
@@ -93,7 +107,7 @@ export function ExtModel(_ref) {
       }
     }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconFont, {
       type: "lm-player-PlaySource"
-    })), /*#__PURE__*/React.createElement("div", null, "\u8BF7", /*#__PURE__*/React.createElement("a", {
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u8BF7", /*#__PURE__*/React.createElement("a", {
       target: "_blank",
       href: pluginDownloadUrl,
       style: {
@@ -102,7 +116,18 @@ export function ExtModel(_ref) {
       },
       download: "PlayerPlugin.exe",
       rel: "noopener noreferrer"
-    }, "\u4E0B\u8F7D"), "\u64AD\u653E\u63D2\u4EF6")));
+    }, "\u4E0B\u8F7D"), "\u64AD\u653E\u63D2\u4EF6\uFF0C"), /*#__PURE__*/React.createElement("span", null, "\u82E5\u5DF2\u5B89\u88C5\u8BF7\u70B9\u51FB", /*#__PURE__*/React.createElement("a", {
+      style: {
+        padding: '0 4px'
+      },
+      onClick: function onClick() {
+        return setState(function (old) {
+          return Object.assign(Object.assign({}, old), {
+            forceKey: Date.now()
+          });
+        });
+      }
+    }, "\u91CD\u8BD5")))));
   }
 
   if (!hasUrl) {

package/package.json

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