fcr-ui-scene 3.4.0 → 3.4.1

package/lib/modules/components/dialog-container/index.css

@@ -0,0 +1,78 @@
+.fcr-dialog-container {
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  box-shadow: var(--fcr_web_light_dropup);
+  border-radius: var(--fcr_cornerradius_xl);
+  position: relative;
+  flex: 1;
+  width: 100%;
+}
+
+.fcr-dialog-container-header {
+  width: 100%;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  -webkit-app-region: drag;
+  color: var(--fcr_ui_scene_icontext1);
+  justify-content: center;
+  cursor: move;
+  border-radius: var(--fcr_cornerradius_xl);
+}
+
+.fcr-dialog-container-header h2 {
+  font-size: 16px;
+  font-weight: 700;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-dialog-container-actions {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-right: 10px;
+}
+
+.fcr-dialog-container-content {
+  position: relative;
+  border-bottom-left-radius: var(--fcr_cornerradius_xl);
+  border-bottom-right-radius: var(--fcr_cornerradius_xl);
+  overflow: hidden;
+}
+
+.fcr-dialog-container .fcr-dialog-container-content:first-child {
+  border-top-left-radius: var(--fcr_cornerradius_xl);
+  border-top-right-radius: var(--fcr_cornerradius_xl);
+}
+
+.fcr-dialog-container-close {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--fcr_ui_scene_ramp_red6);
+  position: absolute;
+  left: 15px;
+  top: 15px;
+  display: block;
+  cursor: pointer;
+  -webkit-app-region: no-drag;
+  text-align: center;
+  line-height: 13px;
+}
+
+.fcr-dialog-container-close span {
+  display: none;
+}
+
+.fcr-dialog-container-close:hover span {
+  display: block;
+  color: #fff;
+}
+
+.fcr-dialog-container-close:hover {
+  color: var(--fcr_ui_scene_ramp_red7);
+}

package/lib/modules/components/dialog-container/index.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { DialogKey } from '../../../utilities/constant';
+declare const DialogContainer: (props: PropsWithChildren<{
+    width?: number;
+    height?: number;
+    dialogKey: DialogKey;
+    title?: string;
+    onClose?: () => void;
+    actions?: React.ReactNode;
+}>) => import("react/jsx-runtime").JSX.Element;
+export default DialogContainer;

package/lib/modules/components/dialog-container/index.js

@@ -0,0 +1,110 @@
+"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.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/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/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _mobxReact = require("mobx-react");
+var _react2 = require("@use-gesture/react");
+var _env = require("agora-foundation/lib/utilities/env");
+var _store = require("../../dialog/store");
+var _body = require("./component/body");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+var DialogContainer = (0, _mobxReact.observer)(function (props) {
+  var width = props.width,
+    title = props.title,
+    onClose = props.onClose,
+    children = props.children,
+    dialogKey = props.dialogKey,
+    actions = props.actions;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    closeDialogByKey = _useContext.closeDialogByKey;
+  var handleClose = function handleClose() {
+    closeDialogByKey(dialogKey);
+    onClose === null || onClose === void 0 || onClose();
+  };
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.DialogContainerBody, {
+    title: title,
+    onClick: handleClose,
+    actions: actions,
+    children: children
+  });
+  if ((0, _env.isElectron)()) return container;
+  var rndRef = (0, _react.useRef)(null);
+  var size = (0, _react.useMemo)(function () {
+    var _rndRef$current;
+    return {
+      width: width || 400,
+      height: props.height ? props.height : ((_rndRef$current = rndRef.current) === null || _rndRef$current === void 0 ? void 0 : _rndRef$current.getBoundingClientRect().height) || 160
+    };
+  }, [props.height]);
+  var windowBounds = {
+    x: 0,
+    y: 0,
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+  var _useState = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    bounds = _useState2[0],
+    setBounds = _useState2[1];
+  var bind = (0, _react2.useDrag)(function (_ref) {
+    var _ref$delta = (0, _slicedToArray2["default"])(_ref.delta, 2),
+      dx = _ref$delta[0],
+      dy = _ref$delta[1];
+    var x = bounds.x + dx;
+    var y = bounds.y + dy;
+    var maxX = windowBounds.width - size.width;
+    var maxY = windowBounds.height - size.height;
+    var coord = {
+      x: Math.max(0, Math.min(maxX, x)),
+      y: Math.max(0, Math.min(maxY, y))
+    };
+    setBounds(coord);
+  });
+  (0, _react.useEffect)(function () {
+    setBounds({
+      x: windowBounds.width / 2 - size.width / 2,
+      y: windowBounds.height / 2 - size.height / 2
+    });
+  }, [rndRef.current]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, bind()), {}, {
+    style: {
+      width: size.width,
+      height: size.height,
+      left: "".concat(bounds.x, "px"),
+      top: "".concat(bounds.y, "px"),
+      position: 'absolute',
+      touchAction: 'none',
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    children: container
+  }));
+});
+var _default = exports["default"] = DialogContainer;

