fix preview position on fullscreen

shisama · Aug 26, 2017 · aeb6a79 · aeb6a79
1 parent 2dfb43d
commit aeb6a79
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 5 deletions.
diff --git a/demo/slideshow.js b/demo/slideshow.js
@@ -356,7 +356,14 @@ var SlideShow = function (_React$Component) {
           key: key
         });
       });
-      var fullscreenBottom = document.mozFullScreen ? 180 : 120;
+      var fullscreenBottom = 120;
+      var wrapper = document.querySelector('.slideshow-wrapper');
+      var content = document.querySelector('.content');
+      var progressBar = document.querySelector('.progressBar');
+      var bar = document.querySelector('.bar');
+      if (wrapper && content && progressBar && bar) {
+        fullscreenBottom = window.screen.availHeight - content.offsetHeight + progressBar.offsetHeight + bar.offsetHeight + 10;
+      }
       var bottom = _this.state.isFullScreen ? fullscreenBottom : _Styles.Styles.PREVIEW.bottom;
       var STYLE = _extends({}, _Styles.Styles.PREVIEW, {
         opacity: _this.state.preview,

diff --git a/lib/SlideShow.js b/lib/SlideShow.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-slideshow-ui",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "author": "Masashi Hirano (https://github.com/shisama)",
   "license": "MIT",
   "description": "React UI Component for slideshow like SlideShare or SpeakerDeck.",

diff --git a/src/SlideShow.jsx b/src/SlideShow.jsx
@@ -366,7 +366,19 @@ export default class SlideShow extends React.Component {
         />
       );
     });
-    const fullscreenBottom = document.mozFullScreen ? 180 : 120;
+    let fullscreenBottom = 120;
+    const wrapper = document.querySelector('.slideshow-wrapper');
+    const content = document.querySelector('.content');
+    const progressBar = document.querySelector('.progressBar');
+    const bar = document.querySelector('.bar');
+    if (wrapper && content && progressBar && bar) {
+      fullscreenBottom =
+        window.screen.availHeight -
+        content.offsetHeight +
+        progressBar.offsetHeight +
+        bar.offsetHeight +
+        10;
+    }
     const bottom = this.state.isFullScreen
       ? fullscreenBottom
       : styles.PREVIEW.bottom;