fix(epg): disable scroll animation on first render

jwplayer · Oct 29, 2024 · 6bfd7d0 · 6bfd7d0
1 parent 4c86b42
commit 6bfd7d0
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/ui-react/src/components/Epg/Epg.module.scss b/packages/ui-react/src/components/Epg/Epg.module.scss
@@ -13,6 +13,11 @@ $control-z-index: $base-z-index + 2;
   padding: calc(variables.$base-spacing * 3) 0 calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3);
   background-color: var(--epg-background-color, var(--body-background-color));
 
+  // Planby ScrollContainer
+  &.firstFrame > div:nth-child(2) > div > div:nth-child(2) {
+    scroll-behavior: auto !important;
+  }
+
   // EpgContainer
   > div:nth-child(2) {
     padding: 0 !important;

diff --git a/packages/ui-react/src/components/Epg/Epg.tsx b/packages/ui-react/src/components/Epg/Epg.tsx
@@ -1,12 +1,14 @@
-import { Epg as EpgContainer, Layout } from 'planby';
 import React, { useMemo } from 'react';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
+import { Epg as EpgContainer, Layout } from 'planby';
 import { isBefore, subHours } from 'date-fns';
 import type { EpgChannel, EpgProgram } from '@jwp/ott-common/types/epg';
 import usePlanByEpg from '@jwp/ott-hooks-react/src/usePlanByEpg';
 import ChevronRight from '@jwp/ott-theme/assets/icons/chevron_right.svg?react';
 import ChevronLeft from '@jwp/ott-theme/assets/icons/chevron_left.svg?react';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
+import useFirstRender from '@jwp/ott-hooks-react/src/useFirstRender';
 
 import IconButton from '../IconButton/IconButton';
 import Button from '../Button/Button';
@@ -27,6 +29,7 @@ type Props = {
 };
 
 export default function Epg({ channels, selectedChannel, onChannelClick, onProgramClick, program }: Props) {
+  const firstRender = useFirstRender();
   const breakpoint = useBreakpoint();
   const { t } = useTranslation('common');
 
@@ -46,7 +49,7 @@ export default function Epg({ channels, selectedChannel, onChannelClick, onProgr
   const titlesDict = useMemo(() => Object.fromEntries(channels.map((channel) => [channel.id, channel.title])), [channels]);
 
   return (
-    <div className={styles.epg}>
+    <div className={classNames(styles.epg, firstRender && styles.firstFrame)}>
       <div className={styles.timelineControl}>
         <Button className={styles.timelineNowButton} variant="contained" label={t('now')} color="primary" onClick={onScrollToNow} size="small" />
         <IconButton className={styles.leftControl} aria-label={t('slide_left')} onClick={() => onScrollLeft()}>