.remove());
playNotificationSound(
"new_message",
data.from_id == getMessengerId() && data.to_id == auth_id
);
});
clientListenChannel.bind("client-typing", function (data) {
data.from_id == getMessengerId() &&
data.to_id == auth_id &&
(data.typing
? messagesContainer.find(".typing-indicator").show()
: messagesContainer.find(".typing-indicator").hide());
// scroll to bottom
scrollToBottom(messagesContainer);
});
clientListenChannel.bind("client-seen", function (data) {
data.from_id == getMessengerId() &&
data.to_id == auth_id &&
data.seen == true &&
($(".message-seen-status").html(
'<svg class="text-blue-500 w-4.5 h-4.5 -mt-px message-is-seen" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"></path><path d="M11.602 13.76l1.412 1.412 8.466-8.466 1.414 1.414-9.88 9.88-6.364-6.364 1.414-1.414 2.125 2.125 1.413 1.412zm.002-2.828l4.952-4.953 1.41 1.41-4.952 4.953-1.41-1.41zm-2.827 5.655L7.364 18 1 11.636l1.414-1.414 1.413 1.413-.001.001 4.951 4.951z"></path></g></svg>'
),
$(".message-seen-status").find(".message-not-seen").remove());
});
clientListenChannel.bind("client-contactItem", function (data) {
data.update_for == auth_id &&
(data.updating == true
? updateContactItem(data.update_to)
: console.error("[Contact Item updates] Updating failed!"));
});
clientListenChannel.bind("client-messageDelete", function (data) {
$("body")
.find(".message-card[data-id=" + data.id + "]")
.remove();
});
// -------------------------------------
// presence channel [User Active Status]
var activeStatusChannel = pusher.subscribe("presence-activeStatus");
// Joined
activeStatusChannel.bind("pusher:member_added", function (member) {
setActiveStatus(1, member.id);
$(".messenger-list-item[data-contact-id=" + member.id + "]")
.find(".activeStatus")
.remove();
$(".messenger-list-item[data-contact-id=" + member.id + "]")
.find(".avatar")
.before(activeStatusCircle());
});
activeStatusChannel.bind("pusher:member_removed", function (member) {
setActiveStatus(0, member.id);
$(".messenger-list-item[data-contact-id=" + member.id + "]")
.find(".activeStatus")
.remove();
});
function handleVisibilityChange() {
!document.hidden && makeSeen(true);
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);
/**
*-------------------------------------------------------------
* Trigger typing event
*-------------------------------------------------------------
*/
function isTyping(status) {
return clientSendChannel.trigger("client-typing", {
from_id: auth_id,
to_id: getMessengerId(),
typing: status,
});
}
/**
*-------------------------------------------------------------
* Trigger seen event
*-------------------------------------------------------------
*/
function makeSeen(status) {
if (document?.hidden) {
return;
}
return (
$(".messenger-list-item[data-contact-id=" + getMessengerId() + "]")
.find(".new-messages-counter")
.remove(),
$.ajax({
url: url + "/makeSeen",
method: "POST",
data: { id: getMessengerId() },
headers: { "X-CSRF-TOKEN": csrfToken },
xhrFields: { withCredentials: true },
dataType: "JSON",
}),
clientSendChannel.trigger("client-seen", {
from_id: auth_id,
to_id: getMessengerId(),
seen: status,
})
);
}
/**
*-------------------------------------------------------------
* Trigger contact item updates
*-------------------------------------------------------------
*/
function sendContactItemUpdates(status) {
return clientSendChannel.trigger("client-contactItem", {
update_for: getMessengerId(),
update_to: auth_id,
updating: status,
});
}
/**
*-------------------------------------------------------------
* Trigger message delete
*-------------------------------------------------------------
*/
function sendMessageDeleteEvent(messageId) {
return clientSendChannel.trigger("client-messageDelete", { id: messageId });
}
/**
*-------------------------------------------------------------
* Check internet connection using pusher states
*-------------------------------------------------------------
*/
function checkInternet(state, selector) {
let net_errs = 0;
const messengerTitle = $(".messenger-headTitle");
switch (state) {
case "connected":
if (net_errs < 1) {
messengerTitle.text(messengerTitleDefault);
selector.addClass("successBG-rgba");
selector.find("span").hide();
selector.slideDown("fast", function () {
selector.find(".ic-connected").show();
});
setTimeout(function () {
$(".internet-connection").slideUp("fast");
}, 3000);
}
break;
case "connecting":
messengerTitle.text($(".ic-connecting").text()),
selector.removeClass("successBG-rgba"),
selector.find("span").hide(),
selector.slideDown("fast", function () {
selector.find(".ic-connecting").show();
}),
(net_errs = 1);
break;
default:
messengerTitle.text($(".ic-noInternet").text()),
selector.removeClass("successBG-rgba"),
selector.find("span").hide(),
selector.slideDown("fast", function () {
selector.find(".ic-noInternet").show();
}),
(net_errs = 1);
break;
}
}
/**
*-------------------------------------------------------------
* Get contacts
*-------------------------------------------------------------
*/
let contactsPage = 1,
contactsLoading = false,
noMoreContacts = false;
function setContactsLoading(loading = false) {
!loading
? $(".listOfContacts").find(".loading-contacts").remove()
: $(".listOfContacts").append(
'<div class="loading-contacts">' + listItemLoading(4) + "</div>"
);
contactsLoading = loading;
}
function getContacts() {
!contactsLoading &&
!noMoreContacts &&
(setContactsLoading(true),
$.ajax({
url: url + "/getContacts",
method: "GET",
data: { page: contactsPage },
headers: { "X-CSRF-TOKEN": csrfToken },
xhrFields: { withCredentials: true },
dataType: "JSON",
success: (data) => {
setContactsLoading(false);
contactsPage < 2
? $(".listOfContacts").html(data.contacts)
: $(".listOfContacts").append(data.contacts);
updateSelectedContact();
cssMediaQueries();
noMoreContacts = contactsPage >= data?.last_page;
if (!noMoreContacts) {
contactsPage += 1;
}
},
error: (error) => {
setContactsLoading(false);
console.error(error);
},
}));
}
/**
*-------------------------------------------------------------
* Update contact item
*-------------------------------------------------------------
*/
function updateContactItem(user_id) {
if (user_id != auth_id) {
let contactBody = $("body")
.find(".listOfContacts")
.find(".messenger-list-item[data-contact-id=" + user_id + "]");
$.ajax({
url: url + "/updateContacts",
method: "POST",
data: { user_id: user_id },
headers: { "X-CSRF-TOKEN": csrfToken },
xhrFields: { withCredentials: true },
dataType: "JSON",
success: (data) => {
const totalContacts =
$(".listOfContacts").find(".messenger-list-item")?.length ||
0;
if (totalContacts < 1) {
$(".listOfContacts").find(".message-hint").remove();
}
contactBody.remove();
$(".listOfContacts").prepend(data.contactItem);
cssMediaQueries();
updateSelectedContact(user_id);
},
error: () => {
console.error("Server error, check your response");
},
});
}
}
/**
You may also like the following Services
