forked from eatvio/eatvio-infra
95 lines
3.3 KiB
PHP
95 lines
3.3 KiB
PHP
@extends('layouts/eatvio')
|
|
@section('page_title', 'Chat')
|
|
|
|
@section('main_section')
|
|
<section class="py-md-3 px-0 px-md-2 px-lg-3 --h_90vh" id="main" x-data>
|
|
<div class="container position-relative px-0 py-md-2 --mw-1170 --h_100">
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap --h_100">
|
|
<!-- CONTACTS BLOCK -->
|
|
@livewire(
|
|
'chat.last-users',
|
|
[
|
|
'lastChatUsers' => $lastChatUsers,
|
|
'activeUserId' => $lastChatRecipientUserId,
|
|
'curUserId' => $curUserId,
|
|
'chanId' => $chanId
|
|
])
|
|
<!-- CHAT BLOCK -->
|
|
@livewire('chat.message-window', ['recipientUserId' => $lastChatRecipientUserId, 'chanId' => $chanId])
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const scrollDownChatWindow = () => {
|
|
let scrolledEl = document.querySelector('.messages_container');
|
|
const sHeight = scrolledEl.scrollHeight;
|
|
|
|
scrolledEl.scroll({
|
|
top: sHeight,
|
|
left: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
};
|
|
// setInterval(scrollDownChatWindow, 1000);
|
|
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.store('typing', false);
|
|
Alpine.store('activePeer', '');
|
|
Alpine.store('activePeerId', false);
|
|
});
|
|
|
|
document.addEventListener('livewire:init', function() {
|
|
scrollDownChatWindow();
|
|
Livewire.hook('message.processed', (msg, component) => {
|
|
scrollDownChatWindow();
|
|
});
|
|
|
|
window.addEventListener('userEchoReloaded', event => {
|
|
chanId = event.detail.chanId;
|
|
console.log('new chanId is ' + chanId);
|
|
|
|
window.Echo
|
|
.private("direct-chat." + chanId)
|
|
.listen("ChatMessageUpdated", (e) => {
|
|
console.log("message updated");
|
|
console.log(e);
|
|
}).listenForWhisper('typing', console.log);
|
|
});
|
|
|
|
window.addEventListener('typing', event => {
|
|
chanId = event.detail.chanId;
|
|
activePeer = event.detail.activePeer;
|
|
activePeerName = event.detail.activePeerName;
|
|
|
|
window.Echo
|
|
.private('direct-chat.' + chanId)
|
|
.whisper(
|
|
"typing", {
|
|
activePeer,
|
|
activePeerName
|
|
}
|
|
);
|
|
});
|
|
|
|
let typingTimeer = false;
|
|
|
|
window.Echo
|
|
.private("direct-chat.{{ $chanId }}")
|
|
.listenForWhisper(
|
|
'typing',
|
|
(e) => {
|
|
Alpine.store('typing', true);
|
|
Alpine.store('activePeer', e.activePeerName);
|
|
Alpine.store('activePeerId', e.activePeer);
|
|
|
|
if (typingTimeer) clearTimeout(typingTimeer);
|
|
|
|
typingTimeer = setTimeout(() => {
|
|
Alpine.store('typing', false);
|
|
}, 3000);
|
|
}
|
|
);
|
|
});
|
|
</script>
|
|
</section>
|
|
@endsection
|