Ничего не отображать для MainParticipant, когда только LocalParticipant подключен к комнате в Twilio Video - PullRequest
Новая
       15

Ничего не отображать для MainParticipant, когда только LocalParticipant подключен к комнате в Twilio Video

0 голосов
/ 16 апреля 2020

Я экспериментирую с проектом Twil ios twilio-video-app-реаги * .

При входе в комнату я бы хотел, чтобы локальная дорожка видео отображалась в ParticipantStrip, а не в компоненте MainParticipant.

В MainParticipant компоненту ParticipantTrack, отображающему видео, передается значение mainParticipant, полученное с помощью хука useMainSpeaker, предоставленного Twilio. Я не верю, что useMainSpeaker используется при отображении ParticipantStrip.

Внутри useMainSpeaker .. mainSpeaker (что, я полагаю, означает, что тот, кто будет отображаться в большом компоненте фона) ) возвращается с помощью: return selectedParticipant || screenShareParticipant || dominantSpeaker || participants[0] || localParticipant; .. поэтому, когда в комнату входит один пользователь, они являются единственным ненулевым значением, и поэтому возвращается localParticipant Я бы хотел, чтобы он не возвращал localParticipant здесь, а чтобы он отображался только в ParticipantStrip.

Почему, когда я удаляю || localParticipant из useMainSpeaker, я теряю канал видео в компоненте MainParticipant (ожидается), а затем теряю его в компоненте ParticipantStrip (неожиданно)?

ОБНОВЛЕНИЕ Таким образом, похоже, что без MainParticipant высота контейнера установлена ​​на ноль, и поэтому абсолютно позиционированный ParticipantStrip скрыт внутри контейнера с нулевой высотой. Основываясь на недавнем обновлении, которое они сделали в другом месте, я изменил Room.tsx, чтобы он выглядел следующим образом: 

import React from 'react';
import ParticipantOverlay from '../ParticipantOverlay/ParticipantOverlay';
import ParticipantStrip from '../ParticipantStrip/ParticipantStrip';
import { styled } from '@material-ui/core/styles';
import MainParticipant from '../MainParticipant/MainParticipant';
**import useHeight from '../../hooks/useHeight/useHeight';**

const Container = styled('div')(({ theme }) => ({
  position: 'relative',
}));

export default function Room() {
  **const height = useHeight();**
  return (
    <Container **style={{ height }}**>
      <MainParticipant />
      <ParticipantOverlay />
    </Container>
  );
}

Я не уверен, является ли это полным / не хакерским решением на данный момент.

...