add functions, create and join room

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "watch-party-crx"
+  }
+}

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+/functions/node_modules/*
 
 # testing
 /coverage
@@ -20,3 +21,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .history/
+
+FirebaseSecret.json

firebase.json

@@ -0,0 +1,7 @@
+{
+  "functions": {
+    "predeploy": [
+      "npm --prefix \"$RESOURCE_DIR\" run lint"
+    ]
+  }
+}

functions/.eslintrc.json

@@ -0,0 +1,123 @@
+{
+  "parserOptions": {
+    // Required for certain syntax usages
+    "ecmaVersion": 2017
+  },
+  "plugins": [
+    "promise"
+  ],
+  "extends": "eslint:recommended",
+  "rules": {
+    // Removed rule "disallow the use of console" from recommended eslint rules
+    "no-console": "off",
+
+    // Removed rule "disallow multiple spaces in regular expressions" from recommended eslint rules
+    "no-regex-spaces": "off",
+
+    // Removed rule "disallow the use of debugger" from recommended eslint rules
+    "no-debugger": "off",
+
+    // Removed rule "disallow unused variables" from recommended eslint rules
+    "no-unused-vars": "off",
+
+    // Removed rule "disallow mixed spaces and tabs for indentation" from recommended eslint rules
+    "no-mixed-spaces-and-tabs": "off",
+
+    // Removed rule "disallow the use of undeclared variables unless mentioned in /*global */ comments" from recommended eslint rules
+    "no-undef": "off",
+
+    // Warn against template literal placeholder syntax in regular strings
+    "no-template-curly-in-string": 1,
+
+    // Warn if return statements do not either always or never specify values
+    "consistent-return": 1,
+
+    // Warn if no return statements in callbacks of array methods
+    "array-callback-return": 1,
+
+    // Require the use of === and !==
+    "eqeqeq": 2,
+
+    // Disallow the use of alert, confirm, and prompt
+    "no-alert": 2,
+
+    // Disallow the use of arguments.caller or arguments.callee
+    "no-caller": 2,
+
+    // Disallow null comparisons without type-checking operators
+    "no-eq-null": 2,
+
+    // Disallow the use of eval()
+    "no-eval": 2,
+
+    // Warn against extending native types
+    "no-extend-native": 1,
+
+    // Warn against unnecessary calls to .bind()
+    "no-extra-bind": 1,
+
+    // Warn against unnecessary labels    
+    "no-extra-label": 1,
+
+    // Disallow leading or trailing decimal points in numeric literals
+    "no-floating-decimal": 2,
+
+    // Warn against shorthand type conversions
+    "no-implicit-coercion": 1,
+
+    // Warn against function declarations and expressions inside loop statements
+    "no-loop-func": 1,
+
+    // Disallow new operators with the Function object
+    "no-new-func": 2,
+
+    // Warn against new operators with the String, Number, and Boolean objects
+    "no-new-wrappers": 1,
+
+    // Disallow throwing literals as exceptions
+    "no-throw-literal": 2,
+
+    // Require using Error objects as Promise rejection reasons
+    "prefer-promise-reject-errors": 2,
+
+    // Enforce “for” loop update clause moving the counter in the right direction
+    "for-direction": 2,
+
+    // Enforce return statements in getters
+    "getter-return": 2,
+
+    // Disallow await inside of loops
+    "no-await-in-loop": 2,
+
+    // Disallow comparing against -0
+    "no-compare-neg-zero": 2,
+
+    // Warn against catch clause parameters from shadowing variables in the outer scope
+    "no-catch-shadow": 1,
+
+    // Disallow identifiers from shadowing restricted names
+    "no-shadow-restricted-names": 2,
+
+    // Enforce return statements in callbacks of array methods
+    "callback-return": 2,
+
+    // Require error handling in callbacks
+    "handle-callback-err": 2,
+
+    // Warn against string concatenation with __dirname and __filename
+    "no-path-concat": 1,
+
+    // Prefer using arrow functions for callbacks
+    "prefer-arrow-callback": 1,
+
+    // Return inside each then() to create readable and reusable Promise chains.
+    // Forces developers to return console logs and http calls in promises. 
+    "promise/always-return": 2,
+
+    //Enforces the use of catch() on un-returned promises
+    "promise/catch-or-return": 2,
+
+    // Warn against nested then() or catch() statements
+    "promise/no-nesting": 1
+  }
+}

functions/index.js

