@100mslive/roomkit-react 0.4.3-alpha.0 → 0.4.3-alpha.10

package/src/Prebuilt/components/PIP/pipUtils.js

@@ -1,183 +0,0 @@
-let CANVAS_FILL_COLOR;
-let CANVAS_STROKE_COLOR;
-
-function setPIPCanvasColors() {
-  if (!CANVAS_FILL_COLOR) {
-    CANVAS_FILL_COLOR = window
-      .getComputedStyle(document.documentElement)
-      .getPropertyValue('--hms-ui-colors-surface_bright');
-  }
-  if (!CANVAS_STROKE_COLOR) {
-    CANVAS_STROKE_COLOR = window
-      .getComputedStyle(document.documentElement)
-      .getPropertyValue('--hms-ui-colors-border_bright');
-  }
-}
-
-export function resetPIPCanvasColors() {
-  CANVAS_FILL_COLOR = '';
-  CANVAS_STROKE_COLOR = '';
-}
-/**
- * no tile - blank canvas, black image
- * 1 tile - takes full space on canvas
- * 2 tile - stack two video adjacent to each other
- * 3 tile - two rows first row has two tile second row has one tile centered.
- * 4 tiles - two rows two columns - all equal size
- * All videos will respect their aspect ratios.
- */
-export function drawVideoElementsOnCanvas(videoElements, canvas) {
-  let videoTiles = videoElements.filter(videoElement => videoElement.srcObject !== null);
-
-  const ctx = canvas.getContext('2d');
-  setPIPCanvasColors();
-  ctx.fillStyle = CANVAS_FILL_COLOR;
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-  if (videoTiles.length === 0) {
-    // no tile to render, render black image
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    return;
-  }
-
-  fillGridTiles(videoTiles.slice(0, 4), ctx, canvas);
-}
-
-// this is to send some data for stream and resolve video element's play for a
-// video element rendering this canvas' capture stream
-export function dummyChangeInCanvas(canvas) {
-  const ctx = canvas.getContext('2d');
-  setPIPCanvasColors();
-  ctx.fillStyle = CANVAS_FILL_COLOR;
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-}
-
-/**
- * Imagine the canvas as a grid with passed in number of rows and columns. Go
- * over the tiles in the grid in order while drawing the videoElements upon them.
- */
-function fillGridTiles(videoElements, ctx, canvas) {
-  const offset = 8;
-  canvas.width = 480;
-  canvas.height = 320;
-
-  ctx.fillStyle = CANVAS_FILL_COLOR;
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-  // Show borders only when there is atleast one video
-  if (videoElements.length > 0) {
-    ctx.strokeStyle = CANVAS_STROKE_COLOR;
-    ctx.lineWidth = offset / 2;
-    ctx.strokeRect(0, 0, canvas.width, canvas.height);
-  }
-
-  if (videoElements.length === 1) {
-    const video = videoElements[0];
-    const { width, height } = getRenderDimensions(video, canvas.width - offset, canvas.height - offset);
-    /**
-     * The x and y offset are to center the video tile horizontally and vertically
-     * width and height are the aspect ratio constrained video tile dimensions
-     */
-    const xOffset = (canvas.width - width) / 2;
-    const yOffset = (canvas.height - height) / 2;
-    ctx.drawImage(video, xOffset, yOffset, width, height);
-  }
-
-  if (videoElements.length === 2) {
-    videoElements.forEach((video, index) => {
-      const { width, height } = getRenderDimensions(
-        video,
-        canvas.width / 2 - offset, // This will be the max available width for each tile
-        canvas.height - offset,
-      );
-      /**
-       * (canvas.width / 2 - width) / 2 This is to center width wise within in the box
-       * (canvas.width / 2) * index This is the start offset
-       * for 1st element it is 0, for second it will be canvas.width/2 which starts from the center
-       */
-      const xOffset = (canvas.width / 2 - width) / 2 + (canvas.width / 2) * index;
-      /**
-       * (canvas.height - height) / 2 This is to center height wise
-       */
-      const yOffset = (canvas.height - height) / 2;
-
-      ctx.drawImage(video, xOffset, yOffset, width, height);
-    });
-    /**
-     * Draw a border between tiles
-     */
-    const path = new Path2D();
-    path.moveTo(canvas.width / 2, 0);
-    path.lineTo(canvas.width / 2, canvas.height);
-    ctx.stroke(path);
-  }
-
-  if (videoElements.length === 3) {
-    videoElements.forEach((video, index) => {
-      const { width, height } = getRenderDimensions(video, canvas.width / 2 - offset, canvas.height / 2 - offset);
-      /**
-       * for first two tiles, xOffset is similar to the 2 tiles calculation with only difference being the height. it is half now.
-       */
-      const xOffset =
-        index < 2 ? (canvas.width / 2 - width) / 2 + (canvas.width / 2) * index : canvas.width / 2 - width / 2;
-      const yOffset = (index < 2 ? 0 : canvas.height / 2) + (canvas.height / 2 - height) / 2;
-
-      ctx.drawImage(video, xOffset, yOffset, width, height);
-    });
-    /**
-     * Draw borders between tiles
-     */
-    const path = new Path2D();
-    path.moveTo(canvas.width / 2, 0);
-    path.lineTo(canvas.width / 2, canvas.height / 2);
-    ctx.stroke(path);
-    path.moveTo(0, canvas.height / 2);
-    path.lineTo(canvas.width, canvas.height / 2);
-    ctx.stroke(path);
-  }
-  if (videoElements.length === 4) {
-    videoElements.forEach((video, index) => {
-      const { width, height } = getRenderDimensions(video, canvas.width / 2 - offset, canvas.height / 2 - offset);
-      /**
-       * Similar to two tiles repeat after 2 tiles
-       * (canvas.width / 2 - width) / 2 is to center horizontally
-       */
-      const xOffset = (canvas.width / 2 - width) / 2 + (canvas.width / 2) * (index % 2);
-      /**
-       * Similar to two tiles with the yOffset being height/2 for the 3rd and 4th tiles
-       * (canvas.height / 2 - height) / 2 is to center vertically
-       */
-      const yOffset = (index < 2 ? 0 : canvas.height / 2) + (canvas.height / 2 - height) / 2;
-
-      ctx.drawImage(video, xOffset, yOffset, width, height);
-    });
-    /**
-     * Draw borders between tiles
-     */
-    const path = new Path2D();
-    path.moveTo(canvas.width / 2, 0);
-    path.lineTo(canvas.width / 2, canvas.height);
-    ctx.stroke(path);
-    path.moveTo(0, canvas.height / 2);
-    path.lineTo(canvas.width, canvas.height / 2);
-    ctx.stroke(path);
-  }
-}
-
-/**
- * Restrict the dimensions within the available dimension with aspect ratio
- * constraint applied
- * @param {HTMLVideoElement} video
- * @param {number} width
- * @param {number} height
- * @returns { width: number, height: number }
- */
-function getRenderDimensions(video, width, height) {
-  let finalWidth = (video.videoWidth / video.videoHeight) * height;
-  let finalHeight = height;
-
-  if (finalWidth > width) {
-    finalWidth = width;
-    finalHeight = (video.videoHeight / video.videoWidth) * width;
-  }
-  return { width: finalWidth, height: finalHeight };
-}

