diff --git a/webroot/js/components/chat/chat-input.js b/webroot/js/components/chat/chat-input.js index 219be9d96..a774c6ec6 100644 --- a/webroot/js/components/chat/chat-input.js +++ b/webroot/js/components/chat/chat-input.js @@ -241,7 +241,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 37b60cec5..dfba992b2 100644 --- a/webroot/js/components/chat/chat.js +++ b/webroot/js/components/chat/chat.js @@ -34,8 +34,8 @@ export default class Chat extends Component { this.getChatHistory(); if (hasTouchScreen()) { - setVHvar(); - window.addEventListener("orientationchange", setVHvar); + // setVHvar(); + // window.addEventListener("orientationchange", setVHvar); } } @@ -200,7 +200,7 @@ export default class Chat extends Component {
${messageList}
diff --git a/webroot/js/components/chat/message.js b/webroot/js/components/chat/message.js index 11c4506ba..4ddf791e7 100644 --- a/webroot/js/components/chat/message.js +++ b/webroot/js/components/chat/message.js @@ -29,7 +29,7 @@ export default class Message extends Component { >
-
+
${author}
@@ -47,7 +47,7 @@ export default class Message extends Component { return ( html`
-
+
diff --git a/webroot/js/utils/chat.js b/webroot/js/utils/chat.js index 54ad19c54..89f0f8f53 100644 --- a/webroot/js/utils/chat.js +++ b/webroot/js/utils/chat.js @@ -211,9 +211,6 @@ export function convertToText(str = '') { // Replace `

` (from IE). value = value.replace(/

/gi, '\n'); - // Remove extra tags. - value = value.replace(/<(.*?)>/g, ''); - // Trim each line. value = value .split('\n') diff --git a/webroot/styles/app.css b/webroot/styles/app.css index d96b41bef..87c93c3ab 100644 --- a/webroot/styles/app.css +++ b/webroot/styles/app.css @@ -143,6 +143,7 @@ header { .single-col { --right-col-width: 0px; + --video-container-height: calc((9 / 16) * 100vw); } .single-col main { position: fixed; @@ -154,9 +155,18 @@ header { width: 100%; height: auto; } -.single-col #video-container { +/* .single-col #video-container { min-height: auto; width: 100%; +} */ + +.single-col.chat #video-container, +.single-col.no-chat #video-container, +.single-col #video-container #video, +.single-col.chat #video-container #video { + width: 100vw; + height: var(--video-container-height); + min-height: 212px; } .single-col #user-content, .single-col #chat-container-wrap { diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css index 7222e79a2..c062be8d1 100644 --- a/webroot/styles/chat.css +++ b/webroot/styles/chat.css @@ -121,7 +121,7 @@ } .message-text .youtube-embed { - width: calc(var(--right-col-width) - 3.5em); + width: 90%; height: auto; } diff --git a/webroot/styles/video.css b/webroot/styles/video.css index ca0f7731b..b7d2289f4 100644 --- a/webroot/styles/video.css +++ b/webroot/styles/video.css @@ -10,46 +10,3 @@ video.video-js { } - -/* position: relative; -width: 100%; -height: calc((9 / 16) * 100vw); -max-height: calc(100vh - 169px); -min-height: 480px; -background: #000; */ - -/* -YOUTUBE -style="--ytd-watch-flexy-scrollbar-width: 15px; --ytd-watch-flexy-panel-max-height: 460px; --ytd-watch-flexy-chat-max-height: 460px;" - ---ytd-watch-flexy-scrollbar-width: 15px; ---ytd-watch-flexy-panel-max-height: 460px; ---ytd-watch-flexy-chat-max-height: 460px; - ---ytd-watch-flexy-width-ratio: 16; ---ytd-watch-flexy-height-ratio: 9; ---ytd-watch-flexy-space-below-player: 136px; - ---ytd-watch-flexy-non-player-height: calc(var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player)); - ---ytd-watch-flexy-non-player-width: calc(var(--ytd-watch-flexy-sidebar-width) + (3 * var(--ytd-margin-6x))); - ---ytd-watch-flexy-min-player-height: 240px; - ---ytd-watch-flexy-min-player-width: calc(var(--ytd-watch-flexy-min-player-height) * (var(--ytd-watch-flexy-width-ratio) / var(--ytd-watch-flexy-height-ratio))); - ---ytd-watch-flexy-max-player-height: calc(100vh - -(var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player))); - ---ytd-watch-flexy-max-player-width: - calc((100vh - (var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player))) * -(var(--ytd-watch-flexy-width-ratio) / var(--ytd-watch-flexy-height-ratio))); - - - ---ytd-watch-flexy-sidebar-width: 402px; ---ytd-watch-flexy-sidebar-min-width: 300px; ---ytd-watch-flexy-masthead-height: 56px; -min-width: 0; - -*/