@zegocloud/zego-uikit-prebuilt 1.3.13 → 1.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
             "name": "@zegocloud/zego-uikit-prebuilt",
-            "version": "1.3.13",
+            "version": "1.3.14",
             "description": "zegocloud prebuilt meeting webrtc sdk",
             "main": "./zego-uikit-prebuilt.js",
             "typings": "./sdk/index.d.ts",

package/zego-uikit-prebuilt.js

@@ -1434,7 +1434,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"DateFormat\": function() { return /* binding */ DateFormat; },\n/* harmony export */   \"IsLowVersionSafari\": function() { return /* binding */ IsLowVersionSafari; },\n/* harmony export */   \"getBrowser\": function() { return /* binding */ getBrowser; },\n/* harmony export */   \"getNameFirstLetter\": function() { return /* binding */ getNameFirstLetter; },\n/* harmony export */   \"getUrlParams\": function() { return /* binding */ getUrlParams; },\n/* harmony export */   \"getVideoResolution\": function() { return /* binding */ getVideoResolution; },\n/* harmony export */   \"isIOS\": function() { return /* binding */ isIOS; },\n/* harmony export */   \"isPc\": function() { return /* binding */ isPc; },\n/* harmony export */   \"randomNumber\": function() { return /* binding */ randomNumber; },\n/* harmony export */   \"runes\": function() { return /* binding */ runes; },\n/* harmony export */   \"throttle\": function() { return /* binding */ throttle; },\n/* harmony export */   \"userNameColor\": function() { return /* binding */ userNameColor; }\n/* harmony export */ });\nfunction randomNumber(len) {\n    var result = \"\";\n    var chars = \"123456789\", maxPos = chars.length, i;\n    len = len || 5;\n    for (i = 0; i < len; i++) {\n        result += chars.charAt(Math.floor(Math.random() * maxPos));\n    }\n    return Number.parseInt(result);\n}\nfunction isPc() {\n    var p = navigator.platform;\n    var system = { win: p.indexOf(\"Win\") === 0, mac: p.indexOf(\"Mac\") === 0 };\n    if (false) {}\n    return system.win || system.mac;\n}\nfunction isIOS() {\n    var u = navigator.userAgent;\n    return !!u.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/);\n}\nfunction IsLowVersionSafari() {\n    var is_safari = navigator.userAgent.toLowerCase().indexOf(\"safari/\") > -1;\n    var is_chrome = navigator.userAgent.match(\"CriOS\");\n    var is_firefox = navigator.userAgent.match(\"FxiOS\");\n    // 获取操作系统版本\n    var m1 = navigator.userAgent.match(/iPhone OS .*?(?= )/);\n    var version = 0;\n    if (m1 && m1.length > 0) {\n        try {\n            var versionWith_ = m1[0].split(\" \")[m1[0].split(\" \").length - 1];\n            var mainVersion = versionWith_.split(\"_\")[0];\n            version = Number.parseInt(mainVersion);\n        }\n        catch (error) {\n            console.error(\"【ZEGOCLOUD】get safari version failed\", error);\n        }\n    }\n    return is_safari && !is_chrome && !is_firefox && version < 14;\n}\nfunction DateFormat(date, fmt) {\n    var myDate = new Date(date);\n    var o = {\n        \"M+\": myDate.getMonth() + 1 + \"\",\n        \"d+\": myDate.getDate() + \"\",\n        \"h+\": myDate.getHours() + \"\",\n        \"m+\": myDate.getMinutes() + \"\",\n        \"s+\": myDate.getSeconds() + \"\",\n        \"q+\": Math.floor((myDate.getMonth() + 3) / 3) + \"\",\n        S: myDate.getMilliseconds() + \"\", // 毫秒\n    };\n    Object.entries(o).forEach(function (_a) {\n        var k = _a[0], v = _a[1];\n        if (new RegExp(\"(\" + k + \")\").test(fmt)) {\n            fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? v : (\"00\" + v).substr((\"\" + v).length));\n        }\n    });\n    return fmt;\n}\nvar userColorMap = {};\nfunction userNameColor(userName) {\n    var colorArr = [\n        \"#557BFF\",\n        \"#1FAD40\",\n        \"#06A1E5\",\n        \"#E9473A\",\n        \"#BB9B21\",\n        \"#B755FF\",\n        \"#10BD8E\",\n        \"#FF2F5F\",\n    ];\n    if (!userColorMap[userName]) {\n        userColorMap[userName] =\n            colorArr[Object.keys(userColorMap).length % colorArr.length];\n    }\n    return userColorMap[userName];\n}\nfunction getUrlParams(url) {\n    if (url === void 0) { url = window.location.href; }\n    var urlStr = url.split(\"?\")[1];\n    return new URLSearchParams(urlStr);\n}\nfunction getVideoResolution(level) {\n    var _a = {\n        width: 640,\n        height: 360,\n        bitrate: 400,\n        frameRate: 15,\n    }, width = _a.width, height = _a.height, bitrate = _a.bitrate, frameRate = _a.frameRate;\n    if (level === \"180\") {\n        width = 320;\n        height = 180;\n        bitrate = 140;\n    }\n    else if (level === \"360\") {\n        width = 640;\n        height = 360;\n        bitrate = 400;\n    }\n    else if (level === \"480\") {\n        width = 640;\n        height = 480;\n        bitrate = 500;\n    }\n    else if (level === \"720\") {\n        width = 1280;\n        height = 720;\n        bitrate = 1130;\n    }\n    return {\n        width: width,\n        height: height,\n        bitrate: bitrate,\n        frameRate: frameRate,\n    };\n}\nvar throttle = function (fn, wait) {\n    var canRun = true;\n    return function () {\n        var _this = this;\n        if (!canRun)\n            return;\n        canRun = false;\n        setTimeout(function () {\n            // @ts-ignore\n            fn.apply(_this, arguments);\n            canRun = true;\n        }, wait);\n    };\n};\nfunction getBrowser() {\n    var sys = {};\n    var ua = navigator.userAgent.toLowerCase();\n    var s;\n    // eslint-disable-next-line @typescript-eslint/no-unused-expressions, no-cond-assign\n    (s = ua.match(/edge\\/([\\d.]+)/))\n        ? (sys.edge = s[1])\n        : (s = ua.match(/rv:([\\d.]+)\\) like gecko/))\n            ? (sys.ie = s[1])\n            : (s = ua.match(/msie ([\\d.]+)/))\n                ? (sys.ie = s[1])\n                : (s = ua.match(/firefox\\/([\\d.]+)/))\n                    ? (sys.firefox = s[1])\n                    : (s = ua.match(/chrome\\/([\\d.]+)/))\n                        ? (sys.chrome = s[1])\n                        : (s = ua.match(/opera.([\\d.]+)/))\n                            ? (sys.opera = s[1])\n                            : (s = ua.match(/version\\/([\\d.]+).*safari/))\n                                ? (sys.safari = s[1])\n                                : 0;\n    if (sys.edge)\n        return { browser: \"Edge\", version: sys.edge };\n    if (sys.ie)\n        return { browser: \"IE\", version: sys.ie };\n    if (sys.firefox)\n        return { browser: \"Firefox\", version: sys.firefox };\n    if (sys.chrome)\n        return { browser: \"Chrome\", version: sys.chrome };\n    if (sys.opera)\n        return { browser: \"Opera\", version: sys.opera };\n    if (sys.safari)\n        return { browser: \"Safari\", version: sys.safari };\n    return { browser: \"\", version: \"0\" };\n}\nfunction runes(string) {\n    var HIGH_SURROGATE_START = 0xd800;\n    var HIGH_SURROGATE_END = 0xdbff;\n    var LOW_SURROGATE_START = 0xdc00;\n    var REGIONAL_INDICATOR_START = 0x1f1e6;\n    var REGIONAL_INDICATOR_END = 0x1f1ff;\n    var FITZPATRICK_MODIFIER_START = 0x1f3fb;\n    var FITZPATRICK_MODIFIER_END = 0x1f3ff;\n    var VARIATION_MODIFIER_START = 0xfe00;\n    var VARIATION_MODIFIER_END = 0xfe0f;\n    var DIACRITICAL_MARKS_START = 0x20d0;\n    var DIACRITICAL_MARKS_END = 0x20ff;\n    var ZWJ = 0x200d;\n    var GRAPHEMS = [\n        0x0308, 0x0937, 0x0937, 0x093f, 0x093f, 0x0ba8, 0x0bbf, 0x0bcd, 0x0e31,\n        0x0e33, 0x0e40, 0x0e49, 0x1100, 0x1161, 0x11a8,\n    ];\n    function nextUnits(i, string) {\n        var current = string[i];\n        if (!isFirstOfSurrogatePair(current) || i === string.length - 1) {\n            return 1;\n        }\n        var currentPair = current + string[i + 1];\n        var nextPair = string.substring(i + 2, i + 5);\n        if (isRegionalIndicator(currentPair) && isRegionalIndicator(nextPair)) {\n            return 4;\n        }\n        if (isFitzpatrickModifier(nextPair)) {\n            return 4;\n        }\n        return 2;\n    }\n    function isFirstOfSurrogatePair(string) {\n        return (string &&\n            betweenInclusive(string[0].charCodeAt(0), HIGH_SURROGATE_START, HIGH_SURROGATE_END));\n    }\n    function isRegionalIndicator(string) {\n        return betweenInclusive(codePointFromSurrogatePair(string), REGIONAL_INDICATOR_START, REGIONAL_INDICATOR_END);\n    }\n    function isFitzpatrickModifier(string) {\n        return betweenInclusive(codePointFromSurrogatePair(string), FITZPATRICK_MODIFIER_START, FITZPATRICK_MODIFIER_END);\n    }\n    function isVariationSelector(string) {\n        return (typeof string === \"string\" &&\n            betweenInclusive(string.charCodeAt(0), VARIATION_MODIFIER_START, VARIATION_MODIFIER_END));\n    }\n    function isDiacriticalMark(string) {\n        return (typeof string === \"string\" &&\n            betweenInclusive(string.charCodeAt(0), DIACRITICAL_MARKS_START, DIACRITICAL_MARKS_END));\n    }\n    function isGraphem(string) {\n        return (typeof string === \"string\" &&\n            GRAPHEMS.indexOf(string.charCodeAt(0)) !== -1);\n    }\n    function isZeroWidthJoiner(string) {\n        return typeof string === \"string\" && string.charCodeAt(0) === ZWJ;\n    }\n    function codePointFromSurrogatePair(pair) {\n        var highOffset = pair.charCodeAt(0) - HIGH_SURROGATE_START;\n        var lowOffset = pair.charCodeAt(1) - LOW_SURROGATE_START;\n        return (highOffset << 10) + lowOffset + 0x10000;\n    }\n    function betweenInclusive(value, lower, upper) {\n        return value >= lower && value <= upper;\n    }\n    if (typeof string !== \"string\") {\n        throw new Error(\"string cannot be undefined or null\");\n    }\n    var result = [];\n    var i = 0;\n    var increment = 0;\n    while (i < string.length) {\n        increment += nextUnits(i + increment, string);\n        if (isGraphem(string[i + increment])) {\n            increment++;\n        }\n        if (isVariationSelector(string[i + increment])) {\n            increment++;\n        }\n        if (isDiacriticalMark(string[i + increment])) {\n            increment++;\n        }\n        if (isZeroWidthJoiner(string[i + increment])) {\n            increment++;\n            continue;\n        }\n        result.push(string.substring(i, i + increment));\n        i += increment;\n        increment = 0;\n    }\n    return result;\n}\nfunction getNameFirstLetter(name) {\n    return runes(name).shift() || \"\";\n}\n\n\n//# sourceURL=webpack://zegocloud_client_sdk_web/./src/sdk/util.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"DateFormat\": function() { return /* binding */ DateFormat; },\n/* harmony export */   \"IsLowVersionSafari\": function() { return /* binding */ IsLowVersionSafari; },\n/* harmony export */   \"getBrowser\": function() { return /* binding */ getBrowser; },\n/* harmony export */   \"getNameFirstLetter\": function() { return /* binding */ getNameFirstLetter; },\n/* harmony export */   \"getUrlParams\": function() { return /* binding */ getUrlParams; },\n/* harmony export */   \"getVideoResolution\": function() { return /* binding */ getVideoResolution; },\n/* harmony export */   \"isIOS\": function() { return /* binding */ isIOS; },\n/* harmony export */   \"isPc\": function() { return /* binding */ isPc; },\n/* harmony export */   \"randomNumber\": function() { return /* binding */ randomNumber; },\n/* harmony export */   \"runes\": function() { return /* binding */ runes; },\n/* harmony export */   \"throttle\": function() { return /* binding */ throttle; },\n/* harmony export */   \"userNameColor\": function() { return /* binding */ userNameColor; }\n/* harmony export */ });\nfunction randomNumber(len) {\n    var result = \"\";\n    var chars = \"123456789\", maxPos = chars.length, i;\n    len = len || 5;\n    for (i = 0; i < len; i++) {\n        result += chars.charAt(Math.floor(Math.random() * maxPos));\n    }\n    return Number.parseInt(result);\n}\nfunction isPc() {\n    var p = navigator.platform;\n    var system = { win: p.indexOf(\"Win\") === 0, mac: p.indexOf(\"Mac\") === 0 };\n    if (false) {}\n    return system.win || system.mac;\n}\nfunction isIOS() {\n    var u = navigator.userAgent;\n    return !!u.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/);\n}\nfunction IsLowVersionSafari() {\n    var is_safari = navigator.userAgent.toLowerCase().indexOf(\"safari/\") > -1;\n    var is_chrome = navigator.userAgent.match(\"CriOS\");\n    var is_firefox = navigator.userAgent.match(\"FxiOS\");\n    // 获取操作系统版本\n    var m1 = navigator.userAgent.match(/iPhone OS .*?(?= )/);\n    var version = 0;\n    if (m1 && m1.length > 0) {\n        try {\n            var versionWith_ = m1[0].split(\" \")[m1[0].split(\" \").length - 1];\n            var mainVersion = versionWith_.split(\"_\")[0];\n            version = Number.parseInt(mainVersion);\n        }\n        catch (error) {\n            console.error(\"【ZEGOCLOUD】get safari version failed\", error);\n        }\n    }\n    return is_safari && !is_chrome && !is_firefox && version < 14;\n}\nfunction DateFormat(date, fmt) {\n    var myDate = new Date(date);\n    var o = {\n        \"M+\": myDate.getMonth() + 1 + \"\",\n        \"d+\": myDate.getDate() + \"\",\n        \"h+\": myDate.getHours() >= 12\n            ? myDate.getHours() - 12 + \"\"\n            : myDate.getHours() + \"\",\n        \"m+\": myDate.getMinutes() + \"\",\n        \"s+\": myDate.getSeconds() + \"\",\n        \"q+\": Math.floor((myDate.getMonth() + 3) / 3) + \"\",\n        S: myDate.getMilliseconds() + \"\", // 毫秒\n    };\n    Object.entries(o).forEach(function (_a) {\n        var k = _a[0], v = _a[1];\n        if (new RegExp(\"(\" + k + \")\").test(fmt)) {\n            fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? v : (\"00\" + v).substr((\"\" + v).length));\n        }\n    });\n    return fmt;\n}\nvar userColorMap = {};\nfunction userNameColor(userName) {\n    var colorArr = [\n        \"#557BFF\",\n        \"#1FAD40\",\n        \"#06A1E5\",\n        \"#E9473A\",\n        \"#BB9B21\",\n        \"#B755FF\",\n        \"#10BD8E\",\n        \"#FF2F5F\",\n    ];\n    if (!userColorMap[userName]) {\n        userColorMap[userName] =\n            colorArr[Object.keys(userColorMap).length % colorArr.length];\n    }\n    return userColorMap[userName];\n}\nfunction getUrlParams(url) {\n    if (url === void 0) { url = window.location.href; }\n    var urlStr = url.split(\"?\")[1];\n    return new URLSearchParams(urlStr);\n}\nfunction getVideoResolution(level) {\n    var _a = {\n        width: 640,\n        height: 360,\n        bitrate: 400,\n        frameRate: 15,\n    }, width = _a.width, height = _a.height, bitrate = _a.bitrate, frameRate = _a.frameRate;\n    if (level === \"180\") {\n        width = 320;\n        height = 180;\n        bitrate = 140;\n    }\n    else if (level === \"360\") {\n        width = 640;\n        height = 360;\n        bitrate = 400;\n    }\n    else if (level === \"480\") {\n        width = 640;\n        height = 480;\n        bitrate = 500;\n    }\n    else if (level === \"720\") {\n        width = 1280;\n        height = 720;\n        bitrate = 1130;\n    }\n    return {\n        width: width,\n        height: height,\n        bitrate: bitrate,\n        frameRate: frameRate,\n    };\n}\nvar throttle = function (fn, wait) {\n    var canRun = true;\n    return function () {\n        var _this = this;\n        if (!canRun)\n            return;\n        canRun = false;\n        setTimeout(function () {\n            // @ts-ignore\n            fn.apply(_this, arguments);\n            canRun = true;\n        }, wait);\n    };\n};\nfunction getBrowser() {\n    var sys = {};\n    var ua = navigator.userAgent.toLowerCase();\n    var s;\n    // eslint-disable-next-line @typescript-eslint/no-unused-expressions, no-cond-assign\n    (s = ua.match(/edge\\/([\\d.]+)/))\n        ? (sys.edge = s[1])\n        : (s = ua.match(/rv:([\\d.]+)\\) like gecko/))\n            ? (sys.ie = s[1])\n            : (s = ua.match(/msie ([\\d.]+)/))\n                ? (sys.ie = s[1])\n                : (s = ua.match(/firefox\\/([\\d.]+)/))\n                    ? (sys.firefox = s[1])\n                    : (s = ua.match(/chrome\\/([\\d.]+)/))\n                        ? (sys.chrome = s[1])\n                        : (s = ua.match(/opera.([\\d.]+)/))\n                            ? (sys.opera = s[1])\n                            : (s = ua.match(/version\\/([\\d.]+).*safari/))\n                                ? (sys.safari = s[1])\n                                : 0;\n    if (sys.edge)\n        return { browser: \"Edge\", version: sys.edge };\n    if (sys.ie)\n        return { browser: \"IE\", version: sys.ie };\n    if (sys.firefox)\n        return { browser: \"Firefox\", version: sys.firefox };\n    if (sys.chrome)\n        return { browser: \"Chrome\", version: sys.chrome };\n    if (sys.opera)\n        return { browser: \"Opera\", version: sys.opera };\n    if (sys.safari)\n        return { browser: \"Safari\", version: sys.safari };\n    return { browser: \"\", version: \"0\" };\n}\nfunction runes(string) {\n    var HIGH_SURROGATE_START = 0xd800;\n    var HIGH_SURROGATE_END = 0xdbff;\n    var LOW_SURROGATE_START = 0xdc00;\n    var REGIONAL_INDICATOR_START = 0x1f1e6;\n    var REGIONAL_INDICATOR_END = 0x1f1ff;\n    var FITZPATRICK_MODIFIER_START = 0x1f3fb;\n    var FITZPATRICK_MODIFIER_END = 0x1f3ff;\n    var VARIATION_MODIFIER_START = 0xfe00;\n    var VARIATION_MODIFIER_END = 0xfe0f;\n    var DIACRITICAL_MARKS_START = 0x20d0;\n    var DIACRITICAL_MARKS_END = 0x20ff;\n    var ZWJ = 0x200d;\n    var GRAPHEMS = [\n        0x0308, 0x0937, 0x0937, 0x093f, 0x093f, 0x0ba8, 0x0bbf, 0x0bcd, 0x0e31,\n        0x0e33, 0x0e40, 0x0e49, 0x1100, 0x1161, 0x11a8,\n    ];\n    function nextUnits(i, string) {\n        var current = string[i];\n        if (!isFirstOfSurrogatePair(current) || i === string.length - 1) {\n            return 1;\n        }\n        var currentPair = current + string[i + 1];\n        var nextPair = string.substring(i + 2, i + 5);\n        if (isRegionalIndicator(currentPair) && isRegionalIndicator(nextPair)) {\n            return 4;\n        }\n        if (isFitzpatrickModifier(nextPair)) {\n            return 4;\n        }\n        return 2;\n    }\n    function isFirstOfSurrogatePair(string) {\n        return (string &&\n            betweenInclusive(string[0].charCodeAt(0), HIGH_SURROGATE_START, HIGH_SURROGATE_END));\n    }\n    function isRegionalIndicator(string) {\n        return betweenInclusive(codePointFromSurrogatePair(string), REGIONAL_INDICATOR_START, REGIONAL_INDICATOR_END);\n    }\n    function isFitzpatrickModifier(string) {\n        return betweenInclusive(codePointFromSurrogatePair(string), FITZPATRICK_MODIFIER_START, FITZPATRICK_MODIFIER_END);\n    }\n    function isVariationSelector(string) {\n        return (typeof string === \"string\" &&\n            betweenInclusive(string.charCodeAt(0), VARIATION_MODIFIER_START, VARIATION_MODIFIER_END));\n    }\n    function isDiacriticalMark(string) {\n        return (typeof string === \"string\" &&\n            betweenInclusive(string.charCodeAt(0), DIACRITICAL_MARKS_START, DIACRITICAL_MARKS_END));\n    }\n    function isGraphem(string) {\n        return (typeof string === \"string\" &&\n            GRAPHEMS.indexOf(string.charCodeAt(0)) !== -1);\n    }\n    function isZeroWidthJoiner(string) {\n        return typeof string === \"string\" && string.charCodeAt(0) === ZWJ;\n    }\n    function codePointFromSurrogatePair(pair) {\n        var highOffset = pair.charCodeAt(0) - HIGH_SURROGATE_START;\n        var lowOffset = pair.charCodeAt(1) - LOW_SURROGATE_START;\n        return (highOffset << 10) + lowOffset + 0x10000;\n    }\n    function betweenInclusive(value, lower, upper) {\n        return value >= lower && value <= upper;\n    }\n    if (typeof string !== \"string\") {\n        throw new Error(\"string cannot be undefined or null\");\n    }\n    var result = [];\n    var i = 0;\n    var increment = 0;\n    while (i < string.length) {\n        increment += nextUnits(i + increment, string);\n        if (isGraphem(string[i + increment])) {\n            increment++;\n        }\n        if (isVariationSelector(string[i + increment])) {\n            increment++;\n        }\n        if (isDiacriticalMark(string[i + increment])) {\n            increment++;\n        }\n        if (isZeroWidthJoiner(string[i + increment])) {\n            increment++;\n            continue;\n        }\n        result.push(string.substring(i, i + increment));\n        i += increment;\n        increment = 0;\n    }\n    return result;\n}\nfunction getNameFirstLetter(name) {\n    return runes(name).shift() || \"\";\n}\n\n\n//# sourceURL=webpack://zegocloud_client_sdk_web/./src/sdk/util.ts?");
 
 /***/ }),
 
