Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '0718-refactor-touchscreenlayout'

Browse Source
This commit is contained in:
Ginger Wong 2020-07-19 15:13:40 -07:00
commit 14adead519
5 changed files with 100 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
webroot/index.html
View File

@ -15,8 +15,7 @@
</head> </head>
<body class="bg-gray-300 text-gray-800"> <body class="bg-gray-300 text-gray-800">
<div id="app-container" v-cloak class="flex no-chat">
<div id="app-container" class="flex no-chat">
<div id="top-content"> <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 v-cloak class="flex text-gray-400"> <h1 v-cloak class="flex text-gray-400">
@ -84,7 +83,7 @@
</section> </section>
</main> </main>
<section id="user-content" v-if="layout === 'desktop'" aria-label="User information"> <section id="user-content" aria-label="User information">
<user-details <user-details
v-bind:logo="logo" v-bind:logo="logo"
v-bind:platforms="socialHandles" v-bind:platforms="socialHandles"
@ -96,13 +95,13 @@
</section> </section>
<owncast-footer v-if="layout === 'desktop'" v-bind:app-version="appVersion"></owncast-footer> <owncast-footer v-bind:app-version="appVersion"></owncast-footer>
</div> </div>
<section id="chat-container-wrap" class="flex"> <section id="chat-container-wrap" class="flex">
<div v-if="layout !== 'desktop'" id="user-content-touch"> <!-- <div v-if="layout !== 'desktop'" id="user-content-touch">
<user-details <user-details
v-bind:logo="logo" v-bind:logo="logo"
v-bind:platforms="socialHandles" v-bind:platforms="socialHandles"
@ -114,7 +113,7 @@
<owncast-footer v-bind:app-version="appVersion"></owncast-footer> <owncast-footer v-bind:app-version="appVersion"></owncast-footer>
</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">
@ -165,7 +164,6 @@
</div> </div>
<script src="js/usercolors.js"></script> <script src="js/usercolors.js"></script>
<script src="js/utils.js"></script> <script src="js/utils.js"></script>
<script src="js/message.js"></script> <script src="js/message.js"></script>
@ -179,5 +177,32 @@
app.init(); app.init();
})(); })();
</script> </script>
<noscript>
<style>
[v-cloak] { display: none; }
.noscript {
text-align: center;
padding: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.noscript a {
display: inline;
color: blue;
text-decoration: underline;
}
</style>
<div class="noscript">
<img src="https://github.com/gabek/owncast/raw/master/doc/logo.png">
<br/>
<p>
This <a href="https://github.com/gabek/owncast" target="_blank">Owncast</a> stream requires Javascript to play.
</p>
</div>
</noscript>
</body> </body>
</html> </html>

1
webroot/js/app.js
View File

@ -46,7 +46,6 @@ class Owncast {
el: '#app-container', el: '#app-container',
data: { data: {
isOnline: false, isOnline: false,
layout: hasTouchScreen() ? 'touch' : 'desktop',
messages: [], messages: [],
overallMaxViewerCount: 0, overallMaxViewerCount: 0,
sessionMaxViewerCount: 0, sessionMaxViewerCount: 0,

22
webroot/js/message.js
View File

@ -74,12 +74,9 @@ class MessagingInterface {
this.initLocalStates(); this.initLocalStates();
if (hasTouchScreen()) { if (hasTouchScreen()) {
this.scrollableMessagesContainer = document.body; setVHvar();
window.addEventListener("orientationchange", setVHvar);
this.tagAppContainer.classList.add('touch-screen'); this.tagAppContainer.classList.add('touch-screen');
window.onorientationchange = this.handleOrientationChange.bind(this);
this.handleOrientationChange();
} else {
this.tagAppContainer.classList.add('desktop');
} }
} }
@ -115,20 +112,6 @@ class MessagingInterface {
} }
} }
handleOrientationChange() {
var isPortrait = Math.abs(window.orientation % 180) === 0;
if(!isPortrait) {
if (document.body.clientWidth < 1024) {
this.tagAppContainer.classList.add('no-chat');
this.tagAppContainer.classList.add('landscape');
}
} else {
if (this.chatDisplayed) {
this.tagAppContainer.classList.remove('no-chat');
}
this.tagAppContainer.classList.remove('landscape');
}
}
handleChatToggle() { handleChatToggle() {
this.chatDisplayed = !this.chatDisplayed; this.chatDisplayed = !this.chatDisplayed;
@ -249,7 +232,6 @@ class MessagingInterface {
this.formMessageInput.disabled = true; this.formMessageInput.disabled = true;
this.formMessageInput.placeholder = "Chat is offline." this.formMessageInput.placeholder = "Chat is offline."
} }
// also show "disabled" text/message somewhere.
} }
enableChat() { enableChat() {
if (this.formMessageInput) { if (this.formMessageInput) {

6
webroot/js/utils.js
View File

@ -144,3 +144,9 @@ function generateUsername() {
return `User ${(Math.floor(Math.random() * 42) + 1)}`; return `User ${(Math.floor(Math.random() * 42) + 1)}`;
} }
function setVHvar() {
var 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`);
console.log("== new vh", vh)
}

182
webroot/styles/layout.css
View File

@ -11,10 +11,10 @@ body {
font-size: 14px; font-size: 14px;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
/* vuejs attribute to hide things before content ready */
[v-cloak] { visibility: hidden; } [v-cloak] { visibility: hidden; }
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -323,9 +323,11 @@ h2 {
#video { #video {
transition: opacity .5s; transition: opacity .5s;
opacity: 0; opacity: 0;
pointer-events: none;
} }
.online #video { .online #video {
opacity: 1; opacity: 1;
pointer-events: auto;
} }
@ -364,6 +366,9 @@ h2 {
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
} }
.touch-screen #chat-container {
height: calc(100vh - var(--header-height) - 3vh);
}
#messages-container { #messages-container {
@ -426,83 +431,6 @@ h2 {
/* ************************************************8 */ /* ************************************************8 */
.landscape #chat-toggle {
display: none;
}
/* ************************************************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 {
flex-direction: column;
align-content: center;
}
.touch-screen .user-image {
margin: auto;
}
.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 {
margin-top: 0;
}
.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;
}
/* ************************************************8 */
@media screen and (max-width: 860px) { @media screen and (max-width: 860px) {
:root { :root {
@ -516,33 +444,12 @@ h2 {
} }
/* single col layout */
@media screen and (max-width: 640px ) { @media screen and (max-width: 640px ) {
:root { :root {
--video-container-height: 36vh; --right-col-width: 0;
--video-container-height: 40vh;
} }
.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 #footer,
.desktop.chat #user-content {
display: none;
}
#logo-container { #logo-container {
display: none; display: none;
} }
@ -552,29 +459,60 @@ h2 {
#user-options-container { #user-options-container {
max-width: 41%; max-width: 41%;
} }
#chat-container {
width: 100%;
position: static;
/* min-height: calc(100vh - var(--header-height)); */
height: calc(100vh - var(--header-height) - var(--video-container-height) - 3vh)
}
#messages-container {
min-height: unset;
}
#user-content {
width: 100%;
}
#stream-info {
width: 100%;
}
#video-container {
width: 100%;
}
.chat #video-container {
width: 100%;
}
.chat #user-content {
display: none;
}
.chat footer {
display: none;
}
} }
@media screen and (orientation: landscape) and (min-width: 1024px) { /* try not making the video fixed position for now */
@media (min-height: 861px) {
/* main {
position: fixed;
z-index: 9;
width: 100%;
}
#user-content {
margin-top: calc(var(--video-container-height) + var(--header-height) + 2em)
} */
}
@media screen and (max-height: 860px ) {
:root { :root {
--video-container-height: 65vh; --video-container-height: 40vh;
} }
} .user-content {
flex-direction: column;
@media screen and (orientation: landscape) and (max-width: 1024px) {
:root .landscape {
--video-container-height: 75vh;
}
.touch-screen.landscape #chat-container-wrap {
margin-top: calc(var(--header-height) + var(--video-container-height));
}
.touch-screen.landscape .user-content {
display: block;
}
.touch-screen.landscape #chat-container {
display: none;
}
.touch-screen.landscape #chat-toggle {
display: none;
} }
} }