package/src/Prebuilt/components/PIP/usePIPChat.tsx

@@ -1,105 +0,0 @@
-import { useEffect } from 'react';
-import { useHMSActions } from '@100mslive/react-sdk';
-import { getCssText } from '../../../Theme';
-import { usePIPWindow } from './usePIPWindow';
-
-export const usePIPChat = () => {
-  const hmsActions = useHMSActions();
-  const { isSupported, requestPipWindow, pipWindow, closePipWindow } = usePIPWindow();
-
-  useEffect(() => {
-    if (document && pipWindow) {
-      const style = document.createElement('style');
-      style.id = 'stitches';
-      style.textContent = getCssText();
-      pipWindow.document.head.appendChild(style);
-    }
-  }, [pipWindow]);
-
-  // @ts-ignore
-  useEffect(() => {
-    if (pipWindow) {
-      const chatContainer = pipWindow.document.getElementById('chat-container');
-      const selector = pipWindow.document.getElementById('selector') as HTMLSelectElement;
-      const sendBtn = pipWindow.document.getElementById('send-btn');
-      const pipChatInput = pipWindow.document.getElementById('chat-input') as HTMLTextAreaElement;
-      const marker = pipWindow.document.getElementById('marker');
-
-      marker?.scrollIntoView({ block: 'end' });
-
-      const observer = new IntersectionObserver(
-        entries => {
-          entries.forEach(entry => {
-            if (entry.isIntersecting && entry.target.id) {
-              hmsActions.setMessageRead(true, entry.target.id);
-            }
-          });
-        },
-        {
-          root: chatContainer,
-          threshold: 0.8,
-        },
-      );
-
-      const mutationObserver = new MutationObserver(mutations => {
-        mutations.forEach(mutation => {
-          if (mutation.addedNodes.length > 0) {
-            const newMessages = mutation.addedNodes;
-            newMessages.forEach(message => {
-              const messageId = (message as Element)?.id;
-              if (messageId === 'new-message-notif') {
-                message.addEventListener('click', () =>
-                  setTimeout(() => marker?.scrollIntoView({ block: 'end', behavior: 'smooth' }), 0),
-                );
-              } else if (messageId) observer.observe(message as Element);
-            });
-          }
-        });
-      });
-      mutationObserver.observe(chatContainer as Node, {
-        childList: true,
-      });
-
-      const sendMessage = async () => {
-        const selection = selector?.value || 'Everyone';
-        if (selection === 'Everyone') {
-          await hmsActions.sendBroadcastMessage(pipChatInput.value.trim());
-        } else {
-          await hmsActions.sendGroupMessage(pipChatInput.value.trim(), [selection]);
-        }
-        pipChatInput.value = '';
-        setTimeout(() => marker?.scrollIntoView({ block: 'end', behavior: 'smooth' }), 0);
-      };
-
-      if (sendBtn && hmsActions && pipChatInput) {
-        const pipMessages = pipWindow.document.getElementsByClassName('pip-message');
-        // @ts-ignore
-        [...pipMessages].forEach(message => {
-          if (message.id) {
-            hmsActions.setMessageRead(true, message.id);
-          }
-        });
-        // @ts-ignore
-        const sendOnEnter = e => {
-          if (e.key === 'Enter') sendMessage();
-        };
-        sendBtn.addEventListener('click', sendMessage);
-        pipChatInput.addEventListener('keypress', sendOnEnter);
-        return () => {
-          sendBtn.removeEventListener('click', sendMessage);
-          pipChatInput.removeEventListener('keypress', sendOnEnter);
-          mutationObserver.disconnect();
-          observer.disconnect();
-        };
-      }
-    }
-  }, [pipWindow, hmsActions]);
-
-  useEffect(() => {
-    return () => {
-      pipWindow && closePipWindow();
-    };
-  }, [closePipWindow, pipWindow]);
-
-  return { isSupported, requestPipWindow, pipWindow };
-};