@@ -0,0 +1,98 @@
+const functions = require('firebase-functions');
+const admin = require('firebase-admin');
+const secret = require('./FirebaseSecret.json');
+const express = require('express');
+const cors = require('cors');
+
+const authenticator = (req,res,next) => {
+  if (req.method === 'OPTIONS') {
+    res.status(200).send();
+    return next();
+  }
+  
+  const token = req.headers.authorization.split(' ')[1];
+  const reqToken = token.split(':')[0];
+  const reqUid = token.split(':')[1];
+  admin.auth().verifyIdToken(reqToken).then( user => {
+    if (user.uid === reqUid) {
+      console.log('Verified Token - UID - ', reqUid);
+      if (req.method === 'POST') {
+        const bodydata = JSON.parse(req.body);
+        bodydata.uid = user.uid;
+        req.body = JSON.stringify(bodydata);
+      }
+      if (req.method === 'GET') {
+        req.body = JSON.stringify({uid: user.uid});
+      }
+      return next();
+    } else {
+      return res.status(401).send('Unauthorized');
+    }
+  }).catch(err => {
+    console.log('Failed Auth - ', req.headers.authorization, '\n', err);
+    return res.status(500).send(err);
+  });
+  return null;
+};
+
+const createRoom = async (req,res) => {
+  const bodydata = JSON.parse(req.body);
+  console.log('Requested Create - UID - ', bodydata.uid);
+  if (!bodydata.userName) res.status(400).send('Missing user name');
+  const roomId = await admin.firestore().collection('rooms').add({
+    name: bodydata.roomName,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  }).then(ref => ref.id)
+  .catch(err => {
+    console.error(err);
+  });
+  await admin.firestore().collection('rooms').doc(roomId).collection('messages').add({
+    uid: '<system>',
+    name: '',
+    text: `${bodydata.userName} started the party.`,
+    time: new Date().toISOString(),
+  });
+  await admin.firestore().collection('rooms').doc(roomId).collection('users').doc(bodydata.uid).set({
+    admin: true,
+    name: bodydata.userName,
+  });
+  res.status(201).send({ roomId });
+}
+
+const joinRoom = async (req, res) => {
+  const bodydata = JSON.parse(req.body);
+  console.log('Requested Create - UID - ', bodydata.uid, '\n\tRoom - ', bodydata.roomId);
+  const exists = await admin.firestore().collection('rooms').doc(bodydata.roomId).get().then(roomSnap => roomSnap.exists);
+  const userExists = await admin.firestore().collection('rooms').doc(bodydata.roomId).collection('users').doc(bodydata.uid).get().then(userSnap => userSnap.exists);
+  if (userExists) return res.status(200).send({roomId: bodydata.roomId});
+  if (exists && bodydata.roomId && bodydata.userName) {
+    await admin.firestore().collection('rooms').doc(bodydata.roomId).collection('messages').add({
+      uid: '<system>',
+      name: '',
+      text: `${bodydata.userName} joined the party.`,
+      time: new Date().toISOString(),
+    });
+    await admin.firestore().collection('rooms').doc(bodydata.roomId).collection('users').doc(bodydata.uid).set({
+      admin: false,
+      name: bodydata.userName,
+    });
+    res.status(200).send({roomId: bodydata.roomId});
+  }
+  if (!bodydata.userName) res.status(400).send('Missing user name');
+  else res.status(404).send('Party Not Found');
+}
+
+const app = express();
+app.use(cors({origin: true}));
+app.use(authenticator);
+
+admin.initializeApp({
+  credential: admin.credential.cert(secret),
+  databaseURL: "https://watch-party-crx.firebaseio.com"
+});
+
+app.post('/create', createRoom);
+app.post('/join', joinRoom);
+
+exports.widgets = functions.https.onRequest(app);

functions/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "functions",
+  "description": "Cloud Functions for Firebase",
+  "scripts": {
+    "lint": "eslint .",
+    "serve": "firebase emulators:start --only functions",
+    "shell": "firebase functions:shell",
+    "start": "npm run shell",
+    "deploy": "firebase deploy --only functions",
+    "logs": "firebase functions:log"
+  },
+  "engines": {
+    "node": "8"
+  },
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.17.1",
+    "firebase-admin": "^8.6.0",
+    "firebase-functions": "^3.3.0"
+  },
+  "devDependencies": {
+    "eslint": "^5.12.0",
+    "eslint-plugin-promise": "^4.0.1",
+    "firebase-functions-test": "^0.1.6"
+  },
+  "private": true
+}

package-lock.json

@@ -4,6 +4,42 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@ant-design/colors": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-3.2.2.tgz",
+      "integrity": "sha512-YKgNbG2dlzqMhA9NtI3/pbY16m3Yl/EeWBRa+lB1X1YaYxHrxNexiQYCLTWO/uDvAjLFMEDU+zR901waBtMtjQ==",
+      "requires": {
+        "tinycolor2": "^1.4.1"
+      }
+    },
+    "@ant-design/icons": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-4.0.4.tgz",
+      "integrity": "sha512-ahfgVvTsZtRTdS90KQPOoEd+PDBLyJJKfoLqt+W/kWab86xiJUyW5yboxmvg8DSmjJup1b7OM24Qmxguv5vrIA==",
+      "requires": {
+        "@ant-design/colors": "^3.1.0",
+        "@ant-design/icons-svg": "^4.0.0",
+        "classnames": "^2.2.6",
+        "insert-css": "^2.0.0",
+        "rc-util": "^4.9.0"
+      }
+    },
+    "@ant-design/icons-svg": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.0.0.tgz",
+      "integrity": "sha512-Nai+cd3XUrv/z50gSk1FI08j6rENZ1e93rhKeLTBGwa5WrmHvhn2vowa5+voZW2qkXJn1btS6tdvTEDB90M0Pw=="
+    },
+    "@ant-design/react-slick": {
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-0.25.5.tgz",
+      "integrity": "sha512-fusHR9LkarCARvYTN6cG3yz2/Ogf+HTaJ2XEihIjsjgm6uE1aSXycRFEVDpOFP1Aib51Z2Iz3tgg/gL+WbK8rQ==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "json2mq": "^0.2.0",
+        "lodash": "^4.17.15",
+        "resize-observer-polyfill": "^1.5.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
@@ -1678,6 +1714,25 @@
         "@types/node": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+          "requires": {
+            "react-is": "^16.7.0"
+          }
+        }
+      }
+    },
     "@types/json-schema": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
@@ -1704,6 +1759,33 @@
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+    },
+    "@types/react": {
+      "version": "16.9.26",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.26.tgz",
+      "integrity": "sha512-dGuSM+B0Pq1MKXYUMlUQWeS6Jj9IhSAUf9v8Ikaimj+YhkBcQrihWBkmyEhK/1fzkJTwZQkhZp5YhmWa2CH+Rw==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-lifecycles-compat": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react-lifecycles-compat/-/react-lifecycles-compat-3.0.1.tgz",
+      "integrity": "sha512-4KiU5s1Go4xRbf7t6VxUUpBeN5PGjpjpBv9VvET4uiPHC500VNYBclU13f8ehHkHoZL39b2cfwHu6RzbV3b44A==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/shallowequal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/shallowequal/-/shallowequal-1.1.1.tgz",
+      "integrity": "sha512-Lhni3aX80zbpdxRuWhnuYPm8j8UQaa571lHP/xI4W+7BAFhSIhRReXnqjEgT/XzPoXZTJkCqstFMJ8CZTK6IlQ=="
+    },
     "@types/uuid": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-7.0.2.tgz",
@@ -2043,6 +2125,14 @@
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
       "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ=="
     },
+    "add-dom-event-listener": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz",
+      "integrity": "sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==",
+      "requires": {
+        "object-assign": "4.x"
+      }
+    },
     "address": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/address/-/address-1.1.2.tgz",
@@ -2149,6 +2239,67 @@
         "color-convert": "^1.9.0"
       }
     },
