signal-desktop/ts/components/GroupCallOverflowArea.tsx

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import React, { useRef, useState, useEffect, FC, ReactElement } from 'react';
import classNames from 'classnames';
import { LocalizerType } from '../types/Util';
import {
  GroupCallRemoteParticipantType,
  VideoFrameSource,
} from '../types/Calling';
import { GroupCallRemoteParticipant } from './GroupCallRemoteParticipant';

const OVERFLOW_SCROLLED_TO_EDGE_THRESHOLD = 20;
const OVERFLOW_SCROLL_BUTTON_RATIO = 0.75;

// This should be an integer, as sub-pixel widths can cause performance issues.
export const OVERFLOW_PARTICIPANT_WIDTH = 140;

type PropsType = {
  getFrameBuffer: () => ArrayBuffer;
  getGroupCallVideoFrameSource: (demuxId: number) => VideoFrameSource;
  i18n: LocalizerType;
  overflowedParticipants: ReadonlyArray<GroupCallRemoteParticipantType>;
};

export const GroupCallOverflowArea: FC<PropsType> = ({
  getFrameBuffer,
  getGroupCallVideoFrameSource,
  i18n,
  overflowedParticipants,
}) => {
  const overflowRef = useRef<HTMLDivElement | null>(null);
  const [overflowScrollTop, setOverflowScrollTop] = useState(0);

  // This assumes that these values will change along with re-renders. If that's not true,
  //   we should add these values to the component's state.
  let visibleHeight: number;
  let scrollMax: number;
  if (overflowRef.current) {
    visibleHeight = overflowRef.current.clientHeight;
    scrollMax = overflowRef.current.scrollHeight - visibleHeight;
  } else {
    visibleHeight = 0;
    scrollMax = 0;
  }

  const hasOverflowedParticipants = Boolean(overflowedParticipants.length);

  useEffect(() => {
    // If there aren't any overflowed participants, we want to clear the scroll position
    //   so we don't hold onto stale values.
    if (!hasOverflowedParticipants) {
      setOverflowScrollTop(0);
    }
  }, [hasOverflowedParticipants]);

  if (!hasOverflowedParticipants) {
    return null;
  }

  const isScrolledToTop =
    overflowScrollTop < OVERFLOW_SCROLLED_TO_EDGE_THRESHOLD;
  const isScrolledToBottom =
    overflowScrollTop > scrollMax - OVERFLOW_SCROLLED_TO_EDGE_THRESHOLD;

  return (
    <div
      className="module-ongoing-call__participants__overflow"
      style={{
        // This width could live in CSS but we put it here to avoid having to keep two
        //   values in sync.
        width: OVERFLOW_PARTICIPANT_WIDTH,
      }}
    >
      <OverflowAreaScrollMarker
        i18n={i18n}
        isHidden={isScrolledToTop}
        onClick={() => {
          const el = overflowRef.current;
          if (!el) {
            return;
          }
          el.scrollTo({
            top: Math.max(
              el.scrollTop - visibleHeight * OVERFLOW_SCROLL_BUTTON_RATIO,
              0
            ),
            left: 0,
            behavior: 'smooth',
          });
        }}
        placement="top"
      />
      <div
        className="module-ongoing-call__participants__overflow__inner"
        ref={overflowRef}
        onScroll={() => {
          // Ideally this would use `event.target.scrollTop`, but that does not seem to be
          //   available, so we use the ref.
          const el = overflowRef.current;
          if (!el) {
            return;
          }
          setOverflowScrollTop(el.scrollTop);
        }}
      >
        {overflowedParticipants.map(remoteParticipant => (
          <GroupCallRemoteParticipant
            key={remoteParticipant.demuxId}
            getFrameBuffer={getFrameBuffer}
            getGroupCallVideoFrameSource={getGroupCallVideoFrameSource}
            i18n={i18n}
            width={OVERFLOW_PARTICIPANT_WIDTH}
            height={Math.floor(
              OVERFLOW_PARTICIPANT_WIDTH / remoteParticipant.videoAspectRatio
            )}
            remoteParticipant={remoteParticipant}
          />
        ))}
      </div>
      <OverflowAreaScrollMarker
        i18n={i18n}
        isHidden={isScrolledToBottom}
        onClick={() => {
          const el = overflowRef.current;
          if (!el) {
            return;
          }
          el.scrollTo({
            top: Math.min(
              el.scrollTop + visibleHeight * OVERFLOW_SCROLL_BUTTON_RATIO,
              scrollMax
            ),
            left: 0,
            behavior: 'smooth',
          });
        }}
        placement="bottom"
      />
    </div>
  );
};

function OverflowAreaScrollMarker({
  i18n,
  isHidden,
  onClick,
  placement,
}: {
  i18n: LocalizerType;
  isHidden: boolean;
  onClick: () => void;
  placement: 'top' | 'bottom';
}): ReactElement {
  const baseClassName =
    'module-ongoing-call__participants__overflow__scroll-marker';

  return (
    <div
      className={classNames(baseClassName, `${baseClassName}--${placement}`, {
        [`${baseClassName}--hidden`]: isHidden,
      })}
    >
      <button
        type="button"
        className={`${baseClassName}__button`}
        onClick={onClick}
        aria-label={i18n(
          `calling__overflow__scroll-${placement === 'top' ? 'up' : 'down'}`
        )}
      />
    </div>
  );
}