package/src/Prebuilt/components/PIP/usePIPWindow.tsx

@@ -1,12 +0,0 @@
-import { useContext } from 'react';
-import { PIPContext, PIPContextType } from './context';
-
-export const usePIPWindow = (): PIPContextType => {
-  const context = useContext(PIPContext);
-
-  if (context === undefined) {
-    throw new Error('usePIPWindow must be used within a PIPContext');
-  }
-
-  return context;
-};

package/src/Prebuilt/components/Pagination.tsx

@@ -1,60 +0,0 @@
-import React, { useEffect } from 'react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@100mslive/react-icons';
-import { StyledPagination } from '../../Pagination';
-
-export const Pagination = ({
-  page,
-  onPageChange,
-  numPages,
-}: {
-  page: number;
-  onPageChange: (page: number) => void;
-  numPages: number;
-}) => {
-  const disableLeft = page === 0;
-  const disableRight = page === numPages - 1;
-  const nextPage = (e: React.SyntheticEvent) => {
-    e.stopPropagation();
-    onPageChange(Math.min(page + 1, numPages - 1));
-  };
-  const prevPage = (e: React.SyntheticEvent) => {
-    e.stopPropagation();
-    onPageChange(Math.max(page - 1, 0));
-  };
-
-  useEffect(() => {
-    // currentPageIndex should not exceed pages length
-    if (page >= numPages) {
-      onPageChange(Math.max(0, numPages - 1));
-    }
-  }, [numPages, onPageChange, page]);
-
-  if (numPages <= 1) {
-    return null;
-  }
-
-  return (
-    <StyledPagination.Root css={{ flexShrink: 0 }}>
-      <StyledPagination.Chevron disabled={disableLeft} onClick={prevPage}>
-        <ChevronLeftIcon width={16} height={16} style={{ cursor: disableLeft ? 'not-allowed' : 'pointer' }} />
-      </StyledPagination.Chevron>
-      {numPages <= 5 ? (
-        <StyledPagination.Dots>
-          {[...Array(numPages)].map((_, i) => (
-            <StyledPagination.Dot
-              key={i}
-              active={page === i}
-              onClick={e => {
-                e.stopPropagation();
-                onPageChange(i);
-              }}
-            />
-          ))}
-        </StyledPagination.Dots>
-      ) : null}
-      <StyledPagination.Chevron disabled={disableRight} onClick={nextPage}>
-        <ChevronRightIcon width={16} height={16} style={{ cursor: disableRight ? 'not-allowed' : 'pointer' }} />
-      </StyledPagination.Chevron>
-    </StyledPagination.Root>
-  );
-};

