mirror of
https://github.com/mickael-kerjean/filestash
synced 2025-12-06 08:22:24 +01:00
improve (viewer): improve image and video viewer
This commit is contained in:
Mickael KERJEAN
parent
b688c470a5
commit
3cbe3ab6bb
6 changed files with 34 additions and 38 deletions
|
|
@ -20,7 +20,8 @@ export class ImageViewer extends React.Component{
|
|||
preload: null,
|
||||
_: null,
|
||||
show_exif: false,
|
||||
is_loaded: false
|
||||
is_loaded: false,
|
||||
draggable: true,
|
||||
};
|
||||
this.shortcut= (e) => {
|
||||
if(e.keyCode === 27){ this.setState({show_exif: false}); }
|
||||
|
|
@ -89,7 +90,7 @@ export class ImageViewer extends React.Component{
|
|||
</MenuBar>
|
||||
<div ref="$container" className={"component_image_container "+(document.webkitIsFullScreen || document.mozFullScreen ? "fullscreen" : "")}>
|
||||
<div className="images_wrapper">
|
||||
<ImageFancy onLoad={() => this.setState({is_loaded: true})} url={this.props.data} />
|
||||
<ImageFancy draggable={this.state.draggable} onLoad={() => this.setState({is_loaded: true})} url={this.props.data} />
|
||||
</div>
|
||||
<div className={"images_aside scroll-y"+(this.state.show_exif ? " open": "")}>
|
||||
<div className="header">
|
||||
|
|
@ -105,6 +106,7 @@ export class ImageViewer extends React.Component{
|
|||
<Pager
|
||||
type={["image"]}
|
||||
path={this.props.path}
|
||||
pageChange={(files) => this.setState({draggable: files.length > 1 ? true : false})}
|
||||
next={(e) => this.setState({preload: e})} />
|
||||
</div>
|
||||
|
||||
|
|
@ -248,7 +250,7 @@ class ImageFancy extends React.Component {
|
|||
onTouchEnd={this.imageDragEnd.bind(this)}
|
||||
onDrag={this.imageDrag.bind(this)}
|
||||
onTouchMove={this.imageDrag.bind(this)}
|
||||
draggable="true" />
|
||||
draggable={this.props.draggable} />
|
||||
</div>
|
||||
</ReactCSSTransitionGroup>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -18,13 +18,13 @@ export class Pager extends React.Component {
|
|||
files: [],
|
||||
n: 0
|
||||
};
|
||||
this.navigate = this.navigate.bind(this);
|
||||
this.onSubmitDebounced = debounce(this.onSubmit.bind(this), 1000);
|
||||
this.onKeyPress = this.onKeyPress.bind(this);
|
||||
this.onSubmitDebounced = debounce(this.onFormSubmit.bind(this), 1000);
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.setNavigation(this.props);
|
||||
window.addEventListener("keyup", this.navigate);
|
||||
window.addEventListener("keyup", this.onKeyPress);
|
||||
this.props.subscribe('media::next', () => {
|
||||
this.navigatePage(this.calculateNextPageNumber(this.state.n));
|
||||
});
|
||||
|
|
@ -40,28 +40,20 @@ export class Pager extends React.Component {
|
|||
}
|
||||
|
||||
componentWillUnmount(){
|
||||
window.removeEventListener("keyup", this.navigate);
|
||||
window.removeEventListener("keyup", this.onKeyPress);
|
||||
this.props.unsubscribe('media::next');
|
||||
this.props.unsubscribe('media::previous');
|
||||
}
|
||||
|
||||
navigate(e){
|
||||
if(e.target.classList.contains("prevent")) return;
|
||||
if(e.keyCode === 39){
|
||||
this.navigatePage(this.calculateNextPageNumber(this.state.n));
|
||||
}else if(e.keyCode === 37){
|
||||
this.navigatePage(this.calculatePrevPageNumber(this.state.n));
|
||||
}
|
||||
this.hasUnmounted = true;
|
||||
}
|
||||
|
||||
navigatePage(n){
|
||||
if(this.state.files[n]){
|
||||
const url = appendShareToUrl(this.state.files[n].link)
|
||||
this.props.history.push(url);
|
||||
const url = appendShareToUrl(this.state.files[n].link);
|
||||
if(this.refs.$page) this.refs.$page.blur();
|
||||
let preload_index = (n >= this.state.n || (this.state.n === this.state.files.length - 1 && n === 0)) ? this.calculateNextPageNumber(n) : this.calculatePrevPageNumber(n);
|
||||
Files.url(this.state.files[preload_index].path)
|
||||
.then((url) => this.props.emit("media::preload", url))
|
||||
.then(() => this.props.history.push(url))
|
||||
.catch(() => {});
|
||||
}
|
||||
}
|
||||
|
|
@ -78,12 +70,14 @@ export class Pager extends React.Component {
|
|||
Files._ls_from_cache(dirname(props.path))
|
||||
.then((f) => {
|
||||
if(f === null) return Promise.reject({code: "NO_DATA"});
|
||||
return Promise.resolve(f)
|
||||
return Promise.resolve(f);
|
||||
})
|
||||
.then((f) => f.results.filter((file) => (isImage(file.name) || isVideo(file.name)) && file.type === "file"))
|
||||
.then((f) => sort(f, settings_get('filespage_sort') || 'type'))
|
||||
.then((f) => findPosition(f, basename(props.path)))
|
||||
.then((res) => {
|
||||
if(this.hasUnmounted === true) return;
|
||||
if(this.props.pageChange) this.props.pageChange(res[0]);
|
||||
this.setState({
|
||||
files: res[0],
|
||||
n: res[1]
|
||||
|
|
@ -108,7 +102,7 @@ export class Pager extends React.Component {
|
|||
};
|
||||
}
|
||||
|
||||
onPageChange(e){
|
||||
onFormInputChange(e){
|
||||
let n = parseInt(e.target.value);
|
||||
if(Number.isNaN(n)) n = undefined;
|
||||
else if(n < 1) n = 0;
|
||||
|
|
@ -120,11 +114,20 @@ export class Pager extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
onSubmit(e){
|
||||
onFormSubmit(e){
|
||||
if(e) e.preventDefault();
|
||||
this.navigatePage(this.state.n);
|
||||
}
|
||||
|
||||
onKeyPress(e){
|
||||
if(e.target.classList.contains("prevent")) return;
|
||||
if(e.keyCode === 39){
|
||||
this.navigatePage(this.calculateNextPageNumber(this.state.n));
|
||||
}else if(e.keyCode === 37){
|
||||
this.navigatePage(this.calculatePrevPageNumber(this.state.n));
|
||||
}
|
||||
}
|
||||
|
||||
render(){
|
||||
let inputWidth = this.state.n === undefined ? 12 : ((this.state.n + 1).toString().length) * 12;
|
||||
const nextLink = () => {
|
||||
|
|
@ -142,8 +145,8 @@ export class Pager extends React.Component {
|
|||
<NgIf cond={this.state.files.length > 0} type="inline">
|
||||
<Link to={prevLink()}><Icon name="arrow_left_white"/></Link>
|
||||
<label className="pager">
|
||||
<form onSubmit={this.onSubmit.bind(this)}>
|
||||
<input ref="$page" className="prevent" type="number" style={{width: inputWidth+"px"}} onChange={this.onPageChange.bind(this)} value={current_page_number} />
|
||||
<form onSubmit={this.onFormSubmit.bind(this)}>
|
||||
<input ref="$page" className="prevent" type="number" style={{width: inputWidth+"px"}} onChange={this.onFormInputChange.bind(this)} value={current_page_number} />
|
||||
</form>
|
||||
<span className="separator">/</span>
|
||||
<span ref="$total">{this.state.files.length}</span>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
bottom: 0px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
.wrapper{
|
||||
text-align: center;
|
||||
color: var(--bg-color);
|
||||
|
|
|
|||
|
|
@ -50,9 +50,9 @@ export class VideoPlayer extends React.Component {
|
|||
<MenuBar title={this.props.filename} download={this.props.data} />
|
||||
<div className="video_container">
|
||||
<ReactCSSTransitionGroup transitionName="video" transitionAppear={true} transitionLeave={false} transitionEnter={true} transitionEnterTimeout={300} transitionAppearTimeout={300}>
|
||||
<span key={this.props.data}>
|
||||
<div key={this.props.data} data-vjs-player>
|
||||
<video ref="$video" className="video-js vjs-fluid vjs-default-skin vjs-big-play-centered" style={{boxShadow: 'rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px'}}></video>
|
||||
</span>
|
||||
</div>
|
||||
</ReactCSSTransitionGroup>
|
||||
<Pager path={this.props.path} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,17 +22,7 @@
|
|||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
> span{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
> div{
|
||||
margin: auto;
|
||||
}
|
||||
video{
|
||||
outline: none;
|
||||
box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px;
|
||||
}
|
||||
}
|
||||
> div{margin: auto;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,8 +33,8 @@
|
|||
"html-webpack-plugin": "^2.28.0",
|
||||
"node-sass": "^4.10.0",
|
||||
"prop-types": "^15.5.10",
|
||||
"react": "^16.8.0",
|
||||
"react-dom": "^16.8.0",
|
||||
"react": "^15.6.2",
|
||||
"react-dom": "^15.6.2",
|
||||
"react-addons-css-transition-group": "^15.6.2",
|
||||
"react-dnd": "^2.4.0",
|
||||
"react-dnd-html5-backend-filedrop": "^1.0.0",
|
||||
|
|
|
|||
Loading…
Reference in a new issue