2020-01-30 04:37:25 +09:00
|
|
|
<template>
|
2023-04-08 09:01:42 +09:00
|
|
|
<MkStickyContainer>
|
|
|
|
<template #header
|
|
|
|
><MkPageHeader
|
|
|
|
v-model:tab="tab"
|
|
|
|
:actions="headerActions"
|
|
|
|
:tabs="headerTabs"
|
|
|
|
/></template>
|
|
|
|
<div>
|
|
|
|
<MkSpacer :content-max="800">
|
|
|
|
<swiper
|
|
|
|
:modules="[Virtual]"
|
|
|
|
:space-between="20"
|
|
|
|
:virtual="true"
|
|
|
|
:allow-touch-move="
|
|
|
|
!(
|
|
|
|
deviceKind === 'desktop' &&
|
|
|
|
!defaultStore.state.swipeOnDesktop
|
|
|
|
)
|
|
|
|
"
|
|
|
|
@swiper="setSwiperRef"
|
|
|
|
@slide-change="onSlideChange"
|
|
|
|
>
|
|
|
|
<swiper-slide>
|
|
|
|
<div class="_content yweeujhr dms">
|
|
|
|
<MkButton
|
|
|
|
primary
|
|
|
|
class="start"
|
|
|
|
v-if="!isMobile"
|
|
|
|
@click="startUser"
|
|
|
|
><i class="ph-plus ph-bold ph-lg"></i>
|
|
|
|
{{ i18n.ts.startMessaging }}</MkButton
|
|
|
|
>
|
|
|
|
<MkPagination
|
|
|
|
v-slot="{ items }"
|
|
|
|
:pagination="dmsPagination"
|
|
|
|
>
|
|
|
|
<MkChatPreview
|
|
|
|
v-for="message in items"
|
|
|
|
:key="message.id"
|
|
|
|
class="yweeujhr message _block"
|
|
|
|
:message="message"
|
|
|
|
/>
|
|
|
|
</MkPagination>
|
2022-11-07 07:49:03 +09:00
|
|
|
</div>
|
2023-04-08 09:01:42 +09:00
|
|
|
</swiper-slide>
|
|
|
|
<swiper-slide>
|
|
|
|
<div class="_content yweeujhr groups">
|
|
|
|
<div v-if="!isMobile" class="groupsbuttons">
|
|
|
|
<MkButton
|
|
|
|
primary
|
|
|
|
class="start"
|
|
|
|
:link="true"
|
|
|
|
to="/my/groups"
|
|
|
|
><i
|
|
|
|
class="ph-user-circle-gear ph-bold ph-lg"
|
|
|
|
></i>
|
|
|
|
{{ i18n.ts.manageGroups }}</MkButton
|
|
|
|
>
|
|
|
|
<MkButton
|
|
|
|
primary
|
|
|
|
class="start"
|
|
|
|
@click="startGroup"
|
|
|
|
><i class="ph-plus ph-bold ph-lg"></i>
|
|
|
|
{{ i18n.ts.startMessaging }}</MkButton
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
<MkPagination
|
|
|
|
v-slot="{ items }"
|
|
|
|
:pagination="groupsPagination"
|
|
|
|
>
|
|
|
|
<MkChatPreview
|
|
|
|
v-for="message in items"
|
|
|
|
:key="message.id"
|
|
|
|
class="yweeujhr message _block"
|
|
|
|
:message="message"
|
|
|
|
/>
|
|
|
|
</MkPagination>
|
|
|
|
</div>
|
|
|
|
</swiper-slide>
|
|
|
|
</swiper>
|
|
|
|
</MkSpacer>
|
|
|
|
</div>
|
|
|
|
</MkStickyContainer>
|
2020-01-30 04:37:25 +09:00
|
|
|
</template>
|
|
|
|
|
2022-06-20 17:38:49 +09:00
|
|
|
<script lang="ts" setup>
|
2023-04-08 09:01:42 +09:00
|
|
|
import { ref, markRaw, onMounted, onUnmounted, watch } from "vue";
|
|
|
|
import * as Acct from "calckey-js/built/acct";
|
|
|
|
import { Virtual } from "swiper";
|
|
|
|
import { Swiper, SwiperSlide } from "swiper/vue";
|
|
|
|
import MkButton from "@/components/MkButton.vue";
|
|
|
|
import MkChatPreview from "@/components/MkChatPreview.vue";
|
|
|
|
import MkPagination from "@/components/MkPagination.vue";
|
|
|
|
import * as os from "@/os";
|
|
|
|
import { stream } from "@/stream";
|
|
|
|
import { useRouter } from "@/router";
|
|
|
|
import { i18n } from "@/i18n";
|
|
|
|
import { definePageMetadata } from "@/scripts/page-metadata";
|
|
|
|
import { $i } from "@/account";
|
|
|
|
import { deviceKind } from "@/scripts/device-kind";
|
|
|
|
import { defaultStore } from "@/store";
|
|
|
|
import "swiper/scss";
|
|
|
|
import "swiper/scss/virtual";
|
2022-06-20 17:38:49 +09:00
|
|
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
2022-11-07 07:41:27 +09:00
|
|
|
let messages = $ref([]);
|
|
|
|
let connection = $ref(null);
|
2023-01-20 09:29:45 +09:00
|
|
|
|
2023-04-08 09:01:42 +09:00
|
|
|
const tabs = ["dms", "groups"];
|
2022-11-07 06:20:28 +09:00
|
|
|
let tab = $ref(tabs[0]);
|
2023-04-08 09:01:42 +09:00
|
|
|
watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
|
2022-11-07 06:20:28 +09:00
|
|
|
|
2023-03-24 16:42:36 +09:00
|
|
|
const MOBILE_THRESHOLD = 500;
|
2023-04-08 09:01:42 +09:00
|
|
|
const isMobile = ref(
|
|
|
|
deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD
|
|
|
|
);
|
|
|
|
window.addEventListener("resize", () => {
|
|
|
|
isMobile.value =
|
|
|
|
deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD;
|
2023-03-24 16:42:36 +09:00
|
|
|
});
|
|
|
|
|
2023-04-08 15:49:36 +09:00
|
|
|
async function readAllMessagingMessages() {
|
|
|
|
await os.api("i/read-all-messaging-messages");
|
|
|
|
}
|
|
|
|
|
2023-04-08 09:01:42 +09:00
|
|
|
const headerActions = $computed(() => [
|
|
|
|
{
|
2023-04-08 15:49:36 +09:00
|
|
|
icon: "ph-check ph-bold ph-lg",
|
|
|
|
text: i18n.ts.markAllAsRead,
|
|
|
|
handler: readAllMessagingMessages,
|
2023-04-08 09:01:42 +09:00
|
|
|
},
|
|
|
|
]);
|
|
|
|
|
|
|
|
const headerTabs = $computed(() => [
|
|
|
|
{
|
|
|
|
key: "dms",
|
|
|
|
title: i18n.ts._messaging.dms,
|
|
|
|
icon: "ph-user ph-bold ph-lg",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "groups",
|
|
|
|
title: i18n.ts._messaging.groups,
|
|
|
|
icon: "ph-users-three ph-bold ph-lg",
|
|
|
|
},
|
|
|
|
]);
|
2022-11-07 07:00:34 +09:00
|
|
|
|
|
|
|
definePageMetadata({
|
|
|
|
title: i18n.ts.messaging,
|
2023-04-08 09:01:42 +09:00
|
|
|
icon: "ph-chats-teardrop ph-bold ph-lg",
|
2022-11-07 07:00:34 +09:00
|
|
|
});
|
|
|
|
|
2022-11-07 06:02:17 +09:00
|
|
|
const dmsPagination = {
|
2023-04-08 09:01:42 +09:00
|
|
|
endpoint: "messaging/history" as const,
|
2023-01-20 09:30:38 +09:00
|
|
|
limit: 15,
|
2023-01-20 09:30:12 +09:00
|
|
|
params: {
|
2022-11-07 06:02:17 +09:00
|
|
|
group: false,
|
2023-01-20 09:30:12 +09:00
|
|
|
},
|
2022-11-07 06:02:17 +09:00
|
|
|
};
|
|
|
|
const groupsPagination = {
|
2023-04-08 09:01:42 +09:00
|
|
|
endpoint: "messaging/history" as const,
|
2023-01-20 09:30:38 +09:00
|
|
|
limit: 5,
|
2023-01-20 09:30:12 +09:00
|
|
|
params: {
|
2022-11-07 06:02:17 +09:00
|
|
|
group: true,
|
2023-01-20 09:30:12 +09:00
|
|
|
},
|
2022-11-07 06:02:17 +09:00
|
|
|
};
|
2022-06-20 17:38:49 +09:00
|
|
|
|
2022-11-07 07:41:27 +09:00
|
|
|
function onMessage(message): void {
|
|
|
|
if (message.recipientId) {
|
2023-04-08 09:01:42 +09:00
|
|
|
messages = messages.filter(
|
|
|
|
(m) =>
|
|
|
|
!(
|
|
|
|
(m.recipientId === message.recipientId &&
|
|
|
|
m.userId === message.userId) ||
|
|
|
|
(m.recipientId === message.userId &&
|
|
|
|
m.userId === message.recipientId)
|
|
|
|
)
|
|
|
|
);
|
2022-11-07 07:41:27 +09:00
|
|
|
|
|
|
|
messages.unshift(message);
|
|
|
|
} else if (message.groupId) {
|
2023-04-08 09:01:42 +09:00
|
|
|
messages = messages.filter((m) => m.groupId !== message.groupId);
|
2023-01-20 09:31:33 +09:00
|
|
|
messages.unshift(message);
|
2022-11-07 07:41:27 +09:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function onRead(ids): void {
|
|
|
|
for (const id of ids) {
|
2023-04-08 09:01:42 +09:00
|
|
|
const found = messages.find((m) => m.id === id);
|
2022-11-07 07:41:27 +09:00
|
|
|
if (found) {
|
|
|
|
if (found.recipientId) {
|
|
|
|
found.isRead = true;
|
|
|
|
} else if (found.groupId) {
|
|
|
|
found.reads.push($i.id);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2022-06-20 17:38:49 +09:00
|
|
|
|
2022-11-15 09:24:04 +09:00
|
|
|
function startMenu(ev) {
|
2023-04-08 09:01:42 +09:00
|
|
|
os.popupMenu(
|
|
|
|
[
|
|
|
|
{
|
|
|
|
text: i18n.ts.messagingWithUser,
|
|
|
|
icon: "ph-user ph-bold ph-lg",
|
|
|
|
action: () => {
|
|
|
|
startUser();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
text: i18n.ts.messagingWithGroup,
|
|
|
|
icon: "ph-users-three ph-bold ph-lg",
|
|
|
|
action: () => {
|
|
|
|
startGroup();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
ev.currentTarget ?? ev.target
|
|
|
|
);
|
2022-11-15 09:24:04 +09:00
|
|
|
}
|
|
|
|
|
2022-11-07 07:00:34 +09:00
|
|
|
async function startUser(): void {
|
2023-04-08 09:01:42 +09:00
|
|
|
os.selectUser().then((user) => {
|
2022-06-20 17:38:49 +09:00
|
|
|
router.push(`/my/messaging/${Acct.toString(user)}`);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-11-07 07:00:34 +09:00
|
|
|
async function startGroup(): void {
|
2023-04-08 09:01:42 +09:00
|
|
|
const groups1 = await os.api("users/groups/owned");
|
|
|
|
const groups2 = await os.api("users/groups/joined");
|
2022-06-20 17:38:49 +09:00
|
|
|
if (groups1.length === 0 && groups2.length === 0) {
|
|
|
|
os.alert({
|
2023-04-08 09:01:42 +09:00
|
|
|
type: "warning",
|
2022-06-20 17:38:49 +09:00
|
|
|
title: i18n.ts.youHaveNoGroups,
|
|
|
|
text: i18n.ts.joinOrCreateGroup,
|
2020-01-30 04:37:25 +09:00
|
|
|
});
|
2022-06-20 17:38:49 +09:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
const { canceled, result: group } = await os.select({
|
|
|
|
title: i18n.ts.group,
|
2023-04-08 09:01:42 +09:00
|
|
|
items: groups1.concat(groups2).map((group) => ({
|
|
|
|
value: group,
|
|
|
|
text: group.name,
|
2022-06-20 17:38:49 +09:00
|
|
|
})),
|
|
|
|
});
|
|
|
|
if (canceled) return;
|
|
|
|
router.push(`/my/messaging/group/${group.id}`);
|
|
|
|
}
|
|
|
|
|
2022-11-07 07:00:34 +09:00
|
|
|
let swiperRef = null;
|
|
|
|
|
|
|
|
function setSwiperRef(swiper) {
|
|
|
|
swiperRef = swiper;
|
|
|
|
syncSlide(tabs.indexOf(tab));
|
|
|
|
}
|
|
|
|
|
|
|
|
function onSlideChange() {
|
|
|
|
tab = tabs[swiperRef.activeIndex];
|
|
|
|
}
|
|
|
|
|
|
|
|
function syncSlide(index) {
|
|
|
|
swiperRef.slideTo(index);
|
|
|
|
}
|
|
|
|
|
2022-11-07 07:41:27 +09:00
|
|
|
onMounted(() => {
|
2023-01-20 09:33:14 +09:00
|
|
|
syncSlide(tabs.indexOf(swiperRef.activeIndex));
|
2022-11-13 06:27:07 +09:00
|
|
|
|
2023-04-08 09:01:42 +09:00
|
|
|
connection = markRaw(stream.useChannel("messagingIndex"));
|
2022-11-07 07:41:27 +09:00
|
|
|
|
2023-04-08 09:01:42 +09:00
|
|
|
connection.on("message", onMessage);
|
|
|
|
connection.on("read", onRead);
|
2022-11-07 07:41:27 +09:00
|
|
|
|
2023-04-08 09:01:42 +09:00
|
|
|
os.api("messaging/history", { group: false, limit: 5 }).then(
|
|
|
|
(userMessages) => {
|
|
|
|
os.api("messaging/history", { group: true, limit: 5 }).then(
|
|
|
|
(groupMessages) => {
|
|
|
|
const _messages = userMessages.concat(groupMessages);
|
|
|
|
_messages.sort(
|
|
|
|
(a, b) =>
|
|
|
|
new Date(b.createdAt).getTime() -
|
|
|
|
new Date(a.createdAt).getTime()
|
|
|
|
);
|
|
|
|
messages = _messages;
|
|
|
|
}
|
|
|
|
);
|
|
|
|
}
|
|
|
|
);
|
2022-11-07 07:41:27 +09:00
|
|
|
});
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
if (connection) connection.dispose();
|
|
|
|
});
|
2020-01-30 04:37:25 +09:00
|
|
|
</script>
|
|
|
|
|
2023-04-08 09:01:42 +09:00
|
|
|
<style lang="scss" scoped>
|
|
|
|
.yweeujhr {
|
|
|
|
> .start {
|
|
|
|
margin: 0 auto var(--margin) auto;
|
|
|
|
}
|
2022-11-07 07:49:03 +09:00
|
|
|
|
2023-04-08 09:01:42 +09:00
|
|
|
> .groupsbuttons {
|
|
|
|
max-width: 100%;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
margin-bottom: 1rem;
|
2020-01-30 04:37:25 +09:00
|
|
|
}
|
2023-04-08 09:01:42 +09:00
|
|
|
}
|
|
|
|
</style>
|