mirror of
https://github.com/owncast/owncast.git
synced 2024-10-22 20:45:58 +03:00
progress. implement chat toggling
This commit is contained in:
Ginger Wong
parent
9b2e4f40c9
commit
eb223ed905
5 changed files with 274 additions and 49 deletions
|
|
@ -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 @@
|
|||
<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
|
|||
|
||||
<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
|
|||
</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
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -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() {
|
|||
},
|
||||
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()
|
||||
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 = ""
|
||||
this.message.body = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var appMessagingMisc = new Messaging();
|
||||
appMessagingMisc.init();
|
||||
}
|
||||
|
||||
async function getStatus() {
|
||||
|
|
@ -64,7 +67,7 @@ async function getStatus() {
|
|||
|
||||
}
|
||||
|
||||
var websocketReconnectTimer
|
||||
var websocketReconnectTimer;
|
||||
function setupWebsocket() {
|
||||
clearTimeout(websocketReconnectTimer)
|
||||
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -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 {
|
|||
width: calc(100vw - var(--right-col-width));
|
||||
}
|
||||
|
||||
/* ************************************************8 */
|
||||
|
||||
#video-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
|
@ -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 {
|
|||
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 {
|
|||
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 {
|
|||
color: #ccc;
|
||||
font-weight: 100;
|
||||
}
|
||||
/* ************************************************8 */
|
||||
|
||||
|
||||
.no-chat .left-col {
|
||||
|
|
|
|||
2
webroot/vendor/autolink.js
vendored
2
webroot/vendor/autolink.js
vendored
|
|
@ -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 +
|
||||
|
|
|
|||
Loading…
Reference in a new issue