@vtx/player 0.0.10 → 0.0.13

package/lib/history-player/index.js

@@ -0,0 +1,276 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.HistoryPlayer = void 0;
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _react = require("react");
+
+var _player = _interopRequireDefault(require("../player"));
+
+var _ahooks = require("ahooks");
+
+var _slider = _interopRequireDefault(require("antd/lib/slider"));
+
+var _space = _interopRequireDefault(require("antd/lib/space"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _controls = require("@/controls");
+
+var _icons = require("@/icons");
+
+var _utils = require("@/utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+var HistoryPlayer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var url = props.url,
+      type = props.type,
+      _props$width = props.width,
+      width = _props$width === void 0 ? '100%' : _props$width,
+      _props$height = props.height,
+      height = _props$height === void 0 ? '100%' : _props$height,
+      captureName = props.captureName,
+      _props$controlBottom = props.controlBottom,
+      controlBottom = _props$controlBottom === void 0 ? 0 : _props$controlBottom,
+      startTime = props.startTime,
+      endTime = props.endTime,
+      onTimeChange = props.onTimeChange,
+      _props$showInfo = props.showInfo,
+      showInfo = _props$showInfo === void 0 ? false : _props$showInfo,
+      _props$info = props.info,
+      info = _props$info === void 0 ? [] : _props$info;
+  var totalTime = (0, _moment["default"])(endTime).diff((0, _moment["default"])(startTime), 'seconds');
+  var containerRef = (0, _react.useRef)(null);
+  var wrapRef = (0, _react.useRef)(null);
+  var controlsRef = (0, _react.useRef)(null);
+  var playerRef = (0, _react.useRef)();
+
+  var _useFullscreen = (0, _ahooks.useFullscreen)(wrapRef),
+      _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
+      isFullscreen = _useFullscreen2[0],
+      toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
+
+  var _useSetState = (0, _ahooks.useSetState)({
+    play: false,
+    error: false,
+    loading: false,
+    id: 'vtx_hk_player_' + (0, _utils.guidGenerator)(),
+    volume: 0,
+    currentTime: 0,
+    progress: 0,
+    controls: {
+      progress: true
+    }
+  }),
+      _useSetState2 = _slicedToArray(_useSetState, 2),
+      state = _useSetState2[0],
+      setState = _useSetState2[1];
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      seekTo: function seekTo(time) {
+        var player = playerRef.current;
+
+        if (player) {
+          var currentTime = (0, _moment["default"])(time).diff((0, _moment["default"])(startTime), 'seconds');
+          return player.seekTo(currentTime);
+        } else {
+          return Promise.reject();
+        }
+      }
+    };
+  });
+  (0, _react.useEffect)(function () {
+    var container = containerRef.current;
+    if (!url || !container) return;
+    var player = new _player["default"]({
+      url: url,
+      container: container,
+      live: false,
+      startTime: startTime,
+      endTime: endTime,
+      type: type
+    });
+    playerRef.current = player;
+    setState({
+      loading: true,
+      controls: {
+        progress: player.type === 'hk_ws'
+      }
+    });
+    console.log(player.type);
+    player.playBack().then(function () {
+      return setState({
+        play: true,
+        error: false
+      });
+    })["catch"](function () {
+      return setState({
+        error: true
+      });
+    })["finally"](function () {
+      return setState({
+        loading: false
+      });
+    });
+    player.onTimeUpdate(function (currentTime, speed) {
+      setState({
+        currentTime: currentTime,
+        progress: Math.floor(currentTime / totalTime * 100)
+      });
+      onTimeChange && onTimeChange((0, _moment["default"])(startTime).add(currentTime, 'seconds').format(_utils.TimeFormat.params), speed);
+    });
+    return function () {
+      player.destroy();
+      setState({
+        error: false,
+        loading: false,
+        play: false
+      });
+    };
+  }, [url, startTime, endTime]);
+  /** 截图方法 */
+
+  var handleCapture = function handleCapture(e) {
+    var player = playerRef.current;
+    player && player.capture(captureName);
+    e.stopPropagation();
+  };
+  /** 全屏方法 */
+
+
+  var handleFullScreen = function handleFullScreen(e) {
+    toggleFullscreen();
+    var player = playerRef.current;
+    player && player.resize();
+    e.stopPropagation();
+  };
+  /** 进度条控制器 */
+
+
+  var handleSlider = function handleSlider(value) {
+    var currentTime = Math.floor(totalTime * value / 100);
+    var player = playerRef.current;
+    setState({
+      progress: value
+    });
+    player === null || player === void 0 ? void 0 : player.seekTo(currentTime);
+  };
+  /** 暂停方法 */
+
+
+  var handlePause = function handlePause() {
+    var player = playerRef.current;
+    player === null || player === void 0 ? void 0 : player.pause(function () {
+      setState({
+        play: false
+      });
+    });
+  };
+  /** 恢复播放方法 */
+
+
+  var handleResume = function handleResume() {
+    var player = playerRef.current;
+    player === null || player === void 0 ? void 0 : player.resume(function () {
+      setState({
+        play: true
+      });
+    });
+  };
+
+  return (0, _jsxRuntime.jsxs)("div", Object.assign({
+    className: "vtx-history-player",
+    ref: wrapRef,
+    style: {
+      width: width,
+      height: height
+    }
+  }, {
+    children: [(0, _jsxRuntime.jsx)("div", {
+      ref: containerRef,
+      style: {
+        height: '100%',
+        width: '100%'
+      },
+      id: state.id
+    }), state.loading && (0, _jsxRuntime.jsx)(_controls.LoadingState, {}), (0, _jsxRuntime.jsx)(_controls.InfoPanel, {
+      showInfo: showInfo,
+      info: info
+    }), (0, _jsxRuntime.jsxs)("div", Object.assign({
+      className: "controls",
+      ref: controlsRef,
+      style: {
+        bottom: controlBottom
+      }
+    }, {
+      children: [state.play ? (0, _jsxRuntime.jsx)(_icons.PauseIcon, {
+        onClick: handlePause
+      }) : (0, _jsxRuntime.jsx)(_icons.PlayIcon, {
+        onClick: handleResume
+      }), (0, _jsxRuntime.jsxs)("div", Object.assign({
+        className: "time"
+      }, {
+        children: [(0, _jsxRuntime.jsx)("span", Object.assign({
+          className: "current"
+        }, {
+          children: (0, _utils.secondsToTime)(state.currentTime)
+        })), (0, _jsxRuntime.jsxs)("span", Object.assign({
+          className: "total"
+        }, {
+          children: ["/", (0, _utils.secondsToTime)(totalTime)]
+        }))]
+      })), (0, _jsxRuntime.jsx)("div", Object.assign({
+        className: "slider"
+      }, {
+        children: (0, _jsxRuntime.jsx)(_slider["default"], {
+          disabled: !state.controls.progress,
+          tipFormatter: null,
+          onChange: handleSlider,
+          value: state.progress
+        })
+      })), (0, _jsxRuntime.jsxs)(_space["default"], Object.assign({
+        className: "right",
+        size: 12,
+        align: "center"
+      }, {
+        children: [(0, _jsxRuntime.jsx)(_controls.VolumeControl, {
+          player: playerRef.current,
+          defaultValue: 0,
+          container: controlsRef.current
+        }), (0, _jsxRuntime.jsx)(_controls.SpeedControl, {
+          player: playerRef.current,
+          container: controlsRef.current
+        }), (0, _jsxRuntime.jsx)(_icons.CaptureIcon, {
+          onClick: handleCapture
+        }), isFullscreen ? (0, _jsxRuntime.jsx)(_icons.ExitFullScreenIcon, {
+          onClick: handleFullScreen
+        }) : (0, _jsxRuntime.jsx)(_icons.FullScreenIcon, {
+          onClick: handleFullScreen
+        })]
+      }))]
+    }))]
+  }));
+});
+exports.HistoryPlayer = HistoryPlayer;
+HistoryPlayer.displayName = 'HistoryPlayer';
+var _default = HistoryPlayer;
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/lib/history-player/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["HistoryPlayer","forwardRef","props","ref","url","type","width","height","captureName","controlBottom","startTime","endTime","onTimeChange","showInfo","info","totalTime","moment","diff","containerRef","useRef","wrapRef","controlsRef","playerRef","useFullscreen","isFullscreen","toggleFullscreen","useSetState","play","error","loading","id","guidGenerator","volume","currentTime","progress","controls","state","setState","useImperativeHandle","seekTo","time","player","current","Promise","reject","useEffect","container","Player","live","console","log","playBack","then","onTimeUpdate","speed","Math","floor","add","format","TimeFormat","params","destroy","handleCapture","e","capture","stopPropagation","handleFullScreen","resize","handleSlider","value","handlePause","pause","handleResume","resume","_jsxs","Object","assign","className","style","children","_jsx","LoadingState","InfoPanel","bottom","PauseIcon","onClick","PlayIcon","secondsToTime","Slider","disabled","tipFormatter","onChange","Space","size","align","VolumeControl","defaultValue","SpeedControl","CaptureIcon","ExitFullScreenIcon","FullScreenIcon","displayName"],"sources":["history-player/index.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\nimport Player from '../player';\nimport { useFullscreen, useSetState } from 'ahooks';\n// import { Slider, Space } from 'antd';\nimport Slider from 'antd/lib/slider';\nimport Space from 'antd/lib/space';\nimport moment from 'moment';\nimport { InfoPanel, LoadingState, SpeedControl, VolumeControl } from '@/controls';\nimport { CaptureIcon, ExitFullScreenIcon, FullScreenIcon, PauseIcon, PlayIcon } from '@/icons';\nimport { TimeFormat, guidGenerator, secondsToTime } from '@/utils';\nexport const HistoryPlayer = forwardRef((props, ref) => {\n    const { url, type, width = '100%', height = '100%', captureName, controlBottom = 0, startTime, endTime, onTimeChange, showInfo = false, info = [], } = props;\n    const totalTime = moment(endTime).diff(moment(startTime), 'seconds');\n    const containerRef = useRef(null);\n    const wrapRef = useRef(null);\n    const controlsRef = useRef(null);\n    const playerRef = useRef();\n    const [isFullscreen, { toggleFullscreen }] = useFullscreen(wrapRef);\n    const [state, setState] = useSetState({\n        play: false,\n        error: false,\n        loading: false,\n        id: 'vtx_hk_player_' + guidGenerator(),\n        volume: 0,\n        currentTime: 0,\n        progress: 0,\n        controls: {\n            progress: true,\n        },\n    });\n    useImperativeHandle(ref, () => {\n        return {\n            seekTo: (time) => {\n                const player = playerRef.current;\n                if (player) {\n                    const currentTime = moment(time).diff(moment(startTime), 'seconds');\n                    return player.seekTo(currentTime);\n                }\n                else {\n                    return Promise.reject();\n                }\n            },\n        };\n    });\n    useEffect(() => {\n        const container = containerRef.current;\n        if (!url || !container)\n            return;\n        const player = new Player({ url, container, live: false, startTime, endTime, type });\n        playerRef.current = player;\n        setState({ loading: true, controls: { progress: player.type === 'hk_ws' } });\n        console.log(player.type);\n        player\n            .playBack()\n            .then(() => setState({ play: true, error: false }))\n            .catch(() => setState({ error: true }))\n            .finally(() => setState({ loading: false }));\n        player.onTimeUpdate((currentTime, speed) => {\n            setState({ currentTime, progress: Math.floor((currentTime / totalTime) * 100) });\n            onTimeChange &&\n                onTimeChange(moment(startTime).add(currentTime, 'seconds').format(TimeFormat.params), speed);\n        });\n        return () => {\n            player.destroy();\n            setState({ error: false, loading: false, play: false });\n        };\n    }, [url, startTime, endTime]);\n    /** 截图方法 */\n    const handleCapture = (e) => {\n        const player = playerRef.current;\n        player && player.capture(captureName);\n        e.stopPropagation();\n    };\n    /** 全屏方法 */\n    const handleFullScreen = (e) => {\n        toggleFullscreen();\n        const player = playerRef.current;\n        player && player.resize();\n        e.stopPropagation();\n    };\n    /** 进度条控制器 */\n    const handleSlider = (value) => {\n        const currentTime = Math.floor((totalTime * value) / 100);\n        const player = playerRef.current;\n        setState({ progress: value });\n        player === null || player === void 0 ? void 0 : player.seekTo(currentTime);\n    };\n    /** 暂停方法 */\n    const handlePause = () => {\n        const player = playerRef.current;\n        player === null || player === void 0 ? void 0 : player.pause(() => {\n            setState({ play: false });\n        });\n    };\n    /** 恢复播放方法 */\n    const handleResume = () => {\n        const player = playerRef.current;\n        player === null || player === void 0 ? void 0 : player.resume(() => {\n            setState({ play: true });\n        });\n    };\n    return (_jsxs(\"div\", Object.assign({ className: \"vtx-history-player\", ref: wrapRef, style: { width, height } }, { children: [_jsx(\"div\", { ref: containerRef, style: { height: '100%', width: '100%' }, id: state.id }), state.loading && _jsx(LoadingState, {}), _jsx(InfoPanel, { showInfo: showInfo, info: info }), _jsxs(\"div\", Object.assign({ className: \"controls\", ref: controlsRef, style: { bottom: controlBottom } }, { children: [state.play ? (_jsx(PauseIcon, { onClick: handlePause })) : (_jsx(PlayIcon, { onClick: handleResume })), _jsxs(\"div\", Object.assign({ className: \"time\" }, { children: [_jsx(\"span\", Object.assign({ className: \"current\" }, { children: secondsToTime(state.currentTime) })), _jsxs(\"span\", Object.assign({ className: \"total\" }, { children: [\"/\", secondsToTime(totalTime)] }))] })), _jsx(\"div\", Object.assign({ className: \"slider\" }, { children: _jsx(Slider, { disabled: !state.controls.progress, tipFormatter: null, onChange: handleSlider, value: state.progress }) })), _jsxs(Space, Object.assign({ className: \"right\", size: 12, align: \"center\" }, { children: [_jsx(VolumeControl, { player: playerRef.current, defaultValue: 0, container: controlsRef.current }), _jsx(SpeedControl, { player: playerRef.current, container: controlsRef.current }), _jsx(CaptureIcon, { onClick: handleCapture }), isFullscreen ? (_jsx(ExitFullScreenIcon, { onClick: handleFullScreen })) : (_jsx(FullScreenIcon, { onClick: handleFullScreen }))] }))] }))] })));\n});\nHistoryPlayer.displayName = 'HistoryPlayer';\nexport default HistoryPlayer;\n"],"mappings":"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"}

