LogalDeveloper/owncast
0
Fork 0
Code Activity

Refactor mobile chat into modal (#3038)

Browse Source 
* feat(mobile): refactor mobile chat into modal

- Make page always scrollable
- Move mobile chat into a standalone modal

* fix(test): split out mobile browser test specs

* fix(mobile): force chat button to render on top of footer

* fix: some small updates from review

* fix: hide/show hide chat menu option based on width

* fix: chat button icon getting cut off

* chore(tests): add browser tests for mobile chat modal

* chore(tests): add story for ChatModal component

* fix(test): quiet shellcheck

* fix: remove unused import

* fix(tests): silence storybook linting warning

* fix(ui): reposition chat modal button icon with transform
This commit is contained in:
Gabe Kangas
2023-05-22 18:56:44 -07:00
committed by GitHub
parent b9b569f3fe
commit 69f217f758
21 changed files with 945 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
web/components/ui/Header/Header.tsx
View File

@@ -1,5 +1,5 @@
import { Tooltip, Avatar } from 'antd';
import { FC } from 'react';
import { FC, useEffect, useState } from 'react';
import cn from 'classnames';
import dynamic from 'next/dynamic';
import Link from 'next/link';
@@ -21,41 +21,51 @@ export type HeaderComponentProps = {
online: boolean;
};
export const Header: FC<HeaderComponentProps> = ({ name, chatAvailable, chatDisabled, online }) => (
<header className={cn([`${styles.header}`], 'global-header')}>
{online ? (
<Link href="#player" className={styles.skipLink}>
Skip to player
export const Header: FC<HeaderComponentProps> = ({ name, chatAvailable, chatDisabled, online }) => {
const [canHideChat, setCanHideChat] = useState(false);
useEffect(() => {
setCanHideChat(window.innerWidth >= 768);
}, []);
return (
<header className={cn([`${styles.header}`], 'global-header')}>
{online ? (
<Link href="#player" className={styles.skipLink}>
Skip to player
</Link>
) : (
<Link href="#offline-message" className={styles.skipLink}>
Skip to offline message
</Link>
)}
<Link href="#skip-to-content" className={styles.skipLink}>
Skip to page content
</Link>
) : (
<Link href="#offline-message" className={styles.skipLink}>
Skip to offline message
<Link href="#footer" className={styles.skipLink}>
Skip to footer
</Link>
)}
<Link href="#skip-to-content" className={styles.skipLink}>
Skip to page content
</Link>
<Link href="#footer" className={styles.skipLink}>
Skip to footer
</Link>
<div className={styles.logo}>
<div id="header-logo" className={styles.logoImage}>
<Avatar src="/logo" size="large" shape="circle" className={styles.avatar} />
<div className={styles.logo}>
<div id="header-logo" className={styles.logoImage}>
<Avatar src="/logo" size="large" shape="circle" className={styles.avatar} />
</div>
<h1 className={styles.title} id="global-header-text">
{name}
</h1>
</div>
<h1 className={styles.title} id="global-header-text">
{name}
</h1>
</div>
{chatAvailable && !chatDisabled && <UserDropdown />}
{!chatAvailable && !chatDisabled && (
<Tooltip
overlayClassName={styles.toolTip}
title="Chat will be available when the stream is live."
placement="left"
>
<span className={styles.chatOfflineText}>Chat is offline</span>
</Tooltip>
)}
</header>
);
{chatAvailable && !chatDisabled && (
<UserDropdown id="user-menu" hideTitleOnMobile showToggleChatOption={canHideChat} />
)}
{!chatAvailable && !chatDisabled && (
<Tooltip
overlayClassName={styles.toolTip}
title="Chat will be available when the stream is live."
placement="left"
>
<span className={styles.chatOfflineText}>Chat is offline</span>
</Tooltip>
)}
</header>
);
};
export default Header;