@techsee/techsee-media-service-client 999.2.6-alpha2 → 999.2.6-sap

package/lib/components/Avatar/Avatar.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './Avatar.scss';
+export interface AvatarProps {
+    text?: string | false;
+    onClick?: () => void;
+}
+export declare const Avatar: React.FC<AvatarProps>;
+//# sourceMappingURL=Avatar.d.ts.map

package/lib/components/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,WAAW;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAWxC,CAAC"}

package/lib/components/Avatar/Avatar.js

@@ -0,0 +1,26 @@
+"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.Avatar = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var avatar_png_1 = __importDefault(require("../../assets/img/avatar.png"));
+require("./Avatar.scss");
+var Avatar = function (_a) {
+    var text = _a.text, onClick = _a.onClick;
+    return (jsx_runtime_1.jsx("div", __assign({ className: 'avatar-container' }, { children: jsx_runtime_1.jsxs("div", __assign({ className: 'avatar-box' }, { children: [jsx_runtime_1.jsx("img", { src: avatar_png_1.default, className: 'avatar-img' }, void 0), text && (jsx_runtime_1.jsx("div", __assign({ className: 'avatar-toast', onClick: onClick }, { children: jsx_runtime_1.jsx("span", __assign({ className: 'avatar-toast-text' }, { children: text }), void 0) }), void 0))] }), void 0) }), void 0));
+};
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar.js.map

package/lib/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,2EAA2D;AAC3D,yBAAuB;AAOhB,IAAM,MAAM,GAA0B,UAAC,EAAe;QAAd,IAAI,UAAA,EAAE,OAAO,aAAA;IAAM,OAAA,CAC9D,oCAAK,SAAS,EAAC,kBAAkB,gBAC7B,qCAAK,SAAS,EAAC,YAAY,iBACvB,2BAAK,GAAG,EAAE,oBAAgB,EAAE,SAAS,EAAC,YAAY,WAAG,EACpD,IAAI,IAAI,CACL,oCAAK,SAAS,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO,gBAC1C,qCAAM,SAAS,EAAC,mBAAmB,gBAAE,IAAI,YAAQ,YAC/C,CACT,aACC,YACJ,CACT;AAXiE,CAWjE,CAAC;AAXW,QAAA,MAAM,UAWjB"}

package/lib/components/Avatar/Avatar.scss

@@ -0,0 +1,45 @@
+.avatar-container {
+    position: absolute;
+    z-index: 2;
+    background: #3a3a3a;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .avatar-box {
+        position: relative;
+        width: 100%;
+        text-align: center;
+
+        .avatar-toast {
+            background-color: rgba(255, 255, 255, 0.2);
+            padding: 10px;
+            z-index: 3;
+
+            position: absolute;
+            bottom: -15px;
+            left: 50%;
+
+            transform: translate(-50%, 100%);
+
+            border-radius: 4px;
+
+            .avatar-toast-text {
+                color: #ffffff;
+                font-style: normal;
+                font-weight: 700;
+                font-size: 16px;
+                line-height: 22px;
+            }
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+    }
+}

package/lib/components/ButtonPanels/EndMeetingButtonPanel/EndMeetingButtonPanel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = {
+    onEndMeetingRequested?: () => void;
+};
+export declare const EndMeetingButtonPanel: React.FC<Props>;
+export {};
+//# sourceMappingURL=EndMeetingButtonPanel.d.ts.map

package/lib/components/ButtonPanels/EndMeetingButtonPanel/EndMeetingButtonPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EndMeetingButtonPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/EndMeetingButtonPanel/EndMeetingButtonPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,aAAK,KAAK,GAAG;IACT,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACtC,CAAC;AAWF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAqC,CAAC"}

package/lib/components/ButtonPanels/EndMeetingButtonPanel/EndMeetingButtonPanel.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EndMeetingButtonPanel = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var MultipartyButton_1 = require("../MultipartyButton/MultipartyButton");
+var endMeetingButtonPanel = function (_a) {
+    var onEndMeetingRequested = _a.onEndMeetingRequested;
+    return (jsx_runtime_1.jsx(MultipartyButton_1.MultipartyButton, { type: MultipartyButton_1.MultipartyButtonType.Mobile, onClick: onEndMeetingRequested, iconName: 'slim-x', isBackgroundVisible: true }, void 0));
+};
+exports.EndMeetingButtonPanel = react_1.default.memo(endMeetingButtonPanel);
+//# sourceMappingURL=EndMeetingButtonPanel.js.map

package/lib/components/ButtonPanels/EndMeetingButtonPanel/EndMeetingButtonPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EndMeetingButtonPanel.js","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/EndMeetingButtonPanel/EndMeetingButtonPanel.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAA0B;AAC1B,yEAA4F;AAM5F,IAAM,qBAAqB,GAAG,UAAC,EAA8B;QAA7B,qBAAqB,2BAAA;IAA0B,OAAA,CAC3E,kBAAC,mCAAgB,IACb,IAAI,EAAE,uCAAoB,CAAC,MAAM,EACjC,OAAO,EAAE,qBAAqB,EAC9B,QAAQ,EAAC,QAAQ,EACjB,mBAAmB,iBACrB,CACL;AAP8E,CAO9E,CAAC;AAEW,QAAA,qBAAqB,GAAoB,eAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC"}

