Skip to content

Commit

Permalink
Revert "Update AudioTrack and VideoTrack components to accept track r…
Browse files Browse the repository at this point in the history
…eferences (#622)"

This reverts commit f5abe55.
  • Loading branch information
lukasIO committed Sep 7, 2023
1 parent f2540e9 commit c07bcd2
Show file tree
Hide file tree
Showing 12 changed files with 57 additions and 103 deletions.
5 changes: 0 additions & 5 deletions .changeset/warm-geese-serve.md

This file was deleted.

35 changes: 16 additions & 19 deletions packages/react/etc/components-react.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,21 +62,20 @@ export interface AudioConferenceProps extends React_2.HTMLAttributes<HTMLDivElem
}

// @public
export function AudioTrack({ trackRef, onSubscriptionStatusChanged, volume, source, name, publication, participant: p, ...props }: AudioTrackProps): React_2.JSX.Element;
export function AudioTrack({ onSubscriptionStatusChanged, volume, source, name, publication, participant: p, ...props }: AudioTrackProps): React_2.JSX.Element;

// @public (undocumented)
export interface AudioTrackProps<T extends HTMLMediaElement = HTMLMediaElement> extends React_2.HTMLAttributes<T> {
// @deprecated (undocumented)
// (undocumented)
name?: string;
// (undocumented)
onSubscriptionStatusChanged?: (subscribed: boolean) => void;
// @deprecated (undocumented)
// (undocumented)
participant?: Participant;
// @deprecated (undocumented)
// (undocumented)
publication?: TrackPublication;
// @deprecated (undocumented)
source?: Track.Source;
trackRef?: TrackReference;
// (undocumented)
source: Track.Source;
volume?: number;
}

Expand Down Expand Up @@ -201,26 +200,25 @@ export interface DisconnectButtonProps extends React_2.ButtonHTMLAttributes<HTML
}

// @public (undocumented)
export function FocusLayout({ trackRef, track, ...htmlProps }: FocusLayoutProps): React_2.JSX.Element;
export function FocusLayout({ track, ...htmlProps }: FocusLayoutProps): React_2.JSX.Element;

// @public (undocumented)
export function FocusLayoutContainer(props: FocusLayoutContainerProps): React_2.JSX.Element;

// @public (undocumented)
export interface FocusLayoutContainerProps extends React_2.HTMLAttributes<HTMLDivElement> {
// @deprecated (undocumented)
// (undocumented)
focusTrack?: TrackReference;
// @deprecated (undocumented)
// (undocumented)
participants?: Array<Participant>;
}

// @public (undocumented)
export interface FocusLayoutProps extends React_2.HTMLAttributes<HTMLElement> {
// (undocumented)
onParticipantClick?: (evt: ParticipantClickEvent) => void;
// @deprecated (undocumented)
// (undocumented)
track?: TrackReferenceOrPlaceholder;
trackRef?: TrackReferenceOrPlaceholder;
}

// @public
Expand Down Expand Up @@ -938,25 +936,24 @@ export interface VideoConferenceProps extends React_2.HTMLAttributes<HTMLDivElem
}

// @public
export function VideoTrack({ onTrackClick, onClick, onSubscriptionStatusChanged, trackRef, name, publication, source, participant: p, manageSubscription, ...props }: VideoTrackProps): React_2.JSX.Element;
export function VideoTrack({ onTrackClick, onClick, onSubscriptionStatusChanged, name, publication, source, participant: p, manageSubscription, ...props }: VideoTrackProps): React_2.JSX.Element;

// @public (undocumented)
export interface VideoTrackProps extends React_2.HTMLAttributes<HTMLVideoElement> {
// (undocumented)
manageSubscription?: boolean;
// @deprecated (undocumented)
// (undocumented)
name?: string;
// (undocumented)
onSubscriptionStatusChanged?: (subscribed: boolean) => void;
// (undocumented)
onTrackClick?: (evt: ParticipantClickEvent) => void;
// @deprecated (undocumented)
// (undocumented)
participant?: Participant;
// @deprecated (undocumented)
// (undocumented)
publication?: TrackPublication;
// @deprecated (undocumented)
source?: Track.Source;
trackRef?: TrackReference;
// (undocumented)
source: Track.Source;
}

