LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

fix responsive styles

Browse Source
This commit is contained in:
Ginger Wong 2020-08-24 03:30:42 -07:00
parent 0b1f9db4ed
commit 2a02b75e42
9 changed files with 192 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
webroot/index.html
View File

@ -1,10 +1,3 @@
<!--
todo
- fix / consolidate responsive styles
- standalone video.html
-->
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -36,10 +29,10 @@
<!-- markdown renderer --> <!-- markdown renderer -->
<script src="//unpkg.com/showdown/dist/showdown.min.js"></script> <script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
<link href="./styles/app.css" rel="stylesheet" />
<link href="./styles/video.css" rel="stylesheet" /> <link href="./styles/video.css" rel="stylesheet" />
<link href="./styles/chat.css" rel="stylesheet" /> <link href="./styles/chat.css" rel="stylesheet" />
<link href="./styles/user-content.css" rel="stylesheet" /> <link href="./styles/user-content.css" rel="stylesheet" />
<link href="./styles/app.css" rel="stylesheet" />
</head> </head>

92
webroot/js/app.js
View File

@ -9,27 +9,31 @@ import Chat from './components/chat/chat.js';
import Websocket from './utils/websocket.js'; import Websocket from './utils/websocket.js';
import { import {
getLocalStorage, addNewlines,
setLocalStorage, classNames,
clearLocalStorage, clearLocalStorage,
debounce,
generateAvatar, generateAvatar,
generateUsername, generateUsername,
addNewlines, getLocalStorage,
pluralize, pluralize,
setLocalStorage,
} from './utils/helpers.js'; } from './utils/helpers.js';
import { import {
URL_OWNCAST, HEIGHT_SHORT_WIDE,
URL_CONFIG,
URL_STATUS,
TIMER_STATUS_UPDATE,
TIMER_DISABLE_CHAT_AFTER_OFFLINE,
TIMER_STREAM_DURATION_COUNTER,
TEMP_IMAGE,
MESSAGE_OFFLINE,
MESSAGE_ONLINE,
KEY_USERNAME,
KEY_AVATAR, KEY_AVATAR,
KEY_CHAT_DISPLAYED, KEY_CHAT_DISPLAYED,
KEY_USERNAME,
MESSAGE_OFFLINE,
MESSAGE_ONLINE,
TEMP_IMAGE,
TIMER_DISABLE_CHAT_AFTER_OFFLINE,
TIMER_STATUS_UPDATE,
TIMER_STREAM_DURATION_COUNTER,
URL_CONFIG,
URL_OWNCAST,
URL_STATUS,
WIDTH_SINGLE_COL,
} from './utils/constants.js'; } from './utils/constants.js';
export default class App extends Component { export default class App extends Component {
@ -41,7 +45,8 @@ export default class App extends Component {
displayChat: getLocalStorage(KEY_CHAT_DISPLAYED), // chat panel state displayChat: getLocalStorage(KEY_CHAT_DISPLAYED), // chat panel state
chatEnabled: false, // chat input box state chatEnabled: false, // chat input box state
username: getLocalStorage(KEY_USERNAME) || generateUsername(), username: getLocalStorage(KEY_USERNAME) || generateUsername(),
userAvatarImage: getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`), userAvatarImage:
getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`),
configData: {}, configData: {},
extraUserContent: '', extraUserContent: '',
@ -54,6 +59,10 @@ export default class App extends Component {
viewerCount: '', viewerCount: '',
sessionMaxViewerCount: '', sessionMaxViewerCount: '',
overallMaxViewerCount: '', overallMaxViewerCount: '',
// dom
windowWidth: window.innerWidth,
windowHeight: window.innerHeight,
}; };
// timers // timers
@ -66,6 +75,7 @@ export default class App extends Component {
// misc dom events // misc dom events
this.handleChatPanelToggle = this.handleChatPanelToggle.bind(this); this.handleChatPanelToggle = this.handleChatPanelToggle.bind(this);
this.handleUsernameChange = this.handleUsernameChange.bind(this); this.handleUsernameChange = this.handleUsernameChange.bind(this);
this.handleWindowResize = debounce(this.handleWindowResize.bind(this), 400);
this.handleOfflineMode = this.handleOfflineMode.bind(this); this.handleOfflineMode = this.handleOfflineMode.bind(this);
this.handleOnlineMode = this.handleOnlineMode.bind(this); this.handleOnlineMode = this.handleOnlineMode.bind(this);
@ -81,12 +91,11 @@ export default class App extends Component {
this.getConfig = this.getConfig.bind(this); this.getConfig = this.getConfig.bind(this);
this.getStreamStatus = this.getStreamStatus.bind(this); this.getStreamStatus = this.getStreamStatus.bind(this);
this.getExtraUserContent = this.getExtraUserContent.bind(this); this.getExtraUserContent = this.getExtraUserContent.bind(this);
} }
componentDidMount() { componentDidMount() {
this.getConfig(); this.getConfig();
window.addEventListener('resize', this.handleWindowResize);
this.player = new OwncastPlayer(); this.player = new OwncastPlayer();
this.player.setupPlayerCallbacks({ this.player.setupPlayerCallbacks({
@ -161,7 +170,6 @@ export default class App extends Component {
}); });
} }
setConfigData(data = {}) { setConfigData(data = {}) {
const { title, extraUserInfoFileName, summary } = data; const { title, extraUserInfoFileName, summary } = data;
@ -301,21 +309,30 @@ export default class App extends Component {
console.log(`>>> App Error: ${error}`); console.log(`>>> App Error: ${error}`);
} }
handleWindowResize() {
this.setState({
windowWidth: window.innerWidth,
windowHeight: window.innerHeight,
});
}
render(props, state) { render(props, state) {
const { const {
username, chatEnabled,
userAvatarImage,
websocket,
configData, configData,
extraUserContent,
displayChat, displayChat,
viewerCount, extraUserContent,
sessionMaxViewerCount,
overallMaxViewerCount, overallMaxViewerCount,
playerActive, playerActive,
sessionMaxViewerCount,
streamOnline, streamOnline,
streamStatusMessage, streamStatusMessage,
chatEnabled, userAvatarImage,
username,
viewerCount,
websocket,
windowHeight,
windowWidth,
} = state; } = state;
const { const {
@ -347,14 +364,23 @@ export default class App extends Component {
</li> </li>
`); `);
const chatClass = displayChat ? 'chat' : 'no-chat';
const mainClass = playerActive ? 'online' : ''; const mainClass = playerActive ? 'online' : '';
const streamInfoClass = streamOnline ? 'online' : ''; const streamInfoClass = streamOnline ? 'online' : ''; // need?
const shortHeight = windowHeight <= HEIGHT_SHORT_WIDE;
const singleColMode = windowWidth <= WIDTH_SINGLE_COL && !shortHeight;
const extraAppClasses = classNames({
'chat': displayChat,
'no-chat': !displayChat,
'single-col': singleColMode,
'bg-gray-800': singleColMode && displayChat,
'short-wide': shortHeight,
})
return ( return (
html` html`
<div id="app-container" class="flex w-full flex-col justify-start relative ${chatClass}"> <div id="app-container" class="flex w-full flex-col justify-start relative ${extraAppClasses}">
<div id="top-content"> <div id="top-content" class="z-50">
<header class="flex border-b border-gray-900 border-solid shadow-md fixed z-10 w-full top-0 left-0 flex flex-row justify-between flex-no-wrap"> <header class="flex border-b border-gray-900 border-solid shadow-md fixed z-10 w-full top-0 left-0 flex flex-row justify-between flex-no-wrap">
<h1 class="flex flex-row items-center justify-start p-2 uppercase text-gray-400 text-xl font-thin tracking-wider overflow-hidden whitespace-no-wrap"> <h1 class="flex flex-row items-center justify-start p-2 uppercase text-gray-400 text-xl font-thin tracking-wider overflow-hidden whitespace-no-wrap">
<span <span
@ -392,7 +418,6 @@ export default class App extends Component {
></video> ></video>
</div> </div>
<section id="stream-info" aria-label="Stream status" class="flex text-center flex-row justify-between font-mono py-2 px-8 bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid ${streamInfoClass}"> <section id="stream-info" aria-label="Stream status" class="flex text-center flex-row justify-between font-mono py-2 px-8 bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid ${streamInfoClass}">
<span>${streamStatusMessage}</span> <span>${streamStatusMessage}</span>
<span>${viewerCount} ${pluralize('viewer', viewerCount)}.</span> <span>${viewerCount} ${pluralize('viewer', viewerCount)}.</span>
@ -440,16 +465,15 @@ export default class App extends Component {
<span class="mx-1 inline-block">Version ${appVersion}</span> <span class="mx-1 inline-block">Version ${appVersion}</span>
</footer> </footer>
<${Chat} <${Chat}
websocket=${websocket} websocket=${websocket}
username=${username} username=${username}
userAvatarImage=${userAvatarImage} userAvatarImage=${userAvatarImage}
chatEnabled=${chatEnabled} chatEnabled //=${chatEnabled}
/> />
</div> </div>
`); `
);
} }
} }

2
webroot/js/components/chat/chat-input.js
View File

@ -232,7 +232,7 @@ export default class ChatInput extends Component {
const placeholderText = generatePlaceholderText(inputEnabled, hasSentFirstChatMessage); const placeholderText = generatePlaceholderText(inputEnabled, hasSentFirstChatMessage);
return ( return (
html` html`
<div id="message-input-container" class="w-full shadow-md bg-gray-900 border-t border-gray-700 border-solid p-4"> <div id="message-input-container" class="fixed bottom-0 shadow-md bg-gray-900 border-t border-gray-700 border-solid p-4">
<${ContentEditable} <${ContentEditable}
id="message-input" id="message-input"

4
webroot/js/components/chat/chat.js
View File

@ -21,14 +21,11 @@ export default class Chat extends Component {
this.scrollableMessagesContainer = createRef(); this.scrollableMessagesContainer = createRef();
this.websocket = null; this.websocket = null;
this.getChatHistory = this.getChatHistory.bind(this); this.getChatHistory = this.getChatHistory.bind(this);
this.receivedWebsocketMessage = this.receivedWebsocketMessage.bind(this); this.receivedWebsocketMessage = this.receivedWebsocketMessage.bind(this);
this.websocketDisconnected = this.websocketDisconnected.bind(this); this.websocketDisconnected = this.websocketDisconnected.bind(this);
// this.handleSubmitChatButton = this.handleSubmitChatButton.bind(this);
this.submitChat = this.submitChat.bind(this); this.submitChat = this.submitChat.bind(this);
} }
@ -39,7 +36,6 @@ export default class Chat extends Component {
if (hasTouchScreen()) { if (hasTouchScreen()) {
setVHvar(); setVHvar();
window.addEventListener("orientationchange", setVHvar); window.addEventListener("orientationchange", setVHvar);
// this.tagAppContainer.classList.add('touch-screen');
} }
} }

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

@ -22,8 +22,9 @@ export default class UsernameForm extends Component {
} }
handleDisplayForm() { handleDisplayForm() {
const { displayForm: curDisplay } = this.state;
this.setState({ this.setState({
displayForm: true, displayForm: !curDisplay,
}); });
} }
@ -65,7 +66,7 @@ export default class UsernameForm extends Component {
const formDisplayStyle = narrowSpace ? 'inline-block' : 'flex'; const formDisplayStyle = narrowSpace ? 'inline-block' : 'flex';
const styles = { const styles = {
info: { info: {
display: displayForm || narrowSpace ? 'none' : 'flex', display: displayForm ? 'none' : 'flex',
}, },
form: { form: {
display: displayForm ? formDisplayStyle : 'none', display: displayForm ? formDisplayStyle : 'none',

5
webroot/js/utils/constants.js
View File

@ -27,3 +27,8 @@ export const KEY_CHAT_FIRST_MESSAGE_SENT = 'owncast_first_message_sent';
export const CHAT_INITIAL_PLACEHOLDER_TEXT = 'Type here to chat, no account necessary.'; export const CHAT_INITIAL_PLACEHOLDER_TEXT = 'Type here to chat, no account necessary.';
export const CHAT_PLACEHOLDER_TEXT = 'Message'; export const CHAT_PLACEHOLDER_TEXT = 'Message';
export const CHAT_PLACEHOLDER_OFFLINE = 'Chat is offline.'; export const CHAT_PLACEHOLDER_OFFLINE = 'Chat is offline.';
// app styling
export const WIDTH_SINGLE_COL = 730;
export const HEIGHT_SHORT_WIDE = 500;

29
webroot/js/utils/helpers.js
View File

@ -128,3 +128,32 @@ export function classNames(json) {
}); });
return classes.join(' '); return classes.join(' ');
} }
// taken from
// https://medium.com/@TCAS3/debounce-deep-dive-javascript-es6-e6f8d983b7a1
export function debounce(fn, time) {
let timeout;
return function() {
const functionCall = () => fn.apply(this, arguments);
clearTimeout(timeout);
timeout = setTimeout(functionCall, time);
}
}
/*
const debouncedHandleResize = debounce(function handleResize() {
setDimensions({
height: window.innerHeight,
width: window.innerWidth
})
}, 1000)
window.addEventListener('resize', debouncedHandleResize)
window.addEventListener('keyup', debounce((e) => {
console.log(e);
}, 1000));
*/

95
webroot/styles/app.css
View File

@ -1,6 +1,6 @@
/* /*
Spefici styles for app layout Specific styles for main app layout.
May have overrides for other components with own stylesheets.
*/ */
/* variables */ /* variables */
@ -25,6 +25,10 @@ a:hover {
background: transparent; background: transparent;
} }
* {
transition: all .25s;
}
button[disabled] { button[disabled] {
opacity: .5; opacity: .5;
pointer-events: none; pointer-events: none;
@ -68,11 +72,11 @@ header {
/* ************************************************ */ /* ************************************************ */
#video-container { #video-container {
height: calc(var(--video-container-height)); height: var(--video-container-height);
margin-top: var(--header-height); margin-top: var(--header-height);
position: relative; position: relative;
width: 100%; width: 100%;
/* height: calc((9 / 16) * 100vw); */
min-height: 480px; min-height: 480px;
background-size: 30%; background-size: 30%;
} }
@ -97,13 +101,79 @@ header {
opacity: .75; opacity: .75;
} }
.no-chat #chat-container-wrap {
display: none;
}
/* *********** overrides when chat is on ***************************** */ /* *********** overrides when chat is on ***************************** */
.chat {
--content-width: calc(100vw - var(--right-col-width));
}
.chat #chat-container-wrap {
display: block;
}
.chat #video-container, .chat #video-container,
.chat #stream-info, .chat #stream-info,
.chat #user-content { .chat #user-content {
width: calc(100% - var(--right-col-width)); width: var(--content-width);
}
.chat #video-container {
height: calc((9 / 16) * var(--content-width));
}
.short-wide.chat #video-container {
height: calc(100vh - var(--header-height) - 3rem);
min-height: auto;
}
.short-wide #message-input {
height: 3rem;
}
/* *********** single col layout ***************************** */
.single-col {
--right-col-width: 0px;
}
.single-col main {
position: fixed;
width: 100%;
z-index: 40;
}
.single-col #chat-container {
position: relative;
width: 100%;
height: auto;
}
.single-col #video-container {
min-height: auto;
width: 100%;
}
.single-col #user-content,
.single-col #chat-container-wrap {
margin-top: calc(var(--video-container-height) + var(--header-height) + 1rem);
}
.single-col #user-content .user-content {
flex-wrap: wrap;
justify-content: center;
}
.single-col.chat #user-content {
display: none;
}
.single-col #message-input-container {
width: 100%;
}
.single-col #message-input {
height: 3rem;
} }
@ -116,15 +186,13 @@ header {
--right-col-width: 20em; --right-col-width: 20em;
--user-image-width: 6em; --user-image-width: 6em;
} }
#chat-container {
width: var(--right-col-width);
} }
} /* ************************************************8 */
/* single col layout */ /* single col layout */
@media screen and (max-width: 640px ) { /* @media screen and (max-width: 640px ) {
:root { :root {
--right-col-width: 0; --right-col-width: 0;
--video-container-height: 40vh; --video-container-height: 40vh;
@ -142,7 +210,6 @@ header {
#chat-container { #chat-container {
width: 100%; width: 100%;
position: static; position: static;
/* min-height: calc(100vh - var(--header-height)); */
height: calc(100vh - var(--header-height) - var(--video-container-height) - 3vh) height: calc(100vh - var(--header-height) - var(--video-container-height) - 3vh)
} }
#messages-container { #messages-container {
@ -166,16 +233,16 @@ header {
.chat footer { .chat footer {
display: none; display: none;
} }
} } */
@media screen and (max-height: 860px ) { /* @media screen and (max-height: 860px ) {
:root { :root {
--video-container-height: 40vh; --video-container-height: 40vh;
} }
.user-content { .user-content {
flex-direction: column; flex-direction: column;
} }
} } */

20
webroot/styles/chat.css
View File

@ -1,3 +1,5 @@
/* some base styles for chat and messaging components */
#chat-container { #chat-container {
position: fixed; position: fixed;
z-index: 9; z-index: 9;
@ -8,20 +10,14 @@
height: calc(100vh - var(--header-height)); height: calc(100vh - var(--header-height));
} }
.touch-screen #chat-container { #message-input-container {
height: calc(100vh - var(--header-height) - 3vh); width: var(--right-col-width);
} }
#messages-container {
.no-chat #chat-container-wrap { padding-bottom: 10rem;
display: none;
} }
.chat #chat-container-wrap {
display: block;
}
/******************************/ /******************************/
/******************************/ /******************************/
@ -76,10 +72,6 @@
padding: 5px; padding: 5px;
} }
.message-content {
}
/* MESSAGE TEXT HTML */ /* MESSAGE TEXT HTML */