@techsee/techsee-nway-media-service-client 1.0.0

package/lib/src/components/Multiparty.js

@@ -0,0 +1,163 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Multiparty = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var MediaConstants_1 = require("@techsee/techsee-nway-media-service/lib/MediaConstants");
+var MultiParty_1 = require("@techsee/techsee-nway-media-service/lib/MultiParty");
+var MultipartyController_1 = require("../services/MultipartyController");
+var types_1 = require("../services/types");
+var utils_1 = require("../utils");
+var MultipartyEventTypes_1 = require("../services/MultipartyEventTypes");
+var MediaRejectedModal_1 = require("./MediaRejectedModal/MediaRejectedModal");
+var Multiparty_types_1 = require("./Multiparty.types");
+var VideoLayouts_1 = require("./VideoLayouts");
+require("@techsee/techsee-ui-common/lib/_shared/icons.css");
+require("./Multiparty.scss");
+var Multiparty = function (_a) {
+    var controller = _a.controller, translations = _a.translations, isPeerMediaPermissionRejected = _a.isPeerMediaPermissionRejected, selectedLayoutType = _a.selectedLayoutType, onPermissionsModalVisibilityChanged = _a.onPermissionsModalVisibilityChanged, onPinnedUserChanged = _a.onPinnedUserChanged, onSnapshotRequested = _a.onSnapshotRequested, onEndMeetingRequested = _a.onEndMeetingRequested, videoOverlay = _a.videoOverlay;
+    var _b = (0, react_1.useState)(false), firstPeerDidConnect = _b[0], setFirstPeerDidConnect = _b[1];
+    var _c = (0, react_1.useState)(true), wasMediaPermissionsModalClosed = _c[0], setWasMediaPermissionsModalClosed = _c[1];
+    var _d = (0, react_1.useState)(false), isOwnMediaPermissionsRejected = _d[0], setOwnMediaPermissionsRejected = _d[1];
+    var _e = (0, react_1.useState)(controller.userRole), userRole = _e[0], setUserRole = _e[1];
+    var _f = (0, react_1.useState)(controller.pinnedUser), pinnedUser = _f[0], setPinnedUser = _f[1];
+    var _g = (0, react_1.useState)(controller.isAudioDisabled), isAudioDisabled = _g[0], setIsAudioDisabled = _g[1];
+    var _h = (0, react_1.useState)(false), isAudioMuted = _h[0], setIsAudioMuted = _h[1];
+    var _j = (0, react_1.useState)(false), isVideoTurnedOff = _j[0], setIsVideoTurnedOff = _j[1];
+    var _k = (0, react_1.useState)(false), isSwitchCameraSupported = _k[0], setIsSwitchCameraSupported = _k[1];
+    var _l = (0, react_1.useState)([]), connections = _l[0], setConnections = _l[1];
+    var toggleMute = (0, react_1.useCallback)(function () { return controller.toggleAudio(isAudioMuted); }, [controller, isAudioMuted]);
+    var switchCamera = (0, react_1.useCallback)(function () { return controller.switchCamera(); }, [controller]);
+    var toggleVideo = (0, react_1.useCallback)(function () { return controller.toggleVideo(isVideoTurnedOff); }, [controller, isVideoTurnedOff]);
+    var onModalClosed = (0, react_1.useCallback)(function () { return setWasMediaPermissionsModalClosed(false); }, []);
+    var onModalOpen = (0, react_1.useCallback)(function () { return setWasMediaPermissionsModalClosed(true); }, []);
+    (0, react_1.useEffect)(function () {
+        controller.connect();
+        setConnections(controller.connections.get());
+        return function () { return controller.disconnect(); };
+    }, [controller]);
+    (0, react_1.useEffect)(function () {
+        onPermissionsModalVisibilityChanged === null || onPermissionsModalVisibilityChanged === void 0 ? void 0 : onPermissionsModalVisibilityChanged(isOwnMediaPermissionsRejected && wasMediaPermissionsModalClosed
+            ? Multiparty_types_1.PermissionsModalVisibilityChangedEvent.MODAL_OPEN
+            : Multiparty_types_1.PermissionsModalVisibilityChangedEvent.MODAL_CLOSED);
+    }, [isOwnMediaPermissionsRejected, wasMediaPermissionsModalClosed, onPermissionsModalVisibilityChanged]);
+    (0, react_1.useEffect)(function () {
+        controller.connections.setOwnMediaPermissionsRejected(isOwnMediaPermissionsRejected);
+        setConnections(controller.connections.get());
+    }, [controller, isOwnMediaPermissionsRejected]);
+    (0, react_1.useEffect)(function () {
+        controller.connections.setPeerMediaPermissionsRejected(isPeerMediaPermissionRejected || false);
+        setConnections(controller.connections.get());
+    }, [controller, isPeerMediaPermissionRejected]);
+    (0, react_1.useEffect)(function () {
+        setUserRole(controller.userRole);
+    }, [controller.userRole]);
+    (0, react_1.useEffect)(function () {
+        setIsAudioDisabled(controller.isAudioDisabled);
+    }, [controller.isAudioDisabled]);
+    (0, utils_1.useEvent)(controller, MultipartyController_1.MultipartyEventsInternal.setPinnedUser, function (userType) { return setPinnedUser(userType); }, []);
+    (0, utils_1.useEvent)(controller, MultipartyEventTypes_1.MultipartyEvents.connectionCreated, function () {
+        var updatedConnections = controller.connections.get();
+        setConnections(updatedConnections);
+        if (updatedConnections.length > 1) {
+            setFirstPeerDidConnect(true);
+        }
+    }, []);
+    (0, utils_1.useEvent)(controller, MultipartyEventTypes_1.MultipartyEvents.connectionDestroyed, function () {
+        setConnections(controller.connections.get());
+    }, []);
+    (0, utils_1.useEvent)(controller, MultipartyEventTypes_1.MultipartyEvents.streamCreated, function (_a) {
+        var isOwnConnection = _a.isOwnConnection, hasAudio = _a.hasAudio, hasVideo = _a.hasVideo;
+        return __awaiter(void 0, void 0, void 0, function () {
+            var supportsCameraSwitch;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        setConnections(controller.connections.get());
+                        if (!isOwnConnection) return [3 /*break*/, 2];
+                        return [4 /*yield*/, (0, MultiParty_1.checkSupportSwitchCamera)()];
+                    case 1:
+                        supportsCameraSwitch = _b.sent();
+                        setIsSwitchCameraSupported(supportsCameraSwitch);
+                        setIsAudioMuted(!hasAudio);
+                        setIsVideoTurnedOff(!hasVideo);
+                        _b.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    }, []);
+    (0, utils_1.useEvent)(controller, MultipartyEventTypes_1.MultipartyEvents.streamPropertyChanged, function (_a) {
+        var isOwnConnection = _a.isOwnConnection, hasAudio = _a.hasAudio, hasVideo = _a.hasVideo;
+        setConnections(controller.connections.get());
+        if (isOwnConnection) {
+            setIsAudioMuted(!hasAudio);
+            setIsVideoTurnedOff(!hasVideo);
+        }
+    }, []);
+    (0, utils_1.useEvent)(controller, MultipartyEventTypes_1.MultipartyEvents.mediaDeviceAccessDenied, function (_a) {
+        var isOwnConnection = _a.isOwnConnection;
+        setConnections(controller.connections.get());
+        if (isOwnConnection) {
+            setOwnMediaPermissionsRejected(true);
+        }
+    }, []);
+    var MediaRejectedModalWithProps = function () {
+        if (controller.userRole === MediaConstants_1.SessionClientRole.USER &&
+            isOwnMediaPermissionsRejected &&
+            wasMediaPermissionsModalClosed) {
+            return (0, jsx_runtime_1.jsx)(MediaRejectedModal_1.MediaRejectedModal, { osType: (0, utils_1.detectOSType)(), translations: translations, onClose: onModalClosed });
+        }
+        return null;
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'mutltiparty-container' }, { children: [(0, jsx_runtime_1.jsx)(MediaRejectedModalWithProps, {}), (0, jsx_runtime_1.jsx)(VideoLayouts_1.VideoLayoutManager, { connections: connections, selectedLayoutType: selectedLayoutType, userRole: userRole, pinnedVideo: (0, types_1.toSessionClientRole)(pinnedUser), translations: translations, firstPeerConnected: firstPeerDidConnect, onModalOpen: onModalOpen, onToggleMute: !isAudioDisabled ? toggleMute : undefined, isAudioMuted: isAudioMuted, onToggleVideo: toggleVideo, isVideoTurnedOff: isVideoTurnedOff, onVideoPinned: onPinnedUserChanged, onSwitchCamera: isSwitchCameraSupported ? switchCamera : undefined, onSnapshotRequested: onSnapshotRequested, onEndMeetingRequested: onEndMeetingRequested, videoOverlay: videoOverlay })] })));
+};
+exports.Multiparty = Multiparty;
+//# sourceMappingURL=Multiparty.js.map

