@cloud-app-dev/vidc 3.0.18 → 3.0.19

package/es/CustomRenderSelect/index.d.ts

@@ -6,5 +6,5 @@ interface ICustomRenderSelectProps extends SelectProps {
     value: any;
     customRender: (value: any) => JSX.Element;
 }
-declare function CustomRenderSelect({ children, value, customRender, dropdownClassName, getPopupContainer, ...props }: ICustomRenderSelectProps): JSX.Element;
+declare function CustomRenderSelect({ children, value, customRender, popupClassName, getPopupContainer, ...props }: ICustomRenderSelectProps): JSX.Element;
 export default CustomRenderSelect;

package/es/CustomRenderSelect/index.js

@@ -24,9 +24,9 @@ function CustomRenderSelect(_a) {
   var children = _a.children,
       value = _a.value,
       customRender = _a.customRender,
-      dropdownClassName = _a.dropdownClassName,
+      popupClassName = _a.popupClassName,
       getPopupContainer = _a.getPopupContainer,
-      props = __rest(_a, ["children", "value", "customRender", "dropdownClassName", "getPopupContainer"]);
+      props = __rest(_a, ["children", "value", "customRender", "popupClassName", "getPopupContainer"]);
 
   var classname = useMemo(function () {
     return "custom-render-select-dropdown-".concat(_uuid());
@@ -57,7 +57,7 @@ function CustomRenderSelect(_a) {
     ref: domRef
   }, /*#__PURE__*/React.createElement(_Select, Object.assign({}, props, {
     value: value,
-    dropdownClassName: "custom-render-select-dropdown ".concat(classname, " ").concat(dropdownClassName),
+    popupClassName: "custom-render-select-dropdown ".concat(classname, " ").concat(popupClassName),
     getPopupContainer: getPopupContainer ? getPopupContainer : function () {
       return domRef.current.parentElement.parentElement;
     },

package/es/LoaderScript/utils.js

@@ -26,6 +26,7 @@ if (!global._LOADER_SCRIPT_URL) {
 }
 
 export var loadScript = function loadScript(url) {
+  console.log(url);
   return new Promise(function (resolve, reject) {
     if (global._LOADER_SCRIPT_URL[url]) {
       resolve(null);

package/es/Map/LevelCenter/DragMarker/index.d.ts

@@ -1,11 +1,8 @@
 /// <reference types="react" />
-import { LatLng } from '../../interface';
 export interface IDragMarkerProps {
     center?: [number, number];
-    zoom?: number;
     onChange?: (options: {
-        center: [number, number] | LatLng;
-        zoom: number;
+        center: [number, number];
     }) => void;
 }
 declare function DragMarker({ center, onChange }: IDragMarkerProps): JSX.Element;

package/es/Map/LevelCenter/DragMarker/index.js

@@ -29,16 +29,13 @@ function DragMarker(_ref) {
       var latlng = type.leaflet ? e.target.getLatLng() : e.target.getPosition();
       instance.setCenter(latlng);
       onChange === null || onChange === void 0 ? void 0 : onChange({
-        center: latlng,
-        zoom: instance.getZoom()
+        center: latlng
       });
     });
     instance.map.on('zoomend', function (e) {
-      var zoom = e.target.getZoom();
       var latlng = type.leaflet ? marker.getLatLng() : marker.getPosition();
       onChange === null || onChange === void 0 ? void 0 : onChange({
-        center: latlng,
-        zoom: zoom
+        center: [latlng.getLng(), latlng.getLat()]
       });
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [marker]);

package/es/Map/LevelCenter/index.js

@@ -48,14 +48,25 @@ function LevelCenter(_ref) {
       });
     }
   });
+  useMapEvent('zoomed', function (event) {
+    onLevelCenterChange === null || onLevelCenterChange === void 0 ? void 0 : onLevelCenterChange({
+      center: defaultCenter,
+      zoom: event.target.getZoom()
+    });
+  });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ClusterLayer, {
     points: points
   }), /*#__PURE__*/React.createElement(ResetTools, {
     onMapReset: mapRest
   }), /*#__PURE__*/React.createElement(DragMarker, {
     center: defaultCenter,
-    zoom: defaultZoom,
-    onChange: onLevelCenterChange
+    onChange: function onChange(_ref2) {
+      var center = _ref2.center;
+      return onLevelCenterChange === null || onLevelCenterChange === void 0 ? void 0 : onLevelCenterChange({
+        center: center,
+        zoom: defaultZoom
+      });
+    }
   }), children);
 }
 

package/es/Map/SinglePoint/index.d.ts

@@ -1,7 +1,14 @@
+import React from 'react';
 import { MapPoint } from '../interface';
 import './index.less';
-export interface ISinglePoint {
-    point: MapPoint;
+export interface ISinglePlayerProps {
+    center?: [number, number];
+    points: MapPoint[];
+    enableClick?: boolean;
+    onCenterChange?: (options: {
+        center: [number, number];
+    }) => void;
+    children?: React.ReactNode;
 }
-declare const _default: (props: ISinglePoint) => JSX.Element;
+declare const _default: (props: ISinglePlayerProps) => JSX.Element;
 export default _default;

package/es/Map/SinglePoint/index.js

@@ -1,35 +1,57 @@
 import _useMount from "ahooks/es/useMount";
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, { useCallback, useContext } from 'react';
+import ClusterLayer from '../ClusterLayer';
 import ResetTools from '../ResetTools';
-import Marker from './Marker';
+import DragMarker from '../LevelCenter/DragMarker';
 import withMap from '../withMap';
 import { mapContext } from '../Context';
-import useMapType from '../hook/useMapType';
+import useMapEvent from '../hook/useMapEvent';
 import "./index.css";
 
 function SinglePoint(_ref) {
-  var point = _ref.point;
+  var center = _ref.center,
+      points = _ref.points,
+      onCenterChange = _ref.onCenterChange,
+      enableClick = _ref.enableClick,
+      children = _ref.children;
 
   var _useContext = useContext(mapContext),
       instance = _useContext.instance;
 
-  var type = useMapType();
-  var defaultCenter = useMemo(function () {
-    return type.AMap ? [point.longitude, point.latitude] : [point.latitude, point.longitude];
-  }, [type.AMap, point.longitude, point.latitude]);
   var mapRest = useCallback(function () {
-    return instance.setZoomAndCenter(instance.config.zoom, defaultCenter);
-  }, [defaultCenter, instance]);
+    return instance.setZoomAndCenter(instance.config.zoom, instance.config.center);
+  }, [instance]);
 
   _useMount(function () {
-    return mapRest();
+    if (enableClick) {
+      instance.setCursor('pointer');
+    }
+
+    mapRest();
   });
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResetTools, {
+  useMapEvent('click', function (event) {
+    if (enableClick) {
+      var _center = [event.lnglat.lng, event.lnglat.lat];
+      instance.setCenter(_center);
+      onCenterChange === null || onCenterChange === void 0 ? void 0 : onCenterChange({
+        center: _center
+      });
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ClusterLayer, {
+    points: points
+  }), /*#__PURE__*/React.createElement(ResetTools, {
     onMapReset: mapRest
-  }), /*#__PURE__*/React.createElement(Marker, {
-    point: point
-  }));
+  }), /*#__PURE__*/React.createElement(DragMarker, {
+    center: center,
+    onChange: function onChange(_ref2) {
+      var center = _ref2.center;
+      return onCenterChange === null || onCenterChange === void 0 ? void 0 : onCenterChange({
+        center: center
+      });
+    }
+  }), children);
 }
 
 export default withMap(SinglePoint, 'single-point-map-container');

package/es/Map/index.d.ts

@@ -16,7 +16,7 @@ declare const Map: {
     LoaderMap: typeof LoaderMap;
     BasicMap: typeof BasicMap;
     ResetTools: typeof ResetTools;
-    SinglePoint: (props: import("./SinglePoint").ISinglePoint) => JSX.Element;
+    SinglePoint: (props: import("./SinglePoint").ISinglePlayerProps) => JSX.Element;
     useMarker: typeof useMarker;
     withMap: typeof withMap;
 };

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

@@ -8,12 +8,14 @@ declare class Api {
     play: () => void;
     pause: () => void;
     get paused(): boolean;
+    get muted(): boolean;
     /**
      * 设置currentTime实现seek
      * @param {*} seconds
      */
     seekTo: (seconds: number) => void;
     setVolume: (fraction: number) => void;
+    getVolume: () => number;
     mute: () => void;
     unmute: () => void;
     /**

package/es/Player/api/index.js

@@ -50,6 +50,10 @@ var Api = /*#__PURE__*/function () {
       _this.video.volume = fraction;
     };
 
+    this.getVolume = function () {
+      return _this.video.volume;
+    };
+
     this.mute = function () {
       _this.video.muted = true;
     };
@@ -185,6 +189,11 @@ var Api = /*#__PURE__*/function () {
     get: function get() {
       return this.video.paused;
     }
+  }, {
+    key: "muted",
+    get: function get() {
+      return this.video.muted;
+    }
   }]);
 
   return Api;

