mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 04:40:37 +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 17:02:36 -07:00
commit ee19ecdc27
2 changed files with 49 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
webroot/index.html
View file

@ -51,7 +51,7 @@
<!-- LEFT CONTAINER SIDE--> <!-- LEFT CONTAINER SIDE-->
<div class="flex main-cols left-col"> <div class="flex main-cols left-col">
<div id="video-container" class="flex shadow-md"> <div id="video-container" class="flex shadow-md owncast-video-container">
<video <video
class="video-js" class="video-js"
id="video" id="video"
@ -66,10 +66,27 @@
</video> </video>
</div> </div>
<div id="stream-info"> <div id="stream-info" class="flex">
{{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}. <span>{{ streamStatus }}</span>
Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}, <span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
{{ overallMaxViewerCount }} overall. <span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
<span>{{ overallMaxViewerCount }} overall.</span>
</div>
<div id="user-content">
<!-- USER CONTENT... -->
<div>
Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature.
</div>
<div>
Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature.
</div>
</div> </div>
</div> </div>

38
webroot/styles/layout.css
View file

@ -75,7 +75,7 @@ header h1 {
#user-info-display { #user-info-display {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: flex-end;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
padding: .5em 1em; padding: .5em 1em;
@ -148,7 +148,7 @@ header h1 {
/* ************************************************8 */ /* ************************************************8 */
#video-container { .owncast-video-container {
width: 100%; width: 100%;
height: auto; height: auto;
display: flex; display: flex;
@ -157,19 +157,32 @@ header h1 {
align-items: center; align-items: center;
background-color: black; background-color: black;
} }
#video-container video { .owncast-video-container .video-js {
width: 100%;
display: block;
height: calc(100vh - var(--header-height) - 5em);
}
.owncast-video-container video {
width: 100%; width: 100%;
display: block; display: block;
min-height: 100% min-height: 100%
} }
/* ************************************************8 */
#stream-info { #stream-info {
padding: .5em; padding: .5em 2em;
text-align: center; text-align: center;
font-family: monospace; font-family: monospace;
font-size: .75em; font-size: .75em;
background-color: rgba(0,0,0,.5); background-color: rgba(0,0,0,.5);
border-bottom: 1px solid black; border-bottom: 1px solid black;
flex-direction: row;
justify-content: space-between;
}
#user-content {
padding: 2em;
} }
/* ************************************************8 */ /* ************************************************8 */
@ -247,8 +260,8 @@ header h1 {
color: #ccc; color: #ccc;
font-weight: 100; font-weight: 100;
} }
/* ************************************************8 */
/* ************************************************8 */
.no-chat .left-col { .no-chat .left-col {
width: 100vw; width: 100vw;
@ -297,12 +310,9 @@ header h1 {
#user-info { #user-info {
width: 12em; width: 12em;
} }
#stream-info { #user-content {
display: none; display: none;
overflow: auto;
height: auto;
} }
#chat-container { #chat-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -310,14 +320,20 @@ header h1 {
height: auto; height: auto;
} }
.owncast-video-container .video-js {
height: 40vh;
}
.no-chat .left-col { .no-chat .left-col {
height: 100%; height: 100%;
} }
.no-chat .right-col { .no-chat .right-col {
display: none; display: none;
} }
.no-chat #info { .no-chat #stream-info {
display: block;
}
.no-chat #user-content {
display: block; display: block;
} }
} }