@@ -1577,7 +1577,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ZegoScreenSharingLayout\": function() { return /* binding */ ZegoScreenSharingLayout; }\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ \"./node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _zegoOthersVideo__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./zegoOthersVideo */ \"./src/sdk/view/pages/ZegoRoom/components/zegoOthersVideo.tsx\");\n/* harmony import */ var _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./zegoSidebarLayout.module.scss */ \"./src/sdk/view/pages/ZegoRoom/components/zegoSidebarLayout.module.scss\");\n/* harmony import */ var _zegoVideoPlayer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./zegoVideoPlayer */ \"./src/sdk/view/pages/ZegoRoom/components/zegoVideoPlayer.tsx\");\n/* harmony import */ var _context_showManage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../context/showManage */ \"./src/sdk/view/pages/ZegoRoom/context/showManage.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\n\n\n\n\n\n\n\nvar ZegoScreenSharingLayout = /** @class */ (function (_super) {\n    __extends(ZegoScreenSharingLayout, _super);\n    function ZegoScreenSharingLayout() {\n        var _this = _super !== null && _super.apply(this, arguments) || this;\n        _this.state = {\n            fullScreen: false,\n            loadingMask: true,\n            showBottomTip: false,\n        };\n        return _this;\n    }\n    ZegoScreenSharingLayout.prototype.componentDidMount = function () {\n        var showBottomTip = sessionStorage.getItem(\"screen_bottom_tip_\".concat(this.props.roomID, \"_\").concat(this.props.selfInfo.userID));\n        var isSelfScreen = this.props.screenSharingUser.userID === this.props.selfInfo.userID;\n        if (isSelfScreen && !showBottomTip) {\n            this.setState({\n                showBottomTip: true,\n            });\n        }\n    };\n    ZegoScreenSharingLayout.prototype.onCanPlay = function () {\n        this.setState({\n            loadingMask: false,\n        });\n    };\n    ZegoScreenSharingLayout.prototype.handleIgnore = function () {\n        this.setState({\n            showBottomTip: false,\n        });\n        sessionStorage.setItem(\"screen_bottom_tip_\".concat(this.props.roomID, \"_\").concat(this.props.selfInfo.userID), \"1\");\n    };\n    ZegoScreenSharingLayout.prototype.render = function () {\n        var _a;\n        var _this = this;\n        var wrapClassName = (0,clsx__WEBPACK_IMPORTED_MODULE_2__[\"default\"])((_a = {},\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].rightWrapper] = true,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].fiveRow] = this.props.videoShowNumber === 5,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].fourRow] = this.props.videoShowNumber === 4,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].threeRow] = this.props.videoShowNumber === 3,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].twoRow] = this.props.videoShowNumber === 2,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].oneRow] = this.props.videoShowNumber === 1,\n            _a));\n        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].sidebarWrapper }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].bigVideoWrapper }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_zegoVideoPlayer__WEBPACK_IMPORTED_MODULE_5__.VideoPlayer, { myClass: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].screenVideo, userInfo: this.props.screenSharingUser, handlePin: function () {\n                                _this.props.handleSetPin(_this.props.screenSharingUser.userID);\n                            }, muted: this.props.screenSharingUser.userID === this.props.selfInfo.userID, volume: {}, hiddenMore: true, hiddenName: true, onCanPlay: this.onCanPlay.bind(this) }, \"screen_\" + this.props.screenSharingUser.userID), this.state.loadingMask && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].screenVideoLoading }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"i\", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"p\", { children: this.props.screenSharingUser.userID ===\n                                        this.props.selfInfo.userID\n                                        ? \"You are presenting your screen\"\n                                        : \"\".concat(this.props.screenSharingUser.userName, \" is presenting the screen\") })] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: \"\".concat(_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].fullScreenBtn, \" \").concat(this.state.fullScreen ? _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].expend : \"\"), onClick: function () {\n                                _this.props.handleFullScreen &&\n                                    _this.props.handleFullScreen(!_this.state.fullScreen);\n                                _this.setState({\n                                    fullScreen: !_this.state.fullScreen,\n                                });\n                            } }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"p\", { children: this.state.fullScreen ? \"Exit full screen\" : \"Full screen\" }) })), this.state.showBottomTip && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].screenTipWrapper }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].bottomWrapper }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"p\", { children: \"To avoid an infinity mirror, we suggest you not to share your entire screen or browser window.\" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ onClick: this.handleIgnore.bind(this) }, { children: \"Ignore\" }))] })) })))] })), !this.state.fullScreen && this.props.userList.length > 0 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: wrapClassName }, { children: this.props.userList.map(function (user, index, arr) {\n                        var _a;\n                        if (arr.length > _this.props.videoShowNumber) {\n                            if (index === _this.props.videoShowNumber - 1) {\n                                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_zegoOthersVideo__WEBPACK_IMPORTED_MODULE_3__.OthersVideo, { users: [\n                                                arr[index].userName,\n                                                (_a = arr[index + 1]) === null || _a === void 0 ? void 0 : _a.userName,\n                                            ], others: arr.length - _this.props.videoShowNumber + 1 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"audio\", { autoPlay: true, ref: function (el) {\n                                                var _a, _b, _c, _d, _e;\n                                                el &&\n                                                    el.srcObject !== ((_b = (_a = user === null || user === void 0 ? void 0 : user.streamList) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.media) &&\n                                                    (el.srcObject = (_d = (_c = user === null || user === void 0 ? void 0 : user.streamList) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.media);\n                                                el &&\n                                                    ((_e = el === null || el === void 0 ? void 0 : el.setSinkId) === null || _e === void 0 ? void 0 : _e.call(el, _this.context.speakerId || \"\"));\n                                            } })] }, \"screen_container_\" + user.userID));\n                            }\n                            if (index > _this.props.videoShowNumber - 1) {\n                                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"audio\", { autoPlay: true, ref: function (el) {\n                                        var _a, _b, _c, _d, _e;\n                                        el &&\n                                            el.srcObject !== ((_b = (_a = user === null || user === void 0 ? void 0 : user.streamList) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.media) &&\n                                            (el.srcObject = (_d = (_c = user === null || user === void 0 ? void 0 : user.streamList) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.media);\n                                        el &&\n                                            ((_e = el === null || el === void 0 ? void 0 : el.setSinkId) === null || _e === void 0 ? void 0 : _e.call(el, _this.context.speakerId || \"\"));\n                                    } }, user.userID));\n                            }\n                        }\n                        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_zegoVideoPlayer__WEBPACK_IMPORTED_MODULE_5__.VideoPlayer, { userInfo: user, muted: user.userID === _this.props.selfInfo.userID, handlePin: function () {\n                                _this.props.handleSetPin(user.userID);\n                            }, volume: _this.props.soundLevel[user.userID] || {} }, user.userID));\n                    }) })))] })));\n    };\n    ZegoScreenSharingLayout.contextType = _context_showManage__WEBPACK_IMPORTED_MODULE_6__[\"default\"];\n    return ZegoScreenSharingLayout;\n}((react__WEBPACK_IMPORTED_MODULE_1___default().PureComponent)));\n\n\n\n//# sourceURL=webpack://zegocloud_client_sdk_web/./src/sdk/view/pages/ZegoRoom/components/ZegoScreenSharingLayout.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ZegoScreenSharingLayout\": function() { return /* binding */ ZegoScreenSharingLayout; }\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ \"./node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _zegoOthersVideo__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./zegoOthersVideo */ \"./src/sdk/view/pages/ZegoRoom/components/zegoOthersVideo.tsx\");\n/* harmony import */ var _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./zegoSidebarLayout.module.scss */ \"./src/sdk/view/pages/ZegoRoom/components/zegoSidebarLayout.module.scss\");\n/* harmony import */ var _zegoVideoPlayer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./zegoVideoPlayer */ \"./src/sdk/view/pages/ZegoRoom/components/zegoVideoPlayer.tsx\");\n/* harmony import */ var _context_showManage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../context/showManage */ \"./src/sdk/view/pages/ZegoRoom/context/showManage.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\n\n\n\n\n\n\n\nvar ZegoScreenSharingLayout = /** @class */ (function (_super) {\n    __extends(ZegoScreenSharingLayout, _super);\n    function ZegoScreenSharingLayout() {\n        var _this = _super !== null && _super.apply(this, arguments) || this;\n        _this.state = {\n            fullScreen: false,\n            loadingMask: true,\n            showBottomTip: false,\n        };\n        return _this;\n    }\n    ZegoScreenSharingLayout.prototype.componentDidMount = function () {\n        var showBottomTip = sessionStorage.getItem(\"screen_bottom_tip_\".concat(this.props.roomID, \"_\").concat(this.props.selfInfo.userID));\n        var isSelfScreen = this.props.screenSharingUser.userID === this.props.selfInfo.userID;\n        if (isSelfScreen && !showBottomTip) {\n            this.setState({\n                showBottomTip: true,\n            });\n        }\n    };\n    ZegoScreenSharingLayout.prototype.onCanPlay = function () {\n        this.setState({\n            loadingMask: false,\n        });\n    };\n    ZegoScreenSharingLayout.prototype.handleIgnore = function () {\n        this.setState({\n            showBottomTip: false,\n        });\n        sessionStorage.setItem(\"screen_bottom_tip_\".concat(this.props.roomID, \"_\").concat(this.props.selfInfo.userID), \"1\");\n    };\n    ZegoScreenSharingLayout.prototype.render = function () {\n        var _a;\n        var _this = this;\n        var wrapClassName = (0,clsx__WEBPACK_IMPORTED_MODULE_2__[\"default\"])((_a = {},\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].rightWrapper] = true,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].fiveRow] = this.props.videoShowNumber === 5,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].fourRow] = this.props.videoShowNumber === 4,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].threeRow] = this.props.videoShowNumber === 3,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].twoRow] = this.props.videoShowNumber === 2,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].oneRow] = this.props.videoShowNumber === 1,\n            _a));\n        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].sidebarWrapper }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].bigVideoWrapper }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_zegoVideoPlayer__WEBPACK_IMPORTED_MODULE_5__.VideoPlayer, { myClass: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].screenVideo, userInfo: this.props.screenSharingUser, handlePin: function () {\n                                _this.props.handleSetPin(_this.props.screenSharingUser.userID);\n                            }, muted: this.props.screenSharingUser.userID === this.props.selfInfo.userID, volume: {}, hiddenMore: true, hiddenName: true, onCanPlay: this.onCanPlay.bind(this) }, \"screen_\" + this.props.screenSharingUser.userID), this.state.loadingMask && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].screenVideoLoading }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"i\", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"p\", { children: this.props.screenSharingUser.userID ===\n                                        this.props.selfInfo.userID\n                                        ? \"You are presenting your screen\"\n                                        : \"\".concat(this.props.screenSharingUser.userName, \" is presenting the screen\") })] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: \"\".concat(_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].fullScreenBtn, \" \").concat(this.state.fullScreen ? _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].expend : \"\"), onClick: function () {\n                                _this.props.handleFullScreen &&\n                                    _this.props.handleFullScreen(!_this.state.fullScreen);\n                                _this.setState({\n                                    fullScreen: !_this.state.fullScreen,\n                                });\n                            } }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"p\", { children: this.state.fullScreen ? \"Exit full screen\" : \"Full screen\" }) })), this.state.showBottomTip && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].screenTipWrapper }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].bottomWrapper }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"p\", { children: \"To avoid an infinity mirror, we suggest you not to share your entire screen or browser window.\" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ onClick: this.handleIgnore.bind(this) }, { children: \"Ignore\" }))] })) })))] })), !this.state.fullScreen && this.props.userList.length > 0 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: wrapClassName }, { children: this.props.userList.map(function (user, index, arr) {\n                        var _a;\n                        if (arr.length > _this.props.videoShowNumber) {\n                            if (index === _this.props.videoShowNumber - 1) {\n                                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_zegoOthersVideo__WEBPACK_IMPORTED_MODULE_3__.OthersVideo, { users: [\n                                                arr[index].userName,\n                                                (_a = arr[index + 1]) === null || _a === void 0 ? void 0 : _a.userName,\n                                            ], others: arr.length - _this.props.videoShowNumber + 1 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"audio\", { autoPlay: true, muted: user.userID === _this.props.selfInfo.userID, ref: function (el) {\n                                                var _a, _b, _c, _d, _e;\n                                                el &&\n                                                    el.srcObject !== ((_b = (_a = user === null || user === void 0 ? void 0 : user.streamList) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.media) &&\n                                                    (el.srcObject = (_d = (_c = user === null || user === void 0 ? void 0 : user.streamList) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.media);\n                                                el &&\n                                                    ((_e = el === null || el === void 0 ? void 0 : el.setSinkId) === null || _e === void 0 ? void 0 : _e.call(el, _this.context.speakerId || \"\"));\n                                            } })] }, \"screen_container_\" + user.userID));\n                            }\n                            if (index > _this.props.videoShowNumber - 1) {\n                                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"audio\", { autoPlay: true, muted: user.userID === _this.props.selfInfo.userID, ref: function (el) {\n                                        var _a, _b, _c, _d, _e;\n                                        el &&\n                                            el.srcObject !== ((_b = (_a = user === null || user === void 0 ? void 0 : user.streamList) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.media) &&\n                                            (el.srcObject = (_d = (_c = user === null || user === void 0 ? void 0 : user.streamList) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.media);\n                                        el &&\n                                            ((_e = el === null || el === void 0 ? void 0 : el.setSinkId) === null || _e === void 0 ? void 0 : _e.call(el, _this.context.speakerId || \"\"));\n                                    } }, user.userID));\n                            }\n                        }\n                        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_zegoVideoPlayer__WEBPACK_IMPORTED_MODULE_5__.VideoPlayer, { userInfo: user, muted: user.userID === _this.props.selfInfo.userID, handlePin: function () {\n                                _this.props.handleSetPin(user.userID);\n                            }, volume: _this.props.soundLevel[user.userID] || {} }, user.userID));\n                    }) })))] })));\n    };\n    ZegoScreenSharingLayout.contextType = _context_showManage__WEBPACK_IMPORTED_MODULE_6__[\"default\"];\n    return ZegoScreenSharingLayout;\n}((react__WEBPACK_IMPORTED_MODULE_1___default().PureComponent)));\n\n\n\n//# sourceURL=webpack://zegocloud_client_sdk_web/./src/sdk/view/pages/ZegoRoom/components/ZegoScreenSharingLayout.tsx?");
 
 /***/ }),
 
