v1.6.0/cross site party name history

- fix for room migrate
- fix for netflix listener

app/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-party-crx",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1611,6 +1611,30 @@
         "@babel/runtime": "^7.4.4"
       }
     },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.56",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz",
+      "integrity": "sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.10.2",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      },
+      "dependencies": {
+        "@material-ui/utils": {
+          "version": "4.10.2",
+          "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz",
+          "integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==",
+          "requires": {
+            "@babel/runtime": "^7.4.4",
+            "prop-types": "^15.7.2",
+            "react-is": "^16.8.0"
+          }
+        }
+      }
+    },
     "@material-ui/styles": {
       "version": "4.9.10",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.10.tgz",
@@ -5152,9 +5176,9 @@
       "integrity": "sha512-9jGNF78o450ymPf63n7/j1HrRAD4xGTsDkKY2X6jtCAWaYgph2A9xQjwfwRpj+AovkARMO+JfZuVCFTdandD6w=="
     },
     "elliptic": {
-      "version": "6.5.2",
+      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
-      "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
       "dev": true,
       "requires": {
         "bn.js": "^4.4.0",

app/package.json

@@ -7,6 +7,7 @@
     "@giphy/react-components": "^1.0.4",
     "@material-ui/core": "^4.9.10",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "@voxeet/voxeet-web-sdk": "^2.3.1",
     "autoprefixer": "7.1.6",
     "babel-core": "6.26.3",

app/public/background.js

@@ -84,6 +84,9 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     case 'GET_AUTH':
       sendAuth(sendResponse);
       break;
+    case 'GET_PARTIES':
+      sendResponse(window.localStorage.getItem('parties') ? JSON.parse(window.localStorage.getItem('parties')): []);
+      break;
     default:
       console.warn('Unknown message type: <', type, '>');
       break;
@@ -98,7 +101,7 @@ chrome.runtime.onConnect.addListener((port) => {
     port.messageListener && port.messageListener();
   });
   port.onMessage.addListener((request) => {
-    const { type, roomId } = request;
+    const { type, roomId, roomPin } = request;
     if (type === 'INIT') {
       port.roomListener = firebase
         .firestore()
@@ -152,6 +155,21 @@ chrome.runtime.onConnect.addListener((port) => {
             port.postMessage({ isError: true, ...err });
           }
         );
+      if (window.localStorage.getItem('parties')) {
+        var existing = JSON.parse(window.localStorage.getItem('parties'));
+        if (!(existing.filter(i => i.name === roomId).length > 0)){
+          existing.push({
+            name: roomId,
+            pin: roomPin
+          });
+          window.localStorage.setItem('parties', JSON.stringify(existing));
+        }
+      } else {
+        window.localStorage.setItem('parties', JSON.stringify([{
+          name: roomId,
+          pin: roomPin,
+        }]));
+      }
     }
   });
-});
+});

app/public/popup.html

@@ -19,6 +19,10 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
 <!DOCTYPE html>
 <html>
   <head>
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src *; style-src 'self' https://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'"
+    />
     <style>
       a {
         display: table;
@@ -34,6 +38,7 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
         cursor: pointer;
         border-radius: 36px;
         text-decoration: none;
+        outline: none;;
       }
       p {
         word-break: break-word;
@@ -50,15 +55,30 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
         background-color: #c0f300;
         color: black;
       }
-
       body {
         min-width: max-content;
         padding: 5px 10px;
         background: #424242;
       }
+      button {
+        padding: 7.5px 3px;
+        margin: 10px 0;
+        border-radius: 13px;
+        width: 100%;
+        background: #c0f300;
+        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 {
+        filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.7)) !important;
+      }
     </style>
   </head>
   <body>
+    <script src="popup.js"></script>
     <p>
       NOTHING TO DO HERE. GO TO A SUPPORTED WEBSITE, AND LOOK FOR WATCH PARTY IN THE BOTTOM RIGHT
       CORNER OF YOUR SCREEN
@@ -67,5 +87,7 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
     <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 target="_blank" href="https://paypal.me/Ayushya">Donate</a>
+    <p style="width: 100%; max-width: 100%;"></p>
+    <button id="clear-button">Clear Party Names & Pins</button>
   </body>
 </html>

app/public/popup.js

@@ -0,0 +1,7 @@
+function clearLocal() {
+    window.localStorage.removeItem('parties');
+    return 0;
+}
+window.onload = function () {
+    document.getElementById('clear-button').onclick = clearLocal;
+}

app/src/Chat.js

