v1.7.3/firefox support

app/src/App.js

@@ -103,6 +103,9 @@ const App = () => {
       setShowFab(showWPButton);
       if (showWPButton === true) {
         document.querySelector('.watch-party-fab').classList.remove('watch-party-fab-hidden');
+        document.querySelector(
+          '.watch-party-fab'
+        ).style.backgroundImage = `url("${CHROME_OR_BROWSER.extension.getURL('wp192.png')}")`;
       }
     });
   }, []);

app/src/Chat.js

@@ -9,7 +9,9 @@ ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, U
 CITED ARE THE SOLE INTELLECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
 COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 ************************************************************************/
-/*global chrome */
+/*global chrome*/
+/*global browser*/
+
 import React, { Component } from 'react';
 import {
   Typography,
@@ -73,6 +75,8 @@ import CallManager from './CallManager';
 import VideoListener from './VideoListener';
 import ReactGiphySearchbox from 'react-giphy-searchbox';
 
+let CHROME_OR_BROWSER = chrome || browser;
+
 export default class Chat extends Component {
   constructor(props) {
     super(props);
@@ -161,7 +165,7 @@ export default class Chat extends Component {
     this.mVideoListener.start();
 
     // CHROME FIREBASE FIRESTORE LISTENER
-    this.port = chrome.runtime.connect({ name: LocalData().partyName });
+    this.port = CHROME_OR_BROWSER.runtime.connect({ name: LocalData().partyName });
     // Initialize listener
     this.port.postMessage({
       type: 'INIT',

app/src/Thread.css

@@ -24,6 +24,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
   padding: 0 15px;
   margin-top: 1rem;
   outline: none;
+  min-width: 100%;
 }
 .thread-wrapper.sending-wrapper {
   flex: unset;
@@ -36,6 +37,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 .thread-item {
   color: white;
   width: fit-content;
+  width: -moz-fit-content;
   margin: 10px 0;
   width: 100%;
   transition: none !important;
@@ -107,6 +109,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
   transition: all ease-in-out 0.3s;
   transition-delay: 0.1s;
   width: fit-content;
+  width: -moz-fit-content;
   min-height: 25px;
   display: flex;
   align-items: center;
@@ -146,6 +149,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
   border-radius: 13px;
   background: #222222;
   width: fit-content;
+  width: -moz-fit-content;
   max-width: 45%;
   z-index: 999 !important;
   transition: all ease-in-out 0.3s;
@@ -163,6 +167,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 }
 .thread-reply p {
   width: fit-content;
+  width: -moz-fit-content;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;

app/src/Thread.js

@@ -194,7 +194,7 @@ export default class Thread extends Component {
     const { autoSizeWidth } = this.state;
     const { sentMessages, isSending, sendingMessages, setReplyTo } = this.props;
     return !isSending ? (
-      <AutoSizer style={{ flex: 1 }}>
+      <AutoSizer style={{ flex: '1 auto', minWidth: '100%' }}>
         {({ height, width }) => {
           if (autoSizeWidth !== width) {
             cache.clearAll();

app/src/VideoListener.js

@@ -61,6 +61,8 @@ export default class VideoListener {
   }
   async doUpdate(serverPlayer) {
     if (
+      this.video.showName &&
+      serverPlayer.showName &&
       this.video.showName !== serverPlayer.showName &&
       window.location.href !== serverPlayer.url &&
       serverPlayer.updatedBy !== LocalData().userUid

app/src/index.css

@@ -397,10 +397,8 @@ body.stan .party-content-wrapper input {
   position: fixed !important;
   top: calc(100% - 75px) !important;
   right: -2rem !important;
-  border: 1px solid white;
   background-color: black !important;
   transition: all ease-in-out 0.3s !important;
-  background-image: url('chrome-extension://__MSG_@@extension_id__/wp192.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 75%;
@@ -408,6 +406,8 @@ body.stan .party-content-wrapper input {
   animation-iteration-count: 1;
   animation-duration: 2s;
   transition: all ease-in-out 0.3s !important;
+  border: none !important;
+  outline: none !important;
 }
 .watch-party-fab.watch-party-fab-hidden {
   display: none;
@@ -822,6 +822,12 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
   box-sizing: border-box !important;
 }
 
+.thread-wrapper,
+.giphy-list-wrapper {
+  scrollbar-width: thin !important;
+  scrollbar-color: #beff94 #424242 !important;
+}
+
 .thread-wrapper::-webkit-scrollbar,
 .giphy-list-wrapper::-webkit-scrollbar {
   width: 5px;