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

Merge branch '0718-refactor-touchscreenlayout'

pull/80/head
Ginger Wong 5 years ago
parent
edec533eef 72ccc70a56
commit
14adead519
5 changed files with 95 additions and 145 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 39
      webroot/index.html
  2. 1
      webroot/js/app.js
  3. 22
      webroot/js/message.js
  4. 6
      webroot/js/utils.js
  5. 172
      webroot/styles/layout.css

39
webroot/index.html
Unescape 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
Unescape 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
Unescape 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
Unescape 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)
}

172
webroot/styles/layout.css
Unescape 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%;
} }
}
@media screen and (orientation: landscape) and (min-width: 1024px) { #chat-container {
:root { width: 100%;
--video-container-height: 65vh; 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;
@media screen and (orientation: landscape) and (max-width: 1024px) { }
:root .landscape { #user-content {
--video-container-height: 75vh; width: 100%;
}
#stream-info {
width: 100%;
} }
.touch-screen.landscape #chat-container-wrap { #video-container {
margin-top: calc(var(--header-height) + var(--video-container-height)); width: 100%;
} }
.touch-screen.landscape .user-content { .chat #video-container {
display: block; width: 100%;
} }
.touch-screen.landscape #chat-container { .chat #user-content {
display: none; display: none;
} }
.touch-screen.landscape #chat-toggle { .chat footer {
display: none; display: none;
} }
} }
/* 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 {
--video-container-height: 40vh;
}
.user-content {
flex-direction: column;
}
}

Write Preview
Loading…
Cancel
Save