convert external-video-player volume-slider component

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

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { styles } from './styles';
+import Styled from './styles';
 
 class VolumeSlider extends Component {
   constructor(props) {
@@ -68,26 +68,22 @@ class VolumeSlider extends Component {
     }
 
     return (
-      <div className={styles.slider}>
+      <Styled.Slider>
-        <span
+        <Styled.Volume onClick={() => this.setMuted(!muted)}>
-          className={styles.volume}
-          onClick={() => this.setMuted(!muted)}
-        >
           <i
             tabIndex="-1"
             className={`icon-bbb-${this.getVolumeIcon()}`}
           />
-        </span>
+        </Styled.Volume>
-        <input
+        <Styled.VolumeSlider
-          className={styles.volumeSlider}
           type="range"
           min={0}
           max={1}
           step={0.02}
           value={muted ? 0 : volume}
-          onChange={(e)=> this.handleOnChange(e.target.valueAsNumber)}
+          onChange={(e) => this.handleOnChange(e.target.valueAsNumber)}
         />
-      </div>
+      </Styled.Slider>
     );
   }
 }

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

@@ -1,21 +1,7 @@
-@import "../../../stylesheets/variables/_all";
+import styled from 'styled-components';
 
-%baseIndicator {
+const Slider = styled.div`
   width: 0.9em;
-}
-
-%baseIndicatorLabel {
-  font-size: var(--font-size-base);
-  margin: 0 0 0 0.5rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: middle;
-  max-width: 20vw;
-}
-
-.slider {
-  @extend %baseIndicator;
   display: flex;
   position: relative;
   bottom: 3.5em;
@@ -25,23 +11,27 @@
   background-color: rgba(0,0,0,0.5);
   border-radius: 32px;
 
-  i {
+  & > i {
     color: white;
     transition: 0.5s;
     font-size: 200%;
     cursor: pointer;
   }
   z-index: 2;
-}
+`;
 
-.volumeSlider {
+const Volume = styled.span`
-  width: 100%;
-
-  cursor: pointer;
-}
-
-.volume {
   margin-right: 0.5em;
-
   cursor: pointer;
-}
+`;
+
+const VolumeSlider = styled.input`
+  width: 100%;
+  cursor: pointer;
+`;
+
+export default {
+  Slider,
+  Volume,
+  VolumeSlider,
+};