fcr-ui-scene 3.3.1 → 3.4.0

package/lib/modules/control-bar/index.css

@@ -0,0 +1,341 @@
+.share-action-nav__container {
+  width: fit-content;
+}
+
+.share-action-nav {
+  height: 54px;
+  border-radius: var(--fcr_cornerradius_m);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 0px;
+  padding: 8px 12px;
+  box-sizing: border-box;
+  align-items: center;
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  width: fit-content;
+}
+
+.draggable {
+  -webkit-app-region: drag;
+}
+
+.not-draggable {
+  -webkit-app-region: no-drag;
+}
+
+.share-action-nav__media-control-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 30px;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.share-action-nav__button {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  border-radius: var(--fcr_cornerradius_xs);
+  cursor: pointer;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.share-action-nav__button:hover {
+  background-color: var(--fcr_ui_scene_line1);
+}
+
+.share-action-nav__action-button {
+  width: 100%;
+  height: 36px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.share-action-nav__action-button:hover {
+  background-color: var(--fcr_web_ui_scene_hover2);
+}
+
+.share-action-nav__single-button {
+  width: 46px;
+}
+
+.share-action-nav__meeting-control-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 16px;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.share-action-nav__popover {
+  color: var(--fcr_ui_scene_icontext1);
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  box-shadow: var(--fcr_web_light_dropup_m);
+  border-radius: var(--fcr_cornerradius_l);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  max-width: 300px;
+}
+
+.share-action-nav__popover .fcr-tooltip-inner {
+  width: 300px !important;
+}
+
+.share-action-nav__popover-inner-content {
+  padding: 10px 0;
+  color: var(--fcr_ui_scene_icontext1);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+}
+
+.color-dark-gray-icontext1 {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.share-action-nav__media-title {
+  padding-left: 14px;
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 12px;
+}
+
+.share-action-nav__popover-option {
+  border-radius: 4px;
+  height: 32px;
+  display: flex;
+  color: var(--fcr_ui_scene_icontext1);
+  align-items: center;
+  gap: 8px;
+  padding: 6px;
+  box-sizing: border-box;
+  padding-left: 38px;
+}
+
+.share-action-nav__popover-option:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+.share-action-nav__popover-option-media-setting {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 8px;
+  padding-left: 6px;
+}
+
+.share-action-nav__media-list-group .fcr-radio-transparent:hover span,
+.share-action-nav__popover-option:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.share-action-nav__popover-option-media-setting:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.share-action-nav__button .fcr-radio {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.share-action-nav__popover .fcr-radio {
+  width: 100%;
+  border-radius: 4px;
+  height: 32px;
+  display: flex;
+  color: var(--fcr_ui_scene_icontext1);
+  align-items: center;
+  gap: 8px;
+  padding: 6px;
+  box-sizing: border-box;
+}
+
+.share-action-nav__popover .fcr-radio:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+.share-audio-button .fcr-checkbox-label {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.room-screen-share-state-bar {
+  display: flex;
+}
+
+.share-action-nav__can-draggable {
+  cursor: pointer;
+  /* -webkit-app-region: drag; */
+}
+
+.share-action-nav__move_to_top {
+  flex-direction: column;
+  transition: all 0.3s ease;
+}
+
+.share-action-nav__move_to_bottom {
+  flex-direction: column-reverse;
+  transition: all 0.3s ease;
+}
+
+.invisible {
+  opacity: 0;
+}
+
+.completely-hidden-in-bottom {
+  transition: all 0.3s ease;
+  transform: translateY(54px);
+}
+
+.completely-hidden-in-top {
+  transition: all 0.3s ease;
+  transform: translateY(-54px);
+}
+
+/* .radio-label-active {
+  color: var(--fcr_web_ui_scene_mainicon2);
+} */
+
+.radio-label-normal {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-control-bar-cloud-recording-buttons {
+  width: 78px;
+  height: 36px;
+  overflow: hidden;
+  border-radius: var(--fcr_cornerradius_xs);
+  display: inline-flex;
+  align-items: stretch;
+}
+
+.fcr-control-bar-cloud-recording-buttons > button {
+  flex: 1 0 38px;
+  font-size: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-control-bar-cloud-recording-buttons:hover,
+.fcr-control-bar-cloud-recording-buttons > button:hover {
+  background-color: var(--fcr_web_ui_scene_hover2);
+}
+
+.fcr-control-bar-cloud-recording-buttons > button:first-child {
+  flex-basis: 40px;
+}
+
+.leave-title {
+  width: 100%;
+  height: 39px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-family: Verdana;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18.2px;
+  text-align: center;
+
+  color: var(--fcr_ui_scene_icontext1, rgba(255, 255, 255, 1));
+}
+
+.leave-confirm {
+  width: 100%;
+  height: 36px;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_red6);
+  border-radius: var(--fcr_cornerradius_l);
+
+  font-family: Helvetica Neue;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+
+  cursor: pointer;
+}
+
+.leave-cancel {
+  width: 100%;
+  height: 36px;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_ramp_red6, rgba(251, 88, 78, 1));
+  border-radius: var(--fcr_cornerradius_l);
+  border: 1px solid var(--fcr_ui_scene_ramp_red6);
+
+  font-family: Verdana;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+
+  cursor: pointer;
+}
+
+.fcr-button {
+  -webkit-app-region: no-drag;
+}
+
+/* overide the default device control style for control bar */
+.share-action-nav__media-control-group .device-control {
+  width: 54px;
+  max-width: 54px;
+  min-width: 54px;
+  display: flex;
+}
+
+.share-action-nav__media-control-group .device-control-inner {
+  width: 36px;
+  height: 36px;
+  border-radius: none;
+  border-top-left-radius: var(--fcr_cornerradius_xs);
+  border-bottom-left-radius: var(--fcr_cornerradius_xs);
+  align-items: center;
+  flex-direction: row;
+  cursor: pointer;
+}
+
+.share-action-nav__media-control-group .device-control-inner:hover {
+  background: var(--fcr_web_ui_scene_hover2);
+}
+
+.share-action-nav__media-control-group .device-control-extra {
+  width: calc(54px - 34px);
+  height: 36px;
+  border-radius: 0;
+  border-top-right-radius: var(--fcr_cornerradius_xs);
+  border-bottom-right-radius: var(--fcr_cornerradius_xs);
+  position: initial;
+  cursor: pointer;
+}
+
+.share-action-nav__media-control-group .device-control-extra:hover svg {
+  transition: none;
+  transform: none;
+}
+
+.fcr-confirm-container .leave-container {
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+.fcr-confirm-container .leave-title {
+  height: auto;
+}
+
+.fcr-control-bar .fcr-tooltip {
+  max-width: 300px;
+}

package/lib/modules/control-bar/index.d.ts

@@ -0,0 +1,29 @@
+import { UIAction } from '../../utilities/constant';
+import { UIModule } from '../../base';
+import './index.css';
+import { FcrUIEventStore } from '../../common/event-store';
+import { FcrDeviceStore } from '../../common/device-store';
+import { FcrSecurityStore } from '../../common/security-store';
+import { FcrDeviceStreamStore } from '../../common/device-stream-store';
+import { FcrMainRoomControl } from 'fcr-core/lib/room-control/type';
+import { FcrDesktopMediaControl, FcrStreamControl, FcrUserControl } from 'fcr-core';
+export declare class ControlBarUIModule extends UIModule {
+    private _store;
+    private _securityStore;
+    private _deviceControlStore;
+    constructor({ uiEventStore, deviceStore, securityStore, roomControl, mediaControl, streamControl, deviceStreamStore, userControl, }: {
+        uiEventStore: FcrUIEventStore;
+        deviceStore: FcrDeviceStore;
+        securityStore: FcrSecurityStore;
+        roomControl: FcrMainRoomControl;
+        mediaControl: FcrDesktopMediaControl;
+        streamControl: FcrStreamControl;
+        deviceStreamStore: FcrDeviceStreamStore;
+        userControl: FcrUserControl;
+    });
+    getComponent(props: {
+        params: any;
+        browserWindow: Electron.BrowserWindow;
+    }): import("react/jsx-runtime").JSX.Element;
+    onUiEvent(event: UIAction, payload: any): void;
+}

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

@@ -0,0 +1,111 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.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.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.reflect.construct.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.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.for-each.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.ControlBarUIModule = void 0;
+require("core-js/modules/es.function.bind.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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 _store = _interopRequireWildcard(require("./store"));
+require("./index.css");
+var _view = require("./view");
+var _securityStore = require("../../common/security-store");
+var _store2 = require("../components/device-control/store");
+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; }
+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) { (0, _defineProperty2["default"])(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 _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 ControlBarUIModule = exports.ControlBarUIModule = /*#__PURE__*/function (_UIModule) {
+  function ControlBarUIModule(_ref) {
+    var _this;
+    var uiEventStore = _ref.uiEventStore,
+      deviceStore = _ref.deviceStore,
+      securityStore = _ref.securityStore,
+      roomControl = _ref.roomControl,
+      mediaControl = _ref.mediaControl,
+      streamControl = _ref.streamControl,
+      deviceStreamStore = _ref.deviceStreamStore,
+      userControl = _ref.userControl;
+    (0, _classCallCheck2["default"])(this, ControlBarUIModule);
+    _this = _callSuper(this, ControlBarUIModule);
+    _this._store = new _store["default"]({
+      uiEventStore: uiEventStore,
+      deviceStore: deviceStore,
+      securityStore: securityStore,
+      roomControl: roomControl,
+      streamControl: streamControl,
+      deviceStreamStore: deviceStreamStore,
+      userControl: userControl,
+      mediaControl: mediaControl
+    });
+    _this._securityStore = securityStore;
+    _this._deviceControlStore = new _store2.DeviceControlStore(mediaControl, roomControl, userControl, streamControl, deviceStreamStore, uiEventStore, deviceStore);
+    uiEventStore.addObserver({
+      onEvent: _this.onUiEvent.bind(_this)
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(ControlBarUIModule, _UIModule);
+  return (0, _createClass2["default"])(ControlBarUIModule, [{
+    key: "getComponent",
+    value: function getComponent(props) {
+      var params = props.params,
+        browserWindow = props.browserWindow;
+      this._store.initControlBar(params, browserWindow);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
+        value: this._store,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_securityStore.SecurityStoreContext.Provider, {
+          value: this._securityStore,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store2.DeviceControlStoreContext.Provider, {
+            value: this._deviceControlStore,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.ControlBarView, {})
+          })
+        })
+      });
+    }
+  }, {
+    key: "onUiEvent",
+    value: function onUiEvent(event, payload) {
+      switch (event) {
+        case _constant.UIAction.SET_CURRENT_SHARE_SCREEN:
+          this._store.updateCurrentShareContent(_objectSpread({}, payload));
+          break;
+      }
+    }
+  }]);
+}(_base.UIModule);

package/lib/modules/control-bar/store.d.ts

@@ -0,0 +1,111 @@
+import { AgoraRtcScreenCaptureType, AgoraRtcWindowInfo } from 'agora-rte-sdk/lib/core/rtc/type';
+import { AudioProcessingChannel } from 'agora-ui-foundation/lib/components/room-screen-share-state-bar/share-audio';
+import { FcrUIEventStore } from '../../common/event-store';
+import { FcrDeviceStore } from '../../common/device-store';
+import { FcrSecurityStore } from '../../common/security-store';
+import { FcrDeviceStreamStore } from '../../common/device-stream-store';
+import { FcrMainRoomControl } from 'fcr-core/lib/room-control/type';
+import { FcrDesktopMediaControl, FcrStreamControl, FcrUserControl } from 'fcr-core';
+import { FcrLiveStreamingState, FcrRecordingState, FcrRoomInfo, FcrUserInfo, FcrUserRole } from 'fcr-core/lib/type';
+import { MoreAction } from './type';
+export default class ControlBarStore {
+    protected logger: import("agora-foundation/lib/logger").Logger;
+    private _screenBounds;
+    private _uiEventStore;
+    private _disposers;
+    private _roomControl;
+    private _securityStore;
+    private _userControl;
+    private _streamControl;
+    private _liveStreamingDialogKey;
+    accessor leaveConfirmRef: React.ReactNode;
+    accessor shareWithAudio: boolean;
+    accessor shareAudioProcessingChannel: AudioProcessingChannel;
+    accessor currentShareId: string;
+    accessor currentShareType: AgoraRtcScreenCaptureType;
+    accessor cloudRecordingState: FcrRecordingState;
+    accessor localUserRole: FcrUserRole;
+    accessor isHost: boolean;
+    accessor roomDuration: number;
+    accessor startTime: number;
+    accessor playUrl: string;
+    accessor liveStreamingState: FcrLiveStreamingState;
+    accessor allApplicationWindows: AgoraRtcWindowInfo[];
+    accessor roomInfo: FcrRoomInfo;
+    accessor isShowMeetingDetailPortal: boolean;
+    accessor users: FcrUserInfo[];
+    accessor isPstnUser: boolean;
+    accessor isMuteAudio: boolean;
+    accessor hiddenShareActionNav: boolean;
+    accessor boardOwnerUser: string;
+    accessor meetingId: string | undefined;
+    get localUser(): FcrUserInfo;
+    get remoteUsers(): FcrUserInfo[];
+    get screenBounds(): {
+        width: number;
+        height: number;
+        availTop: number;
+        x: number;
+        y: number;
+    };
+    get hasSecurityPermission(): boolean;
+    get hasStartCloudRecordingPermission(): boolean;
+    get hasStopLiveStreamingPermission(): boolean;
+    get hasGetLiveStreamingUrlPermission(): boolean;
+    get hasStartLiveStreamingPermission(): boolean;
+    get hasAssignHostBeforeLeavingPermission(): boolean;
+    get hasEndRoomPermission(): boolean;
+    constructor({ uiEventStore, securityStore, roomControl, mediaControl, userControl, streamControl, deviceStore, }: {
+        uiEventStore: FcrUIEventStore;
+        deviceStore: FcrDeviceStore;
+        securityStore: FcrSecurityStore;
+        roomControl: FcrMainRoomControl;
+        streamControl: FcrStreamControl;
+        deviceStreamStore: FcrDeviceStreamStore;
+        mediaControl: FcrDesktopMediaControl;
+        userControl: FcrUserControl;
+    });
+    initControlBar(payload: any, browserWindow: Electron.BrowserWindow): void;
+    setControlBarWindowBounds(window?: Electron.BrowserWindow): void;
+    updateCurrentShareContent(payload: {
+        id: string;
+        type: AgoraRtcScreenCaptureType;
+        withAudio: boolean;
+    }): void;
+    setLocalUserRole(role: FcrUserRole): void;
+    setShareWithAudioState(withAudio: boolean): void;
+    createNewShare(): void;
+    handlerStopShare(): void;
+    setShareAudioProcessingChannel(target: AudioProcessingChannel): void;
+    handleMoreClick(actionKey: MoreAction): void;
+    openLiveStreamingDialog(): void;
+    pauseCloudRecording(): void;
+    resumeCloudRecording(): void;
+    stopCloudRecording(): void;
+    startCloudRecording(): void;
+    getCoordinate(offsetWidth: number, offsetHeight: number): {
+        x: number;
+        y: number;
+    };
+    showToast(params: any): void;
+    setShowMeetingDetailPortal(show: boolean): void;
+    setEnableWaitingRoom(enable: boolean): void;
+    sendLeave(): void;
+    sendEnd(): void;
+    keepPhoneAudioConnection(): void;
+    sendAssign(user: FcrUserInfo): void;
+    handleLeaveRoom(): void;
+    getCurrentSharingWorkArea(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        displayId: number;
+        availTop: number;
+    };
+    private _handleStreamUpdate;
+    private _handleRemoteUsersJoined;
+    private _handleRemoteUsersLeft;
+    private _handleUserInfoUpdated;
+}
+export declare const StoreContext: import("react").Context<ControlBarStore>;