package/lib/src/components/Multiparty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Multiparty.js","sourceRoot":"","sources":["../../../src/components/Multiparty.tsx"],"names":[],"mappings":"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"}

package/lib/src/components/Multiparty.types.d.ts

@@ -0,0 +1,11 @@
+import { MediaRejectedModalStrings } from './MediaRejectedModal/MediaRejectedModal';
+import { VideoTranslationStrings } from './Video/Video';
+export declare enum PermissionsModalVisibilityChangedEvent {
+    MODAL_OPEN = "mediaPermissionsModalOpen",
+    MODAL_CLOSED = "mediaPermissionsModalClosed"
+}
+export type OnPermissionsModalVisibilityChangedCb = (type: PermissionsModalVisibilityChangedEvent) => void;
+export type MultipartyTranslationStrings = MediaRejectedModalStrings & VideoTranslationStrings;
+export type OnSnapshotRequestedCb = () => void;
+export type OnEndMeetingRequestedCb = () => void;
+//# sourceMappingURL=Multiparty.types.d.ts.map

package/lib/src/components/Multiparty.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Multiparty.types.d.ts","sourceRoot":"","sources":["../../../src/components/Multiparty.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,yBAAyB,EAAC,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAC,uBAAuB,EAAC,MAAM,eAAe,CAAC;AAEtD,oBAAY,sCAAsC;IAC9C,UAAU,8BAA8B;IACxC,YAAY,gCAAgC;CAC/C;AAED,MAAM,MAAM,qCAAqC,GAAG,CAAC,IAAI,EAAE,sCAAsC,KAAK,IAAI,CAAC;AAE3G,MAAM,MAAM,4BAA4B,GAAG,yBAAyB,GAAG,uBAAuB,CAAC;AAC/F,MAAM,MAAM,qBAAqB,GAAG,MAAM,IAAI,CAAC;AAC/C,MAAM,MAAM,uBAAuB,GAAG,MAAM,IAAI,CAAC"}

package/lib/src/components/Multiparty.types.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PermissionsModalVisibilityChangedEvent = void 0;
+var PermissionsModalVisibilityChangedEvent;
+(function (PermissionsModalVisibilityChangedEvent) {
+    PermissionsModalVisibilityChangedEvent["MODAL_OPEN"] = "mediaPermissionsModalOpen";
+    PermissionsModalVisibilityChangedEvent["MODAL_CLOSED"] = "mediaPermissionsModalClosed";
+})(PermissionsModalVisibilityChangedEvent = exports.PermissionsModalVisibilityChangedEvent || (exports.PermissionsModalVisibilityChangedEvent = {}));
+//# sourceMappingURL=Multiparty.types.js.map

package/lib/src/components/Multiparty.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Multiparty.types.js","sourceRoot":"","sources":["../../../src/components/Multiparty.types.ts"],"names":[],"mappings":";;;AAGA,IAAY,sCAGX;AAHD,WAAY,sCAAsC;IAC9C,kFAAwC,CAAA;IACxC,sFAA4C,CAAA;AAChD,CAAC,EAHW,sCAAsC,GAAtC,8CAAsC,KAAtC,8CAAsC,QAGjD"}

package/lib/src/components/Video/Video.d.ts

@@ -0,0 +1,22 @@
+import './Video.scss';
+import React from 'react';
+import { ConnectionDetails } from '../../services/types';
+export type VideoTranslationStrings = Partial<{
+    mediaRejectedPermissionDeniedTitle: string;
+    mediaRejectedPermissionDeniedText: string;
+    mediaRejectedUserDeniedPermission: string;
+    mediaRejectedTipClick: string;
+    mediaRejectedTipLearn: string;
+    mediaRejectedAccessDeniedTooltip: string;
+    mediaRejectedAccessDenied: string;
+    allPeersDisconnectedCaption: string;
+    connectingCaption: string;
+    waitingForFirstPeerCaption: string;
+}>;
+type VideoProps = {
+    connectionDetails?: ConnectionDetails;
+    children: JSX.Element;
+};
+export declare const Video: React.FC<VideoProps>;
+export {};
+//# sourceMappingURL=Video.d.ts.map