package/lib/components/ButtonPanels/MediaButtonsPanel/MediaButtonsPanel.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { MultipartyButtonType } from '../MultipartyButton/MultipartyButton';
+import './MediaButtonsPanel.scss';
+interface Props {
+    buttonsType: MultipartyButtonType;
+    isMuted: boolean;
+    isVideoTurnedOff: boolean;
+    isBackgroundVisible?: boolean;
+    isIconTransparencyEnabled?: boolean;
+    isSharingScreen?: boolean;
+    disabledDesktopSharingButton?: boolean;
+    buttonsSpacing?: ButtonsSpacing;
+    onToggleMute?: () => void;
+    onToggleVideo?: () => void;
+    onSwitchCamera?: () => void;
+    toggleScreenShare?: () => void;
+}
+export declare enum ButtonsSpacing {
+    Dense = 0,
+    Sparse = 1
+}
+export declare const MediaButtonsPanel: React.FC<Props>;
+export {};
+//# sourceMappingURL=MediaButtonsPanel.d.ts.map

package/lib/components/ButtonPanels/MediaButtonsPanel/MediaButtonsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaButtonsPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/MediaButtonsPanel/MediaButtonsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAmB,oBAAoB,EAAC,MAAM,sCAAsC,CAAC;AAE5F,OAAO,0BAA0B,CAAC;AAElC,UAAU,KAAK;IACX,WAAW,EAAE,oBAAoB,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,oBAAY,cAAc;IACtB,KAAK,IAAA;IACL,MAAM,IAAA;CACT;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmG7C,CAAC"}

package/lib/components/ButtonPanels/MediaButtonsPanel/MediaButtonsPanel.js

@@ -0,0 +1,58 @@
+"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.MediaButtonsPanel = exports.ButtonsSpacing = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var simple_icon_1 = require("@techsee/techsee-ui-common/lib/icons/simple-icon");
+var MultipartyButton_1 = require("../MultipartyButton/MultipartyButton");
+require("./MediaButtonsPanel.scss");
+var ButtonsSpacing;
+(function (ButtonsSpacing) {
+    ButtonsSpacing[ButtonsSpacing["Dense"] = 0] = "Dense";
+    ButtonsSpacing[ButtonsSpacing["Sparse"] = 1] = "Sparse";
+})(ButtonsSpacing = exports.ButtonsSpacing || (exports.ButtonsSpacing = {}));
+var MediaButtonsPanel = function (_a) {
+    var buttonsType = _a.buttonsType, isMuted = _a.isMuted, isVideoTurnedOff = _a.isVideoTurnedOff, _b = _a.isBackgroundVisible, isBackgroundVisible = _b === void 0 ? true : _b, _c = _a.isIconTransparencyEnabled, isIconTransparencyEnabled = _c === void 0 ? true : _c, _d = _a.buttonsSpacing, buttonsSpacing = _d === void 0 ? ButtonsSpacing.Sparse : _d, onToggleMute = _a.onToggleMute, onToggleVideo = _a.onToggleVideo, onSwitchCamera = _a.onSwitchCamera, isSharingScreen = _a.isSharingScreen, toggleScreenShare = _a.toggleScreenShare, disabledDesktopSharingButton = _a.disabledDesktopSharingButton;
+    var platformClass = 'mobile';
+    if (buttonsType === MultipartyButton_1.MultipartyButtonType.Desktop)
+        platformClass = 'desktop';
+    else if (buttonsType === MultipartyButton_1.MultipartyButtonType.DesktopObsolete)
+        platformClass = 'desktop-obsolete';
+    platformClass += ' ' + (buttonsSpacing === ButtonsSpacing.Dense ? 'dense' : 'sparse');
+    var _e = react_1.useState(false), displayStopSharingButton = _e[0], setDisplayStopSharingButton = _e[1];
+    var onClickScreenShare = react_1.useCallback(function () {
+        if (isSharingScreen && !displayStopSharingButton) {
+            setDisplayStopSharingButton(true);
+        }
+        if (isSharingScreen && displayStopSharingButton) {
+            setDisplayStopSharingButton(false);
+        }
+        if (!isSharingScreen && toggleScreenShare) {
+            toggleScreenShare();
+        }
+    }, [toggleScreenShare, isSharingScreen, displayStopSharingButton]);
+    var onClickStopSharingButton = react_1.useCallback(function () {
+        setDisplayStopSharingButton(false);
+        if (toggleScreenShare) {
+            toggleScreenShare();
+        }
+    }, [toggleScreenShare, setDisplayStopSharingButton]);
+    var onCloseStopSharingButton = function (event) {
+        event.stopPropagation();
+        setDisplayStopSharingButton(false);
+    };
+    return (jsx_runtime_1.jsxs("div", __assign({ className: "media-buttons-panel " + platformClass }, { children: [toggleScreenShare && (jsx_runtime_1.jsxs("div", __assign({ className: 'share-screen-mobile' }, { children: [jsx_runtime_1.jsx(MultipartyButton_1.MultipartyButton, { type: buttonsType, onClick: onClickScreenShare, iconName: 'Screen-Share', isBackgroundVisible: isBackgroundVisible, disabled: disabledDesktopSharingButton }, void 0), displayStopSharingButton && (jsx_runtime_1.jsxs("div", __assign({ className: 'stop-desktop-sharing', onClick: onClickStopSharingButton }, { children: [jsx_runtime_1.jsx("button", __assign({ type: 'button', onClick: onCloseStopSharingButton }, { children: jsx_runtime_1.jsx(simple_icon_1.Icon, { iconName: 'exit' }, void 0) }), void 0), jsx_runtime_1.jsx("span", { children: "Stop Sharing" }, void 0)] }), void 0))] }), void 0)), onToggleMute && (jsx_runtime_1.jsx(MultipartyButton_1.MultipartyButton, { type: buttonsType, onClick: onToggleMute, iconName: isMuted ? 'mic-off' : 'mic-on', isSwitchedOn: !isIconTransparencyEnabled || !isMuted, isBackgroundVisible: isBackgroundVisible }, void 0)), onToggleVideo && (jsx_runtime_1.jsx(MultipartyButton_1.MultipartyButton, { type: buttonsType, onClick: onToggleVideo, iconName: isVideoTurnedOff ? 'camera-off' : 'camera-on', isSwitchedOn: !isIconTransparencyEnabled || !isVideoTurnedOff, isBackgroundVisible: isBackgroundVisible }, void 0)), onSwitchCamera && (jsx_runtime_1.jsx(MultipartyButton_1.MultipartyButton, { type: buttonsType, onClick: onSwitchCamera, iconName: 'switch-camera', isBackgroundVisible: isBackgroundVisible, disabled: isVideoTurnedOff }, void 0))] }), void 0));
+};
+exports.MediaButtonsPanel = MediaButtonsPanel;
+//# sourceMappingURL=MediaButtonsPanel.js.map

