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,
135 lines (134 loc) • 4.69 kB
JavaScript
import { defineComponent, ref, computed, watch, nextTick, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createTextVNode, toDisplayString } from "vue";
import { storeToRefs } from "pinia";
import "../../services/main.mjs";
import { roomService } from "../../services/roomService.mjs";
import { EventType } from "../../services/types.mjs";
import { useI18n } from "../../locales/index.mjs";
import "@tencentcloud/tuiroom-engine-js";
import "../../utils/environment.mjs";
import "mitt";
import "../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
import Dialog from "../common/base/Dialog/index.mjs";
import { TUIButton } from "@tencentcloud/uikit-base-component-vue3";
import Input from "../common/base/Input/index.mjs";
import CloseInputIcon from "../common/icons/CloseInputIcon.vue.mjs";
import { useBasicStore } from "../../stores/basic.mjs";
import SvgIcon from "../common/base/SvgIcon.vue.mjs";
import { invalidPasswordRegex } from "../../utils/common.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "PasswordDialog",
props: {
visible: { type: Boolean }
},
setup(__props) {
const basicStore = useBasicStore();
const { roomId } = storeToRefs(basicStore);
const { t } = useI18n();
const inputPassword = ref("");
const props = __props;
const isShowPasswordContainer = ref(false);
const isJoiningRoom = ref(false);
const isJoinButtonDisable = computed(
() => inputPassword.value.length === 0 || isJoiningRoom.value
);
watch(
() => props.visible,
(val) => {
isShowPasswordContainer.value = val;
},
{
immediate: true
}
);
async function joinRoom() {
try {
isJoiningRoom.value = true;
await roomService.join(roomId.value, {
isOpenCamera: false,
isOpenMicrophone: true,
password: inputPassword.value
});
roomService.emit(EventType.ROOM_JOIN);
} catch (error) {
isJoiningRoom.value = false;
}
}
function cancelInputPassword() {
inputPassword.value = "";
roomService.emit(EventType.ROOM_ERROR);
}
watch(
() => inputPassword.value,
async (val) => {
if (val && invalidPasswordRegex.test(val)) {
await nextTick();
inputPassword.value = val.replace(invalidPasswordRegex, "");
}
}
);
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Dialog), {
modelValue: isShowPasswordContainer.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isShowPasswordContainer.value = $event),
title: unref(t)("The room is encrypted"),
modal: true,
"show-close": false,
"close-on-click-modal": false,
width: "420px",
"append-to-body": true,
"confirm-button": unref(t)("Join"),
"cancel-button": unref(t)("Cancel"),
onConfirm: joinRoom,
onCancel: cancelInputPassword
}, {
footer: withCtx(() => [
createElementVNode("span", null, [
createVNode(unref(TUIButton), {
disabled: isJoinButtonDisable.value,
onClick: joinRoom,
type: "primary",
style: { "min-width": "88px" }
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(t)("Join")), 1)
]),
_: 1
}, 8, ["disabled"]),
createVNode(unref(TUIButton), {
onClick: cancelInputPassword,
style: { "min-width": "88px" }
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(t)("Cancel")), 1)
]),
_: 1
})
])
]),
default: withCtx(() => [
createVNode(unref(Input), {
"model-value": inputPassword.value,
onInput: _cache[1] || (_cache[1] = ($event) => inputPassword.value = $event),
placeholder: unref(t)("Please enter the password"),
type: "password",
maxlength: "32"
}, {
suffixIcon: withCtx(() => [
createVNode(SvgIcon, {
class: "svg-icon",
onClick: _cache[0] || (_cache[0] = ($event) => inputPassword.value = ""),
icon: CloseInputIcon
})
]),
_: 1
}, 8, ["model-value", "placeholder"])
]),
_: 1
}, 8, ["modelValue", "title", "confirm-button", "cancel-button"]);
};
}
});
export {
_sfc_main as default
};