package/es/Player/contraller_bar/left_bar.js

@@ -13,10 +13,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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';
+import Volume from './volume';
+import Time from './time';
 
 function LeftBar(_ref) {
   var reload = _ref.reload,
@@ -27,7 +27,6 @@ function LeftBar(_ref) {
 
   var _useContext = useContext(Context),
       api = _useContext.api,
-      event = _useContext.event,
       container = _useContext.container,
       isLive = _useContext.isLive,
       isFpsPlay = _useContext.isFpsPlay;
@@ -55,13 +54,7 @@ function LeftBar(_ref) {
   }, [paused]);
   var statusText = useMemo(function () {
     return paused ? '播放' : '暂停';
-  }, [paused]);
-
-  var _useTimes = useTimes(api, event, isFpsPlay),
-      _useTimes2 = _slicedToArray(_useTimes, 3),
-      current = _useTimes2[0],
-      duration = _useTimes2[2]; //TODO 方法
-
+  }, [paused]); //TODO 方法
 
   var changePlayStatus = useCallback(function () {
     if (video === null || video === void 0 ? void 0 : video.paused) {
@@ -78,15 +71,15 @@ function LeftBar(_ref) {
     onClick: changePlayStatus,
     type: statusIconClassName,
     title: statusText
-  })), !isLive && !hideTimeProgress && /*#__PURE__*/React.createElement("span", {
-    className: "video-time-progress"
-  }, timeStamp(current), "/", timeStamp(duration || 0)), /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(IconFont, {
+  })), /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(Volume, {
+    api: api
+  })), !isLive && !hideTimeProgress && /*#__PURE__*/React.createElement(Time, null), /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(IconFont, {
     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",
+    type: "lm-player-zhuzhenplay",
     title: "\u9010\u5E27\u64AD\u653E"
   })), leftMidExtContents);
 }

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function Time(): JSX.Element;
+export default Time;

