@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/components/Streaming/RTMPIcon.jsx

@@ -0,0 +1,24 @@
+export const RTMPIcon = props => {
+  return (
+    <svg width="49" height="50" viewBox="0 0 49 50" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <rect x="1.368" y="22.63" width="21.148" height="21.148" rx="10.574" fill="#fff" />
+      <rect x="1.368" y="22.63" width="21.148" height="21.148" rx="10.574" fill="url(#a)" />
+      <rect x="1.368" y="22.63" width="21.148" height="21.148" rx="10.574" stroke="#1B1F26" />
+      <rect x="12.286" y=".786" width="26.527" height="27.423" rx="13.263" fill="url(#b)" stroke="#1B1F26" />
+      <rect x="20.243" y="21.029" width="27.893" height="27.893" rx="13.946" fill="#9146FF" />
+      <rect x="20.243" y="21.029" width="27.893" height="27.893" rx="13.946" fill="url(#c)" />
+      <rect x="20.243" y="21.029" width="27.893" height="27.893" rx="13.946" stroke="#1B1F26" />
+      <defs>
+        <pattern id="a" patternContentUnits="objectBoundingBox" width="1" height="1">
+          <use transform="matrix(.001 0 0 .001 .094 .095)" />
+        </pattern>
+        <pattern id="b" patternContentUnits="objectBoundingBox" width="1" height="1">
+          <use transform="matrix(.00065 0 0 .00063 -.018 0)" />
+        </pattern>
+        <pattern id="c" patternContentUnits="objectBoundingBox" width="1" height="1">
+          <use transform="translate(.078 .094) scale(.00117)" />
+        </pattern>
+      </defs>
+    </svg>
+  );
+};

package/src/Prebuilt/components/Streaming/RTMPStreaming.jsx

