diff --git a/client/pages/viewerpage/imageviewer.js b/client/pages/viewerpage/imageviewer.js
index 5ecbb35a..c3ce4c7e 100644
--- a/client/pages/viewerpage/imageviewer.js
+++ b/client/pages/viewerpage/imageviewer.js
@@ -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>
         );
diff --git a/client/pages/viewerpage/pager.js b/client/pages/viewerpage/pager.js
index d2af028e..47be4c57 100644
--- a/client/pages/viewerpage/pager.js
+++ b/client/pages/viewerpage/pager.js
@@ -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>
diff --git a/client/pages/viewerpage/pager.scss b/client/pages/viewerpage/pager.scss
index 0ce81ab8..82dabac4 100644
--- a/client/pages/viewerpage/pager.scss
+++ b/client/pages/viewerpage/pager.scss
@@ -3,6 +3,7 @@
     bottom: 0px;
     left: 0;
     right: 0;
+    z-index: 2;
     .wrapper{
         text-align: center;
         color: var(--bg-color);
diff --git a/client/pages/viewerpage/videoplayer.js b/client/pages/viewerpage/videoplayer.js
index a65d48f3..6768950d 100644
--- a/client/pages/viewerpage/videoplayer.js
+++ b/client/pages/viewerpage/videoplayer.js
@@ -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>
diff --git a/client/pages/viewerpage/videoplayer.scss b/client/pages/viewerpage/videoplayer.scss
index 1b1dd508..a3e89540 100644
--- a/client/pages/viewerpage/videoplayer.scss
+++ b/client/pages/viewerpage/videoplayer.scss
@@ -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;}
         }
     }
 }
diff --git a/package.json b/package.json
index ba1cd589..745c7e32 100644
--- a/package.json
+++ b/package.json
@@ -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",