Skip to content

Instantly share code, notes, and snippets.

@Tushkiz

Tushkiz/App.tsx

Last active January 17, 2024 11:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Tushkiz/057b3fa90a512b5a0a46e6a8a6ae08db to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Tushkiz/057b3fa90a512b5a0a46e6a8a6ae08db to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Tushkiz revised this gist Jan 17, 2024. 1 changed file with 1 addition and 9 deletions.
    10 changes: 1 addition & 9 deletions App.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -92,15 +92,7 @@ function App() {

    <DyteMicToggle meeting={meeting} />
    <DyteCameraToggle meeting={meeting} />
    <DyteControlbarButton
    icon={
    meeting?.participants.pip.isActive
    ? defaultIconPack.pip_on
    : defaultIconPack.pip_off
    }
    label="PIP"
    onClick={togglePip}
    />
    <DyteControlbarButton icon={defaultIconPack.pip_on} label="PIP" onClick={togglePip} />
    </div>
    );
    }
  2. Tushkiz revised this gist Jan 17, 2024. No changes.
  3. Tushkiz revised this gist Jan 17, 2024. No changes.
  4. Tushkiz created this gist Jan 17, 2024.
    108 changes: 108 additions & 0 deletions App.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,108 @@
    import { useEffect } from 'react';
    import { useDyteClient } from '@dytesdk/react-web-core';
    import {
    DyteCameraToggle,
    DyteControlbarButton,
    DyteMicToggle,
    DyteParticipantTile,
    defaultIconPack,
    } from '@dytesdk/react-ui-kit';

    function App() {
    const [meeting, initMeeting] = useDyteClient();
    const url = new URL(window.location.href);
    const queryToken = url.searchParams.get('authToken');

    if (!queryToken) {
    alert('Please add authToken to url query params');
    }

    const onParticipantTileLoad = (
    event: CustomEvent<{ participant: any; videoElement: HTMLVideoElement }>,
    ) => {
    if (!meeting) return;
    const { participant, videoElement } = event.detail;
    if (!participant || !videoElement) return;

    meeting.participants.pip?.addSource(
    participant.id,
    videoElement,
    participant.videoEnabled,
    false,
    participant.name,
    );
    if (participant.videoEnabled) {
    meeting.participants.pip?.enableSource(participant.id);
    }
    };
    const onParticipantTileUnload = (event: CustomEvent<any>) => {
    if (!meeting) return;

    const participant = event.detail;
    meeting.participants.pip?.removeSource(participant.id);
    };

    const togglePip = () => {
    if (meeting?.participants.pip.isActive) {
    meeting?.participants.pip.disable();
    } else {
    meeting?.participants.pip.enable();
    }
    };

    useEffect(() => {
    const init = async () => {
    if (!queryToken) return;

    await initMeeting({
    authToken: queryToken,
    defaults: {
    video: false,
    audio: false,
    },
    }).then(async (meet) => {
    if (!meet) return;

    await meet.join();
    const pipSupported =
    meet.participants.pip?.isSupported() && meet.self.config?.pipMode;
    if (pipSupported) {
    meet.participants.pip.init();
    }
    });
    };
    init();
    }, [initMeeting, queryToken]);

    if (!meeting) {
    return 'Loading...';
    }

    return (
    <div>
    {[meeting.self, ...meeting.participants.joined.toArray()].map((p) => (
    <DyteParticipantTile
    key={p.id}
    participant={p}
    meeting={meeting}
    onTileLoad={onParticipantTileLoad}
    onTileUnload={onParticipantTileUnload}
    />
    ))}

    <DyteMicToggle meeting={meeting} />
    <DyteCameraToggle meeting={meeting} />
    <DyteControlbarButton
    icon={
    meeting?.participants.pip.isActive
    ? defaultIconPack.pip_on
    : defaultIconPack.pip_off
    }
    label="PIP"
    onClick={togglePip}
    />
    </div>
    );
    }

    export default App;