diff --git a/src/components/timeline/Timeline.tsx b/src/components/timeline/Timeline.tsx index 4dffc98..3ad5ca9 100644 --- a/src/components/timeline/Timeline.tsx +++ b/src/components/timeline/Timeline.tsx @@ -9,7 +9,6 @@ import { TimeLineTrack } from '../../model/timeline/timeline'; import styles from './Timeline.module.scss'; import { useAppDispatch, useAppSelector } from 'store/hooks'; import { SettingsActions } from 'store/settings'; -import { EffectSelectors } from 'store/effect'; import { memo, useCallback, useMemo } from 'react'; import { store } from 'store'; import { isEqual } from 'lodash'; @@ -79,17 +78,11 @@ export const Timeline = memo((props: TimelineProps) => { }); const dispatch = useAppDispatch(); const queueIndex = useAppSelector(SettingSelectors.queueIndex); - const queuePosition = useAppSelector(SettingSelectors.queuePosition); const queueStart = useAppSelector(SettingSelectors.queueStart); - const queueIndexString = useMemo(() => queueIndex.toString(), [queueIndex]); - const maxDurationByIndex = useAppSelector(EffectSelectors.maxDurationByIndex); - - const duration = useMemo(() => { - return queuePosition === 'forward' - ? maxDurationByIndex[queueIndex] || 0 - : maxDurationByIndex[queueIndex + 1] || 0; - }, [maxDurationByIndex, queueIndex, queuePosition]); + const duration = useAppSelector( + SettingSelectors.currentPageNextQueueIndexMaxDuration, + ); const columnDefs: GridColumnDef[] = useMemo(() => { return [ diff --git a/src/store/settings/selectors.ts b/src/store/settings/selectors.ts index 4b516aa..947241b 100644 --- a/src/store/settings/selectors.ts +++ b/src/store/settings/selectors.ts @@ -1,5 +1,5 @@ import { RootState } from 'store'; -import { createSelector, EntityId } from '@reduxjs/toolkit'; +import { createSelector } from '@reduxjs/toolkit'; import { ObjectSelectors } from 'store/object/selectors'; import { QueueDocumentSettings } from './model'; import { EffectSelectors } from 'store/effect/selectors'; @@ -322,7 +322,7 @@ const currentPageQueueIndexEffectsByObjectId = createSelector( ); const currentPageQueueIndexMaxDuration = createSelector( - [currentPageQueueIndexEffects], + [currentPageQueueIndexEffects, queuePosition], (effects) => { return effects.reduce((acc, effect) => { if (acc < effect.duration + effect.delay) { @@ -333,6 +333,32 @@ const currentPageQueueIndexMaxDuration = createSelector( }, ); +const currentPageNextQueueIndexMaxDuration = createSelector( + [currentPageEffects, queueIndex, queuePosition], + (effects, queueIndex, queuePosition) => { + const effectsMap = effects.reduce>( + (result, effect) => { + if (!result[effect.index]) { + result[effect.index] = []; + } + result[effect.index].push(effect); + return result; + }, + {}, + ); + + const targetIndex = + queuePosition === 'forward' ? queueIndex : queueIndex + 1; + + return (effectsMap[targetIndex] || []).reduce((acc, effect) => { + if (acc < effect.duration + effect.delay) { + acc = effect.duration + effect.delay; + } + return acc; + }, 0); + }, +); + export const SettingSelectors = { pageId, queueIndex, @@ -366,5 +392,6 @@ export const SettingSelectors = { currentPageEffects, currentPageQueueIndexEffects, currentPageQueueIndexEffectsByObjectId, + currentPageNextQueueIndexMaxDuration, currentPageQueueIndexMaxDuration, };