LogalDeveloper/owncast
0
Fork 0
Code 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
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 VideoPoster from './components/video-poster.js';
import Followers from './components/federation/followers.js'; import Followers from './components/federation/followers.js';
import Chat from './components/chat/chat.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, { import Websocket, {
CALLBACKS, CALLBACKS,
SOCKET_MESSAGE_TYPES, SOCKET_MESSAGE_TYPES,
@@ -945,7 +945,13 @@ export default class App extends Component {
id="user-options-container" id="user-options-container"
class="flex flex-row justify-end items-center flex-no-wrap" 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}> </${ChatMenu}>
<!-- <!--
</div> </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 { h, createContext } from '/js/web_modules/preact.js';
import htm from '/js/web_modules/htm.js'; import htm from '/js/web_modules/htm.js';
import { useState, useEffect, useRef } from '/js/web_modules/preact/hooks.js'; import { useState, useEffect, useRef } from '/js/web_modules/preact/hooks.js';
import UsernameForm from './username.js' import UsernameForm from './username.js';
import { ChatIcon, UserIcon, CaretDownIcon } from '../icons/index.js' import { ChatIcon, UserIcon, CaretDownIcon } from '../icons/index.js';
const html = htm.bind(h); const html = htm.bind(h);
const moderatorFlag = html` 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) => { 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 [chatMenuOpen, setChatMenuOpen] = useState(false);
const [view, setView] = useState('main') const [view, setView] = useState('main');
const chatMenuRef = useRef(undefined) const chatMenuRef = useRef(undefined);
closeOnOutsideClick(chatMenuRef, setChatMenuOpen) closeOnOutsideClick(chatMenuRef, setChatMenuOpen);
useEffect(() => { useEffect(() => {
if (chatMenuOpen) setView('main') if (chatMenuOpen) setView('main');
}, [chatMenuOpen]) }, [chatMenuOpen]);
return html` return html`
<${Context.Provider} value=${props}> <${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" class="flex items-center p-1 bg-transparent rounded-md overflow-hidden text-gray-200 transition duration-150"
onClick="${() => setChatMenuOpen(!chatMenuOpen)}" 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 <span
id="username-display" id="username-display"
class="text-indigo-100 text-sm font-bold truncate overflow-hidden whitespace-no-wrap ${isModerator && class="text-indigo-100 text-sm font-bold truncate overflow-hidden whitespace-no-wrap ${
'moderator-flag'}" isModerator && 'moderator-flag'
}"
> >
${username} ${username}
</span> </span>
<${CaretDownIcon} className="w-8 h-8"/> <${CaretDownIcon} className="w-8 h-8"/>
</button> </button>
${chatMenuOpen && html` ${
<div chatMenuOpen &&
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 " html` <div
style=${{ minWidth: '20rem' }} 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"> ${view === 'main' &&
html`<ul class="chat-menu-options w-max">
<li> <li>
<${UsernameForm} <${UsernameForm}
username=${username} username=${username}
@@ -60,52 +75,55 @@ export const ChatMenu = (props) => {
/> />
</li> </li>
<li> <li>
<button <button
type="button" type="button"
id="chat-toggle" id="chat-toggle"
onClick=${handleChatPanelToggle} onClick=${handleChatPanelToggle}
style=${{ style=${{
display: chatDisabled || noVideoContent ? 'none' : 'flex', display: chatDisabled || noVideoContent ? 'none' : 'flex',
}} }}
> >
<span>Toggle Chat</span> <span>Toggle Chat</span>
<span><${ChatIcon} /></span> <span><${ChatIcon} /></span>
</button> </button>
</li> </li>
</ul>`} </ul>`}
${view != 'main' &&
${view != "main" && html`<${SubMenuView} view=${view} setView=${setView} />`} html`<${SubMenuView} view=${view} setView=${setView} />`}
</div>`} </div>`
}
</div> </div>
</${Context.Provider}>` </${Context.Provider}>`;
}; };
const SubMenuView = ({ view, setView }) => { const SubMenuView = ({ view, setView }) => {
return html` return html`
<div className=${`chat-view fadeInRight`}> <div className=${`chat-view fadeInRight`}>
<ul> <ul>
<li> <li>
<button onClick=${() => setView('main')}> <button onClick=${() => setView('main')}>
<span><${CaretDownIcon} className="w-6 h-6 transform rotate-90"/></span> <span
<span>Back</span> ><${CaretDownIcon} className="w-6 h-6 transform rotate-90"
</button> /></span>
</li> <span>Back</span>
</ul> </button>
${view === 'change_username' && html`<${ChangeUsernameView} />`} </li>
</div> </ul>
` ${view === 'change_username' && html`<${ChangeUsernameView} />`}
} </div>
`;
};
function closeOnOutsideClick(ref, setter) { function closeOnOutsideClick(ref, setter) {
useEffect(() => { useEffect(() => {
function handleClickOutside(event) { function handleClickOutside(event) {
if (ref.current && !ref.current.contains(event.target)) { if (ref.current && !ref.current.contains(event.target)) {
setter(undefined) setter(undefined);
} }
} }
document.addEventListener("mousedown", handleClickOutside); document.addEventListener('mousedown', handleClickOutside);
return () => { return () => {
document.removeEventListener("mousedown", handleClickOutside); document.removeEventListener('mousedown', handleClickOutside);
}; };
}, [ref]); }, [ref]);
} }

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

@@ -8,7 +8,7 @@ import {
KEY_CUSTOM_USERNAME_SET, KEY_CUSTOM_USERNAME_SET,
} from '../../utils/constants.js'; } 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 { export default class UsernameForm extends Component {
constructor(props, context) { constructor(props, context) {
@@ -117,7 +117,9 @@ export default class UsernameForm extends Component {
<div <div
id="user-info-change" 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 <input
type="text" type="text"
@@ -137,7 +139,7 @@ export default class UsernameForm extends Component {
type="button" 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" 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>
<button <button

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'; import htm from '/js/web_modules/htm.js';
const html = htm.bind(h); const html = htm.bind(h);
export const CaretDownIcon = ({ className = "w-6 h-6"}) => { export const CaretDownIcon = ({ className = 'w-6 h-6' }) => {
return html`<svg class="${className}" return html`<svg
fill="currentColor" class="${className}"
viewBox="0 0 20 20" fill="currentColor"
xmlns="http://www.w3.org/2000/svg"> viewBox="0 0 20 20"
<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"> xmlns="http://www.w3.org/2000/svg"
</path> >
</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>`;
};

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

