diff --git a/apps/client/src/views/countdown/Countdown.scss b/apps/client/src/views/countdown/Countdown.scss index 099dc8816..5bf68b38d 100644 --- a/apps/client/src/views/countdown/Countdown.scss +++ b/apps/client/src/views/countdown/Countdown.scss @@ -57,7 +57,6 @@ $item-height: 3.5rem; bottom: 1.5rem; bottom: calc(1.5rem + env(safe-area-inset-bottom)); right: $view-inline-padding; - left: 0; display: flex; justify-content: end; diff --git a/apps/client/src/views/countdown/CountdownSubscriptions.tsx b/apps/client/src/views/countdown/CountdownSubscriptions.tsx index 35ae1948d..54d5e07ad 100644 --- a/apps/client/src/views/countdown/CountdownSubscriptions.tsx +++ b/apps/client/src/views/countdown/CountdownSubscriptions.tsx @@ -1,11 +1,14 @@ +import { useEffect, useRef, useState } from 'react'; import { IoPencil } from 'react-icons/io5'; import { EntryId, OntimeEvent, Playback } from 'ontime-types'; import Button from '../../common/components/buttons/Button'; import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity'; +import useFollowComponent from '../../common/hooks/useFollowComponent'; import { useCurrentDay, useRuntimeOffset } from '../../common/hooks/useSocket'; import { ViewExtendedTimer } from '../../common/models/TimeManager.type'; import { cx } from '../../common/utils/styleUtils'; +import FollowButton from '../../features/operator/follow-button/FollowButton'; import ClockTime from '../../features/viewers/common/clock-time/ClockTime'; import { getPropertyValue } from '../../features/viewers/common/viewUtils'; import { useTranslation } from '../../translation/TranslationProvider'; @@ -25,10 +28,35 @@ interface CountdownSubscriptionsProps { export default function CountdownSubscriptions(props: CountdownSubscriptionsProps) { const { time, events, selectedId, goToEditMode } = props; - const { secondarySource, subscriptions, showProjected } = useCountdownOptions(); + const { followSelected, secondarySource, subscriptions, showProjected } = useCountdownOptions(); const showFab = useFadeOutOnInactivity(true); - // TODO: add follow selected + const [lockAutoScroll, setLockAutoScroll] = useState(false); + const selectedRef = useRef(null); + const scrollRef = useRef(null); + const scrollToComponent = useFollowComponent({ + followRef: selectedRef, + scrollRef, + doFollow: !lockAutoScroll, + topOffset: 0, + }); + + // reset scroll if nothing is selected + useEffect(() => { + if (!selectedId) { + if (!lockAutoScroll) { + scrollRef.current?.scrollTo(0, 0); + } + } + }, [selectedId, lockAutoScroll, scrollRef]); + + // scroll to component if user clicks the Follow button + const handleOffset = () => { + if (selectedId) { + scrollToComponent(); + } + setLockAutoScroll(false); + }; // gather data const subscribedEvents = getOrderedSubscriptions(subscriptions, events); @@ -64,6 +92,7 @@ export default function CountdownSubscriptions(props: CountdownSubscriptionsProp Edit + ); }