@tencentcloud/roomkit-electron-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,
295 lines (294 loc) • 11.4 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const electron = require("electron");
const pinia = require("pinia");
const index = require("../../../locales/index.js");
const IconButton = require("../../common/base/IconButton.vue.js");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
const ScreenWindowSelectDialog = require("./ScreenWindowSelectDialog.vue.js");
const ScreenShareIcon = require("../../common/icons/ScreenShareIcon.vue.js");
const StopScreenShareIcon = require("../../common/icons/StopScreenShareIcon.vue.js");
const room = require("../../../stores/room.js");
const useRoomEngine = require("../../../hooks/useRoomEngine.js");
const Message = require("../../common/base/Message/Message.js");
const message = require("../../../constants/message.js");
const useMitt = require("../../../hooks/useMitt.js");
const index$1 = require("../../common/base/Dialog/index.vue.js");
const Button = require("../../common/base/Button.vue.js");
const index$2 = require("../../../utils/common/logger/index.js");
const _hoisted_1 = { class: "screen-share-control-container" };
const logPrefix = "[ScreenShareControl]";
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "Index",
setup(__props) {
const { t } = index.useI18n();
const roomStore = room.useRoomStore();
const {
isAudience,
remoteScreenStream,
isGeneralUser,
isScreenShareDisableForAllUser,
isWhiteboardVisible,
isSharingScreen,
isLocalUserSharing
} = pinia.storeToRefs(roomStore);
const roomEngine = useRoomEngine.default();
const btnStopRef = Vue.ref();
const isSharing = Vue.ref(false);
const showPermissionVisible = Vue.ref(false);
const showStopShareRegion = Vue.ref(false);
const screenShareDisabled = Vue.computed(
() => isAudience.value || isWhiteboardVisible.value
);
const title = Vue.computed(
() => isSharing.value ? t("End sharing") : t("Share screen")
);
const selectDialogVisible = Vue.ref(false);
const screenList = Vue.ref([]);
const windowList = Vue.ref([]);
async function toggleScreenShare() {
var _a;
if (isSharing.value) {
showStopShareRegion.value = true;
return;
}
if (isAudience.value) {
Message.default({
type: "warning",
message: t(
"You currently do not have sharing permission, please raise your hand to apply for sharing permission first"
),
duration: message.MESSAGE_DURATION.LONG
});
return;
}
if (remoteScreenStream.value) {
Message.default({
type: "warning",
message: t("Another user is sharing the screen."),
duration: message.MESSAGE_DURATION.LONG
});
return;
}
if (isWhiteboardVisible.value) {
Message.default({
type: "warning",
message: t("You are sharing the whiteboard, please stop sharing first"),
duration: message.MESSAGE_DURATION.LONG
});
return;
}
if (isGeneralUser.value && isScreenShareDisableForAllUser.value) {
Message.default({
type: "warning",
message: t(
"Failed to initiate screen sharing, currently only host/admin can share screen."
),
duration: message.MESSAGE_DURATION.LONG
});
return;
}
if (!window.isHasScreen && process.platform === "darwin") {
showPermissionVisible.value = true;
return;
}
if (!isSharing.value && !selectDialogVisible.value) {
const screenCaptureList = await ((_a = roomEngine.instance) == null ? void 0 : _a.getScreenSharingTarget());
screenList.value = screenCaptureList.filter(
(screen) => screen.type === TUIRoomEngine.TRTCScreenCaptureSourceType.TRTCScreenCaptureSourceTypeScreen
// eslint-disable-line
);
windowList.value = screenCaptureList.filter(
(screen) => screen.type === TUIRoomEngine.TRTCScreenCaptureSourceType.TRTCScreenCaptureSourceTypeWindow
);
selectDialogVisible.value = true;
}
}
async function onPermissionScreenShare() {
const { shell } = require("electron");
shell.openExternal(
"x-apple.systempreferences:com.apple.preference.security?Privacy_ScreenCapture"
);
showPermissionVisible.value = false;
}
async function onConfirmScreenShare(screenInfo) {
var _a;
if (remoteScreenStream.value) {
Message.default({
type: "warning",
message: t(
"Another user is currently sharing the screen, screen sharing is not possible."
),
duration: message.MESSAGE_DURATION.LONG
});
return;
}
await ((_a = roomEngine.instance) == null ? void 0 : _a.startScreenSharingElectron({
targetId: screenInfo.sourceId
}));
isSharing.value = true;
isLocalUserSharing.value = true;
selectDialogVisible.value = false;
if (screenInfo.type === 1) {
const { x } = screenInfo;
const { y } = screenInfo;
isSharingScreen.value = true;
notifyScreenShareStarted({
x,
y
});
} else {
isSharingScreen.value = false;
}
}
async function stopScreenShare() {
var _a;
if (isSharing.value) {
try {
await ((_a = roomEngine.instance) == null ? void 0 : _a.stopScreenSharingElectron());
showStopShareRegion.value = false;
isSharing.value = false;
isLocalUserSharing.value = false;
} catch (error) {
index$2.default.error(`${logPrefix}stopScreenShare error:`, error);
}
}
}
function screenCaptureStopped() {
isSharing.value = false;
isLocalUserSharing.value = false;
notifyScreenShareStopped();
}
function notifyScreenShareStarted(param) {
electron.ipcRenderer.send("annotation:screen-share-started", param);
}
function notifyScreenShareStopped() {
if (isSharingScreen.value) {
electron.ipcRenderer.send("annotation:screen-share-stopped");
isSharingScreen.value = false;
}
}
useMitt.default.on("ScreenShare:stopScreenShare", stopScreenShare);
TUIRoomEngine.once("ready", () => {
var _a;
(_a = roomEngine.instance) == null ? void 0 : _a.on(
TUIRoomEngine.TUIRoomEvents.onUserScreenCaptureStopped,
screenCaptureStopped
);
});
Vue.onUnmounted(() => {
var _a;
useMitt.default.off("ScreenShare:stopScreenShare", stopScreenShare);
(_a = roomEngine.instance) == null ? void 0 : _a.off(
TUIRoomEngine.TUIRoomEvents.onUserScreenCaptureStopped,
screenCaptureStopped
);
});
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
Vue.createVNode(IconButton.default, {
ref_key: "btnStopRef",
ref: btnStopRef,
"is-active": isSharing.value,
class: Vue.normalizeClass({ outlined: isSharing.value }),
title: title.value,
disabled: screenShareDisabled.value,
onClickIcon: toggleScreenShare
}, {
default: Vue.withCtx(() => [
isSharing.value ? (Vue.openBlock(), Vue.createBlock(StopScreenShareIcon.default, { key: 0 })) : (Vue.openBlock(), Vue.createBlock(ScreenShareIcon.default, { key: 1 }))
]),
_: 1
}, 8, ["is-active", "class", "title", "disabled"]),
Vue.createVNode(index$1.default, {
modelValue: showStopShareRegion.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showStopShareRegion.value = $event),
width: "420px",
title: Vue.unref(t)("End sharing"),
modal: true,
"close-on-click-modal": true,
"append-to-room-container": true
}, {
footer: Vue.withCtx(() => [
Vue.createElementVNode("span", null, [
Vue.createVNode(Button.default, {
size: "default",
onClick: stopScreenShare
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("End sharing")), 1)
]),
_: 1
}),
Vue.createVNode(Button.default, {
class: "button",
type: "primary",
size: "default",
onClick: _cache[0] || (_cache[0] = ($event) => showStopShareRegion.value = false)
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Cancel")), 1)
]),
_: 1
})
])
]),
default: Vue.withCtx(() => [
Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)(
"Others will no longer see your screen after you stop sharing. Are you sure you want to stop?"
)), 1)
]),
_: 1
}, 8, ["modelValue", "title"]),
Vue.createVNode(ScreenWindowSelectDialog.default, {
visible: selectDialogVisible.value,
"screen-list": screenList.value,
"window-list": windowList.value,
onOnConfirm: onConfirmScreenShare,
onOnClose: _cache[2] || (_cache[2] = ($event) => selectDialogVisible.value = false)
}, null, 8, ["visible", "screen-list", "window-list"]),
Vue.createVNode(index$1.default, {
modelValue: showPermissionVisible.value,
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => showPermissionVisible.value = $event),
title: Vue.unref(t)("Grant permission to screen recording"),
modal: true,
"append-to-body": true,
width: "480px",
"close-on-click-modal": true,
"append-to-room-container": true
}, {
footer: Vue.withCtx(() => [
Vue.createVNode(Button.default, {
size: "default",
onClick: onPermissionScreenShare
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Open the system preferences settings")), 1)
]),
_: 1
}),
Vue.createVNode(Button.default, {
class: "button",
type: "primary",
size: "default",
onClick: _cache[3] || (_cache[3] = ($event) => showPermissionVisible.value = false)
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Cancel")), 1)
]),
_: 1
})
]),
default: Vue.withCtx(() => [
Vue.createElementVNode("div", null, Vue.toDisplayString(Vue.unref(t)(
'Due to macOS 10.15 system requirements, please check the current application in "System Preferences - Security & Privacy - Screen Recording".'
)), 1)
]),
_: 1
}, 8, ["modelValue", "title"])
]);
};
}
});
exports.default = _sfc_main;