mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-21 20:28:15 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch '0614gw-updates'

Browse source
This commit is contained in:
Ginger Wong 2020-06-14 21:15:03 -07:00
commit 67acfeb6f5
4 changed files with 36 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
webroot/index.html
View file

@ -1,6 +1,6 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>Live stream test</title>
@ -42,7 +42,7 @@
<button id="button-cancel-change" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn" title="cancel">X</button>
</div>
</div>
<div id="chat-toggle" class="flex">💬</div>
<button type="button" id="chat-toggle" class="flex">💬</button>
</div>
</header>
@ -62,7 +62,7 @@
poster="https://goth.land/thumbnail.png"
data-setup='{}'
>
<source src="https://goth.land/hls/stream.m3u8" type="application/x-mpegURL"/>
<!-- <source src="https://goth.land/hls/stream.m3u8" type="application/x-mpegURL"/> -->
</video>
</div>

5
webroot/js/app.js
View file

@ -25,7 +25,12 @@ function setupApp() {
})
// style hackings
window.VIDEOJS_NO_DYNAMIC_STYLE = true;
mobileVHhack();
// init messaging interactions
var appMessagingMisc = new Messaging();
appMessagingMisc.init();

10
webroot/js/utils.js
View file

@ -36,4 +36,14 @@ function uuidv4() {
const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
function setVHvar() {
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
function mobileVHhack() {
setVHvar();
window.addEventListener("orientationchange", setVHvar);
}

32
webroot/styles/layout.css
View file

@ -7,10 +7,9 @@
--header-bg-color: rgba(20,0,40,1);
}
body {
font-size: 14px;
background-color: #666;
background-color: #eee;
}
::-webkit-scrollbar {
width: 0px;
@ -22,8 +21,6 @@ body {
flex-direction: column;
justify-content: flex-start;
position: relative;
color: white;
}
header {
@ -156,11 +153,15 @@ header h1 {
justify-content: flex-start;
align-items: center;
background-color: black;
height: calc(100vh - 8em); /* Fallback for browsers that do not support Custom Properties */
height: calc((var(--vh, 1vh) * 100) - var(--header-height) - 5em);
}
.owncast-video-container .video-js {
width: 100%;
height: 100%;
display: block;
height: calc(100vh - var(--header-height) - 5em);
}
.owncast-video-container video {
width: 100%;
@ -195,7 +196,10 @@ header h1 {
height: 100%;
width: var(--right-col-width);
background-color: var(--chat-bg-color);
height: calc(100vh - var(--header-height));
height: calc(100vh - 3em); /* Fallback for browsers that do not support Custom Properties */
height: calc((var(--vh, 1vh) * 100) - var(--header-height));
overflow: hidden;
display: flex;
flex-direction: column;
@ -255,10 +259,11 @@ header h1 {
}
.message-author {
font-weight: 600;
color: #fff;
}
.message-text {
color: #ccc;
font-weight: 100;
font-weight: 200;
}
/* ************************************************8 */
@ -293,7 +298,6 @@ header h1 {
#main-content-container {
flex-direction: column;
justify-content: space-between;
height: calc(100vh - var(--header-height));
}
.main-cols {
@ -302,13 +306,14 @@ header h1 {
.left-col {
flex-direction: column;
justify-content: stretch;
z-index: 100;
}
.right-col {
overflow: hidden;
}
#user-info {
width: 12em;
width: 9em;
}
#user-content {
display: none;
@ -320,18 +325,17 @@ header h1 {
height: auto;
}
.owncast-video-container .video-js {
.owncast-video-container {
height: 40vh;
height: calc((var(--vh, 1vh) * 40));
min-height: 300px;
}
.no-chat .left-col {
height: 100%;
}
.no-chat .right-col {
display: none;
}
.no-chat #stream-info {
display: block;
display: flex;
}
.no-chat #user-content {
display: block;