Audio/Video: fix initial size with useLayoutEffect for React 18

app/soapbox/features/audio/index.tsx

@@ -1,7 +1,7 @@
 import classNames from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
@@ -397,7 +397,7 @@ const Audio: React.FC<IAudio> = (props) => {
 
   const progress = Math.min((currentTime / getDuration()) * 100, 100);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (player.current) {
       _setDimensions();
     }

app/soapbox/features/video/index.tsx

@@ -1,7 +1,7 @@
 import classNames from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Blurhash from 'soapbox/components/blurhash';
@@ -159,7 +159,7 @@ const Video: React.FC<IVideo> = ({
     }
   };
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setDimensions();
   }, [player.current]);