diff --git a/src/components/Transition/Transition.tsx b/src/components/Transition/Transition.tsx index e12b2a42b..ae84d80e5 100644 --- a/src/components/Transition/Transition.tsx +++ b/src/components/Transition/Transition.tsx @@ -13,6 +13,7 @@ const Transition = ({ children, when, name }: Props) => { const [state, setState] = useState('enter'); const [active, setActive] = useState(false); + const [transitionEnded, setTransitionEnded] = useState(false); const callbackRef = useCallback((element: HTMLElement | null) => { setElement(element); @@ -30,12 +31,14 @@ const Transition = ({ children, when, name }: Props) => { }, [name, state, active, children]); const onTransitionEnd = useCallback(() => { + setTransitionEnded(true); state === 'exit' && setMounted(false); }, [state]); useEffect(() => { setState(when ? 'enter' : 'exit'); when && setMounted(true); + setTransitionEnded(false); }, [when]); useEffect(() => { @@ -53,6 +56,7 @@ const Transition = ({ children, when, name }: Props) => { mounted && cloneElement(children, { ref: callbackRef, className, + transitionEnded }) ); }; diff --git a/src/components/Video/Video.js b/src/components/Video/Video.js index 78a1e64f6..217db1f2b 100644 --- a/src/components/Video/Video.js +++ b/src/components/Video/Video.js @@ -12,10 +12,10 @@ const useProfile = require('stremio/common/useProfile'); const VideoPlaceholder = require('./VideoPlaceholder'); const styles = require('./styles'); -const Video = ({ className, id, title, thumbnail, season, episode, released, upcoming, watched, progress, scheduled, seasonWatched, deepLinks, onMarkVideoAsWatched, onMarkSeasonAsWatched, ...props }) => { - const { t } = useTranslation(); +const Video = React.forwardRef(({ className, id, title, thumbnail, season, episode, released, upcoming, watched, progress, scheduled, seasonWatched, deepLinks, onMarkVideoAsWatched, onMarkSeasonAsWatched, ...props }, ref) => { const routeFocused = useRouteFocused(); const profile = useProfile(); + const { t } = useTranslation(); const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false); const popupLabelOnMouseUp = React.useCallback((event) => { if (!event.nativeEvent.togglePopupPrevented) { @@ -71,7 +71,7 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc const renderLabel = React.useMemo(() => function renderLabel({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, scheduled, children, ...props }) { const blurThumbnail = profile.settings.hideSpoilers && season && episode && !watched; return ( -