fix(2198): removed volumebar on mobile devices

src/features/MultiSourcePlayer/components/Settings/styled.tsx

@@ -12,7 +12,7 @@ export const SettingsButton = styled(ButtonBase)`
     ? css`
       width: 20px;
       height: 18px;
-      margin-left: 8px;
+      margin-left: 15px;
       cursor: pointer;
     `
     : ''};

src/features/MultiSourcePlayer/index.tsx

@@ -178,12 +178,16 @@ export const MultiSourcePlayer = (props: Props) => {
               disabled={isLastChapterPlaying}
               onClick={() => playNextChapter()}
             />
-            <VolumeBar
-              value={volumeInPercent}
-              muted={muted}
-              onChange={onVolumeChange}
-              onClick={onVolumeClick}
-            />
+            {
+              !isMobileDevice && (
+                <VolumeBar
+                  value={volumeInPercent}
+                  muted={muted}
+                  onChange={onVolumeChange}
+                  onClick={onVolumeClick}
+                />
+              )
+            }
             <PlaybackTime width={duration > HOUR_IN_MILLISECONDS ? 150 : 130}>
               {secondsToHms(allPlayedProgress / 1000)}
               {' / '}
@@ -202,15 +206,15 @@ export const MultiSourcePlayer = (props: Props) => {
           </ControlsGroup>
 
           <ControlsGroup>
-            <Fullscreen
-              onClick={onFullscreenClick}
-              isFullscreen={isFullscreen}
-            />
             <Settings
               onSelect={onQualitySelect}
               selectedQuality={selectedQuality}
               videoQualities={videoQualities}
             />
+            <Fullscreen
+              onClick={onFullscreenClick}
+              isFullscreen={isFullscreen}
+            />
           </ControlsGroup>
         </ControlsRow>
       </Controls>

src/features/MultiSourcePlayer/styled.tsx

@@ -9,12 +9,12 @@ export const ChaptersText = styled.span`
   font-size: 16px;
   color: #fff;
   text-align: center;
-  
+
   ${isMobileDevice
     ? css`
       margin: 0 5px;
       font-size: 12px;
-      width: 15%;
+      width: 20%;
     `
     : ''};
 `
@@ -33,7 +33,7 @@ export const Prev = styled(ButtonBase)<PrevProps>`
       ? 'opacity: 0.5;'
       : ''
   )}
- 
+
   ${isMobileDevice
     ? css`
       width: 20px;

src/features/StreamPlayer/index.tsx

@@ -149,15 +149,15 @@ export const StreamPlayer = (props: Props) => {
                 </LiveBtn>
               )
             }
-            <Fullscreen
-              onClick={onFullscreenClick}
-              isFullscreen={isFullscreen}
-            />
             <Settings
               onSelect={onQualitySelect}
               selectedQuality={selectedQuality}
               videoQualities={videoQualities}
             />
+            <Fullscreen
+              onClick={onFullscreenClick}
+              isFullscreen={isFullscreen}
+            />
           </ControlsGroup>
         </ControlsRow>
       </Controls>

src/features/StreamPlayer/styled.tsx

@@ -182,7 +182,7 @@ type FullscreenProps = {
 export const Fullscreen = styled(ButtonBase)<FullscreenProps>`
   width: 22px;
   height: 20px;
-  margin-left: 31px;
+  margin-left: 26px;
   background-image: ${({ isFullscreen }) => (
     isFullscreen
       ? 'url(/images/player-fullscreen-off.svg)'
@@ -193,7 +193,7 @@ export const Fullscreen = styled(ButtonBase)<FullscreenProps>`
     ? css`
       width: 20px;
       height: 18px;
-      margin-left: 0;
+      margin-left: 15px;
     `
     : ''};
 `