Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-07 12:40:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge branch 'development' into fix/discover-page-remove-duplicated-filters

Browse source
This commit is contained in:
Botzy 2025-02-19 17:30:19 +02:00
commit 1b17bc81cb
7 changed files with 67 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App/styles.less
View file

@ -63,6 +63,8 @@
--overlay-color: rgba(255, 255, 255, 0.05);
--modal-background-color: rgba(15, 13, 32, 1);
--outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37);
--warning-accent-color: rgba(255, 165, 0, 1);
--danger-accent-color: rgba(220, 38, 38, 1);
--border-radius: 0.75rem;
--top-overlay-size: @top-overlay-size;
--bottom-overlay-size: @bottom-overlay-size;

10
src/components/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
View file

@ -12,15 +12,23 @@ const useProfile = require('stremio/common/useProfile');
const usePWA = require('stremio/common/usePWA');
const useTorrent = require('stremio/common/useTorrent');
const { withCoreSuspender } = require('stremio/common/CoreSuspender');
const useStreamingServer = require('stremio/common/useStreamingServer');
const styles = require('./styles');
const NavMenuContent = ({ onClick }) => {
const { t } = useTranslation();
const { core } = useServices();
const profile = useProfile();
const streamingServer = useStreamingServer();
const { createTorrentFromMagnet } = useTorrent();
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
const [isIOSPWA, isAndroidPWA] = usePWA();
const streamingServerWarningDismissed = React.useMemo(() => {
return streamingServer.settings !== null && streamingServer.settings.type === 'Ready' || (
!isNaN(profile.settings.streamingServerWarningDismissed.getTime()) &&
profile.settings.streamingServerWarningDismissed.getTime() > Date.now()
);
}, [profile.settings, streamingServer.settings]);
const logoutButtonOnClick = React.useCallback(() => {
core.transport.dispatch({
action: 'Ctx',
@ -38,7 +46,7 @@ const NavMenuContent = ({ onClick }) => {
}
}, []);
return (
<div className={classnames(styles['nav-menu-container'], 'animation-fade-in')} onClick={onClick}>
<div className={classnames(styles['nav-menu-container'], 'animation-fade-in', { [styles['with-warning']]: !streamingServerWarningDismissed } )} onClick={onClick}>
<div className={styles['user-info-container']}>
<div
className={styles['avatar-container']}

15
src/components/NavBar/HorizontalNavBar/NavMenu/styles.less
View file

@ -7,6 +7,9 @@
popup-menu-container: menu-container;
}
@mobile-height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size));
@height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size));
.nav-menu-popup-label {
.popup-menu-container {
margin-top: 1rem;
@ -14,11 +17,15 @@
}
.nav-menu-container {
width: 22rem;
max-height: calc(100vh - var(--horizontal-nav-bar-size) - 1rem);
max-height: calc(@height - 1rem);
overflow-y: auto;
border-radius: var(--border-radius);
background-color: var(--modal-background-color);
&.with-warning {
max-height: calc(@height - 6rem);
}
.user-info-container {
display: flex;
padding: 1.5rem 1rem;
@ -108,6 +115,10 @@
@media only screen and (max-width: @minimum) {
.nav-menu-container {
max-height: calc(100vh - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size) - 1rem);
max-height: calc(@mobile-height - 1rem);
&.with-warning {
max-height: calc(@mobile-height - 8.5rem);
}
}
}

12
src/components/Slider/Slider.js
View file

@ -8,7 +8,7 @@ const useAnimationFrame = require('stremio/common/useAnimationFrame');
const useLiveRef = require('stremio/common/useLiveRef');
const styles = require('./styles');
const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabled, onSlide, onComplete }) => {
const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabled, onSlide, onComplete, audioBoost }) => {
const minimumValueRef = useLiveRef(minimumValue !== null && !isNaN(minimumValue) ? minimumValue : 0);
const maximumValueRef = useLiveRef(maximumValue !== null && !isNaN(maximumValue) ? maximumValue : 100);
const valueRef = useLiveRef(value !== null && !isNaN(value) ? Math.min(maximumValueRef.current, Math.max(minimumValueRef.current, value)) : 0);
@ -100,13 +100,16 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
return (
<div ref={sliderContainerRef} className={classnames(className, styles['slider-container'], { 'disabled': disabled })} onMouseDown={onMouseDown}>
<div className={styles['layer']}>
<div className={styles['track']} />
<div className={classnames(styles['track'], { [styles['audio-boost']]: audioBoost })} />
</div>
<div className={styles['layer']}>
<div className={styles['track-before']} style={{ width: `calc(100% * ${bufferedPosition})` }} />
</div>
<div className={styles['layer']}>
<div className={styles['track-after']} style={{ width: `calc(100% * ${thumbPosition})` }} />
<div
className={classnames(styles['track-after'], { [styles['audio-boost']]: audioBoost })}
style={{ '--mask-width': `calc(${thumbPosition} * 100%)` }}
/>
</div>
<div className={styles['layer']}>
<div className={styles['thumb']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }} />
@ -123,7 +126,8 @@ Slider.propTypes = {
maximumValue: PropTypes.number,
disabled: PropTypes.bool,
onSlide: PropTypes.func,
onComplete: PropTypes.func
onComplete: PropTypes.func,
audioBoost: PropTypes.bool
};
module.exports = Slider;

25
src/components/Slider/styles.less
View file

@ -2,6 +2,12 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@audio-boost-background: linear-gradient(to right,
var(--primary-foreground-color) 0%,
var(--primary-foreground-color) 50%,
var(--warning-accent-color) 75%,
var(--danger-accent-color) 100%) !important;
html.active-slider-within {
cursor: grabbing;
@ -37,10 +43,15 @@ html.active-slider-within {
.track {
z-index: 0;
flex: 1;
width: 100%;
height: var(--track-size);
border-radius: var(--track-size);
background-color: var(--primary-accent-color);
opacity: 0.2;
background-color: var(--overlay-color);
&.audio-boost {
opacity: 0.3;
background: @audio-boost-background;
}
}
.track-before {
@ -54,9 +65,19 @@ html.active-slider-within {
.track-after {
z-index: 2;
flex: none;
width: 100%;
height: var(--track-size);
border-radius: var(--track-size);
background-color: var(--primary-foreground-color);
mask-image: linear-gradient(to right,
black 0%,
black var(--mask-width),
transparent var(--mask-width)
);
&.audio-boost {
background: @audio-boost-background;
}
}
.thumb {

6
src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js
View file

@ -5,13 +5,16 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
const { useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
const { Slider } = require('stremio/components');
const styles = require('./styles');
const VolumeSlider = ({ className, volume, onVolumeChangeRequested, muted }) => {
const { shell } = useServices();
const disabled = volume === null || isNaN(volume);
const routeFocused = useRouteFocused();
const [slidingVolume, setSlidingVolume] = React.useState(null);
const maxVolume = shell.active ? 200: 100;
const resetVolumeDebounced = React.useCallback(debounce(() => {
setSlidingVolume(null);
}, 100), []);
@ -52,10 +55,11 @@ const VolumeSlider = ({ className, volume, onVolumeChangeRequested, muted }) =>
100
}
minimumValue={0}
maximumValue={100}
maximumValue={maxVolume}
disabled={disabled}
onSlide={onSlide}
onComplete={onComplete}
audioBoost={!!shell.active}
/>
);
};

14
src/routes/Player/Player.js
View file

@ -506,14 +506,14 @@ const Player = ({ urlParams, queryParams }) => {
}
case 'ArrowUp': {
if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
onVolumeChangeRequested(video.state.volume + 5);
onVolumeChangeRequested(Math.min(video.state.volume + 5, 200));
}
break;
}
case 'ArrowDown': {
if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) {
onVolumeChangeRequested(video.state.volume - 5);
onVolumeChangeRequested(Math.max(video.state.volume - 5, 0));
}
break;
@ -571,13 +571,13 @@ const Player = ({ urlParams, queryParams }) => {
}
};
const onWheel = ({ deltaY }) => {
if (menusOpen || video.state.volume === null) return;
if (deltaY > 0) {
if (!menusOpen && video.state.volume !== null) {
onVolumeChangeRequested(video.state.volume - 5);
}
onVolumeChangeRequested(Math.max(video.state.volume - 5, 0));
} else {
if (!menusOpen && video.state.volume !== null) {
onVolumeChangeRequested(video.state.volume + 5);
if (video.state.volume < 100) {
onVolumeChangeRequested(Math.min(video.state.volume + 5, 100));
}
}
};