+    "antd": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-4.0.4.tgz",
+      "integrity": "sha512-wPcUzQBDDEFrA2L7b1HOHcVhXZk11nl773XQHb6wtQR6NANY11T8xNJ3GRZ/yB3sfzsWqXYCBGBui/12Dmu3nQ==",
+      "requires": {
+        "@ant-design/icons": "^4.0.0",
+        "@ant-design/react-slick": "~0.25.5",
+        "array-tree-filter": "^2.1.0",
+        "classnames": "~2.2.6",
+        "copy-to-clipboard": "^3.2.0",
+        "css-animation": "^1.5.0",
+        "lodash": "^4.17.13",
+        "moment": "^2.24.0",
+        "omit.js": "^1.0.2",
+        "prop-types": "^15.7.2",
+        "raf": "^3.4.1",
+        "rc-animate": "~2.10.2",
+        "rc-cascader": "~1.0.0",
+        "rc-checkbox": "~2.1.6",
+        "rc-collapse": "~1.11.3",
+        "rc-dialog": "~7.6.0",
+        "rc-drawer": "~3.1.1",
+        "rc-dropdown": "~3.0.0",
+        "rc-field-form": "~1.0.0",
+        "rc-input-number": "~4.5.4",
+        "rc-mentions": "~1.0.0",
+        "rc-menu": "~8.0.1",
+        "rc-notification": "~4.0.0",
+        "rc-pagination": "~2.0.1",
+        "rc-picker": "~1.1.0",
+        "rc-progress": "~2.5.0",
+        "rc-rate": "~2.5.1",
+        "rc-resize-observer": "^0.1.0",
+        "rc-select": "~10.0.0",
+        "rc-slider": "~9.2.3",
+        "rc-steps": "~3.5.0",
+        "rc-switch": "~1.9.0",
+        "rc-table": "~7.3.0",
+        "rc-tabs": "~10.0.0",
+        "rc-tooltip": "~4.0.2",
+        "rc-tree": "~3.0.0",
+        "rc-tree-select": "~3.0.0",
+        "rc-trigger": "~4.0.0",
+        "rc-upload": "~3.0.0",
+        "rc-util": "^4.20.0",
+        "rc-virtual-list": "~1.0.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "scroll-into-view-if-needed": "^2.2.20",
+        "warning": "~4.0.3"
+      },
+      "dependencies": {
+        "raf": {
+          "version": "3.4.1",
+          "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+          "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+          "requires": {
+            "performance-now": "^2.1.0"
+          }
+        }
+      }
+    },
     "anymatch": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.2.tgz",
@@ -2247,6 +2398,11 @@
         "is-string": "^1.0.5"
       }
     },
+    "array-tree-filter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
+      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
+    },
     "array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -2377,6 +2533,11 @@
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
     },
+    "async-validator": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-3.2.4.tgz",
+      "integrity": "sha512-mTgzMJixkrh+5t2gbYoua8MLy11GHkQqFE6tbhY5Aqc4jEDGsR4BWP+sVQiYDHtzTMB8WIwI/ypObTVPcTZInw=="
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -3785,6 +3946,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -3942,11 +4108,24 @@
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
     },
+    "component-classes": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz",
+      "integrity": "sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=",
+      "requires": {
+        "component-indexof": "0.0.3"
+      }
+    },
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
       "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
     },
+    "component-indexof": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz",
+      "integrity": "sha1-EdCRMSI5648yyPJa6csAL/6NPCQ="
+    },
     "compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -3969,6 +4148,11 @@
         "vary": "~1.1.2"
       }
     },
+    "compute-scroll-into-view": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.13.tgz",
+      "integrity": "sha512-o+w9w7A98aAFi/GjK8cxSV+CdASuPa2rR5UWs3+yHkJzWqaKoBEufFNWYaXInCSmUfDCVhesG+v9MTWqOjsxFg=="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4107,6 +4291,14 @@
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "core-js": {
       "version": "2.6.11",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
@@ -4271,6 +4463,15 @@
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
       "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
     },
+    "css-animation": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.6.1.tgz",
+      "integrity": "sha512-/48+/BaEaHRY6kNQ2OIPzKf9A6g8WjZYjhiNDNuIVbsm5tXCGIAsHDjB4Xu1C4vXJtUWZo26O68OQkDpNBaPog==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "component-classes": "^1.2.5"
+      }
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4810,6 +5011,11 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-align": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.11.1.tgz",
+      "integrity": "sha512-hN42DmUgtweBx0iBjDLO4WtKOMcK8yBmPx/fgdsgQadLuzPu/8co3oLdK5yMmeM/vnUd3yDyV6qV8/NzxBexQg=="
+    },
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -7832,6 +8038,11 @@
         }
       }
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -7978,6 +8189,11 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+    },
     "home-or-tmp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -8669,6 +8885,11 @@
         }
       }
     },
+    "insert-css": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz",
+      "integrity": "sha1-610Ql7dUL0x56jBg067gfQU4gPQ="
+    },
     "internal-ip": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
@@ -9539,6 +9760,14 @@
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
+    "json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=",
+      "requires": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "json3": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz",
@@ -10038,6 +10267,21 @@
         }
       }
     },
+    "mini-store": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mini-store/-/mini-store-3.0.1.tgz",
+      "integrity": "sha512-6cQjjfUoL53+E0oUd5gQs9/rMicXG7lbK3dgzAMv2qPOnA+cR3yIB/CcAN3YKsFVt01/hOO0lf0M+a+6/lQRdg==",
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/react-lifecycles-compat": "^3.0.1",
+        "@types/shallowequal": "^1.1.1",
+        "hoist-non-react-statics": "^2.3.1",
+        "prop-types": "^15.6.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "shallowequal": "^1.0.2",
+        "typescript": "^3.8.3"
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -10107,6 +10351,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -10548,6 +10797,14 @@
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
     },
+    "omit.js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/omit.js/-/omit.js-1.0.2.tgz",
+      "integrity": "sha512-/QPc6G2NS+8d4L/cQhbk6Yit1WTB6Us2g84A7A/1+w9d/eRGHyEqC5kkQtHVoHZ5NFWGG7tUGgrhVZwgZanKrQ==",
+      "requires": {
+        "babel-runtime": "^6.23.0"
+      }
+    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -12581,6 +12838,438 @@
         }
       }
     },