package/es/Player/contraller_bar/time.js

@@ -0,0 +1,34 @@
+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, { useContext } from 'react';
+import { Context } from '../context';
+import { useTimes } from '../timeline';
+import { timeStamp } from '../util';
+
+function Time() {
+  var _useContext = useContext(Context),
+      api = _useContext.api,
+      event = _useContext.event,
+      isFpsPlay = _useContext.isFpsPlay;
+
+  var _useTimes = useTimes(api, event, isFpsPlay),
+      _useTimes2 = _slicedToArray(_useTimes, 3),
+      current = _useTimes2[0],
+      duration = _useTimes2[2];
+
+  return /*#__PURE__*/React.createElement("span", {
+    className: "video-time-progress"
+  }, timeStamp(current), "/", timeStamp(duration || 0));
+}
+
+export default Time;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type Api from '../api';
+import '../style/volume.less';
+declare function Volume({ api, style }: {
+    api: Api;
+    style?: React.CSSProperties;
+}): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Volume>;
+export default _default;

package/es/Player/contraller_bar/volume.js

@@ -0,0 +1,86 @@
+import "antd/lib/slider/style";
+import _Slider from "antd/lib/slider";
+import "antd/lib/tooltip/style";
+import _Tooltip from "antd/lib/tooltip";
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
+import _useUpdate from "ahooks/es/useUpdate";
+
+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, { useMemo, useState } from 'react';
+import IconFont from '../iconfont';
+import "../style/volume.css";
+
+function Volume(_ref) {
+  var api = _ref.api,
+      style = _ref.style;
+
+  var _a;
+
+  var _useState = useState(Math.round((_a = api === null || api === void 0 ? void 0 : api.getVolume()) !== null && _a !== void 0 ? _a : 0 * 100)),
+      _useState2 = _slicedToArray(_useState, 2),
+      val = _useState2[0],
+      setVal = _useState2[1];
+
+  var update = _useUpdate(); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+  var volume = useMemo(function () {
+    return (api === null || api === void 0 ? void 0 : api.muted) ? 0 : val;
+  }, undefined);
+
+  var onChange = function onChange(num) {
+    if (api === null || api === void 0 ? void 0 : api.muted) {
+      api === null || api === void 0 ? void 0 : api.unmute();
+    }
+
+    setVal(num);
+    update();
+  };
+
+  var toggleMuted = function toggleMuted() {
+    if (!api) {
+      return;
+    }
+
+    if (api.muted) {
+      api.unmute();
+      setVal(100);
+    } else {
+      api.mute();
+      setVal(0);
+    }
+
+    update();
+  };
+
+  _useUpdateEffect(function () {
+    return api === null || api === void 0 ? void 0 : api.setVolume(val / 100);
+  }, [val]);
+
+  return /*#__PURE__*/React.createElement(_Tooltip, {
+    showArrow: false,
+    overlayClassName: "lm-player-volume-popup",
+    title: /*#__PURE__*/React.createElement(_Slider, {
+      onChange: onChange,
+      vertical: true,
+      value: val
+    })
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    style: style,
+    type: volume !== 0 ? 'lm-player-volume-open' : 'lm-player-volume-close',
+    onClick: toggleMuted
+  }));
+}
+
+export default /*#__PURE__*/React.memo(Volume);

