v1.6.3/release

- virtual chat scroll
- website update
- version bump

admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-party-admin",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.2.2",

app/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-party-crx",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1190,6 +1190,7 @@
       "version": "7.9.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.0.tgz",
       "integrity": "sha512-cTIudHnzuWLS56ik4DnRnqqNf8MkdUzV4iFFI1h7Jo9xvrpQROYaAnaSd2mHLQAzzZAPfATynX5ord6YlNYNMA==",
+      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -1197,7 +1198,8 @@
         "regenerator-runtime": {
           "version": "0.13.5",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
-          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
+          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
+          "dev": true
         }
       }
     },
@@ -10864,11 +10866,6 @@
         "p-is-promise": "^2.0.0"
       }
     },
-    "memoize-one": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
-      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
-    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -14250,6 +14247,12 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "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==",
+      "dev": true
+    },
     "react-transition-group": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
@@ -14262,18 +14265,18 @@
         "prop-types": "^15.6.2"
       }
     },
-    "react-virtualized-auto-sizer": {
+    "react-virtualized": {
-      "version": "1.0.2",
+      "version": "9.22.2",
-      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.2.tgz",
-      "integrity": "sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg=="
+      "integrity": "sha512-5j4h4FhxTdOpBKtePSs1yk6LDNT4oGtUwjT7Nkh61Z8vv3fTG/XeOf8J4li1AYaexOwTXnw0HFVxsV0GBUqwRw==",
-    },
+      "dev": true,
-    "react-window": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.5.tgz",
-      "integrity": "sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==",
       "requires": {
-        "@babel/runtime": "^7.0.0",
+        "@babel/runtime": "^7.7.2",
-        "memoize-one": ">=3.1.1 <6"
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
       }
     },
     "read-pkg": {

app/package.json

@@ -1,11 +1,8 @@
 {
   "name": "watch-party-crx",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "private": true,
-  "dependencies": {
+  "dependencies": {},
-    "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.8.5"
-  },
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
@@ -82,6 +79,7 @@
     "react-dom": "^16.4.1",
     "react-frame-component": "^4.0.0",
     "react-giphy-searchbox": "^1.4.0",
+    "react-virtualized": "^9.22.2",
     "resolve": "1.6.0",
     "route-lite": "^0.3.0",
     "style-loader": "0.19.0",

app/public/background.js

@@ -12,7 +12,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 /* global chrome */
 /* global firebase */
 
-const APP_VERSION = '1.6.2';
+const APP_VERSION = '1.6.3';
 const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
 
 const firebaseConfig = {

app/public/manifest.json

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

app/src/App.js

@@ -19,7 +19,7 @@ import 'firebase/firestore';
 import Inactive from './Inactive';
 import { getUserUid, getPlayerSource, PLAYER_SOURCE } from './Api';
 
-const APP_VERSION = '1.6.2';
+const APP_VERSION = '1.6.3';
 const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
 
 const darkTheme = createMuiTheme({

app/src/Chat.js

@@ -742,9 +742,13 @@ export default class Chat extends Component {
                 </CardContent>
               ) : (
                 <CardContent>
-                  <Typography className="media-info-at" variant="caption">
+                  <Typography className="media-info-at" variant="button">
-                    Nothing playing right now, pause or play once after starting a show to start
+                    Nothing playing right now
-                    sync.
+                    <br />
+                    Pause or play once after starting a show to start sync.
+                    <br />
+                    Watch Party will not automatically change the show for you as this is a security
+                    exploit.
                   </Typography>
                 </CardContent>
               )}
@@ -756,7 +760,6 @@ export default class Chat extends Component {
             </Card>
           ) : null}
         </div>
-        <div className="thread-wrapper">
         <div className="alerts-container">
           {alerts.map((a) => {
             if (a.condition() === true) {
@@ -776,7 +779,6 @@ export default class Chat extends Component {
           sendingMessages={sendingMessages}
           sentMessages={messages}
         />
-        </div>
         <Paper
           square
           variant="outlined"

app/src/Thread.css

@@ -9,18 +9,24 @@ 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.
 ************************************************************************/
-.thread-container * {
+.thread-wrapper * {
   margin: 0;
   padding: 0;
   font-family: 'Roboto', sans-serif !important;
   letter-spacing: 1.15px;
   word-break: break-word !important;
 }
-.thread-container {
+.thread-wrapper {
-  max-height: none;
+  max-height: 100%;
-  padding: 0 15px;
+  flex: 1;
-  padding-right: 0px !important;
+  overflow-y: auto;
-  overflow: hidden;
+  margin-bottom: 1rem;
+  padding: 0;
+  margin-top: 1rem;
+  outline: none;
+}
+.thread-wrapper > div {
+  padding-bottom: 30px;
 }
 .thread-item {
   color: white;
@@ -56,11 +62,15 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
   justify-content: center;
   align-items: center;
   flex-direction: row-reverse;
+  z-index: 9999 !important;
 }
 .thread-message .thread-overline span {
   flex: 1;
   text-align: center;
 }
+.thread-message .thread-overline > span {
+  display: none;
+}
 .thread-message .thread-overline .thread-reply-icon {
   position: absolute;
   display: flex;
@@ -81,8 +91,6 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
   padding-bottom: 7px;
 }
 .thread-item:hover .thread-message .thread-overline {
-  height: 24px;
-  margin-bottom: 7px;
   opacity: 1;
 }
 .thread-message p {

app/src/Thread.js

@@ -9,7 +9,7 @@ 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, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import {
   Typography,
   IconButton,
@@ -21,23 +21,32 @@ import {
 import { Reply, Send } from '@material-ui/icons';
 import './Thread.css';
 import { LocalData, webhookFetcher } from './Api';
+import { CellMeasurer, CellMeasurerCache, AutoSizer, List } from 'react-virtualized';
+
+var cache = new CellMeasurerCache({
+  fixedWidth: true,
+});
 
 export default class Thread extends Component {
   constructor(props) {
     super(props);
+    this.state = {
+      autoSizeWidth: 0,
+    };
+    this.listRef = createRef();
+    this.getMessage = this.getMessage.bind(this);
     this.getTimeString = this.getTimeString.bind(this);
     this.getReplyMessage = this.getReplyMessage.bind(this);
     this.getMessageTextOrImage = this.getMessageTextOrImage.bind(this);
   }
-  scrollToMessage(id) {
+  scrollToMessage(msgIdx, messages) {
-    const pcc = document.querySelector('.thread-wrapper');
+    this.listRef.current.scrollToRow(msgIdx);
+    setTimeout(() => {
+      const id = messages[msgIdx].id || `sending-${msgIdx}`;
       const msg = document.getElementById(id);
-    const alc = document.querySelector(
-      '#party-routes-wrapper > div.party-chat-container > div.thread-wrapper > div.alerts-container'
-    );
-    pcc.scrollTop = msg.offsetTop - pcc.offsetTop - alc.clientHeight - 10;
       msg.classList.add('highlight');
       setTimeout(() => msg.classList.remove('highlight'), 2000);
+    }, 500);
   }
   handleInteractiveMessageCall(msg) {
     const thanksElement = document.createElement('div');
@@ -64,17 +73,17 @@ export default class Thread extends Component {
   }
   getItemClassNames(uid, userUid, msgIdx, messages, isSending = false) {
     const lastUid = msgIdx >= 1 ? messages[msgIdx - 1].uid : '';
-    return `thread-item ${uid === userUid ? 'my-message' : ''} ${
+    return `thread-item ${uid === userUid ? 'my-message ' : ''}${
-      isSending ? 'sending-message' : ''
+      isSending ? 'sending-message ' : ''
-    } ${uid === '<system>' ? 'system-message' : ''} ${lastUid === uid ? 'continued-message' : ''}`;
+    }${uid === '<system>' ? 'system-message ' : ''}${lastUid === uid ? 'continued-message' : ''}`;
   }
-  getMessageTextOrImage(msg) {
+  getMessageTextOrImage(msg, measure) {
     if (msg.type === 'giphy') {
-      return <img alt="gif" src={msg.text} />;
+      return <img onLoad={measure} alt="gif" src={msg.text} />;
     }
     if (msg.type === 'interactive/text') {
       return (
-        <Paper elevation={0} className="thread-interactive-text">
+        <Paper onLoad={measure} elevation={0} className="thread-interactive-text">
           <Typography className="thread-interactive-question" variant="overline">
             {msg.text}
           </Typography>
@@ -101,7 +110,7 @@ export default class Thread extends Component {
     }
     if (msg.type === 'interactive/link') {
       return (
-        <Paper elevation={0} className="thread-interactive-text">
+        <Paper onLoad={measure} elevation={0} className="thread-interactive-text">
           <Typography className="thread-interactive-question" variant="overline">
             {msg.text}
           </Typography>
@@ -117,37 +126,52 @@ export default class Thread extends Component {
         </Paper>
       );
     }
-    return <p>{msg.text}</p>;
+    return <p onLoad={measure}>{msg.text}</p>;
   }
   getTimeString(time) {
     return new Date(time.seconds * 1000).toLocaleTimeString();
   }
-  getReplyMessage(rT, messages) {
+  getReplyMessage(replyTo, messages) {
-    if (rT !== undefined && rT !== null) {
+    if (replyTo !== undefined && replyTo !== null) {
-      const replyMessage = messages.filter((m) => m.id === rT)[0];
+      const replyMessage = messages.filter((v) => v.id === replyTo)[0];
+      if (replyMessage) {
+        const msgIdx = messages.indexOf(replyMessage);
         return (
-        <div className="thread-reply" onClick={() => this.scrollToMessage(replyMessage.id)}>
+          <div className="thread-reply" onClick={() => this.scrollToMessage(msgIdx, messages)}>
             <p className="thread-reply-name">Reply to {replyMessage.name}:</p>
             {this.getMessageTextOrImage(replyMessage)}
           </div>
         );
       }
+    }
     return null;
   }
-  render() {
+  getMessage(params) {
-    const { sendingMessages, setReplyTo, sentMessages } = this.props;
+    const { autoSizeWidth } = this.state;
+    const { sendingMessages, sentMessages, setReplyTo } = this.props;
     const { userUid } = LocalData();
+    const messages = [...sentMessages, ...sendingMessages];
+    const msg = messages[params.index];
+    const msgIdx = params.index;
     return (
-      <div className="thread-container">
+      <CellMeasurer
-        {sentMessages.length > 0
+        cache={cache}
-          ? sentMessages.map((msg, msgIdx) => (
+        columnIndex={0}
-              <div
-                id={msg.id}
         key={`msg-${msgIdx}`}
-                className={this.getItemClassNames(msg.uid, userUid, msgIdx, sentMessages)}
+        parent={params.parent}
+        rowIndex={msgIdx}
+        width={autoSizeWidth}
+      >
+        {({ measure, registerChild }) => (
+          <div
+            ref={registerChild}
+            style={params.style}
+            id={msg.id || `sending-${msgIdx}`}
+            key={`msg-${msgIdx}-item`}
+            className={this.getItemClassNames(msg.uid, userUid, msgIdx, messages, !!!msg.id)}
           >
             <div className="thread-name">{msg.name}</div>
-                {this.getReplyMessage(msg.replyTo, sentMessages)}
+            {this.getReplyMessage(msg.replyTo, messages)}
             <div className="thread-message">
               <div className="thread-overline">
                 <span>{this.getTimeString(msg.time)}</span>
@@ -157,35 +181,39 @@ export default class Thread extends Component {
                   </IconButton>
                 </div>
               </div>
-                  {this.getMessageTextOrImage(msg)}
+              {this.getMessageTextOrImage(msg, measure)}
             </div>
           </div>
-            ))
+        )}
-          : null}
+      </CellMeasurer>
-        {sendingMessages.length > 0
+    );
-          ? sendingMessages.map((msg, msgIdx) => (
+  }
-              <div
+  render() {
-                id={msg.id}
+    const { autoSizeWidth } = this.state;
-                key={`msg-${msgIdx}`}
+    const { sendingMessages, sentMessages } = this.props;
-                className={this.getItemClassNames(msg.uid, userUid, msgIdx, sendingMessages, true)}
+    return (
-              >
+      <AutoSizer style={{ flex: 1 }}>
-                <div className="thread-name">{msg.name}</div>
+        {({ height, width }) => {
-                {this.getReplyMessage(msg.replyTo, sentMessages)}
+          if (autoSizeWidth && autoSizeWidth !== width) {
-                <div className="thread-message">
+            cache.clearAll();
-                  <div className="thread-overline">
+            this.listRef.current.recomputeRowHeights();
-                    <span>{this.getTimeString(msg.time)}</span>
+            this.setState({ autoSizeWidth: width });
-                    <div className="thread-reply-icon">
+          }
-                      <IconButton onClick={() => setReplyTo(msg)}>
+
-                        <Reply />
+          return (
-                      </IconButton>
+            <List
-                    </div>
+              className="thread-wrapper"
-                  </div>
+              deferredMeasurementCache={cache}
-                  {this.getMessageTextOrImage(msg)}
+              height={height}
-                </div>
+              width={width}
-              </div>
+              ref={this.listRef}
-            ))
+              rowCount={sendingMessages.length + sentMessages.length}
-          : null}
+              rowHeight={({ index }) => cache.rowHeight({ index }) + 10}
-      </div>
+              rowRenderer={this.getMessage}
+            />
+          );
+        }}
+      </AutoSizer>
     );
   }
 }

app/src/index.css

@@ -378,14 +378,6 @@ body.disney #party_wrapper * {
 .create-bottom-card a:hover {
   color: #c0f300;
 }
-.thread-wrapper {
-  max-height: 100%;
-  flex: 1;
-  overflow-y: auto;
-  margin-bottom: 1rem;
-  padding: 0;
-  margin-top: 1rem;
-}
 .room-title {
   text-overflow: ellipsis !important;
   word-break: break-word !important;
@@ -585,7 +577,6 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
 
 .alerts-container {
   margin: 5px 0;
-  position: sticky;
   top: 0;
   padding: 5px 0;
   z-index: 999 !important;

functions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-party-api",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "Cloud Functions for Watch Party",
   "scripts": {
     "lint": "eslint .",

package-lock.json

@@ -1,181 +1,91 @@
 {
   "name": "watch-party",
-  "version": "1.2.1",
+  "version": "1.6.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@voxeet/voxeet-web-sdk": {
+    "@babel/runtime": {
-      "version": "2.3.1",
+      "version": "7.11.2",
-      "resolved": "https://registry.npmjs.org/@voxeet/voxeet-web-sdk/-/voxeet-web-sdk-2.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
-      "integrity": "sha512-y3/rewt+Rtkk7KVUY9DuYffAY9s+m2nrvumfFuwMnOxAeJw2N4fB1KuyGx80MQqk70xpFfZCLTt3JO6l19uJIg==",
+      "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
       "requires": {
-        "bowser": "^2.8.1",
+        "regenerator-runtime": "^0.13.4"
-        "browserslist": "^4.5.2",
-        "btoa": "^1.1.2",
-        "events": "^1.1.0",
-        "get-float-time-domain-data": "^0.1.0",
-        "global": "^4.4.0",
-        "lodash": "^4.17.4",
-        "moment": "^2.24.0",
-        "sdp": "^2.3.0",
-        "webrtc-adapter": "^6.3.2"
       }
     },
-    "bowser": {
+    "clsx": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.9.0.tgz",
-      "integrity": "sha512-2ld76tuLBNFekRgmJfT2+3j5MIrP6bFict8WAIT3beq+srz1gcKNAdNKMqHqauQt63NmAa88HfP1/Ypa9Er3HA=="
-    },
-    "browserslist": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
-      "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
-      "requires": {
-        "caniuse-lite": "^1.0.30001043",
-        "electron-to-chromium": "^1.3.413",
-        "node-releases": "^1.1.53",
-        "pkg-up": "^2.0.0"
-      }
-    },
-    "btoa": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
-      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
-    },
-    "caniuse-lite": {
-      "version": "1.0.30001066",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001066.tgz",
-      "integrity": "sha512-Gfj/WAastBtfxLws0RCh2sDbTK/8rJuSeZMecrSkNGYxPcv7EzblmDGfWQCFEQcSqYE2BRgQiJh8HOD07N5hIw=="
-    },
-    "dom-walk": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
-      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
-    },
-    "electron-to-chromium": {
-      "version": "1.3.453",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.453.tgz",
-      "integrity": "sha512-IQbCfjJR0NDDn/+vojTlq7fPSREcALtF8M1n01gw7nQghCtfFYrJ2dfhsp8APr8bANoFC8vRTFVXMOGpT0eetw=="
-    },
-    "events": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
-      "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
     },
-    "find-up": {
+    "csstype": {
-      "version": "2.1.0",
+      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz",
-      "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+      "integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw=="
+    },
+    "dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
       "requires": {
-        "locate-path": "^2.0.0"
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
       }
     },
-    "get-float-time-domain-data": {
+    "js-tokens": {
-      "version": "0.1.0",
+      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/get-float-time-domain-data/-/get-float-time-domain-data-0.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha1-XYVZJKQwOITJY4qrEnzOTQBlljs="
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
-    "global": {
+    "loose-envify": {
-      "version": "4.4.0",
+      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
       "requires": {
-        "min-document": "^2.19.0",
+        "js-tokens": "^3.0.0 || ^4.0.0"
-        "process": "^0.11.10"
       }
     },
-    "locate-path": {
+    "object-assign": {
-      "version": "2.0.0",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
       "requires": {
-        "p-locate": "^2.0.0",
+        "loose-envify": "^1.4.0",
-        "path-exists": "^3.0.0"
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
       }
     },
-    "lodash": {
+    "react-is": {
-      "version": "4.17.15",
+      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "min-document": {
+    "react-lifecycles-compat": {
-      "version": "2.19.0",
+      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-virtualized": {
+      "version": "9.22.2",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.2.tgz",
+      "integrity": "sha512-5j4h4FhxTdOpBKtePSs1yk6LDNT4oGtUwjT7Nkh61Z8vv3fTG/XeOf8J4li1AYaexOwTXnw0HFVxsV0GBUqwRw==",
       "requires": {
-        "dom-walk": "^0.1.0"
+        "@babel/runtime": "^7.7.2",
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
       }
     },
-    "moment": {
+    "regenerator-runtime": {
-      "version": "2.26.0",
+      "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw=="
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
-    },
-    "node-releases": {
-      "version": "1.1.57",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.57.tgz",
-      "integrity": "sha512-ZQmnWS7adi61A9JsllJ2gdj2PauElcjnOwTp2O011iGzoakTxUsDGSe+6vD7wXbKdqhSFymC0OSx35aAMhrSdw=="
-    },
-    "p-limit": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-      "requires": {
-        "p-try": "^1.0.0"
-      }
-    },
-    "p-locate": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-      "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
-      "requires": {
-        "p-limit": "^1.1.0"
-      }
-    },
-    "p-try": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-      "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
-    },
-    "path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
-    },
-    "pkg-up": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz",
-      "integrity": "sha1-yBmscoBZpGHKscOImivjxJoATX8=",
-      "requires": {
-        "find-up": "^2.1.0"
-      }
-    },
-    "process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
-    },
-    "rtcpeerconnection-shim": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
-      "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
-      "requires": {
-        "sdp": "^2.6.0"
-      }
-    },
-    "sdp": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz",
-      "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
-    },
-    "webrtc-adapter": {
-      "version": "6.4.8",
-      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-6.4.8.tgz",
-      "integrity": "sha512-YM8yl545c/JhYcjGHgaCoA7jRK/KZuMwEDFeP2AcP0Auv5awEd+gZE0hXy9z7Ed3p9HvAXp8jdbe+4ESb1zxAw==",
-      "requires": {
-        "rtcpeerconnection-shim": "^1.2.14",
-        "sdp": "^2.9.0"
-      }
     }
   }
 }

package.json

@@ -1,10 +1,11 @@
 {
   "name": "watch-party",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "Watch Party",
   "scripts": {
     "start": "firebase emulators:start",
     "build": "cd ./app && node ./scripts/build.js"
   },
-  "private": true
+  "private": true,
+  "dependencies": {}
 }

website/changes/index.html

@@ -12,111 +12,45 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 ------------------------------------------------------------------------->
 <html>
   <head>
-    <link
+    <link rel="apple-touch-icon" sizes="57x57" href="../icons/apple-icon-57x57.png" />
-      rel="apple-touch-icon"
+    <link rel="apple-touch-icon" sizes="60x60" href="../icons/apple-icon-60x60.png" />
-      sizes="57x57"
+    <link rel="apple-touch-icon" sizes="72x72" href="../icons/apple-icon-72x72.png" />
-      href="../icons/apple-icon-57x57.png"
+    <link rel="apple-touch-icon" sizes="76x76" href="../icons/apple-icon-76x76.png" />
-    />
+    <link rel="apple-touch-icon" sizes="114x114" href="../icons/apple-icon-114x114.png" />
-    <link
+    <link rel="apple-touch-icon" sizes="120x120" href="../icons/apple-icon-120x120.png" />
-      rel="apple-touch-icon"
+    <link rel="apple-touch-icon" sizes="144x144" href="../icons/apple-icon-144x144.png" />
-      sizes="60x60"
+    <link rel="apple-touch-icon" sizes="152x152" href="../icons/apple-icon-152x152.png" />
-      href="../icons/apple-icon-60x60.png"
+    <link rel="apple-touch-icon" sizes="180x180" href="../icons/apple-icon-180x180.png" />
-    />
+    <link rel="icon" type="image/png" sizes="192x192" href="../icons/android-icon-192x192.png" />
-    <link
+    <link rel="icon" type="image/png" sizes="32x32" href="../icons/favicon-32x32.png" />
-      rel="apple-touch-icon"
+    <link rel="icon" type="image/png" sizes="96x96" href="../icons/favicon-96x96.png" />
-      sizes="72x72"
+    <link rel="icon" type="image/png" sizes="16x16" href="../icons/favicon-16x16.png" />
-      href="../icons/apple-icon-72x72.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="76x76"
-      href="../icons/apple-icon-76x76.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="114x114"
-      href="../icons/apple-icon-114x114.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="120x120"
-      href="../icons/apple-icon-120x120.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="144x144"
-      href="../icons/apple-icon-144x144.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="152x152"
-      href="../icons/apple-icon-152x152.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="../icons/apple-icon-180x180.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="192x192"
-      href="../icons/android-icon-192x192.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="../icons/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="96x96"
-      href="../icons/favicon-96x96.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="../icons/favicon-16x16.png"
-    />
     <link rel="icon" href="../icons/favicon.ico" />
     <link rel="manifest" href="../manifest.json" />
-    <meta
+    <meta name="msapplication-TileImage" content="../icons/ms-icon-144x144.png" />
-      name="msapplication-TileImage"
-      content="../icons/ms-icon-144x144.png"
-    />
     <link rel="stylesheet" type="text/css" href="../font.css" />
     <link rel="stylesheet" type="text/css" href="../styles/index.css" />
     <script src="../scripts/Stickied.js"></script>
     <title>Watch Party | Changelog</title>
   </head>
   <!-- Global site tag (gtag.js) - Google Analytics -->
-  <script
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"></script>
-    async
-    src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"
-  ></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag() {
       dataLayer.push(arguments);
     }
-    gtag("js", new Date());
+    gtag('js', new Date());
 
-    gtag("config", "UA-87498806-2");
+    gtag('config', 'UA-87498806-2');
   </script>
   <body class="copyright">
     <div class="landing">
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
       <div class="logo-circle"></div>
-      <h1 data-font="serif" class="logo duplicate">
+      <h1 data-font="serif" class="logo duplicate"><a href="../">WATCH PARTY</a> | CHANGELOG</h1>
-        <a href="../">WATCH PARTY</a> | CHANGELOG
+      <h1 data-font="serif" class="logo"><a href="../">WATCH PARTY</a> | CHANGELOG</h1>
-      </h1>
-      <h1 data-font="serif" class="logo">
-        <a href="../">WATCH PARTY</a> | CHANGELOG
-      </h1>
       <h5 data-font="sans" class="logo-tag">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h5>
@@ -135,34 +69,45 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
             data-upcoming-support="See Changes"
           ></div>
         </a>
+        <a href="./v1.6.1/">
+          <div
+            class="supported-logo"
+            style="background-image: url(../media/versions/161.png);"
+            data-upcoming-support="See Changes"
+          ></div>
+        </a>
+        <a href="./v1.6.2/">
+          <div
+            class="supported-logo"
+            style="background-image: url(../media/versions/162.png);"
+            data-upcoming-support="See Changes"
+          ></div>
+        </a>
+        <a href="./v1.6.3/">
+          <div
+            class="supported-logo"
+            style="background-image: url(../media/versions/163.png);"
+            data-upcoming-support="See Changes"
+          ></div>
+        </a>
       </div>
     </div>
     <footer data-font="sans">
       <p class="title built-with">
-        <a href="../copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH. ALL
+        <a href="../copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH. ALL RIGHTS RESERVED.
-        RIGHTS RESERVED.
       </p>
       <p class="title built-with">
         BUILT WITH &#x1F49A; FOR
         <a href="https://www.google.com/chrome/">GOOGLE CHROME</a> USING
         <a href="https://firebase.google.com/">FIREBASE</a>,
         <a href="https://material-ui.com/">MATERIAL-UI</a>,
-        <a href="https://reactjs.org/">REACT JS</a>,
+        <a href="https://reactjs.org/">REACT JS</a>, <a href="https://nodejs.org/en/">NODE JS</a>,
-        <a href="https://nodejs.org/en/">NODE JS</a>,
+        <a href="https://giphy.com/">GIPHY</a>, & <a href="https://dolby.io/">DOLBY VOXEET</a>.
-        <a href="https://giphy.com/">GIPHY</a>, &
-        <a href="https://dolby.io/">DOLBY VOXEET</a>.
       </p>
-      <a
+      <a data-font="sans-bold" href="https://paypal.me/Ayushya" class="link-button">
-        data-font="sans-bold"
-        href="https://paypal.me/Ayushya"
-        class="link-button"
-      >
         Support Watch Party
       </a>
-      <a
+      <a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button"
-        data-font="sans-bold"
-        href="https://request.chromewatchparty.com"
-        class="link-button"
         >Get Chrome Extension</a
       >
       <a

website/changes/v1.6.1/index.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<!-----------------------------------------------------------------------
+Copyright (C) Ayushya Amitabh - All Rights Reserved
+Unauthorized copying of this file, via any medium is strictly prohibited
+Proprietary and confidential
+Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020 
+https://www.chromewatchparty.com/copyright
+=========================================================================
+ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, UNLESS OTHERWISE
+CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
+COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
+------------------------------------------------------------------------->
+<html>
+  <head>
+    <link rel="apple-touch-icon" sizes="57x57" href="../../icons/apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="../../icons/apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="../../icons/apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="../../icons/apple-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="../../icons/apple-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="../../icons/apple-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="../../icons/apple-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="../../icons/apple-icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="../../icons/apple-icon-180x180.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="../../icons/android-icon-192x192.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="../../icons/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="../../icons/favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../../icons/favicon-16x16.png" />
+    <link rel="icon" href="../../icons/favicon.ico" />
+    <link rel="manifest" href="../../manifest.json" />
+    <meta name="msapplication-TileImage" content="../../icons/ms-icon-144x144.png" />
+    <link rel="stylesheet" type="text/css" href="../../font.css" />
+    <link rel="stylesheet" type="text/css" href="../../styles/index.css" />
+    <script src="../../scripts/Stickied.js"></script>
+    <title>Watch Party | V1.6.1</title>
+  </head>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+
+    gtag('config', 'UA-87498806-2');
+  </script>
+  <body class="copyright welcome">
+    <div class="landing">
+      <div class="logo-circle"></div>
+      <div class="logo-circle"></div>
+      <div class="logo-circle"></div>
+      <h1 data-font="serif" class="logo duplicate"><a href="../../">WATCH PARTY</a> | V1.6.1</h1>
+      <h1 data-font="serif" class="logo"><a href="../../">WATCH PARTY</a> | V1.6.1</h1>
+      <h5 data-font="sans" class="logo-tag">
+        WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
+      </h5>
+    </div>
+    <div class="features">
+      <p data-font="sans-bold" class="title subtitle">
+        CHANGES MADE IN FEATURES
+      </p>
+      <div class="feature-card">
+        <div class="feature-icon" id="sync">
+          <video loop muted autoplay src="../../media/features/Sync.mp4"></video>
+        </div>
+        <p data-font="sans" class="feature-text">
+          Fix Amazon Prime Video Selector
+        </p>
+      </div>
+    </div>
+    <div id="tips" class="landing">
+      <p data-font="sans-bold" class="title">
+        LISTED CHANGE DETAILS
+      </p>
+      <div class="tip">
+        <p data-font="sans-bold">
+          Fix Video Selector for Amazon Prime Video
+        </p>
+      </div>
+      <a
+        data-font="sans-bold"
+        href="mailto:admin@chromewatchparty.com?subject=Question About V1.6.1 Changes"
+        class="link-button"
+      >
+        Have Questions About These Changes?
+      </a>
+    </div>
+    <footer data-font="sans">
+      <p class="title built-with">
+        <a href="../../copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH. ALL RIGHTS RESERVED.
+      </p>
+      <p class="title built-with">
+        BUILT WITH &#x1F49A; FOR
+        <a href="https://www.google.com/chrome/">GOOGLE CHROME</a> USING
+        <a href="https://firebase.google.com/">FIREBASE</a>,
+        <a href="https://material-ui.com/">MATERIAL-UI</a>,
+        <a href="https://reactjs.org/">REACT JS</a>, <a href="https://nodejs.org/en/">NODE JS</a>,
+        <a href="https://giphy.com/">GIPHY</a>, & <a href="https://dolby.io/">DOLBY VOXEET</a>.
+      </p>
+      <a data-font="sans-bold" href="https://paypal.me/Ayushya" class="link-button">
+        Support Watch Party
+      </a>
+      <a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button"
+        >Get Chrome Extension</a
+      >
+      <a
+        data-font="sans-bold"
+        href="mailto:admin@chromewatchparty.com?subject=User Feedback"
+        class="link-button"
+      >
+        Give Feedback
+      </a>
+      <a data-font="sans-bold" href="../../welcome/" class="link-button">
+        Getting Started
+      </a>
+      <a data-font="sans-bold" href="../../changes/" class="link-button">
+        Changelog
+      </a>
+    </footer>
+  </body>
+</html>

website/changes/v1.6.2/index.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!-----------------------------------------------------------------------
+Copyright (C) Ayushya Amitabh - All Rights Reserved
+Unauthorized copying of this file, via any medium is strictly prohibited
+Proprietary and confidential
+Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020 
+https://www.chromewatchparty.com/copyright
+=========================================================================
+ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, UNLESS OTHERWISE
+CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
+COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
+------------------------------------------------------------------------->
+<html>
+  <head>
+    <link rel="apple-touch-icon" sizes="57x57" href="../../icons/apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="../../icons/apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="../../icons/apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="../../icons/apple-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="../../icons/apple-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="../../icons/apple-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="../../icons/apple-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="../../icons/apple-icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="../../icons/apple-icon-180x180.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="../../icons/android-icon-192x192.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="../../icons/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="../../icons/favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../../icons/favicon-16x16.png" />
+    <link rel="icon" href="../../icons/favicon.ico" />
+    <link rel="manifest" href="../../manifest.json" />
+    <meta name="msapplication-TileImage" content="../../icons/ms-icon-144x144.png" />
+    <link rel="stylesheet" type="text/css" href="../../font.css" />
+    <link rel="stylesheet" type="text/css" href="../../styles/index.css" />
+    <script src="../../scripts/Stickied.js"></script>
+    <title>Watch Party | V1.6.2</title>
+  </head>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+
+    gtag('config', 'UA-87498806-2');
+  </script>
+  <body class="copyright welcome">
+    <div class="landing">
+      <div class="logo-circle"></div>
+      <div class="logo-circle"></div>
+      <div class="logo-circle"></div>
+      <h1 data-font="serif" class="logo duplicate"><a href="../../">WATCH PARTY</a> | V1.6.2</h1>
+      <h1 data-font="serif" class="logo"><a href="../../">WATCH PARTY</a> | V1.6.2</h1>
+      <h5 data-font="sans" class="logo-tag">
+        WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
+      </h5>
+    </div>
+    <div class="features">
+      <p data-font="sans-bold" class="title subtitle">
+        CHANGES MADE IN FEATURES
+      </p>
+      <div class="feature-card">
+        <div class="feature-icon" id="sync">
+          <video loop muted autoplay src="../../media/features/Sync.mp4"></video>
+        </div>
+        <p data-font="sans" class="feature-text">
+          Fix Hulu Video Selector
+        </p>
+      </div>
+    </div>
+    <div id="tips" class="landing">
+      <p data-font="sans-bold" class="title">
+        LISTED CHANGE DETAILS
+      </p>
+      <div class="tip">
+        <p data-font="sans-bold">
+          Fix Video Selector for Hulu
+        </p>
+      </div>
+      <div class="tip">
+        <p data-font="sans-bold">
+          Use server config for video selectors
+        </p>
+      </div>
+      <a
+        data-font="sans-bold"
+        href="mailto:admin@chromewatchparty.com?subject=Question About V1.6.2 Changes"
+        class="link-button"
+      >
+        Have Questions About These Changes?
+      </a>
+    </div>
+    <footer data-font="sans">
+      <p class="title built-with">
+        <a href="../../copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH. ALL RIGHTS RESERVED.
+      </p>
+      <p class="title built-with">
+        BUILT WITH &#x1F49A; FOR
+        <a href="https://www.google.com/chrome/">GOOGLE CHROME</a> USING
+        <a href="https://firebase.google.com/">FIREBASE</a>,
+        <a href="https://material-ui.com/">MATERIAL-UI</a>,
+        <a href="https://reactjs.org/">REACT JS</a>, <a href="https://nodejs.org/en/">NODE JS</a>,
+        <a href="https://giphy.com/">GIPHY</a>, & <a href="https://dolby.io/">DOLBY VOXEET</a>.
+      </p>
+      <a data-font="sans-bold" href="https://paypal.me/Ayushya" class="link-button">
+        Support Watch Party
+      </a>
+      <a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button"
+        >Get Chrome Extension</a
+      >
+      <a
+        data-font="sans-bold"
+        href="mailto:admin@chromewatchparty.com?subject=User Feedback"
+        class="link-button"
+      >
+        Give Feedback
+      </a>
+      <a data-font="sans-bold" href="../../welcome/" class="link-button">
+        Getting Started
+      </a>
+      <a data-font="sans-bold" href="../../changes/" class="link-button">
+        Changelog
+      </a>
+    </footer>
+  </body>
+</html>

website/changes/v1.6.3/index.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<!-----------------------------------------------------------------------
+Copyright (C) Ayushya Amitabh - All Rights Reserved
+Unauthorized copying of this file, via any medium is strictly prohibited
+Proprietary and confidential
+Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020 
+https://www.chromewatchparty.com/copyright
+=========================================================================
+ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, UNLESS OTHERWISE
+CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
+COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
+------------------------------------------------------------------------->
+<html>
+  <head>
+    <link rel="apple-touch-icon" sizes="57x57" href="../../icons/apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="../../icons/apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="../../icons/apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="../../icons/apple-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="../../icons/apple-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="../../icons/apple-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="../../icons/apple-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="../../icons/apple-icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="../../icons/apple-icon-180x180.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="../../icons/android-icon-192x192.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="../../icons/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="../../icons/favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../../icons/favicon-16x16.png" />
+    <link rel="icon" href="../../icons/favicon.ico" />
+    <link rel="manifest" href="../../manifest.json" />
+    <meta name="msapplication-TileImage" content="../../icons/ms-icon-144x144.png" />
+    <link rel="stylesheet" type="text/css" href="../../font.css" />
+    <link rel="stylesheet" type="text/css" href="../../styles/index.css" />
+    <script src="../../scripts/Stickied.js"></script>
+    <title>Watch Party | V1.6.3</title>
+  </head>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+
+    gtag('config', 'UA-87498806-2');
+  </script>
+  <body class="copyright welcome">
+    <div class="landing">
+      <div class="logo-circle"></div>
+      <div class="logo-circle"></div>
+      <div class="logo-circle"></div>
+      <h1 data-font="serif" class="logo duplicate"><a href="../../">WATCH PARTY</a> | V1.6.3</h1>
+      <h1 data-font="serif" class="logo"><a href="../../">WATCH PARTY</a> | V1.6.3</h1>
+      <h5 data-font="sans" class="logo-tag">
+        WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
+      </h5>
+    </div>
+    <div class="features">
+      <p data-font="sans-bold" class="title subtitle">
+        CHANGES MADE IN FEATURES
+      </p>
+      <div class="feature-card">
+        <div class="feature-icon" id="chat">
+          <video loop muted autoplay src="../../media/features/Chat.mp4"></video>
+        </div>
+        <p data-font="sans" class="feature-text">
+          Improve Chat performance
+        </p>
+      </div>
+    </div>
+    <div id="tips" class="landing">
+      <p data-font="sans-bold" class="title">
+        LISTED CHANGE DETAILS
+      </p>
+      <div class="tip">
+        <p data-font="sans-bold">
+          Use virtualized scrolling to fix lag from chat
+        </p>
+      </div>
+      <a
+        data-font="sans-bold"
+        href="mailto:admin@chromewatchparty.com?subject=Question About V1.6.3 Changes"
+        class="link-button"
+      >
+        Have Questions About These Changes?
+      </a>
+    </div>
+    <footer data-font="sans">
+      <p class="title built-with">
+        <a href="../../copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH. ALL RIGHTS RESERVED.
+      </p>
+      <p class="title built-with">
+        BUILT WITH &#x1F49A; FOR
+        <a href="https://www.google.com/chrome/">GOOGLE CHROME</a> USING
+        <a href="https://firebase.google.com/">FIREBASE</a>,
+        <a href="https://material-ui.com/">MATERIAL-UI</a>,
+        <a href="https://reactjs.org/">REACT JS</a>, <a href="https://nodejs.org/en/">NODE JS</a>,
+        <a href="https://giphy.com/">GIPHY</a>, & <a href="https://dolby.io/">DOLBY VOXEET</a>.
+      </p>
+      <a data-font="sans-bold" href="https://paypal.me/Ayushya" class="link-button">
+        Support Watch Party
+      </a>
+      <a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button"
+        >Get Chrome Extension</a
+      >
+      <a
+        data-font="sans-bold"
+        href="mailto:admin@chromewatchparty.com?subject=User Feedback"
+        class="link-button"
+      >
+        Give Feedback
+      </a>
+      <a data-font="sans-bold" href="../../welcome/" class="link-button">
+        Getting Started
+      </a>
+      <a data-font="sans-bold" href="../../changes/" class="link-button">
+        Changelog
+      </a>
+    </footer>
+  </body>
+</html>