v1.3.2-beta/URGENT PATCH FIX, clean up fix

app/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-party-crx",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-party-crx",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "private": true,
   "dependencies": {
     "@giphy/js-fetch-api": "^1.5.8",

app/public/manifest.json

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

app/src/App.js

@@ -8,6 +8,8 @@ import 'firebase/firestore';
 import Inactive from './Inactive';
 import { getUserUid } from './Api';
 
+const APP_VERSION = '1.3.2';
+
 const darkTheme = createMuiTheme({
   palette: {
     type: 'dark',
@@ -26,6 +28,10 @@ const Routes = (props) => (
   </Router>
 );
 
+const wrongVersionStatus = {
+  message: `Looks like Watch Party needs to update.\nGo to chrome://extensions to manually update.`,
+};
+
 const App = () => {
   const closedNotification = { open: false, message: '' };
 
@@ -76,13 +82,13 @@ const App = () => {
       <div className="party-content-wrapper">
         <div id="party-routes-wrapper">
           {loading && <Loading />}
-          {status.active ? (
+          {status.active2 && status.version === APP_VERSION ? (
             <Routes
               updateLoading={setLoading}
               notify={(message) => setNotification({ open: true, message })}
             />
           ) : (
-            <Inactive status={status} />
+            <Inactive status={status.version !== APP_VERSION ? wrongVersionStatus : status} />
           )}
         </div>
         <Fab onClick={() => setVisible(!visible)} className="watch-party-fab">

app/src/Chat.js

@@ -111,8 +111,7 @@ export default class Chat extends Component {
         return;
       }
       this.setState(response);
-      if (response.player && this.state.player !== response.player)
-        this.mVideoListener.doUpdate(response.player);
+      if (response.player) this.mVideoListener.doUpdate(response.player);
       const pcc = document.querySelector('.thread-container');
       if (pcc) pcc.scrollTop = pcc.scrollHeight;
     });

app/src/index.css

@@ -90,20 +90,6 @@ body.amazon-prime textarea:focus {
   box-shadow: none !important;
 }
 
-@keyframes backgroundpulse {
-  0% {
-    background-color: black;
-    color: red;
-  }
-  50% {
-    background-color: red;
-    color: black;
-  }
-  100% {
-    background-color: black;
-    color: red;
-  }
-}
 #party-loading {
   position: absolute;
   width: 100%;
@@ -119,10 +105,16 @@ body.amazon-prime textarea:focus {
 #party-loading.inactive {
   flex-direction: column;
   text-align: center;
-  animation-duration: 4s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-name: backgroundpulse;
+  padding: 2rem;
+  width: calc(100% - 4rem);
+  height: calc(100% - 4rem);
+  white-space: break-spaces;
+}
+#party-loading.inactive .MuiTypography-overline {
+  font-size: 1.1rem !important;
+}
+#party-loading.inactive .MuiTypography-caption {
+  font-size: 1rem !important;
 }
 #party-routes-wrapper {
   margin: 0;