LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

markup and styles for simple mobile only

Browse Source
This commit is contained in:
Ginger Wong 2020-06-15 23:32:26 -07:00
parent 903fdc33ae
commit 97c71771df
5 changed files with 211 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
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="fixed-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,12 +88,19 @@ 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>
<span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span> <span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
<span>{{ overallMaxViewerCount }} overall.</span> <span>{{ overallMaxViewerCount }} overall.</span>
</div> </div>
</div>
<div id="main-mobile-container" class="flex">
<div id="user-content"> <div id="user-content">
@ -110,10 +117,6 @@ possible hacks
</div> </div>
</div> </div>
</div>
<!-- RIGHT CONTAINER SIDE-->
<div class="flex main-cols right-col">
<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 +135,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 +159,11 @@ possible hacks
</form> </form>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>

2
webroot/js/app.js
View File

@ -27,7 +27,7 @@ function setupApp() {
// style hackings // style hackings
window.VIDEOJS_NO_DYNAMIC_STYLE = true; window.VIDEOJS_NO_DYNAMIC_STYLE = true;
setVHvar(); // setVHvar();
// init messaging interactions // init messaging interactions

8
webroot/js/message.js
View File

@ -99,12 +99,16 @@ 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.remove("no-chat");
} else {
this.tagAppContainer.classList.add("no-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'
}); });

97
webroot/styles/layout.css
View File

@ -2,7 +2,7 @@
: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; --vh: 1vh;
} }
@ -184,7 +184,7 @@ header h1 {
/* ************************************************8 */ /* ************************************************8 */
#chat-container { #xchat-container {
position: fixed; position: fixed;
z-index: 9; z-index: 9;
right: 0; right: 0;
@ -248,13 +248,13 @@ header h1 {
/* ************************************************8 */ /* ************************************************8 */
/*
.no-chat .left-col { .no-chat .left-col {
width: 100vw; width: 100vw;
} }
.no-chat .right-col { .no-chat .right-col {
display: none; display: none;
} } */
.no-chat #chat-toggle { .no-chat #chat-toggle {
opacity: .75; opacity: .75;
@ -273,7 +273,7 @@ header h1 {
--right-col-width: 20em; --right-col-width: 20em;
} }
#chat-container { #xchat-container {
width: var(--right-col-width); width: var(--right-col-width);
} }
.left-col { .left-col {
@ -283,7 +283,7 @@ header h1 {
/* ************************************************8 */ /* ************************************************8 */
/*
@media screen and (max-width: 640px ) { @media screen and (max-width: 640px ) {
#main-content-container { #main-content-container {
flex-direction: column; flex-direction: column;
@ -312,7 +312,7 @@ header h1 {
#user-content { #user-content {
display: none; display: none;
} }
#chat-container { #xchat-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
@ -331,15 +331,15 @@ header h1 {
.no-chat .right-col { .no-chat .right-col {
display: none; display: none;
} }
.no-chat #stream-info { .no-chat #xstream-info {
display: flex; display: flex;
} }
.no-chat #user-content { .no-chat #user-content {
display: block; display: block;
} }
} } */
/*
.message-input-focus #main-content-container { .message-input-focus #main-content-container {
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -377,4 +377,81 @@ header h1 {
height: 40vh; height: 40vh;
height: calc((var(--vh, 1vh) * 40)); height: calc((var(--vh, 1vh) * 40));
min-height: 300px; min-height: 300px;
} */
/* ************************************************8 */
/* ************************************************8 */
.touch-screen header {
position: relative;
}
.touch-screen #fixed-content {
position: fixed;
left: 0;
top: 0;
width: 100%;
}
.touch-screen #main-content-container {
display: none;
}
.touch-screen #stream-info {
height: 2.5em;
overflow: hidden;
}
#main-mobile-container {
flex-direction: column;
margin-top: calc(var(--header-height) + var(--video-container-height));
}
.touch-screen #video-container {
height: var(--video-container-height);
}
.touch-screen .owncast-video-container {
height: 100%;
}
.touch-screen #user-content {
display: none;
}
.touch-screen #chat-container {
display: block;
}
.touch-screen.no-chat #user-content {
display: block;
}
.touch-screen.no-chat #chat-container {
display: none;
}
@media screen and (max-width: 640px ) {
:root {
--video-container-height: 36vh;
}
}
@media screen and (orientation: landscape) and (min-width: 1024px) {
:root {
--video-container-height: 65vh;
}
}
@media screen and (orientation: landscape) and (max-width: 1024px) {
:root {
--video-container-height: 75vh;
}
#main-mobile-container {
margin-top: calc(var(--header-height) + var(--video-container-height));
}
.touch-screen #user-content {
display: block;
}
.touch-screen #chat-container {
display: none;
}
.touch-screen #chat-toggle {
display: none;
}
} }