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