+    "rc-align": {
+      "version": "3.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-3.0.0-rc.1.tgz",
+      "integrity": "sha512-GbofumhCUb7SxP410j/fbtR2M9Zml+eoZSdaliZh6R3NhfEj5zP4jcO3HG3S9C9KIcXQQtd/cwVHkb9Y0KU7Hg==",
+      "requires": {
+        "classnames": "2.x",
+        "dom-align": "^1.7.0",
+        "rc-util": "^4.12.0",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
+    "rc-animate": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.10.3.tgz",
+      "integrity": "sha512-A9qQ5Y8BLlM7EhuCO3fWb/dChndlbWtY/P5QvPqBU7h4r5Q2QsvsbpTGgdYZATRDZbTRnJXXfVk9UtlyS7MBLg==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.6",
+        "css-animation": "^1.3.2",
+        "prop-types": "15.x",
+        "raf": "^3.4.0",
+        "rc-util": "^4.15.3",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-cascader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-1.0.1.tgz",
+      "integrity": "sha512-3mk33+YKJBP1XSrTYbdVLuCC73rUDq5STNALhvua5i8vyIgIxtb5fSl96JdWWq1Oj8tIBoHnCgoEoOYnIXkthQ==",
+      "requires": {
+        "array-tree-filter": "^2.1.0",
+        "rc-trigger": "^4.0.0",
+        "rc-util": "^4.0.4",
+        "warning": "^4.0.1"
+      }
+    },
+    "rc-checkbox": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-2.1.8.tgz",
+      "integrity": "sha512-6qOgh0/by0nVNASx6LZnhRTy17Etcgav+IrI7kL9V9kcDZ/g7K14JFlqrtJ3NjDq/Kyn+BPI1st1XvbkhfaJeg==",
+      "requires": {
+        "babel-runtime": "^6.23.0",
+        "classnames": "2.x",
+        "prop-types": "15.x",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-collapse": {
+      "version": "1.11.8",
+      "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-1.11.8.tgz",
+      "integrity": "sha512-8EhfPyScTYljkbRuIoHniSwZagD5UPpZ3CToYgoNYWC85L2qCbPYF7+OaC713FOrIkp6NbfNqXsITNxmDAmxog==",
+      "requires": {
+        "classnames": "2.x",
+        "css-animation": "1.x",
+        "prop-types": "^15.5.6",
+        "rc-animate": "2.x",
+        "react-is": "^16.7.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-dialog": {
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-7.6.1.tgz",
+      "integrity": "sha512-KUKf+2eZ4YL+lnXMG3hR4ZtIhC9glfH27NtTVz3gcoDIPAf3uUvaXVRNoDCiSi+OGKLyIb/b6EoidFh6nQC5Wg==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "rc-animate": "2.x",
+        "rc-util": "^4.16.1"
+      }
+    },
+    "rc-drawer": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-3.1.3.tgz",
+      "integrity": "sha512-2z+RdxmzXyZde/1OhVMfDR1e/GBswFeWSZ7FS3Fdd0qhgVdpV1wSzILzzxRaT481ItB5hOV+e8pZT07vdJE8kg==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "rc-util": "^4.16.1",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-dropdown": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-3.0.2.tgz",
+      "integrity": "sha512-T3XP4qL6xmkxn8z52YF2SEPoMHPpBiLf0Kty3mjNdRSyKnlu+0F+3bhDHf6gO1msmqrjURaz8sMNAFDcoFHHnw==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "classnames": "^2.2.6",
+        "rc-trigger": "^4.0.0"
+      }
+    },
+    "rc-field-form": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.0.1.tgz",
+      "integrity": "sha512-0m9ydH+XQtEwdTOrUgGqv0q6WCDQKNqwHiUB4fKZUdpLze/7i7gGIDVAc6CUNiTMb2Y5+V+wPtYhF4rBPhsX3g==",
+      "requires": {
+        "@babel/runtime": "^7.8.4",
+        "async-validator": "^3.0.3",
+        "rc-util": "^4.17.0",
+        "warning": "^4.0.3"
+      }
+    },
+    "rc-hammerjs": {
+      "version": "0.6.9",
+      "resolved": "https://registry.npmjs.org/rc-hammerjs/-/rc-hammerjs-0.6.9.tgz",
+      "integrity": "sha512-4llgWO3RgLyVbEqUdGsDfzUDqklRlQW5VEhE3x35IvhV+w//VPRG34SBavK3D2mD/UaLKaohgU41V4agiftC8g==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "hammerjs": "^2.0.8",
+        "prop-types": "^15.5.9"
+      }
+    },
+    "rc-input-number": {
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-4.5.6.tgz",
+      "integrity": "sha512-AXbL4gtQ1mSQnu6v/JtMv3UbGRCzLvQznmf0a7U/SAtZ8+dCEAqD4JpJhkjv73Wog53eRYhw4l7ApdXflc9ymg==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.0",
+        "prop-types": "^15.5.7",
+        "rc-util": "^4.5.1",
+        "rmc-feedback": "^2.0.0"
+      }
+    },
+    "rc-mentions": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-1.0.1.tgz",
+      "integrity": "sha512-EgXFYsNHk44ifwDcbtd3zX7rJc3lHplfVEVEf8oxZeeyyIzFD0GLs0Z0LWHNs6Gm4wTAHvcR0j4Pd5M7fLtBoA==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "rc-menu": "^8.0.1",
+        "rc-trigger": "^4.0.0",
+        "rc-util": "^4.6.0"
+      }
+    },
+    "rc-menu": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-8.0.3.tgz",
+      "integrity": "sha512-a37l9MfzjXt8/q5en6ukjD2PoVsHCzWeRPdFK9eWi6hF5/9M3mfxgUt1LruQvaJKMQUxDyN5+4M8FsYULXJALw==",
+      "requires": {
+        "classnames": "2.x",
+        "mini-store": "^3.0.1",
+        "rc-animate": "^2.10.1",
+        "rc-trigger": "^4.0.0",
+        "rc-util": "^4.13.0",
+        "resize-observer-polyfill": "^1.5.0",
+        "scroll-into-view-if-needed": "^2.2.20",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-notification": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-4.0.0.tgz",
+      "integrity": "sha512-In9FimkJY+JSIq3/eopPfBpQQr2Zugq5i9Aw9vdiNCGCsAsSO9bGq2dPsn8bamOydNrhc3djljGfmxUUMbcZnA==",
+      "requires": {
+        "classnames": "2.x",
+        "rc-animate": "2.x",
+        "rc-util": "^4.0.4"
+      }
+    },
+    "rc-pagination": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-2.0.1.tgz",
+      "integrity": "sha512-jvLb05p1OEBUxRobWFjnrj6vRyvhG8XHouK6qh+eepCHPo7HDzUHHztvUUAWr5f+WnKldAXqdPcGgbM4rCH1OA==",
+      "requires": {
+        "classnames": "^2.2.1"
+      }
+    },
+    "rc-picker": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-1.1.5.tgz",
+      "integrity": "sha512-4Ea42Yg/0J95typselVZj4kDu+eNKT1s31tFwAbLNnzCg3l6VUe9jtSLNMkl1rHWICg+RNmeuM0Ua1NAHpXR7Q==",
+      "requires": {
+        "classnames": "^2.2.1",
+        "moment": "^2.24.0",
+        "rc-trigger": "^4.0.0",
+        "rc-util": "^4.17.0",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-progress": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-2.5.2.tgz",
+      "integrity": "sha512-ajI+MJkbBz9zYDuE9GQsY5gsyqPF7HFioZEDZ9Fmc+ebNZoiSeSJsTJImPFCg0dW/5WiRGUy2F69SX1aPtSJgA==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "prop-types": "^15.5.8"
+      }
+    },
+    "rc-rate": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.5.1.tgz",
+      "integrity": "sha512-3iJkNJT8xlHklPCdeZtUZmJmRVUbr6AHRlfSsztfYTXVlHrv2TcPn3XkHsH+12j812WVB7gvilS2j3+ffjUHXg==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.8",
+        "rc-util": "^4.3.0",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-resize-observer": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-0.1.3.tgz",
+      "integrity": "sha512-uzOQEwx83xdQSFOkOAM7x7GHIQKYnrDV4dWxtCxyG1BS1pkfJ4EvDeMfsvAJHSYkQXVBu+sgRHGbRtLG3qiuUg==",
+      "requires": {
+        "classnames": "^2.2.1",
+        "rc-util": "^4.13.0",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
+    "rc-select": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-10.0.4.tgz",
+      "integrity": "sha512-yYua9bsg23GKrsp99kenqbzxt/Snvg2rIusUs+APhgOV3IBlZhfznOOnqQxFHHZa1sdc5hYt6qsWxjtFm8grtQ==",
+      "requires": {
+        "classnames": "2.x",
+        "rc-animate": "^2.10.0",
+        "rc-trigger": "^4.0.0",
+        "rc-util": "^4.20.0",
+        "rc-virtual-list": "^1.0.0",
+        "warning": "^4.0.3"
+      }
+    },
+    "rc-slider": {
+      "version": "9.2.4",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.2.4.tgz",
+      "integrity": "sha512-wSr7vz+WtzzGqsGU2rTQ4mmLz9fkuIDMPYMYm8ygYFvxQ2Rh4uRhOWHYI0R8krNK5k1bGycckYxmQqUIvLAh3w==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.5",
+        "rc-tooltip": "^4.0.0",
+        "rc-util": "^4.0.4",
+        "shallowequal": "^1.1.0",
+        "warning": "^4.0.3"
+      }
+    },
+    "rc-steps": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/rc-steps/-/rc-steps-3.5.0.tgz",
+      "integrity": "sha512-2Vkkrpa7PZbg7qPsqTNzVDov4u78cmxofjjnIHiGB9+9rqKS8oTLPzbW2uiWDr3Lk+yGwh8rbpGO1E6VAgBCOg==",
+      "requires": {
+        "babel-runtime": "^6.23.0",
+        "classnames": "^2.2.3",
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.7"
+      }
+    },
+    "rc-switch": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/rc-switch/-/rc-switch-1.9.0.tgz",
+      "integrity": "sha512-Isas+egaK6qSk64jaEw4GgPStY4umYDbT7ZY93bZF1Af+b/JEsKsJdNOU2qG3WI0Z6tXo2DDq0kJCv8Yhu0zww==",
+      "requires": {
+        "classnames": "^2.2.1",
+        "prop-types": "^15.5.6",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-table": {
+      "version": "7.3.14",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.3.14.tgz",
+      "integrity": "sha512-ivfV+hiFU4IeLEERs1KVfEHysi0o9T4RGLwoPBpCa/vq/racaYcjSEQnocUeKVu7Rpbr98QSRdgYbZt0oD6baw==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "component-classes": "^1.2.6",
+        "lodash": "^4.17.5",
+        "mini-store": "^2.0.0",
+        "prop-types": "^15.5.8",
+        "raf": "^3.4.1",
+        "rc-resize-observer": "^0.2.0",
+        "rc-util": "^4.20.1",
+        "react-lifecycles-compat": "^3.0.2",
+        "shallowequal": "^1.1.0"
+      },
+      "dependencies": {
+        "mini-store": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/mini-store/-/mini-store-2.0.0.tgz",
+          "integrity": "sha512-EG0CuwpQmX+XL4QVS0kxNwHW5ftSbhygu1qxQH0pipugjnPkbvkalCdQbEihMwtQY6d3MTN+MS0q+aurs+RfLQ==",
+          "requires": {
+            "hoist-non-react-statics": "^2.3.1",
+            "prop-types": "^15.6.0",
+            "react-lifecycles-compat": "^3.0.4",
+            "shallowequal": "^1.0.2"
+          }
+        },
+        "raf": {
+          "version": "3.4.1",
+          "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+          "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+          "requires": {
+            "performance-now": "^2.1.0"
+          }
+        },
+        "rc-resize-observer": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-0.2.1.tgz",
+          "integrity": "sha512-GENTRkL3lq05ilrjTxPpHUPrKTC9D7XqUGesSXgi/GyO4j/jKIjLPn7zuZOcJ5QmN5QGRe24IaVWPZHQPE6vLw==",
+          "requires": {
+            "classnames": "^2.2.1",
+            "rc-util": "^4.14.0",
+            "resize-observer-polyfill": "^1.5.1"
+          }
+        }
+      }
+    },
+    "rc-tabs": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-10.0.0.tgz",
+      "integrity": "sha512-kpYho3S8GqHVKuFvsYyShN4GSM+f3RMfgwxmR4lpXA79lzPmIlaLamCGtTnMAOXOVTS3JEltWQCWC8LYY4ITIg==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "2.x",
+        "lodash": "^4.17.5",
+        "prop-types": "15.x",
+        "raf": "^3.4.1",
+        "rc-hammerjs": "~0.6.0",
+        "rc-util": "^4.0.4",
+        "resize-observer-polyfill": "^1.5.1",
+        "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "raf": {
+          "version": "3.4.1",
+          "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+          "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+          "requires": {
+            "performance-now": "^2.1.0"
+          }
+        }
+      }
+    },
+    "rc-tooltip": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-4.0.3.tgz",
+      "integrity": "sha512-HNyBh9/fPdds0DXja8JQX0XTIHmZapB3lLzbdn74aNSxXG1KUkt+GK4X1aOTRY5X9mqm4uUKdeFrn7j273H8gw==",
+      "requires": {
+        "rc-trigger": "^4.0.0"
+      }
+    },
+    "rc-tree": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-3.0.2.tgz",
+      "integrity": "sha512-5MJgIuP3R2QOuv+xuvttv0BVC6BJVz4PIqgZzk9oaGCN5WryPI30SrVCB3t0QO58gdf6tTQszI5aGEgN9PLQtQ==",
+      "requires": {
+        "classnames": "2.x",
+        "prop-types": "^15.5.8",
+        "rc-animate": "^2.9.2",
+        "rc-util": "^4.11.0",
+        "rc-virtual-list": "^1.0.0",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-tree-select": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-3.0.5.tgz",
+      "integrity": "sha512-C/3fZywOoHz/XvRUvfvH+Xd3gnOD24P1FDitNx+1E8E9kT3n+MUUfLWIaSnlU1b9djaMMJojGI1ODUjGlk/RAw==",
+      "requires": {
+        "classnames": "2.x",
+        "rc-select": "~10.0.0",
+        "rc-tree": "~3.0.0",
+        "rc-util": "^4.17.0"
+      }
+    },
+    "rc-trigger": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-4.0.2.tgz",
+      "integrity": "sha512-to5S1NhK10rWHIgQpoQdwIhuDc2Ok4R4/dh5NLrDt6C+gqkohsdBCYiPk97Z+NwGhRU8N+dbf251bivX8DkzQg==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "prop-types": "15.x",
+        "raf": "^3.4.1",
+        "rc-align": "^3.0.0-rc.0",
+        "rc-animate": "^2.10.2",
+        "rc-util": "^4.20.0"
+      },
+      "dependencies": {
+        "raf": {
+          "version": "3.4.1",
+          "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+          "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+          "requires": {
+            "performance-now": "^2.1.0"
+          }
+        }
+      }
+    },
+    "rc-upload": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-3.0.0.tgz",
+      "integrity": "sha512-GTmLJ2Habrgon26xwtF8nx1FBxu8KUjRC6QW/7a+NVZ6qXIo+s7HnjqwseuG42kz6xGCoSLNpHgIoHW55EwpxA==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.5"
+      }
+    },
+    "rc-util": {
+      "version": "4.20.2",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.20.2.tgz",
+      "integrity": "sha512-HfwAfl818hfqn41i1WK0Edt2tNk/BSl8yBz7/rUHOcEqMdWc5ASA3swJDAqJNa1ISzCHrpf2PONukkuHr3tIkA==",
+      "requires": {
+        "@babel/runtime": "^7.9.2",
+        "add-dom-event-listener": "^1.1.0",
+        "prop-types": "^15.5.10",
+        "react-is": "^16.12.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "shallowequal": "^1.1.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.9.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz",
+          "integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
+        }
+      }
+    },
+    "rc-virtual-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-1.0.1.tgz",
+      "integrity": "sha512-lqee1WuBXz6wUGr77g5bB1BHO9JQH+R1DX1oU0JbTLQs7bJl5JWk0xlX6UbB7VMtUss15+XiV7cyvlXVq6xzjg==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "rc-util": "^4.8.0"
+      }
+    },
     "react": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