package/lib/src/components/Video/Video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.d.ts","sourceRoot":"","sources":["../../../../src/components/Video/Video.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,iBAAiB,EAAC,MAAM,sBAAsB,CAAC;AAEvD,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC;IAC1C,kCAAkC,EAAE,MAAM,CAAC;IAC3C,iCAAiC,EAAE,MAAM,CAAC;IAC1C,iCAAiC,EAAE,MAAM,CAAC;IAC1C,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,gCAAgC,EAAE,MAAM,CAAC;IACzC,yBAAyB,EAAE,MAAM,CAAC;IAClC,2BAA2B,EAAE,MAAM,CAAC;IACpC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0BAA0B,EAAE,MAAM,CAAC;CACtC,CAAC,CAAC;AAEH,KAAK,UAAU,GAAG;IACd,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAItC,CAAC"}

package/lib/src/components/Video/Video.js

@@ -0,0 +1,23 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Video = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("./Video.scss");
+var Video = function (_a) {
+    var _b;
+    var connectionDetails = _a.connectionDetails, children = _a.children;
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ id: (_b = connectionDetails === null || connectionDetails === void 0 ? void 0 : connectionDetails.videoStreamId) !== null && _b !== void 0 ? _b : '', className: 'participant' }, { children: children })));
+};
+exports.Video = Video;
+//# sourceMappingURL=Video.js.map

package/lib/src/components/Video/Video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.js","sourceRoot":"","sources":["../../../../src/components/Video/Video.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,wBAAsB;AAuBf,IAAM,KAAK,GAAyB,UAAC,EAA6B;;QAA5B,iBAAiB,uBAAA,EAAE,QAAQ,cAAA;IAA0B,OAAA,CAC9F,yCAAK,EAAE,EAAE,MAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,aAAa,mCAAI,EAAE,EAAE,SAAS,EAAC,aAAa,gBACnE,QAAQ,IACP,CACT,CAAA;CAAA,CAAC;AAJW,QAAA,KAAK,SAIhB"}

package/lib/src/components/Video/VideoPlaceholder.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ConnectionDetails } from '../../services/types';
+export type VideoTranslationStrings = Partial<{
+    mediaRejectedPermissionDeniedTitle: string;
+    mediaRejectedPermissionDeniedText: string;
+    mediaRejectedUserDeniedPermission: string;
+    mediaRejectedTipClick: string;
+    mediaRejectedTipLearn: string;
+    mediaRejectedAccessDeniedTooltip: string;
+    mediaRejectedAccessDenied: string;
+    allPeersDisconnectedCaption: string;
+    connectingCaption: string;
+    waitingForFirstPeerCaption: string;
+}>;
+type VideoPlaceholderProps = {
+    connectionDetails?: ConnectionDetails;
+    translations: VideoTranslationStrings;
+    firstPeerConnected: boolean;
+    children: JSX.Element;
+};
+export declare const VideoPlaceholder: React.FC<VideoPlaceholderProps>;
+export default VideoPlaceholder;
+//# sourceMappingURL=VideoPlaceholder.d.ts.map

package/lib/src/components/Video/VideoPlaceholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlaceholder.d.ts","sourceRoot":"","sources":["../../../../src/components/Video/VideoPlaceholder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,iBAAiB,EAAkB,MAAM,sBAAsB,CAAC;AAGxE,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC;IAC1C,kCAAkC,EAAE,MAAM,CAAC;IAC3C,iCAAiC,EAAE,MAAM,CAAC;IAC1C,iCAAiC,EAAE,MAAM,CAAC;IAC1C,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,gCAAgC,EAAE,MAAM,CAAC;IACzC,yBAAyB,EAAE,MAAM,CAAC;IAClC,2BAA2B,EAAE,MAAM,CAAC;IACpC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0BAA0B,EAAE,MAAM,CAAC;CACtC,CAAC,CAAC;AAEH,KAAK,qBAAqB,GAAG;IACzB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,YAAY,EAAE,uBAAuB,CAAC;IACtC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0B5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/src/components/Video/VideoPlaceholder.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoPlaceholder = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var types_1 = require("../../services/types");
+var LoaderSpinner_1 = require("../LoaderSpinner/LoaderSpinner");
+var VideoPlaceholder = function (props) {
+    var connectionDetails = props.connectionDetails, translations = props.translations, firstPeerConnected = props.firstPeerConnected, children = props.children;
+    var connectingCaption = translations.connectingCaption, waitingForFirstPeerCaption = translations.waitingForFirstPeerCaption, allPeersDisconnectedCaption = translations.allPeersDisconnectedCaption;
+    var waitingForPeerToConnectCaption = firstPeerConnected
+        ? allPeersDisconnectedCaption
+        : waitingForFirstPeerCaption;
+    var caption = (connectionDetails === null || connectionDetails === void 0 ? void 0 : connectionDetails.isOwnConnection) ? connectingCaption : waitingForPeerToConnectCaption;
+    var connectionState = connectionDetails === null || connectionDetails === void 0 ? void 0 : connectionDetails.connectionState;
+    switch (connectionState) {
+        case types_1.ConnectionState.WaitingForConnection:
+        case types_1.ConnectionState.Connecting:
+            return (0, jsx_runtime_1.jsx)(LoaderSpinner_1.LoaderSpinner, { caption: caption || 'Connecting...' });
+        case types_1.ConnectionState.ConnectedNoVideo: {
+            return children;
+        }
+        case types_1.ConnectionState.ConnectedPublishingVideo:
+            return null;
+        default:
+            return (0, jsx_runtime_1.jsx)(LoaderSpinner_1.LoaderSpinner, { caption: caption || 'Connecting...' });
+    }
+};
+exports.VideoPlaceholder = VideoPlaceholder;
+exports.default = exports.VideoPlaceholder;
+//# sourceMappingURL=VideoPlaceholder.js.map