// Warnings were encountered during analysis:
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/RoomAudioRenderer.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { getTrackReferenceId, isLocal } from '@livekit/components-core';
import { isLocal } from '@livekit/components-core';
import type { RemoteTrackPublication } from 'livekit-client';
import { Track } from 'livekit-client';
import * as React from 'react';
Expand Down Expand Up @@ -30,7 +30,7 @@ export function RoomAudioRenderer() {
return (
<div style={{ display: 'none' }}>
{tracks.map((trackRef) => (
<AudioTrack key={getTrackReferenceId(trackRef)} trackRef={trackRef} />
<AudioTrack key={trackRef.publication.trackSid} {...trackRef} />
))}
</div>
);
Expand Down
8 changes: 4 additions & 4 deletions packages/react/src/components/TrackLoop.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { TrackReference, TrackReferenceOrPlaceholder } from '@livekit/components-core';
import * as React from 'react';
import { TrackContext } from '../context/track-reference-context';
import { TrackContext } from '../context/track-context';
import { cloneSingleChild } from '../utils';
import { getTrackReferenceId } from '@livekit/components-core';

Expand All @@ -18,10 +18,10 @@ export interface TrackLoopProps {
*
* @example
* ```tsx
* const trackRefs = useTracks([Track.Source.Camera]);
* <TrackLoop tracks={trackRefs} >
* const tracks = useTracks([Track.Source.Camera]);
* <TrackLoop tracks={tracks} >
* <TrackContext.Consumer>
* {(trackRef) => trackRef && <VideoTrack trackRef={trackRef}/>}
* {(track) => track && <VideoTrack {...track}/>}
* </TrackContext.Consumer>
* <TrackLoop />
* ```
Expand Down
10 changes: 2 additions & 8 deletions packages/react/src/components/layout/FocusLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ import type { ParticipantClickEvent } from '@livekit/components-core';

/** @public */
export interface FocusLayoutContainerProps extends React.HTMLAttributes<HTMLDivElement> {
/** @deprecated This property has no effect and will be removed in a future version. */
focusTrack?: TrackReference;
/** @deprecated This property has no effect and will be removed in a future version. */
participants?: Array<Participant>;
}

Expand All @@ -22,15 +20,11 @@ export function FocusLayoutContainer(props: FocusLayoutContainerProps) {

/** @public */
export interface FocusLayoutProps extends React.HTMLAttributes<HTMLElement> {
/** The track to display in the focus layout. */
trackRef?: TrackReferenceOrPlaceholder;
/** @deprecated This property will be removed in a future version use `trackRef` instead. */
track?: TrackReferenceOrPlaceholder;
onParticipantClick?: (evt: ParticipantClickEvent) => void;
}

/** @public */
export function FocusLayout({ trackRef, track, ...htmlProps }: FocusLayoutProps) {
const trackReference = trackRef ?? track;
return <ParticipantTile {...trackReference} {...htmlProps} />;
export function FocusLayout({ track, ...htmlProps }: FocusLayoutProps) {
return <ParticipantTile {...track} {...htmlProps} />;
}
28 changes: 5 additions & 23 deletions packages/react/src/components/participant/AudioTrack.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,16 @@
import type { Participant, Track, TrackPublication } from 'livekit-client';
import * as React from 'react';
import { useMediaTrackBySourceOrName } from '../../hooks/useMediaTrackBySourceOrName';
import type { TrackReference } from '@livekit/components-core';
import { log } from '@livekit/components-core';
import { useEnsureParticipant, useMaybeTrackContext } from '../../context';
import { useEnsureParticipant } from '../../context';
import { RemoteAudioTrack } from 'livekit-client';

/** @public */
export interface AudioTrackProps<T extends HTMLMediaElement = HTMLMediaElement>
extends React.HTMLAttributes<T> {
/** The track reference of the track from which the audio is to be rendered. */
trackRef?: TrackReference;
/** @deprecated This property will be removed in a future version use `trackRef` instead. */
source?: Track.Source;
/** @deprecated This property will be removed in a future version use `trackRef` instead. */
source: Track.Source;
name?: string;
/** @deprecated This property will be removed in a future version use `trackRef` instead. */
participant?: Participant;
/** @deprecated This property will be removed in a future version use `trackRef` instead. */
publication?: TrackPublication;
onSubscriptionStatusChanged?: (subscribed: boolean) => void;
/** by the default the range is between 0 and 1 */
Expand All @@ -31,15 +24,14 @@ export interface AudioTrackProps<T extends HTMLMediaElement = HTMLMediaElement>
* @example
* ```tsx
* <ParticipantTile>
* <AudioTrack trackRef={trackRef} />
* <AudioTrack source={Track.Source.Microphone} />
* </ParticipantTile>
* ```
*
* @see `ParticipantTile` component
* @public
*/
export function AudioTrack({
trackRef,
onSubscriptionStatusChanged,
volume,
source,
Expand All @@ -48,21 +40,11 @@ export function AudioTrack({
participant: p,
...props
}: AudioTrackProps) {
// TODO: Remove and refactor all variables with underscore in a future version after the deprecation period.
const maybeTrackRef = useMaybeTrackContext();
const _name = trackRef?.publication?.trackName ?? maybeTrackRef?.publication?.trackName ?? name;
const _source = trackRef?.source ?? maybeTrackRef?.source ?? source;
const _publication = trackRef?.publication ?? maybeTrackRef?.publication ?? publication;
const _participant = trackRef?.participant ?? maybeTrackRef?.participant ?? p;
if (_source === undefined) {
throw new Error('The AudioTrack component expects a trackRef or source property.');
}

const mediaEl = React.useRef<HTMLAudioElement>(null);
const participant = useEnsureParticipant(_participant);
const participant = useEnsureParticipant(p);

const { elementProps, isSubscribed, track } = useMediaTrackBySourceOrName(
{ source: _source, name: _name, participant, publication: _publication },
{ source, name, participant, publication },
{
element: mediaEl,
props,
Expand Down
22 changes: 13 additions & 9 deletions packages/react/src/components/participant/ParticipantTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import type { Participant, TrackPublication } from 'livekit-client';
import { Track } from 'livekit-client';
import type { ParticipantClickEvent, TrackReferenceOrPlaceholder } from '@livekit/components-core';
import { isTrackReference, isTrackReferencePinned } from '@livekit/components-core';
import { isTrackReferencePinned } from '@livekit/components-core';
import { ConnectionQualityIndicator } from './ConnectionQualityIndicator';
import { ParticipantName } from './ParticipantName';
import { TrackMutedIndicator } from './TrackMutedIndicator';
Expand Down Expand Up @@ -108,19 +108,23 @@ export function ParticipantTile({
<ParticipantContextIfNeeded participant={trackRef.participant}>
{children ?? (
<>
{isTrackReference(trackRef) &&
(trackRef.publication?.kind === 'video' ||
trackRef.source === Track.Source.Camera ||
trackRef.source === Track.Source.ScreenShare) ? (
{trackRef.publication?.kind === 'video' ||
trackRef.source === Track.Source.Camera ||
trackRef.source === Track.Source.ScreenShare ? (
<VideoTrack
trackRef={trackRef}
participant={trackRef.participant}
source={trackRef.source}
publication={trackRef.publication}
onSubscriptionStatusChanged={handleSubscribe}
manageSubscription={true}
/>
) : (
isTrackReference(trackRef) && (
<AudioTrack trackRef={trackRef} onSubscriptionStatusChanged={handleSubscribe} />
)
<AudioTrack
participant={trackRef.participant}
source={trackRef.source}
publication={trackRef.publication}
onSubscriptionStatusChanged={handleSubscribe}
/>
)}
<div className="lk-participant-placeholder">
<ParticipantPlaceholder />
Expand Down
42 changes: 12 additions & 30 deletions packages/react/src/components/participant/VideoTrack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,15 @@ import {
} from 'livekit-client';
import * as React from 'react';
import { useMediaTrackBySourceOrName } from '../../hooks/useMediaTrackBySourceOrName';
import type { ParticipantClickEvent, TrackReference } from '@livekit/components-core';
import { useEnsureParticipant, useMaybeTrackContext } from '../../context';
import type { ParticipantClickEvent } from '@livekit/components-core';
import { useEnsureParticipant } from '../../context';
import * as useHooks from 'usehooks-ts';

/** @public */
export interface VideoTrackProps extends React.HTMLAttributes<HTMLVideoElement> {
/** The track reference of the track to render. */
trackRef?: TrackReference;
/** @deprecated This property will be removed in a future version use `trackRef` instead. */
source?: Track.Source;
/** @deprecated This property will be removed in a future version use `trackRef` instead. */
source: Track.Source;
name?: string;
/** @deprecated This property will be removed in a future version use `trackRef` instead. */
participant?: Participant;
/** @deprecated This property will be removed in a future version use `trackRef` instead. */
publication?: TrackPublication;
onTrackClick?: (evt: ParticipantClickEvent) => void;
onSubscriptionStatusChanged?: (subscribed: boolean) => void;
Expand All @@ -33,7 +27,7 @@ export interface VideoTrackProps extends React.HTMLAttributes<HTMLVideoElement>
*
* @example
* ```tsx
* <VideoTrack trackRef={trackRef} />
* <VideoTrack source={Track.Source.Camera} />
* ```
* @see {@link @livekit/components-react#ParticipantTile | ParticipantTile}
* @public
Expand All @@ -42,26 +36,13 @@ export function VideoTrack({
onTrackClick,
onClick,
onSubscriptionStatusChanged,
trackRef,
name,
publication,
source,
participant: p,
manageSubscription,
...props
}: VideoTrackProps) {
// TODO: Remove and refactor all variables with underscore in a future version after the deprecation period.
const maybeTrackRef = useMaybeTrackContext();
const _name = trackRef?.publication?.trackName ?? maybeTrackRef?.publication?.trackName ?? name;
const _source = trackRef?.source ?? maybeTrackRef?.source ?? source;
const _publication = trackRef?.publication ?? maybeTrackRef?.publication ?? publication;
const _participant = trackRef?.participant ?? maybeTrackRef?.participant ?? p;
if (_source === undefined) {
throw new Error('VideoTrack: You must provide a trackRef or source property.');
}

const participant = useEnsureParticipant(_participant);

const mediaEl = React.useRef<HTMLVideoElement>(null);

const intersectionEntry = useHooks.useIntersectionObserver(mediaEl, {});
Expand All @@ -71,30 +52,31 @@ export function VideoTrack({
React.useEffect(() => {
if (
manageSubscription &&
_publication instanceof RemoteTrackPublication &&
publication instanceof RemoteTrackPublication &&
debouncedIntersectionEntry?.isIntersecting === false &&
intersectionEntry?.isIntersecting === false
) {
_publication.setSubscribed(false);
publication.setSubscribed(false);
}
}, [debouncedIntersectionEntry, _publication, manageSubscription]);
}, [debouncedIntersectionEntry, publication, manageSubscription]);

React.useEffect(() => {
if (
manageSubscription &&
_publication instanceof RemoteTrackPublication &&
publication instanceof RemoteTrackPublication &&
intersectionEntry?.isIntersecting === true
) {
_publication.setSubscribed(true);
publication.setSubscribed(true);
}
}, [intersectionEntry, _publication, manageSubscription]);
}, [intersectionEntry, publication, manageSubscription]);

const participant = useEnsureParticipant(p);
const {
elementProps,
publication: pub,
isSubscribed,
} = useMediaTrackBySourceOrName(
{ participant, name: _name, source: _source, publication: _publication },
{ participant, name, source, publication },
{
element: mediaEl,
props,
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/context/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,4 @@ export {
useEnsureTrackReference,
useMaybeTrackContext,
useTrackContext,
} from './track-reference-context';
} from './track-context';
2 changes: 1 addition & 1 deletion packages/react/src/context/participant-context.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { Participant } from 'livekit-client';
import * as React from 'react';
import { useMaybeTrackContext } from './track-reference-context';
import { useMaybeTrackContext } from './track-context';

/** @public */
export const ParticipantContext = React.createContext<Participant | undefined>(undefined);
Expand Down
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/react/src/prefabs/VideoConference.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export function VideoConference({
<CarouselLayout tracks={carouselTracks}>
<ParticipantTile />
</CarouselLayout>
{focusTrack && <FocusLayout trackRef={focusTrack} />}
{focusTrack && <FocusLayout track={focusTrack} />}
</FocusLayoutContainer>
</div>
)}
Expand Down

0 comments on commit c07bcd2

Please sign in to comment.