UNPKG

@tencentcloud/roomkit-electron-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,

675 lines (674 loc) 27.7 kB
"use strict"; Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } }); const Vue = require("vue"); const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron"); require("../../services/main.js"); const roomService = require("../../services/roomService.js"); const index$3 = require("../../utils/common/logger/index.js"); const index = require("../../locales/index.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 useRoomInfoHooks = require("../RoomHeader/RoomInfo/useRoomInfoHooks.js"); const SvgIcon = require("../common/base/SvgIcon.vue.js"); const index$2 = require("../common/base/Dialog/index.vue.js"); const EllipsisIcon = require("../common/icons/EllipsisIcon.vue.js"); const ChevronRight = require("../common/icons/ChevronRight.vue.js"); const ArrowDown = require("../common/icons/ArrowDown.vue.js"); const LinkIcon = require("../common/icons/LinkIcon.vue.js"); const SuccessIcon = require("../common/icons/SuccessIcon.vue.js"); const WarningIcon = require("../common/icons/WarningIcon.vue.js"); const Button = require("../common/base/Button.vue.js"); const vClickOutside = require("../../directives/vClickOutside.js"); const index$1 = require("./ScheduleConferencePanel/index.vue.js"); const basic = require("../../stores/basic.js"); const pinia = require("pinia"); const ConferenceDetail = require("./ConferenceDetail.vue.js"); const InvitePanel = require("./InvitePanel.vue.js"); const PanelContainer = require("./PanelContainer.vue.js"); const _withScopeId = (n) => (Vue.pushScopeId("data-v-9fac0c7f"), n = n(), Vue.popScopeId(), n); const _hoisted_1 = { class: "schedule-room-control" }; const _hoisted_2 = ["title"]; const _hoisted_3 = { class: "schedule-title-text" }; const _hoisted_4 = { class: "schedule-content" }; const _hoisted_5 = { class: "schedule-content-time" }; const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ Vue.createElementVNode("i", { class: "segregation-level" }, null, -1)); const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ Vue.createElementVNode("i", { class: "segregation-vertical" }, null, -1)); const _hoisted_8 = { class: "schedule-content-room-id" }; const _hoisted_9 = { key: 0, class: "segregation-vertical" }; const _hoisted_10 = ["onClick"]; const _hoisted_11 = ["onClick"]; const _hoisted_12 = { class: "room-detail-content" }; const _hoisted_13 = { key: 0, class: "room-detail h5" }; const _hoisted_14 = { class: "detail-footer" }; const _hoisted_15 = { key: 1, class: "invite-member-panel" }; const _hoisted_16 = { class: "invite-member-header" }; const _hoisted_17 = { key: 1 }; const _sfc_main = /* @__PURE__ */ Vue.defineComponent({ __name: "ScheduleRoomControl", props: { item: {}, scheduleStartDate: {}, scheduleEndDate: {}, scheduleStartTime: {}, scheduleEndTime: {} }, emits: ["join-conference", "show-more"], setup(__props, { emit: __emit }) { const basicStore = basic.useBasicStore(); const { userId, userName, isRoomLinkVisible } = pinia.storeToRefs(basicStore); const roomLinkConfig = roomService.roomService.getComponentConfig("RoomLink"); const { t } = index.useI18n(); const showMoreControl = Vue.ref(false); const dropdownClass = Vue.ref("down"); const moreBtnRef = Vue.ref(); const operateListRef = Vue.ref(); const modifyDialogVisible = Vue.ref(false); const emit = __emit; const showRoomDetail = Vue.ref(false); const showRoomCancel = Vue.ref(false); const showRoomInvite = Vue.ref(false); const roomInfo = Vue.ref(); const props = __props; const { onCopy } = useRoomInfoHooks.default(); const statusMap = { [TUIRoomEngine.TUIConferenceStatus.kConferenceStatusRunning]: { text: "Ongoing", className: "status-running" } }; const getStatusTextAndClass = (status) => statusMap[status] || { text: "", className: "" }; const isOwner = Vue.computed( () => props.item.basicRoomInfo.ownerId === roomService.roomService.basicStore.userId && props.item.status === TUIRoomEngine.TUIConferenceStatus.kConferenceStatusNotStarted ); const isShowPassword = Vue.computed(() => { var _a; return !!((_a = roomInfo.value) == null ? void 0 : _a.password); }); const viewDetails = Vue.computed(() => ({ key: "roomDetails", title: t("view details"), visible: true, func: () => { showRoomDetail.value = true; showMoreControl.value = false; } })); const modifyRoom = Vue.computed(() => ({ key: "modifyRoom", title: t("modify room"), visible: isOwner.value, func: () => { modifyDialogVisible.value = true; showMoreControl.value = false; } })); const cancelRoom = Vue.computed(() => ({ key: "cancelRoom", title: t("cancel room"), visible: isOwner.value, func: () => { showRoomCancel.value = true; showMoreControl.value = false; } })); const moreControlList = Vue.computed(() => [ viewDetails.value, modifyRoom.value, cancelRoom.value ]); const scheduleAttendeesInfo = Vue.computed( () => props.item.scheduleAttendees ? props.item.scheduleAttendees.map( (attendee) => attendee.userName || attendee.userId ).join("; ") : "" ); const durationTime = Vue.computed( () => props.item.scheduleEndTime - props.item.scheduleStartTime ); function getScheduleTime(timestamp) { const date = new Date(timestamp); const hours = `${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()}`; const minutes = `${date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()}`; return `${hours}:${minutes}`; } const scheduleRoomDetailList = Vue.computed(() => { var _a; const { hours, minutes } = utils.convertSecondsToHMS( props.item.scheduleEndTime - props.item.scheduleStartTime ); return [ { title: "Room Name", content: props.item.basicRoomInfo.roomName, isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: true }, { title: "Room ID", content: props.item.basicRoomInfo.roomId, isShowCopyIcon: true, status: null, isShowStatus: false, isVisible: true }, { title: "Room Time", content: `${props.scheduleStartDate} ${props.scheduleStartTime} - ${props.scheduleEndDate} ${props.scheduleEndTime}`, isShowCopyIcon: false, status: props.item.status, isShowStatus: true, isVisible: !environment.isMobile }, { title: "Starting time", content: `${props.scheduleStartDate} ${props.scheduleStartTime}`, isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: environment.isMobile }, { title: "Room duration", content: hours ? `${hours}${t("hours")}${minutes ? ` ${minutes}${t("minutes")}` : ""}` : `${minutes}${t("minutes")}`, isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: environment.isMobile }, { title: "Room Type", content: `${t(getSeatModeDisplay(props.item.basicRoomInfo.isSeatEnabled))}`, isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: true }, { title: "Room Password", content: `${(_a = roomInfo.value) == null ? void 0 : _a.password}`, isShowCopyIcon: true, status: null, isShowStatus: false, isVisible: isShowPassword.value }, { title: "Creator", content: props.item.basicRoomInfo.roomOwner, isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: true }, { title: "Participants", content: scheduleAttendeesInfo.value, isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: true }, { title: "Entry Time", content: `${props.scheduleStartDate}${props.scheduleStartTime}`, isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: props.item.status === TUIRoomEngine.TUIConferenceStatus.kConferenceStatusNone }, { title: "Duration of participation", content: getScheduleTime(durationTime.value), isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: props.item.status === TUIRoomEngine.TUIConferenceStatus.kConferenceStatusNone } ]; }); const scheduleInviteList = Vue.computed(() => { var _a; return [ { title: "Room Name", content: props.item.basicRoomInfo.roomName, isShowCopyIcon: false, isVisible: true }, { title: "Room Type", content: `${t(getSeatModeDisplay(props.item.basicRoomInfo.isSeatEnabled))}`, isShowCopyIcon: false, isVisible: true }, { title: "Room Time", content: !environment.isMobile ? `${props.scheduleStartDate} ${props.scheduleStartTime} - ${props.scheduleEndDate} ${props.scheduleEndTime}` : `${props.scheduleStartDate} ${props.scheduleStartTime} - ${props.scheduleEndTime}`, isShowCopyIcon: false, isVisible: true }, { title: "Room ID", content: props.item.basicRoomInfo.roomId, isShowCopyIcon: true, isVisible: true }, { title: "Room Password", content: `${(_a = roomInfo.value) == null ? void 0 : _a.password}`, isShowCopyIcon: true, isVisible: isShowPassword.value }, { title: "Room Link", content: utils.getUrlWithRoomId(props.item.basicRoomInfo.roomId), isShowCopyIcon: environment.isMobile, isVisible: isRoomLinkVisible.value && roomLinkConfig.visible } ]; }); function getSeatModeDisplay(isSeatEnabled) { return isSeatEnabled ? "On-stage Speaking Room" : "Free Speech Room"; } async function toggleClickMoreBtn() { emit("show-more", { roomId: props.item.basicRoomInfo.roomId }); if (!showMoreControl.value) { await handleDropDownPosition(); } handleFetchRoomInfo(); showMoreControl.value = !showMoreControl.value; } function handleCloseOperate() { showMoreControl.value = false; } async function handleDropDownPosition() { var _a, _b, _c; await Vue.nextTick(); const { top, bottom } = ((_a = moreBtnRef.value) == null ? void 0 : _a.getBoundingClientRect()) || {}; const { top: containerTop, bottom: containerBottom } = (_b = document.getElementById("scheduleRoomContainer")) == null ? void 0 : _b.getBoundingClientRect(); if (!containerBottom || !containerTop) { return; } const bottomSize = containerBottom - bottom; const topSize = top - containerTop; let dropDownContainerHeight = 0; if (!showMoreControl.value) { operateListRef.value.style = "display:block;position:absolute;z-index:-1000"; await Vue.nextTick(); dropDownContainerHeight = operateListRef.value.offsetHeight; operateListRef.value.style = ""; } else { dropDownContainerHeight = (_c = operateListRef.value) == null ? void 0 : _c.offsetHeight; } if (topSize < dropDownContainerHeight) { return; } if (bottomSize < dropDownContainerHeight) { dropdownClass.value = "up"; } } const invitePanelShow = Vue.ref(false); const joinConference = () => { var _a; emit("join-conference", { roomId: (_a = props.item) == null ? void 0 : _a.basicRoomInfo.roomId, roomParam: { isOpenCamera: false, isOpenMicrophone: true } }); }; const toggleInvitePanelShow = () => { invitePanelShow.value = !invitePanelShow.value; }; const showDetail = () => { if (!environment.isMobile) return; handleFetchRoomInfo(); emit("show-more", { roomId: props.item.basicRoomInfo.roomId }); viewDetails.value.func(); }; function toggleInviteRoom() { if (showRoomDetail.value) { showRoomDetail.value = false; } handleFetchRoomInfo(); showRoomInvite.value = !showRoomInvite.value; } function copyRoomIdAndRoomLink() { var _a; const invitationList = [ `${props.item.basicRoomInfo.roomName}`, `${t("Room Type")}: ${t(getSeatModeDisplay(props.item.basicRoomInfo.isSeatEnabled))}`, `${t("Room ID")}: ${props.item.basicRoomInfo.roomId}` ]; if (isShowPassword.value) { invitationList.push(`${t("Room Password")}: ${(_a = roomInfo.value) == null ? void 0 : _a.password}`); } if (isRoomLinkVisible.value && roomLinkConfig.visible) { invitationList.push( `${t("Room Link")}: ${utils.getUrlWithRoomId(props.item.basicRoomInfo.roomId)}` ); } const invitation = invitationList.join("\n"); onCopy(invitation); } async function handleCancelSchedule() { await roomService.roomService.scheduleConferenceManager.cancelConference({ roomId: props.item.basicRoomInfo.roomId }); showRoomCancel.value = false; showRoomDetail.value = false; } async function handleFetchRoomInfo() { if (roomInfo.value) { return; } try { const roomInfoParams = { roomId: props.item.basicRoomInfo.roomId, roomType: props.item.basicRoomInfo.roomType }; roomInfo.value = await roomService.roomService.fetchRoomInfo(roomInfoParams); } catch (error) { index$3.default.error("fetch roomInfo failed:", error); } } return (_ctx, _cache) => { return Vue.openBlock(), Vue.createElementBlock("div", null, [ Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [ Vue.createElementVNode("div", { class: "schedule-room-info", onClick: showDetail }, [ Vue.createElementVNode("div", { class: "schedule-title", title: _ctx.item.basicRoomInfo.roomName }, [ Vue.createElementVNode("span", _hoisted_3, Vue.toDisplayString(_ctx.item.basicRoomInfo.roomName), 1), Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createBlock(SvgIcon.default, { key: 0, class: "schedule-title-icon", icon: ChevronRight.default })) : Vue.createCommentVNode("", true) ], 8, _hoisted_2), Vue.createElementVNode("div", _hoisted_4, [ Vue.createElementVNode("span", _hoisted_5, [ Vue.createElementVNode("span", null, Vue.toDisplayString(props.scheduleStartTime), 1), _hoisted_6, Vue.createElementVNode("span", null, Vue.toDisplayString(props.scheduleEndTime), 1) ]), _hoisted_7, Vue.createElementVNode("span", _hoisted_8, Vue.toDisplayString(_ctx.item.basicRoomInfo.roomId), 1), _ctx.item.status === Vue.unref(TUIRoomEngine.TUIConferenceStatus).kConferenceStatusRunning ? (Vue.openBlock(), Vue.createElementBlock("i", _hoisted_9)) : Vue.createCommentVNode("", true), Vue.createElementVNode("span", { class: Vue.normalizeClass(["schedule-content-status", getStatusTextAndClass(_ctx.item.status).className]) }, Vue.toDisplayString(Vue.unref(t)(getStatusTextAndClass(_ctx.item.status).text)), 3) ]) ]), Vue.createElementVNode("div", { ref_key: "moreBtnRef", ref: moreBtnRef, class: "schedule-room-operate" }, [ !Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createBlock(SvgIcon.default, { key: 0, class: "ellipsis", icon: EllipsisIcon.default, onClick: toggleClickMoreBtn })) : Vue.createCommentVNode("", true), Vue.withDirectives(Vue.createElementVNode("div", { ref_key: "operateListRef", ref: operateListRef, class: Vue.normalizeClass([ "operate-list", dropdownClass.value, !showMoreControl.value ? "hidden" : "" ]) }, [ (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(moreControlList.value, (controlItem) => { return Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, [ controlItem.visible ? (Vue.openBlock(), Vue.createElementBlock("div", { key: controlItem.key, class: Vue.normalizeClass(["operate-item", { "cancel-text": controlItem.key === "cancelRoom" }]), onClick: ($event) => controlItem.func() }, [ Vue.createElementVNode("span", { class: "operate-text", onClick: controlItem.func }, Vue.toDisplayString(controlItem.title), 9, _hoisted_11) ], 10, _hoisted_10)) : Vue.createCommentVNode("", true) ], 64); }), 256)) ], 2), [ [Vue.vShow, showMoreControl.value] ]), !Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createBlock(SvgIcon.default, { key: 1, class: "link", icon: LinkIcon.default, onClick: toggleInviteRoom })) : Vue.createCommentVNode("", true), Vue.createVNode(Button.default, { size: "default", onClick: joinConference }, { default: Vue.withCtx(() => [ Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Join")), 1) ]), _: 1 }) ], 512) ])), [ [Vue.unref(vClickOutside.default), handleCloseOperate] ]), Vue.createVNode(PanelContainer.default, { visible: showRoomDetail.value, onInput: _cache[0] || (_cache[0] = ($event) => showRoomDetail.value = $event), title: Vue.unref(t)("Room Details"), editButtonText: modifyRoom.value.visible && Vue.unref(t)("Modify"), width: "540px", onEdit: modifyRoom.value.func }, Vue.createSlots({ default: Vue.withCtx(() => [ Vue.createElementVNode("div", _hoisted_12, [ Vue.createVNode(ConferenceDetail.default, { conferenceInfo: props.item, scheduleRoomDetailList: scheduleRoomDetailList.value }, null, 8, ["conferenceInfo", "scheduleRoomDetailList"]) ]), Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_13, [ Vue.createElementVNode("div", _hoisted_14, [ Vue.createVNode(Button.default, { plain: "", class: "footer-button", "custom-style": { width: "100%", padding: "10px", fontSize: "16px" }, onClick: Vue.withModifiers(joinConference, ["stop"]) }, { default: Vue.withCtx(() => [ Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Join Room")), 1) ]), _: 1 }), Vue.createVNode(Button.default, { plain: "", class: "footer-button", "custom-style": { width: "100%", padding: "10px", fontSize: "16px" }, onClick: Vue.withModifiers(toggleInvitePanelShow, ["stop"]) }, { default: Vue.withCtx(() => [ Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Invited members")), 1) ]), _: 1 }), cancelRoom.value.visible ? (Vue.openBlock(), Vue.createBlock(Button.default, { key: 0, type: "danger", plain: "", class: "footer-button", "custom-style": { width: "100%", padding: "10px", fontSize: "16px" }, onClick: Vue.withModifiers(cancelRoom.value.func, ["stop"]) }, { default: Vue.withCtx(() => [ Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("cancel room")), 1) ]), _: 1 }, 8, ["onClick"])) : Vue.createCommentVNode("", true) ]), invitePanelShow.value ? (Vue.openBlock(), Vue.createElementBlock("div", { key: 0, class: "mask", onClick: Vue.withModifiers(toggleInvitePanelShow, ["stop"]) })) : Vue.createCommentVNode("", true), invitePanelShow.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_15, [ Vue.createElementVNode("div", { class: "invite-member-close", onClick: toggleInvitePanelShow }, [ Vue.createVNode(SvgIcon.default, { icon: ArrowDown.default }) ]), Vue.createElementVNode("div", _hoisted_16, Vue.toDisplayString(Vue.unref(t)("Inviting members to join")), 1), Vue.createVNode(InvitePanel.default, { scheduleInviteList: scheduleInviteList.value }, null, 8, ["scheduleInviteList"]) ])) : Vue.createCommentVNode("", true) ])) : Vue.createCommentVNode("", true) ]), _: 2 }, [ !Vue.unref(environment.isMobile) ? { name: "footer", fn: Vue.withCtx(() => [ _ctx.item.status === Vue.unref(TUIRoomEngine.TUIConferenceStatus).kConferenceStatusNone ? (Vue.openBlock(), Vue.createBlock(Button.default, { key: 0, class: "dialog-button", size: "default", disabled: "" }, { default: Vue.withCtx(() => [ Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("The room is closed")), 1) ]), _: 1 })) : (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_17, [ Vue.createVNode(Button.default, { class: "dialog-button", size: "default", onClick: joinConference }, { default: Vue.withCtx(() => [ Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Enter Now")), 1) ]), _: 1 }), Vue.createVNode(Button.default, { type: "primary", size: "default", class: "button", onClick: toggleInviteRoom }, { default: Vue.withCtx(() => [ Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Invited members")), 1) ]), _: 1 }) ])) ]), key: "0" } : void 0 ]), 1032, ["visible", "title", "editButtonText", "onEdit"]), Vue.createVNode(index$1.default, { visible: modifyDialogVisible.value, "conference-info": props.item, onInput: _cache[1] || (_cache[1] = ($event) => modifyDialogVisible.value = $event) }, null, 8, ["visible", "conference-info"]), Vue.createVNode(index$2.default, { modelValue: showRoomCancel.value, "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => showRoomCancel.value = $event), title: Vue.unref(t)("Cancellation of scheduled rooms"), modal: true, "show-close": true, "close-on-click-modal": true, width: "480px", "append-to-body": true, "title-icon": WarningIcon.default, cancelButton: Vue.unref(t)("No cancellation"), confirmButton: Vue.unref(t)("cancel room"), onConfirm: handleCancelSchedule, onCancel: _cache[4] || (_cache[4] = ($event) => showRoomCancel.value = false) }, { footer: Vue.withCtx(() => [ Vue.createElementVNode("span", null, [ Vue.createVNode(Button.default, { class: "dialog-button", size: "default", onClick: handleCancelSchedule }, { default: Vue.withCtx(() => [ Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("cancel room")), 1) ]), _: 1 }), Vue.createVNode(Button.default, { type: "primary", size: "default", class: "button", onClick: _cache[2] || (_cache[2] = ($event) => showRoomCancel.value = false) }, { default: Vue.withCtx(() => [ Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("No cancellation")), 1) ]), _: 1 }) ]) ]), default: Vue.withCtx(() => [ Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Other members will not be able to join after cancellation")), 1) ]), _: 1 }, 8, ["modelValue", "title", "cancelButton", "confirmButton"]), Vue.createVNode(index$2.default, { modelValue: showRoomInvite.value, "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => showRoomInvite.value = $event), title: Vue.unref(t)("sb invites you to join the conference", { name: Vue.unref(userName) || Vue.unref(userId) }), modal: true, "show-close": true, "close-on-click-modal": true, width: "540px", "append-to-body": true, "title-icon": SuccessIcon.default }, { footer: Vue.withCtx(() => [ Vue.createElementVNode("span", null, [ Vue.createVNode(Button.default, { class: "dialog-button", size: "default", onClick: _cache[5] || (_cache[5] = ($event) => copyRoomIdAndRoomLink()) }, { default: Vue.withCtx(() => [ Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Copy the conference number and link")), 1) ]), _: 1 }) ]) ]), default: Vue.withCtx(() => [ Vue.createVNode(InvitePanel.default, { scheduleInviteList: scheduleInviteList.value }, null, 8, ["scheduleInviteList"]) ]), _: 1 }, 8, ["modelValue", "title"]) ]); }; } }); exports.default = _sfc_main;