LogalDeveloper/owncast
0
Fork 0
Code Activity

Add support for disabling chat. Closes #472 (#799)

Browse Source
This commit is contained in:
Gabe Kangas
2021-03-14 11:46:27 -07:00
committed by GitHub
parent 40264bec8c
commit bf33d08384
8 changed files with 183 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
webroot/js/app.js
View File

@@ -8,7 +8,11 @@ import UsernameForm from './components/chat/username.js';
import VideoPoster from './components/video-poster.js';
import Chat from './components/chat/chat.js';
import Websocket from './utils/websocket.js';
import { parseSecondsToDurationString, hasTouchScreen, getOrientation } from './utils/helpers.js';
import {
parseSecondsToDurationString,
hasTouchScreen,
getOrientation,
} from './utils/helpers.js';
import {
addNewlines,
@@ -50,6 +54,7 @@ export default class App extends Component {
websocket: new Websocket(),
displayChat: chatStorage === null ? true : chatStorage,
chatInputEnabled: false, // chat input box state
chatDisabled: false,
username: getLocalStorage(KEY_USERNAME) || generateUsername(),
touchKeyboardActive: false,
@@ -195,12 +200,7 @@ export default class App extends Component {
if (!status) {
return;
}
const {
viewerCount,
online,
lastConnectTime,
streamTitle,
} = status;
const { viewerCount, online, lastConnectTime, streamTitle } = status;
this.lastDisconnectTime = status.lastDisconnectTime;
@@ -265,7 +265,9 @@ export default class App extends Component {
}
if (this.windowBlurred) {
document.title = ` 🔴 ${this.state.configData && this.state.configData.name}`;
document.title = ` 🔴 ${
this.state.configData && this.state.configData.name
}`;
}
}
@@ -289,7 +291,9 @@ export default class App extends Component {
});
if (this.windowBlurred) {
document.title = ` 🟢 ${this.state.configData && this.state.configData.name}`;
document.title = ` 🟢 ${
this.state.configData && this.state.configData.name
}`;
}
}
@@ -302,7 +306,6 @@ export default class App extends Component {
this.setState({
streamStatusMessage: `${MESSAGE_ONLINE} ${streamDurationString}`,
});
}
handleUsernameChange(newName) {
@@ -370,7 +373,7 @@ export default class App extends Component {
handleSpaceBarPressed(e) {
e.preventDefault();
if(this.state.isPlaying) {
if (this.state.isPlaying) {
this.setState({
isPlaying: false,
});
@@ -384,7 +387,11 @@ export default class App extends Component {
}
handleKeyPressed(e) {
if (e.code === 'Space' && e.target === document.body && this.state.streamOnline) {
if (
e.code === 'Space' &&
e.target === document.body &&
this.state.streamOnline
) {
this.handleSpaceBarPressed(e);
}
}
@@ -408,7 +415,6 @@ export default class App extends Component {
windowWidth,
} = state;
const {
version: appVersion,
logo = TEMP_IMAGE,
@@ -417,45 +423,52 @@ export default class App extends Component {
tags = [],
name,
extraPageContent,
chatDisabled,
} = configData;
const bgUserLogo = { backgroundImage: `url(${logo})` };
const tagList = (tags !== null && tags.length > 0)
? tags.map(
(tag, index) => html`
<li
key="tag${index}"
class="tag rounded-sm text-gray-100 bg-gray-700 text-xs uppercase mr-3 mb-2 p-2 whitespace-no-wrap"
>
${tag}
</li>
`
)
: null;
const tagList =
tags !== null && tags.length > 0
? tags.map(
(tag, index) => html`
<li
key="tag${index}"
class="tag rounded-sm text-gray-100 bg-gray-700 text-xs uppercase mr-3 mb-2 p-2 whitespace-no-wrap"
>
${tag}
</li>
`
)
: null;
const viewerCountMessage = streamOnline && viewerCount > 0 ? (
html`${viewerCount} ${pluralize('viewer', viewerCount)}`
) : null;
const viewerCountMessage =
streamOnline && viewerCount > 0
? html`${viewerCount} ${pluralize('viewer', viewerCount)}`
: null;
const mainClass = playerActive ? 'online' : '';
const isPortrait = this.hasTouchScreen && orientation === ORIENTATION_PORTRAIT;
const isPortrait =
this.hasTouchScreen && orientation === ORIENTATION_PORTRAIT;
const shortHeight = windowHeight <= HEIGHT_SHORT_WIDE && !isPortrait;
const singleColMode = windowWidth <= WIDTH_SINGLE_COL && !shortHeight;
const shouldDisplayChat = displayChat && !chatDisabled;
const usernameStyle = chatDisabled ? 'none' : 'flex';
const extraAppClasses = classNames({
chat: displayChat,
'no-chat': !displayChat,
chat: shouldDisplayChat,
'no-chat': !shouldDisplayChat,
'single-col': singleColMode,
'bg-gray-800': singleColMode && displayChat,
'bg-gray-800': singleColMode && shouldDisplayChat,
'short-wide': shortHeight && windowWidth > WIDTH_SINGLE_COL,
'touch-screen': this.hasTouchScreen,
'touch-keyboard-active': touchKeyboardActive,
});
const poster = isPlaying ? null : html`
<${VideoPoster} offlineImage=${logo} active=${streamOnline} />
`;
const poster = isPlaying
? null
: html` <${VideoPoster} offlineImage=${logo} active=${streamOnline} /> `;
return html`
<div
@@ -473,15 +486,20 @@ export default class App extends Component {
id="logo-container"
class="inline-block rounded-full bg-white w-8 min-w-8 min-h-8 h-8 mr-2 bg-no-repeat bg-center"
>
<img class="logo visually-hidden" src=${OWNCAST_LOGO_LOCAL} alt="owncast logo" />
<img
class="logo visually-hidden"
src=${OWNCAST_LOGO_LOCAL}
alt="owncast logo"
/>
</span>
<span class="instance-title overflow-hidden truncate"
>${(streamOnline && streamTitle) ? streamTitle : name}</span
>${streamOnline && streamTitle ? streamTitle : name}</span
>
</h1>
<div
id="user-options-container"
class="flex flex-row justify-end items-center flex-no-wrap"
style=${{ display: usernameStyle }}
>
<${UsernameForm}
username=${username}
@@ -538,9 +556,7 @@ export default class App extends Component {
class="user-content-header border-b border-gray-500 border-solid"
>
<h2 class="font-semibold text-5xl">
<span class="streamer-name text-indigo-600"
>${name}</span
>
<span class="streamer-name text-indigo-600">${name}</span>
</h2>
<h3 class="font-semibold text-3xl">
${streamOnline && streamTitle}
@@ -573,11 +589,10 @@ export default class App extends Component {
<${Chat}
websocket=${websocket}
username=${username}
chatInputEnabled=${chatInputEnabled}
chatInputEnabled=${chatInputEnabled && !chatDisabled}
instanceTitle=${name}
/>
</div>
`;
}
}