mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-21 20:28:15 +03:00
Code Issues Projects Releases Packages Wiki Activity

Address chat modal button issues (#3042)

Browse source 
* don't display chat button or modal if isModal is true. dont display the show/hide chat option in the userdropedown for tablet sizes either. tweak chat button styles and make chat button bg the same as the chat component bg color.

* only show chat button if online

* fix(chat): chat should be available through 5min buffer period. Fixes #3044

* fix(test): update mobile test

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
This commit is contained in:
gingervitis 2023-05-23 16:32:35 -07:00 committed by GitHub
parent b6aee0eda9
commit 29041e6d76
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
test/automated/browser/cypress/e2e/online/06_online_mobile_live.cy.js
View file

@ -29,6 +29,10 @@ filterTests(['mobile'], () => {
cy.get('#chat-input').should('be.visible'); cy.get('#chat-input').should('be.visible');
}); });
it('Chat user menu should be visible', () => {
cy.get('#chat-modal-user-menu').should('be.visible');
});
it('Click on user menu', () => { it('Click on user menu', () => {
cy.get('#chat-modal-user-menu').click(); cy.get('#chat-modal-user-menu').click();
}); });

2
web/components/common/UserDropdown/UserDropdown.module.scss
View file

@ -27,7 +27,7 @@
} }
.chatToggle { .chatToggle {
@include screen(mobile) { @include screen(tablet) {
display: none; display: none;
} }
} }

7
web/components/ui/Content/Content.module.scss
View file

@ -110,6 +110,11 @@
width: 100px; width: 100px;
height: 40px; height: 40px;
bottom: 40px; bottom: 40px;
right: 10px; right: var(--content-padding);
font-weight: 600; font-weight: 600;
font-size: 1em;
z-index: 99;
background-color: var(--theme-color-components-chat-background);
border-width: 0;
box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 20%);
} }

11
web/components/ui/Content/Content.tsx
View file

@ -17,6 +17,7 @@ import {
isOnlineSelector, isOnlineSelector,
isMobileAtom, isMobileAtom,
serverStatusState, serverStatusState,
isChatAvailableSelector,
} from '../../stores/ClientConfigStore'; } from '../../stores/ClientConfigStore';
import { ClientConfig } from '../../../interfaces/client-config.model'; import { ClientConfig } from '../../../interfaces/client-config.model';
@ -97,6 +98,7 @@ export const Content: FC = () => {
const [isMobile, setIsMobile] = useRecoilState<boolean | undefined>(isMobileAtom); const [isMobile, setIsMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom); const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
const online = useRecoilValue<boolean>(isOnlineSelector); const online = useRecoilValue<boolean>(isOnlineSelector);
const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
const { viewerCount, lastConnectTime, lastDisconnectTime, streamTitle } = const { viewerCount, lastConnectTime, lastDisconnectTime, streamTitle } =
useRecoilValue<ServerStatus>(serverStatusState); useRecoilValue<ServerStatus>(serverStatusState);
@ -180,7 +182,7 @@ export const Content: FC = () => {
setSupportsBrowserNotifications(isPushNotificationSupported() && browserNotificationsEnabled); setSupportsBrowserNotifications(isPushNotificationSupported() && browserNotificationsEnabled);
}, [browserNotificationsEnabled]); }, [browserNotificationsEnabled]);
const showChat = online && !chatDisabled && isChatVisible; const showChat = isChatAvailable && !chatDisabled && isChatVisible;
// accounts for sidebar width when online in desktop // accounts for sidebar width when online in desktop
const dynamicPadding = showChat && !isMobile ? '320px' : '0px'; const dynamicPadding = showChat && !isMobile ? '320px' : '0px';
@ -303,22 +305,21 @@ export const Content: FC = () => {
handleClose={() => setShowFollowModal(false)} handleClose={() => setShowFollowModal(false)}
/> />
</Modal> </Modal>
{showChatModal && isChatVisible && ( {isMobile && showChatModal && isChatVisible && (
<ChatModal <ChatModal
messages={messages} messages={messages}
currentUser={currentUser} currentUser={currentUser}
handleClose={() => setShowChatModal(false)} handleClose={() => setShowChatModal(false)}
/> />
)} )}
{isChatVisible && ( {isMobile && isChatAvailable && (
<Button <Button
id="mobile-chat-button" id="mobile-chat-button"
type="primary" type="primary"
onClick={() => setShowChatModal(true)} onClick={() => setShowChatModal(true)}
className={styles.floatingMobileChatModalButton} className={styles.floatingMobileChatModalButton}
style={{ zIndex: 99 }}
> >
Chat <MessageFilled style={{ transform: 'translateX(-1px)' }} /> Chat <MessageFilled />
</Button> </Button>
)} )}
</> </>