@realsee/dnalogel 0.1.7 → 2.0.0-alpha.3

package/components/ARVideoFigure/ARVideoFigureMesh.js

@@ -1,371 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.reflect.construct.js");
-
-require("core-js/modules/es.weak-map.js");
-
-require("core-js/modules/es.object.define-property.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ARVideoFigureMesh = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-require("core-js/modules/es.array.map.js");
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/web.url.js");
-
-require("core-js/modules/web.url-search-params.js");
-
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.string.replace.js");
-
-require("core-js/modules/es.promise.js");
-
-require("core-js/modules/web.timers.js");
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var THREE = _interopRequireWildcard(require("three"));
-
-var _Preloader = require("../../shared-utils/Preloader");
-
-var _fragmentShader = require("./fragmentShader");
-
-var _vertexShader = require("./vertexShader");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var ARVideoFigureMesh = /*#__PURE__*/function (_THREE$Mesh) {
-  (0, _inherits2["default"])(ARVideoFigureMesh, _THREE$Mesh);
-
-  var _super = _createSuper(ARVideoFigureMesh);
-
-  /**
-   *
-   * @param width
-   * @param height
-   * @param widthSegments
-   * @param heightSegments
-   * @param options
-   */
-  function ARVideoFigureMesh(width, height, widthSegments, heightSegments) {
-    var _this;
-
-    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
-    (0, _classCallCheck2["default"])(this, ARVideoFigureMesh);
-
-    if (!options.videoInstance) {
-      var videoInstance = document.createElement('video');
-      videoInstance.style.opacity = '0';
-      videoInstance.style.display = 'none';
-      videoInstance.playsInline = true;
-      document.body.append(videoInstance);
-      options.videoInstance = videoInstance;
-    }
-
-    var geometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
-    var videoTexture = new THREE.VideoTexture(options.videoInstance);
-    var material = new THREE.ShaderMaterial({
-      uniforms: {
-        map: {
-          value: videoTexture
-        },
-        enable: {
-          value: 0
-        },
-        range: {
-          value: 0.15
-        },
-        edge0: {
-          value: 0.1
-        },
-        edge1: {
-          value: 0.3
-        }
-      },
-      vertexShader: _vertexShader.vertexShader,
-      fragmentShader: (0, _fragmentShader.fragmentShaderTpl)(),
-      transparent: true
-    });
-    _this = _super.call(this, geometry, material);
-    _this.options = options;
-    _this.freeze = false;
-    return _this;
-  }
-
-  (0, _createClass2["default"])(ARVideoFigureMesh, [{
-    key: "paused",
-    get: function get() {
-      return !!this.videoInstance.paused;
-    }
-  }, {
-    key: "videoInstance",
-    get: function get() {
-      var uniforms = this.material.uniforms;
-      var videoInstance = uniforms.map.value.image;
-      return videoInstance;
-    }
-  }, {
-    key: "uniforms",
-    get: function get() {
-      var uniforms = this.material.uniforms;
-      return uniforms;
-    }
-  }, {
-    key: "update",
-    value: function () {
-      var _update = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(videoUrl) {
-        var _this2 = this;
-
-        var onStart;
-        return _regenerator["default"].wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                if (!(this.videoUrl === videoUrl)) {
-                  _context.next = 2;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 2:
-                this.videoUrl = videoUrl;
-                this.freeze = true;
-                _context.next = 6;
-                return this.videoInstance.pause();
-
-              case 6:
-                _context.t0 = URL;
-                _context.next = 9;
-                return _Preloader.Preloader.blob(this.videoUrl);
-
-              case 9:
-                _context.t1 = _context.sent;
-                _context.next = 12;
-                return _context.t0.createObjectURL.call(_context.t0, _context.t1);
-
-              case 12:
-                this.videoInstance.src = _context.sent;
-                this.videoInstance.setAttribute('data-src', this.videoUrl);
-
-                onStart = function onStart() {
-                  if (_this2.videoInstance.currentTime === 0) return;
-                  _this2.uniforms.enable.value = 1;
-                  _this2.freeze = false;
-
-                  _this2.videoInstance.removeEventListener('timeupdate', onStart, false);
-                };
-
-                this.videoInstance.addEventListener('timeupdate', onStart, false);
-
-              case 16:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this);
-      }));
-
-      function update(_x) {
-        return _update.apply(this, arguments);
-      }
-
-      return update;
-    }()
-  }, {
-    key: "updateUniforms",
-    value: function updateUniforms(_ref) {
-      var range = _ref.range,
-          edge0 = _ref.edge0,
-          edge1 = _ref.edge1;
-      this.uniforms.range.value = isNaN(range) ? 0.15 : range;
-      this.uniforms.edge0.value = isNaN(edge0) ? 0.1 : edge0;
-      this.uniforms.edge1.value = isNaN(edge1) ? 0.1 : edge1;
-    }
-    /**
-     * 暂停视频播放
-     * @returns
-     */
-
-  }, {
-    key: "pause",
-    value: function () {
-      var _pause = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-        return _regenerator["default"].wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                _context2.next = 2;
-                return this.videoInstance.pause();
-
-              case 2:
-                return _context2.abrupt("return", _context2.sent);
-
-              case 3:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2, this);
-      }));
-
-      function pause() {
-        return _pause.apply(this, arguments);
-      }
-
-      return pause;
-    }()
-    /**
-     * 播放视频：
-     * - 如果没有提供 `videoUrl`，则播放上一个视频
-     * - 如果提供 `videoUrl`，则重头开始播放
-     * @param videoUrl 视频地址
-     * @returns
-     */
-
-  }, {
-    key: "play",
-    value: function () {
-      var _play = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-        var _this3 = this;
-
-        var videoUrl,
-            _args4 = arguments;
-        return _regenerator["default"].wrap(function _callee4$(_context4) {
-          while (1) {
-            switch (_context4.prev = _context4.next) {
-              case 0:
-                videoUrl = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : '';
-                videoUrl = (videoUrl || '').replace(/https*:/, '');
-
-                if (videoUrl) {
-                  _context4.next = 10;
-                  break;
-                }
-
-                if (!this.videoUrl) {
-                  _context4.next = 8;
-                  break;
-                }
-
-                _context4.next = 6;
-                return this.videoInstance.play();
-
-              case 6:
-                _context4.next = 9;
-                break;
-
-              case 8:
-                console.warn('警告：视频资源未初始化。');
-
-              case 9:
-                return _context4.abrupt("return", true);
-
-              case 10:
-                if (!(videoUrl === this.videoUrl)) {
-                  _context4.next = 15;
-                  break;
-                }
-
-                this.videoInstance.currentTime = 0;
-                _context4.next = 14;
-                return this.videoInstance.play();
-
-              case 14:
-                return _context4.abrupt("return", true);
-
-              case 15:
-                _context4.next = 17;
-                return this.update(videoUrl);
-
-              case 17:
-                this.videoInstance.pause();
-                _context4.next = 20;
-                return new Promise(function (resolve) {
-                  return setTimeout( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-                    return _regenerator["default"].wrap(function _callee3$(_context3) {
-                      while (1) {
-                        switch (_context3.prev = _context3.next) {
-                          case 0:
-                            _this3.videoInstance.currentTime = 0;
-                            _context3.next = 3;
-                            return _this3.videoInstance.play();
-
-                          case 3:
-                            resolve(true);
-
-                          case 4:
-                          case "end":
-                            return _context3.stop();
-                        }
-                      }
-                    }, _callee3);
-                  })), 20);
-                });
-
-              case 20:
-                return _context4.abrupt("return", _context4.sent);
-
-              case 21:
-              case "end":
-                return _context4.stop();
-            }
-          }
-        }, _callee4, this);
-      }));
-
-      function play() {
-        return _play.apply(this, arguments);
-      }
-
-      return play;
-    }()
-    /**
-     * 转成毫秒，保障精准度
-     */
-
-  }, {
-    key: "currentTime",
-    get: function get() {
-      return this.videoInstance.currentTime * 1000;
-    }
-  }]);
-  return ARVideoFigureMesh;
-}(THREE.Mesh);
-
-exports.ARVideoFigureMesh = ARVideoFigureMesh;