package/lib/src/components/Video/VideoPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlaceholder.js","sourceRoot":"","sources":["../../../../src/components/Video/VideoPlaceholder.tsx"],"names":[],"mappings":";;;;AACA,8CAAwE;AACxE,gEAA6D;AAsBtD,IAAM,gBAAgB,GAAoC,UAAC,KAAK;IAC5D,IAAA,iBAAiB,GAAgD,KAAK,kBAArD,EAAE,YAAY,GAAkC,KAAK,aAAvC,EAAE,kBAAkB,GAAc,KAAK,mBAAnB,EAAE,QAAQ,GAAI,KAAK,SAAT,CAAU;IAEvE,IAAA,iBAAiB,GAA6D,YAAY,kBAAzE,EAAE,0BAA0B,GAAiC,YAAY,2BAA7C,EAAE,2BAA2B,GAAI,YAAY,4BAAhB,CAAiB;IAElG,IAAM,8BAA8B,GAAG,kBAAkB;QACrD,CAAC,CAAC,2BAA2B;QAC7B,CAAC,CAAC,0BAA0B,CAAC;IACjC,IAAM,OAAO,GAAG,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,eAAe,EAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,8BAA8B,CAAC;IACxG,IAAM,eAAe,GAAG,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,eAAe,CAAC;IAE3D,QAAQ,eAAe,EAAE;QACrB,KAAK,uBAAe,CAAC,oBAAoB,CAAC;QAC1C,KAAK,uBAAe,CAAC,UAAU;YAC3B,OAAO,uBAAC,6BAAa,IAAC,OAAO,EAAE,OAAO,IAAI,eAAe,GAAI,CAAC;QAElE,KAAK,uBAAe,CAAC,gBAAgB,CAAC,CAAC;YACnC,OAAO,QAAQ,CAAC;SACnB;QAED,KAAK,uBAAe,CAAC,wBAAwB;YACzC,OAAO,IAAI,CAAC;QAEhB;YACI,OAAO,uBAAC,6BAAa,IAAC,OAAO,EAAE,OAAO,IAAI,eAAe,GAAI,CAAC;KACrE;AACL,CAAC,CAAC;AA1BW,QAAA,gBAAgB,oBA0B3B;AAEF,kBAAe,wBAAgB,CAAC"}

package/lib/src/components/VideoLayouts/AgentPinnedLayout/AgentPinnedLayout.d.ts

@@ -0,0 +1,23 @@
+import './AgentPinnedLayout.scss';
+import React from 'react';
+import { SessionClientRole } from '@techsee/techsee-nway-media-service/lib/MediaConstants';
+import { ConnectionDetails } from '../../../services/types';
+import { OnEndMeetingRequestedCb } from '../../Multiparty.types';
+import { VideoTranslationStrings } from '../../Video/VideoPlaceholder';
+type Props = {
+    agentConnection?: ConnectionDetails;
+    userConnection?: ConnectionDetails;
+    userRole: SessionClientRole;
+    firstPeerConnected: boolean;
+    onModalOpen?: () => void;
+    translations: VideoTranslationStrings;
+    onToggleMute?: () => void;
+    onToggleVideo?: () => void;
+    onSwitchCamera?: () => void;
+    onEndMeetingRequested?: OnEndMeetingRequestedCb;
+    isAudioMuted: boolean;
+    isVideoTurnedOff: boolean;
+};
+export declare const AgentPinnedLayout: React.FC<Props>;
+export {};
+//# sourceMappingURL=AgentPinnedLayout.d.ts.map

package/lib/src/components/VideoLayouts/AgentPinnedLayout/AgentPinnedLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentPinnedLayout.d.ts","sourceRoot":"","sources":["../../../../../src/components/VideoLayouts/AgentPinnedLayout/AgentPinnedLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAElC,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAC,iBAAiB,EAAC,MAAM,wDAAwD,CAAC;AACzF,OAAO,EAAC,iBAAiB,EAAC,MAAM,yBAAyB,CAAC;AAG1D,OAAO,EAAC,uBAAuB,EAAC,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAmB,uBAAuB,EAAC,MAAM,8BAA8B,CAAC;AAGvF,KAAK,KAAK,GAAG;IACT,eAAe,CAAC,EAAE,iBAAiB,CAAC;IACpC,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,uBAAuB,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,qBAAqB,CAAC,EAAE,uBAAuB,CAAC;IAChD,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuE7C,CAAC"}

package/lib/src/components/VideoLayouts/AgentPinnedLayout/AgentPinnedLayout.js

@@ -0,0 +1,35 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AgentPinnedLayout = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("./AgentPinnedLayout.scss");
+var react_1 = require("react");
+var MediaConstants_1 = require("@techsee/techsee-nway-media-service/lib/MediaConstants");
+var Video_1 = require("../../Video/Video");
+var ButtonPanels_1 = require("../../ButtonPanels");
+var VideoPlaceholder_1 = require("../../Video/VideoPlaceholder");
+var Avatar_1 = require("../../Avatar/Avatar");
+var AgentPinnedLayout = function (_a) {
+    var agentConnection = _a.agentConnection, userConnection = _a.userConnection, userRole = _a.userRole, firstPeerConnected = _a.firstPeerConnected, onModalOpen = _a.onModalOpen, translations = _a.translations, onToggleMute = _a.onToggleMute, onToggleVideo = _a.onToggleVideo, onSwitchCamera = _a.onSwitchCamera, onEndMeetingRequested = _a.onEndMeetingRequested, isAudioMuted = _a.isAudioMuted, isVideoTurnedOff = _a.isVideoTurnedOff;
+    var MediaButtonsPanelWithProps = (0, react_1.useCallback)(function () {
+        var isAgent = userRole === MediaConstants_1.SessionClientRole.AGENT;
+        var cssClass = isAgent ? 'media-buttons-panel-left' : 'media-buttons-panel-right';
+        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: cssClass }, { children: (0, jsx_runtime_1.jsx)(ButtonPanels_1.MediaButtonsPanel, { onToggleMute: onToggleMute, onToggleVideo: onToggleVideo, onSwitchCamera: onSwitchCamera, buttonsType: isAgent ? ButtonPanels_1.MultipartyButtonType.DesktopObsolete : ButtonPanels_1.MultipartyButtonType.MobileObsolete, isMuted: isAudioMuted, isVideoTurnedOff: isVideoTurnedOff, isBackgroundVisible: true, isIconTransparencyEnabled: false }) })));
+    }, [onToggleMute, onToggleVideo, onSwitchCamera, userRole, isAudioMuted, isVideoTurnedOff]);
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'agent-pinned-layout use-common-styles' }, { children: [(0, jsx_runtime_1.jsx)(MediaButtonsPanelWithProps, {}), userRole === MediaConstants_1.SessionClientRole.USER && ((0, jsx_runtime_1.jsx)("div", __assign({ className: 'end-meeting-button-panel' }, { children: (0, jsx_runtime_1.jsx)(ButtonPanels_1.EndMeetingButtonPanel, { onEndMeetingRequested: onEndMeetingRequested }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: 'agent-area' }, { children: (0, jsx_runtime_1.jsx)(Video_1.Video, __assign({ connectionDetails: agentConnection }, { children: (0, jsx_runtime_1.jsx)(VideoPlaceholder_1.VideoPlaceholder, __assign({ translations: translations, firstPeerConnected: firstPeerConnected, connectionDetails: agentConnection }, { children: (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, {}) })) })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: 'peer-area' }, { children: (0, jsx_runtime_1.jsx)(Video_1.Video, __assign({ connectionDetails: userConnection }, { children: (0, jsx_runtime_1.jsx)(VideoPlaceholder_1.VideoPlaceholder, __assign({ translations: translations, firstPeerConnected: firstPeerConnected, connectionDetails: userConnection }, { children: (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { text: userRole === MediaConstants_1.SessionClientRole.USER &&
+                                (userConnection === null || userConnection === void 0 ? void 0 : userConnection.isMediaPermissionsRejected) &&
+                                translations.mediaRejectedAccessDenied, onClick: (userConnection === null || userConnection === void 0 ? void 0 : userConnection.isMediaPermissionsRejected) ? onModalOpen : undefined }) })) })) }))] })));
+};
+exports.AgentPinnedLayout = AgentPinnedLayout;
+//# sourceMappingURL=AgentPinnedLayout.js.map

