From 0f21e12073b533a85c1a803a49e588f211f0f75c Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 3 Nov 2021 14:05:44 +1100 Subject: [PATCH] make resizable the height of the inconvo call --- stylesheets/_session_conversation.scss | 11 +- ts/components/session/SplitViewContainer.tsx | 119 ++++++++++++++++++ .../calling/CallInFullScreenContainer.tsx | 15 +-- .../calling/InConversationCallContainer.tsx | 12 +- .../conversation/SessionConversation.tsx | 47 ++----- .../SessionMessagesListContainer.tsx | 30 ++++- ts/state/selectors/conversations.ts | 16 +++ ts/state/smart/SessionConversation.ts | 2 + 8 files changed, 186 insertions(+), 66 deletions(-) create mode 100644 ts/components/session/SplitViewContainer.tsx diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index c920c44b4..32ada5c75 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -115,15 +115,6 @@ border-left: var(--border-session); border-top: var(--border-session); - - &__blocking-overlay { - background-color: rgba(0, 0, 0, 0.8); - position: absolute; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; - } } .conversation-info-panel { @@ -196,6 +187,8 @@ flex-grow: 1; min-height: $composition-container-height; padding: $session-margin-xs 0; + z-index: 1; + background-color: inherit; ul { max-height: 70vh; diff --git a/ts/components/session/SplitViewContainer.tsx b/ts/components/session/SplitViewContainer.tsx new file mode 100644 index 000000000..09ce89317 --- /dev/null +++ b/ts/components/session/SplitViewContainer.tsx @@ -0,0 +1,119 @@ +import React, { useEffect, useRef, useState } from 'react'; +import styled from 'styled-components'; + +type SplitViewProps = { + top: React.ReactElement; + bottom: React.ReactElement; + disableTop: boolean; +}; + +const SlyledSplitView = styled.div` + height: 100%; + display: flex; + flex-direction: column; +`; + +const SplitViewDivider = styled.div` + width: calc(100% - 2rem); + height: 2px; + margin: 1rem; + border: 2px solid #808080; + cursor: row-resize; + flex-shrink: 0; +`; + +const StyledTop = styled.div` + background: red; + display: flex; + flex-direction: column; +`; + +const TopSplitViewPanel = ({ + children, + topHeight, + setTopHeight, +}: { + children: React.ReactNode; + topHeight: number | undefined; + setTopHeight: (value: number) => void; +}) => { + const topRef = useRef(null); + React.useEffect(() => { + if (topRef.current) { + if (!topHeight) { + setTopHeight(Math.max(MIN_HEIGHT_TOP, topRef.current?.clientHeight / 2)); + return; + } + + topRef.current.style.height = `${topHeight}px`; + } + }, [topRef, topHeight, setTopHeight]); + + return {children}; +}; + +const MIN_HEIGHT_TOP = 300; +const MIN_HEIGHT_BOTTOM = 0; + +export const SplitViewContainer: React.FunctionComponent = ({ + disableTop, + top, + bottom, +}) => { + const [topHeight, setTopHeight] = useState(undefined); + const [separatorYPosition, setSeparatorYPosition] = useState(undefined); + const [dragging, setDragging] = useState(false); + + const splitPaneRef = useRef(null); + + const onMouseDown = (e: any) => { + setSeparatorYPosition(e.clientY); + setDragging(true); + }; + + const onMouseMove = (e: any) => { + if (dragging && topHeight && separatorYPosition) { + const newTopHeight = topHeight + e.clientY - separatorYPosition; + + setSeparatorYPosition(e.clientY); + if (newTopHeight < MIN_HEIGHT_TOP) { + setTopHeight(MIN_HEIGHT_TOP); + return; + } + if (splitPaneRef.current) { + const splitPaneHeight = splitPaneRef.current.clientHeight; + + if (newTopHeight > splitPaneHeight - MIN_HEIGHT_BOTTOM) { + setTopHeight(splitPaneHeight - MIN_HEIGHT_BOTTOM); + return; + } + } + setTopHeight(newTopHeight); + } + }; + useEffect(() => { + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mouseup', onMouseUp); + + return () => { + document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('mouseup', onMouseUp); + }; + }); + + const onMouseUp = () => { + setDragging(false); + }; + + return ( + + {!disableTop && ( + + {top} + + + )} + {bottom} + + ); +}; diff --git a/ts/components/session/calling/CallInFullScreenContainer.tsx b/ts/components/session/calling/CallInFullScreenContainer.tsx index 99b6f628a..a38f4040a 100644 --- a/ts/components/session/calling/CallInFullScreenContainer.tsx +++ b/ts/components/session/calling/CallInFullScreenContainer.tsx @@ -6,9 +6,7 @@ import { useVideoCallEventsListener } from '../../../hooks/useVideoEventListener import { setFullScreenCall } from '../../../state/ducks/conversations'; import { getCallIsInFullScreen, - getHasOngoingCall, - getHasOngoingCallWithPubkey, - getSelectedConversationKey, + getHasOngoingCallWithFocusedConvo, } from '../../../state/selectors/conversations'; import { StyledVideoElement } from './DraggableCallContainer'; @@ -28,9 +26,7 @@ const CallInFullScreenVisible = styled.div` export const CallInFullScreenContainer = () => { const dispatch = useDispatch(); - const ongoingCallPubkey = useSelector(getHasOngoingCallWithPubkey); - const selectedConversationKey = useSelector(getSelectedConversationKey); - const hasOngoingCall = useSelector(getHasOngoingCall); + const ongoingCallWithFocused = useSelector(getHasOngoingCallWithFocusedConvo); const hasOngoingCallFullScreen = useSelector(getCallIsInFullScreen); const { remoteStream, remoteStreamVideoIsMuted } = useVideoCallEventsListener( @@ -55,12 +51,7 @@ export const CallInFullScreenContainer = () => { } }, [remoteStreamVideoIsMuted]); - if ( - !hasOngoingCall || - !ongoingCallPubkey || - !hasOngoingCallFullScreen || - selectedConversationKey !== ongoingCallPubkey - ) { + if (!ongoingCallWithFocused || !hasOngoingCallFullScreen) { return null; } diff --git a/ts/components/session/calling/InConversationCallContainer.tsx b/ts/components/session/calling/InConversationCallContainer.tsx index e4903b68f..1149c6f0d 100644 --- a/ts/components/session/calling/InConversationCallContainer.tsx +++ b/ts/components/session/calling/InConversationCallContainer.tsx @@ -5,10 +5,9 @@ import styled from 'styled-components'; import _ from 'underscore'; import { CallManager, ToastUtils, UserUtils } from '../../../session/utils'; import { - getHasOngoingCall, getHasOngoingCallWith, + getHasOngoingCallWithFocusedConvo, getHasOngoingCallWithPubkey, - getSelectedConversationKey, } from '../../../state/selectors/conversations'; import { SessionIconButton } from '../icon'; import { animation, contextMenu, Item, Menu } from 'react-contexify'; @@ -32,11 +31,11 @@ const VideoContainer = styled.div` const InConvoCallWindow = styled.div` padding: 1rem; display: flex; - height: 50%; + /* height: 50%; */ background-color: hsl(0, 0%, 15.7%); - flex-shrink: 0; + flex-shrink: 1; min-height: 200px; align-items: center; `; @@ -248,10 +247,9 @@ const handleMicrophoneToggle = async ( // tslint:disable-next-line: max-func-body-length export const InConversationCallContainer = () => { const ongoingCallProps = useSelector(getHasOngoingCallWith); - const selectedConversationKey = useSelector(getSelectedConversationKey); - const hasOngoingCall = useSelector(getHasOngoingCall); const ongoingCallPubkey = useSelector(getHasOngoingCallWithPubkey); + const ongoingCallWithFocused = useSelector(getHasOngoingCallWithFocusedConvo); const ongoingCallUsername = ongoingCallProps?.profileName || ongoingCallProps?.name; const videoRefRemote = useRef(null); const videoRefLocal = useRef(null); @@ -278,7 +276,7 @@ export const InConversationCallContainer = () => { videoRefLocal.current.srcObject = localStream; } - if (!hasOngoingCall || !ongoingCallProps || ongoingCallPubkey !== selectedConversationKey) { + if (!ongoingCallWithFocused) { return null; } diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index 4313f243e..7f9640f70 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -14,7 +14,6 @@ import { AttachmentUtil, GoogleChrome } from '../../../util'; import { ConversationHeaderWithDetails } from '../../conversation/ConversationHeader'; import { SessionRightPanelWithDetails } from './SessionRightPanel'; import { SessionTheme } from '../../../state/ducks/SessionTheme'; -import styled from 'styled-components'; import { SessionMessagesListContainer } from './SessionMessagesListContainer'; import { LightboxGallery, MediaItemType } from '../../LightboxGallery'; @@ -34,16 +33,11 @@ import { MessageDetail } from '../../conversation/MessageDetail'; import { getConversationController } from '../../../session/conversations'; import { getPubkeysInPublicConversation } from '../../../data/data'; import autoBind from 'auto-bind'; -import { useSelector } from 'react-redux'; -import { - getFirstUnreadMessageId, - isFirstUnreadMessageIdAbove, -} from '../../../state/selectors/conversations'; - import { SessionButtonColor } from '../SessionButton'; import { updateConfirmModal } from '../../../state/ducks/modalDialog'; import { addStagedAttachmentsInConversation } from '../../../state/ducks/stagedAttachments'; import { InConversationCallContainer } from '../calling/InConversationCallContainer'; +import { SplitViewContainer } from '../SplitViewContainer'; interface State { showRecordingView: boolean; @@ -62,6 +56,7 @@ interface Props { selectedMessages: Array; showMessageDetails: boolean; isRightPanelShowing: boolean; + hasOngoingCallWithFocusedConvo: boolean; // lightbox options lightBoxOptions?: LightBoxOptions; @@ -69,30 +64,6 @@ interface Props { stagedAttachments: Array; } -const SessionUnreadAboveIndicator = styled.div` - position: sticky; - top: 0; - margin: 1em; - display: flex; - justify-content: center; - background: var(--color-sent-message-background); - color: var(--color-sent-message-text); -`; - -const UnreadAboveIndicator = () => { - const isFirstUnreadAbove = useSelector(isFirstUnreadMessageIdAbove); - const firstUnreadMessageId = useSelector(getFirstUnreadMessageId) as string; - - if (!isFirstUnreadAbove) { - return null; - } - return ( - - {window.i18n('latestUnreadIsAbove')} - - ); -}; - export class SessionConversation extends React.Component { private readonly messageContainerRef: React.RefObject; private dragCounter: number; @@ -227,7 +198,7 @@ export class SessionConversation extends React.Component { // ~~~~~~~~~~~~~~ RENDER METHODS ~~~~~~~~~~~~~~ // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ public render() { - const { showRecordingView, isDraggingFile } = this.state; + const { isDraggingFile } = this.state; const { selectedConversation, @@ -264,12 +235,14 @@ export class SessionConversation extends React.Component { {lightBoxOptions?.media && this.renderLightBox(lightBoxOptions)}
- - - - + } + bottom={ + + } + disableTop={!this.props.hasOngoingCallWithFocusedConvo} + /> - {showRecordingView &&
} {isDraggingFile && }
diff --git a/ts/components/session/conversation/SessionMessagesListContainer.tsx b/ts/components/session/conversation/SessionMessagesListContainer.tsx index fc12d0a97..d5dee18bc 100644 --- a/ts/components/session/conversation/SessionMessagesListContainer.tsx +++ b/ts/components/session/conversation/SessionMessagesListContainer.tsx @@ -18,7 +18,7 @@ import { getMessagesBySentAt } from '../../../data/data'; import autoBind from 'auto-bind'; import { ConversationTypeEnum } from '../../../models/conversation'; import { StateType } from '../../../state/reducer'; -import { connect } from 'react-redux'; +import { connect, useSelector } from 'react-redux'; import { getFirstUnreadMessageId, getQuotedMessageToAnimate, @@ -26,13 +26,39 @@ import { getSelectedConversationKey, getShowScrollButton, getSortedMessagesOfSelectedConversation, + isFirstUnreadMessageIdAbove, } from '../../../state/selectors/conversations'; import { SessionMessagesList } from './SessionMessagesList'; +import styled from 'styled-components'; export type SessionMessageListProps = { messageContainerRef: React.RefObject; }; +const SessionUnreadAboveIndicator = styled.div` + position: sticky; + top: 0; + margin: 1em; + display: flex; + justify-content: center; + background: var(--color-sent-message-background); + color: var(--color-sent-message-text); +`; + +const UnreadAboveIndicator = () => { + const isFirstUnreadAbove = useSelector(isFirstUnreadMessageIdAbove); + const firstUnreadMessageId = useSelector(getFirstUnreadMessageId) as string; + + if (!isFirstUnreadAbove) { + return null; + } + return ( + + {window.i18n('latestUnreadIsAbove')} + + ); +}; + type Props = SessionMessageListProps & { conversationKey?: string; messagesProps: Array; @@ -139,6 +165,8 @@ class SessionMessagesListContainerInner extends React.Component { onScroll={this.handleScroll} ref={this.props.messageContainerRef} > + + withConvo?.id ); +export const getHasOngoingCallWithFocusedConvo = createSelector( + getHasOngoingCallWithPubkey, + getSelectedConversationKey, + (withPubkey, selectedPubkey) => { + return withPubkey && withPubkey === selectedPubkey; + } +); + +export const getHasOngoingCallWithNonFocusedConvo = createSelector( + getHasOngoingCallWithPubkey, + getSelectedConversationKey, + (withPubkey, selectedPubkey) => { + return withPubkey && withPubkey !== selectedPubkey; + } +); + export const getCallIsInFullScreen = createSelector( getConversations, (state: ConversationsStateType): boolean => state.callIsInFullScreen diff --git a/ts/state/smart/SessionConversation.ts b/ts/state/smart/SessionConversation.ts index 7a70a74b9..03cc046ff 100644 --- a/ts/state/smart/SessionConversation.ts +++ b/ts/state/smart/SessionConversation.ts @@ -4,6 +4,7 @@ import { SessionConversation } from '../../components/session/conversation/Sessi import { StateType } from '../reducer'; import { getTheme } from '../selectors/theme'; import { + getHasOngoingCallWithFocusedConvo, getLightBoxOptions, getSelectedConversation, getSelectedConversationKey, @@ -27,6 +28,7 @@ const mapStateToProps = (state: StateType) => { selectedMessages: getSelectedMessageIds(state), lightBoxOptions: getLightBoxOptions(state), stagedAttachments: getStagedAttachmentsForCurrentConversation(state), + hasOngoingCallWithFocusedConvo: getHasOngoingCallWithFocusedConvo(state), }; };