owncast/webroot/js/components/chat/chat-menu.js

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';
import UsernameForm from './username.js'
import { ChatIcon, UserIcon, CaretDownIcon } from '../icons/index.js'

const html = htm.bind(h);

const moderatorFlag = html`
      <img src="/img/moderator-nobackground.svg" class="moderator-flag" />
    `;

const Context = createContext()

export const ChatMenu = (props) => {
  const { username, isModerator, chatDisabled, noVideoContent, handleChatPanelToggle, onUsernameChange, onFocus, onBlur } = props

  const [chatMenuOpen, setChatMenuOpen] = useState(false);
  const [view, setView] = useState('main')

  const chatMenuRef = useRef(undefined)
  closeOnOutsideClick(chatMenuRef, setChatMenuOpen)

  useEffect(() => {
    if (chatMenuOpen) setView('main')
  }, [chatMenuOpen])

  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)}"
      >
      ${!isModerator ? html`<${UserIcon} className="w-6 h-6 mr-2" />` : moderatorFlag}
      <span
        id="username-display"
        class="text-indigo-100 text-sm font-bold truncate overflow-hidden whitespace-no-wrap ${isModerator &&
    'moderator-flag'}"
      >
        ${username}
      </span>
       <${CaretDownIcon} className="w-8 h-8"/> 
      </button>
      ${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">
            <li>
              <${UsernameForm}
                username=${username}
                isModerator=${isModerator}
                onUsernameChange=${onUsernameChange}
                onFocus=${onFocus}
                onBlur=${onBlur}
              />
            </li>
            <li>
                <button
                  type="button"
                  id="chat-toggle"
                  onClick=${handleChatPanelToggle}
                  style=${{
          display: chatDisabled || noVideoContent ? 'none' : 'flex',
        }}
                >
                  <span>Toggle Chat</span>
                  <span><${ChatIcon} /></span>
                </button>
            </li>
          </ul>`}

        ${view != "main" && html`<${SubMenuView} view=${view} setView=${setView} />`}
      </div>`}
    </div>
  </${Context.Provider}>`
};

const SubMenuView = ({ view, setView }) => {
  return html`
  <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>
  `
}

function closeOnOutsideClick(ref, setter) {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        setter(undefined)
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
}