@@ -0,0 +1,336 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { selectAppData, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
+import { AddCircleIcon, EndStreamIcon, GoLiveIcon, PencilIcon, SettingsIcon, TrashIcon } from '@100mslive/react-icons';
+import { Accordion, Box, Button, Flex, Input, Label, Loading, Text } from '../../../';
+import { Container, ContentBody, ContentHeader, ErrorText, RecordStream } from './Common';
+import { ResolutionInput } from './ResolutionInput';
+import { useSetAppDataByKey } from '../AppData/useUISettings';
+import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
+import { APP_DATA, RTMP_RECORD_DEFAULT_RESOLUTION } from '../../common/constants';
+
+export const RTMPStreaming = ({ onBack }) => {
+  const { isRTMPRunning } = useRecordingStreaming();
+
+  return (
+    <Container>
+      <ContentHeader title="Start Streaming" content="Choose a destination" onBack={onBack} />
+      <ContentBody Icon={SettingsIcon} title="RTMP">
+        Live Stream your call to Twitch, YouTube, Facebook and any app which supports RTMP, all at the same time
+      </ContentBody>
+      {!isRTMPRunning ? <StartRTMP /> : <EndRTMP />}
+    </Container>
+  );
+};
+
+const StartRTMP = () => {
+  const [rtmpPreference = [], setRTMPPreference] = useUserPreferences(UserPreferencesKeys.RTMP_URLS);
+  const [rtmpStreams, setRTMPStreams] = useState(
+    rtmpPreference.length > 0
+      ? rtmpPreference
+      : [
+          {
+            name: 'Stream',
+            id: Date.now(),
+            rtmpURL: '',
+            streamKey: '',
+          },
+        ],
+  );
+  const hmsActions = useHMSActions();
+  const recordingUrl = useHMSStore(selectAppData(APP_DATA.recordingUrl));
+  const [error, setError] = useState(false);
+  const [record, setRecord] = useState(false);
+  const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);
+  const [isRTMPStarted, setRTMPStarted] = useSetAppDataByKey(APP_DATA.rtmpStarted);
+  const hasRTMPURL = rtmpStreams.some(value => value.rtmpURL && value.streamKey);
+
+  return (
+    <Box
+      css={{ overflowY: 'auto' }}
+      as="form"
+      onSubmit={e => {
+        e.preventDefault();
+      }}
+    >
+      {rtmpStreams.length > 0 && (
+        <Box css={{ px: '$10' }}>
+          <Accordion.Root type="single" collapsible defaultValue={rtmpStreams[0].id}>
+            {rtmpStreams.map((rtmp, index) => {
+              return (
+                <Accordion.Item
+                  value={rtmp.id}
+                  key={rtmp.id}
+                  css={{
+                    border: '2px solid $surfaceLight !important',
+                    r: '$1',
+                    my: '$4',
+                  }}
+                >
+                  <AccordionHeader rtmp={rtmp} setRTMPStreams={setRTMPStreams} />
+                  <Accordion.Content css={{ px: '$8', py: 0 }}>
+                    <RTMPForm {...rtmp} setRTMPStreams={setRTMPStreams} testId={`${index}_rtmp`} />
+                  </Accordion.Content>
+                </Accordion.Item>
+              );
+            })}
+          </Accordion.Root>
+        </Box>
+      )}
+      <ResolutionInput
+        testId="rtmp_resolution"
+        onResolutionChange={setResolution}
+        css={{
+          flexDirection: 'column',
+          alignItems: 'start',
+          px: '$10',
+          my: '$8',
+        }}
+      />
+      <RecordStream record={record} setRecord={setRecord} testId="rtmp_recording" />
+      <Box css={{ p: '$8 $10', '@lg': { display: 'flex', gap: '$4' } }}>
+        {rtmpStreams.length < 3 && (
+          <Button
+            data-testid="add_stream"
+            variant="standard"
+            outlined
+            icon
+            css={{ my: '$4', w: '100%' }}
+            onClick={() => {
+              setRTMPStreams(streams => [
+                ...streams,
+                {
+                  name: 'Stream',
+                  id: Date.now(),
+                  rtmpURL: '',
+                  streamKey: '',
+                },
+              ]);
+            }}
+          >
+            <AddCircleIcon /> Add Stream
+          </Button>
+        )}
+
+        <Button
+          data-testid="start_rtmp"
+          variant="primary"
+          icon
+          type="submit"
+          css={{ w: '100%', my: '$4' }}
+          disabled={isRTMPStarted || (rtmpStreams.length === 0 && !record)}
+          onClick={async () => {
+            try {
+              const hasInvalidData = rtmpStreams.find(
+                value => (value.rtmpURL && !value.streamKey) || (value.streamKey && !value.rtmpURL),
+              );
+              if (hasInvalidData || (rtmpStreams.length > 0 && !hasRTMPURL)) {
+                return;
+              }
+              setError('');
+              setRTMPStarted(true);
+              const urls = hasRTMPURL ? rtmpStreams.map(value => `${value.rtmpURL}/${value.streamKey}`) : [];
+              await hmsActions.startRTMPOrRecording({
+                rtmpURLs: urls,
+                meetingURL: recordingUrl,
+                resolution: getResolution(resolution),
+                record: record,
+              });
+              setRTMPPreference(rtmpStreams);
+            } catch (error) {
+              console.error(error);
+              setError(error.message);
+              setRTMPStarted(false);
+            }
+          }}
+        >
+          {isRTMPStarted ? <Loading size={24} color="currentColor" /> : <GoLiveIcon />}
+          {isRTMPStarted ? 'Starting stream...' : 'Go Live'}
+        </Button>
+        <ErrorText error={error} />
+      </Box>
+    </Box>
+  );
+};
+
+const EndRTMP = () => {
+  const hmsActions = useHMSActions();
+  const [inProgress, setInProgress] = useState(false);
+  const [error, setError] = useState('');
+  const { isRTMPRunning } = useRecordingStreaming();
+
+  useEffect(() => {
+    if (inProgress && !isRTMPRunning) {
+      setInProgress(false);
+    }
+  }, [inProgress, isRTMPRunning]);
+
+  return (
+    <Box css={{ p: '$4 $10' }}>
+      <ErrorText error={error} />
+      <Button
+        data-testid="stop_rtmp"
+        variant="danger"
+        css={{ w: '100%', r: '$0', my: '$8' }}
+        icon
+        loading={inProgress}
+        disabled={inProgress}
+        onClick={async () => {
+          try {
+            setInProgress(true);
+            await hmsActions.stopRTMPAndRecording();
+          } catch (error) {
+            setError(error.message);
+            setInProgress(false);
+          }
+        }}
+      >
+        <EndStreamIcon />
+        End Stream
+      </Button>
+    </Box>
+  );
+};
+
+const ActionIcon = ({ icon: Icon, onClick }) => {
+  return (
+    <Text as="span" css={{ mx: '$2', cursor: 'pointer' }} onClick={onClick}>
+      <Icon width={16} height={16} />
+    </Text>
+  );
+};
+
+const FormLabel = ({ id, children }) => {
+  return (
+    <Label htmlFor={id} css={{ color: '$textHighEmp', my: '$4', fontSize: '$sm' }}>
+      {children}
+    </Label>
+  );
+};
+
+const RTMPForm = ({ rtmpURL, id, streamKey, setRTMPStreams, testId }) => {
+  const formRef = useRef(null);
+  return (
+    <Flex id={id} direction="column" css={{ mb: '$8', px: '$8' }} ref={formRef}>
+      <FormLabel id="rtmpURL">
+        RTMP URL
+        <Asterik />
+      </FormLabel>
+      <Input
+        data-testid={`${testId}_url`}
+        placeholder="Enter RTMP URL"
+        id="rtmpURL"
+        name="rtmpURL"
+        value={rtmpURL}
+        onChange={e => {
+          setRTMPStreams(streams =>
+            updateStream({
+              streams,
+              id,
+              value: e.target.value,
+              key: e.target.name,
+            }),
+          );
+        }}
+        required
+      />
+      <FormLabel id="streamKey">
+        Stream Key
+        <Asterik />
+      </FormLabel>
+      <Input
+        placeholder="Enter Stream Key"
+        id="streamKey"
+        name="streamKey"
+        value={streamKey}
+        data-testid={`${testId}_key`}
+        onChange={e => {
+          setRTMPStreams(streams =>
+            updateStream({
+              streams,
+              id,
+              value: e.target.value,
+              key: e.target.name,
+            }),
+          );
+        }}
+        required
+      />
+    </Flex>
+  );
+};
+
+const Asterik = () => {
+  return (
+    <Text variant="sm" as="span" css={{ color: '$error', mx: '$2' }}>
+      *
+    </Text>
+  );
+};
+const AccordionHeader = ({ rtmp, setRTMPStreams }) => {
+  const [edit, setEdit] = useState(false);
+  return (
+    <Accordion.Header css={{ px: '$8' }}>
+      {edit ? (
+        <Input
+          defaultValue={rtmp.name}
+          autoFocus
+          onBlur={e => {
+            const value = e.currentTarget.value.trim();
+            if (value) {
+              setRTMPStreams(streams =>
+                streams.map(stream => {
+                  if (stream.id === rtmp.id) {
+                    stream.name = value;
+                  }
+                  return stream;
+                }),
+              );
+              setEdit(false);
+            }
+          }}
+        />
+      ) : (
+        <Text css={{ flex: '1 1 0' }}>{rtmp.name}</Text>
+      )}
+      <Flex css={{ mx: '$4', gap: '$2' }}>
+        <ActionIcon
+          onClick={e => {
+            e.stopPropagation();
+            setEdit(true);
+          }}
+          icon={PencilIcon}
+        />
+        <ActionIcon
+          onClick={() => {
+            setRTMPStreams(streams => streams.filter(stream => stream.id !== rtmp.id));
+          }}
+          icon={TrashIcon}
+        />
+      </Flex>
+    </Accordion.Header>
+  );
+};
+
+const updateStream = ({ streams, id, key, value }) =>
+  streams.map(stream => {
+    if (stream.id === id) {
+      return {
+        ...stream,
+        [key]: value,
+      };
+    }
+    return stream;
+  });
+
+export function getResolution(recordingResolution) {
+  const resolution = {};
+  if (recordingResolution.width) {
+    resolution.width = recordingResolution.width;
+  }
+  if (recordingResolution.height) {
+    resolution.height = recordingResolution.height;
+  }
+  if (Object.keys(resolution).length > 0) {
+    return resolution;
+  }
+}