package/lib/src/components/VideoLayouts/AgentPinnedLayout/AgentPinnedLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentPinnedLayout.js","sourceRoot":"","sources":["../../../../../src/components/VideoLayouts/AgentPinnedLayout/AgentPinnedLayout.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,oCAAkC;AAElC,+BAAyC;AACzC,yFAAyF;AAEzF,2CAAwC;AACxC,mDAAkG;AAElG,iEAAuF;AACvF,8CAA2C;AAiBpC,IAAM,iBAAiB,GAAoB,UAAC,EAa3C;QAZJ,eAAe,qBAAA,EACf,cAAc,oBAAA,EACd,QAAQ,cAAA,EACR,kBAAkB,wBAAA,EAClB,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,qBAAqB,2BAAA,EACrB,YAAY,kBAAA,EACZ,gBAAgB,sBAAA;IAEhB,IAAM,0BAA0B,GAAG,IAAA,mBAAW,EAAC;QAC3C,IAAM,OAAO,GAAG,QAAQ,KAAK,kCAAiB,CAAC,KAAK,CAAC;QACrD,IAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,2BAA2B,CAAC;QAEpF,OAAO,CACH,yCAAK,SAAS,EAAE,QAAQ,gBACpB,uBAAC,gCAAiB,IACd,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,mCAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,mCAAoB,CAAC,cAAc,EACjG,OAAO,EAAE,YAAY,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,mBAAmB,QACnB,yBAAyB,EAAE,KAAK,GAClC,IACA,CACT,CAAC;IACN,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE5F,OAAO,CACH,0CAAK,SAAS,EAAC,uCAAuC,iBAClD,uBAAC,0BAA0B,KAAG,EAC7B,QAAQ,KAAK,kCAAiB,CAAC,IAAI,IAAI,CACpC,yCAAK,SAAS,EAAC,0BAA0B,gBACrC,uBAAC,oCAAqB,IAAC,qBAAqB,EAAE,qBAAqB,GAAI,IACrE,CACT,EACD,yCAAK,SAAS,EAAC,YAAY,gBACvB,uBAAC,aAAK,aAAC,iBAAiB,EAAE,eAAe,gBACrC,uBAAC,mCAAgB,aACb,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,eAAe,gBAClC,uBAAC,eAAM,KAAG,IACK,IACf,IACN,EACN,yCAAK,SAAS,EAAC,WAAW,gBACtB,uBAAC,aAAK,aAAC,iBAAiB,EAAE,cAAc,gBACpC,uBAAC,mCAAgB,aACb,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,cAAc,gBACjC,uBAAC,eAAM,IACH,IAAI,EACA,QAAQ,KAAK,kCAAiB,CAAC,IAAI;iCACnC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,0BAA0B,CAAA;gCAC1C,YAAY,CAAC,yBAAyB,EAE1C,OAAO,EAAE,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,0BAA0B,EAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,GAC/E,IACa,IACf,IACN,KACJ,CACT,CAAC;AACN,CAAC,CAAC;AAvEW,QAAA,iBAAiB,qBAuE5B"}

package/lib/src/components/VideoLayouts/BigMainVideoLayout/BigAreaLayout.d.ts

@@ -0,0 +1,34 @@
+import React, { RefObject } from 'react';
+import { SessionClientRole } from '@techsee/techsee-nway-media-service/lib/MediaConstants';
+import { ConnectionDetails, OnPinnedUserChangedCb } from '../../../services/types';
+import { OnEndMeetingRequestedCb, OnSnapshotRequestedCb } from '../../Multiparty.types';
+import './BigAreaLayout.scss';
+import { VideoTranslationStrings } from '../../Video/VideoPlaceholder';
+type Props = {
+    mainConnection?: ConnectionDetails;
+    peerConnection?: ConnectionDetails;
+    pinnedVideo?: SessionClientRole;
+    userRole: SessionClientRole;
+    firstPeerConnected: boolean;
+    onVideoPinned?: OnPinnedUserChangedCb;
+    onModalOpen?: () => void;
+    translations: VideoTranslationStrings;
+    onToggleMute?: () => void;
+    onToggleVideo?: () => void;
+    onSwitchCamera?: () => void;
+    isAudioMuted: boolean;
+    isVideoTurnedOff: boolean;
+    onSnapshotRequested?: OnSnapshotRequestedCb;
+    onEndMeetingRequested?: OnEndMeetingRequestedCb;
+    videoOverlay?: (props: {
+        floatingElements: RefObject<HTMLElement>[];
+    }) => JSX.Element;
+};
+export declare enum FocusedVideoArea {
+    NONE = 0,
+    SMALL = 1,
+    BIG = 2
+}
+export declare const BigAreaLayout: React.FC<Props>;
+export {};
+//# sourceMappingURL=BigAreaLayout.d.ts.map

package/lib/src/components/VideoLayouts/BigMainVideoLayout/BigAreaLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BigAreaLayout.d.ts","sourceRoot":"","sources":["../../../../../src/components/VideoLayouts/BigMainVideoLayout/BigAreaLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,SAAS,EAAgC,MAAM,OAAO,CAAC;AACtE,OAAO,EAAC,iBAAiB,EAAC,MAAM,wDAAwD,CAAC;AACzF,OAAO,EAAC,iBAAiB,EAAE,qBAAqB,EAAmC,MAAM,yBAAyB,CAAC;AACnH,OAAO,EAAC,uBAAuB,EAAE,qBAAqB,EAAC,MAAM,wBAAwB,CAAC;AAUtF,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAmB,uBAAuB,EAAC,MAAM,8BAA8B,CAAC;AAKvF,KAAK,KAAK,GAAG;IACT,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,uBAAuB,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,qBAAqB,CAAC;IAC5C,qBAAqB,CAAC,EAAE,uBAAuB,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,gBAAgB,EAAE,SAAS,CAAC,WAAW,CAAC,EAAE,CAAA;KAAC,KAAK,GAAG,CAAC,OAAO,CAAC;CACvF,CAAC;AAOF,oBAAY,gBAAgB;IACxB,IAAI,IAAA;IACJ,KAAK,IAAA;IACL,GAAG,IAAA;CACN;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgKzC,CAAC"}

