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

fix(SideDrawer): add show more/less button for description

Browse source
This commit is contained in:
val_makkas 2025-06-12 22:07:50 +03:00
parent d75c9b1d99
commit 48d95d9d6f
2 changed files with 36 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/routes/Player/SideDrawer/SideDrawer.less
View file

@ -67,6 +67,24 @@
}
}
.show-more-btn {
background: none;
border: none;
color: #fff;
cursor: pointer;
font: inherit;
padding: 0.1rem 1.5rem 0.2rem 1.5rem;
margin: 0.1rem auto 0.2rem auto;
display: block;
text-align: center;
transition: text-decoration 0.2s;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.series-content {
flex: 2;
display: flex;

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

@ -19,6 +19,8 @@ type Props = {
const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, className, closeSideDrawer, ...props }: Props, ref) => {
const { core } = useServices();
const [season, setSeason] = useState<number>(seriesInfo?.season);
const [showFullDescription, setShowFullDescription] = useState(false);
const toggleDescription = () => setShowFullDescription((prev) => !prev);
const metaItem = useMemo(() => {
return seriesInfo ?
{
@ -42,6 +44,13 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
})
.sort((a, b) => (a || Number.MAX_SAFE_INTEGER) - (b || Number.MAX_SAFE_INTEGER));
}, [props.metaItem.videos]);
const description = useMemo(() => {
if (!metaItem.description) return '';
if (showFullDescription || metaItem.description.length <= 175) return metaItem.description;
const sliced = metaItem.description.slice(0, 175);
const lastSpace = sliced.lastIndexOf(' ');
return (lastSpace > 0 ? sliced.slice(0, lastSpace) : sliced) + '...';
}, [metaItem.description, showFullDescription])
const seasonOnSelect = useCallback((event: { value: string }) => {
setSeason(parseInt(event.value));
@ -89,10 +98,18 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
runtime={metaItem.runtime}
releaseInfo={metaItem.releaseInfo}
released={metaItem.released}
description={metaItem.description}
description={description}
links={metaItem.links}
/>
</div>
{metaItem.description && metaItem.description.length > 175 && (
<button
className={styles['show-more-btn']}
onClick={toggleDescription}
>
{showFullDescription ? 'Show less' : 'Show more'}
</button>
)}
{
seriesInfo ?
<div className={styles['series-content']}>