mirror of
https://github.com/suitenumerique/meet.git
synced 2026-08-28 11:16:58 +00:00
fixup! ✨(frontend) add ScreenShareZoomableVideo component for zoomable screen shares
This commit is contained in:
@@ -0,0 +1,26 @@
|
|||||||
|
import { VideoTrack } from '@livekit/components-react'
|
||||||
|
import { type TrackReference } from '@livekit/components-core'
|
||||||
|
import { memo } from 'react'
|
||||||
|
|
||||||
|
interface ScreenShareVideoTrackProps {
|
||||||
|
trackRef: TrackReference
|
||||||
|
onSubscriptionStatusChanged: (subscribed: boolean) => void
|
||||||
|
manageSubscription?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
// Zoom/pan updates the wrapper transform only; skip VideoTrack re-renders.
|
||||||
|
export const ScreenShareVideoTrack = memo(
|
||||||
|
({
|
||||||
|
trackRef,
|
||||||
|
onSubscriptionStatusChanged,
|
||||||
|
manageSubscription,
|
||||||
|
}: ScreenShareVideoTrackProps) => (
|
||||||
|
<VideoTrack
|
||||||
|
trackRef={trackRef}
|
||||||
|
onSubscriptionStatusChanged={onSubscriptionStatusChanged}
|
||||||
|
manageSubscription={manageSubscription}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
ScreenShareVideoTrack.displayName = 'ScreenShareVideoTrack'
|
||||||
@@ -1,11 +1,11 @@
|
|||||||
import { css } from '@/styled-system/css'
|
import { css } from '@/styled-system/css'
|
||||||
import { VideoTrack } from '@livekit/components-react'
|
|
||||||
import { type TrackReference } from '@livekit/components-core'
|
import { type TrackReference } from '@livekit/components-core'
|
||||||
import { useEffect, useRef } from 'react'
|
import { useEffect, useRef } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { useScreenShareZoom } from '../hooks/useScreenShareZoom'
|
import { useScreenShareZoom } from '../hooks/useScreenShareZoom'
|
||||||
import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
|
import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
|
||||||
import { ScreenShareZoomControls } from './ScreenShareZoomControls'
|
import { ScreenShareZoomControls } from './ScreenShareZoomControls'
|
||||||
|
import { ScreenShareVideoTrack } from './ScreenShareVideoTrack'
|
||||||
|
|
||||||
interface ScreenShareZoomableVideoProps {
|
interface ScreenShareZoomableVideoProps {
|
||||||
trackRef: TrackReference
|
trackRef: TrackReference
|
||||||
@@ -86,7 +86,7 @@ export const ScreenShareZoomableVideo = ({
|
|||||||
transition: zoom.isDragging ? 'none' : 'transform 150ms ease-out',
|
transition: zoom.isDragging ? 'none' : 'transform 150ms ease-out',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<VideoTrack
|
<ScreenShareVideoTrack
|
||||||
trackRef={trackRef}
|
trackRef={trackRef}
|
||||||
onSubscriptionStatusChanged={onSubscriptionStatusChanged}
|
onSubscriptionStatusChanged={onSubscriptionStatusChanged}
|
||||||
manageSubscription={manageSubscription}
|
manageSubscription={manageSubscription}
|
||||||
|
|||||||
Reference in New Issue
Block a user