package/lib/src/components/VideoLayouts/BigMainVideoLayout/BigAreaLayout.js

@@ -0,0 +1,65 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BigAreaLayout = exports.FocusedVideoArea = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var MediaConstants_1 = require("@techsee/techsee-nway-media-service/lib/MediaConstants");
+var types_1 = require("../../../services/types");
+var ButtonPanels_1 = require("../../ButtonPanels");
+var Video_1 = require("../../Video/Video");
+var MediaButtonsPanel_1 = require("../../ButtonPanels/MediaButtonsPanel/MediaButtonsPanel");
+require("./BigAreaLayout.scss");
+var VideoPlaceholder_1 = require("../../Video/VideoPlaceholder");
+var BigAreaMediaPermissionDeniedPlaceholder_1 = __importDefault(require("../../VideoPlaceholders/BigAreaMediaPermissionDeniedPlaceholder"));
+var SmallAreaMediaPermissionDeniedPlaceholder_1 = __importDefault(require("../../VideoPlaceholders/SmallAreaMediaPermissionDeniedPlaceholder"));
+var Avatar_1 = require("../../Avatar/Avatar");
+var FocusedVideoArea;
+(function (FocusedVideoArea) {
+    FocusedVideoArea[FocusedVideoArea["NONE"] = 0] = "NONE";
+    FocusedVideoArea[FocusedVideoArea["SMALL"] = 1] = "SMALL";
+    FocusedVideoArea[FocusedVideoArea["BIG"] = 2] = "BIG";
+})(FocusedVideoArea = exports.FocusedVideoArea || (exports.FocusedVideoArea = {}));
+var BigAreaLayout = function (_a) {
+    var mainConnection = _a.mainConnection, peerConnection = _a.peerConnection, pinnedVideo = _a.pinnedVideo, userRole = _a.userRole, firstPeerConnected = _a.firstPeerConnected, onVideoPinned = _a.onVideoPinned, onModalOpen = _a.onModalOpen, translations = _a.translations, onToggleMute = _a.onToggleMute, onToggleVideo = _a.onToggleVideo, onSwitchCamera = _a.onSwitchCamera, isAudioMuted = _a.isAudioMuted, isVideoTurnedOff = _a.isVideoTurnedOff, onSnapshotRequested = _a.onSnapshotRequested, onEndMeetingRequested = _a.onEndMeetingRequested, VideoOverlay = _a.videoOverlay;
+    var _b = (0, react_1.useState)(FocusedVideoArea.NONE), focusedVideoArea = _b[0], setFocusedVideoArea = _b[1];
+    var snapshotButtonPanelRef = (0, react_1.useRef)(null);
+    var pinButtonPanelRef = (0, react_1.useRef)(null);
+    var mediaButtonsPanelRef = (0, react_1.useRef)(null);
+    var endMeetingButtonPanelRef = (0, react_1.useRef)(null);
+    var floatingElements = [
+        pinButtonPanelRef,
+        snapshotButtonPanelRef,
+        mediaButtonsPanelRef,
+        endMeetingButtonPanelRef
+    ];
+    var MediaButtons = (0, react_1.useCallback)(function (props) {
+        var buttonsSpacing = props.buttonsSpacing, isHover = props.isHover;
+        var isAgent = userRole === MediaConstants_1.SessionClientRole.AGENT;
+        var cssClass = isAgent ? 'media-buttons-panel-agent' : 'media-buttons-panel-user';
+        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: cssClass, ref: mediaButtonsPanelRef }, { children: (0, jsx_runtime_1.jsx)(ButtonPanels_1.MediaButtonsPanel, { onToggleMute: onToggleMute, onToggleVideo: onToggleVideo, onSwitchCamera: onSwitchCamera, buttonsType: isAgent ? ButtonPanels_1.MultipartyButtonType.Desktop : ButtonPanels_1.MultipartyButtonType.Mobile, buttonsSpacing: buttonsSpacing, isMuted: isAudioMuted, isVideoTurnedOff: isVideoTurnedOff, isBackgroundVisible: !isAgent || isHover, isIconTransparencyEnabled: isAgent }) })));
+    }, [onToggleMute, onToggleVideo, onSwitchCamera, userRole, isAudioMuted, isVideoTurnedOff, mediaButtonsPanelRef]);
+    var getPinnedCallback = (0, react_1.useCallback)(function (role) {
+        return role && onVideoPinned
+            ? function () { return onVideoPinned(role !== pinnedVideo ? (0, types_1.toPinnedUserType)(role) : types_1.PinnedUserType.NONE); }
+            : undefined;
+    }, [onVideoPinned, pinnedVideo]);
+    var mainConnectionRole = mainConnection === null || mainConnection === void 0 ? void 0 : mainConnection.userRole;
+    var peerConnectionRole = peerConnection === null || peerConnection === void 0 ? void 0 : peerConnection.userRole;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'big-main-video-layout use-common-styles' }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: 'big-area', onMouseEnter: function () { return setFocusedVideoArea(FocusedVideoArea.BIG); }, onMouseLeave: function () { return setFocusedVideoArea(FocusedVideoArea.NONE); } }, { children: [userRole === MediaConstants_1.SessionClientRole.AGENT && mainConnectionRole === userRole && ((0, jsx_runtime_1.jsx)(MediaButtons, { buttonsSpacing: MediaButtonsPanel_1.ButtonsSpacing.Sparse, isHover: focusedVideoArea === FocusedVideoArea.BIG })), userRole === MediaConstants_1.SessionClientRole.AGENT && onVideoPinned && ((0, jsx_runtime_1.jsx)("div", __assign({ className: 'pin-button-panel', ref: pinButtonPanelRef }, { children: (0, jsx_runtime_1.jsx)(ButtonPanels_1.PinButtonPanel, { isPinned: mainConnectionRole !== undefined && mainConnectionRole === pinnedVideo, isVideoHover: focusedVideoArea === FocusedVideoArea.BIG, onTogglePin: getPinnedCallback(mainConnectionRole) }) }))), userRole === MediaConstants_1.SessionClientRole.AGENT && onSnapshotRequested && ((0, jsx_runtime_1.jsx)("div", __assign({ className: 'snapshot-button-panel', ref: snapshotButtonPanelRef }, { children: (0, jsx_runtime_1.jsx)(ButtonPanels_1.SnapshotButtonPanel, { onSnapshot: onSnapshotRequested }) }))), (0, jsx_runtime_1.jsx)(Video_1.Video, __assign({ connectionDetails: mainConnection }, { children: (0, jsx_runtime_1.jsx)(VideoPlaceholder_1.VideoPlaceholder, __assign({ translations: translations, firstPeerConnected: firstPeerConnected, connectionDetails: mainConnection }, { children: (mainConnection === null || mainConnection === void 0 ? void 0 : mainConnection.isMediaPermissionsRejected) ? ((0, jsx_runtime_1.jsx)(BigAreaMediaPermissionDeniedPlaceholder_1.default, { connectionDetails: mainConnection, onModalOpen: (mainConnection === null || mainConnection === void 0 ? void 0 : mainConnection.isOwnConnection) ? onModalOpen : undefined, translations: translations })) : ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, {})) })) })), VideoOverlay && ((0, jsx_runtime_1.jsx)("div", __assign({ className: 'video-overlay' }, { children: (0, jsx_runtime_1.jsx)(VideoOverlay, { floatingElements: floatingElements }) })))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: 'small-area', onMouseEnter: function () { return setFocusedVideoArea(FocusedVideoArea.SMALL); }, onMouseLeave: function () { return setFocusedVideoArea(FocusedVideoArea.NONE); } }, { children: [userRole === MediaConstants_1.SessionClientRole.AGENT && peerConnectionRole === userRole && ((0, jsx_runtime_1.jsx)(MediaButtons, { buttonsSpacing: MediaButtonsPanel_1.ButtonsSpacing.Dense, isHover: focusedVideoArea === FocusedVideoArea.SMALL })), userRole === MediaConstants_1.SessionClientRole.AGENT && onVideoPinned && ((0, jsx_runtime_1.jsx)("div", __assign({ className: 'pin-button-panel' }, { children: (0, jsx_runtime_1.jsx)(ButtonPanels_1.PinButtonPanel, { isPinned: peerConnectionRole !== undefined && peerConnectionRole === pinnedVideo, isVideoHover: focusedVideoArea === FocusedVideoArea.SMALL, onTogglePin: getPinnedCallback(peerConnectionRole) }) }))), (0, jsx_runtime_1.jsx)(Video_1.Video, __assign({ connectionDetails: peerConnection }, { children: (0, jsx_runtime_1.jsx)(VideoPlaceholder_1.VideoPlaceholder, __assign({ translations: translations, firstPeerConnected: firstPeerConnected, connectionDetails: peerConnection }, { children: (peerConnection === null || peerConnection === void 0 ? void 0 : peerConnection.isMediaPermissionsRejected) ? ((0, jsx_runtime_1.jsx)(SmallAreaMediaPermissionDeniedPlaceholder_1.default, { translations: translations, onModalOpen: (peerConnection === null || peerConnection === void 0 ? void 0 : peerConnection.isOwnConnection) ? onModalOpen : undefined, connectionDetails: peerConnection })) : ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, {})) })) }))] })), userRole !== MediaConstants_1.SessionClientRole.AGENT && (0, jsx_runtime_1.jsx)(MediaButtons, { buttonsSpacing: MediaButtonsPanel_1.ButtonsSpacing.Sparse }), userRole === MediaConstants_1.SessionClientRole.USER && ((0, jsx_runtime_1.jsx)("div", __assign({ className: 'end-meeting-button-panel', ref: endMeetingButtonPanelRef }, { children: (0, jsx_runtime_1.jsx)(ButtonPanels_1.EndMeetingButtonPanel, { onEndMeetingRequested: onEndMeetingRequested }) })))] })));
+};
+exports.BigAreaLayout = BigAreaLayout;
+//# sourceMappingURL=BigAreaLayout.js.map

