@tencentcloud/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,
294 lines (293 loc) • 13.1 kB
JavaScript
import { defineComponent, ref, watch, onMounted, onUnmounted, createElementBlock, openBlock, createElementVNode, createVNode, unref, createCommentVNode, withDirectives, withModifiers, withCtx, toDisplayString, createBlock, withKeys, vModelText, normalizeClass } from "vue";
import { TUIButton, IconCreateRoom, IconNext, IconEnterRoom, IconScheduleRoom } from "@tencentcloud/uikit-base-component-vue3";
import useRoomControl from "./useRoomControlHooks.mjs";
import ScheduleConferencePanel from "../../ScheduleConference/ScheduleConferencePanel/index.mjs";
import vClickOutside from "../../../directives/vClickOutside.mjs";
import _sfc_main$1 from "../../../core/components/AudioSetting/index.vue.mjs";
import VideoSetting from "../../../core/components/VideoSetting/index.vue.mjs";
import VideoPreview from "../../../core/components/VideoSetting/VideoPreview.vue.mjs";
import "../../../locales/index.mjs";
import { useAudioDeviceState } from "../../../core/hooks/useAudioDeviceState/index.mjs";
import { useVideoDeviceState } from "../../../core/hooks/useVideoDeviceState/index.mjs";
import TUIRoomEngine__default from "@tencentcloud/tuiroom-engine-js";
import "../../../stores/room.mjs";
import "../../../core/hooks/useUserState/useUserActions/useAudioAction.mjs";
import "../../../core/hooks/useUserState/useUserActions/useChatAction.mjs";
import "../../../core/hooks/useUserState/useUserActions/useVideoAction.mjs";
import "../../../core/hooks/useUserState/useUserActions/useTransferOwnerAction.mjs";
import "../../../core/hooks/useUserState/useUserActions/useChangeNameCardAction/index.mjs";
import "../../../core/hooks/useUserState/useUserActions/useKickUserAction.mjs";
import "../../../core/hooks/useUserState/useUserActions/useSeatAction.mjs";
import "../../../core/hooks/useUserState/useUserActions/useAdminAction.mjs";
import "pinia";
import "../../../core/store/room.mjs";
import "../../../hooks/useRoomEngine.mjs";
import "../../../utils/environment.mjs";
import "../../../core/manager/userEventManger.mjs";
import { MediaSettingDisplayMode } from "../../../core/type/MediaDeviceSetting.mjs";
import "../../../hooks/useZIndex.mjs";
/* empty css */
import "../../../core/hooks/useFreeBeautyState/index.mjs";
/* empty css */
/* empty css */
import "../../../stores/basic.mjs";
/* empty css */
import "../../../core/hooks/useUserState/useUserActions/useMemberInviteAction.mjs";
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
import "../../../services/main.mjs";
import "../../../services/roomService.mjs";
import "mitt";
import "../../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
/* empty css */
/* empty css */
/* empty css */
import "../../common/base/IconButton.vue2.mjs";
/* empty css */
/* empty css */
/* empty css */
/* empty css */
const _hoisted_1 = { class: "room-control-container" };
const _hoisted_2 = { class: "room-control-main" };
const _hoisted_3 = { class: "control-container" };
const _hoisted_4 = { class: "control-region" };
const _hoisted_5 = { class: "media-control-region" };
const _hoisted_6 = { class: "room-control-region" };
const _hoisted_7 = { class: "create-room-region" };
const _hoisted_8 = { class: "button-text" };
const _hoisted_9 = {
key: 0,
class: "create-room-items"
};
const _hoisted_10 = ["title"];
const _hoisted_11 = ["title"];
const _hoisted_12 = { class: "enter-room-region" };
const _hoisted_13 = { class: "button-text" };
const _hoisted_14 = {
key: 1,
class: "enter-room-action"
};
const _hoisted_15 = ["placeholder"];
const _hoisted_16 = {
key: 0,
class: "schedule-room-region"
};
const _hoisted_17 = { class: "button-text" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "RoomControlPC",
props: {
userName: { default: "" },
givenRoomId: {},
enableScheduledConference: { type: Boolean, default: true }
},
emits: ["create-room", "enter-room"],
setup(__props, { expose: __expose, emit: __emit }) {
const { t } = useRoomControl();
const {
isMicrophoneTesting,
microphone,
currentMicrophoneId,
currentSpeakerId
} = useAudioDeviceState();
const { currentCameraId, isCameraTesting } = useVideoDeviceState();
const props = __props;
__expose({
getRoomParam
});
const showCreateRoomItems = ref(false);
const showEnterRoomAction = ref(Boolean(props.givenRoomId));
const scheduleConferenceDialogVisible = ref(false);
const scheduleConference = () => {
scheduleConferenceDialogVisible.value = true;
};
const tuiRoomParam = {
isOpenCamera: true,
isOpenMicrophone: true,
defaultCameraId: "",
defaultMicrophoneId: "",
defaultSpeakerId: ""
};
function getRoomParam() {
tuiRoomParam.defaultCameraId = currentCameraId.value;
tuiRoomParam.defaultMicrophoneId = currentMicrophoneId.value;
tuiRoomParam.defaultSpeakerId = currentSpeakerId.value;
tuiRoomParam.isOpenMicrophone = isMicrophoneTesting.value;
tuiRoomParam.isOpenCamera = isCameraTesting.value;
return tuiRoomParam;
}
const roomId = ref(props.givenRoomId);
watch(
() => props.givenRoomId,
(val) => {
roomId.value = val;
showEnterRoomAction.value = Boolean(val);
},
{ immediate: true }
);
const emit = __emit;
function handleCreateRoom() {
showCreateRoomItems.value = !showCreateRoomItems.value;
}
function handleClickOutsideCreateRoomItems() {
if (showCreateRoomItems.value) {
showCreateRoomItems.value = false;
}
}
function handleEnterRoom() {
showEnterRoomAction.value = true;
}
function createRoom(mode) {
const roomParam = getRoomParam();
emit("create-room", {
roomMode: mode,
roomParam,
isSeatEnabled: Boolean(mode === "SpeakAfterTakingSeat")
});
}
function enterRoom() {
if (!roomId.value) {
return;
}
const roomParam = getRoomParam();
emit("enter-room", {
roomId: String(roomId.value),
roomParam
});
}
onMounted(() => {
TUIRoomEngine__default.once("ready", () => {
microphone.startMicDeviceTest({ interval: 200 });
});
});
onUnmounted(() => {
microphone.stopMicDeviceTest();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
createVNode(unref(VideoPreview), { class: "video-preview" }),
createElementVNode("div", _hoisted_4, [
createElementVNode("div", _hoisted_5, [
createVNode(unref(_sfc_main$1), {
"display-mode": unref(MediaSettingDisplayMode).IconWithPanel,
class: "media-control-item"
}, null, 8, ["display-mode"]),
createVNode(unref(VideoSetting), {
"display-mode": unref(MediaSettingDisplayMode).IconWithPanel,
"support-video-preview": false,
class: "media-control-item"
}, null, 8, ["display-mode"])
]),
createElementVNode("div", _hoisted_6, [
createElementVNode("div", _hoisted_7, [
createVNode(unref(TUIButton), {
onClick: withModifiers(handleCreateRoom, ["stop"]),
size: "large",
type: "primary"
}, {
default: withCtx(() => [
createVNode(unref(IconCreateRoom), { size: "20" }),
createElementVNode("span", _hoisted_8, toDisplayString(unref(t)("New Room")), 1)
]),
_: 1
}),
showCreateRoomItems.value ? withDirectives((openBlock(), createElementBlock("div", _hoisted_9, [
createElementVNode("div", {
class: "create-room-item",
onClick: _cache[0] || (_cache[0] = ($event) => createRoom("SpeakAfterTakingSeat"))
}, [
createElementVNode("span", {
title: unref(t)("On-stage Speaking Room"),
class: "create-room-option"
}, toDisplayString(unref(t)("On-stage Speaking Room")), 9, _hoisted_10),
createVNode(unref(IconNext), {
size: "12",
class: "create-room-icon"
})
]),
createElementVNode("div", {
class: "create-room-item",
onClick: _cache[1] || (_cache[1] = ($event) => createRoom("FreeToSpeak"))
}, [
createElementVNode("span", {
title: unref(t)("Free Speech Room"),
class: "create-room-option"
}, toDisplayString(unref(t)("Free Speech Room")), 9, _hoisted_11),
createVNode(unref(IconNext), {
size: "12",
class: "create-room-icon"
})
])
])), [
[unref(vClickOutside), handleClickOutsideCreateRoomItems]
]) : createCommentVNode("", true)
]),
createElementVNode("div", _hoisted_12, [
!showEnterRoomAction.value ? (openBlock(), createBlock(unref(TUIButton), {
key: 0,
onClick: handleEnterRoom,
size: "large",
type: "primary"
}, {
default: withCtx(() => [
createVNode(unref(IconEnterRoom), { size: "20" }),
createElementVNode("span", _hoisted_13, toDisplayString(unref(t)("Join Room")), 1)
]),
_: 1
})) : createCommentVNode("", true),
showEnterRoomAction.value ? (openBlock(), createElementBlock("div", _hoisted_14, [
withDirectives(createElementVNode("input", {
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => roomId.value = $event),
class: "input",
placeholder: unref(t)("Enter room ID"),
onKeyup: withKeys(enterRoom, ["enter"])
}, null, 40, _hoisted_15), [
[vModelText, roomId.value]
]),
createElementVNode("div", {
class: normalizeClass([
"enter-button",
{ active: roomId.value && roomId.value.length > 0 }
]),
onClick: enterRoom
}, [
createVNode(unref(IconEnterRoom), { size: "20" })
], 2)
])) : createCommentVNode("", true)
]),
props.enableScheduledConference ? (openBlock(), createElementBlock("div", _hoisted_16, [
createVNode(unref(TUIButton), {
onClick: scheduleConference,
size: "large",
type: "primary"
}, {
default: withCtx(() => [
createVNode(unref(IconScheduleRoom), { size: "18" }),
createElementVNode("span", _hoisted_17, toDisplayString(unref(t)("Schedule")), 1)
]),
_: 1
})
])) : createCommentVNode("", true)
])
])
])
]),
createVNode(unref(ScheduleConferencePanel), {
visible: scheduleConferenceDialogVisible.value,
"user-name": props.userName,
onInput: _cache[3] || (_cache[3] = ($event) => scheduleConferenceDialogVisible.value = $event)
}, null, 8, ["visible", "user-name"])
]);
};
}
});
export {
_sfc_main as default
};