LogalDeveloper/owncast
0
Fork 0
Code Activity

integrate message comp

Browse Source
This commit is contained in:
Ginger Wong
2020-08-13 02:08:14 -07:00
parent 64e7809c26
commit e1e4365692
3 changed files with 11 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
webroot/js/chat/chat.js
View File

@@ -3,8 +3,8 @@ import htm from 'https://unpkg.com/htm?module';
// Initialize htm with Preact // Initialize htm with Preact
const html = htm.bind(h); const html = htm.bind(h);
import SOCKET_MESSAGE_TYPES from '../utils/socketMessageTypes.js'; import SOCKET_MESSAGE_TYPES from '../utils/socket-message-types.js';
import Message from './message.js';
export default class Chat extends Component { export default class Chat extends Component {
constructor(props, context) { constructor(props, context) {
@@ -47,37 +47,19 @@ export default class Chat extends Component {
this.send(nameChange); this.send(nameChange);
} }
render() { render(props, state) {
const { username, userAvatarImage } = this.state; const { username, userAvatarImage } = props;
const { messages } = state;
return ( return (
html` html`
<section id="chat-container-wrap" class="flex"> <section id="chat-container-wrap" class="flex">
<div id="chat-container" class="bg-gray-800"> <div id="chat-container" class="bg-gray-800">
<div id="messages-container"> <div id="messages-container">
messages... ${
<!-- <div v-for="message in messages" v-cloak> messages.map(message => (html`<${Message} message=${message} />`))
<div class="message flex" v-if="message.type === 'CHAT'"> }
<div class="message-avatar rounded-full flex items-center justify-center" v-bind:style="{ backgroundColor: message.userColor() }"> messages..
<img
v-bind:src="message.image"
/>
</div>
<div class="message-content">
<p class="message-author text-white font-bold">{{ message.author }}</p>
<p class="message-text text-gray-400 font-thin " v-html="message.formatText()"></p>
</div>
</div>
<div class="message flex" v-else-if="message.type === 'NAME_CHANGE'">
<img
class="mr-2"
width="30px"
v-bind:src="message.image"
/>
<div class="text-white text-center">
<span class="font-bold">{{ message.oldName }}</span> is now known as <span class="font-bold">{{ message.newName }}</span>.
</div>
</div>
</div> -->
</div> </div>

2
webroot/js/chat/message.js
View File

@@ -6,7 +6,7 @@ const html = htm.bind(h);
import { messageBubbleColorForString } from '../utils/user-colors.js'; import { messageBubbleColorForString } from '../utils/user-colors.js';
import { formatMessageText } from '../utils/chat.js'; import { formatMessageText } from '../utils/chat.js';
import { generateAvatar } from '../utils.js'; import { generateAvatar } from '../utils.js';
import SOCKET_MESSAGE_TYPES from './chat/socket-message-types.js'; import SOCKET_MESSAGE_TYPES from '../utils/socket-message-types.js';
export default class Message extends Component { export default class Message extends Component {
render(props) { render(props) {

0
webroot/js/utils/socketMessageTypes.js → webroot/js/utils/socket-message-types.js
View File