-
+
- `);
+ <${Chat}
+ websocket=${websocket}
+ username=${username}
+ userAvatarImage=${userAvatarImage}
+ chatEnabled //=${chatEnabled}
+ />
+
+ `
+ );
}
}
diff --git a/webroot/js/components/chat/chat-input.js b/webroot/js/components/chat/chat-input.js
index 0ba1e1cc1..b2482105a 100644
--- a/webroot/js/components/chat/chat-input.js
+++ b/webroot/js/components/chat/chat-input.js
@@ -232,7 +232,7 @@ export default class ChatInput extends Component {
const placeholderText = generatePlaceholderText(inputEnabled, hasSentFirstChatMessage);
return (
html`
-
+
<${ContentEditable}
id="message-input"
diff --git a/webroot/js/components/chat/chat.js b/webroot/js/components/chat/chat.js
index 4c4b486a3..2953de1b3 100644
--- a/webroot/js/components/chat/chat.js
+++ b/webroot/js/components/chat/chat.js
@@ -21,14 +21,11 @@ export default class Chat extends Component {
this.scrollableMessagesContainer = createRef();
-
this.websocket = null;
this.getChatHistory = this.getChatHistory.bind(this);
this.receivedWebsocketMessage = this.receivedWebsocketMessage.bind(this);
this.websocketDisconnected = this.websocketDisconnected.bind(this);
-
- // this.handleSubmitChatButton = this.handleSubmitChatButton.bind(this);
this.submitChat = this.submitChat.bind(this);
}
@@ -39,7 +36,6 @@ export default class Chat extends Component {
if (hasTouchScreen()) {
setVHvar();
window.addEventListener("orientationchange", setVHvar);
- // this.tagAppContainer.classList.add('touch-screen');
}
}
diff --git a/webroot/js/components/chat/username.js b/webroot/js/components/chat/username.js
index f18d37c4a..a2ba51711 100644
--- a/webroot/js/components/chat/username.js
+++ b/webroot/js/components/chat/username.js
@@ -22,8 +22,9 @@ export default class UsernameForm extends Component {
}
handleDisplayForm() {
+ const { displayForm: curDisplay } = this.state;
this.setState({
- displayForm: true,
+ displayForm: !curDisplay,
});
}
@@ -65,7 +66,7 @@ export default class UsernameForm extends Component {
const formDisplayStyle = narrowSpace ? 'inline-block' : 'flex';
const styles = {
info: {
- display: displayForm || narrowSpace ? 'none' : 'flex',
+ display: displayForm ? 'none' : 'flex',
},
form: {
display: displayForm ? formDisplayStyle : 'none',
diff --git a/webroot/js/utils/constants.js b/webroot/js/utils/constants.js
index a01cdb6c1..c83de5acd 100644
--- a/webroot/js/utils/constants.js
+++ b/webroot/js/utils/constants.js
@@ -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_PLACEHOLDER_TEXT = 'Message';
export const CHAT_PLACEHOLDER_OFFLINE = 'Chat is offline.';
+
+
+// app styling
+export const WIDTH_SINGLE_COL = 730;
+export const HEIGHT_SHORT_WIDE = 500;
diff --git a/webroot/js/utils/helpers.js b/webroot/js/utils/helpers.js
index 6962dfd61..1f913e8f9 100644
--- a/webroot/js/utils/helpers.js
+++ b/webroot/js/utils/helpers.js
@@ -128,3 +128,32 @@ export function classNames(json) {
});
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));
+
+*/
+
diff --git a/webroot/styles/app.css b/webroot/styles/app.css
index c0b6d60c5..c361a19a6 100644
--- a/webroot/styles/app.css
+++ b/webroot/styles/app.css
@@ -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 */
@@ -25,6 +25,10 @@ a:hover {
background: transparent;
}
+* {
+ transition: all .25s;
+}
+
button[disabled] {
opacity: .5;
pointer-events: none;
@@ -68,11 +72,11 @@ header {
/* ************************************************ */
#video-container {
- height: calc(var(--video-container-height));
+ height: var(--video-container-height);
margin-top: var(--header-height);
position: relative;
width: 100%;
- /* height: calc((9 / 16) * 100vw); */
+
min-height: 480px;
background-size: 30%;
}
@@ -97,13 +101,79 @@ header {
opacity: .75;
}
+.no-chat #chat-container-wrap {
+ display: none;
+}
/* *********** overrides when chat is on ***************************** */
+.chat {
+ --content-width: calc(100vw - var(--right-col-width));
+}
+.chat #chat-container-wrap {
+ display: block;
+}
+
.chat #video-container,
.chat #stream-info,
.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;
--user-image-width: 6em;
}
+}
- #chat-container {
- width: var(--right-col-width);
- }
+/* ************************************************8 */
-}
/* single col layout */
-@media screen and (max-width: 640px ) {
+/* @media screen and (max-width: 640px ) {
:root {
--right-col-width: 0;
--video-container-height: 40vh;
@@ -142,7 +210,6 @@ header {
#chat-container {
width: 100%;
position: static;
- /* min-height: calc(100vh - var(--header-height)); */
height: calc(100vh - var(--header-height) - var(--video-container-height) - 3vh)
}
#messages-container {
@@ -166,16 +233,16 @@ header {
.chat footer {
display: none;
}
-}
+} */
-@media screen and (max-height: 860px ) {
+/* @media screen and (max-height: 860px ) {
:root {
--video-container-height: 40vh;
}
.user-content {
flex-direction: column;
}
-}
+} */
diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css
index 66334a20c..7dcf9af46 100644
--- a/webroot/styles/chat.css
+++ b/webroot/styles/chat.css
@@ -1,3 +1,5 @@
+/* some base styles for chat and messaging components */
+
#chat-container {
position: fixed;
z-index: 9;
@@ -8,20 +10,14 @@
height: calc(100vh - var(--header-height));
}
-.touch-screen #chat-container {
- height: calc(100vh - var(--header-height) - 3vh);
-}
-
-
-.no-chat #chat-container-wrap {
- display: none;
+#message-input-container {
+ width: var(--right-col-width);
}
-.chat #chat-container-wrap {
- display: block;
+#messages-container {
+ padding-bottom: 10rem;
}
-
/******************************/
/******************************/
@@ -76,10 +72,6 @@
padding: 5px;
}
-.message-content {
-}
-
-
/* MESSAGE TEXT HTML */