@tencentcloud/roomkit-electron-vue3 2.4.1 → 2.5.0

package/es/components/ScheduleConference/ScheduleRoomControl.vue2.mjs

@@ -0,0 +1,464 @@
+import { defineComponent, ref, computed, withDirectives, openBlock, createElementBlock, createElementVNode, toDisplayString, unref, createCommentVNode, normalizeClass, createVNode, Fragment, renderList, vShow, withCtx, createTextVNode, createBlock, nextTick, pushScopeId, popScopeId } from "vue";
+import { TUIConferenceStatus } from "@tencentcloud/tuiroom-engine-electron";
+import "../../services/main.mjs";
+import { roomService } from "../../services/roomService.mjs";
+import { useI18n } from "../../locales/index.mjs";
+import "mitt";
+import "../../services/manager/roomActionManager.mjs";
+import useRoomInfo from "../RoomHeader/RoomInfo/useRoomInfoHooks.mjs";
+import SvgIcon from "../common/base/SvgIcon.vue.mjs";
+import Dialog from "../common/base/Dialog/index.vue.mjs";
+import EllipsisIcon from "../common/icons/EllipsisIcon.vue.mjs";
+import copyIcon from "../common/icons/CopyIcon.vue.mjs";
+import LinkIcon from "../common/icons/LinkIcon.vue.mjs";
+import SuccessIcon from "../common/icons/SuccessIcon.vue.mjs";
+import WarningIcon from "../common/icons/WarningIcon.vue.mjs";
+import TuiButton from "../common/base/Button.vue.mjs";
+import vClickOutside from "../../directives/vClickOutside.mjs";
+import ScheduleConferencePanel from "./ScheduleConferencePanel.vue.mjs";
+import { getUrlWithRoomId } from "../../utils/utils.mjs";
+import { useBasicStore } from "../../stores/basic.mjs";
+import { storeToRefs } from "pinia";
+const _withScopeId = (n) => (pushScopeId("data-v-8b752e7f"), n = n(), popScopeId(), n);
+const _hoisted_1 = { class: "schedule-room-control" };
+const _hoisted_2 = { class: "schedule-room-info" };
+const _hoisted_3 = ["title"];
+const _hoisted_4 = { class: "schedule-content" };
+const _hoisted_5 = { class: "schedule-content-time" };
+const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("i", { class: "segregation-level" }, null, -1));
+const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("i", { class: "segregation-vertical" }, null, -1));
+const _hoisted_8 = { class: "schedule-content-roomId" };
+const _hoisted_9 = {
+  key: 0,
+  class: "segregation-vertical"
+};
+const _hoisted_10 = ["onClick"];
+const _hoisted_11 = ["onClick"];
+const _hoisted_12 = { class: "roomInfo-container" };
+const _hoisted_13 = { class: "roomInfo-title" };
+const _hoisted_14 = ["title"];
+const _hoisted_15 = ["onClick"];
+const _hoisted_16 = { key: 1 };
+const _hoisted_17 = { class: "invite-member" };
+const _hoisted_18 = { class: "invite-member-title" };
+const _hoisted_19 = ["title"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ScheduleRoomControl",
+  props: {
+    item: {},
+    scheduleStartDate: {},
+    scheduleEndDate: {},
+    scheduleStartTime: {},
+    scheduleEndTime: {}
+  },
+  emits: ["join-conference", "show-more"],
+  setup(__props, { emit: __emit }) {
+    const basicStore = useBasicStore();
+    const { userId, userName } = storeToRefs(basicStore);
+    const { t } = useI18n();
+    const showMoreControl = ref(false);
+    const dropdownClass = ref("down");
+    const moreBtnRef = ref();
+    const operateListRef = ref();
+    const modifyDialogVisible = ref(false);
+    const emit = __emit;
+    const showRoomDetail = ref(false);
+    const showRoomCancel = ref(false);
+    const showRoomInvite = ref(false);
+    const props = __props;
+    const { onCopy } = useRoomInfo();
+    const statusMap = {
+      [TUIConferenceStatus.kConferenceStatusRunning]: {
+        text: "Ongoing",
+        className: "status-running"
+      }
+    };
+    const getStatusTextAndClass = (status) => statusMap[status] || { text: "", className: "" };
+    const isOwner = computed(() => props.item.basicRoomInfo.ownerId === roomService.basicStore.userId && props.item.status === TUIConferenceStatus.kConferenceStatusNotStarted);
+    const viewDetails = computed(() => ({
+      key: "roomDetails",
+      title: t("view details"),
+      visible: true,
+      func: () => {
+        showRoomDetail.value = true;
+        showMoreControl.value = false;
+      }
+    }));
+    const modifyRoom = computed(() => ({
+      key: "modifyRoom",
+      title: t("modify room"),
+      visible: isOwner.value,
+      func: () => {
+        modifyDialogVisible.value = true;
+        showMoreControl.value = false;
+      }
+    }));
+    const cancelRoom = computed(() => ({
+      key: "cancelRoom",
+      title: t("cancel room"),
+      visible: isOwner.value,
+      func: () => {
+        showRoomCancel.value = true;
+        showMoreControl.value = false;
+      }
+    }));
+    const moreControlList = computed(() => [
+      viewDetails.value,
+      modifyRoom.value,
+      cancelRoom.value
+    ]);
+    const scheduleAttendeesInfo = computed(() => props.item.scheduleAttendees ? props.item.scheduleAttendees.map((attendee) => attendee.userName || attendee.userId).join("; ") : "");
+    const durationTime = 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 = computed(() => [
+      { 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: true
+      },
+      { title: "Room Type", content: `${t(getSeatModeDisplay(props.item.basicRoomInfo.isSeatEnabled))}`, isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: true },
+      { title: "Creator", content: props.item.basicRoomInfo.roomOwner, isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: true },
+      { title: "Members", 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 === TUIConferenceStatus.kConferenceStatusNone },
+      { title: "Duration of participation", content: getScheduleTime(durationTime.value), isShowCopyIcon: false, status: null, isShowStatus: false, isVisible: props.item.status === TUIConferenceStatus.kConferenceStatusNone }
+    ]);
+    const scheduleInviteList = computed(() => [
+      { title: "Room Name", content: props.item.basicRoomInfo.roomName, isShowCopyIcon: false },
+      { title: "Room Type", content: `${t(getSeatModeDisplay(props.item.basicRoomInfo.isSeatEnabled))}`, isShowCopyIcon: false },
+      { title: "Room Time", content: `${props.scheduleStartDate} ${props.scheduleStartTime} - ${props.scheduleEndDate} ${props.scheduleEndTime}`, isShowCopyIcon: false },
+      { title: "Room ID", content: props.item.basicRoomInfo.roomId, isShowCopyIcon: true },
+      { title: "Room Link", content: getUrlWithRoomId(props.item.basicRoomInfo.roomId), isShowCopyIcon: true }
+    ]);
+    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();
+      }
+      showMoreControl.value = !showMoreControl.value;
+    }
+    function handleCloseOperate() {
+      showMoreControl.value = false;
+    }
+    async function handleDropDownPosition() {
+      var _a, _b, _c;
+      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 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 joinConference = () => {
+      var _a;
+      emit("join-conference", {
+        roomId: (_a = props.item) == null ? void 0 : _a.basicRoomInfo.roomId,
+        roomParam: {
+          isOpenCamera: false,
+          isOpenMicrophone: true
+        }
+      });
+    };
+    function toggleInviteRoom() {
+      if (showRoomDetail.value) {
+        showRoomDetail.value = false;
+      }
+      showRoomInvite.value = !showRoomInvite.value;
+    }
+    function copyRoomIdAndRoomLink() {
+      const invitation = `${props.item.basicRoomInfo.roomName}
+
+${t("Room Type")}: ${t(getSeatModeDisplay(props.item.basicRoomInfo.isSeatEnabled))}
+
+${t("Room Time")}: ${props.scheduleStartDate}${props.scheduleStartTime} - ${props.scheduleEndDate}${props.scheduleEndTime}
+
+${t("Room ID")}: ${props.item.basicRoomInfo.roomId}
+
+${t("Room Link")}: ${getUrlWithRoomId(props.item.basicRoomInfo.roomId)}`;
+      onCopy(invitation);
+    }
+    async function handleCancelSchedule() {
+      await roomService.scheduleConferenceManager.cancelConference({ roomId: props.item.basicRoomInfo.roomId });
+      showRoomCancel.value = false;
+    }
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", {
+            class: "schedule-title",
+            title: _ctx.item.basicRoomInfo.roomName
+          }, toDisplayString(_ctx.item.basicRoomInfo.roomName), 9, _hoisted_3),
+          createElementVNode("div", _hoisted_4, [
+            createElementVNode("span", _hoisted_5, [
+              createElementVNode("span", null, toDisplayString(props.scheduleStartTime), 1),
+              _hoisted_6,
+              createElementVNode("span", null, toDisplayString(props.scheduleEndTime), 1)
+            ]),
+            _hoisted_7,
+            createElementVNode("span", _hoisted_8, toDisplayString(_ctx.item.basicRoomInfo.roomId), 1),
+            _ctx.item.status !== unref(TUIConferenceStatus).kConferenceStatusNotStarted ? (openBlock(), createElementBlock("i", _hoisted_9)) : createCommentVNode("", true),
+            createElementVNode("span", {
+              class: normalizeClass(["schedule-content-status", getStatusTextAndClass(_ctx.item.status).className])
+            }, toDisplayString(unref(t)(getStatusTextAndClass(_ctx.item.status).text)), 3)
+          ])
+        ]),
+        createElementVNode("div", {
+          ref_key: "moreBtnRef",
+          ref: moreBtnRef,
+          class: "schedule-room-operate"
+        }, [
+          createVNode(SvgIcon, {
+            class: "ellipsis",
+            icon: EllipsisIcon,
+            onClick: toggleClickMoreBtn
+          }),
+          withDirectives(createElementVNode("div", {
+            ref_key: "operateListRef",
+            ref: operateListRef,
+            class: normalizeClass(["operate-list", dropdownClass.value])
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(moreControlList.value, (controlItem) => {
+              return openBlock(), createElementBlock(Fragment, {
+                key: controlItem.key
+              }, [
+                controlItem.visible ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: normalizeClass(["operate-item", { "cancel-text": controlItem.key === "cancelRoom" }]),
+                  onClick: ($event) => controlItem.func()
+                }, [
+                  createElementVNode("span", {
+                    class: "operate-text",
+                    onClick: controlItem.func
+                  }, toDisplayString(controlItem.title), 9, _hoisted_11)
+                ], 10, _hoisted_10)) : createCommentVNode("", true)
+              ], 64);
+            }), 128))
+          ], 2), [
+            [vShow, showMoreControl.value]
+          ]),
+          createVNode(SvgIcon, {
+            class: "link",
+            icon: LinkIcon,
+            onClick: toggleInviteRoom
+          }),
+          createVNode(TuiButton, {
+            size: "default",
+            onClick: joinConference
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("join")), 1)
+            ]),
+            _: 1
+          })
+        ], 512),
+        createVNode(ScheduleConferencePanel, {
+          visible: modifyDialogVisible.value,
+          "conference-info": props.item,
+          onInput: _cache[0] || (_cache[0] = ($event) => modifyDialogVisible.value = $event)
+        }, null, 8, ["visible", "conference-info"]),
+        createVNode(Dialog, {
+          modelValue: showRoomDetail.value,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showRoomDetail.value = $event),
+          title: unref(t)("Room Details"),
+          modal: true,
+          "show-close": true,
+          "close-on-click-modal": true,
+          width: "540px",
+          "append-to-body": true
+        }, {
+          footer: withCtx(() => [
+            _ctx.item.status === unref(TUIConferenceStatus).kConferenceStatusNone ? (openBlock(), createBlock(TuiButton, {
+              key: 0,
+              class: "dialog-button",
+              size: "default",
+              disabled: ""
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("The room is closed")), 1)
+              ]),
+              _: 1
+            })) : (openBlock(), createElementBlock("span", _hoisted_16, [
+              createVNode(TuiButton, {
+                class: "dialog-button",
+                size: "default",
+                onClick: joinConference
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("Enter Now")), 1)
+                ]),
+                _: 1
+              }),
+              createVNode(TuiButton, {
+                type: "primary",
+                size: "default",
+                class: "button",
+                onClick: toggleInviteRoom
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("Invited members")), 1)
+                ]),
+                _: 1
+              })
+            ]))
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_12, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(scheduleRoomDetailList.value, (item, index) => {
+                return withDirectives((openBlock(), createElementBlock("div", {
+                  key: index,
+                  class: "roomInfo-content"
+                }, [
+                  createElementVNode("span", _hoisted_13, toDisplayString(unref(t)(item.title)), 1),
+                  createElementVNode("span", {
+                    class: "roomInfo-item",
+                    title: item.content
+                  }, toDisplayString(item.content), 9, _hoisted_14),
+                  item.isShowCopyIcon ? (openBlock(), createElementBlock("span", {
+                    key: 0,
+                    class: "copy-container",
+                    onClick: ($event) => unref(onCopy)(item.content)
+                  }, [
+                    createVNode(SvgIcon, {
+                      class: "copy",
+                      icon: copyIcon
+                    })
+                  ], 8, _hoisted_15)) : createCommentVNode("", true),
+                  item.isShowStatus ? (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    class: normalizeClass(["roomInfo-status", getStatusTextAndClass(item.status).className])
+                  }, toDisplayString(unref(t)(getStatusTextAndClass(item.status).text)), 3)) : createCommentVNode("", true)
+                ])), [
+                  [vShow, item.isVisible]
+                ]);
+              }), 128))
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"]),
+        createVNode(Dialog, {
+          modelValue: showRoomCancel.value,
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => showRoomCancel.value = $event),
+          title: 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
+        }, {
+          footer: withCtx(() => [
+            createElementVNode("span", null, [
+              createVNode(TuiButton, {
+                class: "dialog-button",
+                size: "default",
+                onClick: handleCancelSchedule
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("cancel room")), 1)
+                ]),
+                _: 1
+              }),
+              createVNode(TuiButton, {
+                type: "primary",
+                size: "default",
+                class: "button",
+                onClick: _cache[2] || (_cache[2] = ($event) => showRoomCancel.value = false)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("No cancellation")), 1)
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          default: withCtx(() => [
+            createElementVNode("span", null, toDisplayString(unref(t)("Other members will not be able to join after cancellation")), 1)
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"]),
+        createVNode(Dialog, {
+          modelValue: showRoomInvite.value,
+          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => showRoomInvite.value = $event),
+          title: unref(t)("sb invites you to join the conference", { name: unref(userName) || unref(userId) }),
+          modal: true,
+          "show-close": true,
+          "close-on-click-modal": true,
+          width: "540px",
+          "append-to-body": true,
+          "title-icon": SuccessIcon
+        }, {
+          footer: withCtx(() => [
+            createElementVNode("span", null, [
+              createVNode(TuiButton, {
+                class: "dialog-button",
+                size: "default",
+                onClick: _cache[4] || (_cache[4] = ($event) => copyRoomIdAndRoomLink())
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("Copy the conference number and link")), 1)
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_17, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(scheduleInviteList.value, (item, index) => {
+                return openBlock(), createElementBlock("div", {
+                  key: index,
+                  class: "invite-member-container"
+                }, [
+                  createElementVNode("span", _hoisted_18, toDisplayString(unref(t)(item.title)), 1),
+                  createElementVNode("span", {
+                    class: "invite-member-content",
+                    title: item.content
+                  }, toDisplayString(item.content), 9, _hoisted_19),
+                  item.isShowCopyIcon ? (openBlock(), createBlock(SvgIcon, {
+                    key: 0,
+                    class: "copy",
+                    icon: copyIcon,
+                    onClick: ($event) => unref(onCopy)(item.content)
+                  }, null, 8, ["onClick"])) : createCommentVNode("", true)
+                ]);
+              }), 128))
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"])
+      ])), [
+        [unref(vClickOutside), handleCloseOperate]
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/components/ScheduleConference/ScheduleRoomControl.vue3.mjs

@@ -0,0 +1 @@
+

package/es/components/{common/base/Input.vue.d.ts → ScheduleConference/ScheduleRoomList.vue.d.ts}

@@ -1,28 +1,17 @@
-interface Props {
-    modelValue: string;
-    placeholder: string;
-    disabled?: boolean;
-    type?: string;
-}
-declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    modelValue: string;
-    placeholder: string;
-    disabled: boolean;
-    type: string;
+declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    isShowScheduledConference?: boolean | undefined;
+}>, {
+    isShowScheduledConference: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    modelValue: string;
-    placeholder: string;
-    disabled: boolean;
-    type: string;
+    "join-conference": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    isShowScheduledConference?: boolean | undefined;
+}>, {
+    isShowScheduledConference: boolean;
 }>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onJoin-conference"?: ((...args: any[]) => any) | undefined;
 }, {
-    type: string;
-    modelValue: string;
-    disabled: boolean;
-    placeholder: string;
+    isShowScheduledConference: boolean;
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/es/components/ScheduleConference/ScheduleRoomList.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./ScheduleRoomList.vue2.mjs";
+import "./ScheduleRoomList.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const ScheduleRoomList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-96824bae"]]);
+export {
+  ScheduleRoomList as default
+};