v1.7.16/release - fix keyboard shortcut

app/package.json

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

app/public/background.js

@@ -26,7 +26,7 @@ try {
   console.info("CHROME ENV");
 }
 
-const APP_VERSION = "1.7.15";
+const APP_VERSION = "1.7.16";
 
 const firebaseConfig = {
   apiKey: "AIzaSyCJLuYpzXLDRmu2ttzFuSGmYcpFxqToWFU",

app/public/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Watch Party",
   "short_name": "WP",
-  "version": "1.7.15",
+  "version": "1.7.16",
   "description": "Watch streamed content together.",
   "background": {
     "page": "background.html"

app/src/App.js

@@ -32,7 +32,7 @@ import {
 } from "./Api";
 import Tutorial from "./Tutorial";
 
-const APP_VERSION = "1.7.15";
+const APP_VERSION = "1.7.16";
 
 const darkTheme = createMuiTheme({
   palette: {

app/src/Chat.js

@@ -1137,7 +1137,8 @@ export default class Chat extends Component {
             variant="outlined"
             className="chat-message-box addFocus"
             value={newMessage}
-            onChange={(e) => {
+            onChangeCapture={(e) => {
+              e.stopPropagation();
               this.setState({ newMessage: e.target.value });
               scrollThread();
               if (gif) {

app/src/Create.js

@@ -89,25 +89,18 @@ export default class Create extends Component {
     this.createCall = this.createCall.bind(this);
     this.joinCall = this.joinCall.bind(this);
     this.success = this.success.bind(this);
-    this.partyNameAutocompleteProcessor = this.partyNameAutocompleteProcessor.bind(
-      this
-    );
+    this.partyNameAutocompleteProcessor =
+      this.partyNameAutocompleteProcessor.bind(this);
     this.updateAllowAutoRejoin = this.updateAllowAutoRejoin.bind(this);
     this.updateAllowAutoFollow = this.updateAllowAutoFollow.bind(this);
-    this.updateAllowChatNotification = this.updateAllowChatNotification.bind(
-      this
-    );
+    this.updateAllowChatNotification =
+      this.updateAllowChatNotification.bind(this);
     this.clearPartyHistory = this.clearPartyHistory.bind(this);
     this.handleSteps = this.handleSteps.bind(this);
   }
   componentDidMount() {
-    const {
-      lastActive,
-      userName,
-      partyName,
-      partyPin,
-      allowAutoRejoin,
-    } = LocalData();
+    const { lastActive, userName, partyName, partyPin, allowAutoRejoin } =
+      LocalData();
     // CONTINUE TUTORIAL
     if (this.props.tutorialComplete === false) {
       this.props.resetTutorial();
@@ -343,7 +336,10 @@ export default class Create extends Component {
             label="Name"
             variant="outlined"
             value={userName}
-            onChange={(e) => this.userNameChange(e.target.value)}
+            onChangeCapture={(e) => {
+              e.stopPropagation();
+              this.userNameChange(e.target.value);
+            }}
             helperText={
               userName
                 ? `${userName.length}/${CONSTANTS.USER_NAME_LENGTH} Characters`
@@ -357,10 +353,12 @@ export default class Create extends Component {
             autoComplete
             freeSolo
             value={{ name: name, pin: pin }}
-            onInputChange={(e, v, r) =>
-              this.partyNameAutocompleteProcessor({ name: v, pin: pin })
-            }
-            onChange={(e, v) => this.partyNameAutocompleteProcessor(v)}
+            onInputChange={(e, v, r) => {
+              this.partyNameAutocompleteProcessor({ name: v, pin: pin });
+            }}
+            onChange={(e, v) => {
+              this.partyNameAutocompleteProcessor(v);
+            }}
             renderInput={(params) => (
               <TextField
                 color="secondary"
@@ -385,9 +383,14 @@ export default class Create extends Component {
             variant="outlined"
             type="number"
             value={pin}
-            onChange={(e) => this.partyPinChange(e.target.value)}
+            onChangeCapture={(e) => {
+              this.partyPinChange(e.target.value);
+              e.stopPropagation();
+            }}
             helperText={
-              pin ? `${pin.length}/${CONSTANTS.PIN_LENGTH} Digits` : null
+              pin
+                ? `${pin.length}/${CONSTANTS.PIN_LENGTH} Digits`
+                : "Numbers only"
             }
           />
           <FormControlLabel
@@ -415,31 +418,6 @@ export default class Create extends Component {
             }
             labelPlacement="end"
           />
-          {/* <FormControlLabel
-            className={`notification-switch admin-only-switch ${
-              mode !== "create" ? "admin-only-switch-hidden" : ""
-            }`}
-            control={
-              <Switch
-                checked={publicParty}
-                onChange={() => this.setState({ publicParty: !publicParty })}
-                name="publicParty"
-                color={publicParty ? "secondary" : "primary"}
-              />
-            }
-            label={
-              <span>
-                Public Party (can be changed later)
-                <br />
-                <span style={{ color: "#8a8a8a" }}>
-                  {publicParty
-                    ? "Party will be listed and available to join from Watch Party website"
-                    : "Only people you share with can join"}
-                </span>
-              </span>
-            }
-            labelPlacement="end"
-          /> */}
           <Button
             size="small"
             variant="contained"
@@ -665,6 +643,7 @@ export default class Create extends Component {
           >
             Donate
           </Button>
+          z
         </div>
       </div>
     );

app/src/index.css

@@ -58,7 +58,6 @@ body.visible .party-notification-container {
   font-size: 16px;
   width: fit-content;
   user-select: none;
-  transition: all ease-in-out 0.3s;
 }
 
 body.visible #party-width-dragger {
@@ -135,7 +134,7 @@ body.youtube.visible ytd-miniplayer {
 /* AMAZON STYLING FIX */
 body.amazon-prime,
 body.amazon-prime.visible {
-    background-color: initial !important;
+  background-color: initial !important;
 }
 body.amazon-prime #party-routes-wrapper input,
 body.amazon-prime #party-routes-wrapper textarea {
@@ -161,7 +160,7 @@ body.amazon-prime #pv-nav {
   max-width: var(--body-width);
 }
 body.amazon-prime #party_wrapper input {
-    background: initial !important;
+  background: initial !important;
 }
 /* PEACOCK STYLING FIX */
 body.peacock.visible .header-buttons {
@@ -248,7 +247,7 @@ body.crunchyroll.visible #vilos-player {
 }
 body.crunchyroll,
 body.crunchyroll.visible {
-    background-color: #f2f2f2 !important;
+  background-color: #f2f2f2 !important;
 }
 /* APPLE TV STYLING */
 body.apple .thread-wrapper .ReactVirtualized__Grid__innerScrollContainer {
@@ -380,7 +379,9 @@ body.visible.hbo > div.default > div:nth-child(2) > div > div > div > div {
 body.visible.imdb-tv {
   max-width: var(--body-width) !important;
 }
-body.visible.imdb-tv .freedive-video-container .freedive-video-modal.modal__open {
+body.visible.imdb-tv
+  .freedive-video-container
+  .freedive-video-modal.modal__open {
   max-width: var(--body-width);
 }
 /* PARAMOUNT FIXES */

app/src/index.js

@@ -24,41 +24,41 @@ const PartyWrapper = document.createElement("div");
 PartyWrapper.id = "party_wrapper";
 document.body.appendChild(PartyWrapper);
 
-window.addEventListener(
+document.addEventListener(
   "keydown",
   (ev) => {
-    ev.stopImmediatePropagation();
-    ev.stopPropagation();
-    if (ev.target.tagName === "INPUT" || ev.target.tagName === "TEXTAREA") {
-      document.querySelector('.chat-message-box').dispatchEvent(ev);      
+    if (
+      PartyWrapper.contains(ev.target) ||
+      ev.target.classList.contains("MuiAutocomplete-popper")
+    ) {
+      ev.stopImmediatePropagation();
+      ev.stopPropagation();
     }
   },
   { capture: true }
 );
 
-var cssId = 'watch-party-dynamic-styles';
-var head  = document.getElementsByTagName('head')[0];
-var link  = document.createElement('link');
-link.id   = cssId;
-link.rel  = 'stylesheet';
-link.type = 'text/css';
-link.href = 'https://www.chromewatchparty.com/styles/dynamic.css';
-link.media = 'all';
+var cssId = "watch-party-dynamic-styles";
+var head = document.getElementsByTagName("head")[0];
+var link = document.createElement("link");
+link.id = cssId;
+link.rel = "stylesheet";
+link.type = "text/css";
+link.href = "https://www.chromewatchparty.com/styles/dynamic.css";
+link.media = "all";
 head.appendChild(link);
 
 switch (getPlayerSource()) {
   case PLAYER_SOURCE.NETFLIX:
     document.body.classList.add("netflix");
-
     break;
   case PLAYER_SOURCE.HULU:
-
     document.body.classList.add("hulu");
     break;
+  case PLAYER_SOURCE.IMDB:
+    document.body.classList.add("imdb-tv");
+    break;
   case PLAYER_SOURCE.AMAZON:
-    if (window.location.href.includes(PLAYER_SOURCE.IMDB)) {
-      document.body.classList.add("imdb-tv");
-    }
     document.body.classList.add("amazon-prime");
     break;
   case PLAYER_SOURCE.DISNEY:
@@ -80,10 +80,12 @@ switch (getPlayerSource()) {
         const tutorialWrapper = document.querySelector(".watch-party-tutorial");
         if (
           (partyWrapper && partyWrapper.contains(ev.target)) ||
-          (tutorialWrapper && tutorialWrapper.contains(ev.target))
+          (tutorialWrapper && tutorialWrapper.contains(ev.target)) ||
+          ev.target.classList.contains("MuiAutocomplete-popper")
         ) {
+          ev.stopImmediatePropagation();
+          ev.stopPropagation();
           if (ev.target.id !== "party-width-dragger") {
-            ev.stopImmediatePropagation();
             ev.preventDefault();
           }
           if (