@agilemotion/oui-react-js 1.3.8 → 1.3.9

package/dist/components/media/Video.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VIDEO_CONSTRAINTS = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+require("./Video.css");
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+
+const VIDEO_CONSTRAINTS = {
+  audio: false,
+  video: {
+    width: {
+      min: 640,
+      ideal: 1920
+    },
+    height: {
+      min: 400,
+      ideal: 1080
+    }
+  }
+};
+exports.VIDEO_CONSTRAINTS = VIDEO_CONSTRAINTS;
+
+const Video = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const userVideo = (0, _react.useRef)();
+  const [stream, setStream] = (0, _react.useState)();
+  const [on, setOn] = (0, _react.useState)(false);
+
+  _react.default.useEffect(() => {
+    return () => {
+      closeStream();
+    };
+  }, []);
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+  });
+
+  _react.default.useEffect(() => {
+    if (on) {
+      start();
+    } else if (userVideo.current && userVideo.current.srcObject) {
+      closeStream();
+    }
+  }, [on]);
+
+  const closeStream = () => {
+    if (stream) {
+      for (const track of stream.getTracks()) {
+        track.stop();
+      }
+    }
+  };
+
+  const start = async () => {
+    try {
+      let videoStream = await navigator.mediaDevices.getUserMedia(VIDEO_CONSTRAINTS);
+      userVideo.current.srcObject = videoStream;
+      setStream(videoStream);
+    } catch (e) {
+      setOn(false);
+    }
+  };
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      set on(on) {
+        setOn(on);
+      },
+
+      getChildren: () => {
+        return [];
+      }
+    };
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'centered-flex-box user-video',
+    style: _Utils.default.mergeStyles({
+      width: '100%',
+      borderBottom: '1px solid #e2e2e2'
+    }, props.config)
+  }, !on && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'centered-flex-box',
+    style: {
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'transparent',
+      borderRadius: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: "CAMERA_OFF"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'avatar',
+    style: {
+      marginLeft: '4px'
+    }
+  }, "Your camera is off")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("video", {
+    hidden: !on,
+    muted: true,
+    playsInline: true,
+    autoPlay: true,
+    ref: userVideo,
+    style: {
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'transparent',
+      borderRadius: '4px'
+    }
+  })));
+}));
+
+var _default = Video;
+exports.default = _default;