mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-05-14 11:10:52 +00:00
fix: scroll to start of the list when selecting
This commit is contained in:
parent
ad6d30c224
commit
dabbd23cf5
1 changed files with 6 additions and 4 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
// Copyright (C) 2017-2024 Smart code 203358507
|
// Copyright (C) 2017-2024 Smart code 203358507
|
||||||
|
|
||||||
import React, { useMemo, useCallback, useState, forwardRef, memo } from 'react';
|
import React, { useMemo, useCallback, useState, useRef, forwardRef, memo } from 'react';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import Icon from '@stremio/stremio-icons/react';
|
import Icon from '@stremio/stremio-icons/react';
|
||||||
import { useCore } from 'stremio/core';
|
import { useCore } from 'stremio/core';
|
||||||
|
|
@ -22,6 +22,7 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
|
||||||
const core = useCore();
|
const core = useCore();
|
||||||
const [season, setSeason] = useState<number>(seriesInfo?.season);
|
const [season, setSeason] = useState<number>(seriesInfo?.season);
|
||||||
const [selectedVideoId, setSelectedVideoId] = useState<string | null>(null);
|
const [selectedVideoId, setSelectedVideoId] = useState<string | null>(null);
|
||||||
|
const videosRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
const metaItem = useMemo(() => {
|
const metaItem = useMemo(() => {
|
||||||
return seriesInfo ?
|
return seriesInfo ?
|
||||||
|
|
@ -47,8 +48,9 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
|
||||||
.sort((a, b) => (a || Number.MAX_SAFE_INTEGER) - (b || Number.MAX_SAFE_INTEGER));
|
.sort((a, b) => (a || Number.MAX_SAFE_INTEGER) - (b || Number.MAX_SAFE_INTEGER));
|
||||||
}, [props.metaItem.videos]);
|
}, [props.metaItem.videos]);
|
||||||
|
|
||||||
const seasonOnSelect = useCallback((event: { value: string }) => {
|
const seasonOnSelect = useCallback((event: { value: string | number }) => {
|
||||||
setSeason(parseInt(event.value));
|
setSeason(parseInt(String(event.value), 10));
|
||||||
|
videosRef.current?.scrollTo({ top: 0, left: 0 });
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const seasonWatched = React.useMemo(() => {
|
const seasonWatched = React.useMemo(() => {
|
||||||
|
|
@ -109,7 +111,7 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
|
||||||
seasons={seasons}
|
seasons={seasons}
|
||||||
onSelect={seasonOnSelect}
|
onSelect={seasonOnSelect}
|
||||||
/>
|
/>
|
||||||
<div className={styles['videos']}>
|
<div ref={videosRef} className={styles['videos']}>
|
||||||
{videos.map((video, index) => (
|
{videos.map((video, index) => (
|
||||||
<Video
|
<Video
|
||||||
key={index}
|
key={index}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue