From 0cb3f01b2016a0a67f3ba4eb46a770a9f3e65f12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Deborah=20K=C3=B6pfer?= Date: Thu, 8 Aug 2024 14:03:47 +0200 Subject: [PATCH] feat(livechat): cleanup waiting room and style fixes --- src/components/session/SessionStream.tsx | 14 +- .../videoConference/WaitingRoom.tsx | 4 +- .../WaitingRoomContent.tsx | 0 .../videoConference/waitingRoom.styles.scss | 155 ++++++++++++++++++ src/hooks/useSession.tsx | 17 +- 5 files changed, 161 insertions(+), 29 deletions(-) rename src/components/{waitingRoom => videoConference}/WaitingRoomContent.tsx (100%) create mode 100644 src/components/videoConference/waitingRoom.styles.scss diff --git a/src/components/session/SessionStream.tsx b/src/components/session/SessionStream.tsx index 00de562fd..779cd66f8 100644 --- a/src/components/session/SessionStream.tsx +++ b/src/components/session/SessionStream.tsx @@ -11,7 +11,6 @@ import { useParams, useHistory } from 'react-router-dom'; import { Loading } from '../app/Loading'; import { SessionItemComponent } from './SessionItemComponent'; import { - AnonymousConversationFinishedContext, AUTHORITIES, ConsultantListContext, E2EEContext, @@ -22,7 +21,6 @@ import { UserDataContext, ActiveSessionContext } from '../../globalState'; -import { STATUS_FINISHED } from '../../globalState/interfaces'; import { apiGetAgencyConsultantList, apiGetSessionData, @@ -75,9 +73,6 @@ export const SessionStream = ({ const { userData } = useContext(UserDataContext); const { subscribe, unsubscribe } = useContext(RocketChatContext); const { getSetting } = useContext(RocketChatGlobalSettingsContext); - const { anonymousConversationFinished } = useContext( - AnonymousConversationFinishedContext - ); const { rcGroupId } = useParams<{ rcGroupId: string }>(); const subscribed = useRef(false); @@ -148,7 +143,7 @@ export const SessionStream = ({ */ const handleRoomMessage = useCallback( (args) => { - if (args.length === 0 || anonymousConversationFinished) return; + if (args.length === 0) return; args // Map collected from debounce callback @@ -180,7 +175,6 @@ export const SessionStream = ({ }, [ - anonymousConversationFinished, checkMutedUserForThisSession, isE2eeEnabled, activeSession.isGroup, @@ -268,11 +262,6 @@ export const SessionStream = ({ } else { subscribed.current = true; - if (anonymousConversationFinished) { - setLoading(false); - return; - } - // check if any user needs to be added when opening session view addNewUsersToEncryptedRoom().then(); @@ -372,7 +361,6 @@ export const SessionStream = ({ }, [ activeSession, addNewUsersToEncryptedRoom, - anonymousConversationFinished, fetchSessionMessages, handleChatStopped, handleLiveChatStopped, diff --git a/src/components/videoConference/WaitingRoom.tsx b/src/components/videoConference/WaitingRoom.tsx index 50acbdfc0..325decd48 100644 --- a/src/components/videoConference/WaitingRoom.tsx +++ b/src/components/videoConference/WaitingRoom.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { ReactComponent as ErrorIllustration } from '../../resources/img/illustrations/not-found.svg'; import { ReactComponent as WelcomeIllustration } from '../../resources/img/illustrations/welcome.svg'; import { ReactComponent as WaitingIllustration } from '../../resources/img/illustrations/waiting.svg'; -import './../waitingRoom/waitingRoom.styles'; +import './waitingRoom.styles'; import { useContext, useEffect } from 'react'; import { STATUS_CREATED, @@ -11,7 +11,7 @@ import { } from '../../globalState/interfaces'; import { useTranslation } from 'react-i18next'; import { StageLayout } from '../stageLayout/StageLayout'; -import { WaitingRoomContent } from '../waitingRoom/WaitingRoomContent'; +import { WaitingRoomContent } from './WaitingRoomContent'; import { Button, BUTTON_TYPES, ButtonItem } from '../button/Button'; import { LegalLinksContext } from '../../globalState/provider/LegalLinksProvider'; import { Text } from '../text/Text'; diff --git a/src/components/waitingRoom/WaitingRoomContent.tsx b/src/components/videoConference/WaitingRoomContent.tsx similarity index 100% rename from src/components/waitingRoom/WaitingRoomContent.tsx rename to src/components/videoConference/WaitingRoomContent.tsx diff --git a/src/components/videoConference/waitingRoom.styles.scss b/src/components/videoConference/waitingRoom.styles.scss new file mode 100644 index 000000000..0a6f615c0 --- /dev/null +++ b/src/components/videoConference/waitingRoom.styles.scss @@ -0,0 +1,155 @@ +.waitingRoom { + display: flex; + justify-content: center; + min-height: 100%; + overflow: hidden; + + &__headline { + margin-bottom: 12px; + } + + &__subline { + font-size: $font-size-h4; + font-weight: $font-weight-regular; + line-height: 28px; + } + + &__button { + text-align: left; + margin-top: $grid-base-four; + } + + &__illustration-wrapper { + height: 200px; + width: 200px; + display: flex; + align-items: center; + justify-content: center; + + svg { + fill: none; + height: 100%; + } + + @include breakpoint($fromLarge) { + margin-left: $grid-base-five; + } + } + + &__action { + border: $notice-border; + border-radius: 4px; + padding: $grid-base-two $grid-base-five; + margin-top: $grid-base-five; + display: flex; + flex-wrap: wrap-reverse; + align-items: center; + justify-content: center; + width: 100%; + + @include breakpoint($fromLarge) { + flex-wrap: nowrap; + justify-content: space-between; + } + + &-content { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + p { + text-align: center; + + a { + text-decoration: underline; + } + } + + @include breakpoint($fromLarge) { + display: block; + + p { + text-align: left; + } + } + } + } + + &__redirect { + &-title { + margin: $grid-base-five 0 14px; + color: $text-high-emphasis; + } + + &-text { + color: $text-low-emphasis; + + a { + text-decoration: underline; + } + } + } + + &__waitingIllustration { + .steam { + opacity: 0; + animation-duration: 4s; + animation-iteration-count: infinite; + + &--1 { + animation-name: fadeSteam; + transform: translateY(4px); + } + + &--2 { + animation-name: fadeSteam; + transform: translateY(1px); + animation-delay: 0.6s; + } + + &--3 { + animation-name: fadeSteam; + transform: translateY(0); + animation-delay: 1s; + } + } + + .foot { + transform-origin: 20px 71px; + animation-name: moveFoot; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + } + } +} + +@keyframes fadeSteam { + 0% { + opacity: 0; + } + + 25% { + opacity: 1; + } + + 100% { + opacity: 0; + transform: translateY(-4px); + } +} + +@keyframes moveFoot { + 0% { + transform: rotate(-10deg); + } + + 50% { + transform: rotate(20deg); + } + + 100% { + transform: rotate(-10deg); + } +} diff --git a/src/hooks/useSession.tsx b/src/hooks/useSession.tsx index 00a7fd440..4f324307b 100644 --- a/src/hooks/useSession.tsx +++ b/src/hooks/useSession.tsx @@ -1,13 +1,9 @@ -import { useCallback, useContext, useEffect, useRef, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { apiGetSessionRoomBySessionId, apiGetSessionRoomsByGroupIds } from '../api/apiGetSessionRooms'; -import { - AnonymousConversationFinishedContext, - buildExtendedSession, - ExtendedSessionInterface -} from '../globalState'; +import { buildExtendedSession, ExtendedSessionInterface } from '../globalState'; import { apiSetSessionRead, FETCH_ERRORS } from '../api'; import { apiGetChatRoomById } from '../api/apiGetChatRoomById'; @@ -23,9 +19,6 @@ export const useSession = ( } => { const [ready, setReady] = useState(false); const [session, setSession] = useState(null); - const { anonymousConversationFinished } = useContext( - AnonymousConversationFinishedContext - ); const repetitiveId = useRef(null); const abortController = useRef(null); @@ -48,10 +41,6 @@ export const useSession = ( return; } - if (anonymousConversationFinished) { - return; - } - if (chatId) { promise = apiGetChatRoomById( chatId, @@ -92,7 +81,7 @@ export const useSession = ( setSession(null); setReady(true); }); - }, [rid, sessionId, chatId, anonymousConversationFinished]); + }, [rid, sessionId, chatId]); const readSession = useCallback(() => { if (!session) {