LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

progress. implement chat toggling

Browse Source
This commit is contained in:
Ginger Wong 2020-06-13 20:15:31 -07:00
parent 9b2e4f40c9
commit eb223ed905
5 changed files with 274 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
webroot/index.html
View File

@ -17,15 +17,37 @@
</head> </head>
<body> <body>
<div id="app-container" class="flex"> <div id="app-container" class="flex no-chat">
<header class="flex"> <header class="flex">
<h1> <h1>
Maybe a header 😈 Owncast
</h1> </h1>
<span>💬</span>
<div id="user-options-container" class="flex">
<span id="chat-toggle" class="rounded-full">💬</span>
<div id="user-info">
<div id="user-info-display" title="Click to update user name" class="flex">
<img src="https://robohash.org/username123" id="username-avatar" class="rounded-full" />
<span id="username-display">Random Username 123</span>
</div>
<div id="user-info-change">
<input type="text"
id="username-change-input"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight focus:bg-white"
value="Random Username 123"
maxlength="100"
placeholder="Update username"
>
<button id="button-update-username" class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-1 rounded user-btn">Update</button>
<button id="button-cancel-change" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn" title="cancel">X</button>
</div>
</div>
</div>
</header> </header>
<div id="main-content-container" class="flex nxo-chat"> <div id="main-content-container" class="flex">
<!-- LEFT CONTAINER SIDE--> <!-- LEFT CONTAINER SIDE-->
<div class="flex main-cols left-col"> <div class="flex main-cols left-col">
@ -33,25 +55,13 @@
<video <video
id="video" id="video"
preload="auto" preload="auto"
autoplay
controls controls
src="https://ia800300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" src="https://ia800300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
></video> ></video>
</div> </div>
<div id="info"> <div id="stream-info">
{{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}. {{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.
Heart rate notifications.
Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.
<br>
If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear to have been inactive for 10 minutes, the user will receive a notification. Patients can adjust the threshold bpm or turn these notifications on or off. All heart rate notifications — along with date, time, and heart rate — can be viewed in the Health app on iPhone.
<br>
Heart rate notifications.
Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.
<br>
If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear to have been inactive for 10 minutes, the user will receive a notification. Patients can adjust the threshold bpm or turn these notifications on or off. All heart rate notifications — along with date, time, and heart rate — can be viewed in the Health app on iPhone.
</div> </div>
</div> </div>
@ -60,17 +70,12 @@ If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear t
<div id="chat-container"> <div id="chat-container">
<div id="messages-container"> <div id="messages-container">
Heart rate notifications.
Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.— can be viewed in the Health app on iPhone.
<div v-for="(message, index) in messages"> <div v-for="(message, index) in messages">
<div class="message flex"> <div class="message flex">
<img <img
v-bind:src="message.image" v-bind:src="message.image"
class="message-avatar rounded-full" class="message-avatar rounded-full"
/> />
<div class="message-content"> <div class="message-content">
<p class="message-author">{{ message.author }}</p> <p class="message-author">{{ message.author }}</p>
<p class="message-text"v-html="message.linkedText()"></p> <p class="message-text"v-html="message.linkedText()"></p>
@ -79,9 +84,10 @@ Apple Watch checks for unusually high or low heart rates in the background, whic
</div> </div>
</div> </div>
<div id="chat-input-container" class="shadow-md"> <div id="message-input-container" class="shadow-md">
<form id="chat-form" class="flex" @submit="submitChatForm"> <form id="message-form" class="flex" @submit="submitChatForm">
<input type="hidden" name="inputAuthor" id="inputAuthor" v-model="message.author" />
<input type="hidden" name="inputAuthor" id="self-message-author" v-model="message.author" />
<!-- Author --> <!-- Author -->
<!-- <label class="control-label" for="inputAuthor">Author</label> <!-- <label class="control-label" for="inputAuthor">Author</label>
@ -99,15 +105,16 @@ Apple Watch checks for unusually high or low heart rates in the background, whic
placeholder="Message" placeholder="Message"
v-model="message.body" v-model="message.body"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 leading-tight focus:bg-white" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 leading-tight focus:bg-white"
> ></textarea>
</textarea>
<div id="message-form-actions" class="flex">
<span id="message-form-warning">X chars left</span>
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
> Send
</button>
</div>
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
>
Send
</button>
</form> </form>
</div> </div>
</div> </div>

27
webroot/js/app.js
View File

@ -1,14 +1,14 @@
function setupApp() { function setupApp() {
Vue.filter('plural', function (string, count) { Vue.filter('plural', function (string, count) {
if (count === 1) { if (count === 1) {
return string return string;
} else { } else {
return string + "s" return string + "s";
} }
}) })
window.app = new Vue({ window.app = new Vue({
el: "#info", el: "#stream-info",
data: { data: {
streamStatus: "", streamStatus: "",
viewerCount: 0, viewerCount: 0,
@ -32,17 +32,20 @@ function setupApp() {
}, },
methods: { methods: {
submitChatForm: function (e) { submitChatForm: function (e) {
const message = new Message(this.message) const message = new Message(this.message);
message.id = uuidv4() message.id = uuidv4();
localStorage.author = message.author localStorage.author = message.author;
const messageJSON = JSON.stringify(message) const messageJSON = JSON.stringify(message);
window.ws.send(messageJSON) window.ws.send(messageJSON);
e.preventDefault() e.preventDefault();
this.message.body = "" this.message.body = "";
} }
} }
}); });
var appMessagingMisc = new Messaging();
appMessagingMisc.init();
} }
async function getStatus() { async function getStatus() {
@ -64,7 +67,7 @@ async function getStatus() {
} }
var websocketReconnectTimer var websocketReconnectTimer;
function setupWebsocket() { function setupWebsocket() {
clearTimeout(websocketReconnectTimer) clearTimeout(websocketReconnectTimer)
@ -138,7 +141,7 @@ setupWebsocket()
// } // }
function scrollSmoothToBottom(id) { function scrollSmoothToBottom(id) {
const div = document.getElementById(id) const div = document.getElementById(id);
$('#' + id).animate({ $('#' + id).animate({
scrollTop: div.scrollHeight - div.clientHeight scrollTop: div.scrollHeight - div.clientHeight
}, 500) }, 500)

107
webroot/js/message.js
View File

@ -18,4 +18,111 @@ class Message {
id: this.id id: this.id
} }
} }
}
// convert newlines to <br>s
class Messaging {
constructor() {
this.chatDisplayed = false;
this.username = "";
this.avatarSource = "https://robohash.org/";
this.messageCharCount = 0;
this.maxMessageLength = 500;
this.tagChatToggle = document.querySelector("#chat-toggle");
this.tagUserInfoDisplay = document.querySelector("#user-info-display");
this.tagUserInfoChanger = document.querySelector("#user-info-change");
this.tagUsernameDisplay = document.querySelector("#username-display");
this.imgUsernameAvatar = document.querySelector("#username-avatar");
this.tagMessageAuthor = document.querySelector("#self-message-author");
this.tagMessageFormWarning = document.querySelector("#message-form-warning");
this.tagAppContainer = document.querySelector("#app-container");
this.inputChangeUserName = document.querySelector("#username-change-input");
this.btnUpdateUserName = document.querySelector("#button-update-username");
this.btnCancelUpdateUsername = document.querySelector("#button-cancel-change");
this.formMessageInput = document.querySelector("#inputBody");
}
init() {
this.tagChatToggle.addEventListener("click", this.handleChatToggle);
this.tagUsernameDisplay.addEventListener("click", this.handleShowChangeNameForm);
this.btnUpdateUserName.addEventListener("click", this.handleUpdateUsername);
this.btnCancelUpdateUsername.addEventListener("click", this.handleHideChangeNameForm);
this.inputChangeUserName.addEventListener("keydown", this.handleUsernameKeydown);
this.formMessageInput.addEventListener("keyup", this.handleMessageInputKeydown);
}
handleChatToggle = () => {
if (this.chatDisplayed) {
this.tagAppContainer.className = "flex no-chat";
this.chatDisplayed = false;
} else {
this.tagAppContainer.className = "flex";
this.chatDisplayed = true;
}
}
handleShowChangeNameForm = () => {
this.tagUserInfoDisplay.style.display = "none";
this.tagUserInfoChanger.style.display = "flex";
}
handleHideChangeNameForm = () => {
this.tagUserInfoDisplay.style.display = "flex";
this.tagUserInfoChanger.style.display = "none";
}
handleUpdateUsername = () => {
var newValue = this.inputChangeUserName.value;
newValue = newValue.trim();
// do other string cleanup?
if (newValue) {
this.userName = newValue;
this.inputChangeUserName.value = newValue;
this.tagMessageAuthor.innerText = newValue;
this.tagUsernameDisplay.innerText = newValue;
this.imgUsernameAvatar.src = this.avatarSource + newValue;
}
this.handleHideChangeNameForm();
}
handleUsernameKeydown = event => {
if (event.keyCode === 13) { // enter
this.handleUpdateUsername();
} else if (event.keyCode === 27) { // esc
this.handleHideChangeNameForm();
}
}
handleMessageInputKeydown = event => {
console.log("keydown text", event.keyCode + ", " + this.formMessageInput.value + " , ", this.formMessageInput.value.length)
// if event.isComposing ||
if (event.keyCode === 13) { // enter
if (!this.prepNewLine) {
// submit
return;
}
this.prepNewLine = false;
} else {
this.prepNewLine = false;
}
if (event.keyCode === 16 || event.keyCode === 17) { // ctrl, shift
this.prepNewLine = true;
}
// var numChars = this.value.
}
} }

116
webroot/styles/layout.css
View File

@ -34,15 +34,91 @@ header {
left: 0; left: 0;
background-color: var(--header-bg-color); background-color: var(--header-bg-color);
z-index: 10; z-index: 10;
flex-direction: row;
justify-content: space-between;
} }
header h1 { header h1 {
font-size: 1.25em; font-size: 1.25em;
font-weight: bold; font-weight: 100;
letter-spacing: 1.2;
text-transform: uppercase;
color: #ddd; color: #ddd;
padding: .5em; padding: .5em;
white-space: nowrap;
} }
#chat-toggle {
margin-right: 2em;
cursor: pointer;
background-color: #000;
border: 1px solid green;
display: inline-block;
padding: .25em;
height: 2em;
width: 2em;
text-align: center;
}
/* ************************************************8 */
#user-options-container {
padding: .5em 1em;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
#user-info-display {
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
}
#username-avatar {
height: 1.75em;
width: 1.75em;
margin-right: .5em;
border: 1px solid rgba(255,255,255,.25)
}
#username-display {
font-weight: bold;
font-size: .75em;
color: #516FEB
}
#user-info-display:hover {
transition: opacity .2s;
opacity: .75;
}
#user-info-change {
display: flex;
justify-content: flex-end;
align-items: center;
}
#username-change-input {
font-size: .75em;
}
#button-update-username {
font-size: .65em;
text-transform: uppercase;
height: 2.5em;
}
#button-cancel-change {
color: rgba(255,255,255,.5);
cursor: pointer;
height: 2.5em;
font-size: .65em;
}
.user-btn {
margin: 0 .25em;
}
/* ************************************************8 */
#main-content-container { #main-content-container {
width: 100%; width: 100%;
@ -61,6 +137,8 @@ header h1 {
width: calc(100vw - var(--right-col-width)); width: calc(100vw - var(--right-col-width));
} }
/* ************************************************8 */
#video-container { #video-container {
width: 100%; width: 100%;
height: auto; height: auto;
@ -74,6 +152,18 @@ header h1 {
display: block; display: block;
} }
#stream-info {
padding: .5em;
text-align: center;
font-family: monospace;
font-size: .75em;
background-color: rgba(0,0,0,.5);
border-bottom: 1px solid black;
}
/* ************************************************8 */
#chat-container { #chat-container {
position: fixed; position: fixed;
z-index: 9; z-index: 9;
@ -87,22 +177,34 @@ header h1 {
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
} }
#messages-container { #messages-container {
overflow: auto; overflow: auto;
padding: 1em 0; padding: 1em 0;
} }
#chat-input-container { #message-input-container {
width: 100%; width: 100%;
border-top: 1px solid #eee; border-top: 1px solid #eee;
padding: 1em; padding: 1em;
background-color: #334; background-color: #334;
} }
#chat-form { #message-form {
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
margin-bottom: 0; margin-bottom: 0;
} }
#message-form-actions {
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
#message-form-warning {
font-size: .75em;
}
/* ************************************************8 */
.message { .message {
padding: .85em; padding: .85em;
@ -112,12 +214,17 @@ header h1 {
height: 2.5em; height: 2.5em;
width: 2.5em; width: 2.5em;
margin-right: .75em; margin-right: .75em;
/* background-color: rgba(236, 236, 236, .5); */
background-color: rgba(0,0,0, .75); background-color: rgba(0,0,0, .75);
} }
.message-content { .message-content {
font-size: .85em; font-size: .85em;
} }
.message-content a {
color: #6699cc;
}
.message-content a:hover {
text-decoration: underline;
}
.message-author { .message-author {
font-weight: 600; font-weight: 600;
} }
@ -125,6 +232,7 @@ header h1 {
color: #ccc; color: #ccc;
font-weight: 100; font-weight: 100;
} }
/* ************************************************8 */
.no-chat .left-col { .no-chat .left-col {

2
webroot/vendor/autolink.js vendored
View File

@ -113,7 +113,7 @@ AutoLink.prototype = {
var text = this.options.removeHTTP ? removeHTTP(match) : match var text = this.options.removeHTTP ? removeHTTP(match) : match
return ( return (
p1 + p1 +
'<a href="' + '<a target="_blank" href="' +
match + match +
'"' + '"' +
this.attrs + this.attrs +