Changed stream volume slider to disable instead of hide when unavailable

src/components/party/Stream.js

@@ -102,15 +102,14 @@ function Stream({ stream, nickname }) {
         >
           <StreamMuteIcon muted={streamMuted} />
         </IconButton>
-        {isVolumeControlAvailable && (
+        <Slider
-          <Slider
+          value={streamVolume}
-            value={streamVolume}
+          min={0}
-            min={0}
+          max={2}
-            max={2}
+          step={0.1}
-            step={0.1}
+          onChange={handleVolumeChange}
-            onChange={handleVolumeChange}
+          disabled={!isVolumeControlAvailable}
-          />
+        />
-        )}
         {stream && <audio ref={audioRef} playsInline muted={streamMuted} />}
       </Flex>
       <Banner

src/theme.js

@@ -179,6 +179,11 @@ export default {
         borderColor: "text",
       },
     },
+    slider: {
+      "&:disabled": {
+        opacity: 0.5,
+      },
+    },
   },
   buttons: {
     primary: {