web: common: MediaViewer. added common styles
This commit is contained in:
NikolayRechkin
parent
bb94d506c0
commit
324b1c4ceb
@ -1,36 +1,189 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import styled from "styled-components";
|
||||
import { Icons } from "asc-web-components";
|
||||
|
||||
import ImageViewer from "./sub-components/image-viewer"
|
||||
import VideoViewer from "./sub-components/video-viewer"
|
||||
|
||||
const StyledVideoViewer = styled(VideoViewer)`
|
||||
z-index: 4001;
|
||||
`
|
||||
const StyledMediaViewer = styled.div`
|
||||
|
||||
color: #d1d1d1;
|
||||
|
||||
.videoViewerOverlay{
|
||||
position: fixed;
|
||||
z-index: 4000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.mediaViewerToolbox{
|
||||
z-index: 4001;
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
background-color: rgba(11,11,11,0.7);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
|
||||
|
||||
}
|
||||
span{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 5px;
|
||||
margin-right: 10px;
|
||||
z-index: 4005;
|
||||
}
|
||||
.details{
|
||||
z-index: 4001;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
background: rgba(17,17,17,0.867);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mediaPlayerClose{
|
||||
position: fixed;
|
||||
top: 4px;
|
||||
right: 10px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
`;
|
||||
const ScrollButton = styled.div`
|
||||
|
||||
cursore: pointer;
|
||||
z-index: 4001;
|
||||
position: fixed;
|
||||
top: calc(50% - 20px);
|
||||
|
||||
background: none;
|
||||
|
||||
&:hover{
|
||||
background: none;
|
||||
}
|
||||
${props => props.orientation != "left" ? 'left: 20px;' : 'right: 20px;'}
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: rgba(11, 11, 11, 0.7);
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover{
|
||||
background-color: rgba(200, 200, 200, 0.2);
|
||||
}
|
||||
|
||||
&:before{
|
||||
content:'';
|
||||
top: 12px;
|
||||
left: ${props => props.orientation == "left" ? '9px;' : '15px;'};
|
||||
position: absolute;
|
||||
border: solid #fff;
|
||||
border-width: 0 2px 2px 0;
|
||||
display: inline-block;
|
||||
padding: 7px;
|
||||
transform: ${props => props.orientation == "left" ? 'rotate(-45deg)' : 'rotate(135deg)'};
|
||||
-webkit-transform: ${props => props.orientation == "left" ? 'rotate(-45deg)' : 'rotate(135deg)'};
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
const StyledVideoControlBtn = styled.div`
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
line-height: 25px;
|
||||
margin: 5px;
|
||||
width: 40px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
&:hover{
|
||||
background-color: rgba(200,200,200,0.2);
|
||||
}
|
||||
`;
|
||||
|
||||
const VideoControlBtn = props => {
|
||||
return (
|
||||
<StyledVideoControlBtn {...props} >
|
||||
{props.children}
|
||||
</StyledVideoControlBtn>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const MediaScrollButton = props => {
|
||||
return (
|
||||
<ScrollButton {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
class MediaViewer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
visible: false,
|
||||
visible: true,
|
||||
};
|
||||
}
|
||||
|
||||
render(){
|
||||
return(
|
||||
<div>
|
||||
<button onClick={() => { this.setState({ visible: !this.state.visible }); } }>show</button>
|
||||
<StyledMediaViewer>
|
||||
|
||||
<div className = "videoViewerOverlay"></div>
|
||||
<MediaScrollButton orientation = "right" />
|
||||
<MediaScrollButton orientation = "left" />
|
||||
<div>
|
||||
<div className = "details">
|
||||
<div className = "title">123.123</div>
|
||||
<VideoControlBtn onClick={this.props.onClick} className = "mediaPlayerClose">
|
||||
<Icons.CrossIcon size="medium" isfill={true} color="#fff" />
|
||||
</VideoControlBtn>
|
||||
</div>
|
||||
</div>
|
||||
<StyledVideoViewer />
|
||||
<div className = "mediaViewerToolbox"></div>
|
||||
<span>
|
||||
<VideoControlBtn>
|
||||
<Icons.CatalogTrashIcon size="medium" isfill={true} color="#fff" />
|
||||
</VideoControlBtn>
|
||||
|
||||
<VideoViewer />
|
||||
{/*
|
||||
<ImageViewer
|
||||
<VideoControlBtn>
|
||||
<Icons.DownloadIcon size="medium" isfill={true} color="#fff" />
|
||||
</VideoControlBtn>
|
||||
</span>
|
||||
{ /* <StyledVideoViewer />
|
||||
|
||||
<ImageViewer
|
||||
visible={this.state.visible}
|
||||
onClose={() => { this.setState({ visible: false }); } }
|
||||
images={[
|
||||
{src: '', alt: ''},
|
||||
{src: '', alt: ''}
|
||||
{src: 'http://localhost/Products/Files/httphandlers/filehandler.ashx?action=download&fileid=2025993', alt: ''},
|
||||
{src: 'http://localhost/Products/Files/httphandlers/filehandler.ashx?action=download&fileid=2025992', alt: ''}
|
||||
|
||||
]}
|
||||
/>
|
||||
*/}
|
||||
</div>
|
||||
</StyledMediaViewer>
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
@ -7,6 +7,17 @@ import styled from "styled-components";
|
||||
|
||||
const StyledViewer = styled(Viewer)`
|
||||
|
||||
.react-viewer-footer{
|
||||
bottom: 5px!important;
|
||||
z-index: 4001!important;
|
||||
}
|
||||
.react-viewer-canvas{
|
||||
z-index: 4000!important;
|
||||
}
|
||||
.react-viewer-navbar,
|
||||
.react-viewer-mask{
|
||||
display: none
|
||||
}
|
||||
.react-viewer-attribute{
|
||||
display: none;
|
||||
}
|
||||
@ -19,7 +30,7 @@ const StyledViewer = styled(Viewer)`
|
||||
}
|
||||
|
||||
.react-viewer-btn{
|
||||
background-color: none;
|
||||
background-color: transparent;
|
||||
&:hover{
|
||||
background-color: rgba(200, 200, 200, 0.2);
|
||||
}
|
||||
@ -42,43 +53,8 @@ const StyledViewer = styled(Viewer)`
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
`
|
||||
|
||||
const NextButton = styled.div`
|
||||
|
||||
height: 40px;
|
||||
background-color: rgba(11, 11, 11, 0.7);
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover{
|
||||
background-color: rgba(200, 200, 200, 0.2);
|
||||
}
|
||||
|
||||
&:before{
|
||||
content:'';
|
||||
top: 12px;
|
||||
left: ${props => props.orientation == "left" ? '9px;' : '15px;'};
|
||||
position: absolute;
|
||||
border: solid #fff;
|
||||
border-width: 0 2px 2px 0;
|
||||
display: inline-block;
|
||||
padding: 7px;
|
||||
transform: ${props => props.orientation == "left" ? 'rotate(-45deg)' : 'rotate(135deg)'};
|
||||
-webkit-transform: ${props => props.orientation == "left" ? 'rotate(-45deg)' : 'rotate(135deg)'};
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
|
||||
|
||||
const MediaScrollButton = props => {
|
||||
//console.log("Backdrop render");
|
||||
return (
|
||||
<NextButton {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
var customToolbar = [
|
||||
{
|
||||
@ -106,7 +82,7 @@ var customToolbar = [
|
||||
actionType: 6,
|
||||
render: <Icons.RotateIcon size="medium" isfill={true} color="#fff"/>
|
||||
},
|
||||
{
|
||||
/*{
|
||||
key: 'prev',
|
||||
actionType: 3,
|
||||
render: <MediaScrollButton orientation = "right" />
|
||||
@ -116,7 +92,7 @@ var customToolbar = [
|
||||
actionType: 4,
|
||||
render: <MediaScrollButton orientation = "left"/>
|
||||
|
||||
},
|
||||
},*/
|
||||
];
|
||||
|
||||
class ImageViewer extends React.Component {
|
||||
|
||||
@ -12,7 +12,7 @@ const StyledControls = styled.div`
|
||||
height: 40px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 400;
|
||||
z-index: 4001;
|
||||
top: calc(50% + 113px);
|
||||
left: calc(50% - 200px);
|
||||
|
||||
@ -86,12 +86,12 @@ const StyledProgress = styled.div`
|
||||
.fill{
|
||||
width: ${props => 100 * props.value}%;
|
||||
position:absolute;
|
||||
z-index:50;
|
||||
|
||||
top:calc(50% - 3px);
|
||||
height:6px;
|
||||
background: #d1d1d1;
|
||||
border-radius: 2px;
|
||||
z-index:50;
|
||||
|
||||
}
|
||||
input[type='range'] {
|
||||
display: block;
|
||||
@ -103,7 +103,7 @@ const StyledProgress = styled.div`
|
||||
margin:0;
|
||||
-webkit-appearance: none;
|
||||
position:relative;
|
||||
z-index:1000;
|
||||
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
@ -117,7 +117,7 @@ const StyledProgress = styled.div`
|
||||
border-radius: 50%;
|
||||
|
||||
cursor: pointer;
|
||||
z-index:5000;
|
||||
|
||||
}
|
||||
input[type=range]::-moz-range-thumb {
|
||||
position:relative;
|
||||
@ -129,7 +129,7 @@ const StyledProgress = styled.div`
|
||||
border-radius: 50%;
|
||||
margin-top: -3px;
|
||||
cursor: pointer;
|
||||
z-index:5000;
|
||||
|
||||
}
|
||||
input[type=range]::-ms-thumb {
|
||||
position:relative;
|
||||
@ -141,7 +141,7 @@ const StyledProgress = styled.div`
|
||||
border-radius: 50%;
|
||||
margin-top: -3px;
|
||||
cursor: pointer;
|
||||
z-index:5000;
|
||||
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
@ -152,7 +152,7 @@ const StyledProgress = styled.div`
|
||||
-webkit-appearance: none;
|
||||
text-align: right;
|
||||
pointer-events: none;
|
||||
z-index:5000;
|
||||
|
||||
}
|
||||
input[type="range"]::-moz-range-track {
|
||||
margin: 12px 0;
|
||||
@ -162,7 +162,7 @@ const StyledProgress = styled.div`
|
||||
-webkit-appearance: none;
|
||||
text-align: right;
|
||||
pointer-events: none;
|
||||
z-index:5000;
|
||||
|
||||
}
|
||||
input[type=range]::-ms-track {
|
||||
border-color: transparent;
|
||||
@ -175,7 +175,7 @@ const StyledProgress = styled.div`
|
||||
-webkit-appearance: none;
|
||||
text-align: right;
|
||||
pointer-events: none;
|
||||
z-index:5000;
|
||||
|
||||
}
|
||||
`;
|
||||
|
||||
@ -240,25 +240,13 @@ const StyledVideoViewer = styled.div`
|
||||
|
||||
color: #d1d1d1;
|
||||
|
||||
.videoViewerOverlay{
|
||||
position: fixed;
|
||||
z-index: 400;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.playerWrapper{
|
||||
width: 400px;
|
||||
height: 226px;
|
||||
left: calc(50% - 200px);
|
||||
top: calc(50% - 113px);
|
||||
|
||||
z-index: 4001;
|
||||
position: absolute;
|
||||
z-index: 400;
|
||||
padding-bottom: 40px;
|
||||
background-color: rgba(11,11,11,0.7);
|
||||
}
|
||||
@ -441,7 +429,6 @@ class VideoViewer extends Component {
|
||||
|
||||
return (
|
||||
<StyledVideoViewer>
|
||||
<div className = "videoViewerOverlay"></div>
|
||||
<div>
|
||||
<div className='playerWrapper'>
|
||||
<ReactPlayer
|
||||
|
||||
Loading…
Reference in New Issue
Block a user