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) {
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) {
const urlObject = new URL(url.replace(/\/$/, ""));
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) {
@@ -130,7 +130,7 @@ function isImage(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

18
webroot/styles/chat.css
View File

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

10
webroot/styles/layout.css
View File

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