web: common: MediaViewer. Button handlers. Component property descriptions
This commit is contained in:
NikolayRechkin
parent
59a3f9c665
commit
4ec2c14ed4
@ -14,6 +14,8 @@ const StyledVideoViewer = styled(VideoViewer)`
|
||||
const StyledMediaViewer = styled.div`
|
||||
|
||||
color: #d1d1d1;
|
||||
display: ${props => props.visible ? "block" : "none"};
|
||||
|
||||
.videoViewerOverlay{
|
||||
position: fixed;
|
||||
z-index: 4000;
|
||||
@ -78,14 +80,22 @@ class MediaViewer extends React.Component {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
visible: true,
|
||||
visible: this.props.visible,
|
||||
allowConvert: true,
|
||||
playlist: this.props.playlist,
|
||||
playlistPos: 0,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.visible !== prevProps.visible) {
|
||||
this.setState(
|
||||
{
|
||||
visible: this.props.visible
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
mapSupplied = {
|
||||
".aac": { supply: "m4a", type: audio },
|
||||
".flac": { supply: "mp3", type: audio },
|
||||
@ -118,7 +128,7 @@ class MediaViewer extends React.Component {
|
||||
|
||||
var canConv = allowConvert || this.props.allowConvert;
|
||||
|
||||
return !!supply && this.props.extsMediaPreviewed.indexOf(ext) != -1
|
||||
return !!supply && this.props.extsMediaPreviewed.indexOf(ext) != -1
|
||||
&& (!supply.convertable || canConv);
|
||||
};
|
||||
|
||||
@ -132,11 +142,11 @@ class MediaViewer extends React.Component {
|
||||
};
|
||||
|
||||
prevMedia = () => {
|
||||
|
||||
|
||||
let currentPlaylistPos = this.state.playlistPos;
|
||||
currentPlaylistPos--;
|
||||
if (currentPlaylistPos < 0)
|
||||
currentPlaylistPos = this.state.playlist.length - 1;
|
||||
currentPlaylistPos = this.state.playlist.length - 1;
|
||||
|
||||
this.setState({
|
||||
playlistPos: currentPlaylistPos
|
||||
@ -154,69 +164,88 @@ class MediaViewer extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
render(){
|
||||
render() {
|
||||
|
||||
let currentPlaylistPos = this.state.playlistPos;
|
||||
let fileTitle = this.state.playlist[currentPlaylistPos].title;
|
||||
let url = this.state.playlist[currentPlaylistPos].src;
|
||||
let isImage = false;
|
||||
var isVideo = false;
|
||||
let isVideo = false;
|
||||
let canOpen = true;
|
||||
|
||||
var ext = this.getFileExtension(fileTitle) ? this.getFileExtension(fileTitle) : this.getFileExtension(url);
|
||||
|
||||
if (!this.canPlay(ext) && !this.canImageView(ext)) {
|
||||
console.log("ERROR")
|
||||
canOpen = false;
|
||||
this.props.onError && this.props.onError();
|
||||
}
|
||||
|
||||
if (this.canImageView(ext)) {
|
||||
isImage = true;
|
||||
} else {
|
||||
isImage = false;
|
||||
isImage = false;
|
||||
isVideo = this.mapSupplied[ext] ? this.mapSupplied[ext].type == video : false;
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledMediaViewer visible={this.state.visible}>
|
||||
|
||||
return(
|
||||
<StyledMediaViewer>
|
||||
|
||||
<div className = "videoViewerOverlay"></div>
|
||||
<MediaScrollButton orientation = "right" onClick={this.prevMedia}/>
|
||||
<MediaScrollButton orientation = "left" onClick={this.nextMedia}/>
|
||||
<div className="videoViewerOverlay"></div>
|
||||
<MediaScrollButton orientation="right" onClick={this.prevMedia} />
|
||||
<MediaScrollButton orientation="left" onClick={this.nextMedia} />
|
||||
<div>
|
||||
<div className = "details">
|
||||
<div className = "title">{fileTitle}</div>
|
||||
<ControlBtn onClick={this.props.onClick} className = "mediaPlayerClose">
|
||||
<div className="details">
|
||||
<div className="title">{fileTitle}</div>
|
||||
<ControlBtn onClick={this.props.onClose && (() => {this.props.onClose()})} className="mediaPlayerClose">
|
||||
<Icons.CrossIcon size="medium" isfill={true} color="#fff" />
|
||||
</ControlBtn>
|
||||
</div>
|
||||
</div>
|
||||
{isImage ?
|
||||
<ImageViewer
|
||||
visible={this.state.visible}
|
||||
onClose={() => { this.setState({ visible: false }); } }
|
||||
images={[
|
||||
{src: url, alt: ''}
|
||||
]}
|
||||
/>
|
||||
:
|
||||
<StyledVideoViewer url = {url} isVideo={isVideo}/>
|
||||
{canOpen &&
|
||||
(
|
||||
isImage ?
|
||||
<ImageViewer
|
||||
visible={this.state.visible}
|
||||
onClose={() => { this.setState({ visible: false }); }}
|
||||
images={[
|
||||
{ src: url, alt: '' }
|
||||
]}
|
||||
/>
|
||||
:
|
||||
<StyledVideoViewer url={url} isVideo={isVideo} />
|
||||
)
|
||||
}
|
||||
<div className = "mediaViewerToolbox"></div>
|
||||
<div className="mediaViewerToolbox"></div>
|
||||
<span>
|
||||
<ControlBtn>
|
||||
<Icons.CatalogTrashIcon size="medium" isfill={true} color="#fff" />
|
||||
<ControlBtn onClick={this.props.onDelete && (() => {this.props.onDelete(this.state.playlistPos)})}>
|
||||
<Icons.CatalogTrashIcon size="medium" isfill={true} color="#fff" />
|
||||
</ControlBtn>
|
||||
|
||||
<ControlBtn>
|
||||
<ControlBtn onClick={this.props.onDownload && (() => {this.props.onDownload(this.state.playlistPos)})}>
|
||||
<Icons.DownloadIcon size="medium" isfill={true} color="#fff" />
|
||||
</ControlBtn>
|
||||
</span>
|
||||
</StyledMediaViewer>
|
||||
)
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
MediaViewer.propTypes = {}
|
||||
MediaViewer.propTypes = {
|
||||
allowConvert: PropTypes.bool,
|
||||
visible: PropTypes.bool,
|
||||
playlist: PropTypes.arrayOf(PropTypes.object),
|
||||
extsImagePreviewed: PropTypes.arrayOf(PropTypes.string),
|
||||
extsMediaPreviewed: PropTypes.arrayOf(PropTypes.string),
|
||||
onError: PropTypes.func,
|
||||
canDelete: PropTypes.func,
|
||||
onDelete: PropTypes.func,
|
||||
onDownload: PropTypes.func,
|
||||
onClose: PropTypes.func
|
||||
}
|
||||
|
||||
MediaViewer.defaultProps = {}
|
||||
MediaViewer.defaultProps = {
|
||||
allowConvert: true,
|
||||
canDelete: () => { return true }
|
||||
}
|
||||
|
||||
export default MediaViewer;
|
||||
@ -3,19 +3,43 @@ import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
import MediaViewer from '.';
|
||||
import { Button } from 'asc-web-components';
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import { withKnobs, boolean, text } from '@storybook/addon-knobs/react';
|
||||
import Readme from './README.md';
|
||||
|
||||
storiesOf('Components|MediaViewer', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('base', () => (
|
||||
|
||||
class MediaViewerStory extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
visible: false
|
||||
};
|
||||
}
|
||||
buttonClick = () => {
|
||||
this.setState({
|
||||
visible: true
|
||||
});
|
||||
}
|
||||
onClose = () => {
|
||||
this.setState({
|
||||
visible: false
|
||||
});
|
||||
};
|
||||
|
||||
render(){
|
||||
return(
|
||||
<Section>
|
||||
<div style={{marginBottom: '20px'}}>
|
||||
<Button
|
||||
label="Open"
|
||||
onClick={this.buttonClick}
|
||||
/>
|
||||
</div>
|
||||
<MediaViewer
|
||||
allowConvert = {true}
|
||||
canDelete = {(fileId) => {return true}}
|
||||
|
||||
visible = {this.state.visible}
|
||||
playlist = {
|
||||
[
|
||||
{
|
||||
@ -25,7 +49,23 @@ storiesOf('Components|MediaViewer', module)
|
||||
}
|
||||
]
|
||||
}
|
||||
extsMediaPreviewed ={[".aac", ".flac", ".m4a", ".mp3", ".oga", ".ogg", ".wav", ".f4v", ".m4v", ".mov", ".mp4", ".ogv", ".webm"]}
|
||||
extsImagePreviewed ={[".bmp", ".gif", ".jpeg", ".jpg", ".png", ".ico", ".tif", ".tiff", ".webp"]}/>
|
||||
onDelete = {(fileId) => {console.log(fileId)}}
|
||||
onDownload = {(fileId) => {console.log(fileId)}}
|
||||
onClose = {this.onClose}
|
||||
extsMediaPreviewed ={[".aac", ".flac", ".m4a", ".mp3", ".oga", ".ogg", ".wav", ".f4v", ".m4v", ".mov", ".mp4", ".ogv", ".webm", ".avi", ".mpg", ".mpeg", ".wmv"]}
|
||||
extsImagePreviewed ={[".bmp", ".gif", ".jpeg", ".jpg", ".png", ".ico", ".tif", ".tiff", ".webp"]}
|
||||
/>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
storiesOf('Components|MediaViewer', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('base', () => (
|
||||
<Section>
|
||||
|
||||
<MediaViewerStory/>
|
||||
</Section>
|
||||
));
|
||||
|
||||
@ -60,39 +60,28 @@ var customToolbar = [
|
||||
{
|
||||
key: 'zoomIn',
|
||||
actionType: 1,
|
||||
render: <Icons.PlusIcon size="medium" isfill={true} color="#fff" />
|
||||
render: <Icons.PlusIcon size="medium" isfill={true} color="#fff" />
|
||||
},
|
||||
{
|
||||
key: 'zoomOut',
|
||||
actionType: 2,
|
||||
render: <Icons.CrossIcon size="medium" isfill={true} color="#fff"/>
|
||||
render: <Icons.CrossIcon size="medium" isfill={true} color="#fff" />
|
||||
},
|
||||
{
|
||||
key: 'reset',
|
||||
actionType: 7,
|
||||
render: <Icons.AccessFormIcon size="medium" isfill={true} color="#fff"/>
|
||||
render: <Icons.AccessFormIcon size="medium" isfill={true} color="#fff" />
|
||||
},
|
||||
{
|
||||
key: 'rotateLeft',
|
||||
actionType: 5,
|
||||
render: <Icons.RotateIcon size="medium" isfill={true} color="#fff"/>
|
||||
render: <Icons.RotateIcon size="medium" isfill={true} color="#fff" />
|
||||
},
|
||||
{
|
||||
key: 'rotateRight',
|
||||
actionType: 6,
|
||||
render: <Icons.RotateIcon size="medium" isfill={true} color="#fff"/>
|
||||
},
|
||||
/*{
|
||||
key: 'prev',
|
||||
actionType: 3,
|
||||
render: <MediaScrollButton orientation = "right" />
|
||||
},
|
||||
{
|
||||
key: 'next',
|
||||
actionType: 4,
|
||||
render: <MediaScrollButton orientation = "left"/>
|
||||
|
||||
},*/
|
||||
render: <Icons.RotateIcon size="medium" isfill={true} color="#fff" />
|
||||
}
|
||||
];
|
||||
|
||||
class ImageViewer extends React.Component {
|
||||
@ -101,21 +90,20 @@ class ImageViewer extends React.Component {
|
||||
|
||||
this.state = {
|
||||
visible: false,
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
render(){
|
||||
render() {
|
||||
|
||||
const { className, visible, onClose, images } = this.props;
|
||||
const { className, visible, images } = this.props;
|
||||
|
||||
return(
|
||||
<div>
|
||||
return (
|
||||
<div className={className}>
|
||||
<StyledViewer
|
||||
visible={visible}
|
||||
onClose={onClose}
|
||||
customToolbar={(toolbars) => {
|
||||
return customToolbar;
|
||||
}}
|
||||
}}
|
||||
images={images}
|
||||
/>
|
||||
</div>
|
||||
@ -123,7 +111,11 @@ class ImageViewer extends React.Component {
|
||||
};
|
||||
}
|
||||
|
||||
ImageViewer.propTypes = {}
|
||||
ImageViewer.propTypes = {
|
||||
className: PropTypes.string,
|
||||
visible: PropTypes.bool,
|
||||
images: PropTypes.arrayOf(PropTypes.object)
|
||||
}
|
||||
|
||||
ImageViewer.defaultProps = {}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ const StyledSectionPaging = styled.div`
|
||||
`;
|
||||
|
||||
const SectionPaging = React.memo(props => {
|
||||
//console.log("PageLayout SectionPaging render");
|
||||
return <StyledSectionPaging {...props} />;
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user