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

Merge pull request #1262 from Stremio/feat/improve-side-drawer-mobile-styles
Some checks are pending
Build / build (push) Waiting to run
Details

Browse source
This commit is contained in:
Timothy Z. 2026-05-07 21:45:29 +03:00 committed by GitHub
commit 0fe0fc8ca9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 23 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,6 +7,11 @@
action-buttons-container: action-buttons-container; action-buttons-container: action-buttons-container;
} }
:import('~stremio/components/MultiselectMenu/Dropdown/Dropdown.less') {
dropdown: dropdown;
open: open;
}
@padding: 1rem; @padding: 1rem;
.side-drawer { .side-drawer {
@ -69,6 +74,7 @@
.info { .info {
padding: @padding; padding: @padding;
min-height: 0;
overflow-y: auto; overflow-y: auto;
.side-drawer-meta-preview { .side-drawer-meta-preview {
@ -89,8 +95,11 @@
flex: 2; flex: 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0;
.videos { .videos {
flex: 1;
min-height: 0;
overflow-y: auto; overflow-y: auto;
} }
} }
@ -109,6 +118,14 @@
@media @phone-landscape { @media @phone-landscape {
.side-drawer { .side-drawer {
max-width: 50dvw; max-width: 50dvw;
.info {
max-height: 40dvh;
}
.dropdown.open {
max-height: calc(3rem * 4);
}
} }
} }

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

@ -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}