package/lib/src/components/VideoLayouts/BigMainVideoLayout/BigAreaLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BigAreaLayout.js","sourceRoot":"","sources":["../../../../../src/components/VideoLayouts/BigMainVideoLayout/BigAreaLayout.tsx"],"names":[],"mappings":"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"}

package/lib/src/components/VideoLayouts/VideoLayoutManager.d.ts

@@ -0,0 +1,29 @@
+import { RefObject } from 'react';
+import { SessionClientRole } from '@techsee/techsee-nway-media-service/lib/MediaConstants';
+import { VideoLayoutType } from '@techsee/techsee-nway-media-service/lib/MultiParty';
+import { ConnectionDetails, OnPinnedUserChangedCb } from '../../services/types';
+import { OnEndMeetingRequestedCb, OnSnapshotRequestedCb } from '../Multiparty.types';
+import { VideoTranslationStrings } from '../Video/VideoPlaceholder';
+type VideoLayoutManagerProps = {
+    connections: ConnectionDetails[];
+    pinnedVideo?: SessionClientRole;
+    selectedLayoutType?: VideoLayoutType;
+    userRole: SessionClientRole;
+    firstPeerConnected: boolean;
+    onVideoPinned?: OnPinnedUserChangedCb;
+    onModalOpen?: () => void;
+    translations: VideoTranslationStrings;
+    onToggleMute?: () => void;
+    onToggleVideo?: () => void;
+    onSwitchCamera?: () => void;
+    isAudioMuted: boolean;
+    isVideoTurnedOff: boolean;
+    onSnapshotRequested?: OnSnapshotRequestedCb;
+    videoOverlay?: (props: {
+        floatingElements: RefObject<HTMLElement>[];
+    }) => JSX.Element;
+    onEndMeetingRequested?: OnEndMeetingRequestedCb;
+};
+export declare const VideoLayoutManager: React.FC<VideoLayoutManagerProps>;
+export {};
+//# sourceMappingURL=VideoLayoutManager.d.ts.map

