import React from "react"; import PropTypes from "prop-types"; import Viewer from 'react-viewer'; import { Icons } from "asc-web-components"; import styled from "styled-components"; import MediaScrollButton from "./scroll-button" import ControlBtn from "./control-btn" const StyledViewer = styled(Viewer)` .react-viewer-footer{ bottom: 5px!important; z-index: 4001!important; overflow: visible; } .react-viewer-canvas{ z-index: 4000!important; margin-top: 50px; } .react-viewer-navbar, .react-viewer-mask, .react-viewer-attribute, .react-viewer-close{ display: none } .react-viewer-toolbar{ position: relative; overflow: visible; bottom: 4px; } .react-viewer-toolbar li{ width: 40px; height:30px; margin-top: 4px; border-radius: 2px; cursor: pointer; line-height: 24px; } .react-viewer-btn{ background-color: transparent; &:hover{ background-color: rgba(200, 200, 200, 0.2); } } li[data-key='prev']{ left: 20px } li[data-key='next']{ right: 20px } li[data-key='prev'], li[data-key='next']{ position: fixed; top: calc(50% - 20px); height: auto; background: none; &:hover{ background: none; } } li[data-key='delete'], li[data-key='customDownload']{ position: fixed; bottom: 10px; .controlBtn{ margin: 0 } } li[data-key='delete']{ right: 62px; } li[data-key='customDownload']{ right: 12px; } .iconContainer{ width: 20px; line-height: 20px; margin: 4px auto; &.reset{ width: 18px; } } .btnContainer{ display: block; width: 20px; margin: 3px 10px; line-height: 19px; } .scrollBtn{ cursor: ${props => props.inactive ? 'default' : 'pointer'}; opacity: ${props => props.inactive ? '0.2' : '1'}; &:hover{ background-color: ${props => !props.inactive ? 'rgba(200, 200, 200, 0.2)' : 'rgba(11,11,11,0.7)'}; } } ` var customToolbar = [ { key: 'zoomIn', actionType: 1, render: