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

progress. implement chat toggling

pull/5/head
Ginger Wong 5 years ago
parent
9b2e4f40c9
commit
eb223ed905
5 changed files with 275 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 71
      webroot/index.html
  2. 29
      webroot/js/app.js
  3. 107
      webroot/js/message.js
  4. 116
      webroot/styles/layout.css
  5. 2
      webroot/vendor/autolink.js

71
webroot/index.html
Unescape View File

@ -17,15 +17,37 @@ @@ -17,15 +17,37 @@
</head>
<body>
<div id="app-container" class="flex">
<div id="app-container" class="flex no-chat">
<header class="flex">
<h1>
Maybe a header
😈 Owncast
</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>
<div id="main-content-container" class="flex nxo-chat">
<div id="main-content-container" class="flex">
<!-- LEFT CONTAINER SIDE-->
<div class="flex main-cols left-col">
@ -33,25 +55,13 @@ @@ -33,25 +55,13 @@
<video
id="video"
preload="auto"
autoplay
controls
src="https://ia800300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
></video>
</div>
<div id="info">
<div id="stream-info">
{{ 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>
@ -60,17 +70,12 @@ If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear t @@ -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="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 class="message flex">
<img
v-bind:src="message.image"
class="message-avatar rounded-full"
/>
<div class="message-content">
<p class="message-author">{{ message.author }}</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 @@ -79,9 +84,10 @@ Apple Watch checks for unusually high or low heart rates in the background, whic
</div>
</div>
<div id="chat-input-container" class="shadow-md">
<form id="chat-form" class="flex" @submit="submitChatForm">
<input type="hidden" name="inputAuthor" id="inputAuthor" v-model="message.author" />
<div id="message-input-container" class="shadow-md">
<form id="message-form" class="flex" @submit="submitChatForm">
<input type="hidden" name="inputAuthor" id="self-message-author" v-model="message.author" />
<!-- Author -->
<!-- <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 @@ -99,15 +105,16 @@ Apple Watch checks for unusually high or low heart rates in the background, whic
placeholder="Message"
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"
>
</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>
</div>
</div>

29
webroot/js/app.js
Unescape View File

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

107
webroot/js/message.js
Unescape View File

@ -18,4 +18,111 @@ class Message { @@ -18,4 +18,111 @@ class Message {
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
Unescape View File

@ -34,15 +34,91 @@ header { @@ -34,15 +34,91 @@ header {
left: 0;
background-color: var(--header-bg-color);
z-index: 10;
flex-direction: row;
justify-content: space-between;
}
header h1 {
font-size: 1.25em;
font-weight: bold;
font-weight: 100;
letter-spacing: 1.2;
text-transform: uppercase;
color: #ddd;
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 {
width: 100%;
@ -61,6 +137,8 @@ header h1 { @@ -61,6 +137,8 @@ header h1 {
width: calc(100vw - var(--right-col-width));
}
/* ************************************************8 */
#video-container {
width: 100%;
height: auto;
@ -74,6 +152,18 @@ header h1 { @@ -74,6 +152,18 @@ header h1 {
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 {
position: fixed;
z-index: 9;
@ -87,22 +177,34 @@ header h1 { @@ -87,22 +177,34 @@ header h1 {
flex-direction: column;
justify-content: flex-end;
}
#messages-container {
overflow: auto;
padding: 1em 0;
}
#chat-input-container {
#message-input-container {
width: 100%;
border-top: 1px solid #eee;
padding: 1em;
background-color: #334;
}
#chat-form {
#message-form {
flex-direction: column;
align-items: flex-end;
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 {
padding: .85em;
@ -112,12 +214,17 @@ header h1 { @@ -112,12 +214,17 @@ header h1 {
height: 2.5em;
width: 2.5em;
margin-right: .75em;
/* background-color: rgba(236, 236, 236, .5); */
background-color: rgba(0,0,0, .75);
}
.message-content {
font-size: .85em;
}
.message-content a {
color: #6699cc;
}
.message-content a:hover {
text-decoration: underline;
}
.message-author {
font-weight: 600;
}
@ -125,6 +232,7 @@ header h1 { @@ -125,6 +232,7 @@ header h1 {
color: #ccc;
font-weight: 100;
}
/* ************************************************8 */
.no-chat .left-col {

2
webroot/vendor/autolink.js vendored
Unescape View File

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

Write Preview
Loading…
Cancel
Save