Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix youtube embed sizing and weird zindexing; fix single col video sizing inconsistency across other browsers

Browse Source
This commit is contained in:
Ginger Wong 2020-08-27 12:25:46 -07:00
parent b549b21257
commit 43e88ee81d
7 changed files with 18 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -241,7 +241,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="fixed bottom-0 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 z-20">
<${ContentEditable} <${ContentEditable}
id="message-input" id="message-input"

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

@ -34,8 +34,8 @@ export default class Chat extends Component {
this.getChatHistory(); this.getChatHistory();
if (hasTouchScreen()) { if (hasTouchScreen()) {
setVHvar(); // setVHvar();
window.addEventListener("orientationchange", setVHvar); // window.addEventListener("orientationchange", setVHvar);
} }
} }
@ -200,7 +200,7 @@ export default class Chat extends Component {
<div <div
id="messages-container" id="messages-container"
ref=${this.scrollableMessagesContainer} ref=${this.scrollableMessagesContainer}
class="py-1 overflow-auto" class="py-1 overflow-auto z-10"
> >
${messageList} ${messageList}
</div> </div>

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

@ -29,7 +29,7 @@ export default class Message extends Component {
> >
<img src=${avatar} class="p-1" /> <img src=${avatar} class="p-1" />
</div> </div>
<div class="message-content text-sm break-words"> <div class="message-content text-sm break-words w-full">
<div class="message-author text-white font-bold" style=${authorTextColor}> <div class="message-author text-white font-bold" style=${authorTextColor}>
${author} ${author}
</div> </div>
@ -47,7 +47,7 @@ export default class Message extends Component {
return ( return (
html` html`
<div class="message message-name-change flex items-center justify-start p-3"> <div class="message message-name-change flex items-center justify-start p-3">
<div class="message-content flex flex-row items-center justify-center text-sm"> <div class="message-content flex flex-row items-center justify-center text-sm w-full">
<div <div
class="message-avatar rounded-full mr-3 bg-gray-900" class="message-avatar rounded-full mr-3 bg-gray-900"
> >

3
webroot/js/utils/chat.js
View File

@ -211,9 +211,6 @@ export function convertToText(str = '') {
// Replace `<p>` (from IE). // Replace `<p>` (from IE).
value = value.replace(/<p>/gi, '\n'); value = value.replace(/<p>/gi, '\n');
// Remove extra tags.
value = value.replace(/<(.*?)>/g, '');
// Trim each line. // Trim each line.
value = value value = value
.split('\n') .split('\n')

12
webroot/styles/app.css
View File

@ -143,6 +143,7 @@ header {
.single-col { .single-col {
--right-col-width: 0px; --right-col-width: 0px;
--video-container-height: calc((9 / 16) * 100vw);
} }
.single-col main { .single-col main {
position: fixed; position: fixed;
@ -154,9 +155,18 @@ header {
width: 100%; width: 100%;
height: auto; height: auto;
} }
.single-col #video-container { /* .single-col #video-container {
min-height: auto; min-height: auto;
width: 100%; 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 #user-content,
.single-col #chat-container-wrap { .single-col #chat-container-wrap {

2
webroot/styles/chat.css
View File

@ -121,7 +121,7 @@
} }
.message-text .youtube-embed { .message-text .youtube-embed {
width: calc(var(--right-col-width) - 3.5em); width: 90%;
height: auto; height: auto;
} }

43
webroot/styles/video.css
View File

@ -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;
*/