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

episode streams panel title missing resolved

Browse source
This commit is contained in:
kKaskak 2023-10-02 11:43:19 +03:00
parent d567c3b914
commit 62f03fa7a4
3 changed files with 82 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/routes/MetaDetails/StreamsList/StreamsList.js
View file

@ -19,6 +19,9 @@ const StreamsList = ({ className, video, ...props }) => {
const onAddonSelected = React.useCallback((event) => {
setSelectedAddon(event.value);
}, []);
const backButtonOnClick = React.useCallback(() => {
window.history.back();
}, []);
const streamsByAddon = React.useMemo(() => {
return props.streams
.filter((streams) => streams.content.type === 'Ready')
@ -92,15 +95,32 @@ const StreamsList = ({ className, video, ...props }) => {
</div>
:
<React.Fragment>
{
Object.keys(streamsByAddon).length > 1 ?
<Multiselect
{...selectableOptions}
className={styles['select-input-container']}
/>
<div className={styles['select-choices-wrapper']}>
{ video ? (
<React.Fragment>
<Button className={classnames(styles['button-container'], styles['back-button-container'])} tabIndex={-1} onClick={backButtonOnClick}>
<Icon className={styles['icon']} name={'chevron-back'} />
</Button>
<div className={styles['episode-title']}>
{`S${video?.season}E${video?.episode} ${(video?.title)?.toLowerCase()?.replace(/\b\w/g, (char) => char.toUpperCase())}
`}
</div>
</React.Fragment>
)
:
null
}
}
{
Object.keys(streamsByAddon).length > 1 ? (
<Multiselect
{...selectableOptions}
className={styles['select-input-container']}
/>
)
:
null
}
</div>
<div className={styles['streams-container']}>
{filteredStreams.map((stream, index) => (
<Stream

68
src/routes/MetaDetails/StreamsList/styles.less
View file

@ -40,27 +40,67 @@
color: var(--primary-foreground-color);
}
}
.select-input-container {
flex: 0 0 auto;
.select-choices-wrapper {
display: flex;
align-items: center;
z-index: 1;
margin: 1em 1em 0 1em;
background: none;
gap: 0 0.5em;
overflow: visible;
&:hover, &:focus, &:global(.active) {
background-color: var(--overlay-color);
.back-button-container {
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.5em;
padding: 1em;
max-height: 3em;
.icon {
width: 1.5em;
height: 1.5em;
color: var(--primary-foreground-color);
opacity: 0.6;
}
&:hover, &:global(.active) {
background-color: var(--overlay-color);
opacity: 1;
.icon {
color: var(--primary-foreground-color);
opacity: 0.8;
}
}
}
& >.multiselect-label {
.episode-title {
min-width: 45%;
color: var(--primary-foreground-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& >.multiselect-icon {
color: var(--primary-foreground-color);
}
.multiselect-menu-container {
max-height: calc(3.2rem * 7);
overflow: auto;
.select-input-container {
min-width: 40%;
flex: 0 0 auto;
flex-grow: 1;
background: none;
&:hover, &:focus, &:global(.active) {
background-color: var(--overlay-color);
}
& >.multiselect-label {
color: var(--primary-foreground-color);
}
& >.multiselect-icon {
color: var(--primary-foreground-color);
}
.multiselect-menu-container {
max-height: calc(3.2rem * 7);
overflow: auto;
}
}
}

2
src/routes/MetaDetails/VideosList/Video/Video.js
View file

@ -92,7 +92,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
<div className={styles['info-container']}>
<div className={styles['title-container']}>
{episode !== null && !isNaN(episode) ? `${episode}. ` : null}
{typeof title === 'string' && title.length > 0 ? title : id}
{typeof title === 'string' && title.length > 0 ? title.toLowerCase().replace(/\b\w/g, (char) => char.toUpperCase()) : id}
</div>
<div className={styles['flex-row-container']}>
{