add fullscreen support fix #61

medialab · Jul 5, 2019 · ab76298 · ab76298
1 parent 20a77d8
commit ab76298
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 31 deletions.
diff --git a/app/containers/Player/index.tsx b/app/containers/Player/index.tsx
@@ -8,9 +8,12 @@ import React, { useCallback, useRef, useState } from 'react';
 import { Map, withLeaflet, ZoomControl } from 'react-leaflet';
 import useMousetrap from 'react-hook-mousetrap';
 import { Button, Icon, Title } from 'quinoa-design-library';
+import { useFullScreen } from 'react-browser-hooks';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+import { faExpand } from '@fortawesome/free-solid-svg-icons/faExpand';
+import Tooltip from 'react-tooltip';
 import Modal from 'react-modal';
 
 import L from 'leaflet';
@@ -78,6 +81,7 @@ export const Player: React.SFC<PlayerContainerProps> = (props) => {
   const [mountSidebar, setMountSidebar] = useState<boolean>(false);
   const [isShareHelpOpen, setShareHelpOpen] = useState<boolean>(false);
   const [sidebarVisible, onClose, onOpen] = useToggleBoolean();
+  const fs = useFullScreen();
   const onPlay = useCallback(() => {
     onOpen();
     if (!selected) {
@@ -144,40 +148,45 @@ export const Player: React.SFC<PlayerContainerProps> = (props) => {
           selectedAnnotations={props.selectedAnnotations}
         />
       </Map>
+      <div className="player-actions-container">
+        {
+          props.viewerMode &&
+          <Button data-for="tooltip" data-tip="share this view" onClick={toggleShareHelpOpen} isRounded>
+            <Icon><FontAwesomeIcon icon={faShare} /></Icon>
+          </Button>
+        }
+        <Button data-for="tooltip" data-tip="fullscreen mode" onClick={fs.toggle} isRounded>
+            <Icon><FontAwesomeIcon icon={faExpand} /></Icon>
+        </Button>
+      </div>
       {
         props.viewerMode &&
-        <>
-          <div className="share-ui-container">
-            <Button onClick={toggleShareHelpOpen} isRounded>
-              <Icon><FontAwesomeIcon icon={faShare} /></Icon>
-            </Button>
-          </div>
-          <Modal
-            isOpen={isShareHelpOpen}
-            onRequestClose={toggleShareHelpOpen}
-            contentLabel="Share this document"
-          >
-            <div className="modal-content-container">
-              <div className="modal-content-header">
-                <Title isSize="3">
-                  <span>Share this document</span>
-                  <span>
-                    <Button onClick={toggleShareHelpOpen} isRounded>
-                      <Icon><FontAwesomeIcon icon={faTimes} /></Icon>
-                    </Button>
-                  </span>
-                </Title>
-              </div>
-              <div className="modal-content-body">
-                <div>Share the URL address of this document:</div>
-                <pre><code>{window.location.href}</code></pre>
-                <div>Embed this document in another page or application:</div>
-                <pre><code>{`<iframe src="${window.location.href}"></iframe>`}</code></pre>
-              </div>
+        <Modal
+          isOpen={isShareHelpOpen}
+          onRequestClose={toggleShareHelpOpen}
+          contentLabel="Share this document"
+        >
+          <div className="modal-content-container">
+            <div className="modal-content-header">
+              <Title isSize="3">
+                <span>Share this document</span>
+                <span>
+                  <Button onClick={toggleShareHelpOpen} isRounded>
+                    <Icon><FontAwesomeIcon icon={faTimes} /></Icon>
+                  </Button>
+                </span>
+              </Title>
+            </div>
+            <div className="modal-content-body">
+              <div>Share the URL address of this document:</div>
+              <pre><code>{window.location.href}</code></pre>
+              <div>Embed this document in another page or application:</div>
+              <pre><code>{`<iframe src="${window.location.href}"></iframe>`}</code></pre>
             </div>
-          </Modal>
-        </>
+          </div>
+        </Modal>
       }
+      <Tooltip id="tooltip" place="left" effect="solid" />
     </div>
   );
 };

diff --git a/app/containers/Player/style.css b/app/containers/Player/style.css
@@ -34,11 +34,17 @@
     padding: 1rem;
 }
 
-.share-ui-container{
+.player-actions-container{
     position: absolute;
     bottom: 1rem;
     right: 1rem;
     z-index: 1000;
+    display: flex;
+    flex-flow: column nowrap;
+}
+
+.player-actions-container .button {
+    margin-bottom: .5rem;
 }
 
 .sidebar.player-sidebar .sidebar--item-field--selected.sidebar--item-field--minified {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -112,6 +112,7 @@
     "ramda": "^0.26.1",
     "react": "16.8.6",
     "react-beautiful-dnd": "^11.0.4",
+    "react-browser-hooks": "^2.2.3",
     "react-dom": "16.8.6",
     "react-file-drop": "^0.2.8",
     "react-helmet": "5.2.1",