@@ -12910,6 +13599,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -13477,6 +14171,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.6.0.tgz",
@@ -13547,6 +14246,15 @@
         "inherits": "^2.0.1"
       }
     },
+    "rmc-feedback": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/rmc-feedback/-/rmc-feedback-2.0.0.tgz",
+      "integrity": "sha512-5PWOGOW7VXks/l3JzlOU9NIxRpuaSS8d9zA3UULUCuTKnpwBHNvv1jSJzxgbbCQeYzROWUpgKI4za3X4C/mKmQ==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.5"
+      }
+    },
     "run-async": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.0.tgz",
@@ -13645,6 +14353,14 @@
         "ajv-keywords": "^3.4.1"
       }
     },
+    "scroll-into-view-if-needed": {
+      "version": "2.2.24",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.24.tgz",
+      "integrity": "sha512-vsC6SzyIZUyJG8o4nbUDCiIwsPdH6W/FVmjT2avR2hp/yzS53JjGmg/bKD20TkoNajbu5dAQN4xR7yes4qhwtQ==",
+      "requires": {
+        "compute-scroll-into-view": "^1.0.13"
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -13804,6 +14520,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -14303,6 +15024,11 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
+    "string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c="
+    },
     "string-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.1.tgz",
@@ -14822,6 +15548,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -14884,6 +15615,11 @@
         }
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
@@ -14974,6 +15710,11 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typescript": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
+      "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w=="
+    },
     "uglify-js": {
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.8.0.tgz",
@@ -15336,6 +16077,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watch": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz",

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.0.4",
     "@giphy/js-fetch-api": "^1.5.2",
     "@giphy/react-components": "^0.7.1",
+    "antd": "^4.0.4",
     "autoprefixer": "7.1.6",
     "babel-core": "6.26.3",
     "babel-eslint": "10.x",

src/App.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import firebase from 'firebase/app';
+import Chat from './Chat';
+import Create from './Create';
+import Loading from './Loading';
+
+export default class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      loggedIn: false,
+      page: 'create',
+    };
+    this.updateLoading = this.updateLoading.bind(this);
+    this.changePage = this.changePage.bind(this);
+  }
+  componentDidMount() {
+    firebase.auth().onAuthStateChanged(user => {
+      const roomId = window.localStorage.getItem('roomId');
+      if (user) {
+        this.setState({
+          loggedIn: true,
+        });
+        if (roomId)
+          this.setState({
+            page: 'chat',
+          });
+      } else {
+        if (roomId) {
+          window.localStorage.removeItem('roomId');
+          window.localStorage.removeItem('watchPartyUserName');
+          window.localStorage.removeItem('watchPartyUser');
+        }
+      }
+    });
+  }
+  changePage(page) {
+    this.setState({
+      page,
+    });
+  }
+  updateLoading(loading) {
+    this.setState({
+      loading,
+    });
+  }
+  render() {
+    const { loading, loggedIn, page } = this.state;
+    return (
+      <div className="party-content-wrapper">
+        {loading && <Loading />}
+        {page === 'chat' ? (
+          <Chat changePage={this.changePage} updateLoading={this.updateLoading} />
+        ) : page === 'create' ? (
+          <Create
+            changePage={this.changePage}
+            loggedIn={loggedIn}
+            updateLoading={this.updateLoading}
+          />
+        ) : null}
+      </div>
+    );
+  }
+}

