Skip to content

Commit

Permalink
feat: ingress
Browse files Browse the repository at this point in the history
  • Loading branch information
jibon57 committed Mar 14, 2023
1 parent 5fcf158 commit 16f879f
Show file tree
Hide file tree
Showing 15 changed files with 434 additions and 60 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"format-check": "prettier --check \"./src/**/*.{ts,tsx,scss}\" && eslint --quiet --ext .tsx,.ts src/",
"lint-staged": "lint-staged",
"prepare": "husky install",
"proto": "protoc --es_opt=target=ts,import_extension=.ts --plugin=protoc-gen-es=./node_modules/.bin/protoc-gen-es --es_out=./src/helpers/proto --proto_path=./protocol/proto_files plugnmeet_datamessage.proto plugnmeet_recorder.proto plugnmeet_recording.proto plugnmeet_breakout_room.proto plugnmeet_polls.proto plugnmeet_common_api.proto"
"proto": "protoc --es_opt=target=ts,import_extension=.ts --plugin=protoc-gen-es=./node_modules/.bin/protoc-gen-es --es_out=./src/helpers/proto --proto_path=./protocol/proto_files plugnmeet_datamessage.proto plugnmeet_recorder.proto plugnmeet_recording.proto plugnmeet_breakout_room.proto plugnmeet_polls.proto plugnmeet_common_api.proto plugnmeet_ingress.proto"
},
"dependencies": {
"@bufbuild/protobuf": "1.1.0",
Expand Down
9 changes: 9 additions & 0 deletions src/assets/locales/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@
"title": "Settings",
"data-savings": "Data savings",
"notifications": "Notifications",
"ingress": "Ingress",
"show-webcams": "Show webcams",
"show-screen-share": "Show Screen share",
"allow-audio-notification": "Allow audio notification",
Expand Down Expand Up @@ -363,5 +364,13 @@
"meeting-id-des": "Meeting's origin ID",
"user-role": "User role",
"user-role-des": "User's current role. Either admin or participant"
},
"ingress-features": {
"join-as-name": "Join as name",
"feature-not-allow": "Feature not allow",
"join-as-name-required": "Join as name required",
"gen-link": "Generate link",
"rtmp-url": "RTMP Host/URL",
"rtmp-key": "RTMP key/secret"
}
}
35 changes: 28 additions & 7 deletions src/components/header/room-settings/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Fragment, useState } from 'react';
import React, { Fragment, useEffect, useState } from 'react';
import { createSelector } from '@reduxjs/toolkit';
import { Transition, Dialog, Tab } from '@headlessui/react';
import { useTranslation } from 'react-i18next';
Expand All @@ -13,25 +13,29 @@ import { updateShowRoomSettingsModal } from '../../../store/slices/roomSettingsS
import DataSavings from './dataSavings';
import Notification from './notification';
import ApplicationSettings from './application';
import Ingress from './ingress';

declare const PNM_VERSION: string;

const isShowRoomSettingsModalSelector = createSelector(
(state: RootState) => state.roomSettings.isShowRoomSettingsModal,
(isShowRoomSettingsModal) => isShowRoomSettingsModal,
);

const RoomSettings = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const serverVersion = store.getState().session.serverVersion;
const copyright_conf =
store.getState().session.currentRoom?.metadata?.copyright_conf;
const s = store.getState();
const serverVersion = s.session.serverVersion;
const copyright_conf = s.session.currentRoom?.metadata?.copyright_conf;
const ingressFeatures =
s.session.currentRoom?.metadata?.room_features.ingress_features;

const isShowRoomSettingsModal = useAppSelector(
isShowRoomSettingsModalSelector,
);

