Merge pull request #440 from ONLYOFFICE/feature/media-viewer-icons

Web: Common: changed media-viewer icons, fixed media styles

packages/asc-web-common/components/MediaViewer/MediaViewer.js

@@ -518,6 +518,7 @@ class MediaViewer extends React.Component {
                 color="#fff"
                 iconName="/static/images/cross.react.svg"
                 size={25}
+                isClickable
               />
             </ControlBtn>
           </div>

packages/asc-web-common/components/MediaViewer/StyledMediaViewer.js

@@ -36,9 +36,16 @@ const StyledMediaViewer = styled.div`
   .deleteBtnContainer,
   .downloadBtnContainer {
     display: block;
-    width: 20px;
-    margin: 3px 10px;
+    width: 16px;
+    height: 16px;
+    margin: 4px 12px;
     line-height: 19px;
+
+    svg {
+      path {
+        fill: #fff;
+      }
+    }
   }
   .details {
     z-index: 302;

packages/asc-web-common/components/MediaViewer/sub-components/image-viewer.js

@@ -95,7 +95,7 @@ const StyledViewer = styled(Viewer)`
     @media (max-width: 600px) {
       position: initial;
     }
-    bottom: 10px;
+    bottom: 9px;
     .controlBtn {
       margin: 0;
     }
@@ -107,20 +107,32 @@ const StyledViewer = styled(Viewer)`
     right: 12px;
   }
   .iconContainer {
-    width: 20px;
+    width: 16px;
+    height: 16px;
     line-height: 20px;
-    margin: 4px auto;
+    margin: 3px auto;
 
     &.reset {
       width: 18px;
     }
+
+    path,
+    rect {
+      fill: #fff;
+    }
   }
 
   .btnContainer {
     display: block;
-    width: 18px;
-    margin: 4px 10px;
+    width: 16px;
+    height: 16px;
+    margin: 4px 12px;
     line-height: 19px;
+
+    path,
+    rect {
+      fill: #fff;
+    }
   }
   .scrollBtn {
     cursor: ${(props) => (props.inactive ? "default" : "pointer")};

packages/asc-web-common/components/MediaViewer/sub-components/video-viewer.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { findDOMNode } from "react-dom";
 import screenfull from "screenfull";
 import ReactPlayer from "react-player";
@@ -9,11 +9,19 @@ import Duration from "./duration";
 import Progress from "./progress";
 import MediaPauseIcon from "../../../../../public/images/media.pause.react.svg";
 import MediaPlayIcon from "../../../../../public/images/media.play.react.svg";
-import MediaFullScreenIcon from "../../../../../public/images/media.fullscreen.react.svg";
+import MediaFullScreenIcon from "../../../../../public/images/media.fullscreen.video.react.svg";
 import MediaMuteIcon from "../../../../../public/images/media.mute.react.svg";
 import MediaMuteOffIcon from "../../../../../public/images/media.muteoff.react.svg";
 import commonIconsStyles from "@appserver/components/utils/common-icons-style";
 
+const iconsStyles = css`
+  path,
+  stroke,
+  rect {
+    fill: #fff;
+  }
+`;
+
 const controlsHeight = 40;
 const StyledControls = styled.div`
   height: ${(props) => props.height}px;
@@ -26,10 +34,10 @@ const StyledControls = styled.div`
 `;
 const StyledVideoControlBtn = styled.div`
   display: inline-block;
-  height: 30px;
+  height: 26px;
   line-height: 30px;
-  margin: 5px;
-  width: 40px;
+  margin: 5px 2px;
+  width: 38px;
   border-radius: 2px;
   cursor: pointer;
   text-align: center;
@@ -39,43 +47,62 @@ const StyledVideoControlBtn = styled.div`
   }
 
   .playBtnContainer {
-    width: 23px;
+    width: 16px;
+    height: 16px;
     line-height: 0;
-    margin: 3px auto;
+    margin: 5px auto;
   }
   .pauseBtnContainer {
     display: block;
-    width: 19px;
+    width: 16px;
+    height: 16px;
     margin: 3px 10px;
     line-height: 19px;
   }
   .muteBtnContainer {
     display: block;
-    width: 26px;
-    margin: 3px 7px;
+    width: 16px;
+    height: 16px;
+    margin: 3px 11px;
     line-height: 19px;
   }
   .fullscreenBtnContainer {
     display: block;
-    width: 20px;
-    margin: 3px 10px;
+    width: 16px;
+    height: 16px;
+    margin: 3px 11px;
     line-height: 19px;
   }
 `;
 const StyledMediaPauseIcon = styled(MediaPauseIcon)`
   ${commonIconsStyles}
+  ${iconsStyles}
 `;
 const StyledMediaPlayIcon = styled(MediaPlayIcon)`
   ${commonIconsStyles}
+  ${iconsStyles}
 `;
 const StyledMediaFullScreenIcon = styled(MediaFullScreenIcon)`
   ${commonIconsStyles}
+  ${iconsStyles}
 `;
 const StyledMediaMuteIcon = styled(MediaMuteIcon)`
   ${commonIconsStyles}
+
+  path:first-child {
+    stroke: #fff;
+  }
+
+  path:last-child {
+    fill: #fff;
+  }
 `;
 const StyledMediaMuteOffIcon = styled(MediaMuteOffIcon)`
   ${commonIconsStyles}
+
+  path, rect {
+    fill: #fff;
+  }
 `;
 const VideoControlBtn = (props) => {
   return (
@@ -152,8 +179,8 @@ const StyledValumeContainer = styled.div`
 `;
 const StyledDuration = styled.div`
   display: inline-block;
-  height: 30px;
-  line-height: 30px;
+  height: 26px;
+  line-height: 26px;
   margin: 5px;
   width: 60px;
   text-align: center;