fcr-ui-scene 3.1.1 → 3.3.0

package/lib/modules/share-screen/share-state-bar/index.css

@@ -1,27 +1,57 @@
 .share-state-bar {
   background-color: var(--fcr_web_ui_scene_fill2);
   border-radius: var(--fcr_cornerradius_s);
-  gap: 10px;
-  height: 34px;
-  width: fit-content;
   padding: 10px;
+  box-shadow: var(--fcr_web_light_dropup);
+  flex-direction: column;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
 }
 
-.share-state-bar,
-.share-state-bar__state {
+.share-state-bar__control {
+  gap: 10px;
+  height: 28px;
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
+  width: max-content;
   align-items: center;
 }
 
 .share-state-bar__state {
   gap: 10px;
+  display: flex;
+  align-items: center;
+  border-radius: var(--fcr_cornerradius_xs);
+  padding: 3px 5px 3px 3px;
+}
+
+.share-state-bar .divider-vertical {
+  border-left: 1px solid;
+  border-image: linear-gradient(to bottom, transparent 0%, #888 50%, #888 50%, transparent 100%) 1;
+}
+
+.share-state-bar__state:hover {
+  background: var(--fcr_web_ui_scene_hover);
+  color: var(--fcr_web_ui_scene_mainicon2);
+  cursor: pointer;
+}
+
+.share-state-bar__state:hover svg:nth-child(3) path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.share-state-bar__text {
+  width: 100px;
+  line-height: 1;
 }
 
 .share-state-bar__share_screen_preview {
-  width: 58px;
-  height: 34px;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  margin-top: 10px;
+  background-color: #d9d9d9;
+  border-radius: var(--fcr_cornerradius_xs);
+  overflow: hidden;
 }
 
 .share-state-bar__stop-share {
@@ -33,6 +63,14 @@
   cursor: pointer;
 }
 
-.share-state-bar__share_screen_preview {
-  background-color: #d9d9d9;
+.share-state-bar .share-state-nav__drag-button:hover,
+.share-state-bar .share-state-nav__transfer-position:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+  height: 20px;
+  cursor: pointer;
+}
+
+.share-state-bar .share-state-nav__drag-button:hover path,
+.share-state-bar .share-state-nav__transfer-position:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
 }

package/lib/modules/share-screen/share-state-bar/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.css';
 export declare const ShareStateBar: import("react").ForwardRefExoticComponent<{
     onStopShare: () => void;

package/lib/modules/share-screen/share-state-bar/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ShareStateBar = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _button = require("agora-ui-foundation/lib/components/button");
 var _divider = _interopRequireDefault(require("agora-ui-foundation/lib/components/divider"));
 var _icon = require("agora-ui-foundation/lib/components/icon");
@@ -17,33 +18,60 @@ require("./index.css");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
 var ShareStateBar = exports.ShareStateBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var shareScreenPreviewRef = (0, _react.useRef)(null);
+  var shareScreenBarRef = (0, _react.useRef)(null);
+  var rndRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showPreview = _useState2[0],
+    setShowPreview = _useState2[1];
   var t = (0, _i18n.useI18n)();
   (0, _react.useEffect)(function () {
-    if (shareScreenPreviewRef) {
-      // ref(shareScreenPreviewRef.current);
-    }
-  }, [shareScreenPreviewRef]);
+    var _shareScreenBarRef$cu, _rndRef$current;
+    var _document$body = document.body,
+      offsetWidth = _document$body.offsetWidth,
+      offsetTop = _document$body.offsetTop;
+    var barWidth = ((_shareScreenBarRef$cu = shareScreenBarRef.current) === null || _shareScreenBarRef$cu === void 0 ? void 0 : _shareScreenBarRef$cu.offsetWidth) || 300;
+    (_rndRef$current = rndRef.current) === null || _rndRef$current === void 0 || _rndRef$current.updatePosition({
+      x: offsetWidth / 2 - barWidth / 2,
+      y: offsetTop
+    });
+  }, [rndRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
+    bounds: "window",
+    ref: rndRef,
     enableResizing: false,
     dragHandleClassName: "share-state-nav__drag-icon",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "share-state-bar",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_shareStateNav.DragIcon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
-        type: "vertical"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "share-state-bar__state",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-          type: _type.FcrIconType.FCR_VIDEO_SHARESCREEN,
-          size: 22,
-          colors: {
-            iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: t('fmt_modules_labels_sharing')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "share-state-bar__share_screen_preview",
-          ref: ref
+      ref: shareScreenBarRef,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "share-state-bar__control",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_shareStateNav.DragIcon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+          type: "vertical"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "share-state-bar__state",
+          onClick: function onClick() {
+            return setShowPreview(!showPreview);
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_VIDEO_SHARESCREEN,
+            size: 22,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "share-state-bar__text",
+            children: t('fmt_modules_labels_sharing')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            size: 12,
+            type: _type.FcrIconType.FCR_V2_CHEVRON_DOWN2,
+            style: {
+              transform: showPreview ? 'rotate(180deg)' : 'rotate(0deg)'
+            },
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_icontext3)'
+            }
+          })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
           type: "primary",
           styleType: "danger",