package/components/ARVideoFigure/ARVideoFigureScene.d.ts

@@ -1,11 +0,0 @@
-import * as THREE from 'three';
-import { ARVideoFigureMesh } from './ARVideoFigureMesh';
-export declare class ARVideoFigureScene {
-    scene: THREE.Scene;
-    renderer: THREE.WebGLRenderer;
-    camera: THREE.OrthographicCamera;
-    mesh: ARVideoFigureMesh;
-    get videoInstance(): HTMLVideoElement;
-    constructor(container: HTMLElement);
-    run: () => void;
-}

package/components/ARVideoFigure/ARVideoFigureScene.js

@@ -1,85 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/es.weak-map.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.object.define-property.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ARVideoFigureScene = void 0;
-
-require("core-js/modules/es.array.concat.js");
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var THREE = _interopRequireWildcard(require("three"));
-
-var _ARVideoFigureMesh = require("./ARVideoFigureMesh");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var ARVideoFigureScene = /*#__PURE__*/function () {
-  function ARVideoFigureScene(container) {
-    var _this = this;
-
-    (0, _classCallCheck2["default"])(this, ARVideoFigureScene);
-    (0, _defineProperty2["default"])(this, "scene", new THREE.Scene());
-    (0, _defineProperty2["default"])(this, "renderer", new THREE.WebGLRenderer({
-      alpha: true
-    }));
-    (0, _defineProperty2["default"])(this, "run", function () {
-      if (!_this.mesh.freeze) {
-        _this.renderer.render(_this.scene, _this.camera);
-      }
-
-      requestAnimationFrame(_this.run);
-    });
-    var state = {
-      width: container.offsetWidth,
-      height: container.offsetHeight
-    };
-    this.camera = new THREE.OrthographicCamera(-state.width / 2, state.width / 2, state.height / 2, -state.height / 2);
-    this.camera.position.set(0, 0, 10);
-    this.camera.lookAt(0, 0, 0);
-    var domElement = this.renderer.domElement;
-    domElement.classList.add('ARVideoFigureScene-canvas');
-    this.renderer.setSize(state.width * window.devicePixelRatio, state.height * window.devicePixelRatio);
-    domElement.setAttribute('style', "width: ".concat(state.width, "px;height: ").concat(state.height, "px;"));
-    this.mesh = new _ARVideoFigureMesh.ARVideoFigureMesh(state.width, state.height, 1, 1);
-    container.append(domElement);
-    this.scene.add(this.mesh);
-    this.renderer.render(this.scene, this.camera);
-    this.run();
-  }
-
-  (0, _createClass2["default"])(ARVideoFigureScene, [{
-    key: "videoInstance",
-    get: function get() {
-      return this.mesh.videoInstance;
-    }
-  }]);
-  return ARVideoFigureScene;
-}();
-
-exports.ARVideoFigureScene = ARVideoFigureScene;

