2022-04-21 08:21:02 +03:00
|
|
|
import { h, createContext } from '/js/web_modules/preact.js';
|
|
|
|
import htm from '/js/web_modules/htm.js';
|
|
|
|
import { useState, useEffect, useRef } from '/js/web_modules/preact/hooks.js';
|
2022-04-21 08:21:35 +03:00
|
|
|
import UsernameForm from './username.js';
|
2022-04-26 01:34:19 +03:00
|
|
|
import { ChatIcon, UserIcon, CaretDownIcon, AuthIcon } from '../icons/index.js';
|
2022-04-21 08:21:02 +03:00
|
|
|
|
|
|
|
const html = htm.bind(h);
|
|
|
|
|
|
|
|
const moderatorFlag = html`
|
2022-04-21 08:21:35 +03:00
|
|
|
<img src="/img/moderator-nobackground.svg" class="moderator-flag" />
|
|
|
|
`;
|
2022-04-21 08:21:02 +03:00
|
|
|
|
2022-04-21 08:21:35 +03:00
|
|
|
const Context = createContext();
|
2022-04-21 08:21:02 +03:00
|
|
|
|
|
|
|
export const ChatMenu = (props) => {
|
2022-04-21 08:21:35 +03:00
|
|
|
const {
|
|
|
|
username,
|
|
|
|
isModerator,
|
|
|
|
chatDisabled,
|
|
|
|
noVideoContent,
|
|
|
|
handleChatPanelToggle,
|
|
|
|
onUsernameChange,
|
2022-04-22 00:55:26 +03:00
|
|
|
showAuthModal,
|
2022-04-21 08:21:35 +03:00
|
|
|
onFocus,
|
|
|
|
onBlur,
|
|
|
|
} = props;
|
2022-04-21 08:21:02 +03:00
|
|
|
|
|
|
|
const [chatMenuOpen, setChatMenuOpen] = useState(false);
|
2022-04-21 08:21:35 +03:00
|
|
|
const [view, setView] = useState('main');
|
2022-04-21 08:21:02 +03:00
|
|
|
|
2022-04-21 08:21:35 +03:00
|
|
|
const chatMenuRef = useRef(undefined);
|
|
|
|
closeOnOutsideClick(chatMenuRef, setChatMenuOpen);
|
2022-04-21 08:21:02 +03:00
|
|
|
|
|
|
|
useEffect(() => {
|
2022-04-21 08:21:35 +03:00
|
|
|
if (chatMenuOpen) setView('main');
|
|
|
|
}, [chatMenuOpen]);
|
2022-04-21 08:21:02 +03:00
|
|
|
|
2022-04-22 00:55:26 +03:00
|
|
|
const authMenuItem =
|
|
|
|
showAuthModal &&
|
|
|
|
html`<li>
|
|
|
|
<button type="button" id="chat-auth" onClick=${showAuthModal}>
|
|
|
|
Authenticate
|
2022-04-26 01:34:19 +03:00
|
|
|
<span><${AuthIcon} /></span>
|
2022-04-22 00:55:26 +03:00
|
|
|
</button>
|
|
|
|
</li>`;
|
|
|
|
|
2022-04-21 08:21:02 +03:00
|
|
|
return html`
|
|
|
|
<${Context.Provider} value=${props}>
|
|
|
|
<div class="chat-menu p-2 relative shadow-lg" ref=${chatMenuRef}>
|
|
|
|
<button
|
|
|
|
id="chat-menu-button"
|
|
|
|
class="flex items-center p-1 bg-transparent rounded-md overflow-hidden text-gray-200 transition duration-150"
|
|
|
|
onClick="${() => setChatMenuOpen(!chatMenuOpen)}"
|
|
|
|
>
|
2022-04-21 08:21:35 +03:00
|
|
|
${
|
|
|
|
!isModerator
|
|
|
|
? html`<${UserIcon} className="w-6 h-6 mr-2" />`
|
|
|
|
: moderatorFlag
|
|
|
|
}
|
2022-04-21 08:21:02 +03:00
|
|
|
<span
|
|
|
|
id="username-display"
|
2022-04-21 08:21:35 +03:00
|
|
|
class="text-indigo-100 text-sm font-bold truncate overflow-hidden whitespace-no-wrap ${
|
|
|
|
isModerator && 'moderator-flag'
|
|
|
|
}"
|
2022-04-21 08:21:02 +03:00
|
|
|
>
|
|
|
|
${username}
|
|
|
|
</span>
|
2022-04-22 00:55:26 +03:00
|
|
|
<${CaretDownIcon} className="w-8 h-8"/>
|
2022-04-21 08:21:02 +03:00
|
|
|
</button>
|
2022-04-21 08:21:35 +03:00
|
|
|
${
|
|
|
|
chatMenuOpen &&
|
|
|
|
html` <div
|
|
|
|
class="chat-menu-popout shadow-2xl text-gray-100 absolute w-max top-full right-0 z-50 rounded-md p-2 bg-gray-900 fadeIn "
|
|
|
|
style=${{ minWidth: '20rem' }}
|
|
|
|
>
|
|
|
|
${view === 'main' &&
|
|
|
|
html`<ul class="chat-menu-options w-max">
|
2022-04-21 08:21:02 +03:00
|
|
|
<li>
|
|
|
|
<${UsernameForm}
|
|
|
|
username=${username}
|
|
|
|
isModerator=${isModerator}
|
|
|
|
onUsernameChange=${onUsernameChange}
|
|
|
|
onFocus=${onFocus}
|
|
|
|
onBlur=${onBlur}
|
|
|
|
/>
|
|
|
|
</li>
|
2022-04-22 00:55:26 +03:00
|
|
|
${authMenuItem}
|
2022-04-21 08:21:02 +03:00
|
|
|
<li>
|
2022-04-21 08:21:35 +03:00
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
id="chat-toggle"
|
|
|
|
onClick=${handleChatPanelToggle}
|
|
|
|
style=${{
|
|
|
|
display: chatDisabled || noVideoContent ? 'none' : 'flex',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<span>Toggle Chat</span>
|
|
|
|
<span><${ChatIcon} /></span>
|
|
|
|
</button>
|
2022-04-21 08:21:02 +03:00
|
|
|
</li>
|
|
|
|
</ul>`}
|
2022-04-21 08:21:35 +03:00
|
|
|
${view != 'main' &&
|
|
|
|
html`<${SubMenuView} view=${view} setView=${setView} />`}
|
|
|
|
</div>`
|
|
|
|
}
|
2022-04-21 08:21:02 +03:00
|
|
|
</div>
|
2022-04-21 08:21:35 +03:00
|
|
|
</${Context.Provider}>`;
|
2022-04-21 08:21:02 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
const SubMenuView = ({ view, setView }) => {
|
|
|
|
return html`
|
2022-04-21 08:21:35 +03:00
|
|
|
<div className=${`chat-view fadeInRight`}>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<button onClick=${() => setView('main')}>
|
|
|
|
<span
|
|
|
|
><${CaretDownIcon} className="w-6 h-6 transform rotate-90"
|
|
|
|
/></span>
|
|
|
|
<span>Back</span>
|
|
|
|
</button>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
${view === 'change_username' && html`<${ChangeUsernameView} />`}
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
};
|
2022-04-21 08:21:02 +03:00
|
|
|
|
|
|
|
function closeOnOutsideClick(ref, setter) {
|
|
|
|
useEffect(() => {
|
|
|
|
function handleClickOutside(event) {
|
|
|
|
if (ref.current && !ref.current.contains(event.target)) {
|
2022-04-21 08:21:35 +03:00
|
|
|
setter(undefined);
|
2022-04-21 08:21:02 +03:00
|
|
|
}
|
|
|
|
}
|
2022-04-21 08:21:35 +03:00
|
|
|
document.addEventListener('mousedown', handleClickOutside);
|
2022-04-21 08:21:02 +03:00
|
|
|
return () => {
|
2022-04-21 08:21:35 +03:00
|
|
|
document.removeEventListener('mousedown', handleClickOutside);
|
2022-04-21 08:21:02 +03:00
|
|
|
};
|
|
|
|
}, [ref]);
|
|
|
|
}
|