LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Merge branch '0615-layoutrefactor'

Browse Source
This commit is contained in:
Ginger Wong 2020-06-16 02:16:21 -07:00
commit 195fe5d9e3
6 changed files with 295 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
webroot/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 375 KiB

41
webroot/index.html
View File

@ -40,6 +40,8 @@ possible hacks
</script> </script>
<body class="bg-gray-300 text-gray-800"> <body class="bg-gray-300 text-gray-800">
<div id="app-container" class="flex no-chat"> <div id="app-container" class="flex no-chat">
<div id="top-content">
<header class="flex border-b border-gray-900 border-solid shadow-md"> <header class="flex border-b border-gray-900 border-solid shadow-md">
<h1 class="text-gray-400"> <h1 class="text-gray-400">
😈 Owncast 😈 Owncast
@ -68,9 +70,7 @@ possible hacks
</div> </div>
</header> </header>
<div id="main-content-container" class="flex">
<!-- LEFT CONTAINER SIDE-->
<div class="flex main-cols left-col">
<div id="video-container" class="flex owncast-video-container bg-black"> <div id="video-container" class="flex owncast-video-container bg-black">
<video <video
@ -88,6 +88,7 @@ possible hacks
</video> </video>
</div> </div>
<div id="stream-info" class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid"> <div id="stream-info" class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid">
<span>{{ streamStatus }}</span> <span>{{ streamStatus }}</span>
<span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span> <span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
@ -95,12 +96,12 @@ possible hacks
<span>{{ overallMaxViewerCount }} overall.</span> <span>{{ overallMaxViewerCount }} overall.</span>
</div> </div>
<div id="user-content"> <div id="user-content" class="user-content">
<!-- USER CONTENT... --> <!-- USER CONTENT... -->
<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. 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.
<br />
</div> </div>
<div> <div>
@ -112,8 +113,26 @@ possible hacks
</div> </div>
</div> </div>
<!-- RIGHT CONTAINER SIDE-->
<div class="flex main-cols right-col"> <div id="chat-container-wrap" class="flex">
<div id="user-content-touch" class="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.
<br />
</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 id="chat-container" class="bg-gray-800"> <div id="chat-container" class="bg-gray-800">
<div id="messages-container"> <div id="messages-container">
@ -132,8 +151,9 @@ possible hacks
</div> </div>
</div> </div>
<div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid"> <div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
<form id="message-form" class="flex" /*@submit="submitChatForm"*/> <form id="message-form" class="flex">
<input type="hidden" name="inputAuthor" id="self-message-author" v-model="message.author" /> <input type="hidden" name="inputAuthor" id="self-message-author" v-model="message.author" />
@ -155,8 +175,11 @@ possible hacks
</form> </form>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>

2
webroot/js/app.js
View File