package/lib/history-player/style/css.js

@@ -0,0 +1,6 @@
+"use strict";
+
+require("../../controls/style/css");
+
+require("./index.css");
+//# sourceMappingURL=css.js.map

package/lib/history-player/style/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","names":[],"sources":["history-player/style/index.js"],"sourcesContent":["import '../../controls/style';\nimport './index.less';\n"],"mappings":";;AAAA;;AACA"}

package/lib/history-player/style/index.css

@@ -0,0 +1,105 @@
+.vtx-history-player {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  background-color: #2b3d51;
+  border: 1px solid transparent;
+}
+.vtx-history-player .controls {
+  position: absolute;
+  bottom: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+  height: 30px;
+  padding: 0 12px;
+  background-color: #131d27;
+  border-bottom: 1px solid #52c41a;
+  opacity: 0;
+  -webkit-transition: opacity 0.5s;
+  transition: opacity 0.5s;
+}
+.vtx-history-player .controls .time {
+  padding: 4px 12px;
+  margin: 0 12px;
+  background-color: rgba(145, 165, 185, 0.3);
+}
+.vtx-history-player .controls .time .current {
+  color: white;
+}
+.vtx-history-player .controls .time .total {
+  color: rgba(255, 255, 255, 0.85);
+}
+.vtx-history-player .controls .slider {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  margin-right: 24px;
+}
+.vtx-history-player .controls .slider .ant-slider .ant-slider-rail {
+  background-color: #adb0b4;
+}
+.vtx-history-player .controls .right {
+  margin-left: auto;
+}
+.vtx-history-player .controls .right > div {
+  height: 24px;
+}
+.vtx-history-player:hover .controls {
+  opacity: 1;
+}
+.vtx-history-player video {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: fill;
+     object-fit: fill;
+}
+.vtx-history-player .sub-wnd {
+  width: 100% !important;
+  height: 100% !important;
+  pointer-events: none;
+  background-color: #2b3d51 !important;
+  border: 1px solid transparent !important;
+}
+.vtx-history-player .error-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.vtx-history-player .error-container .text {
+  margin: 20px 0;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.65);
+}
+.vtx-history-player .loading-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}