src/Chat.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { Typography, Input, message } from 'antd';
+import firebase from 'firebase/app';
+import 'firebase/firestore';
+import { RightCircleFilled } from '@ant-design/icons';
+import Thread from './Thread';
+
+export default class Chat extends Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      messages: []
+    };
+  }
+  componentDidMount() {
+    firebase.firestore()
+    .collection('rooms')
+    .doc(window.localStorage.getItem('roomId'))
+    .onSnapshot(snap => {
+      this.setState(snap.data());
+    }, err => {
+      this.props.updateLoading(true);
+      if (err.code === 'permission-denied') {
+        message.error('Couldn\'t join old party');
+        this.props.changePage('create');
+        this.props.updateLoading(false);
+      }
+    })
+    firebase.firestore()
+    .collection('rooms')
+    .doc(window.localStorage.getItem('roomId'))
+    .collection('messages')
+    .onSnapshot(snap => {
+      this.setState({messages: snap.docs.map(v => ({ ...v.data(), id: v.id}) )});
+    });
+  }
+  render() {
+    const {messages, name} = this.state;
+    return (
+      <div className="content__wrapper">
+        <div>
+          <Typography.Title level={3}>{name}</Typography.Title>
+          <Typography.Text underline>Watch Party</Typography.Text>
+        </div>
+        <div className="party_chat_container">
+          <Thread messages={messages} />
+        </div>
+        <div className="party_chat_input">
+          <Input.TextArea 
+            autoSize={{
+              maxRows:3,
+              minRows:1,
+            }}
+            id="chat_input" 
+            placeholder="Begin typing..."
+          />
+          <RightCircleFilled id="chat_send" />
+        </div>
+      </div>
+    );
+  }
+}