package/lib/src/components/VideoLayouts/VideoLayoutManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoLayoutManager.d.ts","sourceRoot":"","sources":["../../../../src/components/VideoLayouts/VideoLayoutManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAChC,OAAO,EAAC,iBAAiB,EAAC,MAAM,wDAAwD,CAAC;AACzF,OAAO,EAAC,eAAe,EAAC,MAAM,oDAAoD,CAAC;AACnF,OAAO,EAAC,iBAAiB,EAAE,qBAAqB,EAAC,MAAM,sBAAsB,CAAC;AAC9E,OAAO,EAAC,uBAAuB,EAAE,qBAAqB,EAAC,MAAM,qBAAqB,CAAC;AACnF,OAAO,EAAC,uBAAuB,EAAC,MAAM,2BAA2B,CAAC;AAIlE,KAAK,uBAAuB,GAAG;IAC3B,WAAW,EAAE,iBAAiB,EAAE,CAAC;IACjC,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,kBAAkB,CAAC,EAAE,eAAe,CAAC;IACrC,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,uBAAuB,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,qBAAqB,CAAC;IAC5C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,gBAAgB,EAAE,SAAS,CAAC,WAAW,CAAC,EAAE,CAAA;KAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IACpF,qBAAqB,CAAC,EAAE,uBAAuB,CAAC;CACnD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA8DhE,CAAC"}

package/lib/src/components/VideoLayouts/VideoLayoutManager.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoLayoutManager = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var MediaConstants_1 = require("@techsee/techsee-nway-media-service/lib/MediaConstants");
+var MultiParty_1 = require("@techsee/techsee-nway-media-service/lib/MultiParty");
+var AgentPinnedLayout_1 = require("./AgentPinnedLayout/AgentPinnedLayout");
+var BigAreaLayout_1 = require("./BigMainVideoLayout/BigAreaLayout");
+var VideoLayoutManager = function (_a) {
+    var connections = _a.connections, pinnedVideo = _a.pinnedVideo, selectedLayoutType = _a.selectedLayoutType, userRole = _a.userRole, firstPeerConnected = _a.firstPeerConnected, onVideoPinned = _a.onVideoPinned, onModalOpen = _a.onModalOpen, translations = _a.translations, onToggleMute = _a.onToggleMute, onToggleVideo = _a.onToggleVideo, onSwitchCamera = _a.onSwitchCamera, isAudioMuted = _a.isAudioMuted, isVideoTurnedOff = _a.isVideoTurnedOff, onSnapshotRequested = _a.onSnapshotRequested, onEndMeetingRequested = _a.onEndMeetingRequested, videoOverlay = _a.videoOverlay;
+    switch (selectedLayoutType) {
+        case MultiParty_1.VideoLayoutType.BigMainVideoLayout:
+            return ((0, jsx_runtime_1.jsx)(BigAreaLayout_1.BigAreaLayout, { mainConnection: connections.find(function (connection) {
+                    return pinnedVideo ? connection.userRole === pinnedVideo : !connection.isOwnConnection;
+                }), peerConnection: connections.find(function (connection) {
+                    return pinnedVideo ? connection.userRole !== pinnedVideo : connection.isOwnConnection;
+                }), userRole: userRole, pinnedVideo: pinnedVideo, translations: translations, firstPeerConnected: firstPeerConnected, onModalOpen: onModalOpen, onVideoPinned: onVideoPinned, onToggleMute: onToggleMute, onToggleVideo: onToggleVideo, onSwitchCamera: onSwitchCamera, isAudioMuted: isAudioMuted, isVideoTurnedOff: isVideoTurnedOff, onSnapshotRequested: onSnapshotRequested, videoOverlay: videoOverlay, onEndMeetingRequested: onEndMeetingRequested }));
+        default:
+            return ((0, jsx_runtime_1.jsx)(AgentPinnedLayout_1.AgentPinnedLayout, { agentConnection: connections.find(function (connection) { return connection.userRole === MediaConstants_1.SessionClientRole.AGENT; }), userConnection: connections.find(function (connection) { return connection.userRole === MediaConstants_1.SessionClientRole.USER; }), userRole: userRole, translations: translations, firstPeerConnected: firstPeerConnected, onModalOpen: onModalOpen, onToggleMute: onToggleMute, onToggleVideo: onToggleVideo, onSwitchCamera: onSwitchCamera, isAudioMuted: isAudioMuted, isVideoTurnedOff: isVideoTurnedOff, onEndMeetingRequested: onEndMeetingRequested }));
+    }
+};
+exports.VideoLayoutManager = VideoLayoutManager;
+//# sourceMappingURL=VideoLayoutManager.js.map

package/lib/src/components/VideoLayouts/VideoLayoutManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoLayoutManager.js","sourceRoot":"","sources":["../../../../src/components/VideoLayouts/VideoLayoutManager.tsx"],"names":[],"mappings":";;;;AACA,yFAAyF;AACzF,iFAAmF;AAInF,2EAAwE;AACxE,oEAAiE;AAqB1D,IAAM,kBAAkB,GAAsC,UAAC,EAiB5C;QAhBtB,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,kBAAkB,wBAAA,EAClB,QAAQ,cAAA,EACR,kBAAkB,wBAAA,EAClB,aAAa,mBAAA,EACb,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,YAAY,kBAAA,EACZ,gBAAgB,sBAAA,EAChB,mBAAmB,yBAAA,EACnB,qBAAqB,2BAAA,EACrB,YAAY,kBAAA;IAEZ,QAAQ,kBAAkB,EAAE;QACxB,KAAK,4BAAe,CAAC,kBAAkB;YACnC,OAAO,CACH,uBAAC,6BAAa,IACV,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,UAAC,UAAU;oBACxC,OAAA,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,eAAe;gBAA/E,CAA+E,CAClF,EACD,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,UAAC,UAAU;oBACxC,OAAA,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,eAAe;gBAA9E,CAA8E,CACjF,EACD,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,EAClC,mBAAmB,EAAE,mBAAmB,EACxC,YAAY,EAAE,YAAY,EAC1B,qBAAqB,EAAE,qBAAqB,GAC9C,CACL,CAAC;QACN;YACI,OAAO,CACH,uBAAC,qCAAiB,IACd,eAAe,EAAE,WAAW,CAAC,IAAI,CAAC,UAAC,UAAU,IAAK,OAAA,UAAU,CAAC,QAAQ,KAAK,kCAAiB,CAAC,KAAK,EAA/C,CAA+C,CAAC,EAClG,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,UAAC,UAAU,IAAK,OAAA,UAAU,CAAC,QAAQ,KAAK,kCAAiB,CAAC,IAAI,EAA9C,CAA8C,CAAC,EAChG,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,EAClC,qBAAqB,EAAE,qBAAqB,GAC9C,CACL,CAAC;KACT;AACL,CAAC,CAAC;AA9DW,QAAA,kBAAkB,sBA8D7B"}

package/lib/src/components/VideoLayouts/index.d.ts

@@ -0,0 +1,2 @@
+export { VideoLayoutManager } from './VideoLayoutManager';
+//# sourceMappingURL=index.d.ts.map

package/lib/src/components/VideoLayouts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/VideoLayouts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC"}