v1.6.0/cross site party name history

- fix for room migrate
- fix for netflix listener

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 || '',
-      pin: LocalData().partyPin || '',
+      name: '',
+      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"
-            className="create-name addFocus"
-            label="Party Name"
-            variant="outlined"
-            value={name}
-            onChange={(e) => this.partyNameChange(e.target.value)}
-            helperText={name ? `${name.length}/${CONSTANTS.NAME_LENGTH} Characters` : null}
+            options={parties}
+            getOptionLabel={o => o.name}
+            autoComplete
+            freeSolo
+            inputValue={name}
+            onInputChange={(e,v,r) => this.partyNameAutocompleteProcessor(v)}
+            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
-                      .getElementsByClassName('AkiraPlayer')[0]
-                      .getElementsByTagName('video')[0];
+                    var nve = document.getElementsByClassName('AkiraPlayer')[0]? document.getElementsByClassName('AkiraPlayer')[0].getElementsByTagName('video')[0] : null;
                     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
-                    .getElementsByClassName('AkiraPlayer')[0]
-                    .getElementsByTagName('video')[0];
-                  if (nve !== null && (this.video.element !== nve || this.video.element === null)) {
+                  var nve = document.getElementsByClassName('AkiraPlayer')[0]? document.getElementsByClassName('AkiraPlayer')[0].getElementsByTagName('video')[0] : null;
+                  if (
+                    nve !== 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;
+}