@100mslive/roomkit-react 0.1.8-alpha.0 → 0.1.9-alpha.0

package/src/Prebuilt/components/GoLiveButton.jsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { useRecordingStreaming } from '@100mslive/react-sdk';
-import { GoLiveIcon } from '@100mslive/react-icons';
-import { Button } from '../../Button';
-import { Tooltip } from '../../Tooltip';
-import { useIsSidepaneTypeOpen, useSidepaneToggle } from './AppData/useSidepane';
-import { useIsHLSStartedFromUI, useIsRTMPStartedFromUI } from './AppData/useUISettings';
-import { SIDE_PANE_OPTIONS } from './../common/constants';
-
-const GoLiveButton = () => {
-  const isStreamingSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.STREAMING);
-  const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);
-  const { isStreamingOn, isBrowserRecordingOn } = useRecordingStreaming();
-  const isHLSStartedFromUI = useIsHLSStartedFromUI();
-  const isRTMPStartedFromUI = useIsRTMPStartedFromUI();
-  let tooltipText = 'Start streaming';
-  if (isHLSStartedFromUI || isRTMPStartedFromUI) {
-    if (isHLSStartedFromUI) {
-      tooltipText = 'HLS start in progress';
-    }
-    if (isRTMPStartedFromUI) {
-      tooltipText = 'RTMP start in progress';
-    }
-  }
-  return (
-    <Tooltip title={tooltipText}>
-      <Button
-        data-testid="go_live"
-        variant={isStreamingSidepaneOpen ? 'standard' : 'primary'}
-        onClick={toggleStreaming}
-        icon
-        loading={isRTMPStartedFromUI || isHLSStartedFromUI}
-        disabled={isBrowserRecordingOn && !isStreamingOn}
-      >
-        <GoLiveIcon />
-        Go Live
-      </Button>
-    </Tooltip>
-  );
-};
-
-export default GoLiveButton;

package/src/Prebuilt/components/PrebuiltDialogPortal.tsx

@@ -1,6 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Dialog } from '../../Modal';
-
-export const PrebuiltDialogPortal = ({ children }: { children: ReactNode }) => (
-  <Dialog.Portal container={document.getElementById('prebuilt-container')}>{children}</Dialog.Portal>
-);

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