package/src/Prebuilt/components/Streaming/ResolutionInput.jsx

@@ -0,0 +1,88 @@
+import React, { useCallback, useState } from 'react';
+import { InfoIcon } from '@100mslive/react-icons';
+import { Flex, Input, Label, Text, Tooltip } from '../../../';
+import { DialogRow } from '../../primitives/DialogContent';
+import {
+  RTMP_RECORD_DEFAULT_RESOLUTION,
+  RTMP_RECORD_RESOLUTION_MAX,
+  RTMP_RECORD_RESOLUTION_MIN,
+} from '../../common/constants';
+
+export const ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css, testId }) => {
+  const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION);
+
+  const resolutionChangeHandler = useCallback(
+    event => {
+      const { name, value } = event.target;
+      let width = name === 'resWidth' ? Number(value) : resolution.width;
+      let height = name === 'resHeight' ? Number(value) : resolution.height;
+
+      if (width === 0) {
+        width = null;
+      }
+      if (height === 0) {
+        height = null;
+      }
+      const newResolution = {
+        width: !isNaN(width) ? width : RTMP_RECORD_DEFAULT_RESOLUTION.width,
+        height: !isNaN(height) ? height : RTMP_RECORD_DEFAULT_RESOLUTION.height,
+      };
+      setResolution(newResolution);
+    },
+    [resolution],
+  );
+
+  return (
+    <DialogRow breakSm css={css}>
+      <Flex gap={1}>
+        <Label css={{ mb: '$8' }}>Resolution</Label>
+        {tooltipText && (
+          <Tooltip title={tooltipText}>
+            <div>
+              <InfoIcon color="#B0C3DB" />
+            </div>
+          </Tooltip>
+        )}
+      </Flex>
+      <Flex
+        justify="between"
+        css={{ width: !tooltipText ? '100%' : '70%', '@sm': { width: '100%' } }}
+        gap={2}
+        direction="column"
+      >
+        <Flex justify="between" gap={2}>
+          <Flex direction="column" css={{ width: '50%' }}>
+            <Text variant="xs">Width</Text>
+            <Input
+              data-testid={`${testId}_width`}
+              css={{ width: '100%', mt: '$4' }}
+              name="resWidth"
+              value={resolution.width}
+              onChange={resolutionChangeHandler}
+              readOnly={disabled}
+              min={RTMP_RECORD_RESOLUTION_MIN}
+              max={RTMP_RECORD_RESOLUTION_MAX}
+              onBlur={() => onResolutionChange(resolution)}
+              type="number"
+            />
+          </Flex>
+          <Flex direction="column" css={{ width: '50%' }}>
+            <Text variant="xs">Height</Text>
+            <Input
+              data-testid={`${testId}_height`}
+              css={{ width: '100%', mt: '$4' }}
+              name="resHeight"
+              value={resolution.height}
+              onChange={resolutionChangeHandler}
+              onBlur={() => onResolutionChange(resolution)}
+              readOnly={disabled}
+              min={RTMP_RECORD_RESOLUTION_MIN}
+              max={RTMP_RECORD_RESOLUTION_MAX}
+              type="number"
+            />
+          </Flex>
+        </Flex>
+      </Flex>
+    </DialogRow>
+  );
+};

