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 branch 'development' into fix/list-container-overflow-mobile

Browse source
This commit is contained in:
Timothy Z. 2024-07-26 15:57:06 +03:00
commit 8cfb46f026
3 changed files with 208 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.github/workflows/build.yml vendored
View file

@ -3,10 +3,12 @@ name: Build
on:
push:
branches:
- development
tags-ignore:
- '**'
pull_request:
branches:
- '**'
- development
# Allow manual dispatch in GH
workflow_dispatch:

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

@ -4,15 +4,57 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button, Image, useProfile, platform, useToast } = require('stremio/common');
const { Button, Image, useProfile, platform, useToast, Popup, useBinaryState } = require('stremio/common');
const { useServices } = require('stremio/services');
const { useRouteFocused } = require('stremio-router');
const StreamPlaceholder = require('./StreamPlaceholder');
const { t } = require('i18next');
const styles = require('./styles');
const Stream = ({ className, videoId, videoReleased, addonName, name, description, thumbnail, progress, deepLinks, ...props }) => {
const profile = useProfile();
const toast = useToast();
const { core } = useServices();
const routeFocused = useRouteFocused();
const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
React.useEffect(() => {
if (!routeFocused) {
closeMenu();
}
}, [routeFocused]);
const popupLabelOnMouseUp = React.useCallback((event) => {
if (!event.nativeEvent.togglePopupPrevented) {
if (event.nativeEvent.ctrlKey || event.nativeEvent.button === 2) {
event.preventDefault();
toggleMenu();
}
}
}, []);
const popupLabelOnContextMenu = React.useCallback((event) => {
if (!event.nativeEvent.togglePopupPrevented && !event.nativeEvent.ctrlKey) {
event.preventDefault();
}
}, [toggleMenu]);
const popupLabelOnLongPress = React.useCallback((event) => {
if (event.nativeEvent.pointerType !== 'mouse' && !event.nativeEvent.togglePopupPrevented) {
toggleMenu();
}
}, [toggleMenu]);
const popupMenuOnPointerDown = React.useCallback((event) => {
event.nativeEvent.togglePopupPrevented = true;
}, []);
const popupMenuOnContextMenu = React.useCallback((event) => {
event.nativeEvent.togglePopupPrevented = true;
}, []);
const popupMenuOnClick = React.useCallback((event) => {
event.nativeEvent.togglePopupPrevented = true;
}, []);
const popupMenuOnKeyDown = React.useCallback((event) => {
event.nativeEvent.buttonClickPrevented = true;
}, []);
const href = React.useMemo(() => {
return deepLinks ?
@ -74,41 +116,117 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
}
}, [props.onClick, profile.settings, markVideoAsWatched]);
const streamLink = React.useMemo(() => {
return deepLinks?.externalPlayer?.download;
}, [deepLinks]);
const copyStreamLink = React.useCallback((event) => {
event.preventDefault();
if (streamLink && navigator?.clipboard) {
navigator.clipboard.writeText(deepLinks.externalPlayer.download)
.then(() => {
toast.show({
type: 'success',
title: t('PLAYER_COPY_STREAM_SUCCESS'),
timeout: 4000
});
})
.catch(() => {
toast.show({
type: 'error',
title: t('PLAYER_COPY_STREAM_ERROR'),
timeout: 4000,
});
});
} else {
toast.show({
type: 'error',
title: t('PLAYER_COPY_STREAM_ERROR'),
timeout: 4000,
});
}
closeMenu();
}, [streamLink]);
const renderThumbnailFallback = React.useCallback(() => (
<Icon className={styles['placeholder-icon']} name={'ic_broken_link'} />
), []);
const renderLabel = React.useMemo(
() =>
function renderLabel({ className, thumbnail, progress, addonName, name, description, children, ...props }) {
return (
<Button className={classnames(className, styles['stream-container'])} title={addonName} href={href} download={download} target={target} onClick={onClick} {...props}>
<div className={styles['info-container']}>
{
typeof thumbnail === 'string' && thumbnail.length > 0 ?
<div className={styles['thumbnail-container']} title={name || addonName}>
<Image
className={styles['thumbnail']}
src={thumbnail}
alt={' '}
renderFallback={renderThumbnailFallback}
/>
</div>
:
<div className={styles['addon-name-container']} title={name || addonName}>
<div className={styles['addon-name']}>{name || addonName}</div>
</div>
}
{
progress !== null && !isNaN(progress) && progress > 0 ?
<div className={styles['progress-bar-container']}>
<div className={styles['progress-bar']} style={{ width: `${progress}%` }} />
<div className={styles['progress-bar-background']} />
</div>
:
null
}
</div>
<div className={styles['description-container']} title={description}>{description}</div>
<Icon className={styles['icon']} name={'play'} />
{children}
</Button>
);
},
[onClick]
);
const renderMenu = React.useMemo(
() =>
function renderMenu() {
return (
<div className={styles['context-menu-content']} onPointerDown={popupMenuOnPointerDown} onContextMenu={popupMenuOnContextMenu} onClick={popupMenuOnClick} onKeyDown={popupMenuOnKeyDown}>
<Button className={styles['context-menu-option-container']} title={t('CTX_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}>
<div className={styles['context-menu-option-label']}>{t('CTX_COPY_STREAM_LINK')}</div>
</Button>}
</div>
);
}, [copyStreamLink, onClick]
);
return (
<Button className={classnames(className, styles['stream-container'])} title={addonName} href={href} download={download} target={target} onClick={onClick}>
<div className={styles['info-container']}>
{
typeof thumbnail === 'string' && thumbnail.length > 0 ?
<div className={styles['thumbnail-container']} title={name || addonName}>
<Image
className={styles['thumbnail']}
src={thumbnail}
alt={' '}
renderFallback={renderThumbnailFallback}
/>
</div>
:
<div className={styles['addon-name-container']} title={name || addonName}>
<div className={styles['addon-name']}>{name || addonName}</div>
</div>
}
{
progress !== null && !isNaN(progress) && progress > 0 ?
<div className={styles['progress-bar-container']}>
<div className={styles['progress-bar']} style={{ width: `${progress}%` }} />
<div className={styles['progress-bar-background']} />
</div>
:
null
}
</div>
<div className={styles['description-container']} title={description}>{description}</div>
<Icon className={styles['icon']} name={'play'} />
</Button>
<Popup
className={className}
thumbnail={thumbnail}
progress={progress}
addonName={addonName}
name={name}
description={description}
href={href}
{...props}
onMouseUp={popupLabelOnMouseUp}
onLongPress={popupLabelOnLongPress}
onContextMenu={popupLabelOnContextMenu}
open={menuOpen}
onCloseRequest={closeMenu}
renderLabel={renderLabel}
renderMenu={renderMenu}
/>
);
};

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

