v1.1.0-beta/prep for beta, + gifs, semi final

src/Thread.css

@@ -15,7 +15,7 @@
   text-align: center;
   font-size: 12px;
   margin-top: 7.5px !important;
-  color: rgba(100, 100, 100, 0.8) !important;
+  color: rgba(147, 147, 147, 0.8) !important;
 }
 .system-message.alert {
   background-color: black;

src/VideoListener.js

@@ -90,7 +90,7 @@ export default class VideoListener {
           default:
             break;
         }
-        await this.timeout(250);
+        await this.timeout(500);
         // RE-ADD LISTENERS FOR FUTURE SYNC
         this.video.element.addEventListener('playing', this.onplay);
         this.video.element.addEventListener('pause', this.onpause);

website/404.html

@@ -1,9 +1,24 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
+    <link rel="manifest" href="manifest.json" />
+    <meta name="msapplication-TileImage" content="ms-icon-144x144.png" />
     <link rel="stylesheet" type="text/css" href="font.css" />
     <link rel="stylesheet" type="text/css" href="style.css" />
-    <title>Watch Party</title>
+    <title>Watch Party | 404</title>
   </head>
   <body>
     <section>
@@ -18,7 +33,7 @@
             WATCH PARTY
           </span>
         </a>
-        <a class="cta-container support" href="https://www.">
+        <a class="cta-container support" href="https://www.chromewatchparty.com" target="_self">
           <mark class="cta">
             ▶ Go To Home ◀
           </mark>

website/beta.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
+    <link rel="manifest" href="manifest.json" />
+    <meta name="msapplication-TileImage" content="ms-icon-144x144.png" />
+    <link rel="stylesheet" type="text/css" href="font.css" />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <title>Watch Party | Beta</title>
+  </head>
+  <body>
+    <script>
+      window.onload = function () {
+        let originalTitlePosition = null;
+        window.addEventListener('scroll', function (ev) {
+          const title = document.getElementsByClassName('title')[0];
+          const support = document.getElementsByClassName('support')[0];
+
+          if (originalTitlePosition === null) originalTitlePosition = title.offsetTop;
+          if (window.scrollY > originalTitlePosition) {
+            support.classList.add('stickied');
+            title.classList.add('stickied');
+          } else {
+            support.classList.remove('stickied');
+            title.classList.remove('stickied');
+          }
+        });
+      };
+    </script>
+    <section>
+      <div class="page">
+        <a class="cta-container" href="#request" target="_self">
+          <mark class="cta">
+            Request Beta Access Below
+          </mark>
+        </a>
+        <a href="./index.html" target="_self" class="title">
+          <span>
+            WATCH PARTY
+          </span>
+        </a>
+        <a class="cta-container support" href="https://www.paypal.me/Ayushya">
+          <mark class="cta">
+            Support Watch Party
+          </mark>
+        </a>
+      </div>
+    </section>
+    <section id="request" data-page="2">
+      <div class="page">
+        <script
+          src="http://googleformrestyler.apixml.net/GoogleFormStyler.js"
+          form="https://docs.google.com/forms/d/e/1FAIpQLSfhGxX7rJ4gNEYuQsx_wgg0GJqJq9XRWlgbpMZCrK14iPyuZA/viewform?embedded=true"
+        ></script>
+
+        <mark>Powered by Google Forms</mark>
+      </div>
+    </section>
+    <footer>
+      <div>
+        <span class="full">© Ayushya Amitabh, 2020</span>
+        <span
+          >Built with ❤️ 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>.</span
+        >
+      </div>
+      <div>
+        <span class="full">
+          <a>
+            <mark>Get Chrome Extension</mark>
+          </a>
+        </span>
+        <span>
+          Help keep Watch Party free -
+          <a>
+            <mark>Support Watch Party</mark>
+          </a>
+        </span>
+      </div>
+    </footer>
+  </body>
+</html>

website/index.html

@@ -46,11 +46,16 @@
             Get Chrome Extension. It's Free.
           </mark>
         </a>
-        <a href="http://get.chromewatchparty.com" download class="title">
+        <a href="http://get.chromewatchparty.com" class="title">
           <span>
             WATCH PARTY
           </span>
         </a>
+        <a class="cta-container" href="./beta.html#request">
+          <mark class="cta">
+            Request Beta Access
+          </mark>
+        </a>
         <a class="cta-container support" href="https://www.paypal.me/Ayushya">
           <mark class="cta">
             Support Watch Party
@@ -118,24 +123,39 @@
         </div>
         <div class="row">
           <div class="col image">
-            <img src="./track.png" alt="No time sync" />
+            <img src="./track.jpeg" alt="No time sync" />
           </div>
           <div class="col text">
             Know when your friends pause and play
           </div>
         </div>
+
+        <div class="row">
+          <div class="col text left">
+            When words aren't enough, <br />
+            use a GIF from Giphy
+          </div>
+          <div class="col image">
+            <img src="./giphy.gif" alt="No time sync" />
+          </div>
+          <div class="col text right">
+            When words aren't enough use a GIF from Giphy
+          </div>
+        </div>
       </div>
     </section>
     <footer>
       <div>
         <span class="full">© Ayushya Amitabh, 2020</span>
-        <span
+        <span>
-          >Built with ❤️ for <a href="https://www.google.com/chrome/">Google Chrome</a> using
+          Built with ❤️ 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>.</span
+          <a href="https://nodejs.org/en/">Node.js </a>& <a href="https://giphy.com/"> Giphy</a>.
-        >
+        </span>
       </div>
       <div>
         <span class="full">

website/style.css

@@ -4,7 +4,7 @@
 }
 body {
   height: 100vh;
-  background-color: black;
+  background-color: black !important;
 }
 a {
   text-decoration: none;
@@ -132,6 +132,7 @@ section[data-page='3'] .page * {
 }
 footer {
   padding: 2.5rem 4rem;
+  background-color: black;
 }
 footer,
 footer * {
@@ -248,3 +249,51 @@ footer mark {
     font-size: 1.25rem;
   }
 }
+
+/*
+  G O O G L E     F O R M S
+  C U S T O M I Z A T I O N
+*/
+.freebirdFormviewerViewHeaderTitle {
+  color: white !important;
+}
+.freebirdFormviewerViewHeaderDescription {
+  color: #848484 !important;
+}
+.freebirdFormviewerViewHeaderHeader {
+  border: none !important;
+  background-color: black !important;
+}
+.freebirdFormviewerViewHeaderThemeStripe {
+  display: none;
+}
+.freebirdFormviewerViewItemsItemItem {
+  background-color: black !important;
+  border: none !important;
+}
+.freebirdFormviewerViewItemsItemItem a {
+  font-family: 'Glacial';
+  color: cornflowerblue;
+}
+.freebirdFormviewerViewItemsItemItemTitle {
+  color: white !important;
+}
+.freebirdFormviewerViewFooterEmbeddedBackground {
+  display: none;
+}
+.freebirdFormviewerViewItemsItemItemHelpText {
+  color: #848484 !important;
+}
+.docssharedWizToggleLabeledLabelWrapper * {
+  color: #848484 !important;
+}
+.quantumWizTextinputPaperinputContentArea input {
+  color: white !important;
+}
+.freebirdThemedFilledButtonM2 {
+  background-color: #c0f300 !important;
+}
+.freebirdThemedFilledButtonM2 * {
+  color: black !important;
+  letter-spacing: 2px;
+}