v1.6.4/version bump

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

app/src/Api.js

@@ -48,6 +48,43 @@ export const getPlayerSource = () => {
   if (HREF.includes(PLAYER_SOURCE.LOCAL)) return PLAYER_SOURCE.LOCAL;
 };
 
+export const getShowWPButton = () =>
+  new Promise((resolve, reject) => {
+    chrome.runtime.sendMessage(
+      {
+        type: 'IS_HIDDEN',
+      },
+      (response) => {
+        resolve(response);
+      }
+    );
+  });
+
+export const getTutorialStatus = () =>
+  new Promise((resolve, reject) => {
+    chrome.runtime.sendMessage(
+      {
+        type: 'GET_TUTORIAL',
+      },
+      (response) => {
+        resolve(response);
+      }
+    );
+  });
+
+export const setTutorialStatus = (status) =>
+  new Promise((resolve, reject) => {
+    chrome.runtime.sendMessage(
+      {
+        type: 'SET_TUTORIAL',
+        status,
+      },
+      (response) => {
+        resolve(response);
+      }
+    );
+  });
+
 export const LocalData = () => {
   return window.localStorage.getItem('WatchParty')
     ? JSON.parse(window.localStorage.getItem('WatchParty'))

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>

app/src/Create.js

@@ -93,6 +93,7 @@ export default class Create extends Component {
     if (allowAutoRejoin === true && lastActive && userName && partyName && partyPin) {
       if (Math.abs(new Date(parseInt(lastActive)) - new Date().getTime()) <= 60000) {
         this.props.updateLoading(true);
+        this.props.setVisible(true);
         this.joinCall(userName, partyName, partyPin);
       }
     }

app/src/Tutorial.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { Popover } from '@material-ui/core';
+
+export default class Tutorial extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: !props.tutorialComplete,
+    };
+  }
+  render() {
+    const { open } = this.state;
+    return (
+      <Popover
+        className="watch-party-tutorial"
+        anchorEl={document.querySelector('.watch-party-fab')}
+        open={open}
+      >
+        TUTORIAL START
+      </Popover>
+    );
+  }
+}

app/src/index.css

@@ -319,6 +319,9 @@ body.disney #party_wrapper * {
   animation-duration: 2s;
   transition: all ease-in-out 0.3s !important;
 }
+.watch-party-fab.watch-party-fab-hidden {
+  display: none;
+}
 .watch-party-fab:hover {
   right: 0rem !important;
   background-size: 90%;
@@ -904,3 +907,10 @@ button.giphy-list-item {
   justify-content: center !important;
   align-items: center !important;
 }
+
+.watch-party-tutorial {
+  z-index: 9999 !important;
+}
+.watch-party-tutorial .MuiPaper-root.MuiPopover-paper {
+  padding: 20px;
+}