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

Merge pull request #1059 from Stremio/feat/details-selected-video-styles
Some checks are pending
Build / build (push) Waiting to run
Details

Browse source 
Details: improve selected video logic
This commit is contained in:
Timothy Z. 2025-11-27 16:26:00 +02:00 committed by GitHub
commit 0c833330a1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/Video/Video.js
View file

@ -73,15 +73,19 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc
const blurThumbnail = profile.settings.hideSpoilers && season && episode && !watched; const blurThumbnail = profile.settings.hideSpoilers && season && episode && !watched;
React.useEffect(() => { React.useEffect(() => {
selected && !watched && ref.current?.scrollIntoView({ if (selected && ref.current) {
behavior: 'smooth', if ((progress && watched) || !watched) {
block: 'nearest', ref.current.scrollIntoView({
inline: 'start' behavior: 'smooth',
}); block: 'nearest',
inline: 'start'
});
}
}
}, [selected]); }, [selected]);
return ( return (
<Button {...props} ref={ref} className={classnames(className, styles['video-container'])} title={title}> <Button {...props} ref={ref} className={classnames(className, styles['video-container'], { [styles['selected']]: selected })} title={title}>
{ {
typeof thumbnail === 'string' && thumbnail.length > 0 ? typeof thumbnail === 'string' && thumbnail.length > 0 ?
<div className={styles['thumbnail-container']}> <div className={styles['thumbnail-container']}>

18
src/components/Video/styles.less
View file

@ -20,6 +20,10 @@
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
@supports (scroll-margin: 1.25rem) {
scroll-margin: 1.25rem;
}
&:hover, &:hover,
&:focus, &:focus,
&:global(.active) { &:global(.active) {
@ -172,6 +176,20 @@
} }
} }
&.selected {
animation: border 3s ease-in-out forwards;
}
@keyframes border {
0% {
border: 0.15rem solid var(--primary-accent-color);
}
100% {
border: 0.15rem solid transparent;
}
}
.context-menu-container { .context-menu-container {
max-width: calc(90% - 1.5rem); max-width: calc(90% - 1.5rem);
z-index: 2; z-index: 2;