mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 12:49:37 +03:00
Code Issues Projects Releases Packages Wiki Activity

make edits for a messages-only view of the chat module

Browse source
This commit is contained in:
Ginger Wong 2020-08-19 00:16:35 -07:00
parent ebc852b430
commit d7b8058264
5 changed files with 135 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
webroot/js/chat/chat-input.js
View file

@ -18,6 +18,7 @@ export default class ChatInput extends Component {
constructor(props, context) {
super(props, context);
this.formMessageInput = createRef();
this.emojiPickerButton = createRef();
this.messageCharCount = 0;
this.maxMessageLength = 500;
@ -65,10 +66,7 @@ export default class ChatInput extends Component {
custom: json,
initialCategory: 'custom',
showPreview: false,
position: {
top: '50%',
right: '100'
},
position: 'top'
});
this.emojiPicker.on('emoji', emoji => {
this.handleEmojiSelected(emoji);
@ -81,7 +79,7 @@ export default class ChatInput extends Component {
handleEmojiButtonClick() {
if (this.emojiPicker) {
this.emojiPicker.togglePicker(this.emojiPicker);
this.emojiPicker.togglePicker(this.emojiPickerButton.current);
}
}
@ -253,20 +251,26 @@ export default class ChatInput extends Component {
onPaste=${this.handlePaste}
/>
<button
type="button"
style=${emojiButtonStyle}
onclick=${this.handleEmojiButtonClick}
>😏</button>
<div id="message-form-actions" class="flex">
<span id="message-form-warning" class="text-red-600 text-xs">${inputWarning}</span>
<button
onclick=${this.handleSubmitChatButton}
type="button"
id="button-submit-message"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
> Chat
</button>
<div id="message-form-actions-buttons" class="flex">
<button
ref=${this.emojiPickerButton}
id="emoji-button"
type="button"
style=${emojiButtonStyle}
onclick=${this.handleEmojiButtonClick}
>😏</button>
<button
onclick=${this.handleSubmitChatButton}
type="button"
id="button-submit-message"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
> Chat
</button>
</div>
</div>
</div>
`);

30
webroot/js/chat/chat.js
View file

@ -128,18 +128,6 @@ export default class Chat extends Component {
this.disableChat()
}
// handleSubmitChatButton(event) {
// const { inputValue } = this.state;
// var value = inputValue.trim();
// if (value) {
// this.submitChat(value);
// event.preventDefault();
// return false;
// }
// event.preventDefault();
// return false;
// }
submitChat(content) {
if (!content) {
return;
@ -186,18 +174,26 @@ export default class Chat extends Component {
render(props, state) {
const { username } = props;
const { username, messagesOnly } = props;
const { messages, inputEnabled, chatUserNames } = state;
const messageList = messages.map((message) => (html`<${Message} message=${message} username=${username} key=${message.id} />`));
if (messagesOnly) {
return (
html`
<div id="messages-container">
${messageList}
</div>
`);
}
return (
html`
<section id="chat-container-wrap" class="flex">
<div id="chat-container" class="bg-gray-800">
<div id="messages-container">
${
messages.map(message => (html`<${Message} message=${message} username=${username} />`))
}
messages..
${messageList}
</div>
<${ChatInput}
chatUserNames=${chatUserNames}

26
webroot/js/chat/standalone.js
View file

@ -1,4 +1,8 @@
import { html, Component } from "https://unpkg.com/htm/preact/index.mjs?module";
import { h, Component, Fragment } from 'https://unpkg.com/preact?module';
import htm from 'https://unpkg.com/htm?module';
const html = htm.bind(h);
import UsernameForm from './username.js';
import Chat from './chat.js';
import Websocket from '../websocket.js';
@ -33,10 +37,26 @@ export default class StandaloneChat extends Component {
}
render(props, state) {
const { messagesOnly } = props;
const { username, userAvatarImage, websocket } = state;
if (messagesOnly) {
return (
html`
<${Chat}
websocket=${websocket}
username=${username}
userAvatarImage=${userAvatarImage}
chatEnabled
messagesOnly
/>
`);
}
return (
html`
<div class="flex">
<${Fragment}>
<${UsernameForm}
username=${username}
userAvatarImage=${userAvatarImage}
@ -50,7 +70,7 @@ export default class StandaloneChat extends Component {
userAvatarImage=${userAvatarImage}
chatEnabled
/>
</div>
</${Fragment}>
`);
}

7
webroot/standalone-chat.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link href="./styles/layout.css" rel="stylesheet" />
<!-- <link href="./styles/layout.css" rel="stylesheet" /> -->
<link href="./styles/chat.css" rel="stylesheet" />
<link href="./styles/standalone-chat.css" rel="stylesheet" />
@ -20,8 +20,11 @@
<script type="module">
import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module";
import StandaloneChat from './js/chat/standalone.js';
const messagesOnly = true;
(function () {
render(html`<${StandaloneChat} />`, document.getElementById("chat-container"));
render(html`<${StandaloneChat} messagesOnly=${messagesOnly} />`, document.getElementById("chat-container"));
})();
</script>
</body>

135
webroot/styles/chat.css
View file

@ -3,6 +3,7 @@
overflow: auto;
padding: 1em 0;
}
#message-input-container {
width: 100%;
padding: 1em;
@ -13,22 +14,8 @@
align-items: flex-end;
margin-bottom: 0;
}
#message-body-form {
font-size: 1em;
height: 60px;
}
#message-body-form:disabled{
opacity: .5;
}
#message-body-form img {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
#message-body-form .emoji {
width: 40px;
}
#message-form-actions {
flex-direction: row;
@ -37,16 +24,22 @@
width: 100%;
}
.message-text img {
display: inline;
padding-left: 5px;
padding-right: 5px;
#message-form-actions-buttons {
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.message-text .emoji {
width: 60px;
/* Emoji picker button */
#emoji-button {
font-size: 1.75em;
cursor: pointer;
margin-right: .5em;
}
.emoji-picker__wrapper {}
.message {
@ -68,13 +61,37 @@
max-width: 85%;
word-wrap: break-word;
}
.message-content a {
/* MESSAGE TEXT CONTENT */
/* MESSAGE TEXT CONTENT */
/* MESSAGE TEXT CONTENT */
.message-text a {
color: #7F9CF5; /* indigo-400 */
}
.message-content a:hover {
.message-text a:hover {
text-decoration: underline;
}
.message-text img {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
.message-text code {
background-color:darkslategrey;
padding: 3px;
}
.message-text .emoji {
width: 60px;
}
.message-text iframe {
width: 100%;
@ -86,57 +103,27 @@
height: 314px;
}
.message-text code {
background-color:darkslategrey;
padding: 3px;
}
/* Emoji picker */
#emoji-button {
position: relative;
top: -65px;
right: 10px;
cursor: pointer;
}
.message-text .embedded-image {
width: 100%;
height: 170px;
border-radius: 15px;
}
.message-text code {
background-color:darkslategrey;
padding: 3px;
}
/* Emoji picker */
#emoji-button {
position: relative;
top: -65px;
right: 10px;
cursor: pointer;
}
.message-text .embedded-image {
width: 100%;
height: 170px;
border-radius: 15px;
}
.message-text code {
background-color:darkslategrey;
padding: 3px;
}
.message-text .highlighted {
color: orange;
font-weight: 400;
font-size: 14px;
}
/* MESSAGE TEXT CONTENT */
/* MESSAGE TEXT CONTENT */
/* MESSAGE TEXT CONTENT */
/* MESSAGE TEXT CONTENT */
.message-text code {
background-color:darkslategrey;
padding: 3px;
}
/*
The chat input has a fake placeholder that is styled below.
@ -144,6 +131,30 @@ It pulls the placeholder text from the div's placeholder attribute.
But really it's just the innerHTML content.
*/
#message-body-form {
font-size: 1em;
height: 60px;
}
#message-body-form:disabled{
opacity: .5;
}
#message-body-form img {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
#message-body-form .emoji {
width: 40px;
}
/* If the div is empty then show the placeholder */
#message-body-form:empty:before{
content: attr(placeholder);