v1.6.6/release- chat fix- hbo click fix- hbo resize

app/package.json

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

app/public/background.js

@@ -12,18 +12,18 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 /* global chrome */
 /* global firebase */
 
-const APP_VERSION = "1.6.5";
-const APP_VERSION_STRING = APP_VERSION.replace(/\./g, "");
+const APP_VERSION = '1.6.6';
+const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
 
 const firebaseConfig = {
-  apiKey: "AIzaSyCJLuYpzXLDRmu2ttzFuSGmYcpFxqToWFU",
-  authDomain: "watch-party-crx.firebaseapp.com",
-  databaseURL: "https://watch-party-crx.firebaseio.com",
-  projectId: "watch-party-crx",
-  storageBucket: "watch-party-crx.appspot.com",
-  messagingSenderId: "712242707190",
-  appId: "1:712242707190:web:65fa7f772e30da364b0ad7",
-  measurementId: "G-EZS4PEVG4T",
+  apiKey: 'AIzaSyCJLuYpzXLDRmu2ttzFuSGmYcpFxqToWFU',
+  authDomain: 'watch-party-crx.firebaseapp.com',
+  databaseURL: 'https://watch-party-crx.firebaseio.com',
+  projectId: 'watch-party-crx',
+  storageBucket: 'watch-party-crx.appspot.com',
+  messagingSenderId: '712242707190',
+  appId: '1:712242707190:web:65fa7f772e30da364b0ad7',
+  measurementId: 'G-EZS4PEVG4T',
 };
 
 firebase.initializeApp(firebaseConfig);
@@ -44,8 +44,8 @@ const fetcher = async (request, sendResponse) => {
     method,
     headers: {
       Authorization: `Token ${idToken}:${firebase.auth().currentUser.uid}`,
-      "Access-Control-Allow-Origin": "*",
-      "Keep-Alive": true,
+      'Access-Control-Allow-Origin': '*',
+      'Keep-Alive': true,
     },
     ...request,
   })
