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,
86 lines (85 loc) • 3.92 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const IconButton = require("../../../components/common/base/IconButton.vue.js");
const SvgIcon = require("../../../components/common/base/SvgIcon.vue.js");
const CameraOnIcon = require("../../../components/common/icons/CameraOnIcon.vue.js");
const CameraOffIcon = require("../../../components/common/icons/CameraOffIcon.vue.js");
const VideoSettingTab = require("./VideoSettingTab.vue2.js");
const index = require("../../../locales/index.js");
const vClickOutside = require("../../../directives/vClickOutside.js");
const index$1 = require("../../hooks/useVideoDeviceState/index.js");
const MediaDeviceSetting = require("../../type/MediaDeviceSetting.js");
const pinia = require("pinia");
const room = require("../../../stores/room.js");
const basic = require("../../../stores/basic.js");
const _hoisted_1 = { class: "video-control-container" };
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "VideoMediaControl",
emits: ["click-icon"],
setup(__props, { emit: __emit }) {
const videoSettingProps = Vue.inject("videoSettingProps");
const emits = __emit;
const { cameraState, isCameraTesting, camera } = index$1.useVideoDeviceState();
const basicStore = basic.useBasicStore();
const roomStore = room.useRoomStore();
const { localUser } = pinia.storeToRefs(roomStore);
const { t } = index.useI18n();
const showVideoSettingTab = Vue.ref(false);
const icon = Vue.computed(() => {
if (!basicStore.roomId) {
return isCameraTesting.value ? CameraOnIcon.default : CameraOffIcon.default;
}
return cameraState.value === MediaDeviceSetting.MediaDeviceState.DeviceOn ? CameraOnIcon.default : CameraOffIcon.default;
});
async function handleClickIcon() {
showVideoSettingTab.value = false;
emits("click-icon");
if (!basicStore.roomId) {
if (isCameraTesting.value) {
await camera.stopCameraDeviceTest();
} else {
await camera.startCameraDeviceTest({ view: "video-preview" });
}
return;
}
if (localUser.value.hasVideoStream) {
await camera.closeLocalCamera();
} else {
await camera.openLocalCamera();
}
}
function handleMore() {
showVideoSettingTab.value = !showVideoSettingTab.value;
}
function handleHideVideoSettingTab() {
if (showVideoSettingTab.value) {
showVideoSettingTab.value = false;
}
}
return (_ctx, _cache) => {
var _a;
return Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
Vue.createVNode(IconButton.default, {
title: Vue.unref(t)("Camera"),
"has-more": ((_a = Vue.unref(videoSettingProps)) == null ? void 0 : _a.displayMode) === Vue.unref(MediaDeviceSetting.MediaSettingDisplayMode).IconWithPanel,
disabled: Vue.unref(cameraState) === Vue.unref(MediaDeviceSetting.MediaDeviceState).DeviceOffAndDisabled,
"is-not-support": Vue.unref(cameraState) === Vue.unref(MediaDeviceSetting.MediaDeviceState).NotSupportCapture || Vue.unref(cameraState) === Vue.unref(MediaDeviceSetting.MediaDeviceState).NoDeviceDetected,
onClickIcon: handleClickIcon,
onClickMore: handleMore
}, {
default: Vue.withCtx(() => [
Vue.createVNode(SvgIcon.default, { icon: icon.value }, null, 8, ["icon"])
]),
_: 1
}, 8, ["title", "has-more", "disabled", "is-not-support"]),
Vue.withDirectives(Vue.createVNode(VideoSettingTab.default, { class: "video-tab" }, null, 512), [
[Vue.vShow, showVideoSettingTab.value]
])
])), [
[Vue.unref(vClickOutside.default), handleHideVideoSettingTab]
]);
};
}
});
exports.default = _sfc_main;