@@ -1599,7 +1599,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ZegoMessage\": function() { return /* binding */ ZegoMessage; }\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./zegoMessage.module.scss */ \"./src/sdk/view/pages/ZegoRoom/components/zegoMessage.module.scss\");\n/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../util */ \"./src/sdk/util.ts\");\n/* harmony import */ var _components_zegoToast__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../components/zegoToast */ \"./src/sdk/view/components/zegoToast/index.tsx\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\n\n\n\n\n\nvar ZegoMessage = /** @class */ (function (_super) {\n    __extends(ZegoMessage, _super);\n    function ZegoMessage() {\n        var _this = _super !== null && _super.apply(this, arguments) || this;\n        _this.state = {\n            message: \"\",\n        };\n        _this.sendTime = 0;\n        _this.msgListRef = react__WEBPACK_IMPORTED_MODULE_1___default().createRef();\n        return _this;\n    }\n    ZegoMessage.prototype.componentDidMount = function () {\n        this.scrollToBottom();\n    };\n    ZegoMessage.prototype.componentDidUpdate = function (preProps) {\n        if (preProps.messageList.length !== this.props.messageList.length) {\n            this.scrollToBottom();\n        }\n    };\n    ZegoMessage.prototype.handleSend = function () {\n        if (!this.state.message.length)\n            return;\n        var timestamp = new Date().getTime();\n        if (this.sendTime > 0 && this.sendTime + 900 > timestamp) {\n            (0,_components_zegoToast__WEBPACK_IMPORTED_MODULE_4__.ZegoToast)({\n                content: \"Message sent too fast, please send again later\",\n            });\n            return false;\n        }\n        this.props.sendMessage(this.state.message);\n        this.setState({\n            message: \"\",\n        });\n        this.sendTime = timestamp;\n    };\n    ZegoMessage.prototype.scrollToBottom = function () {\n        this.msgListRef.current.scrollTop = this.msgListRef.current.scrollHeight;\n    };\n    ZegoMessage.prototype.messageInput = function (event) {\n        this.setState({\n            message: event.target.value.substring(0, 300),\n        });\n    };\n    ZegoMessage.prototype.render = function () {\n        var _this = this;\n        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgContentWrapper }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgList, ref: this.msgListRef }, { children: this.props.messageList.map(function (msg) {\n                        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: msg.fromUser.userID === _this.props.selfUserID\n                                ? _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].self\n                                : \"\" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgNameWrapper }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].name }, { children: msg.fromUser.userName })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].sendTime }, { children: \"\".concat(new Date(msg.sendTime).getHours() > 12 ? \"PM\" : \"AM\", \"  \").concat((0,_util__WEBPACK_IMPORTED_MODULE_3__.DateFormat)(msg.sendTime, \"hh:mm\")) }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"p\", __assign({ className: \"\".concat(msg.status === \"SENDING\" && _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].loading, \" \").concat(msg.status === \"FAILED\" && _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].error) }, { children: msg.message }))] }), msg.messageID));\n                    }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].sendWrapper }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", { value: this.state.message, onChange: function (event) {\n                                _this.messageInput(event);\n                            }, placeholder: \"Send a message to everyone\", onKeyPress: function (event) {\n                                if (event.key === \"Enter\") {\n                                    _this.handleSend();\n                                }\n                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", { disabled: !this.state.message.length, onClick: function () {\n                                _this.handleSend();\n                            } })] }))] })));\n    };\n    return ZegoMessage;\n}((react__WEBPACK_IMPORTED_MODULE_1___default().PureComponent)));\n\n\n\n//# sourceURL=webpack://zegocloud_client_sdk_web/./src/sdk/view/pages/ZegoRoom/components/zegoMessage.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ZegoMessage\": function() { return /* binding */ ZegoMessage; }\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./zegoMessage.module.scss */ \"./src/sdk/view/pages/ZegoRoom/components/zegoMessage.module.scss\");\n/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../util */ \"./src/sdk/util.ts\");\n/* harmony import */ var _components_zegoToast__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../components/zegoToast */ \"./src/sdk/view/components/zegoToast/index.tsx\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\n\n\n\n\n\nvar ZegoMessage = /** @class */ (function (_super) {\n    __extends(ZegoMessage, _super);\n    function ZegoMessage() {\n        var _this = _super !== null && _super.apply(this, arguments) || this;\n        _this.state = {\n            message: \"\",\n        };\n        _this.sendTime = 0;\n        _this.msgListRef = react__WEBPACK_IMPORTED_MODULE_1___default().createRef();\n        return _this;\n    }\n    ZegoMessage.prototype.componentDidMount = function () {\n        this.scrollToBottom();\n    };\n    ZegoMessage.prototype.componentDidUpdate = function (preProps) {\n        if (preProps.messageList.length !== this.props.messageList.length) {\n            this.scrollToBottom();\n        }\n    };\n    ZegoMessage.prototype.handleSend = function () {\n        if (!this.state.message.length)\n            return;\n        var timestamp = new Date().getTime();\n        if (this.sendTime > 0 && this.sendTime + 900 > timestamp) {\n            (0,_components_zegoToast__WEBPACK_IMPORTED_MODULE_4__.ZegoToast)({\n                content: \"Message sent too fast, please send again later\",\n            });\n            return false;\n        }\n        this.props.sendMessage(this.state.message);\n        this.setState({\n            message: \"\",\n        });\n        this.sendTime = timestamp;\n    };\n    ZegoMessage.prototype.scrollToBottom = function () {\n        this.msgListRef.current.scrollTop = this.msgListRef.current.scrollHeight;\n    };\n    ZegoMessage.prototype.messageInput = function (event) {\n        this.setState({\n            message: event.target.value.substring(0, 300),\n        });\n    };\n    ZegoMessage.prototype.render = function () {\n        var _this = this;\n        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgContentWrapper }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgList, ref: this.msgListRef }, { children: this.props.messageList.map(function (msg) {\n                        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: msg.fromUser.userID === _this.props.selfUserID\n                                ? _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].self\n                                : \"\" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgNameWrapper }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].name }, { children: msg.fromUser.userName })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].sendTime }, { children: \"\".concat(new Date(msg.sendTime).getHours() >= 12 ? \"PM\" : \"AM\", \"  \").concat((0,_util__WEBPACK_IMPORTED_MODULE_3__.DateFormat)(msg.sendTime, \"hh:mm\")) }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"p\", __assign({ className: \"\".concat(msg.status === \"SENDING\" && _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].loading, \" \").concat(msg.status === \"FAILED\" && _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].error) }, { children: msg.message }))] }), msg.messageID));\n                    }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].sendWrapper }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", { value: this.state.message, onChange: function (event) {\n                                _this.messageInput(event);\n                            }, placeholder: \"Send a message to everyone\", onKeyPress: function (event) {\n                                if (event.key === \"Enter\") {\n                                    _this.handleSend();\n                                }\n                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", { disabled: !this.state.message.length, onClick: function () {\n                                _this.handleSend();\n                            } })] }))] })));\n    };\n    return ZegoMessage;\n}((react__WEBPACK_IMPORTED_MODULE_1___default().PureComponent)));\n\n\n\n//# sourceURL=webpack://zegocloud_client_sdk_web/./src/sdk/view/pages/ZegoRoom/components/zegoMessage.tsx?");
 
 /***/ }),
 