package/lib/components/ButtonPanels/MediaButtonsPanel/MediaButtonsPanel.js.map

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

package/lib/components/ButtonPanels/MediaButtonsPanel/MediaButtonsPanel.scss

@@ -0,0 +1,55 @@
+.media-buttons-panel {
+    display: flex;
+
+    &.mobile > * {
+        margin: 15px 15px 15px 0;
+    }
+
+    &.desktop.sparse > * {
+        margin: 10px 10px 10px 0;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    &.desktop.dense > * {
+        margin: 10px 3px 10px 0;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    &.button-desktop-obsolete > * {
+        margin: 10px 5px 10px 0;
+    }
+
+    & > *:last-child {
+        margin-right: 0;
+    }
+
+    &.mobile {
+        .share-screen-mobile {
+            .stop-desktop-sharing {
+                cursor: pointer;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                padding: 4px;
+                position: absolute;
+                width: 161px;
+                height: 56px;
+                top: 50px;
+                background: #f9fafb;
+                //box-shadow: 0px 0px 70px rgb(0 0 0 / 45%);
+                border-radius: 10px;
+
+                button {
+                    border: none;
+                    background: no-repeat;
+                }
+            }
+        }
+    }
+}

package/lib/components/ButtonPanels/MultipartyButton/MultipartyButton.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export declare enum MultipartyButtonType {
+    Mobile = "mobile",
+    Desktop = "desktop",
+    DesktopObsolete = "desktop-obsolete",
+    MobileObsolete = "mobile-obsolete"
+}
+interface Props {
+    type: MultipartyButtonType;
+    iconName: string;
+    isSwitchedOn?: boolean;
+    disabled?: boolean;
+    isBackgroundVisible?: boolean;
+    onClick?: () => void;
+}
+export declare const MultipartyButton: React.FC<Props>;
+export {};
+//# sourceMappingURL=MultipartyButton.d.ts.map

package/lib/components/ButtonPanels/MultipartyButton/MultipartyButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultipartyButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/MultipartyButton/MultipartyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,oBAAY,oBAAoB;IAC5B,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,eAAe,qBAAqB;IACpC,cAAc,oBAAoB;CACrC;AAeD,UAAU,KAAK;IACX,IAAI,EAAE,oBAAoB,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0B5C,CAAC"}

package/lib/components/ButtonPanels/MultipartyButton/MultipartyButton.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipartyButton = exports.MultipartyButtonType = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var border_rounded_icon_1 = require("@techsee/techsee-ui-common/lib/forms/buttons/border-rounded-icon");
+var square_rounded_icon_1 = require("@techsee/techsee-ui-common/lib/forms/buttons/square-rounded-icon");
+var large_rounded_icon_1 = require("@techsee/techsee-ui-common/lib/icons/large-rounded-icon");
+var MultipartyButtonType;
+(function (MultipartyButtonType) {
+    MultipartyButtonType["Mobile"] = "mobile";
+    MultipartyButtonType["Desktop"] = "desktop";
+    MultipartyButtonType["DesktopObsolete"] = "desktop-obsolete";
+    MultipartyButtonType["MobileObsolete"] = "mobile-obsolete";
+})(MultipartyButtonType = exports.MultipartyButtonType || (exports.MultipartyButtonType = {}));
+function buttonTypeToIconSize(buttonType) {
+    switch (buttonType) {
+        case MultipartyButtonType.DesktopObsolete:
+            return large_rounded_icon_1.IconSizes.LargeObsolete;
+        case MultipartyButtonType.Mobile:
+            return large_rounded_icon_1.IconSizes.MobileLarge;
+        case MultipartyButtonType.MobileObsolete:
+            return large_rounded_icon_1.IconSizes.MobileLargeObsolete;
+        default:
+            return large_rounded_icon_1.IconSizes.Large;
+    }
+}
+var MultipartyButton = function (_a) {
+    var type = _a.type, iconName = _a.iconName, _b = _a.isSwitchedOn, isSwitchedOn = _b === void 0 ? true : _b, _c = _a.isBackgroundVisible, isBackgroundVisible = _c === void 0 ? true : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, onClick = _a.onClick;
+    var IconButton = type === MultipartyButtonType.Mobile ? border_rounded_icon_1.BorderRoundedIconButton : square_rounded_icon_1.SquareRoundedIconButton;
+    var backgroundTransparency = isBackgroundVisible ? large_rounded_icon_1.BackgroundTransparencies.HALF : large_rounded_icon_1.BackgroundTransparencies.FULL;
+    var iconTransparency = isSwitchedOn || isBackgroundVisible ? large_rounded_icon_1.IconTransparencies.NONE : large_rounded_icon_1.IconTransparencies.HALF;
+    return (jsx_runtime_1.jsx(IconButton, { onClick: onClick, sizeName: buttonTypeToIconSize(type), colorName: large_rounded_icon_1.IconColors.Black, iconName: iconName, iconTransparency: iconTransparency, noBorder: true, reverseColor: true, disabled: disabled, backgroundTransparency: backgroundTransparency }, void 0));
+};
+exports.MultipartyButton = MultipartyButton;
+//# sourceMappingURL=MultipartyButton.js.map

package/lib/components/ButtonPanels/MultipartyButton/MultipartyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultipartyButton.js","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/MultipartyButton/MultipartyButton.tsx"],"names":[],"mappings":";;;;AACA,wGAAyG;AACzG,wGAAyG;AACzG,8FAKiE;AAEjE,IAAY,oBAKX;AALD,WAAY,oBAAoB;IAC5B,yCAAiB,CAAA;IACjB,2CAAmB,CAAA;IACnB,4DAAoC,CAAA;IACpC,0DAAkC,CAAA;AACtC,CAAC,EALW,oBAAoB,GAApB,4BAAoB,KAApB,4BAAoB,QAK/B;AAED,SAAS,oBAAoB,CAAC,UAAgC;IAC1D,QAAQ,UAAU,EAAE;QAChB,KAAK,oBAAoB,CAAC,eAAe;YACrC,OAAO,8BAAS,CAAC,aAAa,CAAC;QACnC,KAAK,oBAAoB,CAAC,MAAM;YAC5B,OAAO,8BAAS,CAAC,WAAW,CAAC;QACjC,KAAK,oBAAoB,CAAC,cAAc;YACpC,OAAO,8BAAS,CAAC,mBAAmB,CAAC;QACzC;YACI,OAAO,8BAAS,CAAC,KAAK,CAAC;KAC9B;AACL,CAAC;AAWM,IAAM,gBAAgB,GAAoB,UAAC,EAOjD;QANG,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,oBAAmB,EAAnB,YAAY,mBAAG,IAAI,KAAA,EACnB,2BAA0B,EAA1B,mBAAmB,mBAAG,IAAI,KAAA,EAC1B,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,OAAO,aAAA;IAEP,IAAM,UAAU,GAAG,IAAI,KAAK,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,6CAAuB,CAAC,CAAC,CAAC,6CAAuB,CAAC;IAE5G,IAAM,sBAAsB,GAAG,mBAAmB,CAAC,CAAC,CAAC,6CAAwB,CAAC,IAAI,CAAC,CAAC,CAAC,6CAAwB,CAAC,IAAI,CAAC;IACnH,IAAM,gBAAgB,GAAG,YAAY,IAAI,mBAAmB,CAAC,CAAC,CAAC,uCAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,uCAAkB,CAAC,IAAI,CAAC;IAEjH,OAAO,CACH,kBAAC,UAAU,IACP,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,oBAAoB,CAAC,IAAI,CAAC,EACpC,SAAS,EAAE,+BAAU,CAAC,KAAK,EAC3B,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,QACR,YAAY,QACZ,QAAQ,EAAE,QAAQ,EAClB,sBAAsB,EAAE,sBAAsB,WAChD,CACL,CAAC;AACN,CAAC,CAAC;AA1BW,QAAA,gBAAgB,oBA0B3B"}

package/lib/components/ButtonPanels/PinButtonPanel/PinButtonPanel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type PinCallback = (() => void) | false;
+declare type Props = {
+    isPinned: boolean;
+    isVideoHover: boolean;
+    onTogglePin?: PinCallback;
+};
+export declare const PinButtonPanel: React.FC<Props>;
+export {};
+//# sourceMappingURL=PinButtonPanel.d.ts.map

package/lib/components/ButtonPanels/PinButtonPanel/PinButtonPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinButtonPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/PinButtonPanel/PinButtonPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,aAAK,WAAW,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,CAAC;AACxC,aAAK,KAAK,GAAG;IACT,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAY1C,CAAC"}

package/lib/components/ButtonPanels/PinButtonPanel/PinButtonPanel.js

@@ -0,0 +1,22 @@
+"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.PinButtonPanel = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var MultipartyButton_1 = require("../MultipartyButton/MultipartyButton");
+var PinButtonPanel = function (_a) {
+    var onTogglePin = _a.onTogglePin, isPinned = _a.isPinned, isVideoHover = _a.isVideoHover;
+    return (jsx_runtime_1.jsx("div", __assign({ className: 'pin-buttons-panel' }, { children: onTogglePin && (jsx_runtime_1.jsx(MultipartyButton_1.MultipartyButton, { type: MultipartyButton_1.MultipartyButtonType.Desktop, onClick: onTogglePin, iconName: 'pin', isSwitchedOn: isPinned, isBackgroundVisible: isVideoHover }, void 0)) }), void 0));
+};
+exports.PinButtonPanel = PinButtonPanel;
+//# sourceMappingURL=PinButtonPanel.js.map

package/lib/components/ButtonPanels/PinButtonPanel/PinButtonPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinButtonPanel.js","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/PinButtonPanel/PinButtonPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,yEAA4F;AASrF,IAAM,cAAc,GAAoB,UAAC,EAAqC;QAApC,WAAW,iBAAA,EAAE,QAAQ,cAAA,EAAE,YAAY,kBAAA;IAAmB,OAAA,CACnG,oCAAK,SAAS,EAAC,mBAAmB,gBAC7B,WAAW,IAAI,CACZ,kBAAC,mCAAgB,IACb,IAAI,EAAE,uCAAoB,CAAC,OAAO,EAClC,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAC,KAAK,EACd,YAAY,EAAE,QAAQ,EACtB,mBAAmB,EAAE,YAAY,WACnC,CACL,YACC,CACT;AAZsG,CAYtG,CAAC;AAZW,QAAA,cAAc,kBAYzB"}

package/lib/components/ButtonPanels/SnapshotButtonPanel/SnapshotButtonPanel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './SnapshotButtonPanel.scss';
+declare type SnapshotCallback = () => void;
+declare type Props = {
+    onSnapshot?: SnapshotCallback;
+};
+export declare const SnapshotButtonPanel: React.FC<Props>;
+export {};
+//# sourceMappingURL=SnapshotButtonPanel.d.ts.map

package/lib/components/ButtonPanels/SnapshotButtonPanel/SnapshotButtonPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnapshotButtonPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/SnapshotButtonPanel/SnapshotButtonPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,4BAA4B,CAAC;AAEpC,aAAK,gBAAgB,GAAG,MAAM,IAAI,CAAC;AACnC,aAAK,KAAK,GAAG;IACT,UAAU,CAAC,EAAE,gBAAgB,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAE/C,CAAC"}

package/lib/components/ButtonPanels/SnapshotButtonPanel/SnapshotButtonPanel.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnapshotButtonPanel = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var camera_button_png_1 = __importDefault(require("../../../assets/img/camera-button.png"));
+require("./SnapshotButtonPanel.scss");
+var SnapshotButtonPanel = function (_a) {
+    var onSnapshot = _a.onSnapshot;
+    return (jsx_runtime_1.jsx("img", { src: camera_button_png_1.default, onClick: onSnapshot, className: 'snapshot-button-panel-img' }, void 0));
+};
+exports.SnapshotButtonPanel = SnapshotButtonPanel;
+//# sourceMappingURL=SnapshotButtonPanel.js.map

package/lib/components/ButtonPanels/SnapshotButtonPanel/SnapshotButtonPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnapshotButtonPanel.js","sourceRoot":"","sources":["../../../../src/components/ButtonPanels/SnapshotButtonPanel/SnapshotButtonPanel.tsx"],"names":[],"mappings":";;;;;;;AACA,4FAA8D;AAC9D,sCAAoC;AAO7B,IAAM,mBAAmB,GAAoB,UAAC,EAAY;QAAX,UAAU,gBAAA;IAAmB,OAAA,CAC/E,2BAAK,GAAG,EAAE,2BAAS,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAC,2BAA2B,WAAG,CACrF;AAFkF,CAElF,CAAC;AAFW,QAAA,mBAAmB,uBAE9B"}

package/lib/components/ButtonPanels/SnapshotButtonPanel/SnapshotButtonPanel.scss

@@ -0,0 +1,6 @@
+.snapshot-button-panel-img {
+    width: 43px;
+    height: 43px;
+
+    cursor: pointer;
+}

package/lib/components/ButtonPanels/index.d.ts

@@ -0,0 +1,6 @@
+export { PinButtonPanel } from './PinButtonPanel/PinButtonPanel';
+export { MediaButtonsPanel } from './MediaButtonsPanel/MediaButtonsPanel';
+export { MultipartyButtonType } from './MultipartyButton/MultipartyButton';
+export { SnapshotButtonPanel } from './SnapshotButtonPanel/SnapshotButtonPanel';
+export { EndMeetingButtonPanel } from './EndMeetingButtonPanel/EndMeetingButtonPanel';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ButtonPanels/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonPanels/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAC,iBAAiB,EAAC,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAC,mBAAmB,EAAC,MAAM,2CAA2C,CAAC;AAC9E,OAAO,EAAC,qBAAqB,EAAC,MAAM,+CAA+C,CAAC"}

package/lib/components/ButtonPanels/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EndMeetingButtonPanel = exports.SnapshotButtonPanel = exports.MultipartyButtonType = exports.MediaButtonsPanel = exports.PinButtonPanel = void 0;
+var PinButtonPanel_1 = require("./PinButtonPanel/PinButtonPanel");
+Object.defineProperty(exports, "PinButtonPanel", { enumerable: true, get: function () { return PinButtonPanel_1.PinButtonPanel; } });
+var MediaButtonsPanel_1 = require("./MediaButtonsPanel/MediaButtonsPanel");
+Object.defineProperty(exports, "MediaButtonsPanel", { enumerable: true, get: function () { return MediaButtonsPanel_1.MediaButtonsPanel; } });
+var MultipartyButton_1 = require("./MultipartyButton/MultipartyButton");
+Object.defineProperty(exports, "MultipartyButtonType", { enumerable: true, get: function () { return MultipartyButton_1.MultipartyButtonType; } });
+var SnapshotButtonPanel_1 = require("./SnapshotButtonPanel/SnapshotButtonPanel");
+Object.defineProperty(exports, "SnapshotButtonPanel", { enumerable: true, get: function () { return SnapshotButtonPanel_1.SnapshotButtonPanel; } });
+var EndMeetingButtonPanel_1 = require("./EndMeetingButtonPanel/EndMeetingButtonPanel");
+Object.defineProperty(exports, "EndMeetingButtonPanel", { enumerable: true, get: function () { return EndMeetingButtonPanel_1.EndMeetingButtonPanel; } });
+//# sourceMappingURL=index.js.map

package/lib/components/ButtonPanels/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ButtonPanels/index.ts"],"names":[],"mappings":";;;AAAA,kEAA+D;AAAvD,gHAAA,cAAc,OAAA;AACtB,2EAAwE;AAAhE,sHAAA,iBAAiB,OAAA;AACzB,wEAAyE;AAAjE,wHAAA,oBAAoB,OAAA;AAC5B,iFAA8E;AAAtE,0HAAA,mBAAmB,OAAA;AAC3B,uFAAoF;AAA5E,8HAAA,qBAAqB,OAAA"}

package/lib/components/LoaderSpinner/LoaderSpinner.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import './LoaderSpinner.scss';
 declare type LoaderSpinnerProps = {
-    connectingCaption?: string;
+    caption: string;
 };
 export declare const LoaderSpinner: React.FC<LoaderSpinnerProps>;
 export {};
+//# sourceMappingURL=LoaderSpinner.d.ts.map

package/lib/components/LoaderSpinner/LoaderSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoaderSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/LoaderSpinner/LoaderSpinner.tsx"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAC;AAE9B,aAAK,kBAAkB,GAAG;IACtB,OAAO,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiEtD,CAAC"}

package/lib/components/LoaderSpinner/LoaderSpinner.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,21 +10,13 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './LoaderSpinner.scss';
-export var LoaderSpinner = function (_a) {
-    var connectingCaption = _a.connectingCaption;
-    return (_jsxs("div", __assign({ className: "loader-spinner-container" }, { children: [_jsxs("svg", __assign({ className: "spinner", width: "118", height: "118", viewBox: "0 0 118 118", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("circle", { cx: "59", cy: "59", r: "59", fill: "white", fillOpacity: "0.1" }, void 0),
-                    _jsxs("g", __assign({ clipPath: "url(#clip0)" }, { children: [_jsx("path", { className: "circle circle-1", d: "M59.5 41C63.6421 41 67 37.6421 67 33.5C67 29.3579 63.6421 26 59.5 26C55.3579 26 52 29.3579 52 33.5C52 37.6421 55.3579 41 59.5 41Z", fill: "white" }, void 0),
-                            _jsx("path", { className: "circle circle-2", d: "M72.1901 45.5985C75.3572 48.256 80.0754 47.8472 82.7285 44.6854C85.3815 41.5236 84.9648 36.8061 81.7977 34.1486C78.6306 31.4911 73.9124 31.8999 71.2593 35.0617C68.6063 38.2235 69.023 42.941 72.1901 45.5985Z", fill: "white" }, void 0),
-                            _jsx("path", { className: "circle circle-3", d: "M79.0856 57.4596C79.7997 61.5093 83.6914 64.2081 87.7779 63.4875C91.8644 62.7669 94.5983 58.8999 93.8843 54.8502C93.1702 50.8005 89.2785 48.1017 85.192 48.8223C81.1055 49.5428 78.3716 53.4099 79.0856 57.4596Z", fill: "white" }, void 0),
-                            _jsx("path", { className: "circle circle-4", d: "M76.6956 70.9205C74.6351 74.4894 75.8718 79.0609 79.4579 81.1313C83.044 83.2017 87.6214 81.987 89.6819 78.4182C91.7424 74.8493 90.5056 70.2778 86.9196 68.2074C83.3335 66.137 78.756 67.3517 76.6956 70.9205Z", fill: "white" }, void 0),
-                            _jsx("path", { className: "circle circle-5", d: "M66.0989 79.7512C62.2028 81.1693 60.1855 85.454 61.5931 89.3214C63.0007 93.1889 67.3003 95.1745 71.1963 93.7564C75.0924 92.3384 77.1097 88.0536 75.7021 84.1862C74.2945 80.3188 69.9949 78.3331 66.0989 79.7512Z", fill: "white" }, void 0),
-                            _jsx("path", { className: "circle circle-6", d: "M52.2142 79.7512C48.3181 78.3331 44.0186 80.3188 42.611 84.1862C41.2034 88.0536 43.2207 92.3384 47.1167 93.7564C51.0128 95.1745 55.3123 93.1889 56.72 89.3214C58.1276 85.454 56.1103 81.1693 52.2142 79.7512Z", fill: "white" }, void 0),
-                            _jsx("path", { className: "circle circle-7", d: "M41.6175 70.9205C39.557 67.3517 34.9796 66.137 31.3935 68.2074C27.8074 70.2778 26.5707 74.8493 28.6312 78.4182C30.6916 81.987 35.2691 83.2017 38.8552 81.1313C42.4412 79.0609 43.678 74.4894 41.6175 70.9205Z", fill: "white" }, void 0),
-                            _jsx("path", { className: "circle circle-8", d: "M39.2274 57.4596C39.9415 53.4099 37.2076 49.5428 33.1211 48.8223C29.0345 48.1017 25.1429 50.8005 24.4288 54.8502C23.7147 58.8999 26.4487 62.7669 30.5352 63.4875C34.6217 64.2081 38.5134 61.5093 39.2274 57.4596Z", fill: "white" }, void 0),
-                            _jsx("path", { className: "circle circle-9", d: "M46.123 45.5985C49.2901 42.941 49.7068 38.2235 47.0537 35.0617C44.4007 31.8999 39.6825 31.4911 36.5154 34.1486C33.3483 36.8061 32.9316 41.5236 35.5846 44.6854C38.2377 47.8472 42.9559 48.256 46.123 45.5985Z", fill: "white" }, void 0)] }), void 0),
-                    _jsx("defs", { children: _jsx("clipPath", __assign({ id: "clip0" }, { children: _jsx("rect", { width: "70", height: "69", fill: "white", transform: "translate(24 26)" }, void 0) }), void 0) }, void 0)] }), void 0),
-            _jsx("div", __assign({ className: "loader-spinner-caption" }, { children: connectingCaption || 'Connecting...' }), void 0)] }), void 0));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoaderSpinner = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("./LoaderSpinner.scss");
+var LoaderSpinner = function (_a) {
+    var caption = _a.caption;
+    return (jsx_runtime_1.jsxs("div", __assign({ className: 'loader-spinner-container' }, { children: [jsx_runtime_1.jsxs("svg", __assign({ className: 'spinner', width: '118', height: '118', viewBox: '0 0 118 118', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, { children: [jsx_runtime_1.jsx("circle", { cx: '59', cy: '59', r: '59', fill: 'white', fillOpacity: '0.1' }, void 0), jsx_runtime_1.jsxs("g", __assign({ clipPath: 'url(#clip0)' }, { children: [jsx_runtime_1.jsx("path", { className: 'circle circle-1', d: 'M59.5 41C63.6421 41 67 37.6421 67 33.5C67 29.3579 63.6421 26 59.5 26C55.3579 26 52 29.3579 52 33.5C52 37.6421 55.3579 41 59.5 41Z', fill: 'white' }, void 0), jsx_runtime_1.jsx("path", { className: 'circle circle-2', d: 'M72.1901 45.5985C75.3572 48.256 80.0754 47.8472 82.7285 44.6854C85.3815 41.5236 84.9648 36.8061 81.7977 34.1486C78.6306 31.4911 73.9124 31.8999 71.2593 35.0617C68.6063 38.2235 69.023 42.941 72.1901 45.5985Z', fill: 'white' }, void 0), jsx_runtime_1.jsx("path", { className: 'circle circle-3', d: 'M79.0856 57.4596C79.7997 61.5093 83.6914 64.2081 87.7779 63.4875C91.8644 62.7669 94.5983 58.8999 93.8843 54.8502C93.1702 50.8005 89.2785 48.1017 85.192 48.8223C81.1055 49.5428 78.3716 53.4099 79.0856 57.4596Z', fill: 'white' }, void 0), jsx_runtime_1.jsx("path", { className: 'circle circle-4', d: 'M76.6956 70.9205C74.6351 74.4894 75.8718 79.0609 79.4579 81.1313C83.044 83.2017 87.6214 81.987 89.6819 78.4182C91.7424 74.8493 90.5056 70.2778 86.9196 68.2074C83.3335 66.137 78.756 67.3517 76.6956 70.9205Z', fill: 'white' }, void 0), jsx_runtime_1.jsx("path", { className: 'circle circle-5', d: 'M66.0989 79.7512C62.2028 81.1693 60.1855 85.454 61.5931 89.3214C63.0007 93.1889 67.3003 95.1745 71.1963 93.7564C75.0924 92.3384 77.1097 88.0536 75.7021 84.1862C74.2945 80.3188 69.9949 78.3331 66.0989 79.7512Z', fill: 'white' }, void 0), jsx_runtime_1.jsx("path", { className: 'circle circle-6', d: 'M52.2142 79.7512C48.3181 78.3331 44.0186 80.3188 42.611 84.1862C41.2034 88.0536 43.2207 92.3384 47.1167 93.7564C51.0128 95.1745 55.3123 93.1889 56.72 89.3214C58.1276 85.454 56.1103 81.1693 52.2142 79.7512Z', fill: 'white' }, void 0), jsx_runtime_1.jsx("path", { className: 'circle circle-7', d: 'M41.6175 70.9205C39.557 67.3517 34.9796 66.137 31.3935 68.2074C27.8074 70.2778 26.5707 74.8493 28.6312 78.4182C30.6916 81.987 35.2691 83.2017 38.8552 81.1313C42.4412 79.0609 43.678 74.4894 41.6175 70.9205Z', fill: 'white' }, void 0), jsx_runtime_1.jsx("path", { className: 'circle circle-8', d: 'M39.2274 57.4596C39.9415 53.4099 37.2076 49.5428 33.1211 48.8223C29.0345 48.1017 25.1429 50.8005 24.4288 54.8502C23.7147 58.8999 26.4487 62.7669 30.5352 63.4875C34.6217 64.2081 38.5134 61.5093 39.2274 57.4596Z', fill: 'white' }, void 0), jsx_runtime_1.jsx("path", { className: 'circle circle-9', d: 'M46.123 45.5985C49.2901 42.941 49.7068 38.2235 47.0537 35.0617C44.4007 31.8999 39.6825 31.4911 36.5154 34.1486C33.3483 36.8061 32.9316 41.5236 35.5846 44.6854C38.2377 47.8472 42.9559 48.256 46.123 45.5985Z', fill: 'white' }, void 0)] }), void 0), jsx_runtime_1.jsx("defs", { children: jsx_runtime_1.jsx("clipPath", __assign({ id: 'clip0' }, { children: jsx_runtime_1.jsx("rect", { width: '70', height: '69', fill: 'white', transform: 'translate(24 26)' }, void 0) }), void 0) }, void 0)] }), void 0), jsx_runtime_1.jsx("div", __assign({ className: 'loader-spinner-caption' }, { children: caption }), void 0)] }), void 0));
 };
+exports.LoaderSpinner = LoaderSpinner;
 //# sourceMappingURL=LoaderSpinner.js.map

package/lib/components/LoaderSpinner/LoaderSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoaderSpinner.js","sourceRoot":"","sources":["../../../src/components/LoaderSpinner/LoaderSpinner.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,sBAAsB,CAAC;AAM9B,MAAM,CAAC,IAAM,aAAa,GAAiC,UAAC,EAAmB;QAAlB,iBAAiB,uBAAA;IAAM,OAAA,CAChF,wBAAK,SAAS,EAAC,0BAA0B,iBACrC,wBACI,SAAS,EAAC,SAAS,EACnB,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,iBAElC,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,WAAG;oBAChE,sBAAG,QAAQ,EAAC,aAAa,iBACrB,eACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,mIAAmI,EACrI,IAAI,EAAC,OAAO,WACd;4BACF,eACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,gNAAgN,EAClN,IAAI,EAAC,OAAO,WACd;4BACF,eACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,kNAAkN,EACpN,IAAI,EAAC,OAAO,WACd;4BACF,eACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,+MAA+M,EACjN,IAAI,EAAC,OAAO,WACd;4BACF,eACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,kNAAkN,EACpN,IAAI,EAAC,OAAO,WACd;4BACF,eACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,+MAA+M,EACjN,IAAI,EAAC,OAAO,WACd;4BACF,eACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,+MAA+M,EACjN,IAAI,EAAC,OAAO,WACd;4BACF,eACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,mNAAmN,EACrN,IAAI,EAAC,OAAO,WACd;4BACF,eACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,+MAA+M,EACjN,IAAI,EAAC,OAAO,WACd,aACF;oBACJ,yBACI,4BAAU,EAAE,EAAC,OAAO,gBAChB,eACI,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,kBAAkB,WAC9B,YACK,WACR,aACL;YACN,uBAAK,SAAS,EAAC,wBAAwB,gBAAE,iBAAiB,IAAI,eAAe,YAAO,aAClF,CACT;AAvEmF,CAuEnF,CAAC"}
+{"version":3,"file":"LoaderSpinner.js","sourceRoot":"","sources":["../../../src/components/LoaderSpinner/LoaderSpinner.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,gCAA8B;AAMvB,IAAM,aAAa,GAAiC,UAAC,EAAS;QAAR,OAAO,aAAA;IAAM,OAAA,CACtE,qCAAK,SAAS,EAAC,0BAA0B,iBACrC,qCACI,SAAS,EAAC,SAAS,EACnB,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,iBAClC,8BAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,WAAG,EAChE,mCAAG,QAAQ,EAAC,aAAa,iBACrB,4BACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,mIAAmI,EACrI,IAAI,EAAC,OAAO,WACd,EACF,4BACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,gNAAgN,EAClN,IAAI,EAAC,OAAO,WACd,EACF,4BACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,kNAAkN,EACpN,IAAI,EAAC,OAAO,WACd,EACF,4BACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,+MAA+M,EACjN,IAAI,EAAC,OAAO,WACd,EACF,4BACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,kNAAkN,EACpN,IAAI,EAAC,OAAO,WACd,EACF,4BACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,+MAA+M,EACjN,IAAI,EAAC,OAAO,WACd,EACF,4BACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,+MAA+M,EACjN,IAAI,EAAC,OAAO,WACd,EACF,4BACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,mNAAmN,EACrN,IAAI,EAAC,OAAO,WACd,EACF,4BACI,SAAS,EAAC,iBAAiB,EAC3B,CAAC,EAAC,+MAA+M,EACjN,IAAI,EAAC,OAAO,WACd,aACF,EACJ,sCACI,yCAAU,EAAE,EAAC,OAAO,gBAChB,4BAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB,WAAG,YAClE,WACR,aACL,EACN,oCAAK,SAAS,EAAC,wBAAwB,gBAAE,OAAO,YAAO,aACrD,CACT;AAjEyE,CAiEzE,CAAC;AAjEW,QAAA,aAAa,iBAiExB"}

package/lib/components/LoaderSpinner/LoaderSpinner.scss

@@ -1,20 +1,30 @@
 .loader-spinner-container {
+    position: absolute;
+    z-index: 2;
+    background: #3a3a3a;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
 
     .loader-spinner-caption {
         font-family: 'Open Sans';
         font-size: 14px;
         color: white;
 
+        text-align: center;
         padding-top: 20px;
+        margin: 0px 15px;
     }
 
     .circle {
         animation: loading-spinner 1.8s infinite;
     }
-    
+
     .circle-2 {
         animation-delay: 0.2s;
     }

package/lib/components/MagicMarker/MagicMarker.scss

@@ -0,0 +1,18 @@
+.magic-marker {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    > canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+
+        touch-action: none;
+        overscroll-behavior: contain;
+    }
+}