package/lib/history-player/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../controls/style';
+import './index.less';

package/lib/history-player/style/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+require("../../controls/style");
+
+require("./index.less");
+//# sourceMappingURL=index.js.map

package/lib/history-player/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["history-player/style/index.js"],"sourcesContent":["import '../../controls/style';\nimport './index.less';\n"],"mappings":";;AAAA;;AACA"}

package/lib/history-player/style/index.less

@@ -0,0 +1,98 @@
+.vtx-history-player {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #2b3d51;
+    border: 1px solid transparent;
+
+    .controls {
+        position: absolute;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 30px;
+        padding: 0 12px;
+        background-color: #131d27;
+        border-bottom: 1px solid rgba(82, 196 ,26 ,  1);
+        opacity: 0;
+        transition: opacity 0.5s;
+
+        .time {
+            padding: 4px 12px;
+            margin: 0 12px;
+            background-color: rgba(145 ,165, 185 , 0.3);
+
+            .current {
+                color: white;
+            }
+
+            .total {
+                color: rgba(255, 255 ,255 , .85);
+            }
+        }
+
+        .slider {
+            flex-grow: 1;
+            margin-right: 24px;
+
+            .ant-slider {
+                .ant-slider-rail {
+                    background-color: rgba(173, 176, 180,1);
+                }
+            }
+        }
+
+        .right {
+            margin-left: auto;
+
+            > div {
+                height: 24px;
+            }
+        }
+    }
+
+    &:hover {
+        .controls {
+            opacity: 1;
+        }
+    }
+
+    video {
+        width: 100%;
+        height: 100%;
+        object-fit: fill;
+    }
+
+    .sub-wnd {
+        width: 100% !important;
+        height: 100% !important;
+        pointer-events: none;
+        background-color: #2b3d51 !important;
+        border: 1px solid transparent !important;
+    }
+
+    .error-container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        transform: translate(-50%, -50%);
+
+        .text {
+            margin: 20px 0;
+            font-size: 14px;
+            color:rgba(255, 255 ,255 , .65);
+        }
+    }
+
+    .loading-container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}

