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

Merge pull request #820 from Stremio/feat/stream-name-preview

Browse source 
MetaDetails: Add stream title and icons on context menu
This commit is contained in:
Tim 2025-02-04 19:11:02 +01:00 committed by GitHub
commit 0c0119423f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/routes/MetaDetails/StreamsList/Stream/Stream.js
View file

@ -181,12 +181,17 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
const renderMenu = React.useMemo(() => function renderMenu() {
return (
<div className={styles['context-menu-content']} onPointerDown={popupMenuOnPointerDown} onContextMenu={popupMenuOnContextMenu} onClick={popupMenuOnClick} onKeyDown={popupMenuOnKeyDown}>
<div className={styles['context-menu-title']}>
{description}
</div>
<Button className={styles['context-menu-option-container']} title={t('CTX_PLAY')}>
<Icon className={styles['menu-icon']} name={'play'} />
<div className={styles['context-menu-option-label']}>{t('CTX_PLAY')}</div>
</Button>
{
streamLink &&
<Button className={styles['context-menu-option-container']} title={t('CTX_COPY_STREAM_LINK')} onClick={copyStreamLink}>
<Icon className={styles['menu-icon']} name={'link'} />
<div className={styles['context-menu-option-label']}>{t('CTX_COPY_STREAM_LINK')}</div>
</Button>
}

22
src/routes/MetaDetails/StreamsList/Stream/styles.less
View file

@ -111,12 +111,29 @@
background-color: var(--secondary-accent-color);
}
.menu-icon {
flex: none;
width: 1.7rem;
height: 1.7rem;
margin-right: 1rem;
color: var(--color-placeholder);
}
.context-menu-container {
max-width: calc(90% - 1.5rem);
z-index: 2;
.context-menu-content {
--spatial-navigation-contain: contain;
.context-menu-title {
font-size: 0.9rem;
padding: 1rem 1.5rem;
font-weight: 100;
border-bottom: 1px solid var(--color-placeholder);
color: var(--primary-foreground-color);
white-space: break-spaces;
}
.context-menu-option-container {
display: flex;
@ -131,8 +148,9 @@
.context-menu-option-label {
font-size: 1rem;
font-weight: 500;
color:var(--primary-foreground-color);
font-weight: 300;
color: var(--primary-foreground-color);
text-transform: capitalize;
}
}
}