Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add button jump-to-currently-playing-video

Browse source
This commit is contained in:
Abdalrzag Eisa 2025-06-13 21:59:19 +03:00
parent 73823e9e07
commit 40871dc8f2
No known key found for this signature in database
GPG key ID: 4CD5A78B36195BC8
1 changed files with 32 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/routes/Player/SideDrawer/SideDrawer.tsx
View file

@ -1,11 +1,11 @@
// Copyright (C) 2017-2024 Smart code 203358507
import React, { useMemo, useCallback, useState, forwardRef, memo } from 'react';
import React, { useMemo, useCallback, useState, forwardRef, memo, useRef } from 'react';
import classNames from 'classnames';
import Icon from '@stremio/stremio-icons/react';
import { useServices } from 'stremio/services';
import { CONSTANTS } from 'stremio/common';
import { MetaPreview, Video } from 'stremio/components';
import { MetaPreview, Video, Button } from 'stremio/components';
import SeasonsBar from 'stremio/routes/MetaDetails/VideosList/SeasonsBar';
import styles from './SideDrawer.less';
@ -13,6 +13,7 @@ type Props = {
className?: string;
seriesInfo: SeriesInfo;
metaItem: MetaItem;
currentlyPlayingVideoID: string;
closeSideDrawer: () => void;
};
@ -75,6 +76,14 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
event.stopPropagation();
};
const currentlyPlayingVideoRef = useRef<HTMLDivElement>(null);
const jumpToCurrentlyPlaying = () => {
const { current } = currentlyPlayingVideoRef;
if (current) current.scrollIntoView({ behavior: 'smooth', block: 'center' });
};
return (
<div ref={ref} className={classNames(styles['side-drawer'], className)} onMouseDown={onMouseDown}>
<div className={styles['close-button']} onClick={closeSideDrawer}>
@ -102,25 +111,28 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
onSelect={seasonOnSelect}
/>
<div className={styles['videos']}>
<Button className={styles['jump-to-currently-playing-btn']} disabled={seriesInfo.season !== season} onClick={jumpToCurrentlyPlaying}><Icon className={styles['icon']} name={'discover-outline'} /></Button>
{videos.map((video, index) => (
<Video
key={index}
className={styles['video']}
id={video.id}
title={video.title}
thumbnail={video.thumbnail}
season={video.season}
episode={video.episode}
released={video.released}
upcoming={video.upcoming}
watched={video.watched}
seasonWatched={seasonWatched}
progress={video.progress}
deepLinks={video.deepLinks}
scheduled={video.scheduled}
onMarkVideoAsWatched={onMarkVideoAsWatched}
onMarkSeasonAsWatched={onMarkSeasonAsWatched}
/>
<div key={index} ref={video.id === props.currentlyPlayingVideoID ? currentlyPlayingVideoRef : null}>
<Video
className={styles['video']}
id={video.id}
title={video.title}
thumbnail={video.thumbnail}
season={video.season}
episode={video.episode}
released={video.released}
upcoming={video.upcoming}
watched={video.watched}
seasonWatched={seasonWatched}
progress={video.progress}
deepLinks={video.deepLinks}
scheduled={video.scheduled}
onMarkVideoAsWatched={onMarkVideoAsWatched}
onMarkSeasonAsWatched={onMarkSeasonAsWatched}
/>
</div>
))}
</div>
</div>