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

package/README.md

@@ -0,0 +1 @@
+techsee-client-services

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/MediaButtonsPanel/MediaButtonsPanel.scss

@@ -0,0 +1,31 @@
+.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;
+    }
+}

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

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

package/lib/components/LoaderSpinner/LoaderSpinner.scss

@@ -0,0 +1,69 @@
+.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;
+    }
+
+    .circle-3 {
+        animation-delay: 0.4s;
+    }
+
+    .circle-4 {
+        animation-delay: 0.6s;
+    }
+
+    .circle-5 {
+        animation-delay: 0.8s;
+    }
+
+    .circle-6 {
+        animation-delay: 1s;
+    }
+
+    .circle-7 {
+        animation-delay: 1.2s;
+    }
+
+    .circle-8 {
+        animation-delay: 1.4s;
+    }
+
+    .circle-9 {
+        animation-delay: 1.6s;
+    }
+
+    @keyframes loading-spinner {
+        0%,
+        100% {
+            opacity: 100%;
+        }
+        50% {
+            opacity: 0%;
+        }
+    }
+}

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;
+    }
+}

package/lib/components/MediaRejectedModal/MediaRejectedModal.scss

@@ -0,0 +1,75 @@
+.media-rejected-modal-container {
+    &,
+    & * {
+        box-sizing: border-box;
+    }
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    background: rgba(0, 0, 0, 0.5);
+
+    padding: 30px 38px;
+    z-index: 1100;
+
+    .media-rejected-modal {
+        position: relative;
+        max-height: 100%;
+        padding: 45px 15px 30px 15px;
+
+        background: #ffffff;
+        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+        border-radius: 10px;
+
+        display: flex;
+        flex-direction: column;
+
+        .media-rejected-close-icon {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+
+            width: 22px;
+            height: 22px;
+            padding: auto;
+        }
+
+        .media-rejected-content-container {
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+
+            font-family: 'Open Sans', sans-serif;
+            font-style: normal;
+            font-weight: 600;
+            font-size: 14px;
+            line-height: 19px;
+            color: #333333;
+
+            & * {
+                display: block;
+            }
+
+            .media-rejected-title {
+                font-family: 'Open Sans', sans-serif;
+                font-weight: 600;
+                font-style: normal;
+                font-size: 18px;
+                line-height: 25px;
+            }
+
+            .media-rejected-image {
+                width: 80%;
+                max-width: 280px;
+            }
+
+            .media-rejected-ordered-list {
+                list-style-position: outside;
+            }
+        }
+    }
+}

package/lib/components/Multiparty.scss

@@ -0,0 +1,8 @@
+* {
+    box-sizing: border-box;
+}
+
+.mutltiparty-container {
+    height: 100%;
+    width: 100%;
+}

package/lib/components/Video/Video.scss

@@ -0,0 +1,10 @@
+.participant {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    background: #3a3a3a;
+    position: relative;
+    border-radius: inherit;
+}

package/lib/components/VideoLayouts/AgentPinnedLayout/AgentPinnedLayout.scss

@@ -0,0 +1,49 @@
+.agent-pinned-layout {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column-reverse;
+    position: relative;
+
+    .agent-area,
+    .peer-area {
+        width: 100%;
+        height: 100%;
+    }
+
+    .media-buttons-panel-left {
+        left: 7.5px;
+        bottom: 0;
+
+        position: absolute;
+        z-index: 10;
+    }
+
+    .media-buttons-panel-right {
+        right: 7.5px;
+        top: 0;
+
+        position: absolute;
+        z-index: 10;
+    }
+
+    .end-meeting-button-panel {
+        position: absolute;
+        top: 15px;
+        left: 20px;
+        z-index: 10;
+    }
+
+    .OT_widget-container {
+        background: inherit;
+    }
+
+    @media screen and (min-aspect-ratio: 1/1) {
+        flex-direction: row;
+
+        .spinner {
+            width: 80px;
+            height: 80px;
+        }
+    }
+}

package/lib/components/VideoLayouts/BigMainVideoLayout/BigAreaLayout.scss

@@ -0,0 +1,128 @@
+.big-main-video-layout {
+    height: 100%;
+    width: 100%;
+
+    padding: 10px;
+
+    display: grid;
+    grid-template-columns: 102px 75vh;
+    grid-template-rows: 158px 1fr;
+    grid-template-areas: 'small-area big-area' 'empty big-area';
+    grid-column-gap: 10px;
+    justify-content: center;
+
+    @media screen and (max-width: 900px) and (max-height: 600px) and (min-device-aspect-ratio: 1/1) {
+        grid-template-columns: 77px 75vh;
+        grid-template-rows: 119px 1fr;
+    }
+
+    // Portrait view:
+    @media screen and (max-aspect-ratio: 1/1) {
+        grid-template-columns: 102px 1fr;
+        grid-template-rows: 1fr 158px;
+        grid-template-areas: 'big-area big-area' 'small-area empty';
+        grid-row-gap: 10px;
+    }
+
+    @media screen and (max-width: 900px) and (max-height: 600px) and (max-aspect-ratio: 1/1) {
+        grid-template-columns: 77px 1fr;
+        grid-template-rows: 1fr 119px;
+    }
+
+    .small-area,
+    .big-area {
+        position: relative;
+        border-radius: 4px;
+
+        /**
+     * @FIXME:
+     * - move 'object-fit' to media-service (as fit param for OT)
+     * - remove participant class as it does not belong to this Layout
+     */
+        .participant video {
+            width: 100%;
+            height: 100%;
+
+            object-fit: contain;
+        }
+
+        .pin-button-panel {
+            right: 10px;
+            top: 10px;
+
+            position: absolute;
+            z-index: 10;
+        }
+
+        .media-buttons-panel-agent {
+            right: 10px;
+            bottom: 0;
+
+            position: absolute;
+            z-index: 10;
+        }
+    }
+
+    .big-area {
+        grid-area: big-area;
+
+        .loader-spinner-container svg.spinner,
+        .avatar-container .avatar-img {
+            width: 80px;
+            height: 80px;
+        }
+
+        .snapshot-button-panel {
+            position: absolute;
+            bottom: 10px;
+            left: 50%;
+
+            transform: translateX(-50%);
+            z-index: 10;
+        }
+
+        .video-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+
+            width: 100%;
+            height: 100%;
+
+            z-index: 9;
+        }
+    }
+
+    .small-area {
+        grid-area: small-area;
+
+        .loader-spinner-container svg.spinner,
+        .avatar-container .avatar-img {
+            width: 50px;
+            height: 50px;
+        }
+
+        .loader-spinner-container .loader-spinner-caption {
+            display: none;
+        }
+    }
+
+    .OT_widget-container {
+        background: inherit;
+        border-radius: 4px;
+    }
+
+    .media-buttons-panel-user {
+        right: 20px;
+        top: 0;
+
+        position: absolute;
+        z-index: 10;
+    }
+    .end-meeting-button-panel {
+        position: absolute;
+        top: 15px;
+        left: 20px;
+        z-index: 10;
+    }
+}

