Как изменить размер встроенного компонента масштабирования на моей странице, чтобы ширина/высота его родительского элеме ⇐ Html

[Anonymous]

Я хочу изменить размер встроенного компонента масштабирования, чтобы он соответствовал моему div, но проблема в том, что ширина и высота контейнера равны 0, когда я передаю их функции масштабирования client.init. Как лучше всего изменить размер встроенного компонента масштабирования внутри элемента div, чтобы он занимал всю его ширину и высоту?
Вот весь мой код для справки:
import { DateMismatch } from './DateMismatch';
import { CompletedWebinar } from './CompletedWebinar';
import { StartingSoon } from './StartingSoon';
import { CourseDetailsBar } from '@/components/dashboard/features/courses/CourseDetailsBar';
import { Course, WebinarStatus } from '@/types';
import { useGetZoomMeetingDetailsQuery } from '@/store/api/zoomApi';
import { useFirebaseAuth } from '@/contexts/FirebaseAuthContext';
import React, { useEffect, useRef, useState } from 'react';
import { useWebinarStatus } from '@/utils/hooks';

interface LiveCoursePlayerProps {
course: Course;
}

export const LiveCoursePlayer = ({ course }: LiveCoursePlayerProps) => {
const { user } = useFirebaseAuth();

const [isJoining, setIsJoining] = useState(false);
const [error, setError] = useState(null);
const [webinarStatus, setWebinarStatus] = useState(WebinarStatus.LOADING);
const [isMeetingStarted, setIsMeetingStarted] = useState(false);

// Keep client instance persistent
const zoomClientRef = useRef(null);

// Checks status every 60 seconds (if complete, in progress, etc.)
useWebinarStatus({ startTime: course.liveCourseDate, setWebinarStatus });

// Initialize Zoom Embedded SDK client on mount (client-side only)
useEffect(() => {
// Avoid SSR execution where window/self are undefined
if (typeof window === 'undefined') return;

let mounted = true;

// Dynamically import Zoom SDK only in browser (next renders in the server side)
import('@zoom/meetingsdk/embedded')
.then((ZoomMtgEmbedded) => {
if (!mounted) {
return;
}
zoomClientRef.current = ZoomMtgEmbedded.default.createClient();
})
.catch((err) => {
console.error('Failed to load Zoom Embedded SDK:', err);
setError('Failed to load webinar tools. Please refresh and try again.');
});

// Clean up function
return () => {
mounted = false;
if (isMeetingStarted && zoomClientRef.current) {
try {
zoomClientRef.current.leaveMeeting();
} catch (err) {
console.warn('Error leaving meeting:', err);
}
}
};
}, [isMeetingStarted]);

const { data: zoomMeetingDetails, isLoading } = useGetZoomMeetingDetailsQuery(
{ courseId: course.id },
{
skip: !user,
refetchOnMountOrArgChange: true
}
);

useEffect(() => {
console.log('isMeetingStarted', isMeetingStarted);
}, [isMeetingStarted]);

useEffect(() => {
console.log('isJoining', isJoining);
}, [isJoining]);

const startMeeting = async () => {
if (!zoomMeetingDetails) {
return null;
}
try {
const client = zoomClientRef.current;
if (!client) {
throw new Error('Zoom client not initialized yet.');
}

const meetingSDKElement = document.getElementById('meetingSDKElement');
if (!meetingSDKElement) {
throw new Error('Meeting SDK element not found.');
}

// Get the container dimensions
const containerWidth = meetingSDKElement.offsetWidth;
const containerHeight = meetingSDKElement.offsetHeight;

console.log('containerWidth', containerWidth);
console.log('containerHeight', containerHeight);

// Initialize client
await client.init({
zoomAppRoot: meetingSDKElement,
language: 'en-US',
patchJsMedia: true,
leaveOnPageUnload: true,
customize: {
video: {
isResizable: true,
viewSizes: {
default: {
width: containerWidth,
height: containerHeight
},
ribbon: {
width: 300,
height: 700
}
}
}
}
});

client.on('connection-change', (payload: any) => {
console.log('[Zoom SDK] connection-change', payload);
if (payload.state === 'Closed' || payload.state === 'Fail') {
setError('Error starting Zoom');
setIsMeetingStarted(false);
setIsJoining(false);
}
});

// Join the meeting
await client.join({
signature: zoomMeetingDetails.signature,
sdkKey: zoomMeetingDetails.appKey,
meetingNumber: zoomMeetingDetails.meetingNumber,
password: '', // Add password if required
userName: user?.displayName || user?.email || 'Guest',
userEmail: user?.email || '',
tk: '', // Registrant token if required
zak: '' // Host zak token if host
});

console.log('Joined meeting successfully');
setIsMeetingStarted(true);
setIsJoining(false);
} catch (error) {
console.error('Error joining meeting', error);
setError('Failed to join the webinar. Please try again.');
setIsJoining(false);
}
};

const handleJoinWebinar = async () => {
if (!zoomMeetingDetails) {
setError('Webinar details not available');
return;
}
try {
setIsJoining(true);
setError(null);
await startMeeting();
} catch (err) {
console.error('Error joining webinar:', err);
setError(err instanceof Error ? err.message : 'Failed to join webinar');
setIsJoining(false);
}
};

// Prevent SSR rendering issues
if (typeof window === 'undefined') return null;

return (







{(!isJoining && !isMeetingStarted) && (

)}

{/**/}
{/**/}

{/*{canRenderEmbedded ? (*/}
{/* */}
{/*) : (*/}
{/* */}
{/* {(webinarStatus === WebinarStatus.IN_PROGRESS || webinarStatus === WebinarStatus.STARTING_SOON) && (*/}
{/* */}
{/* )}*/}
{/* {webinarStatus === WebinarStatus.NOT_STARTED && (*/}
{/* */}
{/* )}*/}
{/* {webinarStatus === WebinarStatus.DATE_MISMATCH && (*/}
{/* */}
{/* )}*/}
{/* {webinarStatus === WebinarStatus.COMPLETED && (*/}
{/* */}
{/* )}*/}
{/* */}
{/*)}*/}


{course?.title}







);
};


Подробнее здесь: https://stackoverflow.com/questions/797 ... 00-widht-h