stream day 5
This commit is contained in:
161
components/MessagePane.vue
Normal file
161
components/MessagePane.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="h-full bg-[hsl(220,calc(1*7.7%),22.9%)] relative text-white">
|
||||
<div class="w-full h-[calc(100%-60px)] overflow-y-scroll pb-1"
|
||||
id="conversation-pane">
|
||||
<div>
|
||||
<div v-if="!conversation">
|
||||
<p>No messages yet</p>
|
||||
</div>
|
||||
<div v-else
|
||||
v-for="message in conversation">
|
||||
<div class="message-container">
|
||||
<div>
|
||||
<div class="message-sender-text">
|
||||
<p :class="(message.userId == user.id) ? 'message-sender-you' : 'message-sender'">
|
||||
{{ message.userId }}</p>
|
||||
<p class="break-words max-w-full">{{ message.body }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conversation-input w-[calc(100vw-88px-240px)]">
|
||||
<form @submit.prevent="sendMessage"
|
||||
@keydown.enter="sendMessage"
|
||||
class="relative px-4 w-full">
|
||||
<div id="textbox"
|
||||
class="px-4 rounded-md w-full h-[44px] bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[hsl(218,calc(1*4.6%),46.9%)] flex flex-row">
|
||||
<textarea type="text"
|
||||
id="messageBox"
|
||||
class="bg-transparent focus:outline-none py-2 w-full resize-none leading-relaxed"
|
||||
v-model="messageContent"
|
||||
placeholder="Send a Message..." />
|
||||
<input type="submit"
|
||||
class="absolute -top-full -left-full invisible"
|
||||
id="submit">
|
||||
<label for="submit"
|
||||
class="py-1 px-1.5 h-fit my-auto cursor-pointer"
|
||||
role="button"><svg width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1L21 3" />
|
||||
</svg></label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script async setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { useGlobalStore } from '~/stores/store';
|
||||
import { io } from 'socket.io-client'
|
||||
|
||||
export default {
|
||||
props: ['server'],
|
||||
data() {
|
||||
return {
|
||||
user: useGlobalStore().user,
|
||||
messageContent: '',
|
||||
conversation: this.server.messages
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const route = useRoute()
|
||||
const socket = io();
|
||||
|
||||
const conversationDiv = document.getElementById('conversation-pane');
|
||||
if (!conversationDiv) throw new Error('wtf');
|
||||
setTimeout(() => {
|
||||
conversationDiv.scrollTop = conversationDiv.scrollHeight;
|
||||
})
|
||||
|
||||
socket.on('connect', () => {
|
||||
// listen for messages from the server
|
||||
socket.on(`message-${route.params.id}`, (ev) => {
|
||||
const { message } = ev
|
||||
console.log(message.userId, this.user.id, message, this.conversation)
|
||||
if (message.userId == this.user.id) return;
|
||||
|
||||
this.conversation.push(message)
|
||||
|
||||
const lastElementChild = conversationDiv.children[0]?.lastElementChild
|
||||
if (!lastElementChild) return;
|
||||
|
||||
setTimeout(() => {
|
||||
console.log(conversationDiv.scrollTop, conversationDiv.scrollHeight, conversationDiv.clientHeight, lastElementChild.clientHeight, (conversationDiv.scrollHeight - conversationDiv.clientHeight) - lastElementChild.clientHeight)
|
||||
if (conversationDiv.scrollTop + 11.2 < (conversationDiv.scrollHeight - conversationDiv.clientHeight) - lastElementChild.clientHeight) return;
|
||||
conversationDiv.scrollTop = conversationDiv.scrollHeight;
|
||||
})
|
||||
})
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
async sendMessage() {
|
||||
const route = useRoute()
|
||||
if (!this.messageContent) return;
|
||||
|
||||
const { message } = await $fetch(`/api/channels/sendMessage`, { method: 'post', body: { body: this.messageContent, channelId: route.params.id } })
|
||||
|
||||
this.conversation.push(message)
|
||||
this.messageContent = '';
|
||||
const conversationDiv = document.getElementById('conversation-pane');
|
||||
if (!conversationDiv) throw new Error('wtf');
|
||||
setTimeout(() => {
|
||||
conversationDiv.scrollTop = conversationDiv.scrollHeight;
|
||||
})
|
||||
},
|
||||
// resizeTextarea() {
|
||||
// const textArea = document.getElementById('messageBox')
|
||||
// const textBox = document.getElementById('textBox')
|
||||
// var taLineHeight = 26; // This should match the line-height in the CSS
|
||||
// var taHeight = textArea.scrollHeight; // Get the scroll height of the textarea
|
||||
// textArea.style.height = taHeight + 'px'; // This line is optional, I included it so you can more easily count the lines in an expanded textarea
|
||||
// textBox.style.height = taHeight + 'px';
|
||||
// var numberOfLines = Math.floor(taHeight / taLineHeight);
|
||||
// console.log("there are " + numberOfLines + " lines in the text area");
|
||||
// console.log('a')
|
||||
// }
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.conversation-input {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
flex-direction: row;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
height: 60px;
|
||||
background-color: hsl(220, calc(1 * 7.7%), 22.9%);
|
||||
bottom: calc(0px - 0.5rem);
|
||||
}
|
||||
|
||||
.message-container {
|
||||
transition: backdrop-filter 150ms cubic-bezier(.37, .64, .59, .33);
|
||||
margin-top: 0.35rem;
|
||||
margin-bottom: 0.35rem;
|
||||
padding-left: 1.75rem;
|
||||
padding-right: 1.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.message-container:hover {
|
||||
backdrop-filter: brightness(1.15);
|
||||
}
|
||||
|
||||
.message-sender-you {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@@ -19,7 +19,7 @@
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="overflow-y-scroll my-2 flex gap-y-2 flex-col">
|
||||
<nuxt-link v-for="server in servers" :to="'/channel/' + server.id">
|
||||
<nuxt-link v-for="server in user.servers" :to="'/channel/' + server.channels[0].id">
|
||||
<div :key="server.id"
|
||||
@click="openServer(server.id, 'servers')"
|
||||
class="bg-zinc-600/80 p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-zinc-500/60 duration-300 h-[56px] w-[56px]">
|
||||
@@ -87,7 +87,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useServerStore } from '~/stores/servers'
|
||||
import { useGlobalStore } from '~/stores/store'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -98,16 +98,16 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
async createServer() {
|
||||
const serverStore = useServerStore();
|
||||
const globalStore = useGlobalStore();
|
||||
const { server } = await $fetch('/api/channels/create', { method: 'post', body: { serverName: this.serverName } })
|
||||
this.createServerModelOpen = false;
|
||||
this.serverName = '';
|
||||
serverStore.addServer(server)
|
||||
globalStore.addServer(server)
|
||||
},
|
||||
openServer(id: string, type: string): void {
|
||||
useServerStore().setActive(type, id)
|
||||
useGlobalStore().setActive(type, id)
|
||||
}
|
||||
},
|
||||
props: ['servers']
|
||||
props: ['user']
|
||||
}
|
||||
</script>
|
||||
@@ -1,9 +1,12 @@
|
||||
<template>
|
||||
<div class="flex bg-[hsl(223,calc(1*6.9%),19.8%)] min-w-60 w-60 h-screen shadow-sm text-white select-none">
|
||||
<div
|
||||
class="bg-[hsl(223,calc(1*6.9%),19.8%)] min-w-60 w-60 h-screen shadow-sm text-white select-none grid grid-rows-[93.5%_1fr]">
|
||||
<div v-if="!server.id || server.DM == true">
|
||||
<div>
|
||||
<nuxt-link v-for="dm in user.channels" :to="'/channel/@me/' + dm.id">
|
||||
<div class="mx-2 my-4 hover:bg-[hsl(223,calc(1*6.9%),25.8%)] px-2 py-2 w-[calc(240px-1rem)] max-h-10 h-10 overflow-ellipsis rounded-md transition-colors">
|
||||
<nuxt-link v-for="dm in user.channels"
|
||||
:to="'/channel/@me/' + dm.id">
|
||||
<div
|
||||
class="mx-2 my-4 hover:bg-[hsl(223,calc(1*6.9%),25.8%)] px-2 py-2 w-[calc(240px-1rem)] max-h-10 h-10 overflow-ellipsis rounded-md transition-colors">
|
||||
{{ (dm.name).split('-').filter((e: string) => e !== user.id)[0] }}
|
||||
</div>
|
||||
</nuxt-link>
|
||||
@@ -34,6 +37,32 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bg-[hsl(220,calc(1*6.8%),17.3%)] h-full p-3">
|
||||
<div class="grid grid-cols-[32px_1fr_32px] gap-x-2 items-center">
|
||||
<span class="bg-[hsl(220,calc(1*6.8%),22.6%)] w-[32px] h-[32px] rounded-full"></span>
|
||||
<span class="h-fit w-fit overflow-ellipsis">{{ user.username }}</span>
|
||||
<span class="text-zinc-300 hover:bg-[hsl(220,calc(1*6.8%),14.3%)] p-1 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2">
|
||||
<path
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065z" />
|
||||
<circle cx="12"
|
||||
cy="12"
|
||||
r="3" />
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user