LogalDeveloper/owncast
0
Fork 0
Code Activity

stylin'

Browse Source
This commit is contained in:
Ginger Wong
2020-08-22 00:09:01 -07:00
parent 13cfd112b7
commit 9b4c07d3ba
3 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -115,13 +115,13 @@ function getYoutubeIdFromURL(url) {
} }
function getYoutubeEmbedFromID(id) { function getYoutubeEmbedFromID(id) {
return `<iframe class="chat-embed" src="//www.youtube.com/embed/${id}" frameborder="0" allowfullscreen></iframe>`; return `<iframe class="chat-embed youtube-embed" src="//www.youtube.com/embed/${id}" frameborder="0" allowfullscreen></iframe>`;
} }
function getInstagramEmbedFromURL(url) { function getInstagramEmbedFromURL(url) {
const urlObject = new URL(url.replace(/\/$/, "")); const urlObject = new URL(url.replace(/\/$/, ""));
urlObject.pathname += "/embed"; urlObject.pathname += "/embed";
return `<iframe class="chat-embed instagram-embed" height="150px" src="${urlObject.href}" frameborder="0" allowfullscreen></iframe>`; return `<iframe class="chat-embed instagram-embed" src="${urlObject.href}" frameborder="0" allowfullscreen></iframe>`;
} }
function isImage(url) { function isImage(url) {
@@ -130,7 +130,7 @@ function isImage(url) {
} }
function getImageForURL(url) { function getImageForURL(url) {
return `<a target="_blank" href="${url}"><img class="embedded-image" src="${url}" width="100%" height="150px"/></a>`; return `<a target="_blank" href="${url}"><img class="chat-embed embedded-image" src="${url}" /></a>`;
} }
// Taken from https://stackoverflow.com/questions/3972014/get-contenteditable-caret-index-position // Taken from https://stackoverflow.com/questions/3972014/get-contenteditable-caret-index-position

18
webroot/styles/chat.css
View File

@@ -167,21 +167,27 @@
padding: .25rem; padding: .25rem;
} }
.message-text iframe {
.message-text .chat-embed {
width: 100%; width: 100%;
height: 12rem; border-radius: .25rem;
border-radius: 1rem;
} }
.message-text .instagram-embed { .message-text .instagram-embed {
height: 22em; height: 24rem;
} }
.message-text .embedded-image { .message-text .embedded-image {
width: 100%; width: 100%;
display: block; display: block;
height: 15rem; /* height: 15rem; */
border-radius: 1rem; }
.message-text .youtube-embed {
width: 100%;
height: 12rem;
} }
.message-text .highlighted { .message-text .highlighted {

10
webroot/styles/layout.css
View File

@@ -215,20 +215,20 @@ h2 {
#video-container { #video-container {
height: calc(var(--video-container-height)); height: calc(var(--video-container-height));
width: 100%; /* width: 100%; */
margin-top: var(--header-height); margin-top: var(--header-height);
background-position: center center; /* background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat; */
background-size: 30%; background-size: 30%;
} }
.owncast-video-container { .owncast-video-container {
height: auto; height: auto;
display: flex; /* display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center; */
} }
.owncast-video-container .video-js { .owncast-video-container .video-js {
width: 100%; width: 100%;