roomkit-web-vue3
Version:
<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,
266 lines (265 loc) • 11.3 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
require("../../services/main.js");
const roomService = require("../../services/roomService.js");
const types = require("../../services/types.js");
const index = require("../../locales/index.js");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-js");
const environment = require("../../utils/environment.js");
const utils = require("../../utils/utils.js");
require("mitt");
require("../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const SvgIcon = require("../common/base/SvgIcon.vue.js");
const CalendarIcon = require("../common/icons/CalendarIcon.vue.js");
const ApplyStageLabelIcon = require("../common/icons/ApplyStageLabelIcon.vue.js");
const ScheduleRoomControl = require("./ScheduleRoomControl.vue.js");
const LoadingScheduleIcon = require("../common/icons/LoadingScheduleIcon.vue.js");
const _hoisted_1 = {
key: 0,
class: "schedule-loading"
};
const _hoisted_2 = { class: "text" };
const _hoisted_3 = {
key: 0,
class: "schedule-room-container"
};
const _hoisted_4 = {
key: 0,
class: "schedule-room-date"
};
const _hoisted_5 = {
key: 1,
class: "schedule-no-body"
};
const _hoisted_6 = { class: "text" };
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "ScheduleRoomList",
props: {
isShowScheduledConference: { type: Boolean, default: true }
},
emits: ["join-conference"],
setup(__props, { emit: __emit }) {
const { t } = index.useI18n();
const scheduleRoomList = Vue.ref([]);
const emit = __emit;
const isShowLoading = Vue.ref(true);
const joinConference = (options) => {
emit("join-conference", options);
};
const props = __props;
function sortScheduleRoomList() {
return scheduleRoomList.value.sort(
(a, b) => a.scheduleStartTime - b.scheduleStartTime
);
}
const sortedScheduleRoomList = Vue.computed(() => sortScheduleRoomList());
const fetchScheduledData = async (cursor = "", result = []) => {
const res = await roomService.roomService.scheduleConferenceManager.fetchScheduledConferenceList({
cursor,
count: 20
});
(res == null ? void 0 : res.conferenceList) && result.push(...(res == null ? void 0 : res.conferenceList) || []);
if (res.cursor !== "") {
await fetchScheduledData(res.cursor, result);
}
return result;
};
const scheduleContentList = Vue.computed(
() => sortedScheduleRoomList.value.map((item, index2, arr) => {
if (index2 === 0 || getScheduleDate(item.scheduleStartTime) !== getScheduleDate(arr[index2 - 1].scheduleStartTime)) {
return { ...item, showTimestamp: true };
}
return { ...item, showTimestamp: false };
})
);
function getScheduleDate(timestamp) {
const date = new Date(timestamp * 1e3);
const year = `${date.getFullYear()}`;
const month = `${date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1}`;
const day = `${date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()}`;
return `${year}${t("schedule year")}${month}${t("schedule month")}${day}${t("schedule day")}`;
}
function getScheduleTime(timestamp) {
const date = new Date(timestamp * 1e3);
const hours = `${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()}`;
const minutes = `${date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()}`;
return `${hours}:${minutes}`;
}
const fetchAttendeeList = async (roomId, cursor = "", result = []) => {
const res = await roomService.roomService.scheduleConferenceManager.fetchAttendeeList({
roomId,
cursor,
count: 20
});
if (!(res == null ? void 0 : res.attendeeList)) return [];
result.push(...(res == null ? void 0 : res.attendeeList) || []);
if (res.cursor !== "") {
await fetchAttendeeList(roomId, res.cursor, result);
}
return result;
};
const handleShowMore = async (data) => {
const attendeeList = await fetchAttendeeList(data.roomId);
const scheduleRoom = scheduleRoomList.value.find(
(item) => item.basicRoomInfo.roomId === data.roomId
);
if (scheduleRoom) {
scheduleRoom.scheduleAttendees = attendeeList;
}
};
const fetchData = async () => {
scheduleRoomList.value = await fetchScheduledData();
isShowLoading.value = false;
};
const updateAttendees = (originList = [], changeData) => {
const { joinedUsers, leftUsers } = changeData;
let resultList = [...originList, ...joinedUsers];
resultList = resultList.filter(
(attendee) => !leftUsers.some((leftUser) => leftUser.userId === attendee.userId)
);
return resultList;
};
const onConferenceScheduled = async (data) => {
const { conferenceInfo } = data;
const index2 = scheduleRoomList.value.findIndex(
(item) => item.basicRoomInfo.roomId === conferenceInfo.basicRoomInfo.roomId
);
if (index2 >= 0) {
scheduleRoomList.value.splice(index2, 1, conferenceInfo);
} else {
scheduleRoomList.value.push(conferenceInfo);
}
};
const onConferenceCancelled = async (data) => {
scheduleRoomList.value = scheduleRoomList.value.filter(
(item) => item.basicRoomInfo.roomId !== data.roomId
);
};
const onConferenceInfoChanged = async (data) => {
const aimConferenceIndex = scheduleRoomList.value.findIndex(
(item) => item.basicRoomInfo.roomId === data.conferenceModifyInfo.basicRoomInfo.roomId
);
if (aimConferenceIndex !== -1) {
scheduleRoomList.value[aimConferenceIndex] = utils.objectMerge(
scheduleRoomList.value[aimConferenceIndex],
data.conferenceModifyInfo
);
}
};
const onScheduleAttendeesChanged = async (data) => {
const aimConference = scheduleRoomList.value.find(
(item) => item.basicRoomInfo.roomId === data.roomId
);
if (aimConference) {
aimConference.scheduleAttendees = updateAttendees(
aimConference.scheduleAttendees,
data
);
}
};
const onConferenceStatusChanged = (data) => {
const aimConference = scheduleRoomList.value.find(
(item) => item.basicRoomInfo.roomId === data.roomId
);
if (aimConference) {
aimConference.status = data.status;
}
};
Vue.onMounted(() => {
roomService.roomService.on(types.EventType.ROOM_LOGIN, fetchData);
roomService.roomService.scheduleConferenceManager.on(
TUIRoomEngine.TUIConferenceListManagerEvents.onConferenceScheduled,
onConferenceScheduled
);
roomService.roomService.scheduleConferenceManager.on(
TUIRoomEngine.TUIConferenceListManagerEvents.onConferenceCancelled,
onConferenceCancelled
);
roomService.roomService.scheduleConferenceManager.on(
TUIRoomEngine.TUIConferenceListManagerEvents.onConferenceInfoChanged,
onConferenceInfoChanged
);
roomService.roomService.scheduleConferenceManager.on(
TUIRoomEngine.TUIConferenceListManagerEvents.onScheduleAttendeesChanged,
onScheduleAttendeesChanged
);
roomService.roomService.scheduleConferenceManager.on(
TUIRoomEngine.TUIConferenceListManagerEvents.onConferenceStatusChanged,
onConferenceStatusChanged
);
});
Vue.onUnmounted(() => {
roomService.roomService.off(types.EventType.ROOM_LOGIN, fetchData);
roomService.roomService.scheduleConferenceManager.off(
TUIRoomEngine.TUIConferenceListManagerEvents.onConferenceScheduled,
onConferenceScheduled
);
roomService.roomService.scheduleConferenceManager.off(
TUIRoomEngine.TUIConferenceListManagerEvents.onConferenceCancelled,
onConferenceCancelled
);
roomService.roomService.scheduleConferenceManager.off(
TUIRoomEngine.TUIConferenceListManagerEvents.onConferenceInfoChanged,
onConferenceInfoChanged
);
roomService.roomService.scheduleConferenceManager.off(
TUIRoomEngine.TUIConferenceListManagerEvents.onScheduleAttendeesChanged,
onScheduleAttendeesChanged
);
roomService.roomService.scheduleConferenceManager.off(
TUIRoomEngine.TUIConferenceListManagerEvents.onConferenceStatusChanged,
onConferenceStatusChanged
);
});
return (_ctx, _cache) => {
return Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", {
id: "scheduleRoomContainer",
class: Vue.normalizeClass([
"schedule-room",
!Vue.unref(environment.isMobile) ? "schedule-room-pc" : "schedule-room-h5"
])
}, [
isShowLoading.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
Vue.createVNode(SvgIcon.default, {
icon: LoadingScheduleIcon.default,
class: "loading"
}),
Vue.createElementVNode("span", _hoisted_2, Vue.toDisplayString(Vue.unref(t)("Schedule room loading")), 1)
])) : (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, { key: 1 }, [
scheduleRoomList.value.length > 0 ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_3, [
(Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(scheduleContentList.value, (item) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
key: item.basicRoomInfo.roomId
}, [
item.showTimestamp ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4, [
Vue.createVNode(SvgIcon.default, {
class: "date",
icon: CalendarIcon.default
}),
Vue.createElementVNode("span", null, Vue.toDisplayString(getScheduleDate(item.scheduleStartTime)), 1)
])) : Vue.createCommentVNode("", true),
Vue.createVNode(ScheduleRoomControl.default, {
item,
"schedule-start-date": getScheduleDate(item.scheduleStartTime),
"schedule-end-date": getScheduleDate(item.scheduleEndTime),
"schedule-start-time": getScheduleTime(item.scheduleStartTime),
"schedule-end-time": getScheduleTime(item.scheduleEndTime),
onJoinConference: joinConference,
onShowMore: handleShowMore
}, null, 8, ["item", "schedule-start-date", "schedule-end-date", "schedule-start-time", "schedule-end-time"])
]);
}), 128))
])) : (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_5, [
Vue.createVNode(SvgIcon.default, { icon: ApplyStageLabelIcon.default }),
Vue.createElementVNode("span", _hoisted_6, Vue.toDisplayString(Vue.unref(t)("No room available for booking")), 1)
]))
], 64))
], 2)), [
[Vue.vShow, props.isShowScheduledConference]
]);
};
}
});
exports.default = _sfc_main;