fcr-ui-scene-mobile 3.4.0

package/lib/modules/member-layout/data.js

@@ -0,0 +1,304 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.test = void 0;
+var test = exports.test = [{
+  "userId": "11111",
+  "userName": "1",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "2666333222"
+}, {
+  "userId": "222222",
+  "userName": "2",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "phone-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "2223333222"
+}, {
+  "userId": "33333",
+  "userName": "3",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "meeting-system",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "222222"
+}, {
+  "userId": "444444444",
+  "userName": "4",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "phone-mic",
+  "videoDeviceType": "none",
+  "userType": "phone",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "2222222"
+}, {
+  "userId": "5555555",
+  "userName": "5",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "2222222222"
+}, {
+  "userId": "66666",
+  "userName": "6",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "2222222222"
+}, {
+  "userId": "777777",
+  "userName": "7",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "2222221222222"
+}, {
+  "userId": "888888",
+  "userName": "8",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "2222222222222222"
+}, {
+  "userId": "999999",
+  "userName": "9",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "22211122222222222"
+}, {
+  "userId": "101010",
+  "userName": "10",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "222111222222222222"
+}, {
+  "userId": "909090908765",
+  "userName": "11",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "098098080"
+}, {
+  "userId": "121212",
+  "userName": "12",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "222111222222222223"
+}, {
+  "userId": "131313",
+  "userName": "13",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "222111222222222224"
+}, {
+  "userId": "141414",
+  "userName": "14",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "222111222222222225"
+}, {
+  "userId": "151515",
+  "userName": "15",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "222111222222222226"
+}, {
+  "userId": "161616",
+  "userName": "16",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "222111222222222227"
+}, {
+  "userId": "171717",
+  "userName": "17",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "222111222222222228"
+}, {
+  "userId": "181818",
+  "userName": "18",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "222111222222222229"
+}, {
+  "userId": "191919",
+  "userName": "19",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "222111222222222230"
+}, {
+  "userId": "202020",
+  "userName": "20",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "222111222222222231"
+}, {
+  "userId": "212121",
+  "userName": "21",
+  "isHost": false,
+  "isMe": false,
+  "hasAudio": false,
+  "hasVideo": false,
+  "isScreenSharing": false,
+  "audioDeviceType": "computer-mic",
+  "videoDeviceType": "computer-cam",
+  "userType": "normal",
+  "userRole": 3,
+  "isSpotlight": false,
+  "streamId": "222111222222222232"
+}];

package/lib/modules/member-layout/grid/index.css

@@ -0,0 +1,98 @@
+.fcr-grid-container {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100vh;
+  overflow: hidden;
+  padding: 10px;
+  position: relative;
+}
+
+.fcr-grid-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border:2px solid var(--fcr_mobile_ui_scene_guide);
+  width: 100%; height: 100%; 
+}
+
+.fcr-grid-item .fcr-avatar{
+  font-weight: 700;
+}
+
+.fcr-grid .fcr-grid-item:last-child { width: 100%; }
+.scrollable { overflow-y: auto; }
+
+.fcr-wizard-sign {
+  position: absolute;
+  bottom: 23px;
+  /* .fcr-grid-container padding */
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+.fcr-scroll-indicator,.fcr-go-back  {
+  display: flex;
+
+  height: 40px;
+  width: 40px;
+  border-radius: var(--fcr_cornerradius_round);
+  border: 0.5px solid var(--fcr_ui_scene_line1, #E3E7EF);
+  box-shadow: 0px 0px 15px 0px #97979740;
+  color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  backdrop-filter: blur(15px);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2, #FFFFFF);
+  border: 0.5px solid var(--fcr_ui_scene_line1, #E3E7EF);
+
+}
+.fcr-grid-current{
+  color:var(--fcr_ui_scene_icontext5)
+
+}
+.fcr-grid-current::after{
+  content: '';
+  position: absolute;
+  width: 60%;
+  height: 1px;
+  border-bottom: 2px solid var(--fcr_ui_scene_icontext5);
+  border-radius: var(--fcr_cornerradius_xxs);
+  top: 18px;
+  left: 20%;
+  z-index: -1;
+}
+
+.fcr-grid-count {
+  color: var(--fcr_ui_scene_icontext2);
+}
+
+.fcr-highlight-user {
+  position:absolute;
+  top: 0;
+  right: 20px;
+  width: 100px;
+  height: 140px;
+  box-shadow: var(--fcr_web_dark_dropup);
+  border-radius: var(--fcr_cornerradius_m);
+  box-shadow: 0px 0px 25px -8px #FFFFFF26;
+  backdrop-filter: blur(var(--fcr_ui_scene_mobile_shadow_night_l))
+}
+  
+  /* .fcr-go-back {
+  width: 40px;
+  height: 40px;
+  top: 572px;
+  left: 325px;
+  gap: 0px;
+  border-radius: var(--fcrcornerradiusround);
+  border: 0.5px 0px 0px 0px;
+  opacity: 0px;
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2, #FFFFFF);
+  border: 0.5px solid var(--fcr_ui_scene_line1, #E3E7EF);
+  box-shadow: 0px 0px 15px 0px #97979740;
+  backdrop-filter: blur(15px);
+} */

package/lib/modules/member-layout/grid/index.d.ts

@@ -0,0 +1,21 @@
+/****
+ ***** 宫格组件，宫格UI展示
+ ***** 1.当一个用户独占整屏
+ ***** 2.当2个上下排列
+ ***** 3.当3个上中下排列，每行各一个视窗
+ ***** 4.当4个上下排列，每行各两个视窗，共两行
+ ***** 5.当5个上中下排列，前两行各两个视窗，最后一行一个视窗铺满，共三行
+ ***** 6.当6个上下排列，每行各两个视窗，共三行
+ ***** 7.当6个以上的窗格上中下排列，总数基数时候参考5个时候的排列逻辑，偶数参考4个时候的逻辑
+ ***/
+import React from 'react';
+import './index.css';
+import { ParticipantUser } from '../../../common/type';
+interface IGridViewProps {
+    userList?: ParticipantUser[];
+    className?: string;
+    renderItem?: (item: ParticipantUser, isSpeakerWindow?: boolean) => React.ReactNode;
+    containerHeight?: number;
+}
+declare const FcrGridView: React.FC<IGridViewProps>;
+export default FcrGridView;