@@ -8,8 +8,13 @@ export const ChatIcon = ({ className = 'w-6 h-6' }) => {
className="${className}" className="${className}"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"> 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> >
<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> </svg>
`; `;
}; };

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

@@ -8,7 +8,13 @@ export const CheckIcon = ({ className = 'w-6 h-6' }) => {
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg"
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> >
</svg>` <path
} stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
></path>
</svg>`;
};

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

@@ -1,4 +1,3 @@
import { h } from '/js/web_modules/preact.js'; import { h } from '/js/web_modules/preact.js';
import htm from '/js/web_modules/htm.js'; import htm from '/js/web_modules/htm.js';
const html = htm.bind(h); const html = htm.bind(h);
@@ -8,7 +7,12 @@ export const CloseIcon = ({ className = 'w-6 h-6' }) => {
class="${className}" class="${className}"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"> 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>` <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>`;
};

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

@@ -1,14 +1,16 @@
import { h } from '/js/web_modules/preact.js'; import { h } from '/js/web_modules/preact.js';
import htm from '/js/web_modules/htm.js'; import htm from '/js/web_modules/htm.js';
const html = htm.bind(h); const html = htm.bind(h);
export const EditIcon = ({ className = 'w-6 h-6' }) => { export const EditIcon = ({ className = 'w-6 h-6' }) => {
return html`<svg class="${className}" return html`<svg
class="${className}"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" 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> <path
</svg>` 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 { h } from '/js/web_modules/preact.js';
import htm from '/js/web_modules/htm.js'; import htm from '/js/web_modules/htm.js';
const html = htm.bind(h); const html = htm.bind(h);

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

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