@@ -1,220 +0,0 @@
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
-import { selectRoomID, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
-import {
-  EndStreamIcon,
-  EyeOpenIcon,
-  GoLiveIcon,
-  InfoIcon,
-  LinkIcon,
-  PeopleIcon,
-  SupportIcon,
-  WrenchIcon,
-} from '@100mslive/react-icons';
-import { Box, Button, Flex, Loading, Text } from '../../../';
-import { Container, ContentBody, ContentHeader, ErrorText, RecordStream } from './Common';
-import { useSetAppDataByKey } from '../AppData/useUISettings';
-import { useFilteredRoles } from '../../common/hooks';
-import { APP_DATA } from '../../common/constants';
-
-const getCardData = (roleName, roomId) => {
-  let data = {};
-  const formattedRoleName = roleName[0].toUpperCase() + roleName.slice(1);
-
-  switch (roleName) {
-    case 'broadcaster': {
-      data = {
-        title: formattedRoleName,
-        content: 'Broadcasters can livestream audio or video, manage stream appearance and control the room via HLS.',
-        icon: <SupportIcon />,
-      };
-      break;
-    }
-    case 'hls-viewer': {
-      data = {
-        title: 'HLS Viewer',
-        content:
-          'Viewers can view and send chat messages, but need to be made broadcasters to participate with audio or video.',
-        icon: <EyeOpenIcon />,
-      };
-      break;
-    }
-    default:
-      data = {
-        title: formattedRoleName,
-        content: `${formattedRoleName} is customised with specific permissions, which will determine how it interacts with this room.`,
-        icon: <WrenchIcon />,
-        order: 1,
-      };
-  }
-  data['link'] = `/${roomId}/${roleName}`;
-  return data;
-};
-
-const Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => {
-  const [copied, setCopied] = useState(false);
-  return isHLSRunning ? (
-    <Box
-      key={title}
-      css={{
-        backgroundColor: '$surface_bright',
-        padding: '$10',
-        order,
-        borderRadius: '$2',
-      }}
-    >
-      <Flex align="center" gap="2" css={{ color: '$primary_bright' }}>
-        {icon}
-        <Text variant="h6" css={{ fontWeight: '$semiBold' }}>
-          {title}
-        </Text>
-      </Flex>
-      <Text variant="sm" css={{ color: '$on_surface_medium', mt: '$6' }}>
-        {content}
-      </Text>
-      <Button
-        variant="standard"
-        onClick={() => {
-          navigator.clipboard.writeText(`${window.location.origin}${link}`);
-          setCopied(true);
-          setTimeout(() => setCopied(false), 2000);
-        }}
-        css={{ w: '100%', r: '$1', mt: '$10', fontWeight: '$semiBold' }}
-        icon
-      >
-        {copied ? (
-          <>Link copied!</>
-        ) : (
-          <>
-            <LinkIcon style={{ color: 'inherit' }} />
-            Copy Invite Link
-          </>
-        )}
-      </Button>
-    </Box>
-  ) : null;
-};
-
-export const HLSStreaming = ({ onBack }) => {
-  const roleNames = useFilteredRoles();
-  const roomId = useHMSStore(selectRoomID);
-  const cards = roleNames.map(roleName => getCardData(roleName, roomId));
-
-  const { isHLSRunning } = useRecordingStreaming();
-  const [showLinks, setShowLinks] = useState(false);
-  return !showLinks ? (
-    <Container rounded>
-      <ContentHeader title="Start Streaming" content="HLS" onBack={onBack} />
-      <ContentBody title="HLS Streaming" Icon={GoLiveIcon} removeVerticalPadding>
-        Stream directly from the browser using any device with multiple hosts and real-time messaging, all within this
-        platform.
-      </ContentBody>
-      {isHLSRunning ? <EndHLS setShowLinks={setShowLinks} /> : <StartHLS />}
-    </Container>
-  ) : (
-    <Container rounded>
-      <ContentHeader title="Invite People" content="Start the conversation" onBack={() => setShowLinks(false)} />
-
-      <Flex direction="column" css={{ gap: '$10', p: '$0 $10', overflowY: 'auto', mb: '$10' }}>
-        {cards.map(card => (
-          <Card key={card.title} {...card} isHLSRunning={isHLSRunning} />
-        ))}
-      </Flex>
-    </Container>
-  );
-};
-
-const StartHLS = () => {
-  const [record, setRecord] = useState(false);
-  const [error, setError] = useState(false);
-  const hmsActions = useHMSActions();
-  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const startHLS = useCallback(
-    async variants => {
-      try {
-        if (isHLSStarted) {
-          return;
-        }
-        setHLSStarted(true);
-        setError('');
-        await hmsActions.startHLSStreaming({
-          variants,
-          recording: { hlsVod: record, singleFilePerLayer: record },
-        });
-      } catch (error) {
-        setHLSStarted(false);
-        setError(error.message);
-      }
-    },
-    [hmsActions, record, isHLSStarted, setHLSStarted],
-  );
-
-  return (
-    <Fragment>
-      <RecordStream record={record} setRecord={setRecord} testId="hls-recording" />
-      <Box css={{ p: '$4 $10' }}>
-        <ErrorText error={error} />
-        <Button
-          data-testid="start_hls"
-          css={{ w: '100%', r: '$0' }}
-          icon
-          onClick={() => startHLS()}
-          disabled={isHLSStarted}
-        >
-          {isHLSStarted ? <Loading size={24} color="currentColor" /> : <GoLiveIcon />}
-          {isHLSStarted ? 'Starting stream...' : 'Go Live'}
-        </Button>
-      </Box>
-      <Flex align="center" css={{ p: '$4 $10' }}>
-        <Text>
-          <InfoIcon width={16} height={16} />
-        </Text>
-        <Text variant="tiny" color="$on_surface_medium" css={{ mx: '$8' }}>
-          You cannot start recording once the stream starts, you will have to stop the stream to enable recording.
-        </Text>
-      </Flex>
-    </Fragment>
-  );
-};
-
-const EndHLS = ({ setShowLinks }) => {
-  const hmsActions = useHMSActions();
-
-  const [inProgress, setInProgress] = useState(false);
-  const [error, setError] = useState('');
-  const { isHLSRunning } = useRecordingStreaming();
-
-  useEffect(() => {
-    if (inProgress && !isHLSRunning) {
-      setInProgress(false);
-    }
-  }, [inProgress, isHLSRunning]);
-
-  return (
-    <Box css={{ p: '$4 $10' }}>
-      <ErrorText error={error} />
-      <Button
-        data-testid="stop_hls"
-        variant="danger"
-        css={{ w: '100%', r: '$0', mt: '$8' }}
-        icon
-        loading={inProgress}
-        disabled={inProgress}
-        onClick={async () => {
-          try {
-            setInProgress(true);
-            await hmsActions.stopHLSStreaming();
-          } catch (error) {
-            setError(error.message);
-            setInProgress(false);
-          }
-        }}
-      >
-        <EndStreamIcon />
-        End Stream
-      </Button>
-      <Button icon css={{ w: '100%', r: '$0', mt: '$8' }} onClick={() => setShowLinks(true)}>
-        <PeopleIcon /> Invite People
-      </Button>
-    </Box>
-  );
-};

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

@@ -1,334 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useHMSActions, 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 [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 $surface_bright !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,
-                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: '$on_surface_high', 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: '$alert_error_default', 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/StreamingLanding.jsx

@@ -1,76 +0,0 @@
-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 RTMPIcon from '../../images/rtmp.png';
-import { StreamCard } from './Common';
-import { HLSStreaming } from './HLSStreaming';
-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: '$surface_bright',
-            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="$on_surface_medium">
-        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);
-          }}
-          imgSrc={RTMPIcon}
-        />
-      )}
-      {showHLS && <HLSStreaming onBack={() => setShowHLS(false)} />}
-      {showRTMP && <RTMPStreaming onBack={() => setShowRTMP(false)} />}
-    </Fragment>
-  );
-};