@@ -1643,7 +1643,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ZegoSidebarLayout\": function() { return /* binding */ ZegoSidebarLayout; }\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ \"./node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _zegoOthersVideo__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./zegoOthersVideo */ \"./src/sdk/view/pages/ZegoRoom/components/zegoOthersVideo.tsx\");\n/* harmony import */ var _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./zegoSidebarLayout.module.scss */ \"./src/sdk/view/pages/ZegoRoom/components/zegoSidebarLayout.module.scss\");\n/* harmony import */ var _zegoVideoPlayer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./zegoVideoPlayer */ \"./src/sdk/view/pages/ZegoRoom/components/zegoVideoPlayer.tsx\");\n/* harmony import */ var _context_showManage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../context/showManage */ \"./src/sdk/view/pages/ZegoRoom/context/showManage.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\n\n\n\n\n\n\n\nvar ZegoSidebarLayout = /** @class */ (function (_super) {\n    __extends(ZegoSidebarLayout, _super);\n    function ZegoSidebarLayout() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    Object.defineProperty(ZegoSidebarLayout.prototype, \"pinUser\", {\n        get: function () {\n            var index = this.props.userList.findIndex(function (item) { return item.pin; });\n            return this.props.userList[index > -1 ? index : this.props.userList.length - 1];\n        },\n        enumerable: false,\n        configurable: true\n    });\n    ZegoSidebarLayout.prototype.render = function () {\n        var _a;\n        var _this = this;\n        var wrapClassName = (0,clsx__WEBPACK_IMPORTED_MODULE_2__[\"default\"])((_a = {},\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].rightWrapper] = true,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].fiveRow] = this.props.videoShowNumber === 5,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].fourRow] = this.props.videoShowNumber === 4,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].threeRow] = this.props.videoShowNumber === 3,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].twoRow] = this.props.videoShowNumber === 2,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].oneRow] = this.props.videoShowNumber === 1,\n            _a));\n        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].sidebarWrapper }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_zegoVideoPlayer__WEBPACK_IMPORTED_MODULE_5__.VideoPlayer, { myClass: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].bigVideo, userInfo: this.pinUser, handlePin: function () {\n                        _this.props.handleSetPin(_this.pinUser.userID);\n                    }, muted: this.pinUser.userID === this.props.selfInfo.userID, volume: this.props.soundLevel[this.pinUser.userID] || {} }, this.pinUser.userID), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: wrapClassName }, { children: this.props.userList\n                        .filter(function (u) { return u.userID !== _this.pinUser.userID; })\n                        .map(function (user, index, arr) {\n                        var _a;\n                        if (arr.length > _this.props.videoShowNumber) {\n                            if (index === _this.props.videoShowNumber - 1) {\n                                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_zegoOthersVideo__WEBPACK_IMPORTED_MODULE_3__.OthersVideo, { users: [\n                                                arr[index].userName,\n                                                (_a = arr[index + 1]) === null || _a === void 0 ? void 0 : _a.userName,\n                                            ], others: arr.length - _this.props.videoShowNumber + 1 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"audio\", { autoPlay: true, ref: function (el) {\n                                                var _a, _b, _c, _d, _e;\n                                                el &&\n                                                    el.srcObject !== ((_b = (_a = user === null || user === void 0 ? void 0 : user.streamList) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.media) &&\n                                                    (el.srcObject = (_d = (_c = user === null || user === void 0 ? void 0 : user.streamList) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.media);\n                                                el &&\n                                                    ((_e = el === null || el === void 0 ? void 0 : el.setSinkId) === null || _e === void 0 ? void 0 : _e.call(el, _this.context.speakerId || \"\"));\n                                            } })] }, \"container_\" + user.userID));\n                            }\n                            if (index > _this.props.videoShowNumber - 1) {\n                                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"audio\", { autoPlay: true, ref: function (el) {\n                                        var _a, _b, _c, _d, _e;\n                                        el &&\n                                            el.srcObject !== ((_b = (_a = user === null || user === void 0 ? void 0 : user.streamList) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.media) &&\n                                            (el.srcObject = (_d = (_c = user === null || user === void 0 ? void 0 : user.streamList) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.media);\n                                        el &&\n                                            ((_e = el === null || el === void 0 ? void 0 : el.setSinkId) === null || _e === void 0 ? void 0 : _e.call(el, _this.context.speakerId || \"\"));\n                                    } }, user.userID));\n                            }\n                        }\n                        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_zegoVideoPlayer__WEBPACK_IMPORTED_MODULE_5__.VideoPlayer, { userInfo: user, muted: user.userID === _this.props.selfInfo.userID, handlePin: function () {\n                                _this.props.handleSetPin(user.userID);\n                            }, volume: _this.props.soundLevel[user.userID] || {} }, user.userID));\n                    }) }))] })));\n    };\n    ZegoSidebarLayout.contextType = _context_showManage__WEBPACK_IMPORTED_MODULE_6__[\"default\"];\n    return ZegoSidebarLayout;\n}((react__WEBPACK_IMPORTED_MODULE_1___default().PureComponent)));\n\n\n\n//# sourceURL=webpack://zegocloud_client_sdk_web/./src/sdk/view/pages/ZegoRoom/components/zegoSidebarLayout.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ZegoSidebarLayout\": function() { return /* binding */ ZegoSidebarLayout; }\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ \"./node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _zegoOthersVideo__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./zegoOthersVideo */ \"./src/sdk/view/pages/ZegoRoom/components/zegoOthersVideo.tsx\");\n/* harmony import */ var _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./zegoSidebarLayout.module.scss */ \"./src/sdk/view/pages/ZegoRoom/components/zegoSidebarLayout.module.scss\");\n/* harmony import */ var _zegoVideoPlayer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./zegoVideoPlayer */ \"./src/sdk/view/pages/ZegoRoom/components/zegoVideoPlayer.tsx\");\n/* harmony import */ var _context_showManage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../context/showManage */ \"./src/sdk/view/pages/ZegoRoom/context/showManage.ts\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\n\n\n\n\n\n\n\nvar ZegoSidebarLayout = /** @class */ (function (_super) {\n    __extends(ZegoSidebarLayout, _super);\n    function ZegoSidebarLayout() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    Object.defineProperty(ZegoSidebarLayout.prototype, \"pinUser\", {\n        get: function () {\n            var index = this.props.userList.findIndex(function (item) { return item.pin; });\n            return this.props.userList[index > -1 ? index : this.props.userList.length - 1];\n        },\n        enumerable: false,\n        configurable: true\n    });\n    ZegoSidebarLayout.prototype.render = function () {\n        var _a;\n        var _this = this;\n        var wrapClassName = (0,clsx__WEBPACK_IMPORTED_MODULE_2__[\"default\"])((_a = {},\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].rightWrapper] = true,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].fiveRow] = this.props.videoShowNumber === 5,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].fourRow] = this.props.videoShowNumber === 4,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].threeRow] = this.props.videoShowNumber === 3,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].twoRow] = this.props.videoShowNumber === 2,\n            _a[_zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].oneRow] = this.props.videoShowNumber === 1,\n            _a));\n        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].sidebarWrapper }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_zegoVideoPlayer__WEBPACK_IMPORTED_MODULE_5__.VideoPlayer, { myClass: _zegoSidebarLayout_module_scss__WEBPACK_IMPORTED_MODULE_4__[\"default\"].bigVideo, userInfo: this.pinUser, handlePin: function () {\n                        _this.props.handleSetPin(_this.pinUser.userID);\n                    }, muted: this.pinUser.userID === this.props.selfInfo.userID, volume: this.props.soundLevel[this.pinUser.userID] || {} }, this.pinUser.userID), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: wrapClassName }, { children: this.props.userList\n                        .filter(function (u) { return u.userID !== _this.pinUser.userID; })\n                        .map(function (user, index, arr) {\n                        var _a;\n                        if (arr.length > _this.props.videoShowNumber) {\n                            if (index === _this.props.videoShowNumber - 1) {\n                                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_zegoOthersVideo__WEBPACK_IMPORTED_MODULE_3__.OthersVideo, { users: [\n                                                arr[index].userName,\n                                                (_a = arr[index + 1]) === null || _a === void 0 ? void 0 : _a.userName,\n                                            ], others: arr.length - _this.props.videoShowNumber + 1 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"audio\", { autoPlay: true, muted: user.userID === _this.props.selfInfo.userID, ref: function (el) {\n                                                var _a, _b, _c, _d, _e;\n                                                el &&\n                                                    el.srcObject !== ((_b = (_a = user === null || user === void 0 ? void 0 : user.streamList) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.media) &&\n                                                    (el.srcObject = (_d = (_c = user === null || user === void 0 ? void 0 : user.streamList) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.media);\n                                                el &&\n                                                    ((_e = el === null || el === void 0 ? void 0 : el.setSinkId) === null || _e === void 0 ? void 0 : _e.call(el, _this.context.speakerId || \"\"));\n                                            } })] }, \"container_\" + user.userID));\n                            }\n                            if (index > _this.props.videoShowNumber - 1) {\n                                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"audio\", { autoPlay: true, muted: user.userID === _this.props.selfInfo.userID, ref: function (el) {\n                                        var _a, _b, _c, _d, _e;\n                                        el &&\n                                            el.srcObject !== ((_b = (_a = user === null || user === void 0 ? void 0 : user.streamList) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.media) &&\n                                            (el.srcObject = (_d = (_c = user === null || user === void 0 ? void 0 : user.streamList) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.media);\n                                        el &&\n                                            ((_e = el === null || el === void 0 ? void 0 : el.setSinkId) === null || _e === void 0 ? void 0 : _e.call(el, _this.context.speakerId || \"\"));\n                                    } }, user.userID));\n                            }\n                        }\n                        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_zegoVideoPlayer__WEBPACK_IMPORTED_MODULE_5__.VideoPlayer, { userInfo: user, muted: user.userID === _this.props.selfInfo.userID, handlePin: function () {\n                                _this.props.handleSetPin(user.userID);\n                            }, volume: _this.props.soundLevel[user.userID] || {} }, user.userID));\n                    }) }))] })));\n    };\n    ZegoSidebarLayout.contextType = _context_showManage__WEBPACK_IMPORTED_MODULE_6__[\"default\"];\n    return ZegoSidebarLayout;\n}((react__WEBPACK_IMPORTED_MODULE_1___default().PureComponent)));\n\n\n\n//# sourceURL=webpack://zegocloud_client_sdk_web/./src/sdk/view/pages/ZegoRoom/components/zegoSidebarLayout.tsx?");
 
 /***/ }),
 
