yootd 0.0.88 → 0.0.89

package/dist/video-player/index.d.ts

@@ -7,6 +7,7 @@ export interface VideoPlayerRef {
     useFaceExpression: (type: 'emotion' | 'character' | 'anchor' | 'pose', use: boolean) => void;
     currentTime: () => number;
 }
+type AIFeature = 'emotion' | 'character' | 'anchor' | 'pose';
 export interface VideoPlayerProps {
     /**
      * 视频地址
@@ -44,6 +45,10 @@ export interface VideoPlayerProps {
      * 是否旋转全屏
      */
     rotateWhenFullScreen?: boolean;
+    /**
+     * AI 功能列表
+     */
+    aiFeatures?: AIFeature[];
     /**
      * 视频封面
      */
@@ -88,3 +93,4 @@ export interface VideoPlayerProps {
     onError?: (error: string) => void;
 }
 export declare const VideoPlayer: React.ForwardRefExoticComponent<VideoPlayerProps & React.RefAttributes<VideoPlayerRef>>;
+export {};

package/dist/video-player/index.js

@@ -43,6 +43,8 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     autoPlay = _ref.autoPlay,
     muted = _ref.muted,
     style = _ref.style,
+    _ref$aiFeatures = _ref.aiFeatures,
+    aiFeatures = _ref$aiFeatures === void 0 ? ['emotion', 'character', 'anchor', 'pose'] : _ref$aiFeatures,
     _ref$retry = _ref.retry,
     retry = _ref$retry === void 0 ? false : _ref$retry,
     _ref$retryInterval = _ref.retryInterval,
@@ -125,49 +127,53 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState28 = _slicedToArray(_useState27, 2),
     showSettingPanel = _useState28[0],
     setShowSettingPanel = _useState28[1];
-  var _useState29 = useState({
+  var _useState29 = useState(false),
+    _useState30 = _slicedToArray(_useState29, 2),
+    tfInitialized = _useState30[0],
+    setTfInitialized = _useState30[1];
+  var _useState31 = 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),
+    aiFeature = _useState32[0],
+    setAIFeature = _useState32[1];
+  var _useState33 = useState(null),
     _useState34 = _slicedToArray(_useState33, 2),
-    faceApiInited = _useState34[0],
-    setFaceApiInited = _useState34[1];
-  var _useState35 = useState({
-      width: 0,
-      height: 0
-    }),
+    options = _useState34[0],
+    setOptions = _useState34[1];
+  var _useState35 = useState(false),
     _useState36 = _slicedToArray(_useState35, 2),
-    canvasSize = _useState36[0],
-    setCanvasSize = _useState36[1];
+    faceApiInited = _useState36[0],
+    setFaceApiInited = _useState36[1];
   var _useState37 = useState({
       width: 0,
       height: 0
     }),
     _useState38 = _slicedToArray(_useState37, 2),
-    videoEleSize = _useState38[0],
-    setVideoEleSize = _useState38[1];
-  var _useState39 = useState(false),
+    canvasSize = _useState38[0],
+    setCanvasSize = _useState38[1];
+  var _useState39 = useState({
+      width: 0,
+      height: 0
+    }),
     _useState40 = _slicedToArray(_useState39, 2),
-    isSeeking = _useState40[0],
-    setIsSeeking = _useState40[1];
+    videoEleSize = _useState40[0],
+    setVideoEleSize = _useState40[1];
   var _useState41 = useState(false),
     _useState42 = _slicedToArray(_useState41, 2),
-    isError = _useState42[0],
-    setIsError = _useState42[1];
-  var _useState43 = useState(),
+    isSeeking = _useState42[0],
+    setIsSeeking = _useState42[1];
+  var _useState43 = useState(false),
     _useState44 = _slicedToArray(_useState43, 2),
-    features = _useState44[0],
-    setFeatures = _useState44[1];
+    isError = _useState44[0],
+    setIsError = _useState44[1];
+  var _useState45 = useState(),
+    _useState46 = _slicedToArray(_useState45, 2),
+    features = _useState46[0],
+    setFeatures = _useState46[1];
   useImperativeHandle(ref, function () {
     return {
       play: function play() {
@@ -636,67 +642,87 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
   useEffect(function () {
     var loaded = true;
     _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-      var faceapi, posedetection, tf, detectorConfig, _poseDetector;
+      var tf, faceapi, posedetection, detectorConfig, _poseDetector;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            _context2.next = 2;
-            return import('@vladmandic/face-api');
+            if (loaded) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return");
           case 2:
-            faceapi = _context2.sent;
-            _context2.next = 5;
-            return import('@tensorflow-models/pose-detection');
-          case 5:
-            posedetection = _context2.sent;
-            _context2.next = 8;
-            return import('@tensorflow/tfjs');
-          case 8:
-            tf = _context2.sent;
-            console.log('tf', tf.ready);
-            if (!(loaded && !faceApiInited && (aiFeature.emotion || aiFeature.character || aiFeature.anchor))) {
-              _context2.next = 34;
+            _context2.prev = 2;
+            if (!((aiFeature.anchor || aiFeature.emotion || aiFeature.character || aiFeature.pose) && !tfInitialized)) {
+              _context2.next = 12;
               break;
             }
-            _context2.prev = 11;
-            _context2.next = 14;
+            _context2.next = 6;
+            return import('@tensorflow/tfjs');
+          case 6:
+            tf = _context2.sent;
+            _context2.next = 9;
             return tf.ready();
-          case 14:
-            _context2.next = 16;
+          case 9:
+            _context2.next = 11;
             return tf.setBackend('webgl');
-          case 16:
-            _context2.next = 18;
+          case 11:
+            setTfInitialized(true);
+          case 12:
+            _context2.next = 17;
+            break;
+          case 14:
+            _context2.prev = 14;
+            _context2.t0 = _context2["catch"](2);
+            console.error('tensorflow 加载失败: ', _context2.t0);
+          case 17:
+            _context2.prev = 17;
+            if (!((aiFeature.anchor || aiFeature.emotion || aiFeature.character) && !faceApiInited)) {
+              _context2.next = 35;
+              break;
+            }
+            _context2.next = 21;
+            return import('@vladmandic/face-api');
+          case 21:
+            faceapi = _context2.sent;
+            _context2.next = 24;
             return faceapi.nets.ssdMobilenetv1.load("".concat(OSS, "/model-zoo/face-api-models/model"));
-          case 18:
-            _context2.next = 20;
+          case 24:
+            _context2.next = 26;
             return faceapi.nets.ageGenderNet.load("".concat(OSS, "/face-api-models/model"));
-          case 20:
-            _context2.next = 22;
+          case 26:
+            _context2.next = 28;
             return faceapi.nets.faceLandmark68Net.load("".concat(OSS, "/model-zoo/face-api-models/model"));
-          case 22:
-            _context2.next = 24;
+          case 28:
+            _context2.next = 30;
             return faceapi.nets.faceRecognitionNet.load("".concat(OSS, "/model-zoo/face-api-models/model"));
-          case 24:
-            _context2.next = 26;
+          case 30:
+            _context2.next = 32;
             return faceapi.nets.faceExpressionNet.load("".concat(OSS, "/model-zoo/face-api-models/model"));
-          case 26:
+          case 32:
             setOptions(new faceapi.SsdMobilenetv1Options({
               minConfidence: MIN_SCORE,
               maxResults: MAX_RESULTS
             }));
             detectAllFacesRef.current = faceapi.detectAllFaces;
             setFaceApiInited(true);
-            _context2.next = 34;
+          case 35:
+            _context2.next = 40;
             break;
-          case 31:
-            _context2.prev = 31;
-            _context2.t0 = _context2["catch"](11);
-            console.error(_context2.t0);
-          case 34:
+          case 37:
+            _context2.prev = 37;
+            _context2.t1 = _context2["catch"](17);
+            console.error('faceapi 加载失败: ', _context2.t1);
+          case 40:
+            _context2.prev = 40;
             if (!(aiFeature.pose && poseDetector == null)) {
-              _context2.next = 47;
+              _context2.next = 51;
               break;
             }
-            _context2.prev = 35;
+            _context2.next = 44;
+            return import('@tensorflow-models/pose-detection');
+          case 44:
+            posedetection = _context2.sent;
             detectorConfig = {
               modelType: posedetection.movenet.modelType.MULTIPOSE_LIGHTNING,
               enableTracking: true,
@@ -704,28 +730,29 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
               scoreThreshold: 0.3,
               modelUrl: "".concat(OSS, "/model-zoo/pose-detection-models/model.json")
             };
-            _context2.next = 39;
+            _context2.next = 48;
             return posedetection.createDetector(posedetection.SupportedModels.MoveNet, detectorConfig);
-          case 39:
+          case 48:
             _poseDetector = _context2.sent;
             getAdjacentPairsRef.current = posedetection.util.getAdjacentPairs;
             setPoseDetector(_poseDetector);
-            _context2.next = 47;
+          case 51:
+            _context2.next = 56;
             break;
-          case 44:
-            _context2.prev = 44;
-            _context2.t1 = _context2["catch"](35);
-            console.error(_context2.t1);
-          case 47:
+          case 53:
+            _context2.prev = 53;
+            _context2.t2 = _context2["catch"](40);
+            console.error('pose detection 加载失败: ', _context2.t2);
+          case 56:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[11, 31], [35, 44]]);
+      }, _callee2, null, [[2, 14], [17, 37], [40, 53]]);
     }))();
     return function () {
       loaded = false;
     };
-  }, [aiFeature, faceApiInited, poseDetector]);
+  }, [aiFeature, faceApiInited, poseDetector, tfInitialized]);
   useEffect(function () {
     var player = null;
     if (isLive && videoRef.current != null) {
@@ -1053,7 +1080,7 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, aiFeatures !== null && aiFeatures !== void 0 && aiFeatures.includes('emotion') ? /*#__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) {
@@ -1069,7 +1096,7 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
         });
       });
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })) : null, aiFeatures !== null && aiFeatures !== void 0 && aiFeatures.includes('character') ? /*#__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) {
@@ -1085,7 +1112,7 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
         });
       });
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })) : null, aiFeatures !== null && aiFeatures !== void 0 && aiFeatures.includes('anchor') ? /*#__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) {
@@ -1101,7 +1128,7 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
         });
       });
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })) : null, aiFeatures !== null && aiFeatures !== void 0 && aiFeatures.includes('pose') ? /*#__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) {
@@ -1117,7 +1144,7 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
         });
       });
     }
-  }))) : null), !isFullScreen ? /*#__PURE__*/React.createElement("svg", {
+  })) : null) : null), !isFullScreen ? /*#__PURE__*/React.createElement("svg", {
     className: "".concat(bem.b('container').e('controls-full-screen')),
     onClick: handleFullScreen,
     viewBox: "0 0 1024 1024",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yootd",
-  "version": "0.0.88",
+  "version": "0.0.89",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",