v1.6.4/version bump

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

admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-party-admin",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.2.2",

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-party-crx",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "private": true,
   "dependencies": {},
   "scripts": {

app/public/background.js

@@ -12,7 +12,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 /* global chrome */
 /* global firebase */
 
-const APP_VERSION = '1.6.3';
+const APP_VERSION = '1.6.4';
 const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
 
 const firebaseConfig = {
@@ -127,6 +127,23 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     case 'EMPTY_PARTIES':
       window.localStorage.removeItem('parties');
       break;
+    case 'IS_HIDDEN':
+      sendResponse(
+        window.localStorage.getItem('showWPButton')
+          ? JSON.parse(window.localStorage.getItem('showWPButton'))
+          : true
+      );
+      break;
+    case 'GET_TUTORIAL':
+      sendResponse(
+        window.localStorage.getItem('tutorialComplete')
+          ? JSON.parse(window.localStorage.getItem('tutorialComplete'))
+          : false
+      );
+      break;
+    case 'SET_TUTORIAL':
+      window.localStorage.setItem('tutorialComplete', request.status);
+      break;
     default:
       console.warn('Unknown message type: <', type, '>');
       break;

app/public/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Watch Party",
   "short_name": "WP",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "Watch streamed content together.",
   "background": {
     "page": "background.html"
@@ -21,7 +21,7 @@
     "https://play.google.com/movies/*",
     "https://*.crunchyroll.com/*"
   ],
-  "content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'",
+  "content_security_policy": "script-src 'self' https://unpkg.com/ https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'",
   "content_scripts": [
     {
       "matches": [

app/public/popup.html

@@ -17,70 +17,127 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       content="default-src *; style-src 'self' https://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'"
     />
     <style>
-      a {
+      :root {
-        display: table;
+        --mdc-theme-primary: #c0f300 !important;
-        min-width: max-content;
+        --mdc-theme-secondary: #000000 !important;
-        text-align: center;
+        --mdc-theme-background: #c0f300 !important;
-        width: calc(100%-20px);
+        --mdc-theme-surface: #000000 !important;
-        color: #c0f300;
+        --mdc-theme-on-primary: #000000 !important;
-        margin: 10px auto;
+        --mdc-theme-on-secondary: #c0f300 !important;
-        padding: 5px 10px;
+        --mdc-theme-on-surface: #c0f300 !important;
-        text-transform: uppercase;
+        --mdc-theme-text-primary-on-light: #000000 !important;
-        letter-spacing: 1.5px;
+        --mdc-theme-text-secondary-on-light: #2c2c2c !important;
-        transition: all ease-out 0.3s;
+        --mdc-theme-text-hint-on-light: #363636 !important;
-        cursor: pointer;
+        --mdc-theme-text-disabled-on-light: #555555 !important;
-        border-radius: 36px;
+        --mdc-theme-text-icon-on-light: #000000 !important;
-        text-decoration: none;
+        --mdc-theme-text-primary-on-dark: #c0f300 !important;
-        outline: none;
+        --mdc-theme-text-secondary-on-dark: #f7ff56 !important;
+        --mdc-theme-text-hint-on-dark: #fbffb3 !important;
+        --mdc-theme-text-disabled-on-dark: #8bc000 !important;
+        --mdc-theme-text-icon-on-dark: #c0f300 !important;
       }
-      p {
+      .mdc-button {
-        word-break: break-word;
+        display: block;
-        max-width: fit-content;
+        width: 100%;
-        border-bottom: 1px solid #888888;
+        margin: 2.5px 0px;
-        padding-bottom: 20px;
-        color: white;
-        text-transform: uppercase;
-        letter-spacing: 1.5px;
-        text-align: center;
-        line-height: 1.5;
-      }
-      a:hover {
-        background-color: #c0f300;
-        color: black;
       }
       body {
-        min-width: max-content;
+        background: var(--mdc-theme-text-secondary-on-light);
-        padding: 5px 10px;
+        padding: 15px;
-        background: #424242;
       }
-      button {
+      #clear-button {
-        padding: 7.5px 3px;
+        width: max-content;
-        margin: 10px 0;
+      }
-        border-radius: 13px;
+      .mdc-switch {
+        --mdc-theme-secondary: #c0f300 !important;
+        --mdc-theme-surface: #ffffff !important;
+        margin: 10px 5px;
+      }
+      label {
+        color: var(--mdc-theme-text-primary-on-dark);
+        text-transform: uppercase;
+      }
+      .switch-container {
+        margin: 20px 0;
+      }
+      .switch-wrapper {
+        display: flex;
+        justify-content: center;
         width: 100%;
-        background: #c0f300;
+        align-items: center;
-        outline: none !important;
-        border: none;
-        cursor: pointer;
-        filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.7));
-        transition: all ease-in 0.3s;
       }
-      button:hover {
+      .switch-wrapper .label-container {
-        filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.7)) !important;
+        margin-left: 5px;
+        flex: 1;
+      }
+      .switch-wrapper .label-container span {
+        color: var(--mdc-theme-text-hint-on-dark);
       }
     </style>
+    <link
+      href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
+      rel="stylesheet"
+    />
+    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
   </head>
   <body>
     <script src="popup.js"></script>
-    <p>
+    <a class="mdc-button" target="_blank" href="https://www.chromewatchparty.com/welcome">
-      NOTHING TO DO HERE. GO TO A SUPPORTED WEBSITE, AND LOOK FOR WATCH PARTY IN THE BOTTOM RIGHT
+      <div class="mdc-button__ripple"></div>
-      CORNER OF YOUR SCREEN
+      <i class="material-icons mdc-button__icon" aria-hidden="true">school</i>
-    </p>
+      <span class="mdc-button__label">HOW TO GET STARTED</span>
-    <a target="_blank" href="https://www.chromewatchparty.com/welcome">HOW TO GET STARTED</a>
+    </a>
-    <a target="_blank" href="https://www.chromewatchparty.com/welcome/#tips">FAQ</a>
+
-    <a target="_blank" href="mailto:admin@chromewatchparty.com?subject=User Feedback">Feedback</a>
+    <a class="mdc-button" target="_blank" href="https://www.chromewatchparty.com/welcome#tips">
-    <a target="_blank" href="https://paypal.me/Ayushya">Donate</a>
+      <div class="mdc-button__ripple"></div>
-    <p style="width: 100%; max-width: 100%;"></p>
+      <i class="material-icons mdc-button__icon" aria-hidden="true">support</i>
-    <button id="clear-button">Clear Party Names & Pins</button>
+      <span class="mdc-button__label">FAQ</span>
+    </a>
+
+    <a
+      class="mdc-button"
+      target="_blank"
+      href="mailto:admin@chromewatchparty.com?subject=User Feedback"
+    >
+      <div class="mdc-button__ripple"></div>
+      <i class="material-icons mdc-button__icon" aria-hidden="true">question_answer</i>
+      <span class="mdc-button__label">Feedback</span>
+    </a>
+
+    <a class="mdc-button" target="_blank" href="https://paypal.me/Ayushya">
+      <div class="mdc-button__ripple"></div>
+      <i class="material-icons mdc-button__icon" aria-hidden="true">attach_money</i>
+      <span class="mdc-button__label">Donate</span>
+    </a>
+
+    <div class="switch-container">
+      <div class="switch-wrapper">
+        <div class="mdc-switch">
+          <div class="mdc-switch__track"></div>
+          <div class="mdc-switch__thumb-underlay">
+            <div class="mdc-switch__thumb"></div>
+            <input
+              type="checkbox"
+              id="another-basic-switch"
+              class="mdc-switch__native-control"
+              role="switch"
+            />
+          </div>
+        </div>
+        <div class="label-container">
+          <label for="another-basic-switch">Show / hide Watch Party button</label>
+          <span>Currently showing Watch Party button</span>
+        </div>
+      </div>
+      <div style="width: 100%; display: block; color: var(--mdc-theme-text-hint-on-dark)">
+        Refresh page after changing show/hide status.
+      </div>
+    </div>
+
+    <button id="clear-button" class="mdc-button mdc-button--raised">
+      <div class="mdc-button__ripple"></div>
+      <span class="mdc-button__label">Forget Party Names & Pins</span>
+    </button>
   </body>
 </html>

app/public/popup.js

@@ -9,10 +9,43 @@ ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, U
 CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
 COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 ************************************************************************/
+window.onload = function () {
+  const MDCSwitch = mdc.switchControl.MDCSwitch;
+  const switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));
+
   function clearLocal() {
     window.localStorage.removeItem('parties');
     return 0;
   }
-window.onload = function () {
+  function setShowWPButton(v) {
+    window.localStorage.setItem('showWPButton', v);
+  }
+  function getShowWPButton() {
+    return window.localStorage.getItem('showWPButton')
+      ? JSON.parse(window.localStorage.getItem('showWPButton'))
+      : true;
+  }
+  function toggleShowWPButton() {
+    const currentStatus = getShowWPButton();
+    setShowWPButton(!currentStatus);
+    switchControl.checked = !currentStatus;
+    changeShowWPButtonDescription();
+  }
+  function changeShowWPButtonDescription() {
+    const currentStatus = getShowWPButton();
+    if (currentStatus === true) {
+      document.querySelector('.switch-wrapper span').innerText =
+        'Currently showing Watch Party button';
+    } else {
+      document.querySelector('.switch-wrapper span').innerText =
+        'Watch Party button is currently hidden';
+    }
+  }
+
+  switchControl.checked = getShowWPButton();
+  changeShowWPButtonDescription();
+  document.querySelector('.mdc-switch').onchange = toggleShowWPButton;
+
+  mdc.ripple.MDCRipple.attachTo(document.getElementById('clear-button'));
   document.getElementById('clear-button').onclick = clearLocal;
 };

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;
+}

functions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-party-api",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "Cloud Functions for Watch Party",
   "scripts": {
     "lint": "eslint .",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-party",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "Watch Party",
   "scripts": {
     "start": "firebase emulators:start",