package/components/ARVideoFigure/ImgBgTransparent.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import { ImgBgTransparentScene } from './ImgBgTransparentMesh';
-export interface ImgBgTransparentProps {
-    imgUrl: string;
-    className?: string;
-    imgBgTransparentSceneRef?: (imgBgTransparentScene: ImgBgTransparentScene) => void;
-}
-/**
- * **透明背景** 与 **AR 视频形象** `ARVideoFigure` 实现原理一致，不过此组件仅针对图片。
- *
- * 生产环境中还是建议直接采用 `png` 这类支持透明背景的图片。在实际业务落地过程中，如果视频文件生成比较滞后，你可以先通过对应图片来预览效果，调试相关参数。
- *
- * @param props
- * @returns
- */
-export declare function ImgBgTransparent(props: ImgBgTransparentProps): JSX.Element;

package/components/ARVideoFigure/ImgBgTransparent.js

@@ -1,65 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/es.weak-map.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.object.define-property.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ImgBgTransparent = ImgBgTransparent;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-require("core-js/modules/es.object.assign.js");
-
-var React = _interopRequireWildcard(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _ImgBgTransparentMesh = require("./ImgBgTransparentMesh");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-/**
- * **透明背景** 与 **AR 视频形象** `ARVideoFigure` 实现原理一致，不过此组件仅针对图片。
- *
- * 生产环境中还是建议直接采用 `png` 这类支持透明背景的图片。在实际业务落地过程中，如果视频文件生成比较滞后，你可以先通过对应图片来预览效果，调试相关参数。
- *
- * @param props
- * @returns
- */
-function ImgBgTransparent(props) {
-  var ref = React.useRef(null);
-  React.useEffect(function () {
-    if (!ref.current) return;
-    var imgBgTransparentScene = new _ImgBgTransparentMesh.ImgBgTransparentScene(ref.current, props.imgUrl);
-    Object.assign(window, {
-      $imgBgTransparentScene: imgBgTransparentScene
-    });
-
-    if (props.imgBgTransparentSceneRef) {
-      props.imgBgTransparentSceneRef(imgBgTransparentScene);
-    }
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])('ImgBgTransparent', (0, _defineProperty2["default"])({}, props.className + '', !!props.className)),
-    ref: ref
-  });
-}

package/components/ARVideoFigure/ImgBgTransparentMesh.d.ts

@@ -1,30 +0,0 @@
-import * as THREE from 'three';
-export declare class ImgBgTransparentMesh extends THREE.Mesh {
-    imgUrl?: string;
-    freeze: boolean;
-    get imageTexture(): THREE.Texture;
-    /**
-     *
-     * @param imgUrl
-     * @param width
-     * @param height
-     * @param widthSegments
-     * @param heightSegments
-     */
-    constructor(imgUrl: string, width: number, height: number, widthSegments: number, heightSegments: number, onLoad?: (texture: THREE.Texture) => void);
-    private get uniforms();
-    setHidden(hidden: boolean): void;
-    updateUniforms({ range, edge0, edge1 }: {
-        range: number;
-        edge0: number;
-        edge1: number;
-    }): void;
-}
-export declare class ImgBgTransparentScene {
-    scene: THREE.Scene;
-    renderer: THREE.WebGLRenderer;
-    camera: THREE.OrthographicCamera;
-    mesh: ImgBgTransparentMesh;
-    constructor(container: HTMLElement, imgUrl: string);
-    render(): void;
-}