@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,
345 lines (344 loc) • 14 kB
JavaScript
import { defineComponent, ref, computed, watch, onMounted, onUnmounted, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, unref, toDisplayString, withDirectives, vModelText, createTextVNode, normalizeClass } from "vue";
import { IconEnterRoom, IconCreateRoom, IconScheduleRoom, IconArrowStrokeBack, IconArrowStrokeSelectDown, TUIToast, TOAST_TYPE } from "@tencentcloud/uikit-base-component-vue3";
import { useRoomStore } from "../../../stores/room.mjs";
import useRoomControl from "./useRoomControlHooks.mjs";
import vTap from "../../../directives/vTap.mjs";
import ScheduleRoomList from "../../ScheduleConference/ScheduleRoomList.vue.mjs";
import ScheduleConferencePanel from "../../ScheduleConference/ScheduleConferencePanel/index.mjs";
const _hoisted_1 = { class: "control-container" };
const _hoisted_2 = { class: "container-button-group" };
const _hoisted_3 = { class: "conference-list-container" };
const _hoisted_4 = {
key: 0,
class: "room-detail"
};
const _hoisted_5 = { class: "room-detail-header" };
const _hoisted_6 = {
key: 0,
class: "room-detail-header-title"
};
const _hoisted_7 = {
key: 1,
class: "room-detail-header-title"
};
const _hoisted_8 = { class: "room-detail-middle" };
const _hoisted_9 = { class: "room-detail-info" };
const _hoisted_10 = {
key: 0,
class: "room-detail-info-box"
};
const _hoisted_11 = { class: "room-detail-title" };
const _hoisted_12 = ["placeholder"];
const _hoisted_13 = { class: "room-detail-title" };
const _hoisted_14 = { class: "room-show-title" };
const _hoisted_15 = { class: "room-show-title" };
const _hoisted_16 = { class: "room-detail-info-box" };
const _hoisted_17 = { class: "room-detail-title" };
const _hoisted_18 = { class: "roomid-input" };
const _hoisted_19 = { class: "room-detail-setting" };
const _hoisted_20 = { class: "room-detail-setting-list" };
const _hoisted_21 = { class: "room-detail-setting-list" };
const _hoisted_22 = { class: "room-detail-bottom" };
const _hoisted_23 = {
key: 0,
class: "button"
};
const _hoisted_24 = {
key: 1,
class: "button"
};
const _hoisted_25 = {
key: 1,
class: "room-choose-mobile"
};
const _hoisted_26 = { class: "room-choose-button" };
const _hoisted_27 = { class: "choose-confirm" };
const _hoisted_28 = { class: "room-type-hidden" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "RoomControlH5",
props: {
userName: {},
givenRoomId: {}
},
emits: ["create-room", "enter-room", "update-user-name"],
setup(__props, { expose: __expose, emit: __emit }) {
const { t } = useRoomControl();
const moreTypeRef = ref();
const roomStore = useRoomStore();
const showRoomDetail = ref(false);
const showMoreType = ref(false);
const showScheduleRoom = ref(false);
const isJoinRoom = ref(false);
const roomType = computed(
() => mode.value === "FreeToSpeak" ? t("Free Speech Room") : t("On-stage Speaking Room")
);
const isMicOn = ref(true);
const isCamerOn = ref(true);
const mode = ref("FreeToSpeak");
const tuiRoomParam = {
isOpenCamera: true,
isOpenMicrophone: true,
defaultCameraId: "",
defaultMicrophoneId: "",
defaultSpeakerId: ""
};
const emit = __emit;
const props = __props;
__expose({
getRoomParam
});
const currentUserName = ref();
watch(
() => props.userName,
(val) => {
currentUserName.value = val ? val : `user_${Math.ceil(Math.random() * 10)}`;
},
{ immediate: true }
);
const currentRoomId = ref(props.givenRoomId);
const hasGivenRoomId = computed(
() => typeof currentRoomId.value === "string" && currentRoomId.value !== ""
);
function createRoom() {
showRoomDetail.value = !showRoomDetail.value;
isJoinRoom.value = false;
}
function enterRoom() {
showRoomDetail.value = !showRoomDetail.value;
isJoinRoom.value = true;
}
function scheduleRoom() {
showScheduleRoom.value = !showScheduleRoom.value;
}
function chooseRoomType() {
showMoreType.value = !showMoreType.value;
}
function chooseCurrentType(roomType2) {
mode.value = roomType2;
}
function handleConfirm() {
showMoreType.value = !showMoreType.value;
}
function handleClose() {
currentRoomId.value = "";
showRoomDetail.value = false;
showMoreType.value = false;
}
function toggle(type) {
switch (type) {
case "isMicOn":
isMicOn.value = !isMicOn.value;
tuiRoomParam.isOpenMicrophone = isMicOn.value;
break;
case "isCamerOn":
isCamerOn.value = !isCamerOn.value;
tuiRoomParam.isOpenCamera = isCamerOn.value;
break;
}
}
function getRoomParam() {
tuiRoomParam.defaultCameraId = roomStore.currentCameraId;
tuiRoomParam.defaultMicrophoneId = roomStore.currentMicrophoneId;
tuiRoomParam.defaultSpeakerId = roomStore.currentSpeakerId;
return tuiRoomParam;
}
function handleInput(e) {
currentRoomId.value = e.target.value;
}
function handleDocumentClick(event) {
if (showMoreType.value && !moreTypeRef.value.contains(event.target)) {
showMoreType.value = false;
}
}
function handleRoomOption(type, params) {
const roomParam = getRoomParam();
switch (type) {
case "Join":
if (!currentRoomId.value && !(params == null ? void 0 : params.roomId)) {
TUIToast({
type: TOAST_TYPE.ERROR,
message: t("Please enter the room number")
});
return;
}
emit(
"enter-room",
params || {
roomId: String(currentRoomId.value),
roomParam
}
);
break;
case "New":
emit("create-room", {
roomMode: mode.value,
roomParam,
isSeatEnabled: Boolean(mode.value === "SpeakAfterTakingSeat")
});
break;
}
}
onMounted(() => {
document == null ? void 0 : document.addEventListener("click", handleDocumentClick, true);
});
onUnmounted(() => {
document == null ? void 0 : document.removeEventListener("click", handleDocumentClick, true);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", {
class: "button-item",
onClick: enterRoom
}, [
createVNode(unref(IconEnterRoom), { size: "22" }),
createElementVNode("span", null, toDisplayString(unref(t)("Join Room")), 1)
]),
createElementVNode("div", {
class: "button-item",
onClick: createRoom
}, [
createVNode(unref(IconCreateRoom), { size: "22" }),
createElementVNode("span", null, toDisplayString(unref(t)("New Room")), 1)
]),
createElementVNode("div", {
class: "button-item",
onClick: scheduleRoom
}, [
createVNode(unref(IconScheduleRoom), { size: "22" }),
createElementVNode("span", null, toDisplayString(unref(t)("Schedule")), 1)
])
]),
createElementVNode("div", _hoisted_3, [
createVNode(ScheduleRoomList, {
onJoinConference: _cache[0] || (_cache[0] = ($event) => handleRoomOption("Join", $event))
})
]),
showRoomDetail.value || hasGivenRoomId.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
createElementVNode("div", _hoisted_5, [
withDirectives(createVNode(unref(IconArrowStrokeBack), {
size: "10",
class: "close-icon"
}, null, 512), [
[unref(vTap), handleClose]
]),
isJoinRoom.value || hasGivenRoomId.value ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(t)("Join Room")), 1)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(unref(t)("New Room")), 1))
]),
createElementVNode("div", _hoisted_8, [
createElementVNode("div", _hoisted_9, [
isJoinRoom.value || hasGivenRoomId.value ? (openBlock(), createElementBlock("div", _hoisted_10, [
createElementVNode("span", _hoisted_11, toDisplayString(unref(t)("Room ID")), 1),
withDirectives(createElementVNode("input", {
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => currentRoomId.value = $event),
class: "roomid-input",
type: "number",
placeholder: unref(t)("Enter room ID"),
maxlength: "10",
enterkeyhint: "complete",
onKeyup: handleInput
}, null, 40, _hoisted_12), [
[vModelText, currentRoomId.value]
])
])) : (openBlock(), createElementBlock("div", {
key: 1,
class: "room-detail-info-box",
onClick: chooseRoomType
}, [
createElementVNode("span", _hoisted_13, toDisplayString(unref(t)("Room Type")), 1),
createElementVNode("div", _hoisted_14, [
createElementVNode("span", _hoisted_15, toDisplayString(roomType.value), 1)
]),
createVNode(unref(IconArrowStrokeSelectDown), {
class: "chevron-down-icon",
size: "9"
})
])),
createElementVNode("div", _hoisted_16, [
createElementVNode("span", _hoisted_17, toDisplayString(unref(t)("Your Name")), 1),
createElementVNode("span", _hoisted_18, toDisplayString(currentUserName.value), 1)
])
]),
createElementVNode("div", _hoisted_19, [
createElementVNode("div", _hoisted_20, [
createTextVNode(toDisplayString(unref(t)("Turn on the microphone")) + " ", 1),
withDirectives((openBlock(), createElementBlock("div", {
class: normalizeClass(["slider-box", [isMicOn.value && "slider-open"]])
}, _cache[4] || (_cache[4] = [
createElementVNode("span", { class: "slider-block" }, null, -1)
]), 2)), [
[unref(vTap), () => toggle("isMicOn")]
])
]),
createElementVNode("div", _hoisted_21, [
createTextVNode(toDisplayString(unref(t)("Turn on the video")) + " ", 1),
withDirectives((openBlock(), createElementBlock("div", {
class: normalizeClass(["slider-box", [isCamerOn.value && "slider-open"]])
}, _cache[5] || (_cache[5] = [
createElementVNode("span", { class: "slider-block" }, null, -1)
]), 2)), [
[unref(vTap), () => toggle("isCamerOn")]
])
])
])
]),
createElementVNode("div", _hoisted_22, [
isJoinRoom.value || hasGivenRoomId.value ? withDirectives((openBlock(), createElementBlock("span", _hoisted_23, [
createTextVNode(toDisplayString(unref(t)("Join Room")), 1)
])), [
[unref(vTap), () => handleRoomOption("Join")]
]) : withDirectives((openBlock(), createElementBlock("span", _hoisted_24, [
createTextVNode(toDisplayString(unref(t)("New Room")), 1)
])), [
[unref(vTap), () => handleRoomOption("New")]
])
])
])) : createCommentVNode("", true),
showMoreType.value ? (openBlock(), createElementBlock("div", _hoisted_25, [
createElementVNode("div", {
ref_key: "moreTypeRef",
ref: moreTypeRef,
class: normalizeClass([
showMoreType.value ? "room-type-container" : "close-room-type-container"
])
}, [
createElementVNode("div", _hoisted_26, [
createElementVNode("span", {
class: "choose-cancel",
onClick: _cache[2] || (_cache[2] = ($event) => showMoreType.value = false)
}, toDisplayString(unref(t)("Cancel")), 1),
withDirectives((openBlock(), createElementBlock("span", _hoisted_27, [
createTextVNode(toDisplayString(unref(t)("Sure")), 1)
])), [
[unref(vTap), handleConfirm]
])
]),
createElementVNode("div", _hoisted_28, [
withDirectives((openBlock(), createElementBlock("span", {
class: normalizeClass([[mode.value === "FreeToSpeak" && "room-current-title"], "room-choose-title"])
}, [
createTextVNode(toDisplayString(unref(t)("Free Speech Room")), 1)
], 2)), [
[unref(vTap), () => chooseCurrentType("FreeToSpeak")]
]),
withDirectives((openBlock(), createElementBlock("span", {
class: normalizeClass([[mode.value === "SpeakAfterTakingSeat" && "room-current-title"], "room-choose-title"])
}, [
createTextVNode(toDisplayString(unref(t)("On-stage Speaking Room")), 1)
], 2)), [
[unref(vTap), () => chooseCurrentType("SpeakAfterTakingSeat")]
])
])
], 2)
])) : createCommentVNode("", true),
createVNode(unref(ScheduleConferencePanel), {
"user-name": props.userName,
onInput: _cache[3] || (_cache[3] = ($event) => showScheduleRoom.value = $event),
visible: showScheduleRoom.value
}, null, 8, ["user-name", "visible"])
]);
};
}
});
export {
_sfc_main as default
};