@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.6 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
const room = require("../../../stores/room.js");
const useRoomControlHooks = require("./useRoomControlHooks.js");
const vTap = require("../../../directives/vTap.js");
const ScheduleRoomList = require("../../ScheduleConference/ScheduleRoomList.vue.js");
const index = require("../../ScheduleConference/ScheduleConferencePanel/index.js");
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__ */ Vue.defineComponent({
__name: "RoomControlH5",
props: {
userName: {},
givenRoomId: {}
},
emits: ["create-room", "enter-room", "update-user-name"],
setup(__props, { expose: __expose, emit: __emit }) {
const { t } = useRoomControlHooks.default();
const moreTypeRef = Vue.ref();
const roomStore = room.useRoomStore();
const showRoomDetail = Vue.ref(false);
const showMoreType = Vue.ref(false);
const showScheduleRoom = Vue.ref(false);
const isJoinRoom = Vue.ref(false);
const roomType = Vue.computed(
() => mode.value === "FreeToSpeak" ? t("Free Speech Room") : t("On-stage Speaking Room")
);
const isMicOn = Vue.ref(true);
const isCamerOn = Vue.ref(true);
const mode = Vue.ref("FreeToSpeak");
const tuiRoomParam = {
isOpenCamera: true,
isOpenMicrophone: true,
defaultCameraId: "",
defaultMicrophoneId: "",
defaultSpeakerId: ""
};
const emit = __emit;
const props = __props;
__expose({
getRoomParam
});
const currentUserName = Vue.ref();
Vue.watch(
() => props.userName,
(val) => {
currentUserName.value = val ? val : `user_${Math.ceil(Math.random() * 10)}`;
},
{ immediate: true }
);
const currentRoomId = Vue.ref(props.givenRoomId);
const hasGivenRoomId = Vue.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)) {
uikitBaseComponentVue3.TUIToast({
type: uikitBaseComponentVue3.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;
}
}
Vue.onMounted(() => {
document == null ? void 0 : document.addEventListener("click", handleDocumentClick, true);
});
Vue.onUnmounted(() => {
document == null ? void 0 : document.removeEventListener("click", handleDocumentClick, true);
});
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
Vue.createElementVNode("div", _hoisted_2, [
Vue.createElementVNode("div", {
class: "button-item",
onClick: enterRoom
}, [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconEnterRoom), { size: "22" }),
Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Join Room")), 1)
]),
Vue.createElementVNode("div", {
class: "button-item",
onClick: createRoom
}, [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconCreateRoom), { size: "22" }),
Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("New Room")), 1)
]),
Vue.createElementVNode("div", {
class: "button-item",
onClick: scheduleRoom
}, [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconScheduleRoom), { size: "22" }),
Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Schedule")), 1)
])
]),
Vue.createElementVNode("div", _hoisted_3, [
Vue.createVNode(ScheduleRoomList.default, {
onJoinConference: _cache[0] || (_cache[0] = ($event) => handleRoomOption("Join", $event))
})
]),
showRoomDetail.value || hasGivenRoomId.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4, [
Vue.createElementVNode("div", _hoisted_5, [
Vue.withDirectives(Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconArrowStrokeBack), {
size: "10",
class: "close-icon"
}, null, 512), [
[Vue.unref(vTap.default), handleClose]
]),
isJoinRoom.value || hasGivenRoomId.value ? (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_6, Vue.toDisplayString(Vue.unref(t)("Join Room")), 1)) : (Vue.openBlock(), Vue.createElementBlock("span", _hoisted_7, Vue.toDisplayString(Vue.unref(t)("New Room")), 1))
]),
Vue.createElementVNode("div", _hoisted_8, [
Vue.createElementVNode("div", _hoisted_9, [
isJoinRoom.value || hasGivenRoomId.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_10, [
Vue.createElementVNode("span", _hoisted_11, Vue.toDisplayString(Vue.unref(t)("Room ID")), 1),
Vue.withDirectives(Vue.createElementVNode("input", {
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => currentRoomId.value = $event),
class: "roomid-input",
type: "number",
placeholder: Vue.unref(t)("Enter room ID"),
maxlength: "10",
enterkeyhint: "complete",
onKeyup: handleInput
}, null, 40, _hoisted_12), [
[Vue.vModelText, currentRoomId.value]
])
])) : (Vue.openBlock(), Vue.createElementBlock("div", {
key: 1,
class: "room-detail-info-box",
onClick: chooseRoomType
}, [
Vue.createElementVNode("span", _hoisted_13, Vue.toDisplayString(Vue.unref(t)("Room Type")), 1),
Vue.createElementVNode("div", _hoisted_14, [
Vue.createElementVNode("span", _hoisted_15, Vue.toDisplayString(roomType.value), 1)
]),
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconArrowStrokeSelectDown), {
class: "chevron-down-icon",
size: "9"
})
])),
Vue.createElementVNode("div", _hoisted_16, [
Vue.createElementVNode("span", _hoisted_17, Vue.toDisplayString(Vue.unref(t)("Your Name")), 1),
Vue.createElementVNode("span", _hoisted_18, Vue.toDisplayString(currentUserName.value), 1)
])
]),
Vue.createElementVNode("div", _hoisted_19, [
Vue.createElementVNode("div", _hoisted_20, [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Turn on the microphone")) + " ", 1),
Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", {
class: Vue.normalizeClass(["slider-box", [isMicOn.value && "slider-open"]])
}, _cache[4] || (_cache[4] = [
Vue.createElementVNode("span", { class: "slider-block" }, null, -1)
]), 2)), [
[Vue.unref(vTap.default), () => toggle("isMicOn")]
])
]),
Vue.createElementVNode("div", _hoisted_21, [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Turn on the video")) + " ", 1),
Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", {
class: Vue.normalizeClass(["slider-box", [isCamerOn.value && "slider-open"]])
}, _cache[5] || (_cache[5] = [
Vue.createElementVNode("span", { class: "slider-block" }, null, -1)
]), 2)), [
[Vue.unref(vTap.default), () => toggle("isCamerOn")]
])
])
])
]),
Vue.createElementVNode("div", _hoisted_22, [
isJoinRoom.value || hasGivenRoomId.value ? Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("span", _hoisted_23, [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Join Room")), 1)
])), [
[Vue.unref(vTap.default), () => handleRoomOption("Join")]
]) : Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("span", _hoisted_24, [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("New Room")), 1)
])), [
[Vue.unref(vTap.default), () => handleRoomOption("New")]
])
])
])) : Vue.createCommentVNode("", true),
showMoreType.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_25, [
Vue.createElementVNode("div", {
ref_key: "moreTypeRef",
ref: moreTypeRef,
class: Vue.normalizeClass([
showMoreType.value ? "room-type-container" : "close-room-type-container"
])
}, [
Vue.createElementVNode("div", _hoisted_26, [
Vue.createElementVNode("span", {
class: "choose-cancel",
onClick: _cache[2] || (_cache[2] = ($event) => showMoreType.value = false)
}, Vue.toDisplayString(Vue.unref(t)("Cancel")), 1),
Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("span", _hoisted_27, [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Sure")), 1)
])), [
[Vue.unref(vTap.default), handleConfirm]
])
]),
Vue.createElementVNode("div", _hoisted_28, [
Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("span", {
class: Vue.normalizeClass([[mode.value === "FreeToSpeak" && "room-current-title"], "room-choose-title"])
}, [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Free Speech Room")), 1)
], 2)), [
[Vue.unref(vTap.default), () => chooseCurrentType("FreeToSpeak")]
]),
Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("span", {
class: Vue.normalizeClass([[mode.value === "SpeakAfterTakingSeat" && "room-current-title"], "room-choose-title"])
}, [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("On-stage Speaking Room")), 1)
], 2)), [
[Vue.unref(vTap.default), () => chooseCurrentType("SpeakAfterTakingSeat")]
])
])
], 2)
])) : Vue.createCommentVNode("", true),
Vue.createVNode(Vue.unref(index.default), {
"user-name": props.userName,
onInput: _cache[3] || (_cache[3] = ($event) => showScheduleRoom.value = $event),
visible: showScheduleRoom.value
}, null, 8, ["user-name", "visible"])
]);
};
}
});
exports.default = _sfc_main;