@ -3,6 +3,14 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/Popup/styles.less') {
context-menu-container: menu-container;
menu-direction-top-left: menu-direction-top-left;
menu-direction-bottom-left: menu-direction-bottom-left;
menu-direction-top-right: menu-direction-top-right;
menu-direction-bottom-right: menu-direction-bottom-right;
}
.stream-container {
display: flex;
flex-direction: row;
@ -103,6 +111,33 @@
color: var(--primary-foreground-color);
background-color: var(--secondary-accent-color);
}
.context-menu-container {
max-width: calc(90% - 1.5rem);
z-index: 2;
.context-menu-content {
--spatial-navigation-contain: contain;
.context-menu-option-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem 1.5rem;
&:hover,
&:focus {
background-color: var(--overlay-color);
}
.context-menu-option-label {
font-size: 1rem;
font-weight: 500;
color:var(--primary-foreground-color);
}
}
}
}
}
@media only screen and (max-width: @small) {
@ -125,6 +160,27 @@
.addon-name {
font-weight: 500;
}
}
.context-menu-container {
&.menu-direction-top-left,
&.menu-direction-bottom-left {
right: 1.5rem;
}
&.menu-direction-top-right,
&.menu-direction-bottom-right {
left: 1.5rem;
}
&.menu-direction-top-left,
&.menu-direction-top-right {
bottom: 90%;
}
&.menu-direction-bottom-left,
&.menu-direction-bottom-right {
top: 90%;
}
}
}
}