pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Prettified Code!

pull/1845/head
gabek 4 years ago committed by GitHub Action
parent
cbe469ef87
commit
dad9e0d16b
10 changed files with 150 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      webroot/js/app.js
  2. 122
      webroot/js/components/chat/chat-menu.js
  3. 12
      webroot/js/components/chat/username.js
  4. 23
      webroot/js/components/icons/CaretDownIcon.js
  5. 13
      webroot/js/components/icons/ChatIcon.js
  6. 22
      webroot/js/components/icons/CheckIcon.js
  7. 22
      webroot/js/components/icons/CloseIcon.js
  8. 16
      webroot/js/components/icons/EditIcon.js
  9. 1
      webroot/js/components/icons/UserIcon.js
  10. 12
      webroot/js/components/icons/index.js

10
webroot/js/app.js
Unescape 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
Unescape 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]);
} }

12
webroot/js/components/chat/username.js
Unescape 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) {
@ -113,11 +113,13 @@ export default class UsernameForm extends Component {
> >
<span id="username-display">Change Username</span> <span id="username-display">Change Username</span>
<span><${EditIcon} /></span> <span><${EditIcon} /></span>
</button> </button>
<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
@ -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" 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" title="cancel"
> >
<${CloseIcon} /> <${CloseIcon} />
</button> </button>
</div> </div>
</div> </div>

23
webroot/js/components/icons/CaretDownIcon.js
Unescape 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>`;
};

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

@ -6,10 +6,15 @@ export const ChatIcon = ({ className = 'w-6 h-6' }) => {
return html` return html`
<svg <svg
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>
`; `;
}; };

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

@ -3,12 +3,18 @@ import htm from '/js/web_modules/htm.js';
const html = htm.bind(h); const html = htm.bind(h);
export const CheckIcon = ({ className = 'w-6 h-6' }) => { export const CheckIcon = ({ className = 'w-6 h-6' }) => {
return html`<svg return html`<svg
class="${className}" class="${className}"
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>`;
};

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

@ -1,14 +1,18 @@
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 CloseIcon = ({ className = 'w-6 h-6' }) => { export const CloseIcon = ({ className = 'w-6 h-6' }) => {
return html`<svg return html`<svg
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>`;
};

16
webroot/js/components/icons/EditIcon.js
Unescape 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
fill="currentColor" class="${className}"
viewBox="0 0 20 20" fill="currentColor"
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
Unescape 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
Unescape 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';

Write Preview
Loading…
Cancel
Save