package/src/Prebuilt/components/Streaming/StreamingLanding.jsx

@@ -0,0 +1,76 @@
+import React, { Fragment, useState } from 'react';
+import { selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
+import { ColoredHandIcon, CrossIcon, GoLiveIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import IconButton from '../../IconButton';
+import { StreamCard } from './Common';
+import { HLSStreaming } from './HLSStreaming';
+import { RTMPIcon } from './RTMPIcon';
+import { RTMPStreaming } from './RTMPStreaming';
+import { useSidepaneToggle } from '../AppData/useSidepane';
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
+
+export const StreamingLanding = () => {
+  const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);
+  const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
+  const permissions = useHMSStore(selectPermissions);
+  const [showHLS, setShowHLS] = useState(isHLSRunning);
+  const [showRTMP, setShowRTMP] = useState(isRTMPRunning);
+
+  if (!permissions?.hlsStreaming && !permissions?.rtmpStreaming) {
+    toggleStreaming();
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <Flex css={{ w: '100%', py: '$8' }}>
+        <Box
+          css={{
+            alignSelf: 'center',
+            p: '$4',
+            bg: '$surfaceLight',
+            r: '$round',
+          }}
+        >
+          <ColoredHandIcon width={40} height={40} />
+        </Box>
+        <Box css={{ flex: '1 1 0', mx: '$8' }}>
+          <Text variant="sm">Welcome !</Text>
+          <Text variant="h6">Let’s get you started</Text>
+        </Box>
+        <IconButton onClick={toggleStreaming} css={{ alignSelf: 'flex-start' }} data-testid="close_streaming">
+          <CrossIcon />
+        </IconButton>
+      </Flex>
+      <Text variant="tiny" color="$textMedEmp">
+        Start Streaming
+      </Text>
+      {permissions?.hlsStreaming && (
+        <StreamCard
+          testId="hls_stream"
+          title="Live Stream with HLS"
+          subtitle="Stream to millions, edit and control what the viewer sees and more!"
+          css={{ my: '$8' }}
+          onClick={() => setShowHLS(true)}
+          Icon={GoLiveIcon}
+        />
+      )}
+      {permissions?.rtmpStreaming && (
+        <StreamCard
+          testId="rtmp_stream"
+          title="Stream live to Facebook, Twitch, and others"
+          subtitle="Stream to a specific destination directly from your app."
+          css={{ my: '$8' }}
+          onClick={() => {
+            setShowRTMP(true);
+          }}
+          Icon={RTMPIcon}
+        />
+      )}
+      {showHLS && <HLSStreaming onBack={() => setShowHLS(false)} />}
+      {showRTMP && <RTMPStreaming onBack={() => setShowRTMP(false)} />}
+    </Fragment>
+  );
+};