v1.7.3/firefox support

app/public/background.html

@@ -51,9 +51,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
     </style>
   </head>
   <body>
-    <script src="./firebase-app.js"></script>
+    <script src="firebase-app.js"></script>
-    <script src="./firebase-auth.js"></script>
+    <script src="firebase-auth.js"></script>
-    <script src="./firebase-firestore.js"></script>
+    <script src="firebase-firestore.js"></script>
     <script src="background.js"></script>
   </body>
 </html>

app/public/manifest.json

@@ -25,7 +25,8 @@
     "https://*.viki.com/*",
     "https://*.funimation.com/*",
     "https://*.roosterteeth.com/*",
-    "https://*.stan.com.au/*"
+    "https://*.stan.com.au/*",
+    "https://api.giphy.com/*"
   ],
   "content_scripts": [
     {
@@ -52,7 +53,7 @@
       "css": ["/static/css/app.css"]
     }
   ],
-  "web_accessible_resources": ["wp192.png"],
+  "web_accessible_resources": ["/*.png", "static/media/*.svg"],
   "icons": {
     "16": "wp16.png",
     "32": "wp32.png",

app/public/popup.html

@@ -14,6 +14,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
   <head>
     <meta charset="utf-8" />
     <style>
+      * {
+        font-family: Roboto, sans-serif;
+      }
       :root {
         --mdc-theme-primary: #beff94 !important;
         --mdc-theme-secondary: #000000 !important;
@@ -41,6 +44,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       body {
         background: var(--mdc-theme-text-secondary-on-light);
         padding: 15px;
+        width: -moz-fit-content;
       }
       #clear-button {
         font-size: 10px;
@@ -63,6 +67,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       .switch-container {
         margin: 20px 0;
         min-width: max-content;
+        min-width: -moz-max-content;
       }
       .switch-wrapper {
         display: flex;
@@ -99,9 +104,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         padding-right: 10px;
       }
     </style>
-    <link href="./mdc.css" rel="stylesheet" />
+    <link href="mdc.css" rel="stylesheet" />
-    <link href="./mdc-icon.css" rel="stylesheet" />
+    <link href="mdc-icon.css" rel="stylesheet" />
-    <script src="./mdc.js"></script>
+    <script src="mdc.js"></script>
   </head>
   <body>
     <script src="popup.js"></script>

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;

website/404.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/changes/index.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/changes/v1.5.2/index.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/changes/v1.6.0/index.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/changes/v1.6.1/index.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/changes/v1.6.2/index.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/changes/v1.6.3/index.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/changes/v1.6.4/index.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/changes/v1.6.5/index.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/changes/v1.6.6/index.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/changes/v1.6.7/index.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/changes/v1.7.0/index.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/changes/v1.7.1/index.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/changes/v1.7.2/index.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/copyright/index.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/donate/index.html

@@ -182,6 +182,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>

website/index.html

@@ -113,6 +113,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>
@@ -311,7 +314,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         </div>
       </div>
       <div class="end-line">
-        <a class="underlink" data-font="sans">Built with ♥ for Google Chrome by Ayushya Amitabh</a>
+        <a class="underlink" data-font="sans">
+          Built with ♥ for Google Chrome & Mozilla Firefox by Ayushya Amitabh
+        </a>
         <a class="underlink" target="_blank" href="https://instagram.com/chromewatchparty">
           <svg
             height="4rem"

website/styles/extralarge.css

@@ -40,3 +40,29 @@ body {
 .donate.card-grid .support-card {
   display: inline-block !important;
 }
+
+.text-section .info {
+  width: 100%;
+  max-width: 150rem;
+  position: relative;
+}
+
+.text-section .info .info-text {
+  display: flex;
+  width: 100%;
+}
+
+.text-section .info .info-text > * {
+  flex: 1;
+}
+
+.text-section .info .info-text .sub-title {
+  margin-top: 2.5rem;
+  margin-right: 6rem;
+}
+
+.info {
+  width: 70rem;
+  max-width: 70rem;
+  display: inline-table;
+}

website/styles/extrasmall.css

@@ -141,7 +141,7 @@ body {
   border-radius: 20rem;
   color: var(--color-primary);
   padding: 2.5rem 5rem;
-  margin: 10rem 0rem;
+  margin: 2.5rem 0;
   max-width: 100%;
   text-align: center;
   font-size: 2.8rem;
@@ -149,6 +149,15 @@ body {
   letter-spacing: 2px;
 }
 
+.heading .big-button {
+  margin-top: 10rem;
+}
+
+.heading .big-button:last-of-type {
+  margin-top: 0;
+  margin-bottom: 10rem;
+}
+
 a.big-button::after {
   color: var(--color-primary);
 }
@@ -228,6 +237,8 @@ a.big-button::after {
 .card-grid {
   max-height: fit-content;
   margin-bottom: 10rem;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-secondary) var(--color-tertiary);
 }
 
 .card-grid::-webkit-scrollbar {

website/styles/large.css

@@ -23,12 +23,6 @@ body {
   max-width: max-content;
 }
 
-.info {
-  width: 70rem;
-  max-width: 70rem;
-  display: inline-table;
-}
-
 .info.alert {
   padding-top: 0;
   max-width: calc(100% - 12.5rem) !important;
@@ -121,23 +115,3 @@ footer .end-line .underlink:first-of-type {
 footer .end-line .underlink:not(:last-of-type) {
   margin-right: 2.5rem;
 }
-
-.text-section .info {
-  width: 100%;
-  max-width: 150rem;
-  position: relative;
-}
-
-.text-section .info .info-text {
-  display: flex;
-  width: 100%;
-}
-
-.text-section .info .info-text > * {
-  flex: 1;
-}
-
-.text-section .info .info-text .sub-title {
-  margin-top: 2.5rem;
-  margin-right: 6rem;
-}

website/styles/medium.css

@@ -31,7 +31,13 @@ a.title {
 }
 
 .big-button {
+  display: inline-block;
   font-size: 1.8rem;
+  margin: 10rem 0rem;
+}
+
+.heading .big-button:not(:last-of-type) {
+  margin-right: 5rem;
 }
 
 .bubble.right {
@@ -42,6 +48,34 @@ a.title {
   margin-left: 0rem;
 }
 
+.info {
+  display: inline-block;
+  max-width: calc(50% - 3rem);
+}
+
+.heading + .overlap .info:first-of-type {
+  margin-right: 3rem;
+}
+
+.text-section .info {
+  max-width: 100%;
+  margin-right: 0;
+}
+
+.text-section .info .info-text {
+  display: flex;
+  flex-direction: row;
+}
+
+.text-section .info .info-text * {
+  flex: 1;
+}
+
+.text-section .info .info-text h4.sub-title {
+  margin-top: 3rem;
+  padding-right: 3rem;
+}
+
 .link-list .underlink {
   width: fit-content;
 }

website/welcome/index.html

@@ -112,6 +112,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <h4 class="sub-title" data-font="sans">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET FIREFOX ADD-ON
+      </a>
       <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
         GET CHROME EXTENSION
       </a>