Merge branch 'development' into feat/shell-volume-booster

Author: ivelinmegdanov

package-lock.json

@@ -18,7 +18,7 @@
         "@stremio/stremio-colors": "5.2.0",
         "@stremio/stremio-core-web": "0.48.5",
         "@stremio/stremio-icons": "5.4.1",
-        "@stremio/stremio-video": "0.0.48",
+        "@stremio/stremio-video": "0.0.52",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",
         "buffer": "6.0.3",

package.json

@@ -181,12 +181,17 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
     const renderMenu = React.useMemo(() => function renderMenu() {
         return (
             <div className={styles['context-menu-content']} onPointerDown={popupMenuOnPointerDown} onContextMenu={popupMenuOnContextMenu} onClick={popupMenuOnClick} onKeyDown={popupMenuOnKeyDown}>
+                <div className={styles['context-menu-title']}>
+                    {description}
+                </div>
                 <Button className={styles['context-menu-option-container']} title={t('CTX_PLAY')}>
+                    <Icon className={styles['menu-icon']} name={'play'} />
                     <div className={styles['context-menu-option-label']}>{t('CTX_PLAY')}</div>
                 </Button>
                 {
                     streamLink &&
                         <Button className={styles['context-menu-option-container']} title={t('CTX_COPY_STREAM_LINK')} onClick={copyStreamLink}>
+                            <Icon className={styles['menu-icon']} name={'link'} />
                             <div className={styles['context-menu-option-label']}>{t('CTX_COPY_STREAM_LINK')}</div>
                         </Button>
                 }

src/routes/MetaDetails/StreamsList/Stream/Stream.js

@@ -111,12 +111,29 @@
         background-color: var(--secondary-accent-color);
     }
 
+    .menu-icon {
+        flex: none;
+        width: 1.7rem;
+        height: 1.7rem;
+        margin-right: 1rem;
+        color: var(--color-placeholder);
+    }
+
 	.context-menu-container {
 		max-width: calc(90% - 1.5rem);
 		z-index: 2;
 
 		.context-menu-content {
 			--spatial-navigation-contain: contain;
+
+            .context-menu-title {
+                font-size: 0.9rem;
+                padding: 1rem 1.5rem;
+                font-weight: 100;
+                border-bottom: 1px solid var(--color-placeholder);
+                color: var(--primary-foreground-color);
+                white-space: break-spaces;
+            }
 
 			.context-menu-option-container {
 				display: flex;
@@ -131,8 +148,9 @@
 
 				.context-menu-option-label {
 					font-size: 1rem;
-					font-weight: 500;
-					color:var(--primary-foreground-color);
+					font-weight: 300;
+					color: var(--primary-foreground-color);
+                    text-transform: capitalize;
 				}
 			}
 		}

src/routes/MetaDetails/StreamsList/Stream/styles.less

@@ -138,6 +138,7 @@ const ControlBar = ({
                 <VolumeSlider
                     className={styles['volume-slider']}
                     volume={volume}
+                    muted={muted}
                     onVolumeChangeRequested={onVolumeChangeRequested}
                 />
                 <div className={styles['spacing']} />

src/routes/Player/ControlBar/ControlBar.js

@@ -9,7 +9,7 @@ const { useServices } = require('stremio/services');
 const { Slider } = require('stremio/components');
 const styles = require('./styles');
 
-const VolumeSlider = ({ className, volume, onVolumeChangeRequested }) => {
+const VolumeSlider = ({ className, volume, onVolumeChangeRequested, muted }) => {
     const { shell } = useServices();
     const disabled = volume === null || isNaN(volume);
     const routeFocused = useRouteFocused();
@@ -48,7 +48,9 @@ const VolumeSlider = ({ className, volume, onVolumeChangeRequested }) => {
             className={classnames(className, styles['volume-slider'], { 'active': slidingVolume !== null })}
             value={
                 !disabled ?
-                    slidingVolume !== null ? slidingVolume : volume
+                    !muted ?
+                        slidingVolume !== null ? slidingVolume : volume
+                        : 0
                     :
                     100
             }
@@ -65,7 +67,8 @@ const VolumeSlider = ({ className, volume, onVolumeChangeRequested }) => {
 VolumeSlider.propTypes = {
     className: PropTypes.string,
     volume: PropTypes.number,
-    onVolumeChangeRequested: PropTypes.func
+    onVolumeChangeRequested: PropTypes.func,
+    muted: PropTypes.bool,
 };
 
 module.exports = VolumeSlider;