@@ -167,6 +167,7 @@ export default class Chat extends Component {
     this.port.postMessage({
       type: 'INIT',
       roomId: LocalData().partyName,
+      roomPin: LocalData().partyPin
     });
     // Listener
     this.port.onMessage.addListener((response) => {

app/src/Create.js

@@ -16,6 +16,7 @@ YouTube logo is a trademark and intellectual property of Google, Inc.
 Hulu logo is a trademark and intellectual property of Hulu, LLC.
 HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia Direct,LLC.
 ************************************************************************/
+/*global chrome */
 import React, { Component } from 'react';
 import { Button, TextField, Typography, Paper, ButtonGroup } from '@material-ui/core';
 import {
@@ -35,6 +36,7 @@ import {
   MonetizationOnRounded,
   RateReviewRounded,
 } from '@material-ui/icons';
+import { Autocomplete } from "@material-ui/lab";
 
 const CONSTANTS = {
   USER_NAME_LENGTH: 12,
@@ -47,13 +49,15 @@ export default class Create extends Component {
     const defaultMode = LocalData().partyName ? 'join' : 'create';
     this.state = {
       userName: LocalData().userName || '',
-      name: LocalData().partyName || '',
+      name: '',
-      pin: LocalData().partyPin || '',
+      pin: '',
       mode: defaultMode,
+      parties: []
     };
     this.createCall = this.createCall.bind(this);
     this.joinCall = this.joinCall.bind(this);
     this.success = this.success.bind(this);
+    this.partyNameAutocompleteProcessor = this.partyNameAutocompleteProcessor.bind(this);
   }
   componentDidMount() {
     const { lastActive, userName, partyName, partyPin, allowAutoRejoin } = LocalData();
@@ -63,6 +67,14 @@ export default class Create extends Component {
         this.joinCall(userName, partyName, partyPin);
       }
     }
+    chrome.runtime.sendMessage(
+      {
+        type: 'GET_PARTIES'
+      },
+      (response) => {
+        this.setState({parties: response});
+      }
+    );
   }
   partyNameChange(value) {
     if (value.length <= CONSTANTS.NAME_LENGTH) this.setState({ name: value });
@@ -167,8 +179,21 @@ export default class Create extends Component {
     this.props.updateLoading(false);
     goTo(Chat, this.props);
   }
+  partyNameAutocompleteProcessor (v) {
+    if (v  !== null && v !== undefined && typeof(v) === 'object') {
+      if (v.name) this.partyNameChange(v.name);
+      else this.partyNameChange('');
+      if (v.pin) this.partyPinChange(v.pin);
+      else this.partyPinChange('');
+    } else if (typeof(v) === 'object' && (v  === null || v === undefined)) {
+      this.partyNameChange('');
+      this.partyPinChange('');
+    } else if (v !== undefined && v !== null && typeof(v) === 'string') {
+      this.partyNameChange(v);
+    }
+  } 
   render() {
-    const { mode, name, pin, userName } = this.state;
+    const { mode, name, pin, userName, parties } = this.state;
     return (
       <div className="party-create-container">
         <Typography
@@ -213,15 +238,25 @@ export default class Create extends Component {
               userName ? `${userName.length}/${CONSTANTS.USER_NAME_LENGTH} Characters` : null
             }
           />
-          <TextField
+          <Autocomplete
             color="secondary"
-            size="small"
+            options={parties}
-            className="create-name addFocus"
+            getOptionLabel={o => o.name}
-            label="Party Name"
+            autoComplete
-            variant="outlined"
+            freeSolo
-            value={name}
+            inputValue={name}
-            onChange={(e) => this.partyNameChange(e.target.value)}
+            onInputChange={(e,v,r) => this.partyNameAutocompleteProcessor(v)}
-            helperText={name ? `${name.length}/${CONSTANTS.NAME_LENGTH} Characters` : null}
+            onChange={(e, v) => this.partyNameAutocompleteProcessor(v)}
+            renderInput={(params) => 
+              <TextField
+                color="secondary"
+                size="small"
+                {...params}
+                className="create-name addFocus"
+                label="Party Name"
+                variant="outlined"
+                helperText={name ? `${name.length}/${CONSTANTS.NAME_LENGTH} Characters` : null}
+            />}
           />
           <TextField
             color="secondary"

app/src/VideoListener.js

@@ -271,9 +271,7 @@ export default class VideoListener {
               this.video.element
                 ? null
                 : () => {
-                    var nve = document
+                    var nve = document.getElementsByClassName('AkiraPlayer')[0]? document.getElementsByClassName('AkiraPlayer')[0].getElementsByTagName('video')[0] : null;
-                      .getElementsByClassName('AkiraPlayer')[0]
-                      .getElementsByTagName('video')[0];
                     if (
                       nve !== null &&
                       (this.video.element !== nve || this.video.element === null)
@@ -289,10 +287,11 @@ export default class VideoListener {
             this.video.element
               ? null
               : () => {
-                  var nve = document
+                  var nve = document.getElementsByClassName('AkiraPlayer')[0]? document.getElementsByClassName('AkiraPlayer')[0].getElementsByTagName('video')[0] : null;
-                    .getElementsByClassName('AkiraPlayer')[0]
+                  if (
-                    .getElementsByTagName('video')[0];
+                    nve !== null &&
-                  if (nve !== null && (this.video.element !== nve || this.video.element === null)) {
+                    (this.video.element !== nve || this.video.element === null)
+                  ) {
                     this.firstTimeSync(nve);
                   }
                 },

app/src/index.css

@@ -611,3 +611,7 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
   font-weight: 300 !important;
   color: #c0f300 !important;
 }
+
+.MuiAutocomplete-popper {
+  z-index: 99999 !important;
+}

functions/modules2/joinRoom.js

@@ -136,7 +136,7 @@ module.exports = async (req, res) => {
         .update({
           player: {
             showName: null,
-            source: roomSource,
+            source: bodydata.source,
             status: 'NOT_PLAYING',
             time: 0,
             updatedBy: bodydata.uid,