@ -27,8 +27,6 @@ function setupApp() {
// style hackings // style hackings
window.VIDEOJS_NO_DYNAMIC_STYLE = true; window.VIDEOJS_NO_DYNAMIC_STYLE = true;
setVHvar();
// init messaging interactions // init messaging interactions
var appMessagingMisc = new Messaging(); var appMessagingMisc = new Messaging();

12
webroot/js/message.js
View File

@ -81,6 +81,8 @@ class Messaging {
this.formMessageInput.addEventListener("focus", this.handleKeyboardAppear.bind(this)); this.formMessageInput.addEventListener("focus", this.handleKeyboardAppear.bind(this));
this.formMessageInput.addEventListener("blur", this.handleKeyboardOut.bind(this)); this.formMessageInput.addEventListener("blur", this.handleKeyboardOut.bind(this));
} else {
this.tagAppContainer.classList.add("desktop");
} }
} }
@ -99,12 +101,18 @@ class Messaging {
this.imgUsernameAvatar.src = this.avatarSource + username; this.imgUsernameAvatar.src = this.avatarSource + username;
} }
displayChat() { displayChat() {
this.tagAppContainer.className = this.chatDisplayed ? "flex" : "flex no-chat"; if (this.chatDisplayed) {
this.tagAppContainer.classList.add("chat");
this.tagAppContainer.classList.remove("no-chat");
} else {
this.tagAppContainer.classList.add("no-chat");
this.tagAppContainer.classList.remove("chat");
}
} }
handleOrientationChange() { handleOrientationChange() {
console.log("====orientation change 123", event, window.screen.orientation, window.orientation, window.matchMedia("(orientation: landscape)")) console.log("====orientation change 123", event, window.screen.orientation, window.orientation, window.matchMedia("(orientation: landscape)"))
mobileVHhack(); // mobileVHhack();
// if small landscape, hide chat // if small landscape, hide chat
// var mql = window.matchMedia("(orientation: landscape)"); // what it _was_ // var mql = window.matchMedia("(orientation: landscape)"); // what it _was_

4
webroot/js/utils.js
View File

@ -23,9 +23,9 @@ function clearLocalStorage(key) {
} }
function jumpToBottom(id) { function jumpToBottom(id) {
const div = document.querySelector(id); const div = id ? document.querySelector(id) : document.body;
div.scrollTo({ div.scrollTo({
top: div.scrollHeight,// - div.clientHeight, top: div.scrollHeight,
left: 0, left: 0,
behavior: 'smooth' behavior: 'smooth'
}); });

289
webroot/styles/layout.css
View File

@ -2,9 +2,8 @@
:root { :root {
--header-height: 3em; --header-height: 3em;
--right-col-width: 24em; --right-col-width: 24em;
--video-container-height: 50vh;
--header-bg-color: rgba(20,0,40,1); --header-bg-color: rgba(20,0,40,1);
--vh: 1vh;
} }
body { body {
@ -54,6 +53,30 @@ header h1 {
align-items: center; align-items: center;
} }
/* ************************************************8 */
#stream-info {
padding: .5em 2em;
text-align: center;
width: 100%;
flex-direction: row;
justify-content: space-between;
}
#stream-info span {
font-size: .7em;
}
.user-content {
padding: 2em;
}
#user-content {
display: block;
}
#user-content-touch {
display: none;
}
/* ************************************************8 */ /* ************************************************8 */
#user-options-container { #user-options-container {
@ -117,35 +140,19 @@ header h1 {
/* ************************************************8 */ /* ************************************************8 */
#main-content-container {
#video-container {
height: calc(var(--video-container-height) - var(--header-height));
width: 100%; width: 100%;
flex-direction: row;
position: relative;
margin-top: var(--header-height);
} }
.main-cols {
flex-direction: column;
justify-content: flex-start;
position: relative;
}
.left-col {
width: calc(100vw - var(--right-col-width));
}
/* ************************************************8 */
.owncast-video-container { .owncast-video-container {
width: 100%;
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;
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 { .owncast-video-container .video-js {
@ -165,34 +172,38 @@ header h1 {
margin-left: -1.5em; margin-left: -1.5em;
margin-top: -0.75em; margin-top: -0.75em;
} }
/* ************************************************8 */ .vjs-airplay .vjs-icon-placeholder::before {
content: 'AP';
#stream-info {
padding: .5em 2em;
text-align: center;
font-size: .7em;
flex-direction: row;
justify-content: space-between;
} }
#user-content {
padding: 2em;
}
/* ************************************************8 */ /* ************************************************8 */
.no-chat #chat-container-wrap {
display: none;
}
.chat #chat-container-wrap {
display: block;
}
.chat #video-container,
.chat #stream-info,
.chat #user-content {
width: calc(100% - var(--right-col-width));
}
#chat-container { #chat-container {
position: fixed; position: fixed;
z-index: 9; z-index: 9;
top: var(--header-height);
right: 0; right: 0;
height: 100%;
width: var(--right-col-width); width: var(--right-col-width);
height: calc(100vh - 3em); /* Fallback for browsers that do not support Custom Properties */ height: calc(100vh - var(--header-height));
height: calc((var(--vh, 1vh) * 100) - var(--header-height));
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@ -249,12 +260,6 @@ header h1 {
/* ************************************************8 */ /* ************************************************8 */
.no-chat .left-col {
width: 100vw;
}
.no-chat .right-col {
display: none;
}
.no-chat #chat-toggle { .no-chat #chat-toggle {
opacity: .75; opacity: .75;
@ -276,109 +281,129 @@ header h1 {
#chat-container { #chat-container {
width: var(--right-col-width); width: var(--right-col-width);
} }
.left-col {
width: calc(100vw - var(--right-col-width)); }
@media screen and (max-width: 640px ) {
.desktop {
--video-container-height: 50vh;
} }
.desktop #chat-container {
height: auto;
position: relative;
right: unset;
top: unset;
width: 100%;
z-index: 1;
}
.desktop.chat #video-container,
.desktop.chat #stream-info,
.desktop.chat #user-content {
width: 100%;
}
.desktop.chat #user-content{
display: none;
}
} }
/* ************************************************8 */
/* ************************************************8 */ /* ************************************************8 */
.touch-screen header {
position: relative;
}
.touch-screen #top-content {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 10;
}
.touch-screen #user-content {
display: none;
}
.touch-screen #user-content-touch {
display: block;
}
.touch-screen #stream-info {
height: 2.5em;
overflow: hidden;
}
.touch-screen #chat-container-wrap {
display: flex;
align-items: flex-end;
width: 100%;
height: auto;
flex-direction: column;
margin-top: calc(var(--header-height) + var(--video-container-height) + 2.5em);
}
.touch-screen #chat-container {
height: auto;
position: relative;
right: unset;
top: unset;
width: 100%;
z-index: 1;
}
.touch-screen.chat #video-container,
.touch-screen.chat #stream-info,
.touch-screen.chat #user-content {
width: 100%;
}
.touch-screen #video-container {
height: var(--video-container-height);
}
.touch-screen .owncast-video-container {
height: 100%;
}
.touch-screen #user-content-touch {
display: none;
}
.touch-screen #chat-container {
display: block;
}
.touch-screen.no-chat #user-content-touch {
display: block;
}
.touch-screen.no-chat #chat-container {
display: none;
}
@media screen and (max-width: 640px ) { @media screen and (max-width: 640px ) {
#main-content-container { :root {
flex-direction: column; --video-container-height: 36vh;
justify-content: space-between;
height: calc((var(--vh, 1vh) * 100) - var(--header-height));
} }
}
.main-cols { @media screen and (orientation: landscape) and (min-width: 1024px) {
width: 100vw; :root {
} --video-container-height: 65vh;
.left-col {
flex-direction: column;
justify-content: stretch;
z-index: 100;
height: 55%;
min-height: 300px;
}
.right-col {
overflow: hidden;
height: 45%;
} }
}
#user-info { @media screen and (orientation: landscape) and (max-width: 1024px) {
width: 9em; :root {
--video-container-height: 75vh;
} }
#user-content { #main-mobile-container {
display: none; margin-top: calc(var(--header-height) + var(--video-container-height));
} }
#chat-container { .touch-screen .user-content {
width: 100%;
height: 100%;
position: relative;
height: auto;
}
.owncast-video-container {
height: 100%;
}
.no-chat .left-col {
height: 100%;
}
.no-chat .owncast-video-container {
min-height: 50vh;
}
.no-chat .right-col {
display: none;
}
.no-chat #stream-info {
display: flex;
}
.no-chat #user-content {
display: block; display: block;
} }
} .touch-screen #chat-container {
.message-input-focus #main-content-container {
flex-direction: column;
justify-content: space-between;
height: calc((var(--vh, 1vh) * 100) - var(--header-height));
}
.message-input-focus .main-cols {
width: 100vw;
}
.message-input-focus .left-col {
flex-direction: column;
justify-content: stretch;
z-index: 100;
}
.message-input-focus .right-col {
overflow: hidden;
}
.message-input-focus #user-info {
width: 9em;
}
.message-input-focus #user-content {
display: none; display: none;
} }
.message-input-focus #chat-container { .touch-screen #chat-toggle {
width: 100%; display: none;
height: 100%; }
position: relative;
height: auto;
z-index: 999;
}
.message-input-focus .owncast-video-container {
height: 40vh;
height: calc((var(--vh, 1vh) * 40));
min-height: 300px;
}
.vjs-airplay .vjs-icon-placeholder::before {
content: 'AP';
} }