moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Alex Gleason 2023-01-06 11:46:14 -06:00
parent dbb745f38d
commit 8730a276c7
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/soapbox/features/audio/index.tsx
View File

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

4
app/soapbox/features/video/index.tsx
View File

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