package/es/Player/fps_play.d.ts

@@ -5,6 +5,7 @@ interface IFPSPlay {
     api: Api;
     event: VideoEventInstance;
     fpsDelay?: number;
+    fps?: number;
 }
-declare function FPSPlay({ api, event, fpsDelay }: IFPSPlay): JSX.Element;
+declare function FPSPlay({ api, event, fpsDelay, fps }: IFPSPlay): JSX.Element;
 export default FPSPlay;

package/es/Player/fps_play.js

@@ -10,16 +10,18 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import Events from './event/eventName';
 import useRafInterval from '../useRafInterval';
 import { useRegisterPlayerEvent } from './event';
+import { getDomStyleValue } from './util';
 var oneFps = 1 / 30;
 
 function FPSPlay(_ref) {
   var api = _ref.api,
       event = _ref.event,
-      fpsDelay = _ref.fpsDelay;
+      fpsDelay = _ref.fpsDelay,
+      fps = _ref.fps;
 
   var _useState = useState(Date.now()),
       _useState2 = _slicedToArray(_useState, 2),
@@ -28,6 +30,9 @@ function FPSPlay(_ref) {
 
   var ref = useRef(null);
   var timerRef = useRef(null);
+  var fps_second = useMemo(function () {
+    return fps ? 1 / fps : oneFps;
+  }, [fps]);
   useEffect(function () {
     var fpsCapture = function fpsCapture() {
       if (!ref.current || !event.video) {
@@ -35,7 +40,7 @@ function FPSPlay(_ref) {
       }
 
       var video = event.video;
-      var fpsTime = api.getCurrentTime() + oneFps;
+      var fpsTime = api.getCurrentTime() + fps_second;
       video.currentTime = fpsTime;
 
       if (video.currentTime >= api.getDuration()) {
@@ -53,7 +58,20 @@ function FPSPlay(_ref) {
 
       canvas.width = width;
       canvas.height = height;
-      ctx.drawImage(video, 0, 0, width, height);
+      var fit = getDomStyleValue(video, 'object-fit');
+
+      if (fit === 'fill') {
+        //全画面绘制，存在拉伸
+        ctx.drawImage(video, 0, 0, width, height);
+      } else {
+        // 自适应绘制
+        var videoWidth = video.videoWidth;
+        var videoHeight = video.videoHeight;
+        var scale = height / videoHeight;
+        var s_vw = scale * videoWidth;
+        var paddingSize = (width - s_vw) / 2;
+        ctx.drawImage(video, paddingSize, 0, s_vw, height);
+      }
     };
 
     fpsCapture();
@@ -61,13 +79,14 @@ function FPSPlay(_ref) {
     return function () {
       clearInterval(timerRef.current);
     };
-  }, [api, event, fpsDelay, forceKey]);
+  }, [api, event, fpsDelay, forceKey, fps_second]);
   useRegisterPlayerEvent(Events.CANVAS_PAUSE, function () {
     clearInterval(timerRef.current);
   });
   useRegisterPlayerEvent(Events.CANVAS_PLAY, function () {
     update(Date.now());
-  });
+  }); // TODO: 未知情况，video会自动播放，轮训检测并暂停零时解决
+
   useRafInterval(function () {
     return !api.paused ? api.pause() : null;
   }, 10);

package/es/Player/frontend_timeline.js

@@ -1,4 +1,4 @@
-import _useTrackedEffect from "ahooks/es/useTrackedEffect";
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -47,13 +47,12 @@ function FrontendTimeLine(_ref) {
 
   var _useTimes = useTimes(api, event),
       _useTimes2 = _slicedToArray(_useTimes, 1),
-      currentTime = _useTimes2[0];
+      currentTime = _useTimes2[0]; // eslint-disable-next-line no-sequences
 
-  _useTrackedEffect(function (changes) {
-    if (changes.includes(1)) {
-      lastSeekCTimeRef.current = currentTime;
-    }
-  }, [currentTime, url]);
+
+  _useUpdateEffect(function () {
+    return lastSeekCTimeRef.current = currentTime, undefined;
+  }, [currentTime]);
 
   var rTime = useMemo(function () {
     return state.time + currentTime + lastSeekCTimeRef.current;

package/es/Player/player.d.ts

@@ -142,6 +142,11 @@ export interface ISinglePlayerProps {
    * 获取视频针的频次 (ms)
    */
   fpsDelay?: number;
+
+  /**
+   * 视频每秒多少帧，用于控制逐帧播放
+   */
+  fps?: number;
 }
 
 export interface IFrontendPlayerProps extends Omit<ISinglePlayerProps, 'isLive' | 'reload'> {

package/es/Player/segment_player.js

@@ -208,7 +208,6 @@ function SegmentPlayer(_a) {
     update();
     onCanPlayerInit === null || onCanPlayerInit === void 0 ? void 0 : onCanPlayerInit(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  console.log(playRef);
   return /*#__PURE__*/React.createElement(SinglePlayer, Object.assign({
     ref: playRef,
     url: url,