Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prettified Code!

Browse Source
This commit is contained in:
gabek 2022-04-21 05:21:35 +00:00 committed by GitHub Action
parent cbe469ef87
commit dad9e0d16b
10 changed files with 150 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
webroot/js/app.js
View File

@ -10,7 +10,7 @@ import UsernameForm from './components/chat/username.js';
import VideoPoster from './components/video-poster.js';
import Followers from './components/federation/followers.js';
import Chat from './components/chat/chat.js';
import { ChatMenu } from './components/chat/chat-menu.js'
import { ChatMenu } from './components/chat/chat-menu.js';
import Websocket, {
CALLBACKS,
SOCKET_MESSAGE_TYPES,
@ -945,7 +945,13 @@ export default class App extends Component {
id="user-options-container"
class="flex flex-row justify-end items-center flex-no-wrap"
> -->
<${ChatMenu} username=${username} isModerator=${false} onUsernameChange=${this.handleUsernameChange} onFocus=${this.handleFormFocus} onBlur=${this.handleFormBlur} chatDisabled=${chatDisabled} noVideoContent=${noVideoContent} handleChatPanelToggle=${this.handleChatPanelToggle}>
<${ChatMenu} username=${username} isModerator=${false} onUsernameChange=${
this.handleUsernameChange
} onFocus=${this.handleFormFocus} onBlur=${
this.handleFormBlur
} chatDisabled=${chatDisabled} noVideoContent=${noVideoContent} handleChatPanelToggle=${
this.handleChatPanelToggle
}>
</${ChatMenu}>
<!--
</div>

122
webroot/js/components/chat/chat-menu.js
View File

@ -1,29 +1,38 @@
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'
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" />
`;
<img src="/img/moderator-nobackground.svg" class="moderator-flag" />
`;
const Context = createContext()
const Context = createContext();
export const ChatMenu = (props) => {
const { username, isModerator, chatDisabled, noVideoContent, handleChatPanelToggle, onUsernameChange, onFocus, onBlur } = props
const {
username,
isModerator,
chatDisabled,
noVideoContent,
handleChatPanelToggle,
onUsernameChange,
onFocus,
onBlur,
} = props;
const [chatMenuOpen, setChatMenuOpen] = useState(false);
const [view, setView] = useState('main')
const [view, setView] = useState('main');
const chatMenuRef = useRef(undefined)
closeOnOutsideClick(chatMenuRef, setChatMenuOpen)
const chatMenuRef = useRef(undefined);
closeOnOutsideClick(chatMenuRef, setChatMenuOpen);
useEffect(() => {
if (chatMenuOpen) setView('main')
}, [chatMenuOpen])
if (chatMenuOpen) setView('main');
}, [chatMenuOpen]);
return html`
<${Context.Provider} value=${props}>
@ -33,23 +42,29 @@ export const ChatMenu = (props) => {
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}
${
!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'}"
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">
${
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}
@ -60,52 +75,55 @@ export const ChatMenu = (props) => {
/>
</li>
<li>
<button
type="button"
id="chat-toggle"
onClick=${handleChatPanelToggle}
style=${{
display: chatDisabled || noVideoContent ? 'none' : 'flex',
}}
>
<span>Toggle Chat</span>
<span><${ChatIcon} /></span>
</button>
<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>`}
${view != 'main' &&
html`<${SubMenuView} view=${view} setView=${setView} />`}
</div>`
}
</div>
</${Context.Provider}>`
</${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>
`
}
<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)
setter(undefined);
}
}
document.addEventListener("mousedown", handleClickOutside);
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener('mousedown', handleClickOutside);
};
}, [ref]);
}

12
webroot/js/components/chat/username.js
View File

@ -8,7 +8,7 @@ import {
KEY_CUSTOM_USERNAME_SET,
} from '../../utils/constants.js';
import { CheckIcon, CloseIcon, EditIcon } from '../icons/index.js'
import { CheckIcon, CloseIcon, EditIcon } from '../icons/index.js';
export default class UsernameForm extends Component {
constructor(props, context) {
@ -113,11 +113,13 @@ export default class UsernameForm extends Component {
>
<span id="username-display">Change Username</span>
<span><${EditIcon} /></span>
</button>
</button>
<div
id="user-info-change"
class="${displayForm ? 'flex' : 'hidden'} flex-row flex-no-wrap h-full items-center justify-end"
class="${displayForm
? 'flex'
: 'hidden'} flex-row flex-no-wrap h-full items-center justify-end"
>
<input
type="text"
@ -137,7 +139,7 @@ export default class UsernameForm extends Component {
type="button"
class="bg-purple-500 hover:bg-purple-700 text-white uppercase p-1 ml-1 rounded-md cursor-pointer transition duration-100 user-btn"
>
<${CheckIcon } />
<${CheckIcon} />
</button>
<button
@ -147,7 +149,7 @@ export default class UsernameForm extends Component {
class="bg-gray-700 hover:bg-gray-500 text-white uppercase p-1 ml-1 rounded-md cursor-pointer transition duration-100 user-btn"
title="cancel"
>
<${CloseIcon} />
<${CloseIcon} />
</button>
</div>
</div>

23
webroot/js/components/icons/CaretDownIcon.js
View File

@ -2,12 +2,17 @@ import { h } from '/js/web_modules/preact.js';
import htm from '/js/web_modules/htm.js';
const html = htm.bind(h);
export const CaretDownIcon = ({ className = "w-6 h-6"}) => {
return html`<svg class="${className}"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd">
</path>
</svg>`
}
export const CaretDownIcon = ({ className = 'w-6 h-6' }) => {
return html`<svg
class="${className}"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>`;
};

13
webroot/js/components/icons/ChatIcon.js
View File

@ -6,10 +6,15 @@ export const ChatIcon = ({ className = 'w-6 h-6' }) => {
return html`
<svg
className="${className}"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z" clip-rule="evenodd"></path>
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z"
clip-rule="evenodd"
></path>
</svg>
`;
};

22
webroot/js/components/icons/CheckIcon.js
View File

@ -3,12 +3,18 @@ import htm from '/js/web_modules/htm.js';
const html = htm.bind(h);
export const CheckIcon = ({ className = 'w-6 h-6' }) => {
return html`<svg
class="${className}"
return html`<svg
class="${className}"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>`
}
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
></path>
</svg>`;
};

22
webroot/js/components/icons/CloseIcon.js
View File

@ -1,14 +1,18 @@
import { h } from '/js/web_modules/preact.js';
import htm from '/js/web_modules/htm.js';
const html = htm.bind(h);
export const CloseIcon = ({ className = 'w-6 h-6' }) => {
return html`<svg
class="${className}"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>`
}
return html`<svg
class="${className}"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>`;
};

16
webroot/js/components/icons/EditIcon.js
View File

@ -1,14 +1,16 @@
import { h } from '/js/web_modules/preact.js';
import htm from '/js/web_modules/htm.js';
const html = htm.bind(h);
export const EditIcon = ({ className = 'w-6 h-6' }) => {
return html`<svg class="${className}"
fill="currentColor"
viewBox="0 0 20 20"
return html`<svg
class="${className}"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
</svg>`
}
<path
d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
></path>
</svg>`;
};

1
webroot/js/components/icons/UserIcon.js
View File

@ -1,4 +1,3 @@
import { h } from '/js/web_modules/preact.js';
import htm from '/js/web_modules/htm.js';
const html = htm.bind(h);

12
webroot/js/components/icons/index.js
View File

@ -1,6 +1,6 @@
export { ChatIcon } from "./ChatIcon.js"
export { UserIcon } from "./UserIcon.js"
export { EditIcon } from "./EditIcon.js"
export { CheckIcon } from "./CheckIcon.js"
export { CloseIcon } from "./CloseIcon.js"
export { CaretDownIcon } from "./CaretDownIcon.js"
export { ChatIcon } from './ChatIcon.js';
export { UserIcon } from './UserIcon.js';
export { EditIcon } from './EditIcon.js';
export { CheckIcon } from './CheckIcon.js';
export { CloseIcon } from './CloseIcon.js';
export { CaretDownIcon } from './CaretDownIcon.js';