Fix icon size and hide on not hover

bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx

@@ -499,18 +499,18 @@ class VideoPlayer extends Component {
         />
         { !isPresenter ?
             <div className={styles.hoverToolbar}>
-	      <VolumeSlider
+              <VolumeSlider
                 volume={volume}
                 muted={muted || mutedByEchoTest}
                 onMuted={this.handleOnMuted}
                 onVolumeChanged={this.handleVolumeChanged}
               />
-	      <ReloadButton
+              <ReloadButton
                 handleReload={this.handleReload}
                 label={intl.formatMessage(intlMessages.refreshLabel)}>
-	      </ReloadButton>
+              </ReloadButton>
             </div>
-	    : null
+          : null
         }
       </div>
     );

bigbluebutton-html5/imports/ui/components/external-video-player/volume-slider/styles.scss

@@ -14,15 +14,12 @@
   max-width: 20vw;
 }
 
-.streamingIndicator {
-}
-
 .slider {
   @extend %baseIndicator;
   display: flex;
   position: relative;
   bottom: 3.5em;
-  left: 10em;
+  left: 1em;
 
   min-width: 200px;
   background-color: rgba(0,0,0,0.5);
@@ -35,13 +32,12 @@
     font-size: 200%;
     cursor: pointer;
   }
-
 }
 
 .volumeSlider {
-  width: 150px;
+  width: 100%;
 }
 
 .volume {
-  margin-right: 1em;
+  margin-right: 0.5em;
 }