package/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx

@@ -1,248 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  HMSPollState,
-  selectLocalPeerRoleName,
-  selectPermissions,
-  selectPolls,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { QuestionIcon, StatsIcon } from '@100mslive/react-icons';
-import { Button, Flex, Input, Switch, Text } from '../../../..';
-// @ts-ignore
-import { Container, ContentHeader, ErrorText } from '../../Streaming/Common';
-// @ts-ignore
-import { usePollViewToggle } from '../../AppData/useSidepane';
-// @ts-ignore
-import { usePollViewState } from '../../AppData/useUISettings';
-// @ts-ignore
-import { isValidTextInput } from '../../../common/utils';
-import { StatusIndicator } from '../common/StatusIndicator';
-import { INTERACTION_TYPE, POLL_STATE, POLL_VIEWS } from '../../../common/constants';
-
-export const PollsQuizMenu = () => {
-  const togglePollView = usePollViewToggle();
-  const permissions = useHMSStore(selectPermissions);
-
-  return (
-    <Container rounded>
-      <ContentHeader content="Polls and Quizzes" onClose={togglePollView} />
-      <Flex direction="column" css={{ px: '$10', pb: '$10', overflowY: 'auto' }}>
-        {permissions?.pollWrite && <AddMenu />}
-        <PrevMenu />
-      </Flex>
-    </Container>
-  );
-};
-
-function InteractionSelectionCard({
-  title,
-  icon,
-  active,
-  onClick,
-}: {
-  title: string;
-  icon: React.JSX.Element;
-  active: boolean;
-  onClick: () => void;
-}) {
-  const activeBorderStyle = active ? '$space$px solid $primary_default' : '$space$px solid $border_bright';
-  return (
-    <Flex
-      onClick={onClick}
-      css={{
-        border: activeBorderStyle,
-        p: '$4',
-        r: '$2',
-        w: '100%',
-        cursor: 'pointer',
-      }}
-      align="center"
-    >
-      <Flex
-        css={{
-          border: activeBorderStyle,
-          p: '$4',
-          bg: '$surface_bright',
-          c: '$on_surface_high',
-          r: '$0',
-        }}
-      >
-        {icon}
-      </Flex>
-      <Text variant="sub1" css={{ ml: '$md' }}>
-        {title}
-      </Text>
-    </Flex>
-  );
-}
-
-const AddMenu = () => {
-  const actions = useHMSActions();
-  const [title, setTitle] = useState('');
-  const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
-  const [hideVoteCount, setHideVoteCount] = useState(false);
-  const [error, setError] = useState();
-  const [titleError, setTitleError] = useState('');
-  const { setPollState } = usePollViewState();
-  const [interactionType, setInteractionType] = useState(INTERACTION_TYPE.POLL);
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [interactionType]);
-
-  const handleCreate = (id: string) => {
-    setPollState({
-      [POLL_STATE.pollInView]: id,
-      [POLL_STATE.view]: POLL_VIEWS.CREATE_QUESTIONS,
-    });
-  };
-
-  const validateTitle = useMemo(() => {
-    if (!isValidTextInput(title)) {
-      if (title) {
-        setTitleError('The title should have between 2-100 characters');
-      }
-      return true;
-    } else {
-      setTitleError('');
-      return false;
-    }
-  }, [title]);
-
-  return (
-    <>
-      <Text variant="caption" css={{ c: '$on_surface_medium', mb: '$md' }}>
-        Select the type you want to continue with
-      </Text>
-      <Flex css={{ w: '100%', gap: '$10', mb: '$md' }}>
-        <InteractionSelectionCard
-          title={INTERACTION_TYPE.POLL}
-          icon={<StatsIcon width={32} height={32} />}
-          onClick={() => setInteractionType(INTERACTION_TYPE.POLL)}
-          active={interactionType === INTERACTION_TYPE.POLL}
-        />
-        <InteractionSelectionCard
-          title={INTERACTION_TYPE.QUIZ}
-          icon={<QuestionIcon width={32} height={32} />}
-          onClick={() => setInteractionType(INTERACTION_TYPE.QUIZ)}
-          active={interactionType === INTERACTION_TYPE.QUIZ}
-        />
-      </Flex>
-      <Flex direction="column" css={{ mb: '$10' }}>
-        <Text variant="body2" css={{ mb: '$4' }}>{`Name this ${interactionType.toLowerCase()}`}</Text>
-        <Input
-          ref={inputRef}
-          type="text"
-          placeholder="Enter a name to continue"
-          value={title}
-          onChange={event => setTitle(event.target.value.trimStart())}
-          css={{
-            backgroundColor: '$surface_bright',
-            border: '1px solid $border_default',
-          }}
-        />
-        <Flex align="center" css={{ mt: '$10' }}>
-          <Switch onCheckedChange={value => setHideVoteCount(value)} css={{ mr: '$6' }} />
-          <Text variant="body2" css={{ c: '$on_surface_medium' }}>
-            Hide Vote Count
-          </Text>
-        </Flex>
-
-        <Button
-          variant="primary"
-          disabled={validateTitle}
-          css={{ mt: '$10' }}
-          onClick={async () => {
-            const id = Date.now().toString();
-            await actions.interactivityCenter
-              .createPoll({
-                id,
-                title,
-                anonymous: false,
-                rolesThatCanViewResponses: hideVoteCount && localPeerRoleName ? [localPeerRoleName] : undefined,
-                // @ts-ignore
-                type: interactionType.toLowerCase(),
-              })
-              .then(() => handleCreate(id))
-              .catch(err => setError(err.message));
-          }}
-        >
-          Create {interactionType}
-        </Button>
-        <ErrorText error={error || titleError} />
-      </Flex>
-    </>
-  );
-};
-
-const PrevMenu = () => {
-  const hmsActions = useHMSActions();
-  const polls = useHMSStore(selectPolls);
-  const sortedPolls = useMemo(
-    () =>
-      polls
-        ?.sort((a, b) => (b?.createdAt?.getTime?.() || 0) - (a?.createdAt?.getTime?.() || 0))
-        ?.sort((a, b) => (b?.state === 'started' ? 1 : 0) - (a?.state === 'started' ? 1 : 0)),
-    [polls],
-  );
-  const permissions = useHMSStore(selectPermissions);
-
-  useEffect(() => {
-    const updatePolls = async () => {
-      await hmsActions.interactivityCenter.getPolls();
-    };
-    updatePolls();
-  }, [hmsActions.interactivityCenter]);
-
-  return polls?.length ? (
-    <Flex
-      direction="column"
-      css={{
-        width: '100%',
-        ...(permissions?.pollWrite ? { borderTop: '$space$px solid $border_bright', paddingTop: '$10' } : {}),
-      }}
-    >
-      <Text variant="h6" css={{ c: '$on_surface_high' }}>
-        Previous Polls and Quizzes
-      </Text>
-      <Flex direction="column" css={{ gap: '$10', mt: '$8' }}>
-        {sortedPolls?.map(poll => (
-          <InteractionCard key={poll.id} id={poll.id} title={poll.title} status={poll.state} />
-        ))}
-      </Flex>
-    </Flex>
-  ) : null;
-};
-
-const InteractionCard = ({ id, title, status }: { id: string; title: string; status?: HMSPollState }) => {
-  const { setPollState } = usePollViewState();
-
-  return (
-    <Flex direction="column" css={{ backgroundColor: '$surface_bright', borderRadius: '$1', p: '$8' }}>
-      <Flex css={{ w: '100%', justifyContent: 'space-between', mb: '$sm' }}>
-        <Text variant="sub1" css={{ c: '$on_surface_high', fontWeight: '$semiBold' }}>
-          {title}
-        </Text>
-        <StatusIndicator status={status} />
-      </Flex>
-      <Flex css={{ w: '100%', gap: '$4' }} justify="end">
-        <Button
-          variant="primary"
-          onClick={() =>
-            setPollState({
-              [POLL_STATE.pollInView]: id,
-              [POLL_STATE.view]: status === 'created' ? POLL_VIEWS.CREATE_QUESTIONS : POLL_VIEWS.VOTE,
-            })
-          }
-        >
-          View
-        </Button>
-      </Flex>
-    </Flex>
-  );
-};