v1.6.4/version bump

- hide/show button
- popup redesign
- start of tutorial

app/src/App.js

@@ -17,9 +17,16 @@ import Loading from './Loading';
 import firebase from 'firebase/app';
 import 'firebase/firestore';
 import Inactive from './Inactive';
-import { getUserUid, getPlayerSource, PLAYER_SOURCE } from './Api';
+import {
+  getUserUid,
+  getPlayerSource,
+  PLAYER_SOURCE,
+  getShowWPButton,
+  getTutorialStatus,
+} from './Api';
+import Tutorial from './Tutorial';
 
-const APP_VERSION = '1.6.3';
+const APP_VERSION = '1.6.4';
 const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
 
 const darkTheme = createMuiTheme({
@@ -67,6 +74,7 @@ const startResize = (ev) => {
 const App = () => {
   const closedNotification = { open: false, message: '' };
 
+  const [tutorialComplete, setTutorialComplete] = useState(false);
   const [status, setStatus] = useState({ active: false, message: '' });
   const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -85,8 +93,15 @@ const App = () => {
         setStatus(statusSnap.data());
         setLoading(false);
       });
+    getShowWPButton().then((showWPButton) => {
+      if (showWPButton === true) {
+        document.querySelector('.watch-party-fab').classList.remove('watch-party-fab-hidden');
+      }
+    });
   }, []);
 
+  getTutorialStatus().then((v) => setTutorialComplete(v));
+
   // HANDLE VISIBILITY STYLING
   const PartyRoutesWrapper = document.getElementById('party-routes-wrapper');
   if (visible) {
@@ -129,6 +144,10 @@ const App = () => {
         message={notification.message}
         autoHideDuration={6000}
       />
+      <Tutorial
+        setTutorialCompleteState={setTutorialComplete}
+        tutorialComplete={tutorialComplete}
+      />
       <div className="party-content-wrapper">
         <div id="party-routes-wrapper">
           <Tooltip
@@ -150,6 +169,7 @@ const App = () => {
               status={status[APP_VERSION_STRING]}
               selectors={status.selectors}
               nameSelectors={status.nameSelectors}
+              setVisible={setVisible}
             />
           ) : (
             <Inactive
@@ -161,7 +181,10 @@ const App = () => {
             />
           )}
         </div>
-        <Fab onClick={() => setVisible(!visible)} className="watch-party-fab">
+        <Fab
+          onClick={() => setVisible(!visible)}
+          className="watch-party-fab watch-party-fab-hidden"
+        >
           <span />
         </Fab>
       </div>