yootd 0.0.86 → 0.0.87-test

package/dist/video-player/index_back.js

@@ -0,0 +1,1197 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as faceapi from '@vladmandic/face-api';
+import * as posedetection from '@tensorflow-models/pose-detection';
+import * as tf from '@tensorflow/tfjs';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { EndPoint } from 'yootd-webrtc-sdk';
+import { useBem } from "../hooks/useBem";
+import "./index.scss";
+import { throttle } from 'lodash';
+import { message, Spin } from "./..";
+import { useOSS } from "../hooks/useOSS";
+import controlBottomBg from "./assets/control-background.png";
+var PROGRESS_BAR_HEIGHT = 63;
+var MIN_SCORE = 0.5; // minimum score
+var MAX_RESULTS = 20; // maximum number of results to return
+
+// print hello world
+
+var speeds = ['2.0', '1.75', '1.5', '1.25', '1.0', '0.75', '0.5'];
+export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var src = _ref.src,
+    isLive = _ref.isLive,
+    controls = _ref.controls,
+    autoPlay = _ref.autoPlay,
+    muted = _ref.muted,
+    style = _ref.style,
+    _ref$retry = _ref.retry,
+    retry = _ref$retry === void 0 ? false : _ref$retry,
+    _ref$retryInterval = _ref.retryInterval,
+    retryInterval = _ref$retryInterval === void 0 ? 5000 : _ref$retryInterval,
+    className = _ref.className,
+    _ref$audioEnable = _ref.audioEnable,
+    audioEnable = _ref$audioEnable === void 0 ? true : _ref$audioEnable,
+    _ref$videoEnable = _ref.videoEnable,
+    videoEnable = _ref$videoEnable === void 0 ? true : _ref$videoEnable,
+    _ref$rotateWhenFullSc = _ref.rotateWhenFullScreen,
+    rotateWhenFullScreen = _ref$rotateWhenFullSc === void 0 ? false : _ref$rotateWhenFullSc,
+    _ref$miniProgram = _ref.miniProgram,
+    miniProgram = _ref$miniProgram === void 0 ? false : _ref$miniProgram,
+    _ref$showCapture = _ref.showCapture,
+    showCapture = _ref$showCapture === void 0 ? true : _ref$showCapture,
+    onPlayStateChange = _ref.onPlayStateChange,
+    onCapture = _ref.onCapture,
+    onCurrentTimeChange = _ref.onCurrentTimeChange,
+    onError = _ref.onError;
+  var containerRef = useRef(null);
+  var videoRef = useRef(null);
+  var canvasRef = useRef(null);
+  var poseCanvasRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    poseDetector = _useState2[0],
+    setPoseDetector = _useState2[1];
+  var OSS = useOSS();
+  var bem = useBem('video-player');
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 1),
+    show = _useState4[0];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFullScreen = _useState6[0],
+    setIsFullScreen = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isPlaying = _useState8[0],
+    setIsPlaying = _useState8[1];
+  var _useState9 = useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    volume = _useState10[0],
+    setVolume = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    hasAudio = _useState12[0],
+    setHasAudio = _useState12[1];
+  var _useState13 = useState(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    currentTime = _useState14[0],
+    setCurrentTime = _useState14[1];
+  var _useState15 = useState(),
+    _useState16 = _slicedToArray(_useState15, 2),
+    duration = _useState16[0],
+    setDuration = _useState16[1];
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    showSpeedPicker = _useState18[0],
+    setShowSpeedPicker = _useState18[1];
+  var _useState19 = useState('1.0'),
+    _useState20 = _slicedToArray(_useState19, 2),
+    speed = _useState20[0],
+    setSpeed = _useState20[1];
+  var _useState21 = useState(false),
+    _useState22 = _slicedToArray(_useState21, 2),
+    showVolumeSlider = _useState22[0],
+    setShowVolumeSlider = _useState22[1];
+  var _useState23 = useState(false),
+    _useState24 = _slicedToArray(_useState23, 2),
+    mouseDown = _useState24[0],
+    setMouseDown = _useState24[1];
+  var _useState25 = useState(0),
+    _useState26 = _slicedToArray(_useState25, 2),
+    buffered = _useState26[0],
+    setBuffered = _useState26[1];
+  var _useState27 = useState(false),
+    _useState28 = _slicedToArray(_useState27, 2),
+    showSettingPanel = _useState28[0],
+    setShowSettingPanel = _useState28[1];
+  var _useState29 = useState({
+      emotion: false,
+      character: false,
+      anchor: false,
+      pose: false
+    }),
+    _useState30 = _slicedToArray(_useState29, 2),
+    aiFeature = _useState30[0],
+    setAIFeature = _useState30[1];
+  var _useState31 = useState(null),
+    _useState32 = _slicedToArray(_useState31, 2),
+    options = _useState32[0],
+    setOptions = _useState32[1];
+  var _useState33 = useState(false),
+    _useState34 = _slicedToArray(_useState33, 2),
+    faceApiInited = _useState34[0],
+    setFaceApiInited = _useState34[1];
+  var _useState35 = useState({
+      width: 0,
+      height: 0
+    }),
+    _useState36 = _slicedToArray(_useState35, 2),
+    canvasSize = _useState36[0],
+    setCanvasSize = _useState36[1];
+  var _useState37 = useState({
+      width: 0,
+      height: 0
+    }),
+    _useState38 = _slicedToArray(_useState37, 2),
+    videoEleSize = _useState38[0],
+    setVideoEleSize = _useState38[1];
+  var _useState39 = useState(false),
+    _useState40 = _slicedToArray(_useState39, 2),
+    isSeeking = _useState40[0],
+    setIsSeeking = _useState40[1];
+  var _useState41 = useState(false),
+    _useState42 = _slicedToArray(_useState41, 2),
+    isError = _useState42[0],
+    setIsError = _useState42[1];
+  var _useState43 = useState(),
+    _useState44 = _slicedToArray(_useState43, 2),
+    features = _useState44[0],
+    setFeatures = _useState44[1];
+  useImperativeHandle(ref, function () {
+    return {
+      play: function play() {
+        var _videoRef$current;
+        void ((_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.play());
+      },
+      pause: function pause() {
+        var _videoRef$current2;
+        (_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 || _videoRef$current2.pause();
+      },
+      // 设置播放时间
+      setVideoCurrentTime: function setVideoCurrentTime(time) {
+        // 判断是否为数字
+        if (typeof time !== 'number' || isNaN(time)) {
+          return;
+        }
+        if (videoRef.current) {
+          videoRef.current.currentTime = time;
+        }
+      },
+      // 使用启用面部表情/角色/锚点/姿态
+      useFaceExpression: function useFaceExpression(type, use) {
+        setAIFeature(function () {
+          return _defineProperty({
+            emotion: false,
+            character: false,
+            anchor: false,
+            pose: false
+          }, type, use);
+        });
+      },
+      currentTime: function (_currentTime) {
+        function currentTime() {
+          return _currentTime.apply(this, arguments);
+        }
+        currentTime.toString = function () {
+          return _currentTime.toString();
+        };
+        return currentTime;
+      }(function () {
+        return currentTime;
+      })
+    };
+  });
+  var handleFullScreen = function handleFullScreen() {
+    if (containerRef.current != null) {
+      void containerRef.current.requestFullscreen();
+    }
+  };
+  var handleExitFullScreen = function handleExitFullScreen() {
+    if (document.exitFullscreen) {
+      void document.exitFullscreen();
+    }
+  };
+  var handleCanPlay = function handleCanPlay(e) {
+    var video = e.target;
+    try {
+      var _video$audioTracks;
+      setHasAudio(
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      video.mozHasAudio ||
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      Boolean(video.webkitAudioDecodedByteCount) ||
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      Boolean((_video$audioTracks = video.audioTracks) === null || _video$audioTracks === void 0 ? void 0 : _video$audioTracks.length));
+      // console.log(
+      //   '是否包含音频: ',
+      //   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //   // @ts-expect-error
+      //   video.mozHasAudio ||
+      //     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //     // @ts-expect-error
+      //     Boolean(video.webkitAudioDecodedByteCount) ||
+      //     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //     // @ts-expect-error
+      //     Boolean(video.audioTracks?.length),
+      // );
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  var handlePlayAndStop = function handlePlayAndStop() {
+    try {
+      if (isPlaying) {
+        var _videoRef$current3;
+        (_videoRef$current3 = videoRef.current) === null || _videoRef$current3 === void 0 || _videoRef$current3.pause();
+      } else {
+        var _videoRef$current4;
+        void ((_videoRef$current4 = videoRef.current) === null || _videoRef$current4 === void 0 ? void 0 : _videoRef$current4.play());
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  var handleOnTimeUpdate = function handleOnTimeUpdate(e) {
+    var _ele$currentTime, _ele$currentTime2;
+    if (isLive) {
+      return;
+    }
+    var ele = e.target;
+    setCurrentTime((_ele$currentTime = ele.currentTime) !== null && _ele$currentTime !== void 0 ? _ele$currentTime : 0);
+    onCurrentTimeChange === null || onCurrentTimeChange === void 0 || onCurrentTimeChange((_ele$currentTime2 = ele.currentTime) !== null && _ele$currentTime2 !== void 0 ? _ele$currentTime2 : 0);
+    if (ele.buffered != null) {
+      try {
+        setBuffered(ele.buffered.end(0));
+      } catch (e) {
+        console.log(e);
+      }
+    }
+  };
+  var handleOnLoadMetadata = function handleOnLoadMetadata() {
+    if (videoRef.current == null) {
+      return;
+    }
+    setVideoEleSize({
+      width: videoRef.current.videoWidth,
+      height: videoRef.current.videoHeight
+    });
+    if (!isLive) {
+      console.log('videoRef.current.duration', videoRef.current.duration);
+      setDuration(videoRef.current.duration);
+    }
+  };
+
+  // convert video duration (seconds) to hh::mm:ss if the duration is larger than 3600 , else convert to mm:ss
+  var formatDuration = function formatDuration(duration) {
+    console.log('duration 111111111', duration);
+    var hours = Math.floor(duration / 3600);
+    var minutes = Math.floor(duration % 3600 / 60);
+    var seconds = Math.floor(duration % 60);
+    return duration > 3600 ? "".concat(hours.toString().padStart(2, '0'), ":").concat(minutes.toString().padStart(2, '0'), ":").concat(seconds.toString().padStart(2, '0')) : "".concat(minutes.toString().padStart(2, '0'), ":").concat(seconds.toString().padStart(2, '0'));
+  };
+  var handleOnSpeedSelect = function handleOnSpeedSelect(speed) {
+    setSpeed(speed);
+    setShowSpeedPicker(false);
+    if (videoRef.current != null) {
+      videoRef.current.playbackRate = Number(speed);
+    }
+  };
+  var handleShowSpeedPicker = function handleShowSpeedPicker() {
+    setShowSpeedPicker(true);
+  };
+  var handleShowVolumeSlider = function handleShowVolumeSlider() {
+    if (hasAudio) {
+      setShowVolumeSlider(true);
+    }
+  };
+  var handleHideVolumeSlider = function handleHideVolumeSlider() {
+    setShowVolumeSlider(false);
+    setMouseDown(false);
+  };
+  var handleOnMouseMove = function handleOnMouseMove(e) {
+    var _e$currentTarget;
+    if (!mouseDown) {
+      return;
+    }
+    var progress = (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.querySelector('.progress-bar');
+    if (progress != null) {
+      var rect = progress.getBoundingClientRect();
+      var _volume = (rect.bottom - e.clientY) / PROGRESS_BAR_HEIGHT * 100;
+      if (_volume > 100) {
+        _volume = 100;
+      } else if (_volume < 0) {
+        _volume = 0;
+      }
+      setVolume(_volume);
+      if (videoRef.current != null) {
+        videoRef.current.muted = false;
+        videoRef.current.volume = Math.floor(volume) / 100;
+      }
+    }
+  };
+  var handleOnMouseDown = function handleOnMouseDown() {
+    setMouseDown(true);
+  };
+  var handleSetCurrentTime = function handleSetCurrentTime(e) {
+    if (duration == null) {
+      return;
+    }
+    var ele = e.currentTarget;
+    var rect = ele.getBoundingClientRect();
+    var currentTime = (e.clientX - rect.x) / rect.width * duration;
+    if (videoRef.current != null) {
+      videoRef.current.currentTime = currentTime;
+    }
+  };
+  var handleShowSettingPanel = function handleShowSettingPanel(e) {
+    e.stopPropagation();
+    setShowSettingPanel(function (prev) {
+      return !prev;
+    });
+  };
+  var initFaceApi = useCallback(function () {
+    void _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return faceapi.nets.ssdMobilenetv1.load("".concat(OSS, "/model-zoo/face-api-models/model"));
+          case 3:
+            _context.next = 5;
+            return faceapi.nets.ssdMobilenetv1.load("".concat(OSS, "/model-zoo/face-api-models/model"));
+          case 5:
+            _context.next = 7;
+            return faceapi.nets.ageGenderNet.load("".concat(OSS, "/face-api-models/model"));
+          case 7:
+            _context.next = 9;
+            return faceapi.nets.faceLandmark68Net.load("".concat(OSS, "/model-zoo/face-api-models/model"));
+          case 9:
+            _context.next = 11;
+            return faceapi.nets.faceRecognitionNet.load("".concat(OSS, "/model-zoo/face-api-models/model"));
+          case 11:
+            _context.next = 13;
+            return faceapi.nets.faceExpressionNet.load("".concat(OSS, "/model-zoo/face-api-models/model"));
+          case 13:
+            setOptions(new faceapi.SsdMobilenetv1Options({
+              minConfidence: MIN_SCORE,
+              maxResults: MAX_RESULTS
+            }));
+            setFaceApiInited(true);
+            _context.next = 20;
+            break;
+          case 17:
+            _context.prev = 17;
+            _context.t0 = _context["catch"](0);
+            console.log(_context.t0);
+          case 20:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 17]]);
+    }))();
+  }, []);
+  var initPoseDetecter = useCallback(function () {
+    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var detectorConfig, _poseDetector;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.prev = 0;
+            detectorConfig = {
+              modelType: posedetection.movenet.modelType.MULTIPOSE_LIGHTNING,
+              enableTracking: true,
+              trackerType: posedetection.TrackerType.BoundingBox,
+              scoreThreshold: 0.3,
+              modelUrl: "".concat(OSS, "/model-zoo/pose-detection-models/model.json")
+            };
+            _context2.next = 4;
+            return posedetection.createDetector(posedetection.SupportedModels.MoveNet, detectorConfig);
+          case 4:
+            _poseDetector = _context2.sent;
+            setPoseDetector(_poseDetector);
+            _context2.next = 11;
+            break;
+          case 8:
+            _context2.prev = 8;
+            _context2.t0 = _context2["catch"](0);
+            void message.error('初始化姿态检测器失败');
+          case 11:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[0, 8]]);
+    }))();
+  }, []);
+  var drawFaces = useCallback(function (canvas, detections, fps, faceFeature) {
+    var ctx = canvas.getContext('2d', {
+      willReadFrequently: true
+    });
+    if (!ctx) {
+      return;
+    }
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = 'white';
+    ctx.font = 'small-caps 20px "Segoe UI"';
+    ctx.fillText("FPS: ".concat(fps), 10, 25);
+    var _iterator = _createForOfIteratorHelper(detections),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var person = _step.value;
+        // draw box around each face
+        ctx.lineWidth = 3;
+        ctx.strokeStyle = '#7aff00';
+        ctx.fillStyle = '#7aff00';
+        ctx.globalAlpha = 0.6;
+        ctx.beginPath();
+        ctx.rect(person.detection.box.x, person.detection.box.y, person.detection.box.width, person.detection.box.height);
+        ctx.stroke();
+        ctx.globalAlpha = 1;
+        // draw text labels
+        var expression = Object.entries(person.expressions).sort(function (a, b) {
+          return b[1] - a[1];
+        });
+        ctx.fillStyle = 'black';
+        // if (faceFeature.character) {
+        //   ctx.fillText(
+        //     `性别: ${Math.round(100 * person.genderProbability)}% ${
+        //       person.gender
+        //     }`,
+        //     person.detection.box.x,
+        //     person.detection.box.y - 59
+        //   );
+        //   ctx.fillText(
+        //     `age: ${Math.round(person.age)} years`,
+        //     person.detection.box.x,
+        //     person.detection.box.y - 23
+        //   );
+        // }
+        // if (faceFeature.emotion) {
+        //   ctx.fillText(
+        //     `expression: ${Math.round(100 * expression[0][1])}% ${
+        //       expression[0][0]
+        //     }`,
+        //     person.detection.box.x,
+        //     person.detection.box.y - 41
+        //   );
+        // }
+        // ctx.fillText(
+        //   `roll:${person.angle.roll}° pitch:${person.angle.pitch}° yaw:${person.angle.yaw}°`,
+        //   person.detection.box.x,
+        //   person.detection.box.y - 5
+        // );
+        var genderMap = {
+          male: '男',
+          female: '女'
+        };
+        var emotionMap = {
+          neutral: '平静',
+          happy: '开心',
+          sad: '伤心',
+          angry: '愤怒',
+          fearful: '恐惧',
+          disgusted: '厌恶',
+          surprised: '惊讶'
+        };
+        ctx.fillStyle = '#7aff00';
+        if (faceFeature.character) {
+          var _genderMap$person$gen;
+          ctx.fillText("\u6027\u522B: ".concat(Math.round(100 * person.genderProbability), "% ").concat((_genderMap$person$gen = genderMap[person.gender]) !== null && _genderMap$person$gen !== void 0 ? _genderMap$person$gen : ''), person.detection.box.x, person.detection.box.y - 65);
+          ctx.fillText("\u5E74\u9F84: ".concat(Math.round(person.age), " \u5C81"), person.detection.box.x,
+          // person.detection.box.y - 20
+          person.detection.box.y - 42);
+        }
+        if (faceFeature.emotion) {
+          var _emotionMap;
+          ctx.fillText("\u8868\u60C5: ".concat(Math.round(100 * expression[0][1]), "% ").concat( // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-expect-error
+          (_emotionMap = emotionMap[expression[0][0]]) !== null && _emotionMap !== void 0 ? _emotionMap : ''), person.detection.box.x, person.detection.box.y - 20
+          // person.detection.box.y - 42
+          );
+        }
+        // ctx.fillText(
+        // 	`roll:${person.angle.roll}° pitch:${person.angle.pitch}° yaw:${person.angle.yaw}°`,
+        // 	person.detection.box.x,
+        // 	person.detection.box.y - 6
+        // );
+        // draw face points for each face
+        ctx.globalAlpha = 0.8;
+        ctx.fillStyle = '#7aff00';
+        var pointSize = 2;
+        if (faceFeature.anchor) {
+          for (var i = 0; i < person.landmarks.positions.length; i++) {
+            ctx.beginPath();
+            ctx.arc(person.landmarks.positions[i].x, person.landmarks.positions[i].y, pointSize, 0, 2 * Math.PI);
+            ctx.fill();
+          }
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }, []);
+  var detectFaces = useCallback(function () {
+    return new Promise(function (resolve, reject) {
+      if (videoRef.current != null && options != null && faceApiInited) {
+        var t0 = performance.now();
+        faceapi.detectAllFaces(videoRef.current, options).withFaceLandmarks().withFaceExpressions().withAgeAndGender()
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        .then(function (detections) {
+          if (canvasRef.current != null) {
+            var fps = 1000 / (performance.now() - t0);
+            drawFaces(canvasRef.current, detections, fps.toLocaleString(), aiFeature);
+            resolve(true);
+          } else {
+            reject(false);
+          }
+        }).catch(function (e) {
+          reject(e);
+        });
+      }
+    });
+
+    // 肢体检测
+  }, [drawFaces, faceApiInited, aiFeature, options]);
+  var drawKeyPoints = function drawKeyPoints(keypoints, ctx) {
+    keypoints.forEach(function (keypoint) {
+      if (keypoint.score && keypoint.score > 0.3) {
+        ctx.beginPath();
+        ctx.arc(keypoint.x, keypoint.y, 5, 0, 2 * Math.PI);
+        ctx.fillStyle = 'red';
+        ctx.fill();
+
+        // 添加关键点标签，帮助调试
+        ctx.fillStyle = 'white';
+        ctx.fillText("".concat(Math.round(keypoint.score * 100), "%"), keypoint.x + 5, keypoint.y - 5);
+      }
+    });
+  };
+
+  // 绘制骨架
+  var drawSkeleton = function drawSkeleton(keypoints, ctx) {
+    var adjacentPairs = posedetection.util.getAdjacentPairs(posedetection.SupportedModels.MoveNet);
+    adjacentPairs.forEach(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+        i = _ref6[0],
+        j = _ref6[1];
+      var kp1 = keypoints[i];
+      var kp2 = keypoints[j];
+      if (kp1.score && kp2.score && kp1.score > 0.3 && kp2.score > 0.3) {
+        ctx.beginPath();
+        ctx.moveTo(kp1.x, kp1.y);
+        ctx.lineTo(kp2.x, kp2.y);
+        ctx.strokeStyle = 'blue';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+      }
+    });
+  };
+  var drawPose = useCallback(function (canvas, pose) {
+    var ctx = canvas.getContext('2d');
+    if (ctx == null) {
+      return;
+    }
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    pose.forEach(function (p) {
+      drawKeyPoints(p.keypoints, ctx);
+      drawSkeleton(p.keypoints, ctx);
+    });
+  }, []);
+  var detectPose = useCallback(function () {
+    if (poseDetector == null || videoRef.current == null || poseCanvasRef.current == null) {
+      return;
+    }
+    var video = videoRef.current;
+    var canvas = poseCanvasRef.current;
+    var detect = /*#__PURE__*/function () {
+      var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        var pose;
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              _context3.next = 3;
+              return poseDetector.estimatePoses(video, {
+                flipHorizontal: false,
+                maxPoses: 1
+              });
+            case 3:
+              pose = _context3.sent;
+              drawPose(canvas, pose);
+              _context3.next = 10;
+              break;
+            case 7:
+              _context3.prev = 7;
+              _context3.t0 = _context3["catch"](0);
+              console.error('检测肢体失败', _context3.t0);
+            case 10:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, null, [[0, 7]]);
+      }));
+      return function detect() {
+        return _ref7.apply(this, arguments);
+      };
+    }();
+    detect();
+  }, [poseDetector]);
+  var handleCapture = function handleCapture() {
+    if (videoRef.current != null) {
+      var _canvas$getContext;
+      // 检查 video 是否加载完成
+      if (videoRef.current.readyState !== 4) {
+        return;
+      }
+      var canvas = document.createElement('canvas');
+      canvas.width = videoRef.current.videoWidth;
+      canvas.height = videoRef.current.videoHeight;
+      (_canvas$getContext = canvas.getContext('2d')) === null || _canvas$getContext === void 0 || _canvas$getContext.drawImage(videoRef.current, 0, 0);
+      // 获取 base64
+      var _base = canvas.toDataURL('image/png');
+      onCapture === null || onCapture === void 0 || onCapture(_base);
+    }
+  };
+  // 开始跳转时触发
+  var handleSeeking = function handleSeeking() {
+    setIsSeeking(true);
+  };
+
+  // 跳转完成时触发
+  var handleSeeked = function handleSeeked() {
+    setIsSeeking(false);
+  };
+  var handleVideoError = function handleVideoError(e) {
+    var video = e.currentTarget;
+
+    // 获取具体的错误代码
+    var error = video.error;
+    setIsError(true);
+    if (error) {
+      switch (error.code) {
+        case MediaError.MEDIA_ERR_ABORTED:
+          onError === null || onError === void 0 || onError('视频加载已终止');
+          break;
+        case MediaError.MEDIA_ERR_NETWORK:
+          onError === null || onError === void 0 || onError('网络错误导致视频加载失败');
+          break;
+        case MediaError.MEDIA_ERR_DECODE:
+          onError === null || onError === void 0 || onError('视频解码失败');
+          break;
+        case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
+          onError === null || onError === void 0 || onError('视频格式不支持或链接无效');
+          break;
+        default:
+          onError === null || onError === void 0 || onError('发生未知错误');
+      }
+    }
+  };
+  useEffect(function () {
+    var player = null;
+    if (isLive && videoRef.current != null) {
+      player = new EndPoint({
+        element: videoRef.current,
+        zlmsdpUrl: src,
+        recvOnly: true,
+        audioEnable: audioEnable,
+        videoEnable: videoEnable,
+        autoReconnect: retry,
+        reconnectInterval: retryInterval
+      });
+    }
+    return function () {
+      if (player != null) {
+        player.close();
+      }
+    };
+  }, [isLive, src, audioEnable, videoEnable, retry, retryInterval]);
+  useEffect(function () {
+    if (!isLive && videoRef.current != null) {
+      videoRef.current.src = src;
+    }
+  }, [isLive, src]);
+  useEffect(function () {
+    var dom = containerRef.current;
+    var handleFullScreenChange = function handleFullScreenChange(e) {
+      var ele = e.target;
+      if (document.fullscreenElement === ele) {
+        setIsFullScreen(true);
+      } else {
+        setIsFullScreen(false);
+      }
+    };
+    if (dom != null) {
+      dom.addEventListener('fullscreenchange', handleFullScreenChange);
+    }
+    return function () {
+      dom === null || dom === void 0 || dom.removeEventListener('fullscreenchange', handleFullScreen);
+    };
+  }, []);
+  useEffect(function () {
+    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            _context4.prev = 0;
+            _context4.next = 3;
+            return tf.ready();
+          case 3:
+            if ((aiFeature.emotion || aiFeature.character || aiFeature.anchor) && !faceApiInited) {
+              // 开始初始化人脸
+              initFaceApi();
+            }
+            if (aiFeature.pose && !poseDetector) {
+              initPoseDetecter();
+            }
+            _context4.next = 9;
+            break;
+          case 7:
+            _context4.prev = 7;
+            _context4.t0 = _context4["catch"](0);
+          case 9:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4, null, [[0, 7]]);
+    }))();
+  }, [aiFeature, faceApiInited, initFaceApi, initPoseDetecter, poseDetector]);
+  useEffect(function () {
+    if (features == null) {
+      return;
+    }
+    if (!showSettingPanel) {
+      setAIFeature(function (prev) {
+        var cloned = _objectSpread({}, prev);
+        return Object.assign(cloned, features);
+      });
+    }
+  }, [features, showSettingPanel]);
+  useEffect(function () {
+    var handler = null;
+    // let lastTime = Date.now();
+    /* const start = () => {
+    if (
+    !faceFeature.anchor &&
+    !faceFeature.emotion &&
+    !faceFeature.character
+    ) {
+    return;
+    }
+    if (lastTime + 1000 <= Date.now()) {
+    lastTime = Date.now();
+    detect()
+    .catch((e) => {
+    console.log("error", e);
+    })
+    .finally(() => {
+    handler = requestAnimationFrame(start);
+    });
+    } else {
+    handler = requestAnimationFrame(start);
+    }
+    }; */
+
+    var lastTime = 0;
+    var fps = 30;
+    var start = function start(currentTime) {
+      if (currentTime - lastTime < 1000 / fps) {
+        handler = requestAnimationFrame(start);
+        return;
+      }
+      lastTime = currentTime;
+      if (aiFeature.anchor || aiFeature.emotion || aiFeature.character) {
+        detectFaces().catch(function (e) {
+          console.log('error', e);
+        }).finally(function () {});
+      }
+      if (aiFeature.pose) {
+        detectPose();
+      }
+      handler = requestAnimationFrame(start);
+    };
+    start(0);
+    return function () {
+      if (handler != null) {
+        cancelAnimationFrame(handler);
+      }
+    };
+  }, [detectFaces, detectPose, aiFeature.anchor, aiFeature.character, aiFeature.emotion, aiFeature.pose]);
+  useEffect(function () {
+    var handleClick = function handleClick() {
+      setShowSettingPanel(false);
+    };
+    window.addEventListener('click', handleClick);
+    return function () {
+      window.removeEventListener('click', handleClick);
+    };
+  }, []);
+  useEffect(function () {
+    if (videoRef.current != null) {
+      var resizeObserver = new ResizeObserver(function (entries) {
+        var entry = entries[0];
+        if (entry != null) {
+          setCanvasSize({
+            width: entry.contentRect.width,
+            height: entry.contentRect.height
+          });
+        }
+      });
+      resizeObserver.observe(videoRef.current);
+    }
+  }, []);
+  useEffect(function () {
+    if (videoRef.current == null) {
+      return;
+    }
+    var handlePlaying = function handlePlaying() {
+      setIsPlaying(true);
+      onPlayStateChange === null || onPlayStateChange === void 0 || onPlayStateChange(true);
+    };
+    var handlePause = function handlePause() {
+      setIsPlaying(false);
+      onPlayStateChange === null || onPlayStateChange === void 0 || onPlayStateChange(false);
+    };
+    videoRef.current.addEventListener('playing', handlePlaying);
+    videoRef.current.addEventListener('pause', handlePause);
+    return function () {
+      if (videoRef.current != null) {
+        videoRef.current.removeEventListener('playing', handlePlaying);
+        videoRef.current.removeEventListener('pause', handlePause);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: "".concat(bem, " ").concat(className !== null && className !== void 0 ? className : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(isFullScreen && rotateWhenFullScreen ? bem.m('full-screened') : '', " ").concat(bem.b('container'))
+  }, /*#__PURE__*/React.createElement(Spin, {
+    spinning: isSeeking,
+    delay: 100,
+    tip: /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'black'
+      }
+    }, "\u89C6\u9891\u6B63\u5728\u7F13\u51B2\u4E2D...")
+  }, /*#__PURE__*/React.createElement("video", {
+    ref: videoRef,
+    muted: muted !== null && muted !== void 0 ? muted : false,
+    autoPlay: autoPlay !== null && autoPlay !== void 0 ? autoPlay : false,
+    onCanPlay: handleCanPlay,
+    onTimeUpdate: handleOnTimeUpdate,
+    onLoadedMetadata: handleOnLoadMetadata,
+    className: "".concat(bem.b('container').e('video')),
+    crossOrigin: 'anonymous'
+    // eslint-disable-next-line react/no-unknown-property
+    ,
+    "x5-video-player-type": miniProgram ? 'h5' : undefined
+    // style={{backgroundColor: "black", ...(style ?? {})}}
+    ,
+    style: _objectSpread({}, style !== null && style !== void 0 ? style : {}),
+    onSeeking: handleSeeking // 添加seeking事件监听
+    ,
+    onSeeked: handleSeeked,
+    onError: handleVideoError
+  })), controls === true && show && !isError && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls'))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('mask')),
+    style: {
+      backgroundImage: "url(\"".concat(controlBottomBg, "\")")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('progress')),
+    onClick: handleSetCurrentTime
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('progress-bar'))
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('progress-bar')),
+    style: {
+      width: duration != null ? "".concat(buffered / duration * 100, "%") : '0%'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('progress-bar')),
+    style: {
+      width: duration != null ? "".concat(currentTime / duration * 100, "%") : '0%',
+      backgroundColor: '#00adec'
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-content'))
+  }, !isPlaying ? /*#__PURE__*/React.createElement("svg", {
+    className: "".concat(bem.b('container').e('controls-icon')),
+    onClick: handlePlayAndStop,
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "200",
+    height: "200"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M177.26002244 1020.68826978c-8.39476931 0-16.78529945-2.08703457-24.36334146-6.21023633-16.33313206-8.95150085-26.50548539-26.04060047-26.50548539-44.65859052L126.39119559 54.20316557c0-18.61799004 10.17235194-35.76219902 26.50548539-44.66565629 16.27661148-8.95291345 36.21436639-8.18564235 51.88479014 1.88214681L916.92809291 469.23344724c14.54989766 9.35562463 23.34737815 25.48528291 23.34737816 42.77785771 0 17.29257478-8.79748049 33.42081908-23.34737816 42.78209687L204.78147112 1012.60153981C196.38528784 1017.94559264 186.82618801 1020.68826978 177.26002244 1020.68826978L177.26002244 1020.68826978zM177.26002244 1020.68826978",
+    fill: "#ffffff"
+  })) : /*#__PURE__*/React.createElement("svg", {
+    className: "".concat(bem.b('container').e('controls-icon')),
+    onClick: handlePlayAndStop,
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "200",
+    height: "200"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M389.07152284 985.52773717c0 23.49913734-19.22615598 42.72529332-42.72529333 42.7252933L178.5559691 1028.25303047c-23.49913734 0-42.72529332-19.22615598-42.72529333-42.7252933l0-941.80430386c0-23.49913734 19.22615598-42.72529332 42.72529333-42.72529331l167.79026041 0c23.49913734 0 42.72529332 19.22615598 42.72529333 42.72529331L389.07152284 985.52773717z",
+    fill: "#ffffff"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M877.46200022 985.52773717c0 23.49913734-19.22615598 42.72529332-42.72529332 42.7252933l-167.79026043 0c-23.49913734 0-42.72529332-19.22615598-42.72529332-42.7252933l0-941.80430386c0-23.49913734 19.22615598-42.72529332 42.72529332-42.72529331l167.79026043 0c23.49913734 0 42.72529332 19.22615598 42.72529332 42.72529331L877.46200022 985.52773717z",
+    fill: "#ffffff"
+  })), !isLive ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(bem.b('container').e('controls-text')),
+    style: {
+      color: 'white'
+    }
+  }, formatDuration(currentTime), /*#__PURE__*/React.createElement(React.Fragment, null, duration != null && duration !== 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, "/ ", formatDuration(duration)) : null)) : null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-speed'), " ").concat(isLive ? bem.m('controls-speed').m('disabled') : ''),
+    style: {
+      color: !isLive ? 'white' : 'gray'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    onClick: handleShowSpeedPicker
+  }, speed === '1.0' ? '倍速' : "".concat(speed, "x")), showSpeedPicker ? /*#__PURE__*/React.createElement("ul", {
+    className: "".concat(bem.b('container').e('controls-speed-picker-container')),
+    style: {
+      backgroundColor: 'rgba(0,0,0,.8)'
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setShowSpeedPicker(false);
+    }
+  }, speeds === null || speeds === void 0 ? void 0 : speeds.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: index,
+      onClick: function onClick() {
+        return handleOnSpeedSelect(item);
+      },
+      className: "".concat(bem.b('container').e('controls-speeds'), " ").concat(item === speed ? bem.b('container').e('controls-speeds').m('selected') : '')
+    }, item);
+  })) : null), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-volume')),
+    onClick: handleShowVolumeSlider
+  }, volume !== 0 ? /*#__PURE__*/React.createElement("svg", {
+    className: "".concat(bem.b('container').e('controls-volume').e('icon')),
+    style: {
+      color: 'white'
+    },
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "200",
+    height: "200"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M92.5696 768.31857778a93.20675555 93.20675555 0 0 1-93.20675555-93.20675556V348.88817778a93.20675555 93.20675555 0 0 1 93.20675555-93.20675556h186.41351111l195.26815289-169.2401664A93.20675555 93.20675555 0 0 1 628.50844445 156.88226133v710.23547734a93.20675555 93.20675555 0 0 1-154.25718045 70.44100551L278.98311111 768.31857778H92.5696z m779.18517475-586.50350933A407.40672853 407.40672853 0 0 1 1024.63715555 500.34915555a407.40672853 407.40672853 0 0 1-152.8823808 318.53408712 34.95253333 34.95253333 0 0 1-43.76057173-54.525952 337.50166187 337.50166187 0 0 0 126.76118756-264.00813512c0-103.99543751-47.18592-200.16150755-126.76118756-264.0081351a34.95253333 34.95253333 0 1 1 43.76057173-54.525952z m-130.8389831 137.87609315C808.63049955 364.19738738 849.87448889 434.80150471 849.87448889 512c0 77.19849529-41.24398933 147.80261262-108.95869724 192.3088384a34.95253333 34.95253333 0 1 1-38.4011833-58.39403235C751.30834489 613.82838045 779.96942222 564.70842027 779.96942222 512s-28.68437902-101.85168213-77.45481387-133.91480605a34.95253333 34.95253333 0 1 1 38.4011833-58.39403235z",
+    style: {
+      fill: 'currentcolor'
+    }
+  })) : /*#__PURE__*/React.createElement("svg", {
+    className: "".concat(bem.b('container').e('controls-volume').e('icon'), " ").concat(!hasAudio ? "".concat(bem.m('controls-volume').e('icon').m('disabled')) : ''),
+    style: {
+      color: hasAudio ? 'white' : 'gray'
+    },
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "200",
+    height: "200"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M516.55839289 644.67399111v217.71423289L425.95365925 780.04102637 277.57165985 645.11696592a45.46256592 45.46256592 0 0 0-30.54584415-11.78919822l-138.33071881 0.04369067-0.44782934-291.05993955h105.94865304l-90.64235614-90.64235615h-15.3062969c-49.88867318 0.19903525-90.2224403 40.72091497-90.1945268 90.59866548v291.10363022c0 49.96634548 40.47212089 90.59866548 90.1945268 90.59866548h121.27679527L425.95365925 902.55572385l72.06775467 65.49352297c18.17653097 16.50050845 35.39550815 21.10137837 48.94811023 21.10137836 10.46270103 0 18.80640475-2.74280297 23.61116444-4.88850015 11.05980682-4.88850015 36.70622815-20.92418845 36.70622816-64.2993114V735.40494222l-90.72852386-90.73095111zM918.12173748 546.86636563c0 88.342528-22.64996978 152.06536533-47.47233659 195.68442785l63.29806696 63.30413511c36.10912237-55.672832 71.01189689-140.10019082 71.0118969-259.03225362 0-241.58025955-149.30071703-341.37945125-155.68804978-345.49365572a42.860544 42.860544 0 0 0-32.59687822-5.88367643 42.958848 42.958848 0 0 0-27.05059083 19.11102577c-12.97248711 20.32708267-7.38736355 47.31213748 12.60233008 60.82590341 4.66640592 3.16150518 115.89556148 80.11290548 115.89556148 271.48409363z",
+    style: {
+      fill: 'currentcolor'
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M676.68589985 410.21652385c2.7646483 1.43815111 67.79941925 35.70012918 67.79941926 133.42037333 0 25.19373748-3.65545245 46.11792592-9.05731793 63.67914667l66.28359585 66.289664c16.6667757-32.5592557 29.56765867-74.65035852 29.56765867-129.92512 0-155.22929778-112.40152178-210.65819022-117.15652267-212.95801837v0.04369067a42.94185718 42.94185718 0 0 0-32.92334458-1.57043674 42.90059378 42.90059378 0 0 0-24.31992415 22.22884029c-10.28551111 21.74338845-1.53766875 47.710208 19.80643555 58.79186015zM397.38239052 269.27650133l28.53364623-25.94497422 90.64235614-82.39210193V388.4525037l90.73095111 90.73095112V103.38668089c0-29.9705837-13.7746963-53.90336-36.84458192-64.14396681-11.09864297-4.88850015-40.38352592-13.09385008-72.51072949 16.14612859l-71.9791597 65.42677333-92.72737186 84.29385955 64.15488949 64.16702578zM897.04341808 942.34821215c-11.59016297 0-23.18032592-4.42368-32.02768593-13.27104l-770.0844089-770.0844089c-17.69472-17.69472-17.69472-46.36065185 0-64.05537184 17.69472-17.69472 46.36065185-17.69472 64.05537186 0l770.08440889 770.08319526c17.69472 17.69472 17.69472 46.36065185 0 64.05537185-8.84736 8.84857363-20.43752297 13.27225363-32.02768592 13.27225363z",
+    style: {
+      fill: 'currentcolor'
+    }
+  })), showVolumeSlider ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-volume').e('slider')),
+    onMouseUp: function onMouseUp() {
+      return setMouseDown(false);
+    },
+    onMouseMove: throttle(handleOnMouseMove, 10),
+    onMouseLeave: handleHideVolumeSlider
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-volume').e('slider').e('number'))
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(bem.b('container').e('controls-volume').e('slider').e('number').e('text'))
+  }, Math.floor(volume))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-volume').e('slider').e('progress-bar'))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-volume').e('slider').e('progress-bar').e('line'), " progress-bar")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-volume').e('slider').e('progress-bar').e('line').e('button-1')),
+    style: {
+      top: "".concat(100 - volume, "%")
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-volume').e('slider').e('progress-bar').e('button-2')),
+    style: {
+      top: "calc(".concat(100 - volume, "% - 9px)")
+    },
+    onMouseDown: handleOnMouseDown
+  }))) : null), showCapture ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-capture'))
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 16 16",
+    fill: "#ffffff",
+    xmlns: "http://www.w3.org/2000/svg",
+    onClick: handleCapture
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Frame"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Vector",
+    d: "M13.8982 2.31663C13.9446 2.39087 13.976 2.47352 13.9904 2.55987C14.0049 2.64622 14.0022 2.73457 13.9825 2.81987C13.9628 2.90518 13.9265 2.98577 13.8757 3.05705C13.8249 3.12833 13.7605 3.1889 13.6862 3.2353L9.26624 5.99663L11.9429 7.66863L11.9782 7.66996C12.7357 7.70479 13.4555 8.01026 14.0069 8.53084C14.5582 9.05142 14.9044 9.75255 14.9826 10.5068C15.0608 11.261 14.8657 12.0182 14.4329 12.6408C14.0001 13.2634 13.3582 13.7101 12.624 13.8995C11.8898 14.089 11.112 14.0087 10.4319 13.6732C9.75191 13.3378 9.21482 12.7695 8.9183 12.0716C8.62178 11.3737 8.58553 10.5926 8.81613 9.87026C9.04673 9.14791 9.52887 8.53228 10.1749 8.1353L8.00891 6.78263L5.83424 8.14063C6.48043 8.54091 6.96107 9.16026 7.1884 9.88559C7.41573 10.6109 7.37458 11.3938 7.07246 12.0913C6.77034 12.7888 6.22741 13.3543 5.54282 13.6847C4.85823 14.015 4.07767 14.0881 3.34367 13.8905C2.60968 13.693 1.97123 13.238 1.54492 12.6087C1.11862 11.9793 0.932898 11.2177 1.02168 10.4628C1.11047 9.70786 1.46783 9.01007 2.02851 8.49684C2.58919 7.9836 3.31578 7.68916 4.07558 7.6673L6.75091 5.99663L2.33224 3.2353C2.19381 3.14873 2.09195 3.01437 2.04599 2.8577C2.00004 2.70102 2.01317 2.53293 2.08291 2.3853L2.12024 2.31663C2.16664 2.24239 2.22721 2.17802 2.29849 2.12718C2.36977 2.07635 2.45036 2.04005 2.53567 2.02037C2.62098 2.00068 2.70932 1.99799 2.79567 2.01245C2.88202 2.02691 2.96467 2.05823 3.03891 2.10463L8.00891 5.21063L12.9796 2.10463C13.0538 2.05823 13.1365 2.02691 13.2228 2.01245C13.3092 1.99799 13.3975 2.00068 13.4828 2.02037C13.5681 2.04005 13.6487 2.07635 13.72 2.12718C13.7913 2.17802 13.8518 2.24239 13.8982 2.31663ZM4.16691 8.99996C3.68068 8.99996 3.21437 9.19312 2.87055 9.53694C2.52673 9.88075 2.33358 10.3471 2.33358 10.8333C2.33358 11.3195 2.52673 11.7858 2.87055 12.1297C3.21437 12.4735 3.68068 12.6666 4.16691 12.6666C4.65314 12.6666 5.11946 12.4735 5.46327 12.1297C5.80709 11.7858 6.00024 11.3195 6.00024 10.8333C6.00024 10.3471 5.80709 9.88075 5.46327 9.53694C5.11946 9.19312 4.65314 8.99996 4.16691 8.99996ZM11.8336 8.99996C11.3473 8.99996 10.881 9.19312 10.5372 9.53694C10.1934 9.88075 10.0002 10.3471 10.0002 10.8333C10.0002 11.3195 10.1934 11.7858 10.5372 12.1297C10.881 12.4735 11.3473 12.6666 11.8336 12.6666C12.3198 12.6666 12.7861 12.4735 13.1299 12.1297C13.4738 11.7858 13.6669 11.3195 13.6669 10.8333C13.6669 10.3471 13.4738 9.88075 13.1299 9.53694C12.7861 9.19312 12.3198 8.99996 11.8336 8.99996Z",
+    fill: "white"
+  })))) : null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-setting'))
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "200",
+    height: "200",
+    onClick: handleShowSettingPanel
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M1012.28088889 417.33688889c-0.22755555-2.048-0.45511111-3.75466667-0.79644444-4.77866667v-0.91022222l-0.45511112-2.50311111c-8.07822222-39.36711111-34.13333333-64.73955555-66.56-64.73955556h-5.34755555c-55.296 0-100.12444445-45.056-100.12444445-100.12444444 0-12.74311111 5.91644445-30.83377778 8.41955556-37.20533334 15.70133333-36.63644445-1.024-78.39288889-39.82222222-99.66933333L685.51111111 38.34311111l-2.27555556-0.79644444c-9.10222222-2.95822222-19.68355555-6.48533333-31.51644444-6.48533334-22.07288889 0-46.87644445 10.24-62.23644444 25.6-19.22844445 19.00088889-58.25422222 47.33155555-81.46488889 47.33155556-23.09688889 0-62.23644445-28.21688889-81.46488889-47.33155556-16.384-16.15644445-39.02577778-25.6-62.23644444-25.6-12.17422222 0-22.41422222 3.41333333-31.51644445 6.48533334l-2.048 0.79644444-128 69.29066667-0.79644445 0.45511111c-31.06133333 19.456-43.69066667 64.05688889-27.87555555 99.44177778l0.22755555 0.45511111 0.22755556 0.45511111c2.50311111 5.57511111 10.24 24.46222222 10.24 40.96 0 55.296-45.056 100.12444445-100.12444444 100.12444444h-5.34755556c-33.90577778 0-59.27822222 25.03111111-66.56 65.19466667l-0.45511111 2.27555555v0.79644445c0 1.13777778-0.45511111 2.73066667-0.79644445 4.77866667-2.84444445 17.18044445-9.67111111 57.68533333-9.6711111 90.79466666 0 33.10933333 6.71288889 73.61422222 9.6711111 90.79466667 0.22755555 2.048 0.45511111 3.75466667 0.79644445 4.77866667v0.91022222l0.45511111 2.50311111c8.07822222 39.36711111 34.13333333 64.73955555 66.56 64.73955555h2.73066667c55.296 0 100.12444445 45.056 100.12444444 100.12444445 0 12.74311111-5.91644445 30.83377778-8.41955555 37.20533333-15.13244445 34.47466667-0.79644445 78.73422222 32.65422222 101.03466667l0.91022222 0.45511111 120.60444444 67.12888889 2.27555556 0.79644445c9.10222222 2.95822222 19.456 6.48533333 31.28888889 6.48533333 25.25866667 0 48.01422222-9.67111111 62.23644445-25.6 1.36533333-1.024 2.73066667-2.38933333 4.32355555-3.75466667 14.56355555-12.74311111 53.70311111-46.42133333 79.53066667-46.42133333 19.22844445 0 51.42755555 20.13866667 83.85422222 52.56533333 16.384 16.15644445 39.02577778 25.6 62.23644444 25.6 15.70133333 0 27.30666667-4.32355555 40.50488889-10.80888889l0.45511111-0.22755555 123.67644445-68.38044445 0.45511111-0.45511111c31.06133333-19.456 43.69066667-64.05688889 27.87555556-99.44177778l-0.22755556-0.45511111-0.22755556-0.45511111c-0.22755555-0.11377778-9.89866667-20.25244445-8.07822222-38.34311111l0.22755556-1.13777778v-1.13777777c0-55.296 45.056-100.12444445 100.12444444-100.12444445h5.68888889c33.90577778 0 59.27822222-25.03111111 66.56-65.19466667l0.45511111-2.27555555v-0.79644445c0.22755555-0.91022222 0.45511111-2.27555555 0.79644444-4.096 2.95822222-16.72533333 9.78488889-55.75111111 9.7848889-91.47733333 0.22755555-32.99555555-6.48533333-73.38666667-9.44355556-90.56711111z m-500.62222222 253.04177778c-87.49511111 0-158.37866667-70.88355555-158.37866667-158.37866667s70.88355555-158.37866667 158.37866667-158.37866667S670.03733333 424.50488889 670.03733333 512s-70.88355555 158.37866667-158.37866666 158.37866667z",
+    fill: "#ffffff"
+  })), showSettingPanel ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-setting').e('panel')),
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-setting').e('panel').e('item'))
+  }, /*#__PURE__*/React.createElement("div", null, "\u9762\u90E8\u8868\u60C5"), /*#__PURE__*/React.createElement("input", {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    type: 'checkbox',
+    className: "".concat(bem.b('container').e('controls-setting').e('panel').e('item').e('checkbox')),
+    checked: features === null || features === void 0 ? void 0 : features.emotion,
+    onChange: function onChange(e) {
+      setFeatures(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          emotion: e.target.checked
+        });
+      });
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-setting').e('panel').e('item'))
+  }, /*#__PURE__*/React.createElement("div", null, "\u9762\u90E8\u7279\u5F81"), /*#__PURE__*/React.createElement("input", {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    type: 'checkbox',
+    className: "".concat(bem.b('container').e('controls-setting').e('panel').e('item').e('checkbox')),
+    checked: features === null || features === void 0 ? void 0 : features.character,
+    onChange: function onChange(e) {
+      setFeatures(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          character: e.target.checked
+        });
+      });
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-setting').e('panel').e('item'))
+  }, /*#__PURE__*/React.createElement("div", null, "\u9762\u90E8\u951A\u70B9"), /*#__PURE__*/React.createElement("input", {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    type: 'checkbox',
+    className: "".concat(bem.b('container').e('controls-setting').e('panel').e('item').e('checkbox')),
+    checked: features === null || features === void 0 ? void 0 : features.anchor,
+    onChange: function onChange(e) {
+      setFeatures(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          anchor: e.target.checked
+        });
+      });
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-setting').e('panel').e('item'))
+  }, /*#__PURE__*/React.createElement("div", null, "\u80A2\u4F53\u7EBF\u6761"), /*#__PURE__*/React.createElement("input", {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    type: 'checkbox',
+    className: "".concat(bem.b('container').e('controls-setting').e('panel').e('item').e('checkbox')),
+    checked: features === null || features === void 0 ? void 0 : features.pose,
+    onChange: function onChange(e) {
+      setFeatures(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          pose: e.target.checked
+        });
+      });
+    }
+  }))) : null), !isFullScreen ? /*#__PURE__*/React.createElement("svg", {
+    className: "".concat(bem.b('container').e('controls-full-screen')),
+    onClick: handleFullScreen,
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "200",
+    height: "200"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M156.3230208 97.74775309H304.87387653a41.42522469 41.42522469 0 1 0 0-82.85044939H56.32252839a41.42522469 41.42522469 0 0 0-41.42522469 41.42522469v248.55134814a41.42522469 41.42522469 0 1 0 82.85044939 0v-148.55085573l177.81777699 177.81777698a41.42522469 41.42522469 0 1 0 58.55455509-58.59598032L156.3230208 97.74775309zM926.25224691 156.3230208V304.87387653a41.42522469 41.42522469 0 1 0 82.85044939 0V56.32252839a41.42522469 41.42522469 0 0 0-41.42522469-41.42522469H719.12612347a41.42522469 41.42522469 0 1 0 0 82.85044939h148.55085573l-177.81777698 177.81777699a41.42522469 41.42522469 0 1 0 58.59598032 58.55455509L926.25224691 156.3230208zM156.3230208 926.25224691H304.87387653a41.42522469 41.42522469 0 1 1 0 82.85044939H56.32252839a41.42522469 41.42522469 0 0 1-41.42522469-41.42522469V719.12612347a41.42522469 41.42522469 0 1 1 82.85044939 0v148.55085573l177.81777699-177.81777698a41.42522469 41.42522469 0 1 1 58.55455509 58.59598032L156.3230208 926.25224691zM926.25224691 867.6769792V719.12612347a41.42522469 41.42522469 0 1 1 82.85044939 0v248.55134814a41.42522469 41.42522469 0 0 1-41.42522469 41.42522469H719.12612347a41.42522469 41.42522469 0 1 1 0-82.85044939h148.55085573l-177.81777698-177.81777699a41.42522469 41.42522469 0 1 1 58.59598032-58.55455509L926.25224691 867.6769792z",
+    fill: "#ffffff"
+  })) : /*#__PURE__*/React.createElement("svg", {
+    className: "".concat(bem.b('container').e('controls-full-screen')),
+    onClick: handleExitFullScreen,
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "200",
+    height: "200"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M819.12661586 760.55134815H967.67747161a41.42522469 41.42522469 0 1 0 0-82.85044939H719.12612347a41.42522469 41.42522469 0 0 0-41.42522471 41.42522471v248.55134814a41.42522469 41.42522469 0 1 0 82.85044939 0v-148.55085575l177.81777699 177.81777699a41.42522469 41.42522469 0 1 0 58.55455509-58.59598032L819.12661586 760.55134815zM263.44865185 819.12661586V967.67747161a41.42522469 41.42522469 0 1 0 82.85044939 0V719.12612347a41.42522469 41.42522469 0 0 0-41.42522471-41.42522471H56.32252839a41.42522469 41.42522469 0 1 0 0 82.85044939h148.55085575l-177.81777699 177.81777699a41.42522469 41.42522469 0 1 0 58.59598032 58.55455509L263.44865185 819.12661586zM819.12661586 263.44865185H967.67747161a41.42522469 41.42522469 0 1 1 0 82.85044939H719.12612347a41.42522469 41.42522469 0 0 1-41.42522471-41.42522471V56.32252839a41.42522469 41.42522469 0 1 1 82.85044939 0v148.55085575l177.81777699-177.81777699a41.42522469 41.42522469 0 1 1 58.55455509 58.59598032L819.12661586 263.44865185zM263.44865185 204.87338414V56.32252839a41.42522469 41.42522469 0 1 1 82.85044939 0v248.55134814a41.42522469 41.42522469 0 0 1-41.42522471 41.42522471H56.32252839a41.42522469 41.42522469 0 1 1 0-82.85044939h148.55085575l-177.81777699-177.81777699a41.42522469 41.42522469 0 1 1 58.59598032-58.55455509L263.44865185 204.87338414z",
+    fill: "#ffffff"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-bottom-progress').e('bar'))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-bottom-progress').e('bar').e('item-1'))
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-bottom-progress').e('bar').e('item-2')),
+    style: {
+      width: duration != null ? "".concat(buffered / duration * 100, "%") : '0%'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-bottom-progress').e('bar').e('item-3')),
+    style: {
+      width: duration != null ? "".concat(currentTime / duration * 100, "%") : '0%'
+    }
+  }))), aiFeature.anchor || aiFeature.emotion || aiFeature.character ? /*#__PURE__*/React.createElement("canvas", {
+    className: "".concat(bem.b('container').e('canvas')),
+    width: videoEleSize.width,
+    height: videoEleSize.height,
+    ref: canvasRef,
+    style: {
+      transform: "scale(".concat(canvasSize.width / videoEleSize.width, ")")
+    }
+  }) : null, aiFeature.pose ? /*#__PURE__*/React.createElement("canvas", {
+    className: "".concat(bem.b('container').e('canvas')),
+    width: videoEleSize.width,
+    height: videoEleSize.height,
+    ref: poseCanvasRef,
+    style: {
+      transform: "scale(".concat(canvasSize.width / videoEleSize.width, ")")
+    }
+  }) : null));
+});
+VideoPlayer.displayName = 'VideoPlayer';