@@ -1753,7 +1753,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ZegoMessage\": function() { return /* binding */ ZegoMessage; }\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./zegoMessage.module.scss */ \"./src/sdk/view/pages/ZegoRoomMobile/components/zegoMessage.module.scss\");\n/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../util */ \"./src/sdk/util.ts\");\n/* harmony import */ var _components_mobile_zegoToast__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../components/mobile/zegoToast */ \"./src/sdk/view/components/mobile/zegoToast/index.tsx\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\n\n\n\n\n\nvar ZegoMessage = /** @class */ (function (_super) {\n    __extends(ZegoMessage, _super);\n    function ZegoMessage(props) {\n        var _this = _super.call(this, props) || this;\n        _this.state = {\n            message: \"\",\n        };\n        _this.sendTime = 0;\n        _this.msgContentListRef = react__WEBPACK_IMPORTED_MODULE_1___default().createRef();\n        return _this;\n    }\n    ZegoMessage.prototype.componentDidMount = function () {\n        var _a;\n        (_a = this.msgContentListRef.current) === null || _a === void 0 ? void 0 : _a.scroll(0, this.msgContentListRef.current.scrollHeight -\n            this.msgContentListRef.current.clientHeight);\n    };\n    ZegoMessage.prototype.componentDidUpdate = function (prevProps) {\n        var _a;\n        if (prevProps.messageList.length !== this.props.messageList.length) {\n            (_a = this.msgContentListRef.current) === null || _a === void 0 ? void 0 : _a.scroll(0, this.msgContentListRef.current.scrollHeight -\n                this.msgContentListRef.current.clientHeight);\n        }\n    };\n    ZegoMessage.prototype.messageInput = function (event) {\n        this.setState({\n            message: event.target.value.substring(0, 300),\n        });\n    };\n    ZegoMessage.prototype.handleSend = function () {\n        if (!this.state.message.length)\n            return;\n        var timestamp = new Date().getTime();\n        if (this.sendTime > 0 && this.sendTime + 900 > timestamp) {\n            (0,_components_mobile_zegoToast__WEBPACK_IMPORTED_MODULE_4__.ZegoToast)({\n                content: \"Message sent too fast, please send again later\",\n            });\n            return false;\n        }\n        this.props.sendMessage(this.state.message);\n        this.setState({\n            message: \"\",\n        });\n        this.sendTime = timestamp;\n    };\n    ZegoMessage.prototype.render = function () {\n        var _this = this;\n        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgList }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgListHeader }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgHide, onClick: function (ev) {\n                                ev.stopPropagation();\n                                _this.props.closeCallBac();\n                            } }), \"Chat\"] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgListContent, ref: this.msgContentListRef }, { children: this.props.messageList.map(function (msg) {\n                        var _a;\n                        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: \"\".concat(_zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgContent, \" \").concat(_this.props.userID === msg.fromUser.userID\n                                ? _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].self\n                                : \"\") }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"i\", __assign({ style: { color: (0,_util__WEBPACK_IMPORTED_MODULE_3__.userNameColor)(msg.fromUser.userName) } }, { children: (_a = msg.fromUser.userName) === null || _a === void 0 ? void 0 : _a.substring(0, 1) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgContentRight }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgContentRightHeader }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", { children: msg.fromUser.userName }), _this.props.userID === msg.fromUser.userID && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"a\", { children: \"\\uFF08You\\uFF09\" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", { children: \"\".concat(new Date(msg.sendTime).getHours() > 12 ? \"PM\" : \"AM\", \"  \").concat((0,_util__WEBPACK_IMPORTED_MODULE_3__.DateFormat)(msg.sendTime, \"hh:mm\")) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgContentRightBody }, { children: [msg.status && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"i\", { className: msg.status === \"SENDING\"\n                                                        ? _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].loading\n                                                        : msg.status === \"SENDED\"\n                                                            ? \"\"\n                                                            : _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].sendFailed })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"p\", { children: msg.message })] }))] }))] }), msg.messageID));\n                    }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgFooter }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", { value: this.state.message, onChange: function (event) {\n                                _this.messageInput(event);\n                            }, placeholder: \"Send a message to everyone\", onKeyPress: function (event) {\n                                if (event.key === \"Enter\") {\n                                    _this.handleSend();\n                                }\n                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", { className: this.state.message ? _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].readySend : \"\", onClick: function () {\n                                _this.handleSend();\n                            } })] }))] })));\n    };\n    return ZegoMessage;\n}((react__WEBPACK_IMPORTED_MODULE_1___default().PureComponent)));\n\n\n\n//# sourceURL=webpack://zegocloud_client_sdk_web/./src/sdk/view/pages/ZegoRoomMobile/components/zegoMessage.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ZegoMessage\": function() { return /* binding */ ZegoMessage; }\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./zegoMessage.module.scss */ \"./src/sdk/view/pages/ZegoRoomMobile/components/zegoMessage.module.scss\");\n/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../util */ \"./src/sdk/util.ts\");\n/* harmony import */ var _components_mobile_zegoToast__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../components/mobile/zegoToast */ \"./src/sdk/view/components/mobile/zegoToast/index.tsx\");\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\n\n\n\n\n\nvar ZegoMessage = /** @class */ (function (_super) {\n    __extends(ZegoMessage, _super);\n    function ZegoMessage(props) {\n        var _this = _super.call(this, props) || this;\n        _this.state = {\n            message: \"\",\n        };\n        _this.sendTime = 0;\n        _this.msgContentListRef = react__WEBPACK_IMPORTED_MODULE_1___default().createRef();\n        return _this;\n    }\n    ZegoMessage.prototype.componentDidMount = function () {\n        var _a;\n        (_a = this.msgContentListRef.current) === null || _a === void 0 ? void 0 : _a.scroll(0, this.msgContentListRef.current.scrollHeight -\n            this.msgContentListRef.current.clientHeight);\n    };\n    ZegoMessage.prototype.componentDidUpdate = function (prevProps) {\n        var _a;\n        if (prevProps.messageList.length !== this.props.messageList.length) {\n            (_a = this.msgContentListRef.current) === null || _a === void 0 ? void 0 : _a.scroll(0, this.msgContentListRef.current.scrollHeight -\n                this.msgContentListRef.current.clientHeight);\n        }\n    };\n    ZegoMessage.prototype.messageInput = function (event) {\n        this.setState({\n            message: event.target.value.substring(0, 300),\n        });\n    };\n    ZegoMessage.prototype.handleSend = function () {\n        if (!this.state.message.length)\n            return;\n        var timestamp = new Date().getTime();\n        if (this.sendTime > 0 && this.sendTime + 900 > timestamp) {\n            (0,_components_mobile_zegoToast__WEBPACK_IMPORTED_MODULE_4__.ZegoToast)({\n                content: \"Message sent too fast, please send again later\",\n            });\n            return false;\n        }\n        this.props.sendMessage(this.state.message);\n        this.setState({\n            message: \"\",\n        });\n        this.sendTime = timestamp;\n    };\n    ZegoMessage.prototype.render = function () {\n        var _this = this;\n        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgList }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgListHeader }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", { className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgHide, onClick: function (ev) {\n                                ev.stopPropagation();\n                                _this.props.closeCallBac();\n                            } }), \"Chat\"] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgListContent, ref: this.msgContentListRef }, { children: this.props.messageList.map(function (msg) {\n                        var _a;\n                        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: \"\".concat(_zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgContent, \" \").concat(_this.props.userID === msg.fromUser.userID\n                                ? _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].self\n                                : \"\") }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"i\", __assign({ style: { color: (0,_util__WEBPACK_IMPORTED_MODULE_3__.userNameColor)(msg.fromUser.userName) } }, { children: (_a = msg.fromUser.userName) === null || _a === void 0 ? void 0 : _a.substring(0, 1) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgContentRight }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgContentRightHeader }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", { children: msg.fromUser.userName }), _this.props.userID === msg.fromUser.userID && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"a\", { children: \"\\uFF08You\\uFF09\" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"span\", { children: \"\".concat(new Date(msg.sendTime).getHours() >= 12 ? \"PM\" : \"AM\", \"  \").concat((0,_util__WEBPACK_IMPORTED_MODULE_3__.DateFormat)(msg.sendTime, \"hh:mm\")) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgContentRightBody }, { children: [msg.status && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"i\", { className: msg.status === \"SENDING\"\n                                                        ? _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].loading\n                                                        : msg.status === \"SENDED\"\n                                                            ? \"\"\n                                                            : _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].sendFailed })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"p\", { children: msg.message })] }))] }))] }), msg.messageID));\n                    }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"div\", __assign({ className: _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].msgFooter }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"input\", { value: this.state.message, onChange: function (event) {\n                                _this.messageInput(event);\n                            }, placeholder: \"Send a message to everyone\", onKeyPress: function (event) {\n                                if (event.key === \"Enter\") {\n                                    _this.handleSend();\n                                }\n                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"button\", { className: this.state.message ? _zegoMessage_module_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"].readySend : \"\", onClick: function () {\n                                _this.handleSend();\n                            } })] }))] })));\n    };\n    return ZegoMessage;\n}((react__WEBPACK_IMPORTED_MODULE_1___default().PureComponent)));\n\n\n\n//# sourceURL=webpack://zegocloud_client_sdk_web/./src/sdk/view/pages/ZegoRoomMobile/components/zegoMessage.tsx?");
 
 /***/ }),