diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 9887156d2..f5373aea1 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'); @@ -56,6 +57,8 @@ const Player = ({ urlParams, queryParams }) => { const [videosMenuOpen, , closeVideosMenu, toggleVideosMenu] = useBinaryState(false); const [statisticsMenuOpen, , closeStatisticsMenu, toggleStatisticsMenu] = useBinaryState(false); const [nextVideoPopupOpen, openNextVideoPopup, closeNextVideoPopup] = useBinaryState(false); + const [volumeChangeIndicatorOpen, openVolumeChangeIndicator, closeVolumeChangeIndicator] = useBinaryState(false); + const volumeChangeTimeout = React.useRef(null); const menusOpen = React.useMemo(() => { return optionsMenuOpen || subtitlesMenuOpen || infoMenuOpen || speedMenuOpen || videosMenuOpen || statisticsMenuOpen; @@ -154,7 +157,11 @@ const Player = ({ urlParams, queryParams }) => { const onVolumeChangeRequested = React.useCallback((volume) => { video.setProp('volume', volume); - }, []); + openVolumeChangeIndicator(); + + if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current); + volumeChangeTimeout.current = setTimeout(closeVolumeChangeIndicator, 1500); + }, [openVolumeChangeIndicator, closeVolumeChangeIndicator]); const onSeekRequested = React.useCallback((time) => { video.setProp('time', time); @@ -423,6 +430,12 @@ const Player = ({ urlParams, queryParams }) => { } }, [video.state.playbackSpeed]); + React.useEffect(() => { + return () => { + if (volumeChangeTimeout.current) clearTimeout(volumeChangeTimeout.current); + }; + }, []); + React.useEffect(() => { const toastFilter = (item) => item?.dataset?.type === 'CoreEvent'; toast.addFilter(toastFilter); @@ -630,6 +643,16 @@ const Player = ({ urlParams, queryParams }) => { : null } + { + volumeChangeIndicatorOpen ? + + : + null + } { + return ( +
+ + +
+ ); +}; + +module.exports = VolumeChangeIndicator; + +VolumeChangeIndicator.propTypes = { + muted: PropTypes.bool, + onVolumeChangeRequested: PropTypes.func, + 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..2487297a4 --- /dev/null +++ b/src/routes/Player/VolumeChangeIndicator/styles.less @@ -0,0 +1,55 @@ +// 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; + z-index: 99999; + 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); + opacity: 0.5; + } + + .volume-slider { + border-radius: var(--border-radius); + opacity: 0.5; + 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