diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 9887156d2..713796b5a 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -10,6 +10,7 @@ const { useRouteFocused } = require('stremio-router'); const { useServices } = require('stremio/services'); const { HorizontalNavBar, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common'); const BufferingLoader = require('./BufferingLoader'); +const VolumeChangeIndicator = require('./VolumeChangeIndicator'); const Error = require('./Error'); const ControlBar = require('./ControlBar'); const NextVideoPopup = require('./NextVideoPopup'); @@ -630,6 +631,15 @@ const Player = ({ urlParams, queryParams }) => { : null } + { + video.state.volume !== null && overlayHidden ? + + : + null + } { + const [volumeIndicatorOpen, openVolumeIndicator, closeVolumeIndicator] = useBinaryState(false); + const volumeChangeTimeout = React.useRef(null); + const prevVolume = React.useRef(volume); + + const iconName = React.useMemo(() => { + return typeof muted === 'boolean' && muted ? 'volume-mute' : + volume === null || isNaN(volume) ? 'volume-off' : + volume < 30 ? 'volume-low' : + volume < 70 ? 'volume-medium' : + 'volume-high'; + }, [muted, volume]); + + React.useEffect(() => { + if (prevVolume.current !== volume) { + openVolumeIndicator(); + if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current); + volumeChangeTimeout.current = setTimeout(closeVolumeIndicator, 1500); + } + + prevVolume.current = volume; + }, [volume]); + + React.useEffect(() => { + return () => { + if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current); + }; + }, []); + + return ( + + { + volumeIndicatorOpen ? +
+ + +
+ : + null + } +
+ ); +}); + +VolumeChangeIndicator.displayName = 'VolumeChangeIndicator'; + +module.exports = VolumeChangeIndicator; + +VolumeChangeIndicator.propTypes = { + muted: PropTypes.bool, + volume: PropTypes.number +}; diff --git a/src/routes/Player/VolumeChangeIndicator/index.js b/src/routes/Player/VolumeChangeIndicator/index.js new file mode 100644 index 000000000..9ca3a62d4 --- /dev/null +++ b/src/routes/Player/VolumeChangeIndicator/index.js @@ -0,0 +1,5 @@ +// Copyright (C) 2017-2023 Smart code 203358507 + +const VolumeChangeIndicator = require('./VolumeChangeIndicator'); + +module.exports = VolumeChangeIndicator; diff --git a/src/routes/Player/VolumeChangeIndicator/styles.less b/src/routes/Player/VolumeChangeIndicator/styles.less new file mode 100644 index 000000000..38d651b7b --- /dev/null +++ b/src/routes/Player/VolumeChangeIndicator/styles.less @@ -0,0 +1,52 @@ +// Copyright (C) 2017-2023 Smart code 203358507 + +@import (reference) '~stremio/common/screen-sizes.less'; + +.volume-change-indicator { + position: absolute; + top: 50%; + left: 50%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transform: translate(-50%, -50%); + background-color: var(--overlay-color); + border-radius: var(--border-radius); + padding: 2rem 2.5rem; + gap: 1rem; + + .volume-icon { + width: 6.5rem; + height: 6.5rem; + color: var(--primary-foreground-color); + } + + .volume-slider { + border-radius: var(--border-radius); + max-height: 1rem; + width: 6.5rem; + max-height: 1rem; + flex: 0 1 10rem; + margin: 0 1rem; + + --track-size: 0.35rem; + --thumb-size: 1rem; + } + +} + +@media only screen and (max-width: @minimum) { + .volume-change-indicator { + padding: 1rem 1.5rem; + + .volume-icon { + width: 4rem; + height: 4rem; + } + + .volume-slider { + width: 4rem; + } + } +} \ No newline at end of file