package/lib/hooks/useSettings.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _context = require("../context");
+
+/**
+ * 获取配置信息
+ * @returns
+ */
+var useSettings = function useSettings() {
+  var _useContext = (0, _react.useContext)(_context.PlayerThemeContext),
+      theme = _useContext.theme;
+
+  return {
+    theme: theme,
+    isDark: theme === 'light'
+  };
+};
+
+var _default = useSettings;
+exports["default"] = _default;
+//# sourceMappingURL=useSettings.js.map

package/lib/hooks/useSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSettings.js","names":["useSettings","useContext","PlayerThemeContext","theme","isDark"],"sources":["hooks/useSettings.js"],"sourcesContent":["import { useContext } from 'react';\nimport { PlayerThemeContext } from '../context';\n/**\n * 获取配置信息\n * @returns\n */\nconst useSettings = () => {\n    const { theme } = useContext(PlayerThemeContext);\n    return { theme, isDark: theme === 'light' };\n};\nexport default useSettings;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;AACA;AACA;AACA;AACA,IAAMA,WAAW,GAAG,SAAdA,WAAc,GAAM;EACtB,kBAAkB,IAAAC,iBAAA,EAAWC,2BAAX,CAAlB;EAAA,IAAQC,KAAR,eAAQA,KAAR;;EACA,OAAO;IAAEA,KAAK,EAALA,KAAF;IAASC,MAAM,EAAED,KAAK,KAAK;EAA3B,CAAP;AACH,CAHD;;eAIeH,W"}

package/lib/icons/index.css

@@ -0,0 +1,28 @@
+.control-icon {
+  cursor: pointer;
+  fill: rgba(255, 255, 255, 0.65);
+}
+.control-icon > svg {
+  -webkit-transition: fill 0.3s;
+  transition: fill 0.3s;
+}
+.control-icon:hover {
+  fill: #40a9ff;
+}
+.control-icon.active {
+  fill: #1890ff;
+}
+.close-icon {
+  width: 14px;
+  cursor: pointer;
+  fill: rgba(255, 255, 255, 0.65);
+  -webkit-transition: -webkit-transform 0.3s;
+  transition: -webkit-transform 0.3s;
+  transition: transform 0.3s;
+  transition: transform 0.3s, -webkit-transform 0.3s;
+}
+.close-icon:hover {
+  -webkit-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+          transform: rotate(180deg);
+}