package/lib/modules/components/member-window/index.css

@@ -0,0 +1,419 @@
+/* fcr member-window */
+.fcr-member-window {
+  width: 100%;
+  height: 100%;
+  color: var(--fcr_ui_scene_icontext1);
+  background-color: var(--fcr_ui_scene_video);
+  font-size: 12px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  position: relative;
+  overflow: hidden;
+}
+.fcr-member-window button,
+.fcr-member-board button {
+  border: none;
+  outline: none;
+}
+.fcr-member-window button:focus,
+.fcr-member-board button:focus {
+  border: none;
+  outline: none;
+}
+.fcr-member-board {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.fcr-member-board-mask {
+  display: none;
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+.fcr-member-board-mask-show {
+  display: block;
+}
+/* .fcr-member-window.fcr-member-window-suspend {
+  background-color: var(--fcr_ui_scene_video_s);
+  border-radius: 0;
+} */
+.fcr-member-window-background {
+  position: absolute;
+  inset: 0;
+  color: var(--fcr_ui_scene_icontext3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  visibility: hidden;
+}
+.fcr-member-window-is-broken {
+  visibility: visible;
+}
+
+.fcr-member-window-background svg {
+  opacity: 0.3;
+}
+
+.fcr-member-window-avatar {
+  padding: 0 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+}
+
+.fcr-member-window-body {
+  position: absolute;
+  inset: 0;
+  font-size: 0;
+}
+.fcr-member-window-body-render-video-loading {
+  border-radius: 10px;
+  position: absolute;
+  z-index: 999;
+  display: flex;
+  top: 10px;
+  right: 13px;
+  max-width: 447px;
+  height: fit-content;
+  transition: all 0.2s;
+  padding: 6px 8px;
+  gap: 14px;
+  background: #748bff;
+  align-items: center;
+  justify-content: center;
+}
+.fcr-member-window-body-render-video-loading span {
+  color: #fff;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  white-space: pre-wrap;
+}
+.fcr-member-window-body-render-video-loading .render-video-loading-icon {
+  animation: loading-rotate 1s linear infinite;
+}
+
+@keyframes loading-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.fcr-member-window-body.fcr-member-window-body-video-remote {
+  visibility: hidden;
+}
+.fcr-member-window-body.fcr-member-window-body-video-remote-render {
+  visibility: visible;
+}
+.fcr-member-window-excitation {
+  position: absolute;
+  inset: 0;
+  font-size: 0;
+  border: 2px solid var(--fcr_ui_scene_ramp_green6);
+  opacity: 0;
+}
+.fcr-member-window-excitation-show {
+  opacity: 1;
+}
+.fcr-member-window-pin {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  width: 26px;
+  height: 26px;
+  border-radius: var(--fcr_cornerradius_xs);
+  background-color: var(--fcr_ui_scene_view_toast);
+  /* opacity: 0; */
+  /* transition: opacity 0.2s; */
+  z-index: 3;
+}
+.fcr-member-window-pin-show {
+  /* opacity: 1; */
+  display: flex;
+}
+.fcr-member-board:hover .fcr-user-window-actions-top,
+.fcr-member-window:hover .fcr-user-window-actions-top {
+  opacity: 1;
+}
+.fcr-member-window-members-sharebtn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--fcr_ui_scene_ramp_green6);
+  border-radius: var(--fcr_cornerradius_xxs);
+  /* padding: 0 1px; */
+  height: 18px;
+  margin-right: 2px;
+}
+.fcr-member-window-members-sharebtn-show {
+  margin-left: 0px;
+  display: flex;
+}
+
+.fcr-member-window-members-sharebtn-large {
+  height: 24px;
+  margin-right: 6px;
+}
+/* fcr-member-window-action start */
+
+.fcr-user-window-actions {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto !important;
+  transition: opacity 0.2s;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.fcr-user-window-actions-hide {
+  opacity: 0;
+}
+
+.fcr-user-window-actions button {
+  pointer-events: auto;
+}
+
+.fcr-user-window-actions-bottom {
+  position: absolute;
+  inset: auto auto 4px 4px;
+  z-index: 1;
+  max-width: calc(100% - 8px);
+  height: 18px;
+  transition: opacity 0.2s;
+  opacity: 1;
+}
+
+.fcr-user-window-actions-bottom-layout {
+  color: var(--fcr_ui_scene_icontext1);
+  font-weight: var(--fcr_font_weight_m);
+  font-size: 12px;
+  backdrop-filter: blur(25px);
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+}
+.fcr-user-window-actions-bottom-layout-info {
+  border-radius: var(--fcr_cornerradius_xs);
+  background-color: var(--fcr_ui_scene_view_toast);
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+}
+.fcr-user-window-actions-bottom-interpreter-tag {
+  margin-left: 8px;
+}
+.fcr-member-board .fcr-user-window-actions-bottom-show,
+.fcr-member-window .fcr-user-window-actions-bottom-show {
+  opacity: 1;
+}
+.fcr-member-board:hover .fcr-user-window-actions-bottom,
+.fcr-member-window:hover .fcr-user-window-actions-bottom {
+  opacity: 1;
+}
+.fcr-member-window-gallery .fcr-user-window-actions-bottom {
+  height: 24px;
+  font-size: 12px;
+}
+
+.fcr-user-window-actions-tag {
+  height: 18px;
+  border-radius: var(--fcr_cornerradius_xs);
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.fcr-member-window-gallery .fcr-user-window-actions-tag {
+  height: 24px;
+  border-radius: var(--fcr_cornerradius_xs);
+}
+
+.fcr-user-window-actions-tag-host {
+  color: var(--fcr_ui_scene_white10);
+  background: linear-gradient(90deg, #4262ff, #7c79ff);
+  padding: 0 8px;
+  /* margin-right: 10px; */
+}
+
+.fcr-user-window-actions-tag-host:has(svg) {
+  padding-left: 4px;
+}
+
+.fcr-user-window-actions-volume {
+  color: var(--fcr_ui_scene_icontext1);
+  --fcr-volume-icon-color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-user-window-actions-tag-host .fcr-user-window-actions-volume {
+  color: var(--fcr_ui_scene_white10);
+  --fcr-volume-icon-color: var(--fcr_ui_scene_white10);
+}
+
+.fcr-member-window-gallery .fcr-user-window-actions-tag-host {
+  padding: 0 13px;
+}
+
+.fcr-member-window-gallery .fcr-user-window-actions-tag-host:has(svg) {
+  padding-left: 6px;
+}
+
+.fcr-user-window-actions-microphone {
+  padding: 1px;
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  color: var(--fcr_ui_scene_icontext1);
+  border-radius: var(--fcr_cornerradius_xxs);
+  background-color: var(--fcr_ui_scene_view_toast);
+  cursor: default;
+}
+
+.fcr-user-window-actions-tag-host .fcr-user-window-actions-microphone {
+  color: var(--fcr_ui_scene_white10);
+}
+
+.fcr-user-window-has-audio .fcr-user-window-actions-microphone {
+  display: none;
+}
+
+.fcr-member-window-gallery .fcr-user-window-actions-microphone {
+  padding: 0;
+  background-color: transparent;
+}
+
+.fcr-user-window-actions-tag ~ .fcr-user-window-actions-microphone {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.fcr-user-window-actions-tag:has(~ .fcr-user-window-actions-microphone) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.fcr-user-window-actions-bottom .fcr-user-window-actions-name {
+  padding: 0 2px;
+  font-weight: var(--fcr_font_weight_s);
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fcr-user-window-actions-bottom .fcr-user-window-actions-name.ml-5 {
+  margin-left: 5px;
+}
+
+.fcr-user-window-actions-name-isme {
+  font-weight: normal;
+}
+
+.fcr-user-window-actions-bottom .fcr-user-window-actions-name-rename {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  display: none;
+}
+
+.fcr-user-window-actions-bottom:hover .fcr-user-window-actions-name-rename {
+  display: block;
+}
+
+.member-window-actions__more-actions {
+  padding: 0;
+}
+
+/* .fcr-member-window-gallery .fcr-user-window-actions-name {
+  padding: 0 4px;
+} */
+
+.fcr-user-window-actions-name-doing {
+  line-height: 1;
+  font-weight: var(--fcr_font_weight_s);
+  white-space: nowrap;
+  padding-right: 6px;
+}
+
+.fcr-user-window-actions-top {
+  height: 26px;
+  position: absolute;
+  inset: 3px 3px auto;
+  display: flex;
+  flex-flow: row-reverse nowrap;
+  gap: 5px;
+  font-size: 12px;
+  opacity: 0;
+  transition: opacity 0.2s;
+  z-index: 1;
+}
+.fcr-member-window .fcr-user-window-actions-top-active {
+  opacity: 1;
+}
+.fcr-user-window-actions-more {
+  padding: 3px;
+  border-radius: var(--fcr_cornerradius_xxs);
+  background-color: var(--fcr_web_ui_scene_hover3);
+}
+
+.fcr-user-window-actions-mute {
+  padding: 0 6px;
+  border-radius: var(--fcr_cornerradius_xxs);
+  background-color: var(--fcr_web_ui_scene_hover3);
+}
+
+.fcr-user-window-actions-mute:disabled {
+  display: none;
+}
+
+.fcr-layout-content-bar {
+  position: absolute;
+  height: 0px;
+  width: 100%;
+  transition: height 0s;
+  z-index: 1;
+}
+
+.fcr-layout-speaker .fcr-layout-content-bar {
+  position: relative;
+}
+
+.fcr-layout-content-top {
+  top: 0;
+  display: flex;
+  flex-flow: column-reverse nowrap;
+  justify-content: flex-end;
+}
+
+.fcr-layout-content-top .fcr-layout-content-bar-body {
+  display: flex;
+  flex-flow: column-reverse nowrap;
+}
+
+.fcr-user-window-actions-tag_large {
+  margin-bottom: 10px;
+}
+.fcr-user-window-actions-bottom .fcr-device-settings-video__video-flip-container {
+  position: static;
+  margin-left: 2px;
+}
+.fcr-user-window-actions-bottom .fcr-device-settings-video__video-flip-container:hover {
+  background: var(--fcr_ui_scene_white10);
+}
+.fcr-user-window-actions-bottom
+  .fcr-device-settings-video__video-flip-container
+  .fcr-clickable-icon-small {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--fcr_cornerradius_xs);
+}

package/lib/modules/components/member-window/index.d.ts

@@ -0,0 +1,76 @@
+import { FcrUserRole } from 'fcr-core/lib/type';
+import { FcrUIVideoWindowData } from '../../layout/type';
+import './index.css';
+import { AgoraRtcRenderMode, AgoraRtcVideoStreamType } from 'agora-rte-sdk/lib/core/rtc/type';
+import { FcrVideoWindowPreviewType } from '../../video-window/type';
+import { FcrInterpreterUserInfo } from 'fcr-core/lib/room-control/interpreter-control/types';
+export interface MemberWindowCustomProps {
+    showAvatar: boolean;
+    onDoubleClick: () => void;
+    onRemovePin: (streamId: string) => void;
+    slot?: React.ReactNode;
+    width?: number;
+    height?: number;
+    canShowSpeakerSpotlight: boolean;
+    memberWindowPreviewType?: 'gallery' | 'carousel' | 'suspend';
+    videoRenderMode: AgoraRtcRenderMode;
+    videoStreamType: AgoraRtcVideoStreamType;
+}
+export interface MemberWindowProps extends MemberWindowCustomProps {
+    windowData: FcrUIVideoWindowData;
+}
+export declare const MemberWindow: ({ showAvatar, windowData, onDoubleClick, slot, width, height, canShowSpeakerSpotlight, onRemovePin, memberWindowPreviewType, videoRenderMode, videoStreamType, }: MemberWindowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MemberWindowActions: ({ windowData, iconSize, windowSize, openPrivateChat, localUserRole, sendParticipantEvent, muteAudio, hasPinnedStream, allowedOperations, setVideoOrientation, showActionBottomLabel, isShowActionAudio, actionAudioTag, onVisibleChanged, videoWindowCurrentWidth, videoWindowCurrentHeight, videoWindowPreviewType, showRotation, interpreterUsers, interpreterState, handleRename, renderListLength, }: {
+    windowData: FcrUIVideoWindowData;
+    iconSize: number;
+    windowSize: "large" | "normal";
+    openPrivateChat: (userId: string) => void;
+    localUserRole: FcrUserRole;
+    sendParticipantEvent: (event: any) => void;
+    muteAudio: (mute: boolean, userId: string) => void;
+    hasPinnedStream: boolean;
+    allowedOperations: string[];
+    setVideoOrientation: () => void;
+    showActionBottomLabel: boolean;
+    isShowActionAudio: boolean;
+    actionAudioTag: string;
+    onVisibleChanged?: (visible: boolean) => void;
+    videoWindowCurrentWidth?: number;
+    videoWindowCurrentHeight?: number;
+    videoWindowPreviewType?: FcrVideoWindowPreviewType;
+    showRotation: boolean;
+    interpreterUsers: FcrInterpreterUserInfo[];
+    interpreterState: boolean;
+    handleRename: (userId: string) => void;
+    renderListLength?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+interface MemberBoardProps {
+    slot: React.ReactNode;
+    isMask: boolean;
+    onMaskDoubleClick: () => void;
+    windowData: FcrUIVideoWindowData;
+    allowedOperations: string[];
+    showActionBottomLabel: boolean;
+    isShowActionAudio: boolean;
+    actionAudioTag: string;
+}
+export declare const MemberBoard: ({ slot, isMask, onMaskDoubleClick, windowData, allowedOperations, showActionBottomLabel, isShowActionAudio, actionAudioTag, }: MemberBoardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FcrUIVideoPlayer: (props: {
+    isLocal: boolean;
+    streamId: string;
+    hasVideoStream: boolean;
+    videoStreamType: AgoraRtcVideoStreamType;
+    renderMode: AgoraRtcRenderMode;
+    hasScreenSharing: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const FcrUILocalVideoPlayer: (props: {
+    renderMode: AgoraRtcRenderMode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const FcrUIRemoteVideoPlayer: ({ streamId, hasVideoStream, videoStreamType, renderMode, hasScreenSharing, }: {
+    streamId: string;
+    hasVideoStream: boolean;
+    videoStreamType: AgoraRtcVideoStreamType;
+    renderMode: AgoraRtcRenderMode;
+    hasScreenSharing: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};