mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-22 20:45:58 +03:00
Code Issues Projects Releases Packages Wiki Activity

take out unused event listeners; layout fixes

Browse source
This commit is contained in:
Ginger Wong 2020-06-17 10:39:13 -07:00
parent cbe37d68ce
commit aad1a407b8
3 changed files with 20 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
webroot/index.html
View file

@ -23,23 +23,14 @@ GW TODO:
- remove listeners on unload? - remove listeners on unload?
- config customizations - config customizations
mobile yucks: - expand user name change text box on focus.chat
problems; - accessilbity
- mobile browsers need custom vh calculation due to browser chrome taken into consideration
- mobile chrome softkeyboard changes perceived width of page, alters layout
- chat windwo placementis messedup on orientation changes.. needs new vh.
orientationchange oly happens on mobile.
does orientationchange happen when keyboard appears?
- changing vh after orientation change sometimes yields same value
possible hacks
- if mobile, don't show chat + chat icon in landscape?..
*/ */
</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"> <main 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">
@ -151,7 +142,7 @@ possible hacks
<button <button
id="button-submit-message" id="button-submit-message"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
> Send > Chat
</button> </button>
</div> </div>
@ -163,7 +154,7 @@ possible hacks
</div> </div>
</div> </main>
<script src="js/usercolors.js"></script> <script src="js/usercolors.js"></script>
<script src="js/config.js"></script> <script src="js/config.js"></script>

23
webroot/js/message.js
View file

@ -54,7 +54,6 @@ class Messaging {
this.tagMessageFormWarning = document.querySelector("#message-form-warning"); this.tagMessageFormWarning = document.querySelector("#message-form-warning");
this.inputChangeUserName = document.querySelector("#username-change-input"); this.inputChangeUserName = document.querySelector("#username-change-input");
this.btnUpdateUserName = document.querySelector("#button-update-username"); this.btnUpdateUserName = document.querySelector("#button-update-username");
this.btnCancelUpdateUsername = document.querySelector("#button-cancel-change"); this.btnCancelUpdateUsername = document.querySelector("#button-cancel-change");
@ -79,8 +78,8 @@ class Messaging {
window.onorientationchange = this.handleOrientationChange.bind(this); window.onorientationchange = this.handleOrientationChange.bind(this);
this.handleOrientationChange(); this.handleOrientationChange();
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 { } else {
this.tagAppContainer.classList.add("desktop"); this.tagAppContainer.classList.add("desktop");
} }
@ -104,6 +103,7 @@ class Messaging {
if (this.chatDisplayed) { if (this.chatDisplayed) {
this.tagAppContainer.classList.add("chat"); this.tagAppContainer.classList.add("chat");
this.tagAppContainer.classList.remove("no-chat"); this.tagAppContainer.classList.remove("no-chat");
setTimeout(() => { jumpToBottom(); } , 50);
} else { } else {
this.tagAppContainer.classList.add("no-chat"); this.tagAppContainer.classList.add("no-chat");
this.tagAppContainer.classList.remove("chat"); this.tagAppContainer.classList.remove("chat");
@ -111,7 +111,6 @@ class Messaging {
} }
handleOrientationChange() { handleOrientationChange() {
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_
@ -129,14 +128,14 @@ class Messaging {
} }
} }
handleKeyboardAppear() { // handleKeyboardAppear() {
setTimeout(() => {this.tagAppContainer.classList.add("message-input-focus");}, 50); // setTimeout(() => {this.tagAppContainer.classList.add("message-input-focus");}, 50);
mobileVHhack(); // mobileVHhack();
} // }
handleKeyboardOut() { // handleKeyboardOut() {
setTimeout(() => {this.tagAppContainer.classList.remove("message-input-focus");}, 50); // setTimeout(() => {this.tagAppContainer.classList.remove("message-input-focus");}, 50);
mobileVHhack(); // mobileVHhack();
} // }
handleChatToggle() { handleChatToggle() {
this.chatDisplayed = !this.chatDisplayed; this.chatDisplayed = !this.chatDisplayed;

8
webroot/styles/layout.css
View file

@ -142,8 +142,9 @@ header h1 {
#video-container { #video-container {
height: calc(var(--video-container-height) - var(--header-height)); height: calc(var(--video-container-height));
width: 100%; width: 100%;
margin-top: var(--header-height);
} }
.owncast-video-container { .owncast-video-container {
@ -152,8 +153,6 @@ header h1 {
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.owncast-video-container .video-js { .owncast-video-container .video-js {
width: 100%; width: 100%;
@ -214,6 +213,7 @@ header h1 {
#messages-container { #messages-container {
overflow: auto; overflow: auto;
padding: 1em 0; padding: 1em 0;
min-height: 50vh;
} }
#message-input-container { #message-input-container {
width: 100%; width: 100%;
@ -359,7 +359,7 @@ header h1 {
.touch-screen #video-container { .touch-screen #video-container {
height: var(--video-container-height); margin-top: 0;
} }
.touch-screen .owncast-video-container { .touch-screen .owncast-video-container {
height: 100%; height: 100%;