v1.6.2/release

-website update -dynamic showName and video element -time update on playing
2020-08-14 00:36:44 -04:00
parent 3c4fffe598
commit aaf2506f78
14 changed files with 582 additions and 338 deletions
@@ -9,27 +9,33 @@ 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 { getUserUid, getPlayerSource, PLAYER_SOURCE } from './Api';
+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 } from "./Api";

-const APP_VERSION = '1.6.1';
-const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
+const APP_VERSION = "1.6.2";
+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",
    },
  },
 });
@@ -42,32 +48,41 @@ const Routes = (props) => (

 const resetResize = () => {
  const checkedX = 400;
-  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);
+  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 [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);
@@ -79,8 +94,8 @@ const App = () => {
    getUserUid();
    firebase
      .firestore()
-      .collection('server')
-      .doc('status')
+      .collection("server")
+      .doc("status")
      .onSnapshot((statusSnap) => {
        setStatus(statusSnap.data());
        setLoading(false);
@@ -88,18 +103,19 @@ const App = () => {
  }, []);

  // 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');
+    document.body.classList.add("visible");
+    PartyRoutesWrapper && PartyRoutesWrapper.classList.add("visible");
    if (
      !hasAttached &&
-      (getPlayerSource() === PLAYER_SOURCE.HBOMAX || getPlayerSource() === PLAYER_SOURCE.HBONOW)
+      (getPlayerSource() === PLAYER_SOURCE.HBOMAX ||
+        getPlayerSource() === PLAYER_SOURCE.HBONOW)
    ) {
      document.addEventListener(
-        'mousedown',
+        "mousedown",
        function (ev) {
-          if (document.body.querySelector('body.visible')) {
+          if (document.body.querySelector("body.visible")) {
            ev.preventDefault();
            ev.stopPropagation();
            ev.stopImmediatePropagation();
@@ -110,8 +126,8 @@ const App = () => {
      hasAttached = true;
    }
  } else {
-    document.body.classList.remove('visible');
-    PartyRoutesWrapper && PartyRoutesWrapper.classList.remove('visible');
+    document.body.classList.remove("visible");
+    PartyRoutesWrapper && PartyRoutesWrapper.classList.remove("visible");
  }

  // HANDLE FULLSCREEN EVENT
@@ -123,7 +139,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}
@@ -136,12 +152,17 @@ 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
              updateLoading={setLoading}
              notify={(message) => setNotification({ open: true, message })}
@@ -149,6 +170,7 @@ const App = () => {
              appVersionString={APP_VERSION_STRING}
              status={status[APP_VERSION_STRING]}
              selectors={status.selectors}
+              nameSelectors={status.nameSelectors}
            />
          ) : (
            <Inactive
@@ -10,7 +10,7 @@ CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
 COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 ************************************************************************/
 /*global chrome */
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
  Typography,
  TextField,
@@ -31,8 +31,8 @@ import {
  Paper,
  Grid,
  Slider,
-} from '@material-ui/core';
-import Thread from './Thread';
+} from "@material-ui/core";
+import Thread from "./Thread";
 import {
  SendMessageApi,
  LeaveRoomApi,
@@ -46,7 +46,7 @@ import {
  UpdateAdminOnly,
  scrollThread,
  removeLocalData,
-} from './Api';
+} from "./Api";
 import {
  Send,
  ExitToApp as Exit,
@@ -68,21 +68,21 @@ import {
  VolumeDown,
  VolumeUp,
  CancelRounded,
-} from '@material-ui/icons';
-import Create from './Create';
-import { goTo } from 'route-lite';
-import CallManager from './CallManager';
-import VideoListener from './VideoListener';
-import ReactGiphySearchbox from 'react-giphy-searchbox';
+} from "@material-ui/icons";
+import Create from "./Create";
+import { goTo } from "route-lite";
+import CallManager from "./CallManager";
+import VideoListener from "./VideoListener";
+import ReactGiphySearchbox from "react-giphy-searchbox";

 // const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
 export default class Chat extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      name: '',
+      name: "",
      messages: [],
-      newMessage: '',
+      newMessage: "",
      admin: null,
      adminOnly: false,
      adminModeUpdate: false,
@@ -94,10 +94,14 @@ export default class Chat extends Component {
      callActionPending: false,
      menuPopover: true,
      allowChatNotification:
-        LocalData().allowChatNotification !== undefined ? LocalData().allowChatNotification : true,
+        LocalData().allowChatNotification !== undefined
+          ? LocalData().allowChatNotification
+          : true,
      isFullscreen: document.fullscreen,
      allowAutoRejoin:
-        LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
+        LocalData().allowAutoRejoin !== undefined
+          ? LocalData().allowAutoRejoin
+          : true,
      replyTo: null,
      sendingMessages: [],
      volumes: {},
@@ -117,17 +121,27 @@ export default class Chat extends Component {
    this.callEventListener = this.callEventListener.bind(this);
    this.sendMessageInvoker = this.sendMessageInvoker.bind(this);
    this.videoEventListener = this.videoEventListener.bind(this);
-    this.mVideoListener = new VideoListener(this.videoEventListener, props.selectors);
+    this.mVideoListener = new VideoListener(
+      this.videoEventListener,
+      props.selectors,
+      props.nameSelectors
+    );
    this.updateAllowAutoRejoin = this.updateAllowAutoRejoin.bind(this);
-    this.updateAllowChatNotification = this.updateAllowChatNotification.bind(this);
-    this.mCallManager = new CallManager(this.callEventListener, this.props.notify);
+    this.updateAllowChatNotification = this.updateAllowChatNotification.bind(
+      this
+    );
+    this.mCallManager = new CallManager(
+      this.callEventListener,
+      this.props.notify
+    );
  }
  componentDidMount() {
    // EVENT CAPTURE FOR ENTER TO SEND
    window.onkeypress = (ev) => {
-      if (ev.code === 'Enter') {
-        if (ev.target === document.getElementById('chat-message-box-input')) {
-          if (ev.shiftKey === false && this.state.gif === true) ev.preventDefault();
+      if (ev.code === "Enter") {
+        if (ev.target === document.getElementById("chat-message-box-input")) {
+          if (ev.shiftKey === false && this.state.gif === true)
+            ev.preventDefault();
          if (ev.shiftKey === false && this.state.gif === false) {
            ev.preventDefault();
            this.sendMessageInvoker();
@@ -137,12 +151,15 @@ export default class Chat extends Component {
    };

    // FULLSCREEN LISTENER
-    document.addEventListener('fullscreenchange', (ev) => {
+    document.addEventListener("fullscreenchange", (ev) => {
      this.setState({ isFullscreen: document.fullscreen });
    });

    // ACTIVE TRACKER
-    if (LocalData().allowAutoRejoin === undefined || LocalData().allowAutoRejoin === null) {
+    if (
+      LocalData().allowAutoRejoin === undefined ||
+      LocalData().allowAutoRejoin === null
+    ) {
      updateLocalData({ allowAutoRejoin: this.state.allowAutoRejoin });
    }
    if (this.state.allowAutoRejoin === true) {
@@ -161,14 +178,14 @@ export default class Chat extends Component {
    this.port = chrome.runtime.connect({ name: LocalData().partyName });
    // Initialize listener
    this.port.postMessage({
-      type: 'INIT',
+      type: "INIT",
      roomId: LocalData().partyName,
      roomPin: LocalData().partyPin,
    });
    // Listener
    this.port.onMessage.addListener((response) => {
      if (response.isError === true) {
-        this.props.notify('Uh oh. Got lost from the party.');
+        this.props.notify("Uh oh. Got lost from the party.");
        goTo(Create, this.props);
        return;
      }
@@ -178,13 +195,21 @@ export default class Chat extends Component {
      }

      // IF CHAT IS HIDDEN AND ALLOWS NOTIFICATION
-      if (!document.querySelector('body.visible') && this.state.allowChatNotification === true) {
-        if (response.messages && response.messages.length !== this.state.messages.length) {
+      if (
+        !document.querySelector("body.visible") &&
+        this.state.allowChatNotification === true
+      ) {
+        if (
+          response.messages &&
+          response.messages.length !== this.state.messages.length
+        ) {
          const lastMessage = response.messages[response.messages.length - 1];
-          if (lastMessage.uid !== '<system>') {
+          if (lastMessage.uid !== "<system>") {
            this.props.notify(
              `${lastMessage.name}${
-                lastMessage.type === 'giphy' ? ' sent a gif.' : ': ' + lastMessage.text
+                lastMessage.type === "giphy"
+                  ? " sent a gif."
+                  : ": " + lastMessage.text
              }`
            );
          }
@@ -200,12 +225,26 @@ export default class Chat extends Component {

    // GIPHY IPC
    const giphyInject = `var giphySearchInteraction=function(e){if(e.source===window){const{data}=e;if(data.watchPartyDirection==='TO_SCRIPT'){if(data.type==='WATCH_PARTY_SEARCH_GIF'){const giphyInput=document.querySelector('.giphy-search-form input');if(giphyInput){giphyInput.value=data.value;giphyInput.dispatchEvent(new Event('change',{bubbles:true}))}}}}};window.addEventListener("message",giphySearchInteraction);`;
-    const giphyInjectScript = document.createElement('script');
+    const giphyInjectScript = document.createElement("script");
    giphyInjectScript.text = giphyInject;
    document.head.appendChild(giphyInjectScript);

    // DONE WITH MOUNTING TASKS
    this.props.updateLoading(false);
+
+    setInterval(() => {
+      if (
+        this.state.player &&
+        this.state.player.time &&
+        this.state.player.status === PLAYER_STATUS.PLAYING
+      ) {
+        const oldPlayer = this.state.player;
+        oldPlayer.time += 1;
+        this.setState({
+          player: oldPlayer,
+        });
+      }
+    }, 1000);
  }
  componentWillUnmount() {
    this.mVideoListener.end();
@@ -238,14 +277,14 @@ export default class Chat extends Component {
      }).catch((err) => {
        this.props.updateLoading(false);
        this.props.notify(err.message || err.statusText);
-        console.error('Sync Party API error', err);
+        console.error("Sync Party API error", err);
      });
    } else {
      this.mVideoListener.start();
    }
  }
  endParty() {
-    this.props.notify('Ending party...');
+    this.props.notify("Ending party...");
    this.props.updateLoading(true);
    const data = {
      partyName: LocalData().partyName,
@@ -259,20 +298,20 @@ export default class Chat extends Component {
      );
    DeleteRoomApi(data)
      .then((res) => {
-        this.props.notify('Ended party');
-        removeLocalData('partyPin');
-        removeLocalData('partyName');
+        this.props.notify("Ended party");
+        removeLocalData("partyPin");
+        removeLocalData("partyName");
        goTo(Create, this.props);
        this.props.updateLoading(false);
      })
      .catch((err) => {
        this.props.updateLoading(false);
        this.props.notify(err.message || err.statusText);
-        console.error('End Party API error', err);
+        console.error("End Party API error", err);
      });
  }
  leaveParty() {
-    this.props.notify('Leaving party...');
+    this.props.notify("Leaving party...");
    this.props.updateLoading(true);
    const data = {
      partyName: LocalData().partyName,
@@ -287,28 +326,30 @@ export default class Chat extends Component {
      );
    LeaveRoomApi(data)
      .then((res) => {
-        this.props.notify('Left party');
-        removeLocalData('partyPin');
-        removeLocalData('partyName');
+        this.props.notify("Left party");
+        removeLocalData("partyPin");
+        removeLocalData("partyName");
        goTo(Create, this.props);
        this.props.updateLoading(false);
      })
      .catch((err) => {
        this.props.updateLoading(false);
        this.props.notify(err.message || err.statusText);
-        console.error('End Party API error', err);
+        console.error("End Party API error", err);
      });
  }
  shareParty() {
-    const el = document.createElement('textarea');
-    el.value = `Join my party on Watch Party!\nParty Name: ${LocalData().partyName}\nParty Pin: ${
-      LocalData().partyPin
-    }\n${window.location.href}\n---\nGet Watch Party at https:\\\\get.chromewatchparty.com`;
+    const el = document.createElement("textarea");
+    el.value = `Join my party on Watch Party!\nParty Name: ${
+      LocalData().partyName
+    }\nParty Pin: ${LocalData().partyPin}\n${
+      window.location.href
+    }\n---\nGet Watch Party at https:\\\\get.chromewatchparty.com`;
    document.body.appendChild(el);
    el.select();
-    document.execCommand('copy');
+    document.execCommand("copy");
    document.body.removeChild(el);
-    this.props.notify('Copied party invitation');
+    this.props.notify("Copied party invitation");
  }
  sendMessage(message) {
    const { sendingMessages } = this.state;
@@ -319,9 +360,9 @@ export default class Chat extends Component {
      uid: LocalData().userUid,
      text: message,
      time: new Date(),
-      type: '',
+      type: "",
    };
-    if (this.state.gif === true) data.type = 'giphy';
+    if (this.state.gif === true) data.type = "giphy";
    if (this.state.replyTo !== null) data.replyTo = this.state.replyTo.id;
    sendingMessages.push(data);
    this.setState({
@@ -342,7 +383,7 @@ export default class Chat extends Component {
        this.setState({ sendingMessages: sm });
        scrollThread();
        this.props.notify(err.message || err.statusText);
-        console.error('Send Message API error', err);
+        console.error("Send Message API error", err);
      });
    this.setState({ replyTo: null });
    scrollThread();
@@ -350,10 +391,10 @@ export default class Chat extends Component {
  sendMessageInvoker(overrideMessage) {
    if (overrideMessage) this.sendMessage(overrideMessage);
    else {
-      const trim = this.state.newMessage.replace(/^\s+|\s+$/g, '');
-      if (trim !== '') this.sendMessage(trim);
+      const trim = this.state.newMessage.replace(/^\s+|\s+$/g, "");
+      if (trim !== "") this.sendMessage(trim);
    }
-    this.setState({ newMessage: '' });
+    this.setState({ newMessage: "" });
  }
  gifClick(iGif) {
    this.sendMessageInvoker(iGif.images.original.url);
@@ -362,29 +403,29 @@ export default class Chat extends Component {
    const { onCall, conference, admin, adminOnly } = this.state;
    if (window.navigator && onCall === false) {
      try {
-        const overlay = document.createElement('div');
+        const overlay = document.createElement("div");
        overlay.innerHTML = `
          <div id="mic-highlight"></div>
          <h4 id="mic-text">Grant Mic Permission</h4>
        `;
-        overlay.id = 'mic-permission-overlay';
+        overlay.id = "mic-permission-overlay";
        document.body.appendChild(overlay);
        window.navigator
          .getUserMedia({
            audio: true,
          })
          .then(() => {
-            document.getElementById('mic-permission-overlay').remove();
+            document.getElementById("mic-permission-overlay").remove();
            this.mCallManager.toggleCall(onCall, conference, admin, adminOnly);
          })
          .catch(() => {
-            document.getElementById('mic-permission-overlay').remove();
+            document.getElementById("mic-permission-overlay").remove();
            this.props.notify(
-              'Check your mic permission for this website. You can modify site permission by clicking on the lock icon in the top left.'
+              "Check your mic permission for this website. You can modify site permission by clicking on the lock icon in the top left."
            );
          });
      } catch (err) {
-        console.error('Handle Phone Call Error', err);
+        console.error("Handle Phone Call Error", err);
      }
    } else this.mCallManager.toggleCall(onCall, conference, admin, adminOnly);
  }
@@ -397,7 +438,9 @@ export default class Chat extends Component {
      : new Date(t * 1000).toISOString().substr(14, 5);
  }
  updateAllowChatNotification() {
-    updateLocalData({ allowChatNotification: !this.state.allowChatNotification });
+    updateLocalData({
+      allowChatNotification: !this.state.allowChatNotification,
+    });
    this.setState({ allowChatNotification: !this.state.allowChatNotification });
  }
  updateAllowAutoRejoin() {
@@ -418,7 +461,7 @@ export default class Chat extends Component {
      adminOnly: !this.state.adminOnly,
    }).catch((err) => {
      this.props.notify(err.message || err.statusText);
-      console.error('Update Admin Only API error', err);
+      console.error("Update Admin Only API error", err);
    });
  }
  setReplyTo(message) {
@@ -430,7 +473,7 @@ export default class Chat extends Component {
  getReplyToContent() {
    const { replyTo } = this.state;
    if (replyTo) {
-      if (replyTo.type === 'giphy') {
+      if (replyTo.type === "giphy") {
        return <img alt="gif" src={replyTo.text} />;
      }
      return (
@@ -442,7 +485,7 @@ export default class Chat extends Component {
    return null;
  }
  setVideoVolume(v, id) {
-    const audioOuts = document.querySelectorAll('audio.vxt-audio');
+    const audioOuts = document.querySelectorAll("audio.vxt-audio");
    if (audioOuts.length > 0) {
      audioOuts.forEach((el) => {
        if (el.id === `audio-${id}`) {
@@ -479,20 +522,23 @@ export default class Chat extends Component {
    const alerts = [
      {
        condition: () =>
-          getPlayerSource() === PLAYER_SOURCE.HBOMAX || getPlayerSource() === PLAYER_SOURCE.HBONOW,
-        message: 'Functionality may be buggy, HBO has a horrible design.',
+          getPlayerSource() === PLAYER_SOURCE.HBOMAX ||
+          getPlayerSource() === PLAYER_SOURCE.HBONOW,
+        message: "Functionality may be buggy, HBO has a horrible design.",
      },
      {
        condition: () => getPlayerSource() === PLAYER_SOURCE.GOOGLEPLAY,
-        message: 'Functionality may be buggy, support on this site is in testing.',
+        message:
+          "Functionality may be buggy, support on this site is in testing.",
      },
      {
        condition: () => getPlayerSource() === PLAYER_SOURCE.CRUNCHYROLL,
-        message: 'Functionality may be buggy, support on this site is in testing.',
+        message:
+          "Functionality may be buggy, support on this site is in testing.",
      },
      {
        condition: () => adminOnly,
-        message: 'Party is currently in admin only mode.',
+        message: "Party is currently in admin only mode.",
      },
    ];
    return (
@@ -519,7 +565,12 @@ export default class Chat extends Component {
                >
                  WATCH PARTY
                </Typography>
-                <Typography color="textPrimary" className="room-title" variant="h4" gutterBottom>
+                <Typography
+                  color="textPrimary"
+                  className="room-title"
+                  variant="h4"
+                  gutterBottom
+                >
                  {name}
                </Typography>
              </div>
@@ -528,9 +579,9 @@ export default class Chat extends Component {
              <TextField
                className="share-textbox"
                label="Party Details"
-                value={`Party Name: ${LocalData().partyName}\nParty Pin: ${LocalData().partyPin}\n${
-                  window.location.href
-                }`}
+                value={`Party Name: ${LocalData().partyName}\nParty Pin: ${
+                  LocalData().partyPin
+                }\n${window.location.href}`}
                multiline
                rowsMax={2}
                variant="outlined"
@@ -557,13 +608,19 @@ export default class Chat extends Component {
                color="secondary"
              >
                <Button onClick={this.leaveParty} startIcon={<Exit />}>
-                  <Typography variant="caption" className="party-control-button-text">
+                  <Typography
+                    variant="caption"
+                    className="party-control-button-text"
+                  >
                    Leave
                  </Typography>
                </Button>
                {admin && (
                  <Button onClick={this.endParty} startIcon={<Delete />}>
-                    <Typography variant="caption" className="party-control-button-text">
+                    <Typography
+                      variant="caption"
+                      className="party-control-button-text"
+                    >
                      End
                    </Typography>
                  </Button>
@@ -576,15 +633,17 @@ export default class Chat extends Component {
                    checked={allowChatNotification}
                    onChange={this.updateAllowChatNotification}
                    name="allowChatNotification"
-                    color={allowChatNotification ? 'secondary' : 'primary'}
+                    color={allowChatNotification ? "secondary" : "primary"}
                  />
                }
                label={
                  <span>
                    Allow chat notification when side panel is closed
                    <br />
-                    <span style={{ color: '#8a8a8a' }}>
-                      {allowChatNotification ? 'Notifications Enabled' : 'Notifications Disabled'}
+                    <span style={{ color: "#8a8a8a" }}>
+                      {allowChatNotification
+                        ? "Notifications Enabled"
+                        : "Notifications Disabled"}
                    </span>
                  </span>
                }
@@ -597,15 +656,17 @@ export default class Chat extends Component {
                    checked={allowAutoRejoin}
                    onChange={this.updateAllowAutoRejoin}
                    name="allowAutoRejoin"
-                    color={allowAutoRejoin ? 'secondary' : 'primary'}
+                    color={allowAutoRejoin ? "secondary" : "primary"}
                  />
                }
                label={
                  <span>
                    Allow Watch Party to auto rejoin (within 1 minute)
                    <br />
-                    <span style={{ color: '#8a8a8a' }}>
-                      {allowAutoRejoin ? 'Auto Rejoin Enabled' : 'Auto Rejoin Disabled'}
+                    <span style={{ color: "#8a8a8a" }}>
+                      {allowAutoRejoin
+                        ? "Auto Rejoin Enabled"
+                        : "Auto Rejoin Disabled"}
                    </span>
                  </span>
                }
@@ -619,7 +680,7 @@ export default class Chat extends Component {
                      checked={adminOnly}
                      onChange={this.updateAdminOnly}
                      name="adminOnly"
-                      color={adminOnly ? 'secondary' : 'primary'}
+                      color={adminOnly ? "secondary" : "primary"}
                      disabled={adminModeUpdate}
                    />
                  }
@@ -627,38 +688,53 @@ export default class Chat extends Component {
                    <span>
                      Admin Only Mode
                      <br />
-                      <span style={{ color: '#8a8a8a' }}>
+                      <span style={{ color: "#8a8a8a" }}>
                        {adminOnly
-                          ? 'Only admin can update player and start calls right now'
-                          : 'All party members can update player and start calls right now'}
+                          ? "Only admin can update player and start calls right now"
+                          : "All party members can update player and start calls right now"}
                      </span>
                    </span>
                  }
                  labelPlacement="end"
                />
              ) : null}
-              <Typography className="party-controls-users-title" variant="overline">
+              <Typography
+                className="party-controls-users-title"
+                variant="overline"
+              >
                PARTY MEMBERS
              </Typography>
              <div className="party-controls-users-container">
                {users.map((user) => (
-                  <Chip className="party-controls-users-chip" clickable size="small" label={user} />
+                  <Chip
+                    className="party-controls-users-chip"
+                    clickable
+                    size="small"
+                    label={user}
+                  />
                ))}
              </div>
              {Object.keys(usersOnCall).length > 0 ? (
-                <Typography className="party-controls-users-title" variant="overline">
+                <Typography
+                  className="party-controls-users-title"
+                  variant="overline"
+                >
                  MEMBERS IN CALL
                </Typography>
              ) : null}
              {Object.keys(usersOnCall).length > 0 ? (
                <div className="party-controls-users-container">
                  {Object.keys(usersOnCall).map((id) => {
-                    return usersOnCall[id].status === 'Connected' ||
-                      usersOnCall[id].status === 'Connecting' ? (
+                    return usersOnCall[id].status === "Connected" ||
+                      usersOnCall[id].status === "Connecting" ? (
                      <Tooltip
                        interactive
                        title={
-                          <Grid className="party-controls-users-volume" container spacing={2}>
+                          <Grid
+                            className="party-controls-users-volume"
+                            container
+                            spacing={2}
+                          >
                            <Grid item>
                              <VolumeDown />
                            </Grid>
@@ -669,7 +745,9 @@ export default class Chat extends Component {
                                step={1}
                                color="secondary"
                                value={volumes[id] || 10}
-                                onChangeCommitted={(e, v) => this.setVideoVolume(v, id)}
+                                onChangeCommitted={(e, v) =>
+                                  this.setVideoVolume(v, id)
+                                }
                              />
                            </Grid>
                            <Grid item>
@@ -680,14 +758,15 @@ export default class Chat extends Component {
                      >
                        <Chip
                          color={
-                            usersOnCall[id].info.externalId === LocalData().userUid
-                              ? 'secondary'
-                              : 'default'
+                            usersOnCall[id].info.externalId ===
+                            LocalData().userUid
+                              ? "secondary"
+                              : "default"
                          }
                          className="party-controls-users-chip"
                          clickable
                          size="small"
-                          label={usersOnCall[id].info.name || ' '}
+                          label={usersOnCall[id].info.name || " "}
                        />
                      </Tooltip>
                    ) : null;
@@ -698,13 +777,14 @@ export default class Chat extends Component {
          </ExpansionPanel>
          {player ? (
            <Card elevation={0} className="media-info-card">
-              {player.showName && player.status !== PLAYER_STATUS.NOT_PLAYING ? (
+              {player.showName &&
+              player.status !== PLAYER_STATUS.NOT_PLAYING ? (
                <CardContent>
                  <Typography className="media-info-at" variant="overline">
                    {player.status === PLAYER_STATUS.PAUSED
                      ? `PAUSED AT ${this.getPrettyTime(player.time)}`
                      : player.status === PLAYER_STATUS.PLAYING
-                      ? `STARTED PLAYING FROM ${this.getPrettyTime(player.time)}`
+                      ? `CURRENTLY PLAYING (${this.getPrettyTime(player.time)})`
                      : `SHOW IS AT ${this.getPrettyTime(player.time)}`}
                  </Typography>
                  <div className="media-info-container">
@@ -723,12 +803,17 @@ export default class Chat extends Component {
              ) : (
                <CardContent>
                  <Typography className="media-info-at" variant="caption">
-                    Nothing playing right now
+                    Nothing playing right now, pause or play once after starting
+                    a show to start sync.
                  </Typography>
                </CardContent>
              )}
              {player && player.showName && player.status ? (
-                <Button className="media-info-link" href={player.url} startIcon={<LinkOutlined />}>
+                <Button
+                  className="media-info-link"
+                  href={player.url}
+                  startIcon={<LinkOutlined />}
+                >
                  Link to currently playing
                </Button>
              ) : null}
@@ -759,7 +844,9 @@ export default class Chat extends Component {
        <Paper
          square
          variant="outlined"
-          className={`replying-to-card ${replyTo !== null ? 'replying-to-card-up' : ''}`}
+          className={`replying-to-card ${
+            replyTo !== null ? "replying-to-card-up" : ""
+          }`}
        >
          <div className="replying-to-content">
            <Typography variant="overline" display="block" gutterBottom>
@@ -773,8 +860,15 @@ export default class Chat extends Component {
        </Paper>
        <div className="text-phone-panel">
          {gif || newMessage ? null : (
-            <Tooltip title="Fullscreen with Watch Party" aria-label="Fullscreen">
-              <IconButton className="icon-button" color="secondary" onClick={this.toggleFullscreen}>
+            <Tooltip
+              title="Fullscreen with Watch Party"
+              aria-label="Fullscreen"
+            >
+              <IconButton
+                className="icon-button"
+                color="secondary"
+                onClick={this.toggleFullscreen}
+              >
                {isFullscreen ? <FullscreenExit /> : <Fullscreen />}
              </IconButton>
            </Tooltip>
@@ -785,7 +879,7 @@ export default class Chat extends Component {
            <IconButton
              disabled={callActionPending}
              onClick={this.handlePhoneCall}
-              color={!onCall ? 'secondary' : 'primary'}
+              color={!onCall ? "secondary" : "primary"}
              className="icon-button"
            >
              {onCall ? (
@@ -827,12 +921,14 @@ export default class Chat extends Component {
            multiline
            rowsMax="3"
            size="small"
-            placeholder={this.state.gif ? 'Search something...' : 'Say something...'}
+            placeholder={
+              this.state.gif ? "Search something..." : "Say something..."
+            }
            helperText={
              this.state.newMessage && !this.state.gif
-                ? 'Enter to send / Shift+Enter for new line'
+                ? "Enter to send / Shift+Enter for new line"
                : this.state.gif
-                ? 'Click on gif to send / Scroll to load more'
+                ? "Click on gif to send / Scroll to load more"
                : null
            }
            variant="outlined"
@@ -843,19 +939,19 @@ export default class Chat extends Component {
              scrollThread();
              if (gif) {
                window.postMessage({
-                  watchPartyDirection: 'TO_SCRIPT',
-                  type: 'WATCH_PARTY_SEARCH_GIF',
+                  watchPartyDirection: "TO_SCRIPT",
+                  type: "WATCH_PARTY_SEARCH_GIF",
                  value: e.target.value,
                });
              }
            }}
            InputProps={{
-              id: 'chat-message-box-input',
+              id: "chat-message-box-input",
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton
-                    className={`${this.state.gif ? 'gif-active' : ''} ${
-                      this.state.newMessage ? 'message-active' : ''
+                    className={`${this.state.gif ? "gif-active" : ""} ${
+                      this.state.newMessage ? "message-active" : ""
                    } message-send`}
                    size="small"
                    onClick={() => this.sendMessageInvoker(newMessage)}
@@ -868,13 +964,15 @@ export default class Chat extends Component {
              startAdornment: (
                <InputAdornment position="start">
                  <IconButton
-                    className={`gif-button ${this.state.gif ? 'gif-close' : ''}`}
+                    className={`gif-button ${
+                      this.state.gif ? "gif-close" : ""
+                    }`}
                    onClick={() => {
                      this.setState({ gif: !gif });
                      if (!gif) {
                        window.postMessage({
-                          watchPartyDirection: 'TO_SCRIPT',
-                          type: 'WATCH_PARTY_SEARCH_GIF',
+                          watchPartyDirection: "TO_SCRIPT",
+                          type: "WATCH_PARTY_SEARCH_GIF",
                          value: newMessage,
                        });
                        scrollThread();
@@ -892,9 +990,9 @@ export default class Chat extends Component {
        <ReactGiphySearchbox
          apiKey="ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq"
          onSelect={this.gifClick}
-          masonryConfig={[{ columns: 2, imageWidth: '50%', gutter: 5 }]}
+          masonryConfig={[{ columns: 2, imageWidth: "50%", gutter: 5 }]}
          searchFormClassName="giphy-search-form"
-          wrapperClassName={`giphy-wrapper ${gif ? '' : 'giphy-wrapper-down'}`}
+          wrapperClassName={`giphy-wrapper ${gif ? "" : "giphy-wrapper-down"}`}
          listWrapperClassName="giphy-list-wrapper"
          listItemClassName="giphy-list-item"
          poweredByGiphy
@@ -206,6 +206,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 S Y S T E M
 M E S S A G E S
 */
+.thread-item.thread-item.system-message {
+  margin: 0 auto !important;
+}
 .thread-item.system-message .thread-name,
 .thread-item.system-message .thread-reply,
 .thread-item.system-message img,
@@ -9,19 +9,25 @@ 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 { PLAYER_STATUS, getPlayerSource, PLAYER_SOURCE, LocalData } from './Api';
+import {
+  PLAYER_STATUS,
+  getPlayerSource,
+  PLAYER_SOURCE,
+  LocalData,
+} from "./Api";

-const templateListener = (video) => console.log('MISSING VIDEO LISTENER');
+const templateListener = (video) => console.log("MISSING VIDEO LISTENER");

 export default class VideoListener {
-  constructor(listener = templateListener, selectors) {
+  constructor(listener = templateListener, selectors, nameSelectors) {
    this.video = {
      status: PLAYER_STATUS.NOT_PLAYING,
      time: 0,
-      showName: '',
-      source: '',
+      showName: "",
+      source: "",
      element: null,
    };
+    this.nameSelectors = nameSelectors;
    this.selectors = selectors;
    this.isUpdating = false;
    this.listener = listener;
@@ -33,6 +39,7 @@ export default class VideoListener {
    this.onplay = this.onplay.bind(this);
    this.shouldPushSync = this.shouldPushSync.bind(this);
    this.crunchyRollListener = this.crunchyRollListener.bind(this);
+    this.getShowName = this.getShowName.bind(this);
  }
  shouldPushSync() {
    return (
@@ -42,7 +49,7 @@ export default class VideoListener {
      this.video.element !== null &&
      this.video.element !== undefined &&
      this.video.status !== PLAYER_STATUS.NOT_PLAYING &&
-      this.video.showName !== '' &&
+      this.video.showName !== "" &&
      this.video.showName !== null &&
      (this.video.status !== this.server.status ||
        Math.abs(this.video.element.currentTime - this.server.time) > 1.5)
@@ -69,23 +76,31 @@ export default class VideoListener {
        // REMOVE LISTENER BEFORE SYNCING
        switch (this.video.source) {
          case PLAYER_SOURCE.CRUNCHYROLL:
-            window.removeEventListener('watchParty', this.crunchyRollListener);
+            window.removeEventListener("watchParty", this.crunchyRollListener);
+            break;
          default:
-            this.video.element.removeEventListener('playing', this.onplay);
-            this.video.element.removeEventListener('pause', this.onpause);
+            this.video.element.removeEventListener("playing", this.onplay);
+            this.video.element.removeEventListener("pause", this.onpause);
        }
        await this.timeout(250);
        // SEEK
-        if (Math.abs(serverPlayer.time - this.video.element.currentTime) > 1.5) {
+        if (
+          Math.abs(serverPlayer.time - this.video.element.currentTime) > 1.5
+        ) {
          switch (serverPlayer.source) {
            case PLAYER_SOURCE.NETFLIX:
-              window.postMessage({ type: 'SEEK', time: serverPlayer.time * 1000 }, '*');
+              window.postMessage(
+                { type: "SEEK", time: serverPlayer.time * 1000 },
+                "*"
+              );
              break;
            case PLAYER_SOURCE.AMAZON:
              if (this.video.status === PLAYER_STATUS.PAUSED)
                await this.video.element
                  .play()
-                  .catch((err) => console.error('WatchParty erred when syncing time.'));
+                  .catch((err) =>
+                    console.error("WatchParty erred when syncing time.")
+                  );
              await this.timeout(250);
              this.video.element.currentTime = serverPlayer.time;
              await this.timeout(500);
@@ -98,7 +113,10 @@ export default class VideoListener {
              this.video.element.currentTime = serverPlayer.time;
              break;
            case PLAYER_SOURCE.HULU:
-              window.postMessage({ type: 'SEEK', time: serverPlayer.time }, '*');
+              window.postMessage(
+                { type: "SEEK", time: serverPlayer.time },
+                "*"
+              );
              break;
            case PLAYER_SOURCE.HBOMAX:
            case PLAYER_SOURCE.HBONOW:
@@ -107,8 +125,8 @@ export default class VideoListener {
            case PLAYER_SOURCE.PEACOCK:
              window.postMessage(
                JSON.stringify({
-                  watchPartyDirection: 'TO_SCRIPT',
-                  type: 'WATCH_PARTY_SEEK',
+                  watchPartyDirection: "TO_SCRIPT",
+                  type: "WATCH_PARTY_SEEK",
                  status: serverPlayer.status,
                  time: serverPlayer.time,
                })
@@ -120,8 +138,8 @@ export default class VideoListener {
            case PLAYER_SOURCE.CRUNCHYROLL:
              window.postMessage(
                JSON.stringify({
-                  watchPartyDirection: 'TO_SCRIPT',
-                  type: 'WATCH_PARTY_SEEK',
+                  watchPartyDirection: "TO_SCRIPT",
+                  type: "WATCH_PARTY_SEEK",
                  status: serverPlayer.status,
                  time: serverPlayer.time,
                })
@@ -140,15 +158,18 @@ export default class VideoListener {
              PLAYER_SOURCE.HBOMAX === this.video.source ||
              PLAYER_SOURCE.HBONOW === this.video.source
            ) {
-              window.postMessage({ type: 'PAUSE', time: serverPlayer.time }, '*');
+              window.postMessage(
+                { type: "PAUSE", time: serverPlayer.time },
+                "*"
+              );
            } else if (
              PLAYER_SOURCE.CRUNCHYROLL === this.video.source ||
              PLAYER_SOURCE.PEACOCK === this.video.source
            ) {
              window.postMessage(
                JSON.stringify({
-                  watchPartyDirection: 'TO_SCRIPT',
-                  type: 'WATCH_PARTY_STATUS',
+                  watchPartyDirection: "TO_SCRIPT",
+                  type: "WATCH_PARTY_STATUS",
                  status: serverPlayer.status,
                  time: serverPlayer.time,
                })
@@ -164,15 +185,18 @@ export default class VideoListener {
              PLAYER_SOURCE.HBOMAX === this.video.source ||
              PLAYER_SOURCE.HBONOW === this.video.source
            ) {
-              window.postMessage({ type: 'PLAY', time: serverPlayer.time }, '*');
+              window.postMessage(
+                { type: "PLAY", time: serverPlayer.time },
+                "*"
+              );
            } else if (
              PLAYER_SOURCE.CRUNCHYROLL === this.video.source ||
              PLAYER_SOURCE.PEACOCK === this.video.source
            ) {
              window.postMessage(
                JSON.stringify({
-                  watchPartyDirection: 'TO_SCRIPT',
-                  type: 'WATCH_PARTY_STATUS',
+                  watchPartyDirection: "TO_SCRIPT",
+                  type: "WATCH_PARTY_STATUS",
                  status: serverPlayer.status,
                  time: serverPlayer.time,
                })
@@ -180,7 +204,9 @@ export default class VideoListener {
            } else {
              await this.video.element
                .play()
-                .catch((err) => console.error('WatchParty erred when syncing play.'));
+                .catch((err) =>
+                  console.error("WatchParty erred when syncing play.")
+                );
            }
            break;
          default:
@@ -190,10 +216,10 @@ export default class VideoListener {
        // RE-ADD LISTENERS FOR FUTURE SYNC
        switch (this.video.source) {
          case PLAYER_SOURCE.CRUNCHYROLL:
-            window.addEventListener('watchParty', this.crunchyRollListener);
+            window.addEventListener("watchParty", this.crunchyRollListener);
          default:
-            this.video.element.addEventListener('playing', this.onplay);
-            this.video.element.addEventListener('pause', this.onpause);
+            this.video.element.addEventListener("playing", this.onplay);
+            this.video.element.addEventListener("pause", this.onpause);
        }
      }
      this.isUpdating = false;
@@ -206,77 +232,75 @@ export default class VideoListener {
    });
  }
  async getShowName() {
+    const nS = this.nameSelectors[this.video.source];
    switch (this.video.source) {
      case PLAYER_SOURCE.NETFLIX:
-        const titleContainerParent = document.querySelector(
-          '.PlayerControls--control-element.text-control.video-title'
-        );
-        if (titleContainerParent) {
-          const titleContainer = titleContainerParent.firstChild;
-          const nshow = titleContainer.querySelector('h4')
-            ? titleContainer.querySelector('h4').innerHTML
-            : titleContainer.innerHTML;
-          let nepisode = '';
-          titleContainer.querySelectorAll('span').forEach((e) => {
-            if (e.innerHTML) nepisode += e.innerHTML + ' ';
-          });
-          return nshow === '' && nepisode === '' ? null : nshow + '\n' + nepisode;
+        var nshow = document.querySelector(nS.show).innerHTML || "";
+        var nepisode = "";
+        if (document.querySelectorAll(nS.episode)) {
+          document
+            .querySelectorAll(nS.episode)
+            .forEach((el) => (nepisode += el.innerHTML + " "));
        }
-        break;
+        return nshow === "" && nepisode === "" ? null : nshow + "\n" + nepisode;
      case PLAYER_SOURCE.AMAZON:
-        const ashow =
-          document.querySelector(
-            '#dv-web-player > div > div:nth-child(1) > div > div > div.webPlayerSDKUiContainer > div > div > div > div > div > div > div > div:nth-child(2) > div:nth-child(2)'
-          ).innerText || '';
-        return ashow === '' ? null : ashow;
+        const ashow = document.querySelector(nS.show).innerText || "";
+        return ashow === "" ? null : ashow;
      case PLAYER_SOURCE.HULU:
-        const hshow = document.querySelector('.metadata-area__second-line').innerHTML;
-        const hepisode = document.querySelector('.metadata-area__third-line').innerHTML;
-        return hshow === '' && hepisode === '' ? null : hshow + '\n' + hepisode;
+        const hshow = document.querySelector(nS.show).innerText;
+        const hepisode = document
+          .querySelector(nS.episode)
+          .innerText.replace(/\n/gi, " ");
+        return hshow === "" && hepisode === "" ? null : hshow + "\n" + hepisode;
      case PLAYER_SOURCE.DISNEY:
        this.video.element.parentElement.click();
        await this.timeout(200);
-        const dshow = document.querySelector('.title-field')
-          ? document.querySelector('.title-field').innerHTML
-          : '';
-        const depisode = document.querySelector('.subtitle-field')
-          ? document.querySelector('.subtitle-field').innerHTML
-          : '';
-        return dshow === '' && depisode === '' ? null : dshow + '\n' + depisode;
+        const dshow = document.querySelector(nS.show)
+          ? document.querySelector(nS.show).innerHTML
+          : "";
+        const depisode = document.querySelector(nS.episode)
+          ? document.querySelector(nS.episode).innerHTML
+          : "";
+        return dshow === "" && depisode === "" ? null : dshow + "\n" + depisode;
      case PLAYER_SOURCE.YOUTUBE:
-        const yshow = document.querySelector('h1.title').innerText;
-        const yepisode = document.querySelector('yt-formatted-string.super-title').innerText;
-        return yshow === '' && yepisode === '' ? null : yshow + '\n' + yepisode;
+        const yshow = document.querySelector(nS.show).innerText || "";
+        const yepisode = document.querySelector(nS.episode).innerText || "";
+        return yshow === "" && yepisode === "" ? null : yshow + "\n" + yepisode;
      case PLAYER_SOURCE.HBOMAX:
      case PLAYER_SOURCE.HBONOW:
-        const bottomHalf = this.video.element.parentNode.parentNode.parentNode.parentNode.parentNode
-          .children[1];
-        bottomHalf.children[0].id = 'hboUpperTitle';
-        bottomHalf.children[1].id = 'hboLowerTitle';
-        const hboshow = document.querySelector('#hboUpperTitle').innerText;
-        const hboepisode = document.querySelector('#hboLowerTitle').innerText;
-        return hboshow === '' && hboepisode === '' ? null : hboshow + '\n' + hboepisode;
-      case PLAYER_SOURCE.PEACOCK:
-        const peacockshow = document.querySelector(
-          '.item.playback-metadata__container-episode-metadata-info'
-        ).innerText;
-        const peacockepisode = document.querySelector('.item.playback-metadata__container-title')
-          .innerText;
-        return peacockshow === '' && peacockepisode === ''
+        const bottomHalf = this.video.element.parentNode.parentNode.parentNode
+          .parentNode.parentNode.children[1];
+        bottomHalf.children[0].id = "hboUpperTitle";
+        bottomHalf.children[1].id = "hboLowerTitle";
+        const hboshow = document.querySelector("#hboUpperTitle").innerText;
+        const hboepisode = document.querySelector("#hboLowerTitle").innerText;
+        return hboshow === "" && hboepisode === ""
          ? null
-          : peacockshow + '\n' + peacockepisode;
+          : hboshow + "\n" + hboepisode;
+      case PLAYER_SOURCE.PEACOCK:
+        const peacockshow = document.querySelector(nS.show).innerText || "";
+        const peacockepisode =
+          document.querySelector(nS.episode).innerText || "";
+        return peacockshow === "" && peacockepisode === ""
+          ? null
+          : peacockshow + "\n" + peacockepisode;
      case PLAYER_SOURCE.GOOGLEPLAY:
-        const playerIframe = document.querySelector('body span div iframe');
-        var googleplayshow = '';
+        const playerIframe = document.querySelector(
+          this.selectors[PLAYER_SOURCE.GOOGLEPLAY]
+        );
+        var googleplayshow = "";
        if (playerIframe) {
-          const titleElement = playerIframe.contentWindow.document.querySelector('.playing-title');
-          googleplayshow = titleElement ? titleElement.innerText : '';
+          googleplayshow =
+            playerIframe.contentWindow.document.querySelector(nS.show)
+              .innerText || "";
        }
-        return googleplayshow === '' ? null : googleplayshow;
+        return googleplayshow === "" ? null : googleplayshow;
      case PLAYER_SOURCE.CRUNCHYROLL:
-        const crunchyrollTitle = document.querySelector('#showmedia_about_media');
-        const crunchyrollshow = crunchyrollTitle ? crunchyrollTitle.innerText : '';
-        return crunchyrollshow === '' ? null : crunchyrollshow;
+        const crunchyrollTitle = document.querySelector(nS.show);
+        const crunchyrollshow = crunchyrollTitle
+          ? crunchyrollTitle.innerText
+          : "";
+        return crunchyrollshow === "" ? null : crunchyrollshow;
      default:
        break;
    }
@@ -297,8 +321,8 @@ export default class VideoListener {
  }
  async crunchyRollListener(ev) {
    if (
-      ev.detail.watchPartyDirection === 'TO_APP' &&
-      ev.detail.type === 'WATCH_PARTY_PLAYER_UPDATE'
+      ev.detail.watchPartyDirection === "TO_APP" &&
+      ev.detail.type === "WATCH_PARTY_PLAYER_UPDATE"
    ) {
      this.updateStatus({
        status: ev.detail.status,
@@ -318,15 +342,15 @@ export default class VideoListener {
      case PLAYER_SOURCE.CRUNCHYROLL:
        window.postMessage(
          JSON.stringify({
-            watchPartyDirection: 'TO_SCRIPT',
-            type: 'WATCH_PARTY_ADD_LISTENERS',
+            watchPartyDirection: "TO_SCRIPT",
+            type: "WATCH_PARTY_ADD_LISTENERS",
          })
        );
-        window.addEventListener('watchParty', this.crunchyRollListener);
+        window.addEventListener("watchParty", this.crunchyRollListener);
        break;
      default:
-        videoElement.addEventListener('playing', this.onplay);
-        videoElement.addEventListener('pause', this.onpause);
+        videoElement.addEventListener("playing", this.onplay);
+        videoElement.addEventListener("pause", this.onpause);
    }
  }
  async start() {
@@ -337,10 +361,12 @@ export default class VideoListener {
    switch (this.video.source) {
      case PLAYER_SOURCE.NETFLIX:
        const seekInject = `window.seekScriptLoaded=!0;var getVideoPlayer=function(){var e=window.netflix.appContext.state.playerApp.getAPI().videoPlayer,t=e.getAllPlayerSessionIds()[0];return e.getVideoPlayerBySessionId(t)},seekInteraction=function(e){if(e.source==window){if(e.data.type&&"SEEK"==e.data.type){getVideoPlayer().pause();getVideoPlayer().seek(e.data.time);}if(e.data.type&&e.data.type==="PAUSE"){getVideoPlayer().pause();}if(e.data.type&&e.data.type==="PLAY"){getVideoPlayer().play();}e.data.type&&"teardown"==e.data.type&&(window.removeEventListener("message",seekInteraction,!1),window.seekScriptLoaded=!1)}};window.addEventListener("message",seekInteraction,!1);`;
-        const seekInjectScript = document.createElement('script');
+        const seekInjectScript = document.createElement("script");
        seekInjectScript.text = seekInject;
        document.head.appendChild(seekInjectScript);
-        const videoElement = document.querySelector(this.selectors[PLAYER_SOURCE.NETFLIX]);
+        const videoElement = document.querySelector(
+          this.selectors[PLAYER_SOURCE.NETFLIX]
+        );
        if (videoElement && !this.video.element) {
          this.firstTimeSync(videoElement);
        } else {
@@ -348,8 +374,13 @@ export default class VideoListener {
            this.video.element
              ? null
              : () => {
-                  var nve = document.querySelector(this.selectors[PLAYER_SOURCE.NETFLIX]);
-                  if (nve !== null && (this.video.element !== nve || this.video.element === null)) {
+                  var nve = document.querySelector(
+                    this.selectors[PLAYER_SOURCE.NETFLIX]
+                  );
+                  if (
+                    nve !== null &&
+                    (this.video.element !== nve || this.video.element === null)
+                  ) {
                    this.firstTimeSync(nve);
                  }
                },
@@ -361,19 +392,26 @@ export default class VideoListener {
        const huluSeekInject = `window.seekScriptLoaded=!0;var getVideoPlayer=function(){var e=document.querySelector("${
          this.selectors[PLAYER_SOURCE.HULU]
        }").__HuluDashPlayer__;return e;},seekInteraction=function(e){if(e.source==window){if(e.data.type&&"SEEK"==e.data.type){getVideoPlayer().seek(e.data.time,e.data.time);}if(e.data.type&&e.data.type==="PAUSE"){getVideoPlayer().pause();}if(e.data.type&&e.data.type==="PLAY"){getVideoPlayer().play();}e.data.type&&"teardown"==e.data.type&&(window.removeEventListener("message",seekInteraction,!1),window.seekScriptLoaded=!1)}};window.addEventListener("message",seekInteraction,!1);`;
-        const huluSeekInjectScript = document.createElement('script');
+        const huluSeekInjectScript = document.createElement("script");
        huluSeekInjectScript.text = huluSeekInject;
        document.head.appendChild(huluSeekInjectScript);
-        const videoElement = document.querySelector(this.selectors[PLAYER_SOURCE.HULU]);
-        if (videoElement) {
-          this.firstTimeSync(videoElement);
+        const huluVideoElement = document.querySelector(
+          this.selectors[PLAYER_SOURCE.HULU]
+        );
+        if (huluVideoElement) {
+          this.firstTimeSync(huluVideoElement);
        } else {
          setInterval(
            this.video.element
              ? null
              : () => {
-                  var hve = document.querySelector(this.selectors[PLAYER_SOURCE.HULU]);
-                  if (hve !== null && (this.video.element !== hve || this.video.element === null)) {
+                  var hve = document.querySelector(
+                    this.selectors[PLAYER_SOURCE.HULU]
+                  );
+                  if (
+                    hve !== null &&
+                    (this.video.element !== hve || this.video.element === null)
+                  ) {
                    this.firstTimeSync(hve);
                  }
                },
@@ -382,16 +420,23 @@ export default class VideoListener {
        }
        break;
      case PLAYER_SOURCE.AMAZON:
-        const videoElement = document.querySelector(this.selectors[PLAYER_SOURCE.AMAZON]);
-        if (videoElement) {
-          this.firstTimeSync(videoElement);
+        const amazonVideoElement = document.querySelector(
+          this.selectors[PLAYER_SOURCE.AMAZON]
+        );
+        if (amazonVideoElement) {
+          this.firstTimeSync(amazonVideoElement);
        } else {
          setInterval(
            this.video.element
              ? null
              : () => {
-                  var ave = document.querySelector(this.selectors[PLAYER_SOURCE.AMAZON]);
-                  if (ave !== null && (this.video.element !== ave || this.video.element === null)) {
+                  var ave = document.querySelector(
+                    this.selectors[PLAYER_SOURCE.AMAZON]
+                  );
+                  if (
+                    ave !== null &&
+                    (this.video.element !== ave || this.video.element === null)
+                  ) {
                    this.firstTimeSync(ave);
                  }
                },
@@ -400,7 +445,9 @@ export default class VideoListener {
        }
        break;
      case PLAYER_SOURCE.DISNEY:
-        const disneyVideoElement = document.querySelector(this.selectors[PLAYER_SOURCE.DISNEY]);
+        const disneyVideoElement = document.querySelector(
+          this.selectors[PLAYER_SOURCE.DISNEY]
+        );
        if (disneyVideoElement) {
          this.firstTimeSync(disneyVideoElement);
        } else {
@@ -408,8 +455,13 @@ export default class VideoListener {
            this.video.element
              ? null
              : () => {
-                  var dve = document.querySelector(this.selectors[PLAYER_SOURCE.DISNEY]);
-                  if (dve !== null && (this.video.element !== dve || this.video.element === null)) {
+                  var dve = document.querySelector(
+                    this.selectors[PLAYER_SOURCE.DISNEY]
+                  );
+                  if (
+                    dve !== null &&
+                    (this.video.element !== dve || this.video.element === null)
+                  ) {
                    this.firstTimeSync(dve);
                  }
                },
@@ -418,15 +470,22 @@ export default class VideoListener {
        }
        break;
      case PLAYER_SOURCE.YOUTUBE:
-        const youtubeVideoElement = document.querySelector(this.selectors[PLAYER_SOURCE.YOUTUBE]);
+        const youtubeVideoElement = document.querySelector(
+          this.selectors[PLAYER_SOURCE.YOUTUBE]
+        );
        if (youtubeVideoElement) this.firstTimeSync(youtubeVideoElement);
        else {
          setInterval(
            this.video.element
              ? null
              : () => {
-                  var yve = document.querySelector(this.selectors[PLAYER_SOURCE.YOUTUBE]);
-                  if (yve !== null && (this.video.element !== yve || this.video.element === null)) {
+                  var yve = document.querySelector(
+                    this.selectors[PLAYER_SOURCE.YOUTUBE]
+                  );
+                  if (
+                    yve !== null &&
+                    (this.video.element !== yve || this.video.element === null)
+                  ) {
                    this.firstTimeSync(yve);
                  }
                },
@@ -438,22 +497,27 @@ export default class VideoListener {
        const hboSeekInject = `window.seekScriptLoaded=!0;var getVideoPlayer=function(){var e=document.querySelector("${
          this.selectors[PLAYER_SOURCE.HBOMAX]
        }")._dispNode;return e;},seekInteraction=function(e){if(e.source==window){if(e.data.type&&e.data.type==="PAUSE"){getVideoPlayer().pause();}if(e.data.type&&e.data.type==="PLAY"){getVideoPlayer().play();}e.data.type&&"teardown"==e.data.type&&(window.removeEventListener("message",seekInteraction,!1),window.seekScriptLoaded=!1)}};window.addEventListener("message",seekInteraction,!1);`;
-        const hboSeekInjectScript = document.createElement('script');
+        const hboSeekInjectScript = document.createElement("script");
        hboSeekInjectScript.text = hboSeekInject;
        document.head.appendChild(hboSeekInjectScript);
-        const hboVideoElement = document.querySelector(this.selectors[PLAYER_SOURCE.HBOMAX]);
+        const hboVideoElement = document.querySelector(
+          this.selectors[PLAYER_SOURCE.HBOMAX]
+        );
        if (hboVideoElement) {
          const bottomHalf =
-            hboVideoElement.parentNode.parentNode.parentNode.parentNode.parentNode.children[1];
-          bottomHalf.children[0].id = 'hboUpperTitle';
-          bottomHalf.children[1].id = 'hboLowerTitle';
+            hboVideoElement.parentNode.parentNode.parentNode.parentNode
+              .parentNode.children[1];
+          bottomHalf.children[0].id = "hboUpperTitle";
+          bottomHalf.children[1].id = "hboLowerTitle";
          this.firstTimeSync(hboVideoElement);
        } else {
          setInterval(
            this.video.element
              ? null
              : () => {
-                  var hve = document.querySelector(this.selectors[PLAYER_SOURCE.HBOMAX]);
+                  var hve = document.querySelector(
+                    this.selectors[PLAYER_SOURCE.HBOMAX]
+                  );
                  if (
                    hve !== null &&
                    hve !== undefined &&
@@ -467,25 +531,30 @@ export default class VideoListener {
        }
        break;
      case PLAYER_SOURCE.HBONOW:
-        const hboSeekInject = `window.seekScriptLoaded=!0;var getVideoPlayer=function(){var e=document.querySelector("${
+        const hboNowSeekInject = `window.seekScriptLoaded=!0;var getVideoPlayer=function(){var e=document.querySelector("${
          this.selectors[PLAYER_SOURCE.HBONOW]
        }")._dispNode;return e;},seekInteraction=function(e){if(e.source==window){if(e.data.type&&e.data.type==="PAUSE"){getVideoPlayer().pause();}if(e.data.type&&e.data.type==="PLAY"){getVideoPlayer().play();}e.data.type&&"teardown"==e.data.type&&(window.removeEventListener("message",seekInteraction,!1),window.seekScriptLoaded=!1)}};window.addEventListener("message",seekInteraction,!1);`;
-        const hboSeekInjectScript = document.createElement('script');
-        hboSeekInjectScript.text = hboSeekInject;
-        document.head.appendChild(hboSeekInjectScript);
-        const hboVideoElement = document.querySelector(this.selectors[PLAYER_SOURCE.HBONOW]);
-        if (hboVideoElement) {
+        const hboNowSeekInjectScript = document.createElement("script");
+        hboNowSeekInjectScript.text = hboNowSeekInject;
+        document.head.appendChild(hboNowSeekInjectScript);
+        const hboNowVideoElement = document.querySelector(
+          this.selectors[PLAYER_SOURCE.HBONOW]
+        );
+        if (hboNowVideoElement) {
          const bottomHalf =
-            hboVideoElement.parentNode.parentNode.parentNode.parentNode.parentNode.children[1];
-          bottomHalf.children[0].id = 'hboUpperTitle';
-          bottomHalf.children[1].id = 'hboLowerTitle';
-          this.firstTimeSync(hboVideoElement);
+            hboNowVideoElement.parentNode.parentNode.parentNode.parentNode
+              .parentNode.children[1];
+          bottomHalf.children[0].id = "hboUpperTitle";
+          bottomHalf.children[1].id = "hboLowerTitle";
+          this.firstTimeSync(hboNowVideoElement);
        } else {
          setInterval(
            this.video.element
              ? null
              : () => {
-                  var hve = document.querySelector(this.selectors[PLAYER_SOURCE.HBONOW]);
+                  var hve = document.querySelector(
+                    this.selectors[PLAYER_SOURCE.HBONOW]
+                  );
                  if (
                    hve !== null &&
                    hve !== undefined &&
@@ -502,10 +571,12 @@ export default class VideoListener {
        const peacockInject = `var watchPartyInteraction=function(e){if(e.source===window){const data=JSON.parse(e.data);const playerReactElement=document.querySelector("${
          this.selectors[PLAYER_SOURCE.PEACOCK]
        }");if(data.watchPartyDirection==='TO_SCRIPT'){if(data.type==='WATCH_PARTY_SEEK'){if(playerReactElement&&playerReactElement.player){playerReactElement.player.seek(data.time)}}else if(data.type==='WATCH_PARTY_STATUS'){if(playerReactElement&&playerReactElement.player){if(data.status==='PAUSED')playerReactElement.player.pause();if(data.status==='PLAYING')playerReactElement.player.play()}}}}};window.addEventListener("message",watchPartyInteraction);`;
-        const peacockInjectScript = document.createElement('script');
+        const peacockInjectScript = document.createElement("script");
        peacockInjectScript.text = peacockInject;
        document.head.appendChild(peacockInjectScript);
-        const peacockVideoElement = document.querySelector(this.selectors[PLAYER_SOURCE.PEACOCK]);
+        const peacockVideoElement = document.querySelector(
+          this.selectors[PLAYER_SOURCE.PEACOCK]
+        );
        if (peacockVideoElement) {
          this.firstTimeSync(peacockVideoElement);
        } else {
@@ -513,7 +584,9 @@ export default class VideoListener {
            this.video.element
              ? null
              : () => {
-                  var pve = document.querySelector(this.selectors[PLAYER_SOURCE.PEACOCK]);
+                  var pve = document.querySelector(
+                    this.selectors[PLAYER_SOURCE.PEACOCK]
+                  );
                  if (
                    pve !== null &&
                    pve !== undefined &&
@@ -527,9 +600,13 @@ export default class VideoListener {
        }
        break;
      case PLAYER_SOURCE.GOOGLEPLAY:
-        const playerIframe = document.querySelector(this.selectors[PLAYER_SOURCE.GOOGLEPLAY]);
+        const playerIframe = document.querySelector(
+          this.selectors[PLAYER_SOURCE.GOOGLEPLAY]
+        );
        if (playerIframe) {
-          const googlePlayVideoElement = playerIframe.contentWindow.document.querySelector('video');
+          const googlePlayVideoElement = playerIframe.contentWindow.document.querySelector(
+            "video"
+          );
          if (googlePlayVideoElement) {
            this.firstTimeSync(googlePlayVideoElement);
          }
@@ -538,9 +615,13 @@ export default class VideoListener {
            this.video.element
              ? null
              : () => {
-                  const pif = document.querySelector(this.selectors[PLAYER_SOURCE.GOOGLEPLAY]);
+                  const pif = document.querySelector(
+                    this.selectors[PLAYER_SOURCE.GOOGLEPLAY]
+                  );
                  if (pif) {
-                    const gpve = pif.contentWindow.document.querySelector('video');
+                    const gpve = pif.contentWindow.document.querySelector(
+                      "video"
+                    );
                    if (gpve) {
                      this.firstTimeSync(gpve);
                    }
@@ -551,10 +632,12 @@ export default class VideoListener {
        }
      case PLAYER_SOURCE.CRUNCHYROLL:
        const crunchyRollInject = `var sendToWatchPartyApp = function(pS, pT) { var customWatchPartyEvent = new CustomEvent('watchParty', { detail: { watchPartyDirection: 'TO_APP', type: 'WATCH_PARTY_PLAYER_UPDATE', status: pS, time: pT } }); window.dispatchEvent(customWatchPartyEvent); }, watchPartyGetTimeAndSend = function(pS) { if (window.VILOS_PLAYERJS) { window.VILOS_PLAYERJS.getCurrentTime(function(pT) { sendToWatchPartyApp(pS, pT); }); } }, watchPartySendPlaying = function() { watchPartyGetTimeAndSend('PLAYING'); }, watchPartySendPaused = function() { watchPartyGetTimeAndSend('PAUSED'); }, watchPartyInteraction = function(e) { if (e.source === window) { const data = JSON.parse(e.data); if (data.watchPartyDirection === 'TO_SCRIPT') { if (data.type === 'WATCH_PARTY_ADD_LISTENERS') { if (window.VILOS_PLAYERJS) { window.VILOS_PLAYERJS.on('play', watchPartySendPlaying, 'player.js'); window.VILOS_PLAYERJS.on('pause', watchPartySendPaused, 'player.js'); } } else if (data.type === 'WATCH_PARTY_SEEK') { if (window.VILOS_PLAYERJS) { window.VILOS_PLAYERJS.setCurrentTime(data.time); } } else if (data.type === 'WATCH_PARTY_STATUS') { if (window.VILOS_PLAYERJS) { if (data.status === 'PAUSED') window.VILOS_PLAYERJS.pause(); if (data.status === 'PLAYING') window.VILOS_PLAYERJS.play(); } } } } }; window.addEventListener("message", watchPartyInteraction);`;
-        const crunchyRollInjectScript = document.createElement('script');
+        const crunchyRollInjectScript = document.createElement("script");
        crunchyRollInjectScript.text = crunchyRollInject;
        document.head.appendChild(crunchyRollInjectScript);
-        const crunchyrollIframe = document.querySelector(this.selectors[PLAYER_SOURCE.CRUNCHYROLL]);
+        const crunchyrollIframe = document.querySelector(
+          this.selectors[PLAYER_SOURCE.CRUNCHYROLL]
+        );
        if (crunchyrollIframe) {
          this.firstTimeSync(crunchyrollIframe);
        } else {
@@ -562,7 +645,9 @@ export default class VideoListener {
            this.video.element
              ? null
              : () => {
-                  const cif = document.querySelector(this.selectors[PLAYER_SOURCE.CRUNCHYROLL]);
+                  const cif = document.querySelector(
+                    this.selectors[PLAYER_SOURCE.CRUNCHYROLL]
+                  );
                  if (cif) {
                    this.firstTimeSync(cif);
                  }
@@ -572,7 +657,7 @@ export default class VideoListener {
        }
        break;
      case PLAYER_SOURCE.LOCAL:
-        const localVideoElement = document.getElementsByTagName('video')[0];
+        const localVideoElement = document.getElementsByTagName("video")[0];
        if (localVideoElement) {
          this.firstTimeSync(localVideoElement);
        }
@@ -584,12 +669,12 @@ export default class VideoListener {
  end() {
    switch (this.video.source) {
      case PLAYER_SOURCE.CRUNCHYROLL:
-        window.removeEventListener('watchParty', this.crunchyRollListener);
+        window.removeEventListener("watchParty", this.crunchyRollListener);
        break;
      default:
        if (this.video.element) {
-          this.video.element.removeEventListener('playing', this.onplay);
-          this.video.element.removeEventListener('pause', this.onpause);
+          this.video.element.removeEventListener("playing", this.onplay);
+          this.video.element.removeEventListener("pause", this.onpause);
        }
    }
  }
@@ -110,7 +110,8 @@ body.youtube.visible .ytp-tooltip.ytp-bottom.ytp-preview {
  bottom: 100px !important;
  top: unset !important;
 }
-body.youtube.visible td-two-column-browse-results-renderer.grid:not(.grid-disabled) {
+body.youtube.visible
+  td-two-column-browse-results-renderer.grid:not(.grid-disabled) {
  max-width: calc(100% - 48px);
 }
 body.youtube.visible ytd-miniplayer {
@@ -239,7 +240,7 @@ body.disney #party_wrapper * {
  left: 0;
  align-items: center;
  justify-content: center;
-  box-sizing: content-box;
+  box-sizing: content-box !important;
 }
 #party-loading.inactive .MuiSvgIcon-root {
  font-size: 50px !important;
@@ -276,6 +277,9 @@ body.disney #party_wrapper * {
 #party-routes-wrapper.visible {
  right: 0;
 }
+#party-routes-wrapper input {
+  box-sizing: content-box !important;
+}
 .party-notification-container {
  z-index: 99999 !important;
  bottom: 0.8rem !important;
@@ -307,7 +311,7 @@ body.disney #party_wrapper * {
  border: 1px solid white;
  background-color: black !important;
  transition: all ease-in-out 0.3s !important;
-  background-image: url('chrome-extension://__MSG_@@extension_id__/android-icon-192x192.png');
+  background-image: url("chrome-extension://__MSG_@@extension_id__/android-icon-192x192.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 75%;