Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: chat count in landscape and fullscreen #2712

Merged
merged 3 commits into from
Mar 19, 2024
Merged

fix: chat count in landscape and fullscreen #2712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
76105c1
fix: chat count and fullscreen closing
amar-1995 Mar 17, 2024
75e9bce
fix: show chat icon on fullscreen mode
amar-1995 Mar 18, 2024
1aa5b42
fix: show chat count
amar-1995 Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/roomkit-react/src/Prebuilt/components/Footer/ChatToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane
// @ts-ignore: No implicit Any
import { SIDE_PANE_OPTIONS } from '../../common/constants';

export const ChatToggle = () => {
export const ChatToggle = ({ onClick }: { onClick?: () => void }) => {
const countUnreadMessages = useHMSStore(selectUnreadHMSMessagesCount);
const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
Expand All @@ -21,7 +21,7 @@ export const ChatToggle = () => {
}}
>
<Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
<IconButton onClick={toggleChat} active={!isChatOpen} data-testid="chat_btn">
<IconButton onClick={() => (onClick ? onClick() : toggleChat())} active={!isChatOpen} data-testid="chat_btn">
<ChatIcon />
</IconButton>
</Tooltip>
Expand Down
25 changes: 20 additions & 5 deletions packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ import { APP_DATA, EMOJI_REACTION_TYPE, POLL_STATE, POLL_VIEWS, SIDE_PANE_OPTION
let hlsPlayer;
const toastMap = {};

const ToggleChat = () => {
const ToggleChat = ({ isFullScreen = false }) => {
const { elements } = useRoomLayoutConferencingScreen();
const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
Expand All @@ -51,7 +51,10 @@ const ToggleChat = () => {
const hmsActions = useHMSActions();

useEffect(() => {
match({ sidepane, isMobile, showChat })
match({ sidepane, isMobile, showChat, isFullScreen })
.with({ isFullScreen: true }, () => {
hmsActions.setAppData(APP_DATA.sidePane, '');
})
.with({ isMobile: true, showChat: true, sidepane: P.when(value => !value) }, () => {
toggleChat();
})
Expand All @@ -61,12 +64,13 @@ const ToggleChat = () => {
.otherwise(() => {
//do nothing
});
}, [sidepane, isMobile, toggleChat, showChat, hmsActions]);
}, [sidepane, isMobile, toggleChat, showChat, hmsActions, isFullScreen]);
return null;
};
const HLSView = () => {
const videoRef = useRef(null);
const hlsViewRef = useRef();
const { elements } = useRoomLayoutConferencingScreen();
const hlsState = useHMSStore(selectHLSState);
const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
const notification = useHMSNotifications(HMSNotificationTypes.POLL_STOPPED);
Expand Down Expand Up @@ -97,6 +101,8 @@ const HLSView = () => {
const controlsTimerRef = useRef();
const [seekProgress, setSeekProgress] = useState(false);
const isFullScreenSupported = screenfull.isEnabled;
const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
const showChat = !!elements?.chat;

const isMobile = useMedia(config.media.md);
const isLandscape = useIsLandscape();
Expand Down Expand Up @@ -589,7 +595,16 @@ const HLSView = () => {
}}
>
<HMSVideoPlayer.Controls.Right>
{isLandscape && <ChatToggle />}
{(isLandscape || (isMobile && isFullScreen)) && showChat && (
<ChatToggle
onClick={() => {
if (isFullScreen) {
toggle();
raviteja83 marked this conversation as resolved.
Show resolved Hide resolved
}
toggleChat();
}}
/>
)}
{hasCaptions && !isHlsAutoplayBlocked && <HLSCaptionSelector isEnabled={isCaptionEnabled} />}
{hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? (
<HLSQualitySelector
Expand Down Expand Up @@ -711,7 +726,7 @@ const HLSView = () => {
</HMSVideoPlayer.Root>
</Flex>
</HMSPlayerContext.Provider>
<ToggleChat />
<ToggleChat isFullScreen={isFullScreen} />
{isMobile && !isFullScreen && <HLSViewTitle />}
</Flex>
);
Expand Down
Loading