@@ -61,6 +89,9 @@ var ShareStateBar = exports.ShareStateBar = /*#__PURE__*/(0, _react.forwardRef)(
             }), t('fmt_screenshare_controlbar_button_stop')]
           })
         })]
+      }), showPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "share-state-bar__share_screen_preview",
+        ref: ref
       })]
     })
   });

package/lib/modules/share-screen/store.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
-import { FcrDesktopMediaControl, FcrMainRoomControl, FcrMediaSourceState } from 'agora-edu-core';
+import { FcrBaseRoomControl, FcrDesktopMediaControl, FcrMediaSourceState } from 'agora-edu-core';
 import { FcrUserInfo, FcrUserRole } from 'agora-edu-core/lib/type';
 import { AgoraRtcDisplayInfo, 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 { FcrSecurityStore } from '../../common/security-store';
-import { DialogKey, UIAction } from '../../utilities/constant';
+import { DialogKey } from '../../utilities/constant';
 import { FcrDeviceStreamStore } from '../../common/device-stream-store';
 import { FcrDeviceStore } from '../../common/device-store';
+import { FcrUISceneConfig } from '../../type';
 type ScreenCaptureSourceType = Omit<AgoraRtcDisplayInfo, 'image'> & {
     image: React.ReactNode | Uint8Array;
 };
@@ -26,6 +26,8 @@ export default class ShareScreenStore {
     private _currentShareStreamId;
     private _connectType;
     private _removeScreenStreamFailed;
+    private _isReplaceScreen;
+    private _previewDom;
     private _observer;
     private _deviceStoreObserver;
     private _roomObserver;
@@ -53,38 +55,36 @@ export default class ShareScreenStore {
     accessor currentSelection: string;
     accessor currentSelectionType: AgoraRtcScreenCaptureType;
     accessor shareWithAudio: boolean;
-    accessor boardOwnerUser: FcrUserInfo | null;
+    accessor boardOwnerUser: FcrUserInfo | undefined;
     accessor localUser: FcrUserInfo | null;
     accessor localUserRole: FcrUserRole;
     accessor title: string;
+    accessor localMicrophoneMute: boolean;
+    private _config;
     get localVideoState(): boolean | undefined;
     get localAudioState(): boolean | undefined;
     get localAudioVolume(): boolean | undefined;
-    constructor({ roomControl, mediaControl, securityStore, uiEventStore, deviceStore, deviceStreamStore, }: {
-        roomControl: FcrMainRoomControl;
+    constructor({ roomControl, mediaControl, securityStore, uiEventStore, deviceStore, deviceStreamStore, config, }: {
+        roomControl: FcrBaseRoomControl;
         mediaControl: FcrDesktopMediaControl;
         securityStore: FcrSecurityStore;
         uiEventStore: FcrUIEventStore;
         deviceStore: FcrDeviceStore;
         deviceStreamStore: FcrDeviceStreamStore;
+        config: FcrUISceneConfig;
     });
     handleChooseScreen: (id: string, type?: AgoraRtcScreenCaptureType) => void;
     setShareWithAudioState(withAudio: boolean): void;
     setShareAudioProcessingChannel(currentShareAudioProcessingChannel: any): void;
     handlerBoardShareStop(): void;
+    sendLocalAudioStateEvent(): void;
     release(): void;
     handleCheckScreenCapturePermission(): void;
     handleToSetting(): void;
-    setShareWithAudio(withAudio: any, confirmAudioShareWhileMicOff?: boolean): void;
     muteLocalAudio(mute: boolean, confirmAudioShareWhileMicOff?: boolean): Promise<void>;
     muteLocalVideo(mute: boolean): Promise<void>;
-    onUiEvent(event: UIAction, params: any): Promise<void>;
-    handleShareScreenResource(): Promise<void>;
-    handleStartShare(id?: string, type?: AgoraRtcScreenCaptureType, withAudio?: boolean, audioProcessingChannel?: AudioProcessingChannel): Promise<void>;
     handleShareStartWithAudio(): void;
     handleShareStopWithAudio(): void;
-    handleStopShare(): void;
-    handleReplaceScreen(id?: string, type?: AgoraRtcScreenCaptureType, withAudio?: boolean, audioProcessingChannel?: AudioProcessingChannel): void;
     startPreview(dom: HTMLElement): void;
     setShareControlBarActive(active: boolean): void;
     setCurrentCameraId(deviceId: string): void;
@@ -97,7 +97,6 @@ export default class ShareScreenStore {
     setAllowUnmuteSelfVideo(allow: boolean): void;
     setAllowUnmuteSelfAudio(allow: boolean): void;
     setLockRoomEnabled(lock: boolean): void;
-    setWaitingRoomEnabled(allow: boolean): void;
     openDialog(item: DialogKey): void;
     closeDialog(item: DialogKey): void;
     openLiveStreamingDialog(): void;
@@ -107,6 +106,14 @@ export default class ShareScreenStore {
     openVideoWindowDialog(): void;
     closeControlBar(): void;
     closeVideoWindowDialog(): void;
+    setShareWithAudio(withAudio: boolean, confirmAudioShareWhileMicOff?: boolean): void;
+    private _setWithAudioState;
+    handleShareScreenResource(): Promise<void>;
+    handleStartShare(id?: string, type?: AgoraRtcScreenCaptureType, withAudio?: boolean, audioProcessingChannel?: AudioProcessingChannel): Promise<void>;
+    handleReplaceScreen(id?: string, type?: AgoraRtcScreenCaptureType, withAudio?: boolean, audioProcessingChannel?: AudioProcessingChannel): void;
+    handleStopShare(): void;
+    private _createScreenStream;
+    private _handleWebScreenCaptureStateUpdated;
     private _handleScreenCaptureStateUpdated;
     private _updateCameraList;
     private _updateMicrophoneList;
@@ -117,9 +124,11 @@ export default class ShareScreenStore {
     private _removeScreenStream;
     private _syncShareStreamState;
     private _refreshLocalUser;
+    private _onStreamRemoved;
     private _addEventListeners;
     private _removeEventListeners;
     private _addReactions;
+    private _onUiEvent;
     private _removeReactions;
     private _showToast;
     private _validateWindow;
@@ -127,6 +136,7 @@ export default class ShareScreenStore {
     private _validateShareStart;
     private _hasScreenSharePermission;
     private _getExcludeWindows;
+    private _initToolbar;
 }
 export declare const StoreContext: import("react").Context<ShareScreenStore>;
 export {};