@@ -73,37 +73,37 @@ const sendAuth = async (sendResponse) => {
 
 chrome.runtime.onInstalled.addListener((details) => {
   if (details.reason) {
-    if (details.reason === "install") {
-      if (window.localStorage.getItem("watchPartyVersion")) {
-        if (window.localStorage.getItem("watchPartyVersion") !== APP_VERSION) {
+    if (details.reason === 'install') {
+      if (window.localStorage.getItem('watchPartyVersion')) {
+        if (window.localStorage.getItem('watchPartyVersion') !== APP_VERSION) {
           chrome.tabs.create({
             url: `http://www.chromewatchparty.com/changes/v${APP_VERSION}`,
             active: true,
           });
-          window.localStorage.setItem("watchPartyVersion", APP_VERSION);
+          window.localStorage.setItem('watchPartyVersion', APP_VERSION);
         }
       } else {
         chrome.tabs.create({
-          url: "https://www.chromewatchparty.com/welcome",
+          url: 'https://www.chromewatchparty.com/welcome',
           active: true,
         });
-        window.localStorage.setItem("watchPartyVersion", APP_VERSION);
+        window.localStorage.setItem('watchPartyVersion', APP_VERSION);
       }
-    } else if (details.reason === "update") {
-      if (window.localStorage.getItem("watchPartyVersion")) {
-        if (window.localStorage.getItem("watchPartyVersion") !== APP_VERSION) {
+    } else if (details.reason === 'update') {
+      if (window.localStorage.getItem('watchPartyVersion')) {
+        if (window.localStorage.getItem('watchPartyVersion') !== APP_VERSION) {
           chrome.tabs.create({
             url: `http://www.chromewatchparty.com/changes/v${APP_VERSION}`,
             active: true,
           });
-          window.localStorage.setItem("watchPartyVersion", APP_VERSION);
+          window.localStorage.setItem('watchPartyVersion', APP_VERSION);
         }
       } else {
         chrome.tabs.create({
           url: `http://www.chromewatchparty.com/changes/v${APP_VERSION}`,
           active: true,
         });
-        window.localStorage.setItem("watchPartyVersion", APP_VERSION);
+        window.localStorage.setItem('watchPartyVersion', APP_VERSION);
       }
     }
   }
@@ -112,41 +112,41 @@ chrome.runtime.onInstalled.addListener((details) => {
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   const { type } = request;
   switch (type) {
-    case "API_CALL":
+    case 'API_CALL':
       fetcher(request, sendResponse);
       break;
-    case "GET_AUTH":
+    case 'GET_AUTH':
       sendAuth(sendResponse);
       break;
-    case "GET_PARTIES":
+    case 'GET_PARTIES':
       sendResponse(
-        window.localStorage.getItem("parties")
-          ? JSON.parse(window.localStorage.getItem("parties"))
+        window.localStorage.getItem('parties')
+          ? JSON.parse(window.localStorage.getItem('parties'))
           : []
       );
       break;
-    case "EMPTY_PARTIES":
-      window.localStorage.removeItem("parties");
+    case 'EMPTY_PARTIES':
+      window.localStorage.removeItem('parties');
       break;
-    case "IS_HIDDEN":
+    case 'IS_HIDDEN':
       sendResponse(
-        window.localStorage.getItem("showWPButton")
-          ? JSON.parse(window.localStorage.getItem("showWPButton"))
+        window.localStorage.getItem('showWPButton')
+          ? JSON.parse(window.localStorage.getItem('showWPButton'))
           : true
       );
       break;
-    case "GET_TUTORIAL":
+    case 'GET_TUTORIAL':
       sendResponse(
-        window.localStorage.getItem("tutorialComplete")
-          ? JSON.parse(window.localStorage.getItem("tutorialComplete"))
+        window.localStorage.getItem('tutorialComplete')
+          ? JSON.parse(window.localStorage.getItem('tutorialComplete'))
           : false
       );
       break;
-    case "SET_TUTORIAL":
-      window.localStorage.setItem("tutorialComplete", request.status);
+    case 'SET_TUTORIAL':
+      window.localStorage.setItem('tutorialComplete', request.status);
       break;
     default:
-      console.warn("Unknown message type: <", type, ">");
+      console.warn('Unknown message type: <', type, '>');
       break;
   }
   return true;
@@ -160,10 +160,10 @@ chrome.runtime.onConnect.addListener((port) => {
   });
   port.onMessage.addListener((request) => {
     const { type, roomId, roomPin } = request;
-    if (type === "INIT") {
+    if (type === 'INIT') {
       port.roomListener = firebase
         .firestore()
-        .collection("rooms")
+        .collection('rooms')
         .doc(roomId)
         .onSnapshot(
           (snap) => {
@@ -177,16 +177,14 @@ chrome.runtime.onConnect.addListener((port) => {
         );
       port.userListener = firebase
         .firestore()
-        .collection("rooms")
+        .collection('rooms')
         .doc(roomId)
-        .collection("users")
+        .collection('users')
         .onSnapshot(
           (snap) => {
             if (snap) {
               const isAdmin = snap.docs
-                .filter(
-                  (user) => user.id === firebase.auth().currentUser.uid
-                )[0]
+                .filter((user) => user.id === firebase.auth().currentUser.uid)[0]
                 .data().admin;
               const users = snap.docs.map((userSnap) => userSnap.data().name);
               port.postMessage({ admin: isAdmin, users });
@@ -198,10 +196,10 @@ chrome.runtime.onConnect.addListener((port) => {
         );
       port.messageListener = firebase
         .firestore()
-        .collection("rooms")
+        .collection('rooms')
         .doc(roomId)
-        .collection("messages")
-        .orderBy("time")
+        .collection('messages')
+        .orderBy('time')
         .onSnapshot(
           (snap) => {
             if (snap) {
@@ -215,18 +213,18 @@ chrome.runtime.onConnect.addListener((port) => {
             port.postMessage({ isError: true, ...err });
           }
         );
-      if (window.localStorage.getItem("parties")) {
-        var existing = JSON.parse(window.localStorage.getItem("parties"));
+      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));
+          window.localStorage.setItem('parties', JSON.stringify(existing));
         }
       } else {
         window.localStorage.setItem(
-          "parties",
+          'parties',
           JSON.stringify([
             {
               name: roomId,

app/public/manifest.json

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

app/src/Api.js

@@ -115,7 +115,7 @@ export const scrollThread = () => {
   setTimeout(function () {
     const pcc = document.querySelector('.thread-wrapper');
     if (pcc) pcc.scrollTop = pcc.scrollHeight;
-  }, 500);
+  }, 250);
 };
 
 export const getUserUid = async () =>

app/src/App.js

@@ -9,40 +9,34 @@ 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.
 ************************************************************************/
-import React, { useState, useEffect } from "react";
-import Router from "route-lite";
-import {
-  Fab,
-  createMuiTheme,
-  ThemeProvider,
-  Snackbar,
-  Tooltip,
-} from "@material-ui/core";
-import Create from "./Create";
-import Loading from "./Loading";
-import firebase from "firebase/app";
-import "firebase/firestore";
-import Inactive from "./Inactive";
+import React, { useState, useEffect } from 'react';
+import Router from 'route-lite';
+import { Fab, createMuiTheme, ThemeProvider, Snackbar, Tooltip } from '@material-ui/core';
+import Create from './Create';
+import Loading from './Loading';
+import firebase from 'firebase/app';
+import 'firebase/firestore';
+import Inactive from './Inactive';
 import {
   getUserUid,
   getPlayerSource,
   PLAYER_SOURCE,
   getShowWPButton,
   getTutorialStatus,
-} from "./Api";
-import Tutorial from "./Tutorial";
+} from './Api';
+import Tutorial from './Tutorial';
 
-const APP_VERSION = "1.6.5";
-const APP_VERSION_STRING = APP_VERSION.replace(/\./g, "");
+const APP_VERSION = '1.6.6';
+const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
 
 const darkTheme = createMuiTheme({
   palette: {
-    type: "dark",
+    type: 'dark',
     primary: {
-      main: "#FF0000",
+      main: '#FF0000',
     },
     secondary: {
-      main: "#c0f300",
+      main: '#c0f300',
     },
   },
 });
@@ -55,44 +49,37 @@ const Routes = (props) => (
 
 const resetResize = () => {
   const checkedX = 425;
-  document.documentElement.style.setProperty("--party-width", `${checkedX}px`);
-  document.documentElement.style.setProperty(
-    "--neg-party-width",
-    `-${checkedX}px`
-  );
+  document.documentElement.style.setProperty('--party-width', `${checkedX}px`);
+  document.documentElement.style.setProperty('--neg-party-width', `-${checkedX}px`);
 };
 
 const doResize = (ev) => {
   const checkedX =
     window.innerWidth -
-    Math.min(
-      window.innerWidth - 300,
-      Math.max(window.innerWidth * 0.5, ev.clientX)
-    );
-  document.documentElement.style.setProperty("--party-width", `${checkedX}px`);
-  document.documentElement.style.setProperty(
-    "--neg-party-width",
-    `-${checkedX}px`
-  );
+    Math.min(window.innerWidth - 300, Math.max(window.innerWidth * 0.5, ev.clientX));
+  document.documentElement.style.setProperty('--party-width', `${checkedX}px`);
+  document.documentElement.style.setProperty('--neg-party-width', `-${checkedX}px`);
 };
 
 const stopResize = (ev) => {
-  document.documentElement.removeEventListener("mousemove", doResize, false);
-  document.documentElement.removeEventListener("mouseup", stopResize, false);
+  document.documentElement.removeEventListener('mousemove', doResize, false);
+  document.documentElement.removeEventListener('mouseup', stopResize, false);
 };
 
 const startResize = (ev) => {
-  document.documentElement.addEventListener("mousemove", doResize, false);
-  document.documentElement.addEventListener("mouseup", stopResize, false);
+  ev.preventDefault();
+  ev.stopPropagation();
+  document.documentElement.addEventListener('mousemove', doResize, false);
+  document.documentElement.addEventListener('mouseup', stopResize, false);
 };
 
 const App = () => {
-  const closedNotification = { open: false, message: "" };
+  const closedNotification = { open: false, message: '' };
 
   const [tutorialComponent, setTutorialComponent] = useState(null);
   const [showFab, setShowFab] = useState(false);
   const [tutorialComplete, setTutorialComplete] = useState(false);
-  const [status, setStatus] = useState({ active: false, message: "" });
+  const [status, setStatus] = useState({ active: false, message: '' });
   const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false);
   const [notification, setNotification] = useState(closedNotification);
@@ -104,8 +91,8 @@ const App = () => {
     getUserUid();
     firebase
       .firestore()
-      .collection("server")
-      .doc("status")
+      .collection('server')
+      .doc('status')
       .onSnapshot((statusSnap) => {
         setStatus(statusSnap.data());
         setLoading(false);
@@ -113,9 +100,7 @@ const App = () => {
     getShowWPButton().then((showWPButton) => {
       setShowFab(showWPButton);
       if (showWPButton === true) {
-        document
-          .querySelector(".watch-party-fab")
-          .classList.remove("watch-party-fab-hidden");
+        document.querySelector('.watch-party-fab').classList.remove('watch-party-fab-hidden');
       }
     });
   }, []);
@@ -123,45 +108,23 @@ const App = () => {
   getTutorialStatus().then((v) => setTutorialComplete(v));
 
   // HANDLE VISIBILITY STYLING
-  const PartyRoutesWrapper = document.getElementById("party-routes-wrapper");
+  const PartyRoutesWrapper = document.getElementById('party-routes-wrapper');
   if (visible) {
-    document.body.classList.add("visible");
-    PartyRoutesWrapper && PartyRoutesWrapper.classList.add("visible");
-    if (
-      getPlayerSource() === PLAYER_SOURCE.HBOMAX ||
-      (getPlayerSource() === PLAYER_SOURCE.HBONOW && !hasAttached)
-    ) {
-      document.addEventListener(
-        "mousedown",
-        function (ev) {
-          if (document.body.querySelector("body.visible")) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            ev.stopImmediatePropagation();
-          }
-        },
-        { capture: true }
-      );
-      hasAttached = true;
-    }
+    document.body.classList.add('visible');
+    PartyRoutesWrapper && PartyRoutesWrapper.classList.add('visible');
     if (getPlayerSource() === PLAYER_SOURCE.APPLE) {
-      const appleTvPlayer = document.querySelector("apple-tv-plus-player");
-      const takeoverContainer = appleTvPlayer.shadowRoot.querySelector(
-        ".takeover.container.show"
-      );
-      if (takeoverContainer)
-        takeoverContainer.style.maxWidth = "var(--body-width)";
+      const appleTvPlayer = document.querySelector('apple-tv-plus-player');
+      const takeoverContainer = appleTvPlayer.shadowRoot.querySelector('.takeover.container.show');
+      if (takeoverContainer) takeoverContainer.style.maxWidth = 'var(--body-width)';
     }
   } else {
     if (getPlayerSource() === PLAYER_SOURCE.APPLE) {
-      const appleTvPlayer = document.querySelector("apple-tv-plus-player");
-      const takeoverContainer = appleTvPlayer.shadowRoot.querySelector(
-        ".takeover.container.show"
-      );
-      if (takeoverContainer) takeoverContainer.style.maxWidth = "none";
+      const appleTvPlayer = document.querySelector('apple-tv-plus-player');
+      const takeoverContainer = appleTvPlayer.shadowRoot.querySelector('.takeover.container.show');
+      if (takeoverContainer) takeoverContainer.style.maxWidth = 'none';
     }
-    document.body.classList.remove("visible");
-    PartyRoutesWrapper && PartyRoutesWrapper.classList.remove("visible");
+    document.body.classList.remove('visible');
+    PartyRoutesWrapper && PartyRoutesWrapper.classList.remove('visible');
   }
 
   // HANDLE FULLSCREEN EVENT
@@ -178,7 +141,7 @@ const App = () => {
     <ThemeProvider theme={darkTheme}>
       <Snackbar
         className="party-notification-container"
-        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         open={notification.open}
         onClose={() => setNotification(closedNotification)}
         message={notification.message}
@@ -198,17 +161,12 @@ const App = () => {
             title="Resize Sidebar / Double Click To Reset"
             aria-label="Resize Sidebar / Double Click To Reset"
           >
-            <div
-              onDoubleClick={resetResize}
-              onMouseDown={startResize}
-              id="party-width-dragger"
-            >
+            <div onDoubleClick={resetResize} onMouseDown={startResize} id="party-width-dragger">
               ||
             </div>
           </Tooltip>
           {loading && <Loading />}
-          {status[APP_VERSION_STRING] &&
-          status[APP_VERSION_STRING].active === true ? (
+          {status[APP_VERSION_STRING] && status[APP_VERSION_STRING].active === true ? (
             <Routes
               showFab={showFab}
               resetTutorial={resetTutorial}

app/src/Chat.js

@@ -31,6 +31,7 @@ import {
   Paper,
   Grid,
   Slider,
+  LinearProgress,
 } from '@material-ui/core';
 import Thread from './Thread';
 import {
@@ -501,18 +502,6 @@ export default class Chat extends Component {
       volumes,
     } = this.state;
     const alerts = [
-      {
-        condition: () =>
-          getPlayerSource() === PLAYER_SOURCE.HBOMAX || getPlayerSource() === PLAYER_SOURCE.HBONOW,
-        message: 'Functionality may be buggy, HBO has a horrible design.',
-      },
-      {
-        condition: () =>
-          getPlayerSource() === PLAYER_SOURCE.APPLE ||
-          getPlayerSource() === PLAYER_SOURCE.FUNIMATION ||
-          getPlayerSource() === PLAYER_SOURCE.VIKI,
-        message: 'Functionality may be buggy, support on this site is in testing.',
-      },
       {
         condition: () => adminOnly,
         message: 'Party is currently in admin only mode.',
@@ -783,10 +772,12 @@ export default class Chat extends Component {
             } else return null;
           })}
         </div>
+        <Thread setReplyTo={this.setReplyTo} sentMessages={messages} />
         <Thread
+          isSending={true}
           setReplyTo={this.setReplyTo}
-          sendingMessages={sendingMessages}
           sentMessages={messages}
+          sendingMessages={sendingMessages}
         />
         <Paper
           square

app/src/Thread.css

@@ -25,8 +25,13 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
   margin-top: 1rem;
   outline: none;
 }
-.thread-wrapper > div {
-  padding-bottom: 30px;
+.thread-wrapper.sending-wrapper {
+  flex: unset;
+  padding-top: 10px;
+  margin-bottom: 0;
+}
+.thread-wrapper.sending-wrapper > div {
+  padding-bottom: 0px;
 }
 .thread-item {
   color: white;
@@ -276,11 +281,15 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
  S E N D I N G
  M E S S A G E S
 */
+.thread-item.my-message.sending-message {
+  margin-top: 0;
+}
 .thread-item.my-message.sending-message .thread-message .thread-overline {
   display: none;
 }
 .thread-item.my-message.sending-message .thread-message p,
 .thread-item.my-message.sending-message .thread-message img {
+  margin: 0;
   margin-left: 0 !important;
   margin-right: 0 !important;
   opacity: 0.2;

app/src/Thread.js

@@ -149,9 +149,9 @@ export default class Thread extends Component {
   }
   getMessage(params) {
     const { autoSizeWidth } = this.state;
-    const { sendingMessages, sentMessages, setReplyTo } = this.props;
+    const { sentMessages, setReplyTo } = this.props;
     const { userUid } = LocalData();
-    const messages = [...sentMessages, ...sendingMessages];
+    const messages = sentMessages;
     const msg = messages[params.index];
     const msgIdx = params.index;
     return (
@@ -190,9 +190,10 @@ export default class Thread extends Component {
     );
   }
   render() {
+    const { userUid } = LocalData();
     const { autoSizeWidth } = this.state;
-    const { sendingMessages, sentMessages } = this.props;
-    return (
+    const { sentMessages, isSending, sendingMessages, setReplyTo } = this.props;
+    return !isSending ? (
       <AutoSizer style={{ flex: 1 }}>
         {({ height, width }) => {
           if (autoSizeWidth !== width) {
@@ -200,7 +201,6 @@ export default class Thread extends Component {
             this.listRef.current.recomputeRowHeights();
             this.setState({ autoSizeWidth: width });
           }
-
           return (
             <List
               className="thread-wrapper"
@@ -208,13 +208,38 @@ export default class Thread extends Component {
               height={height}
               width={width}
               ref={this.listRef}
-              rowCount={sendingMessages.length + sentMessages.length}
+              estimatedRowSize={40}
+              rowCount={sentMessages.length}
               rowHeight={({ index }) => cache.rowHeight({ index }) + 10}
               rowRenderer={this.getMessage}
             />
           );
         }}
       </AutoSizer>
+    ) : (
+      <div className="thread-wrapper sending-wrapper">
+        {sendingMessages.map((msg, msgIdx) => (
+          <div
+            id={msg.id || `sending-${msgIdx}`}
+            key={`sending-msg-${msgIdx}-item`}
+            className={this.getItemClassNames(msg.uid, userUid, msgIdx, sendingMessages, true)}
+          >
+            <div className="thread-name">{msg.name}</div>
+            {this.getReplyMessage(msg.replyTo, sentMessages)}
+            <div className="thread-message">
+              <div className="thread-overline">
+                <span>{this.getTimeString(msg.time)}</span>
+                <div className="thread-reply-icon">
+                  <IconButton onClick={() => setReplyTo(msg)}>
+                    <Reply />
+                  </IconButton>
+                </div>
+              </div>
+              {this.getMessageTextOrImage(msg, null)}
+            </div>
+          </div>
+        ))}
+      </div>
     );
   }
 }

app/src/index.css

@@ -66,10 +66,6 @@ body.visible #party-width-dragger {
   display: block;
 }
 
-body.hbo.visible #party-width-dragger {
-  display: none !important;
-}
-
 body.netflix.visible .AkiraPlayer, /* NETFLIX */
 body.hulu.visible .Player__container,/* HULU */
 body.amazon-prime.visible #dv-web-player.dv-player-fullscreen, /* AMAZON PRIME */
@@ -80,6 +76,15 @@ body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td, /* GOOGLE PLAY MOVIES *
 body.viki.visible div.video-player /* VIKI */ {
   max-width: var(--body-width) !important;
 }
+
+body.hulu #party_wrapper *,
+body.peacock #party_wrapper *,
+body.disney #party_wrapper *,
+body.apple #party_wrapper *,
+body.funimation #party_wrapper * {
+  box-sizing: inherit;
+}
+
 /* HULU MINIMIZED VIDEO */
 body.hulu.visible #__player__ .Player__container.Player__container--modal {
   right: calc(var(--party-width) + 2rem) !important;
@@ -96,6 +101,12 @@ body.amazon-prime #party-routes-wrapper {
 body.disney #hudson-wrapper {
   left: 0;
 }
+body.disney #party_wrapper * {
+  box-sizing: border-box;
+}
+body.disney #party_wrapper .party-chat-container * {
+  box-sizing: inherit;
+}
 /* YOUTUBE VIDEO SIZING FIX */
 body.youtube.visible video {
   max-width: 100%;
@@ -228,12 +239,8 @@ body.apple .thread-wrapper .ReactVirtualized__Grid__innerScrollContainer {
   box-sizing: initial !important;
 }
 
-body.hulu #party_wrapper *,
-body.peacock #party_wrapper *,
-body.disney #party_wrapper *,
-body.apple #party_wrapper *,
-body.funimation #party_wrapper * {
-  box-sizing: inherit;
+body.funimation.visible header {
+  z-index: 99 !important;
 }
 
 #party-loading {
@@ -587,18 +594,16 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
 }
 
 .alerts-container {
-  margin: 5px 0;
+  margin: 0;
   top: 0;
-  padding: 5px 0;
+  padding: 0;
   z-index: 999 !important;
   background: #1b1b1b;
 }
-
 .alert-card {
   border: none !important;
   border-radius: 26px !important;
-  margin: 0px 10px !important;
-  margin-bottom: 5px !important;
+  margin: 5px !important;
 }
 
 .alert-card-content {

app/src/index.js

@@ -14,6 +14,7 @@ import ReactDOM from 'react-dom';
 import firebase from 'firebase/app';
 import App from './App';
 import './index.css';
+import 'react-virtualized/styles.css';
 import { PLAYER_SOURCE, getPlayerSource } from './Api';
 
 const firebaseConfig = {
@@ -64,9 +65,6 @@ switch (getPlayerSource()) {
       { capture: true }
     );
     document.body.classList.add('hulu');
-    const ds = document.createElement('script');
-    ds.text = `window.doquery=function(){window.huluPlayer=window.queryObjects(window.HuluMediaPlayer);}`;
-    document.head.appendChild(ds);
     break;
   case PLAYER_SOURCE.AMAZON:
     document.body.classList.add('amazon-prime');
@@ -79,11 +77,27 @@ switch (getPlayerSource()) {
     break;
   case PLAYER_SOURCE.HBONOW:
   case PLAYER_SOURCE.HBOMAX:
-    const hboClickInject = `var hboInputFix=function(ev){if(ev.target.tagName==='INPUT'||ev.target.tagName==='TEXTAREA'){ev.target.focus();}ev.stopImmediatePropagation();ev.stopPropagation();};document.addEventListener('keydown',hboInputFix,{capture:true});var hboClickFix=function(ev){if(document.querySelector('body.visible')){if(ev.clientX > window.innerWidth - (parseInt(document.documentElement.style.getPropertyValue('--party-width').slice(0,-2)) + 50) ){if(ev.target.tagName==='INPUT'||ev.target.tagName==='TEXTAREA'){ev.target.focus();}ev.preventDefault();ev.stopPropagation();ev.stopImmediatePropagation();}}};document.addEventListener("mousedown",hboClickFix,{capture:true});`;
-    const hboClickInjectScript = document.createElement('script');
-    hboClickInjectScript.text = hboClickInject;
-    document.head.appendChild(hboClickInjectScript);
     document.body.classList.add('hbo');
+    window.addEventListener(
+      'mousedown',
+      (ev) => {
+        const partyWrapper = document.querySelector('#party_wrapper');
+        const tutorialWrapper = document.querySelector('.watch-party-tutorial');
+        if (
+          (partyWrapper && partyWrapper.contains(ev.target)) ||
+          (tutorialWrapper && tutorialWrapper.contains(ev.target))
+        ) {
+          if (ev.target.id !== 'party-width-dragger') {
+            ev.stopImmediatePropagation();
+            ev.preventDefault();
+          }
+          if (ev.target.tagName === 'INPUT' || ev.target.tagName === 'TEXTAREA') {
+            ev.target.focus();
+          }
+        }
+      },
+      { capture: true }
+    );
     break;
   case PLAYER_SOURCE.PEACOCK:
     document.body.classList.add('peacock');