@cloud-app-dev/vidc 3.0.17 → 3.0.18

package/.umirc.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'dumi';
 import path from 'path';
 
 const token =
-  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MjI1ODMwNzUxNSwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MTk5OTEwNzUxNX0.uk_G3vqBCFqxQM2jbV6CSN-z9YNVt_cx5nWXkSuCOIA';
+  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MzQwNTM5ODYzOCwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MzE0NjE5ODYzOH0.EPh_1eNPNFl-fmLODbHo0mu5R_1kKdt3UUu_0qfBGFY';
 
 export default defineConfig({
   title: 'CloudApp VIDC',

package/es/Map/hook/useMapEvent.js

@@ -1,22 +1,23 @@
-import _useCreation from "ahooks/es/useCreation";
+import _useLatest from "ahooks/es/useLatest";
 import { useContext, useEffect } from 'react';
 import { mapContext } from '../Context';
 
 function useMapEvent(type, fn) {
-  var action = _useCreation(function () {
-    return fn;
-  }, []);
+  var fnRef = _useLatest(fn);
 
   var _useContext = useContext(mapContext),
       instance = _useContext.instance;
 
   useEffect(function () {
-    console.log(11111);
-    instance.on(type, action);
+    var eventAction = function eventAction(event) {
+      fnRef.current(event);
+    };
+
+    instance.on(type, eventAction);
     return function () {
-      return instance.off(type, action);
+      return instance.off(type, eventAction);
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [instance, type]);
 }
 
 export default useMapEvent;

package/es/Player/api/index.d.ts

@@ -7,6 +7,7 @@ declare class Api {
     get video(): HTMLVideoElement;
     play: () => void;
     pause: () => void;
+    get paused(): boolean;
     /**
      * 设置currentTime实现seek
      * @param {*} seconds
@@ -51,7 +52,8 @@ declare class Api {
     unload: () => void;
     reload: () => void;
     toggleFit: () => void;
-    setIndex: (i: number) => void;
+    openFpsPlay: () => void;
+    closeFpsPlay: () => void;
     destroy: () => void;
 }
 export declare type TypeAndPlay = {

package/es/Player/api/index.js

@@ -164,7 +164,9 @@ var Api = /*#__PURE__*/function () {
 
     this.toggleFit = function () {};
 
-    this.setIndex = function (i) {};
+    this.openFpsPlay = function () {};
+
+    this.closeFpsPlay = function () {};
 
     this.destroy = function () {
       _this.container = null;
@@ -178,6 +180,11 @@ var Api = /*#__PURE__*/function () {
     get: function get() {
       return this.container.querySelector('video');
     }
+  }, {
+    key: "paused",
+    get: function get() {
+      return this.video.paused;
+    }
   }]);
 
   return Api;
@@ -195,37 +202,33 @@ export function useTypeAndPlay(url, type, isLive, container, segments, flvConfig
       setState = _useState2[1];
 
   useEffect(function () {
-    if (!container) {
+    var isReady = container && (url || type === 'flv' && segments);
+
+    if (!isReady) {
       return undefined;
     }
 
     var video = container.querySelector('video');
     var options = {};
 
-    if (type === 'flv') {
-      if (!(url || segments)) {
-        return undefined;
-      }
-
-      options.type = 'flv';
-      options.flv = createFlvPlayer(video, url, isLive, flvConfig);
-    }
-
-    if (type === 'hls') {
-      if (!url) {
-        return undefined;
-      }
-
-      options.type = 'hls';
-      options.hls = createHlsPlayer(video, url, hlsConfig);
-    }
-
-    if (url && type === 'native') {
-      options.type = 'native';
-      video.setAttribute('src', url);
+    switch (type) {
+      case 'flv':
+        options.type = 'flv';
+        options.flv = createFlvPlayer(video, url, isLive, flvConfig);
+        break;
+
+      case 'hls':
+        options.type = 'hls';
+        options.hls = createHlsPlayer(video, url, isLive, hlsConfig);
+        break;
+
+      default:
+        options.type = 'native';
+        video.setAttribute('src', url);
+        break;
     }
 
-    url && video.paused && tryCatch(function () {
+    video.paused && tryCatch(function () {
       return video.play();
     });
     setState(options);

package/es/Player/context.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type Api from './api';
+import type VideoEventInstance from './event';
+export interface IPlayerContextProps {
+    /**
+     * @description 用于获取微应用顶层的dom节点
+     */
+    container: HTMLElement;
+    api: Api;
+    event: VideoEventInstance;
+    isLive: boolean;
+    isFpsPlay: boolean;
+    children: React.ReactNode;
+}
+export declare const Context: React.Context<Omit<IPlayerContextProps, "children">>;
+export declare function Provider({ children, ...props }: IPlayerContextProps): JSX.Element;
+export declare namespace Provider {
+    var defaultProps: {
+        getContainer: () => HTMLElement;
+    };
+}

package/es/Player/context.js

@@ -0,0 +1,16 @@
+import { __rest } from "tslib";
+import React from 'react';
+export var Context = /*#__PURE__*/React.createContext(null);
+export function Provider(_a) {
+  var children = _a.children,
+      props = __rest(_a, ["children"]);
+
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: Object.assign({}, props)
+  }, children);
+}
+Provider.defaultProps = {
+  getContainer: function getContainer() {
+    return document.body;
+  }
+};

package/es/Player/contraller_bar/contraller_event.d.ts

@@ -1,9 +1,6 @@
 import React from 'react';
-import VideoEventInstance from '../event';
 interface IContrallerEventProps {
-    event?: VideoEventInstance;
-    container?: HTMLElement;
     children?: React.ReactNode;
 }
-declare function ContrallerEvent({ event, container, children }: IContrallerEventProps): JSX.Element;
+declare function ContrallerEvent({ children }: IContrallerEventProps): JSX.Element;
 export default ContrallerEvent;

package/es/Player/contraller_bar/contraller_event.js

@@ -1,3 +1,6 @@
+import _useEventListener from "ahooks/es/useEventListener";
+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."); }
@@ -10,13 +13,17 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useState, useRef, useContext } from 'react';
+import { Context } from '../context';
 import EventName from '../event/eventName';
 
 function ContrallerEvent(_ref) {
-  var event = _ref.event,
-      container = _ref.container,
-      children = _ref.children;
+  var children = _ref.children;
+
+  var _useContext = useContext(Context),
+      event = _useContext.event,
+      container = _useContext.container;
+
   var timer = useRef(null);
 
   var _useState = useState(true),
@@ -24,30 +31,32 @@ function ContrallerEvent(_ref) {
       visibel = _useState2[0],
       setVisibel = _useState2[1];
 
-  useEffect(function () {
-    var showContraller = function showContraller() {
-      clearTimeout(timer.current);
-      setVisibel(true);
-      event.emit(EventName.SHOW_CONTRALLER);
-    };
-
-    var hideContraller = function hideContraller() {
-      clearTimeout(timer.current);
-      timer.current = setTimeout(function () {
-        setVisibel(false);
-        event.emit(EventName.HIDE_CONTRALLER);
-      }, 3 * 1000);
-    }; // 默认执行延时hide
-
-
-    hideContraller();
-    container.addEventListener('mouseenter', showContraller, false);
-    container.addEventListener('mouseleave', hideContraller, false);
-    return function () {
-      container.removeEventListener('mouseenter', showContraller, false);
-      container.removeEventListener('mouseleave', hideContraller, false);
-    };
-  }, [container, event]);
+  var showContraller = function showContraller() {
+    clearTimeout(timer.current);
+    setVisibel(true);
+    event.emit(EventName.SHOW_CONTRALLER);
+  };
+
+  var hideContraller = function hideContraller() {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(function () {
+      setVisibel(false);
+      event.emit(EventName.HIDE_CONTRALLER);
+    }, 3 * 1000);
+  };
+
+  _useMount(function () {
+    return hideContraller();
+  });
+
+  _useEventListener('mouseenter', showContraller, {
+    target: container
+  });
+
+  _useEventListener('mouseleave', hideContraller, {
+    target: container
+  });
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.map(children, function (child) {
     return /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
       visibel: visibel

package/es/Player/contraller_bar/index.d.ts

@@ -1,19 +1,14 @@
 import React from 'react';
-import type Api from '../api';
-import type VideoEventInstance from '../event';
 import '../style/bar.less';
 interface IContrallerBarProps {
-    container?: HTMLElement;
     rightExtContents: React.ReactNode;
     rightMidExtContents: React.ReactNode;
     visibel?: boolean;
-    api: Api;
-    event: VideoEventInstance;
-    isLive?: boolean;
     leftExtContents: React.ReactNode;
     leftMidExtContents: React.ReactNode;
     reload: () => void;
     hideTimeProgress?: boolean;
+    oneFpsPlay?: boolean;
 }
-declare function ContrallerBar({ container, rightExtContents, rightMidExtContents, visibel, api, event, isLive, leftExtContents, leftMidExtContents, reload, hideTimeProgress, }: IContrallerBarProps): JSX.Element;
+declare function ContrallerBar({ rightExtContents, rightMidExtContents, visibel, leftExtContents, leftMidExtContents, reload, hideTimeProgress, oneFpsPlay, }: IContrallerBarProps): JSX.Element;
 export default ContrallerBar;

package/es/Player/contraller_bar/index.js

@@ -4,31 +4,23 @@ import RightBar from './right_bar';
 import "../style/bar.css";
 
 function ContrallerBar(_ref) {
-  var container = _ref.container,
-      rightExtContents = _ref.rightExtContents,
+  var rightExtContents = _ref.rightExtContents,
       rightMidExtContents = _ref.rightMidExtContents,
       visibel = _ref.visibel,
-      api = _ref.api,
-      event = _ref.event,
-      isLive = _ref.isLive,
       leftExtContents = _ref.leftExtContents,
       leftMidExtContents = _ref.leftMidExtContents,
       reload = _ref.reload,
-      hideTimeProgress = _ref.hideTimeProgress;
+      hideTimeProgress = _ref.hideTimeProgress,
+      oneFpsPlay = _ref.oneFpsPlay;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "contraller-bar-layout ".concat(!visibel ? 'hide-contraller-bar' : '')
   }, /*#__PURE__*/React.createElement(LeftBar, {
+    oneFpsPlay: oneFpsPlay,
     hideTimeProgress: hideTimeProgress,
-    api: api,
     reload: reload,
-    event: event,
-    container: container,
-    isLive: isLive,
     leftMidExtContents: leftMidExtContents,
     leftExtContents: leftExtContents
   }), /*#__PURE__*/React.createElement(RightBar, {
-    api: api,
-    container: container,
     rightExtContents: rightExtContents,
     rightMidExtContents: rightMidExtContents
   })));

package/es/Player/contraller_bar/left_bar.d.ts

@@ -1,15 +1,10 @@
 import React from 'react';
-import Api from '../api';
-import VideoEventInstance from '../event';
 interface ILeftBarProps {
-    api: Api;
-    event: VideoEventInstance;
-    container: HTMLElement;
-    isLive: boolean;
     leftExtContents?: React.ReactNode;
     leftMidExtContents?: React.ReactNode;
     reload: () => void;
     hideTimeProgress?: boolean;
+    oneFpsPlay?: boolean;
 }
-declare function LeftBar({ api, event, container, isLive, reload, leftExtContents, leftMidExtContents, hideTimeProgress }: ILeftBarProps): JSX.Element;
+declare function LeftBar({ reload, leftExtContents, leftMidExtContents, hideTimeProgress, oneFpsPlay }: ILeftBarProps): JSX.Element;
 export default LeftBar;

package/es/Player/contraller_bar/left_bar.js

@@ -10,41 +10,40 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useContext } from 'react';
 import IconFont from '../iconfont';
 import Bar from './bar';
 import { useTimes } from '../timeline';
 import { timeStamp } from '../util';
+import { Context } from '../context';
+import { useVideoEvent } from '../event';
 
 function LeftBar(_ref) {
-  var api = _ref.api,
-      event = _ref.event,
-      container = _ref.container,
-      isLive = _ref.isLive,
-      reload = _ref.reload,
+  var reload = _ref.reload,
       leftExtContents = _ref.leftExtContents,
       leftMidExtContents = _ref.leftMidExtContents,
-      hideTimeProgress = _ref.hideTimeProgress;
+      hideTimeProgress = _ref.hideTimeProgress,
+      oneFpsPlay = _ref.oneFpsPlay;
+
+  var _useContext = useContext(Context),
+      api = _useContext.api,
+      event = _useContext.event,
+      container = _useContext.container,
+      isLive = _useContext.isLive,
+      isFpsPlay = _useContext.isFpsPlay;
 
   var _useState = useState(Date.now()),
       _useState2 = _slicedToArray(_useState, 2),
       dep = _useState2[0],
       setDep = _useState2[1];
 
-  useEffect(function () {
-    var updateRender = function updateRender() {
-      return setDep(Date.now());
-    };
-
-    event.addEventListener('play', updateRender);
-    event.addEventListener('pause', updateRender);
-    event.addEventListener('volumechange', updateRender);
-    return function () {
-      event.removeEventListener('play', updateRender);
-      event.removeEventListener('pause', updateRender);
-      event.removeEventListener('volumechange', updateRender);
-    };
-  }, [event]);
+  var updateRender = function updateRender() {
+    return setDep(Date.now());
+  };
+
+  useVideoEvent('play', updateRender);
+  useVideoEvent('pause', updateRender);
+  useVideoEvent('volumechange', updateRender);
   var video = container.querySelector('video'); //缓存值
   // eslint-disable-next-line react-hooks/exhaustive-deps
 
@@ -58,7 +57,7 @@ function LeftBar(_ref) {
     return paused ? '播放' : '暂停';
   }, [paused]);
 
-  var _useTimes = useTimes(api, event, hideTimeProgress),
+  var _useTimes = useTimes(api, event, isFpsPlay),
       _useTimes2 = _slicedToArray(_useTimes, 3),
       current = _useTimes2[0],
       duration = _useTimes2[2]; //TODO 方法
@@ -75,7 +74,7 @@ function LeftBar(_ref) {
   }, [video, api]);
   return /*#__PURE__*/React.createElement("div", {
     className: "contraller-left-bar"
-  }, leftExtContents, /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(IconFont, {
+  }, leftExtContents, !isFpsPlay && /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(IconFont, {
     onClick: changePlayStatus,
     type: statusIconClassName,
     title: statusText
@@ -85,6 +84,10 @@ function LeftBar(_ref) {
     onClick: reload,
     type: "lm-player-Refresh_Main",
     title: "\u91CD\u8F7D"
+  })), !isLive && oneFpsPlay && /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(IconFont, {
+    onClick: isFpsPlay ? api.closeFpsPlay : api.openFpsPlay,
+    type: "lm-player-Refresh_Main",
+    title: "\u9010\u5E27\u64AD\u653E"
   })), leftMidExtContents);
 }
 

package/es/Player/contraller_bar/right_bar.d.ts

@@ -1,13 +1,8 @@
 import React from 'react';
-import Api from '../api';
 interface IRightBarProps {
-    container?: HTMLElement;
     visibel?: boolean;
-    api: Api;
-    video?: HTMLVideoElement;
-    isLive?: boolean;
     rightExtContents: React.ReactNode;
     rightMidExtContents: React.ReactNode;
 }
-declare function RightBar({ container, rightExtContents, rightMidExtContents }: IRightBarProps): JSX.Element;
+declare function RightBar({ rightExtContents, rightMidExtContents }: IRightBarProps): JSX.Element;
 export default RightBar;

package/es/Player/contraller_bar/right_bar.js

@@ -10,16 +10,19 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React from 'react';
+import React, { useContext } from 'react';
 import IconFont from '../iconfont';
 import Bar from './bar';
 import useFullscreen from '../../useFullscreen';
+import { Context } from '../context';
 
 function RightBar(_ref) {
-  var container = _ref.container,
-      rightExtContents = _ref.rightExtContents,
+  var rightExtContents = _ref.rightExtContents,
       rightMidExtContents = _ref.rightMidExtContents;
 
+  var _useContext = useContext(Context),
+      container = _useContext.container;
+
   var _useFullscreen = useFullscreen(container),
       _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
       isFullScreen = _useFullscreen2[0],

package/es/Player/contraller_bar/useBarStatus.js

@@ -10,7 +10,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import { useRegisterPlayerEvents } from '../event';
 import EventName from '../event/eventName';
 
 function useBarStatus(event) {
@@ -19,33 +20,25 @@ function useBarStatus(event) {
   }),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
-      setState = _useState2[1]; // 监听
+      setState = _useState2[1];
 
-
-  useEffect(function () {
-    var show = function show() {
-      return setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
-          status: 1
-        });
+  var show = function show() {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        status: 1
       });
-    };
+    });
+  };
 
-    var hide = function hide() {
-      return setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
-          status: 0
-        });
+  var hide = function hide() {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        status: 0
       });
-    };
-
-    event.on(EventName.SHOW_CONTRALLER, show);
-    event.on(EventName.HIDE_CONTRALLER, hide);
-    return function () {
-      event.off(EventName.SHOW_CONTRALLER, show);
-      event.off(EventName.HIDE_CONTRALLER, hide);
-    };
-  }, []);
+    });
+  };
+
+  useRegisterPlayerEvents(event, [[EventName.SHOW_CONTRALLER, show], [EventName.HIDE_CONTRALLER, hide]]);
   return state.status;
 }
 

package/es/Player/demo.js

@@ -117,6 +117,8 @@ function Demo1() {
       });
     }
   }, "\u64AD\u653E")), /*#__PURE__*/React.createElement(Player, {
+    fpsDelay: 800,
+    oneFpsPlay: true,
     type: state.type,
     url: state.url,
     isLive: !!state.isLive,
@@ -214,6 +216,7 @@ function Demo2() {
       });
     }
   }, "\u64AD\u653E")), /*#__PURE__*/React.createElement(SegmentPlayer, {
+    oneFpsPlay: true,
     begin: mm.valueOf(),
     segments: state.segments,
     isLive: false
@@ -278,7 +281,8 @@ function Demo3() {
           url: "".concat(old.url, "?").concat(time)
         });
       });
-    }
+    },
+    type: "native"
   }));
 }