package/lib/components/VideoPlaceholders/BigAreaMediaPermissionDeniedPlaceholder.scss

@@ -0,0 +1,34 @@
+@import 'Tooltip';
+
+.camera-off-container-big {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+    color: white;
+    margin-inline: 5px;
+
+    .permission-denied-title {
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        margin-top: 20px;
+    }
+
+    .permission-denied-description {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 16px;
+
+        &.user {
+            margin-top: 20px;
+            font-weight: 400;
+        }
+    }
+
+    .open-modal-button {
+        color: #49daea;
+        cursor: pointer;
+    }
+}

package/lib/components/VideoPlaceholders/SmallAreaMediaPermissionDeniedPlaceholder.scss

@@ -0,0 +1,15 @@
+@import 'Tooltip';
+
+.camera-off-container-small {
+    position: relative;
+}
+
+.exclamation-mark {
+    z-index: 1;
+    pointer-events: none;
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    top: 7px;
+    left: 7px;
+}

package/lib/components/VideoPlaceholders/Tooltip.scss

@@ -0,0 +1,65 @@
+.disable-pointer {
+    pointer-events: none;
+}
+
+.permission-denied-tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.permission-denied-tooltip .permission-denied-tooltip-text {
+    visibility: hidden;
+    width: 250px;
+    background-color: black;
+    color: #ffffff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 8px 8px;
+    position: absolute;
+    z-index: 999;
+    top: 238%;
+    left: 50%;
+    transform: translateX(-50%);
+    font-weight: 600;
+    font-size: 12px;
+
+    @media (max-width: 1260px) {
+        left: 176%;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    @media (max-width: 440px) {
+        width: 120px;
+    }
+
+    @media (max-width: 300px) {
+        width: 100px;
+    }
+}
+
+.permission-denied-tooltip .permission-denied-tooltip-text::after {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent black transparent;
+
+    @media (max-width: 1260px) {
+        bottom: 40%;
+        left: -5px;
+        transform: rotate(-90deg);
+    }
+}
+
+.permission-denied-tooltip:hover .permission-denied-tooltip-text {
+    visibility: visible;
+}
+
+.permission-denied-tooltip-text-big {
+    font-weight: 400;
+    font-size: 14px;
+}

package/lib/src/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/src/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/src/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 ((0, jsx_runtime_1.jsx)("div", __assign({ className: 'avatar-container' }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: 'avatar-box' }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: 'avatar-img' }), text && ((0, jsx_runtime_1.jsx)("div", __assign({ className: 'avatar-toast', onClick: onClick }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: 'avatar-toast-text' }, { children: text })) })))] })) })));
+};
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar.js.map

package/lib/src/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,yCAAK,SAAS,EAAC,kBAAkB,gBAC7B,0CAAK,SAAS,EAAC,YAAY,iBACvB,gCAAK,GAAG,EAAE,oBAAgB,EAAE,SAAS,EAAC,YAAY,GAAG,EACpD,IAAI,IAAI,CACL,yCAAK,SAAS,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO,gBAC1C,0CAAM,SAAS,EAAC,mBAAmB,gBAAE,IAAI,IAAQ,IAC/C,CACT,KACC,IACJ,CACT;AAXiE,CAWjE,CAAC;AAXW,QAAA,MAAM,UAWjB"}

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

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

package/lib/src/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,KAAK,KAAK,GAAG;IACT,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAOjD,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EndMeetingButtonPanel.js","sourceRoot":"","sources":["../../../../../src/components/ButtonPanels/EndMeetingButtonPanel/EndMeetingButtonPanel.tsx"],"names":[],"mappings":";;;;AACA,yEAA4F;AAMrF,IAAM,qBAAqB,GAAoB,UAAC,EAAuB;QAAtB,qBAAqB,2BAAA;IAAmB,OAAA,CAC5F,uBAAC,mCAAgB,IACb,IAAI,EAAE,uCAAoB,CAAC,MAAM,EACjC,OAAO,EAAE,qBAAqB,EAC9B,QAAQ,EAAC,QAAQ,EACjB,mBAAmB,SACrB,CACL;AAP+F,CAO/F,CAAC;AAPW,QAAA,qBAAqB,yBAOhC"}

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

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