fcr-ui-scene 3.4.5 → 3.5.0

package/lib/fragments/control-bar/index.js

@@ -0,0 +1,257 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.reflect.construct.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.windowOptions = exports.webPreferences = exports.title = exports.ControlBarEvents = exports.ControlBar = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _constant = require("../../utilities/constant");
+var _base = require("../base");
+var _context = require("./context");
+var _controlBarStore = _interopRequireDefault(require("./control-bar-store"));
+require("./index.css");
+var _view = require("./view");
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _root = require("react-hot-loader/root");
+var _jsxRuntime = require("react/jsx-runtime");
+var _window;
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var ControlBarEvents = exports.ControlBarEvents = /*#__PURE__*/function (ControlBarEvents) {
+  ControlBarEvents["ENABLE_AUDIO"] = "enable-audio";
+  ControlBarEvents["SWITCH_MICROPHONE_DEVICE"] = "switch-microphone-device";
+  ControlBarEvents["SWITCH_SPEAKER_DEVICE"] = "switch-speaker-device";
+  ControlBarEvents["OPEN_AUDIO_SETTING"] = "open-audio-setting";
+  ControlBarEvents["ENABLE_VIDEO"] = "enable-video";
+  ControlBarEvents["SWITCH_CAMERA_DEVICE"] = "switch-camera-device";
+  ControlBarEvents["OPEN_VIDEO_SETTING"] = "open-video-setting";
+  ControlBarEvents["SHARE_SCREEN"] = "share-screen";
+  ControlBarEvents["STOP_SCREEN_SHARING"] = "stop-screen-sharing";
+  ControlBarEvents["OPEN_SECURITY"] = "open-security";
+  ControlBarEvents["ENABLE_SHARE_AUDIO"] = "enable-share-audio";
+  ControlBarEvents["SET_SCREEN_SHARE_PRIORITY"] = "set-screen-share-priority";
+  return ControlBarEvents;
+}({});
+var ControlBar = exports.ControlBar = /*#__PURE__*/function (_BaseFragment) {
+  function ControlBar(runtime) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, ControlBar);
+    _this = _callSuper(this, ControlBar, [runtime]);
+    _this._store = new _controlBarStore["default"]();
+    return _this;
+  }
+  (0, _inherits2["default"])(ControlBar, _BaseFragment);
+  return (0, _createClass2["default"])(ControlBar, [{
+    key: "name",
+    get: function get() {
+      return 'control-bar';
+    }
+  }, {
+    key: "component",
+    get: function get() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
+        value: this._store,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.ControlBarView, {})
+      });
+    }
+  }, {
+    key: "onEvent",
+    value: function onEvent(event) {
+      var _ref = event,
+        action = _ref.action,
+        payload = _ref.payload;
+      console.log('ControlBar onEvent', action, payload);
+      switch (action) {
+        case _constant.RendererEventAction.INIT_CONTROL_BAR:
+          this._store.initControlBar(payload);
+          break;
+        case _constant.RendererEventAction.START_SHARE_SCREEN:
+          this._store.updateCurrentShareContent(payload);
+          break;
+        case _constant.RendererEventAction.INIT_SHARE_SCREEN_SELECTION:
+          this._store.updateAllApplicationList(payload.applications);
+          break;
+        case _constant.RendererEventAction.SET_MICROPHONE_DEVICE:
+          this._store.setCurrentMicrophoneId(payload.deviceId);
+          break;
+        case _constant.RendererEventAction.SET_CAMERA_DEVICE:
+          this._store.setCurrentCameraId(payload.deviceId);
+          break;
+        case _constant.RendererEventAction.SET_SPEAKER_DEVICE:
+          this._store.setCurrentSpeakerId(payload.deviceId);
+          break;
+        case _constant.RendererEventAction.MUTE_LOCAL_AUDIO:
+          this._store.muteLocalAudio(true);
+          break;
+        case _constant.RendererEventAction.UNMUTE_LOCAL_AUDIO:
+          this._store.muteLocalAudio(false);
+          break;
+        case _constant.RendererEventAction.MUTE_LOCAL_VIDEO:
+          this._store.muteLocalVideo(true);
+          break;
+        case _constant.RendererEventAction.UNMUTE_LOCAL_VIDEO:
+          this._store.muteLocalVideo(false);
+          break;
+        case _constant.RendererEventAction.UPDATE_MICROPHONE_LIST:
+          this._store.setMicrophoneList(payload.list);
+          break;
+        case _constant.RendererEventAction.UPDATE_CAMERA_LIST:
+          this._store.setCameraList(payload.list);
+          break;
+        case _constant.RendererEventAction.UPDATE_SPEAKER_LIST:
+          this._store.setSpeakerList(payload.list);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_CHANGE_SELF_NAME:
+          this._store.setAllowChangeSelfName(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_CHAT:
+          this._store.setAllowChat(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_JOIN_WITH_MUTE_AUDIO:
+          this._store.setAllowJoinWithMuteAudio(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_SHARE_SCREEN:
+          this._store.setAllowShareScreen(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_BOARD_WRITE:
+          this._store.setBoardWriteEnabled(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_UNMUTE_SELF_VIDEO:
+          this._store.setAllowUnmuteSelfVideo(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_UNMUTE_SELF_AUDIO:
+          this._store.setAllowUnmuteSelfAudio(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_LOCK_ROOM:
+          this._store.setLockRoomEnabled(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ENABLE_WAITING_ROOM:
+          this._store.setWaitingRoomEnabled(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_CLOUD_RECORDING_START:
+          this._store.setHasStartCloudRecordingPermission(payload.allow);
+          break;
+        // local Media
+        case _constant.RendererEventAction.SET_CONTROL_BAR_LOCAL_AUDIO_STATE:
+          this._store.muteLocalAudio(!payload.status);
+          break;
+        case _constant.RendererEventAction.SET_CONTROL_BAR_LOCAL_VIDEO_STATE:
+          this._store.muteLocalVideo(!payload.status);
+          break;
+        case _constant.RendererEventAction.SET_CONTROL_BAR_LOCAL_AUDIO_VOLUME:
+          this._store.setLocalAudioVolume(payload.volume);
+          break;
+        case _constant.RendererEventAction.CLOUD_RECORDING_STATE_CHANGED:
+          this._store.setCloudRecordingState(payload);
+        case _constant.RendererEventAction.USER_ROLE_CHANGED:
+          this._store.setLocalUserRole(payload);
+          break;
+        case _constant.RendererEventAction.CHANGE_LIVE_STREAMING_STATE:
+          this._store.setLiveStreamingState(payload.liveStreamingState);
+          break;
+        case _constant.RendererEventAction.CHANGE_LIVE_STREAMING_INFO:
+          this._store.setLiveStreamingInfo(payload);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_LIVE_STREAMING_START:
+          this._store.setHasStartCloudRecordingPermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_LIVE_STREAMING_STOP:
+          this._store.setHasStopLiveStreamingPermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.MAIN_SET_ALLOW_GET_LIVE_STREAMING_LINK:
+          this._store.setHasGetLiveStreamingUrlPermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.SHOW_TOAST:
+          this._store.showToast(payload);
+          break;
+        case _constant.RendererEventAction.SET_CONTROL_BAR_CONNECT_TYPE:
+          this._store.setConnectType(payload);
+          break;
+        case _constant.RendererEventAction.SET_CONTROL_BAR_PHONECALL_STATE:
+          this._store.setPhoneMicEnabled(payload);
+          break;
+        // security item permission
+        case _constant.RendererEventAction.START_SCREEN_SHARE_PERMISSION:
+          this._store.setStartScreenSharePermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.ALLOW_SEND_ALL_PERMISSION:
+          this._store.setPermissionToControlAllowSendAll(payload.allow);
+          break;
+        case _constant.RendererEventAction.START_AUDIO_PERMISSION:
+          this._store.setStartAudioPermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.CHANGE_NAME_PERMISSION:
+          this._store.setChangeNamePermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.START_VIDEO_PERMISSION:
+          this._store.setStartVideoPermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.LOCK_ROOM_PERMISSION:
+          this._store.setLockRoomPermission(payload.allow);
+          break;
+        case _constant.RendererEventAction.SET_SHARE_WITH_AUDIO_CONTROL_BAR:
+          this._store.setShareWithAudioStateOnly(payload.withAudio);
+          break;
+        case _constant.RendererEventAction.SET_REMOTE_USERS:
+          this._store.setRemoteUsers(payload);
+          break;
+        case _constant.RendererEventAction.SET_HAS_ASSIGN_HOST_BEFORE_LEAVING_PERMISSION:
+          this._store.setHasAssignHostBeforeLeavingPermission(payload);
+          break;
+        case _constant.RendererEventAction.SET_HAS_END_ROOM_PERMISSION:
+          this._store.setHasEndRoomPermission(payload);
+          break;
+        case _constant.RendererEventAction.SET_IS_LOCKED:
+          this._store.setIsLocked(payload);
+          break;
+        case _constant.RendererEventAction.SET_IS_PSTN_USER:
+          this._store.setIsPstnUser(payload);
+          break;
+        case _constant.RendererEventAction.SET_IS_MULTI:
+          this._store.setIsMulti(payload);
+          break;
+        case _constant.RendererEventAction.SET_CONTRL_IS_WATERMARK_ENABLE:
+          this._store.setWaterMarkEnabled(payload);
+          break;
+      }
+    }
+  }]);
+}(_base.BaseFragment);
+var windowOptions = exports.windowOptions = {
+  width: 300,
+  height: 100,
+  y: 0,
+  x: 0,
+  frame: false,
+  transparent: true,
+  maximizable: false,
+  backgroundColor: '#00000000',
+  // macos 切换到其他应用时隐藏窗口
+  hiddenInMissionControl: true,
+  // fullscreenable: false,
+  // fullscreen: false,
+  hasShadow: false,
+  useContentSize: true,
+  minimizable: false,
+  // Windows 上直接打开，否则任务栏上会消失
+  show: ((_window = window) === null || _window === void 0 || (_window = _window.process) === null || _window === void 0 ? void 0 : _window.platform) === 'win32'
+};
+var webPreferences = exports.webPreferences = {
+  nodeIntegration: true
+};
+var title = exports.title = 'Control Bar';
+var $$fragment = new ControlBar(window.runtime);
+var App = (0, _root.hot)(function () {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react["default"].Fragment, {
+    children: $$fragment.component
+  });
+});
+_reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.getElementById('root'));

package/lib/fragments/control-bar/meeting-details/meeting-detail.css

@@ -0,0 +1,128 @@
+.meeting-details {
+  display: flex;
+  flex-direction: column;
+  width: 290px;
+  padding: 20px 15px 15px 15px;
+  border-radius: var(--fcr_cornerradius_s);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2, #3c3c3c);
+  box-shadow: 0px 0px 15px 0px #8f8f8f26;
+}
+
+.meeting-details__header {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+  user-select: none;
+}
+
+.meeting-details__content-meeting-subject {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+  word-break: break-all;
+  text-align: left;
+  min-height: 34px;
+  line-height: 34px;
+}
+
+.meeting-details__content-meeting-id,
+.meeting-details__content-code,
+.meeting-details__content-share-link {
+  display: flex;
+  align-items: center;
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 300;
+  color: var(--fcr_ui_scene_icontext1, #ffffff);
+}
+
+.meeting-details__content-meeting-id > span,
+.meeting-details__content-code > span,
+.meeting-details__content-share-link > span {
+  font-weight: 600;
+}
+
+.meeting-details__content-meeting-id > label,
+.meeting-details__content-code > label,
+.meeting-details__content-share-link > label {
+  user-select: none;
+  flex-shrink: 0;
+}
+.meeting-details__content-meeting-id > span,
+.meeting-details__content-code > span,
+.meeting-details__content-share-link > span {
+  margin-left: 10px;
+  flex-grow: 1;
+  text-align: right;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.meeting-details__content-code > span.none {
+  font-weight: 400 !important;
+}
+
+.meeting-details__content-meeting-id > div > svg,
+.meeting-details__content-code > div > svg,
+.meeting-details__content-share-link > div > svg {
+  flex-shrink: 0;
+  margin-left: 8px;
+  border-radius: var(--fcr_cornerradius_s, 4px);
+  cursor: pointer;
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  border-radius: var(--fcr_cornerradius_xs);
+}
+
+.meeting-details__content-meeting-id > div > svg:hover,
+.meeting-details__content-code > div > svg:hover,
+.meeting-details__content-share-link > div > svg:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+  border: none;
+}
+.meeting-details__content-meeting-id > div > svg:hover path,
+.meeting-details__content-code > div > svg:hover path,
+.meeting-details__content-share-link > div > svg:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+.meeting-details__content-meeting-duration span {
+  padding-right: 30px;
+}
+
+.meeting-details__footer {
+  margin-top: 4px;
+  display: flex;
+}
+
+.meeting-details__footer > button {
+  flex: 1;
+}
+
+.meeting-details__footer > button > p {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.meeting-details__footer > button > p > svg {
+  position: absolute;
+  left: -18px;
+}
+
+.meeting-details__footer > button > p > span {
+  margin-left: 8px;
+}
+.meeting-details__reset-icon {
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/lib/fragments/control-bar/meeting-details/meeting-details-portal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MeetingDetailsPortal: () => React.ReactPortal | null;
+export default MeetingDetailsPortal;

package/lib/fragments/control-bar/meeting-details/meeting-details-portal.js

@@ -0,0 +1,60 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.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/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _mobxReact = require("mobx-react");
+var _meetingDetails = require("./meeting-details");
+var _context = require("../context");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var MeetingDetailsPortal = (0, _mobxReact.observer)(function () {
+  var container = document.createElement('div');
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    startTime = _useContext.startTime,
+    roomInfo = _useContext.roomInfo,
+    userName = _useContext.userName,
+    inviteLink = _useContext.inviteLink,
+    isShowMeetingDetailPortal = _useContext.isShowMeetingDetailPortal,
+    meetingDetailPortalLeft = _useContext.meetingDetailPortalLeft,
+    meetingDetailPortalTop = _useContext.meetingDetailPortalTop,
+    setShowMeetingDetailPortal = _useContext.setShowMeetingDetailPortal;
+  (0, _react.useEffect)(function () {
+    if (isShowMeetingDetailPortal) {
+      container.style.position = 'absolute';
+      container.style.left = "".concat(meetingDetailPortalLeft, "px");
+      container.style.top = "".concat(meetingDetailPortalTop, "px");
+      document.body.appendChild(container);
+      var handleClickOutside = function handleClickOutside(event) {
+        if (!container.contains(event.target)) {
+          setShowMeetingDetailPortal(false);
+        }
+      };
+      document.addEventListener('mousedown', handleClickOutside);
+      return function () {
+        document.body.removeChild(container);
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [isShowMeetingDetailPortal, container, meetingDetailPortalLeft, meetingDetailPortalTop, setShowMeetingDetailPortal]);
+  if (!isShowMeetingDetailPortal) {
+    return null;
+  }
+  return /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingDetails.MeetingDetails, {}), container);
+});
+var _default = exports["default"] = MeetingDetailsPortal;

package/lib/fragments/control-bar/meeting-details/meeting-details.d.ts

@@ -0,0 +1,2 @@
+import './meeting-detail.css';
+export declare const MeetingDetails: () => import("react/jsx-runtime").JSX.Element;