pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch '0615-layoutrefactor'

pull/5/head
Ginger Wong 5 years ago
parent
d7229a8c6d 21aaf0c0fc
commit
195fe5d9e3
6 changed files with 274 additions and 220 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      webroot/img/logo.png
  2. 41
      webroot/index.html
  3. 2
      webroot/js/app.js
  4. 12
      webroot/js/message.js
  5. 4
      webroot/js/utils.js
  6. 245
      webroot/styles/layout.css

BIN
webroot/img/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 375 KiB

41
webroot/index.html
Unescape View File

@ -40,6 +40,8 @@ possible hacks @@ -40,6 +40,8 @@ possible hacks
</script>
<body class="bg-gray-300 text-gray-800">
<div id="app-container" class="flex no-chat">
<div id="top-content">
<header class="flex border-b border-gray-900 border-solid shadow-md">
<h1 class="text-gray-400">
😈 Owncast
@ -68,9 +70,7 @@ possible hacks @@ -68,9 +70,7 @@ possible hacks
</div>
</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">
<video
@ -88,6 +88,7 @@ possible hacks @@ -88,6 +88,7 @@ possible hacks
</video>
</div>
<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>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
@ -95,12 +96,12 @@ possible hacks @@ -95,12 +96,12 @@ possible hacks
<span>{{ overallMaxViewerCount }} overall.</span>
</div>
<div id="user-content">
<div id="user-content" 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>
@ -112,8 +113,26 @@ possible hacks @@ -112,8 +113,26 @@ possible hacks
</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="messages-container">
@ -132,8 +151,9 @@ possible hacks @@ -132,8 +151,9 @@ possible hacks
</div>
</div>
<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" />
@ -155,8 +175,11 @@ possible hacks @@ -155,8 +175,11 @@ possible hacks
</form>
</div>
</div>
</div>
</div>
</div>

2
webroot/js/app.js
Unescape View File

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

12
webroot/js/message.js
Unescape View File

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

4
webroot/js/utils.js
Unescape View File

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

245
webroot/styles/layout.css
Unescape View File

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