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