src/Create.js

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import firebase from 'firebase/app';
+import 'firebase/auth';
+import { Button, Input, Divider, Typography, message } from 'antd';
+import { PlusCircleFilled, PlayCircleFilled } from '@ant-design/icons';
+
+const login = async () => firebase.auth().signInAnonymously();
+
+const Create = props => {
+  const [userName, setUserName] = useState(window.localStorage.getItem('watchPartyUserName') || '');
+  const [roomName, setRoomName] = useState('');
+  const [roomCode, setRoomCode] = useState(window.localStorage.getItem('roomId') || '');
+
+  const requestCreateRoom = async () => {
+    props.updateLoading(true);
+    if (userName === '') {
+      message.error('You forgot your name');
+      props.updateLoading(false);
+      return;
+    }
+    if (roomName === '') {
+      message.error('You forgot to give a party name');
+      props.updateLoading(false);
+      return;
+    }
+    if (!props.loggedIn) await login();
+    firebase
+      .auth()
+      .currentUser.getIdToken()
+      .then(idToken => {
+        fetch('http://localhost:5001/watch-party-crx/us-central1/widgets/create', {
+          method: 'POST',
+          headers: {
+            Authorization: `Token ${idToken}:${firebase.auth().currentUser.uid}`,
+          },
+          body: JSON.stringify({
+            roomName,
+            userName,
+          }),
+        })
+          .then(res => res.json())
+          .then(res => {
+            res.roomId && window.localStorage.setItem('roomId', res.roomId);
+            window.localStorage.setItem('watchPartyUserName', userName);
+            window.localStorage.setItem('watchPartyUser', firebase.auth().currentUser.uid);
+            props.changePage('chat');
+            props.updateLoading(false);
+          });
+      });
+  };
+
+  const requestJoinRoom = async () => {
+    props.updateLoading(true);
+    if (userName === '') {
+      message.error('You forgot your name');
+      props.updateLoading(false);
+      return;
+    }
+    if (roomCode === '') {
+      message.error('Please enter a party code');
+      props.updateLoading(false);
+      return;
+    }
+    if (!props.loggedIn) await login();
+    firebase
+      .auth()
+      .currentUser.getIdToken()
+      .then(idToken => {
+        fetch(`http://localhost:5001/watch-party-crx/us-central1/widgets/join`, {
+          method: 'POST',
+          headers: {
+            Authorization: `Token ${idToken}:${firebase.auth().currentUser.uid}`,
+          },
+          body: JSON.stringify({
+            roomId: roomCode.trim(),
+            userName,
+          }),
+        })
+          .then(res => {
+            if (res.status === 200) return res.json();
+            if (res.status === 404) message.error("That party doesn't exist");
+            return {};
+          })
+          .then(res => {
+            res.roomId && window.localStorage.setItem('roomId', res.roomId);
+            window.localStorage.setItem('watchPartyUserName', userName);
+            window.localStorage.setItem('watchPartyUser', firebase.auth().currentUser.uid);
+            props.changePage('chat');
+            props.updateLoading(false);
+          });
+      });
+  };
+
+  return (
+    <div
+      style={{
+        padding: 20,
+        flex: 1,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        position: 'relative',
+      }}
+    >
+      <Typography.Title style={{ position: 'absolute', top: 20, left: 20 }} level={3}>
+        Watch Party
+      </Typography.Title>
+
+      <Input
+        style={{ borderRadius: 23, marginBottom: 15 }}
+        value={userName}
+        onChange={e => setUserName(e.target.value)}
+        placeholder="Your Name"
+        size="large"
+      />
+      <Divider />
+      <Input
+        style={{ borderRadius: 23, marginBottom: 15 }}
+        value={roomName}
+        onChange={e => setRoomName(e.target.value)}
+        placeholder="Room Name"
+        size="large"
+      />
+      <Button onClick={requestCreateRoom} block size="large" type="primary" shape="round">
+        <PlusCircleFilled style={{ color: 'white' }} />
+        Start Watch Party
+      </Button>
+      <Divider />
+      <Input
+        style={{ borderRadius: 23, marginBottom: 15 }}
+        value={roomCode}
+        onChange={e => setRoomCode(e.target.value)}
+        placeholder="Room Code"
+        size="large"
+      />
+      <Button onClick={requestJoinRoom} block size="large" shape="round">
+        <PlayCircleFilled />
+        Join Watch Party
+      </Button>
+    </div>
+  );
+};
+
+export default Create;