const [categories] = useState({
const [categories, setCategories] = useState({
'header.room-settings.application': [
{
id: 1,
Expand All @@ -40,18 +44,35 @@ const RoomSettings = () => {
],
'header.room-settings.data-savings': [
{
id: 1,
id: 2,
elm: <DataSavings />,
},
],
'header.room-settings.notifications': [
{
id: 1,
id: 3,
elm: <Notification />,
},
],
});

useEffect(() => {
if (
s.session?.currentUser?.metadata?.is_admin &&
ingressFeatures?.is_allow
) {
categories['header.room-settings.ingress'] = [
{
id: 4,
elm: <Ingress />,
},
];
}

setCategories(categories);
//eslint-disable-next-line
}, []);

const closeModal = () => {
dispatch(updateShowRoomSettingsModal(false));
};
Expand Down
160 changes: 160 additions & 0 deletions src/components/header/room-settings/ingress.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
import { isEmpty } from 'lodash';

import { IIngressFeatures } from '../../../store/slices/interfaces/session';
import {
CreateIngressReq,
CreateIngressRes,
IngressInput,
} from '../../../helpers/proto/plugnmeet_ingress_pb';
import { RootState, store, useAppSelector } from '../../../store';
import sendAPIRequest from '../../../helpers/api/plugNmeetAPI';
import { createSelector } from '@reduxjs/toolkit';

interface IngressProps {
features: IIngressFeatures;
}

const ingressFeaturesSelector = createSelector(
(state: RootState) =>
state.session.currentRoom?.metadata?.room_features.ingress_features,
(ingress_features) => ingress_features,
);

const Ingress = () => {
const { t } = useTranslation();
const [name, setName] = useState<string>('broadcaster');
const [errorMsg, setErrorMsg] = useState<string | null>(null);
const session = store.getState().session;
const ingressFeatures = useAppSelector(ingressFeaturesSelector);

const onSubmit = async (e) => {
e.preventDefault();
setErrorMsg(null);

if (!ingressFeatures?.is_allow) {
setErrorMsg(t('ingress-features.feature-not-allow'));
return;
}
let participantName = name;

if (isEmpty(participantName)) {
participantName = 'broadcaster';
}

const body = new CreateIngressReq({
inputType: IngressInput.RTMP_INPUT,
participantName: participantName,
roomId: session.currentRoom.room_id,
});

const r = await sendAPIRequest(
'ingress/create',
body.toBinary(),
false,
'application/protobuf',
'arraybuffer',
);
const res = CreateIngressRes.fromBinary(new Uint8Array(r));
if (!res.status) {
toast(t(res.msg), {
type: 'error',
isLoading: false,
autoClose: 1000,
});
}
};

const renderFrom = () => {
return (
<>
<form method="POST" onSubmit={(e) => onSubmit(e)}>
<div className="">
<label
htmlFor="stream-key"
className="block text-sm font-medium text-gray-700 dark:text-darkText"
>
{t('ingress-features.join-as-name')}
</label>
<input
type="text"
name="name"
id="name"
value={name}
onChange={(e) => setName(e.currentTarget.value)}
className="mt-1 px-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm rounded-md h-10 border border-solid border-black/50 dark:border-darkText bg-transparent dark:text-darkText"
/>
{errorMsg ? (
<div className="error-msg text-xs text-red-600 py-2">
{errorMsg}
</div>
) : null}
</div>
<div className="pb-3 pt-4 bg-gray-50 dark:bg-transparent text-right mt-4">
<button
type="submit"
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primaryColor hover:bg-secondaryColor focus:outline-none focus:ring-2 focus:ring-offset-2 focus:bg-secondaryColor"
>
{t('ingress-features.gen-link')}
</button>
</div>
</form>
</>
);
};

const render = () => {
return (
<>
<div className="grid">
<div className="flex items-center justify-start">
<label
htmlFor="language"
className="pr-4 w-full dark:text-darkText"
>
{t('ingress-features.rtmp-url')}
</label>
<input
type="text"
readOnly={true}
name="url"
id="url"
value={ingressFeatures?.url}
className="mt-1 px-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm rounded-md h-10 border border-solid border-black/50 dark:border-darkText bg-transparent dark:text-darkText"
/>
</div>
</div>
<div className="grid">
<div className="flex items-center justify-start">
<label
htmlFor="language"
className="pr-4 w-full dark:text-darkText"
>
{t('ingress-features.rtmp-key')}
</label>
<input
type="text"
readOnly={true}
name="stream_key"
id="stream_key"
value={ingressFeatures?.stream_key}
className="mt-1 px-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm rounded-md h-10 border border-solid border-black/50 dark:border-darkText bg-transparent dark:text-darkText"
/>
</div>
</div>
</>
);
};

return (
<div className="mt-2">
{isEmpty(ingressFeatures?.url) && isEmpty(ingressFeatures?.stream_key)
? renderFrom()
: render()}
</div>
);
};

export default Ingress;
18 changes: 9 additions & 9 deletions src/helpers/proto/plugnmeet_breakout_room_pb.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// @generated by protoc-gen-es v1.0.0 with parameter "target=ts,import_extension=.ts"
// @generated by protoc-gen-es v1.1.0 with parameter "target=ts,import_extension=.ts"
// @generated from file plugnmeet_breakout_room.proto (package plugnmeet, syntax proto3)
/* eslint-disable */
// @ts-nocheck
Expand Down Expand Up @@ -47,7 +47,7 @@ export class CreateBreakoutRoomsReq extends Message<CreateBreakoutRoomsReq> {
proto3.util.initPartial(data, this);
}

static readonly runtime = proto3;
static readonly runtime: typeof proto3 = proto3;
static readonly typeName = 'plugnmeet.CreateBreakoutRoomsReq';
static readonly fields: FieldList = proto3.util.newFieldList(() => [
{ no: 1, name: 'room_id', kind: 'scalar', T: 9 /* ScalarType.STRING */ },
Expand Down Expand Up @@ -142,7 +142,7 @@ export class BreakoutRoom extends Message<BreakoutRoom> {
proto3.util.initPartial(data, this);
}

static readonly runtime = proto3;
static readonly runtime: typeof proto3 = proto3;
static readonly typeName = 'plugnmeet.BreakoutRoom';
static readonly fields: FieldList = proto3.util.newFieldList(() => [
{ no: 1, name: 'id', kind: 'scalar', T: 9 /* ScalarType.STRING */ },
Expand Down Expand Up @@ -212,7 +212,7 @@ export class BreakoutRoomUser extends Message<BreakoutRoomUser> {
proto3.util.initPartial(data, this);
}

static readonly runtime = proto3;
static readonly runtime: typeof proto3 = proto3;
static readonly typeName = 'plugnmeet.BreakoutRoomUser';
static readonly fields: FieldList = proto3.util.newFieldList(() => [
{ no: 1, name: 'id', kind: 'scalar', T: 9 /* ScalarType.STRING */ },
Expand Down Expand Up @@ -273,7 +273,7 @@ export class IncreaseBreakoutRoomDurationReq extends Message<IncreaseBreakoutRoo
proto3.util.initPartial(data, this);
}

static readonly runtime = proto3;
static readonly runtime: typeof proto3 = proto3;
static readonly typeName = 'plugnmeet.IncreaseBreakoutRoomDurationReq';
static readonly fields: FieldList = proto3.util.newFieldList(() => [
{
Expand Down Expand Up @@ -343,7 +343,7 @@ export class BroadcastBreakoutRoomMsgReq extends Message<BroadcastBreakoutRoomMs
proto3.util.initPartial(data, this);
}

static readonly runtime = proto3;
static readonly runtime: typeof proto3 = proto3;
static readonly typeName = 'plugnmeet.BroadcastBreakoutRoomMsgReq';
static readonly fields: FieldList = proto3.util.newFieldList(() => [
{ no: 1, name: 'msg', kind: 'scalar', T: 9 /* ScalarType.STRING */ },
Expand Down Expand Up @@ -417,7 +417,7 @@ export class JoinBreakoutRoomReq extends Message<JoinBreakoutRoomReq> {
proto3.util.initPartial(data, this);
}

static readonly runtime = proto3;
static readonly runtime: typeof proto3 = proto3;
static readonly typeName = 'plugnmeet.JoinBreakoutRoomReq';
static readonly fields: FieldList = proto3.util.newFieldList(() => [
{
Expand Down Expand Up @@ -479,7 +479,7 @@ export class EndBreakoutRoomReq extends Message<EndBreakoutRoomReq> {
proto3.util.initPartial(data, this);
}

static readonly runtime = proto3;
static readonly runtime: typeof proto3 = proto3;
static readonly typeName = 'plugnmeet.EndBreakoutRoomReq';
static readonly fields: FieldList = proto3.util.newFieldList(() => [
{
Expand Down Expand Up @@ -560,7 +560,7 @@ export class BreakoutRoomRes extends Message<BreakoutRoomRes> {
proto3.util.initPartial(data, this);
}

static readonly runtime = proto3;
static readonly runtime: typeof proto3 = proto3;
static readonly typeName = 'plugnmeet.BreakoutRoomRes';
static readonly fields: FieldList = proto3.util.newFieldList(() => [
{ no: 1, name: 'status', kind: 'scalar', T: 8 /* ScalarType.BOOL */ },
Expand Down
Loading

0 comments on commit 16f879f

Please sign in to comment.