src/Loading.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { LoadingOutlined } from '@ant-design/icons';
+
+const Loading = () => (
+  <div id="loading_container">
+    <LoadingOutlined />
+  </div>
+);
+
+export default Loading;

src/Netflix.js

@@ -1,19 +0,0 @@
-import React, { Component } from 'react';
-import './netflix.css';
-
-export default class Netflix extends Component {
-  render() {
-    return (
-      <div className="content__wrapper">
-        <h3>WATCH PARTY</h3>
-        <div className="party_chat_container">CHAT WINDOW HERE</div>
-        <div className="party_chat_input">
-          <textarea
-            placeholder={`Write a message...\nPress Ctrl+Enter to send`}
-            onChange={e => console.log(e.target.value)}
-          />
-        </div>
-      </div>
-    );
-  }
-}

src/Thread.css

@@ -0,0 +1,10 @@
+.thread-item {
+  width: 100%;
+}
+.system-message {
+  display: block;
+  text-align: center;
+  width: 100%;
+  text-align: center;
+  color: rgba(100,100,100,0.8) !important;
+}

src/Thread.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Typography } from 'antd';
+import './Thread.css';
+
+const Thread = props => 
+  props.messages.map(m => {
+    console.log(m);
+    if (m.uid === '<system>') {
+      return <Typography.Text className="thread-item system-message" key={m.id} disabled>{m.text}</Typography.Text>
+    }
+  });
+
+  export default Thread;

src/index.css

@@ -0,0 +1,7 @@
+@import '~antd/dist/antd.css';
+.party-content-wrapper {
+  position: relative;
+  height: 100%;
+  display: flex;
+  width: 100%;
+}

src/index.js

@@ -1,7 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Netflix from './Netflix';
 import firebase from 'firebase/app';
+import 'antd/dist/antd.css';
+import './netflix.css';
+import './hulu.css';
+import './index.css';
+import App from './App';
 
 const firebaseConfig = {
   apiKey: 'AIzaSyCJLuYpzXLDRmu2ttzFuSGmYcpFxqToWFU',
@@ -20,17 +24,24 @@ const PartyWrapper = document.createElement('div');
 PartyWrapper.id = 'party_wrapper';
 document.body.appendChild(PartyWrapper);
 
+// STYLINGS
 if (window.location.href.startsWith('https://www.hulu.com')) {
+  // HULU 
 } else if (window.location.href.startsWith('https://www.netflix.com')) {
+  // NETFLIX
   PartyWrapper.classList.add('netflix');
   document.body.classList.add('netflix');
+} else if (window.location.href.includes('amazon.com')) {
+  // PRIME VIDEO
+} else {
+  // LOCAL HOST
+  PartyWrapper.classList.add('netflix');
+  document.body.classList.add('netflix');
+}
+
 ReactDOM.render(
   <React.StrictMode>
-      <Netflix />
+    <App />
   </React.StrictMode>,
   PartyWrapper
 );
-} else if (window.location.href.includes('amazon.com')) {
-} else {
-  ReactDOM.render(<div>Watch Party not supported on this site</div>, PartyWrapper);
-}

src/netflix.css

@@ -25,6 +25,7 @@ body.netflix #appMountPoint {
   position: relative !important;
 }
 #party_wrapper.netflix {
+  position: relative;
   z-index: 999;
   flex-shrink: 3;
   flex-basis: 1;
@@ -42,15 +43,45 @@ body.netflix #appMountPoint {
 #party_wrapper.netflix .party_chat_container {
   flex: 1;
 }
-#party_wrapper.netflix .party_chat_input > textarea {
+#party_wrapper.netflix h3{
-  width: 100%;
+  color: white;
-  margin: 0px;
+}
-  height: 4rem;
+.party_chat_input {
-  max-height: 4rem;
+  position: relative;
+  display: flex;
+}
+.party_chat_input #chat_input {
   resize: none;
-  color: black;
+  max-height: 100px;
   border-radius: 13px;
-  padding: 5px;
+}
-  outline: none;
+.party_chat_input ::-webkit-scrollbar {
-  border: none;
+  display: none;
+}
+.party_chat_input #chat_send {
+  align-self: flex-end;
+  margin-left: 5px;
+  margin-bottom: 5px;
+  color: white;
+}
+.party_chat_input #chat_send svg {
+  height: 1.8rem;
+  width: 1.8rem;
+}
+#loading_container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  background-color: rgba(80, 80, 80, 0.9);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#loading_container svg{
+  color: wheat;
+  width: 40px;
+  height: 40px;
 }