Chrome Web Store Private Publish v1.0.0

.gitignore

@@ -23,3 +23,4 @@ yarn-error.log*
 .history/
 
 FirebaseSecret.json
+*.cache

firebase.json

@@ -2,6 +2,15 @@
   "functions": {
     "predeploy": [
       "npm --prefix \"$RESOURCE_DIR\" run lint"
+    ],
+    "source": "functions"
+  },
+  "hosting": {
+    "public": "website",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
     ]
   }
 }

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Watch Party",
   "short_name": "WP",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Watch streamed content together.",
   "background": {
     "page": "popup.html"
@@ -28,13 +28,14 @@
       "css": ["/static/css/app.css"]
     }
   ],
-  "web_accessible_resources": ["logo192.png"],
+  "web_accessible_resources": ["android-icon-192x192.png"],
   "icons": {
-    "16": "favicon.ico",
+    "16": "favicon-16x16.png",
-    "32": "favicon.ico",
+    "32": "favicon-32x32.png",
-    "64": "favicon.ico",
+    "96": "favicon-96x96.png",
-    "128": "logo192.png",
+    "128": "favicon-128x128.png",
-    "512": "logo512.png"
+    "144": "android-icon-144x144.png",
+    "192": "android-icon-192x192.png"
   },
   "manifest_version": 2
 }

src/Chat.js

@@ -213,7 +213,7 @@ export default class Chat extends Component {
           multiline
           rowsMax="3"
           size="small"
-          placeholder="New message... (<Enter> to send)"
+          placeholder="New message... (Enter to send)"
           variant="outlined"
           className="chat-message-box addFocus"
           value={newMessage}

src/Thread.css

@@ -31,6 +31,7 @@
   background-color: rgb(49, 49, 49);
 }
 .party-message {
+  font-size: 0.75rem !important;
   display: block;
   width: fit-content;
   max-width: 60%;
@@ -62,3 +63,7 @@
 .my-message:hover ~ .time {
   opacity: 1;
 }
+body.hulu .my-message,
+body.hulu .party-message {
+  font-size: 1.4rem !important;
+}

src/VideoListener.js

@@ -51,22 +51,24 @@ export default class VideoListener {
         );
         if (titleContainerParent) {
           const titleContainer = titleContainerParent.firstChild;
-          const nshow = titleContainer.querySelector('h4').innerHTML;
+          const nshow = titleContainer.querySelector('h4')
+            ? titleContainer.querySelector('h4').innerHTML
+            : titleContainer.innerHTML;
           let nepisode = '';
           titleContainer.querySelectorAll('span').forEach((e) => {
             if (e.innerHTML) nepisode += e.innerHTML + ' ';
           });
-          return nshow + '\n' + nepisode;
+          return nshow === '' && nepisode === '' ? null : nshow + '\n' + nepisode;
         }
         break;
       case PLAYER_SOURCE.AMAZON:
         const ashow = document.querySelector('.f3w9jrr.ff48h02').firstChild.innerHTML;
         const aepisode = document.querySelector('.f3w9jrr.ff48h02').lastChild.innerHTML;
-        return ashow !== '' && aepisode !== '' ? ashow + '\n' + aepisode : null;
+        return ashow === '' && aepisode === '' ? null : ashow + '\n' + aepisode;
       case PLAYER_SOURCE.HULU:
         const hshow = document.querySelector('.metadata-area__second-line').innerHTML;
         const hepisode = document.querySelector('.metadata-area__third-line').innerHTML;
-        return hshow !== '' && hepisode !== '' ? hshow + '\n' + hepisode : null;
+        return hshow === '' && hepisode === '' ? null : hshow + '\n' + hepisode;
       default:
         break;
     }

src/index.css

@@ -4,10 +4,10 @@ body {
   transition: max-width ease-in-out 0.35s;
 }
 body.visible {
-  width: 65%;
+  width: 75%;
 }
 body.visible .watch-party-fab {
-  right: 35% !important;
+  right: 25% !important;
   transform: translateX(50%);
   top: 1.5rem;
 }
@@ -18,17 +18,17 @@ body.visible .party-notification-container {
 body.netflix.visible .AkiraPlayer, /* NETFLIX */
 body.hulu.visible .Player__container,/* HULU */
 body.amazon-prime.visible #dv-web-player.dv-player-fullscreen /* AMAZON PRIME */ {
-  max-width: 65% !important;
+  max-width: 75% !important;
 }
 /* HULU MINIMIZED VIDEO */
 body.hulu.visible #__player__ .Player__container.Player__container--modal {
-  right: calc(35% + 2rem) !important;
+  right: calc(25% + 2rem) !important;
   z-index: 99999 !important;
 }
 /* HULU & AMAZON PRIME FIX */
 body.hulu #party-routes-wrapper,
 body.amazon-prime #party-routes-wrapper {
-  width: 35% !important;
+  width: 25% !important;
   height: 100% !important;
 }
 /* AMAZON STYLING FIX */
@@ -93,8 +93,8 @@ body.amazon-prime textarea:focus {
   position: fixed;
   background-color: rgb(27, 27, 27);
   bottom: 0;
-  width: calc(35% - 2rem);
+  width: calc(25% - 2rem);
-  right: -35%;
+  right: -25%;
   transition: all ease-in-out 0.3s;
   height: calc(100% - 2rem);
   padding: 1rem;
@@ -111,13 +111,25 @@ body.amazon-prime textarea:focus {
   display: none !important;
   bottom: 0.8rem !important;
   right: 1rem !important;
-  width: calc(35% - 2rem) !important;
+  width: calc(25% - 2rem) !important;
 }
 .party-notification-container .MuiPaper-root {
   border-radius: 26px !important;
   color: white;
   background-color: black;
 }
+@keyframes showbutton {
+  0% {
+    right: 1rem;
+  }
+  50% {
+    transform: scale(5) translateX(-100%) translateY(-100%);
+  }
+  100% {
+    right: -1rem;
+    transform: scale(1);
+  }
+}
 .watch-party-fab {
   z-index: 9999;
   position: fixed !important;
@@ -125,19 +137,22 @@ body.amazon-prime textarea:focus {
   right: -2rem !important;
   border: 1px solid white;
   background-color: black !important;
-  /* background-image: url('/logo192.png'); */
+  /* background-image: url('/android-icon-192x192.png'); */
-  background-image: url('chrome-extension://__MSG_@@extension_id__/logo192.png');
+  background-image: url('chrome-extension://__MSG_@@extension_id__/android-icon-192x192.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 2rem;
+  animation-name: showbutton;
+  animation-iteration-count: 1;
+  animation-duration: 2s;
   transition: all ease-in-out 0.3s !important;
 }
 .watch-party-fab:hover {
   right: 1rem !important;
 }
 .watch-party-fab .fab-logo {
-  max-width: 65%;
+  max-width: 75%;
-  max-height: 65%;
+  max-height: 75%;
 }
 
 .party-create-container {

website/404.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="font.css" />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <title>Watch Party</title>
+  </head>
+  <body>
+    <section>
+      <div class="page" style="background-color: rgba(0, 0, 0, 0.7);">
+        <a class="cta-container" href="https://chrome.google.com/webstore/category/extensions">
+          <mark class="cta">
+            That page doesn't exist, but you can still get the Chrome Extension.
+          </mark>
+        </a>
+        <a href="https://chrome.google.com/webstore/category/extensions" class="title">
+          <span>
+            WATCH PARTY
+          </span>
+        </a>
+        <a class="cta-container support" href="https://www.">
+          <mark class="cta">
+            ▶ Go To Home ◀
+          </mark>
+        </a>
+      </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/font.css

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'PixelSplitter';
+  src: url('pixelsplitter-bold-webfont.woff2') format('woff2'),
+    url('pixelsplitter-bold-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'GlacialBold';
+  src: url('glacialindifference-bold-webfont.woff2') format('woff2'),
+    url('glacialindifference-bold-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'GlacialItalic';
+  src: url('glacialindifference-italic-webfont.woff2') format('woff2'),
+    url('glacialindifference-italic-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Glacial';
+  src: url('glacialindifference-regular-webfont.woff2') format('woff2'),
+    url('glacialindifference-regular-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+* {
+  font-family: 'PixelSplitter', sans-serif;
+}

website/index.html

@@ -0,0 +1,155 @@
+<!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>
+  </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="https://chrome.google.com/webstore/category/extensions">
+          <mark class="cta">
+            Get Chrome Extension. It's Free.
+          </mark>
+        </a>
+        <a href="https://chrome.google.com/webstore/category/extensions" class="title">
+          <span>
+            WATCH PARTY
+          </span>
+        </a>
+        <a
+          class="cta-container support"
+          href="https://chrome.google.com/webstore/category/extensions"
+        >
+          <mark class="cta">
+            Support Watch Party
+          </mark>
+        </a>
+      </div>
+    </section>
+    <section data-page="2">
+      <div class="page">
+        <img src="./intro.gif" alt="Watch Party Intro" />
+        <p>Watch your favorites on Netflix, Hulu & Amazon Prime with your favorite people</p>
+        <mark>Disney+ And More Coming Soon.</mark>
+      </div>
+    </section>
+    <section data-page="3">
+      <div class="page">
+        <div class="row">
+          <div class="col image">
+            <img src="./placeholder.jpg" alt="No time sync" />
+          </div>
+          <div class="col text">
+            Hide the chat - focus on the show, <br />
+            while staying synced. <br />
+            Built to not be in your way but, <br />
+            also be there when you need it.
+          </div>
+        </div>
+        <div class="row">
+          <div class="col text left">
+            No signup or login required.<br />
+            Just ready to go.
+          </div>
+          <div class="col image">
+            <img src="./placeholder.jpg" alt="No time sync" />
+          </div>
+          <div class="col text right">
+            No signup or login required. Just ready to go.
+          </div>
+        </div>
+        <div class="row">
+          <div class="col image">
+            <img src="./placeholder.jpg" alt="No time sync" />
+          </div>
+          <div class="col text">
+            Start the party before the show, <br />
+            or after the show. <br />
+            Just do what you want.
+          </div>
+        </div>
+        <div class="row">
+          <div class="col text left">
+            What happens in Watch Party, <br />
+            stays in Watch Party -<br />
+            for 24 hours - then it's gone.
+          </div>
+          <div class="col image">
+            <img src="./placeholder.jpg" alt="No time sync" />
+          </div>
+          <div class="col text right">
+            What happens in Watch Party, stays in Watch Party - for 24 hours - then it's gone.
+          </div>
+        </div>
+        <div class="row">
+          <div class="col image">
+            <img src="./placeholder.jpg" alt="No time sync" />
+          </div>
+          <div class="col text">
+            Know when your friends pause and play
+          </div>
+        </div>
+      </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/manifest.json

@@ -0,0 +1,46 @@
+{
+  "name": "Watch Party",
+  "short_name": "WP",
+  "display": "browser",
+  "start_url": ".",
+  "theme_color": "#c0f300",
+  "background_color": "black",
+  "icons": [
+    {
+      "src": "/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ]
+}

website/style.css

@@ -0,0 +1,250 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+body {
+  height: 100vh;
+  background-color: black;
+}
+a {
+  text-decoration: none;
+  cursor: pointer;
+}
+section {
+  height: 100%;
+  background-image: url('./static.gif');
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+section > .page {
+  height: 100%;
+  background: linear-gradient(
+    0deg,
+    rgba(50, 50, 50, 0.8) 0%,
+    rgba(75, 75, 75, 0.5) 25%,
+    rgba(150, 150, 150, 0.2) 100%
+  );
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.cta {
+  font-family: 'GlacialBold';
+  background-color: black;
+  color: #c0f300;
+  padding: 0.5rem 1rem;
+  letter-spacing: 0.2rem;
+  transition: all ease-in-out 0.3s;
+}
+.title {
+  text-align: center;
+  color: #c0f300;
+  font-size: 5rem;
+  padding: 1rem 5rem;
+  border: 5px solid black;
+  border-radius: 5rem;
+  margin: 2rem 0;
+  transition: all ease-in-out 0.3s;
+  cursor: pointer;
+}
+.title > span {
+  filter: drop-shadow(-10px 10px 0px black);
+}
+.title:hover {
+  background-color: black;
+}
+section[data-page='2'] .page {
+  background: linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(43, 43, 43, 1) 65%,
+    rgba(50, 50, 50, 0.8) 100%
+  );
+}
+section[data-page='2'] .page img {
+  width: 95%;
+  margin: 0 auto;
+  height: auto;
+  border-radius: 2rem;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+  margin-bottom: 2rem;
+}
+section[data-page='2'] .page p {
+  font-family: 'Glacial';
+  font-size: 3rem;
+  word-break: keep-all;
+  word-wrap: break-word;
+  max-width: 95%;
+  text-align: center;
+  margin-bottom: 2rem;
+  color: white;
+  padding: 2px 0;
+}
+section[data-page='2'] .page mark {
+  font-family: 'GlacialBold';
+  padding: 2.5px 10px;
+  font-size: 2rem;
+  background-color: black;
+  color: #c0f300;
+}
+section[data-page='3'] {
+  height: fit-content;
+}
+section[data-page='3'] .page {
+  background: black;
+  display: block;
+}
+section[data-page='3'] .page * {
+  color: #c0f300;
+  font-family: 'Glacial';
+}
+
+.row {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0;
+  width: 65%;
+}
+.col.text {
+  padding: 2rem 0;
+  text-align: center;
+  color: white !important;
+  flex: 1;
+  font-size: 1.7rem;
+}
+.col.image {
+  padding: 0;
+  justify-self: center;
+  display: flex;
+  justify-content: center;
+}
+.col img {
+  width: 100%;
+  height: auto;
+  margin: 4rem 0 2rem 0;
+  position: relative;
+  border-radius: 1.5rem;
+}
+.col.text.left {
+  display: none;
+}
+footer {
+  padding: 2.5rem 4rem;
+}
+footer,
+footer * {
+  color: white;
+  font-family: 'Glacial';
+}
+footer > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 15px;
+}
+footer > div > span.full {
+  flex: 1;
+}
+footer mark {
+  background-color: #c0f300;
+  color: black;
+  padding: 2.5px 7px;
+}
+.suport {
+  transition: all ease-in-out 0.3s;
+}
+
+@media screen and (min-width: 1360px) {
+  .cta {
+    font-size: 1rem;
+  }
+  .support {
+    display: none;
+  }
+  .support.stickied .cta {
+    letter-spacing: 0rem;
+  }
+  .support.stickied {
+    position: fixed;
+    top: 2rem;
+    right: 2rem;
+    display: block;
+  }
+  .title.stickied {
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+    margin: 0;
+    font-size: 1rem;
+    padding: 0.5rem 1.5rem;
+    background: black;
+  }
+  section[data-page='2'] .page img {
+    width: 55%;
+  }
+  section[data-page='2'] .page p {
+    max-width: 55%;
+    font-size: 1.5rem;
+  }
+  section[data-page='2'] .page mark {
+    font-size: 1rem;
+  }
+  section[data-page='3'] .page {
+    padding-top: 15rem;
+  }
+  .row {
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    width: 65%;
+    margin-bottom: 5rem;
+    border-bottom: none;
+  }
+  .col.text {
+    color: #909090 !important;
+    flex: 1;
+    padding-left: 5rem;
+    font-size: 1.3rem;
+    display: flex;
+    align-items: center;
+    text-align: left;
+  }
+  .col.text.right {
+    display: none;
+  }
+  .col.text.left {
+    display: flex;
+    text-align: right;
+    justify-content: flex-end;
+    padding-left: 0;
+    padding-right: 5rem;
+  }
+  .col img {
+    width: auto;
+    height: 20rem;
+    position: relative;
+    border-radius: 1.5rem;
+  }
+  .col.image {
+    padding: 0;
+    justify-self: center;
+    display: flex;
+    justify-content: center;
+  }
+}
+@media screen and (max-width: 1360px) and (min-width: 1024px) {
+  section[data-page='2'] .page img {
+    width: 75%;
+  }
+  section[data-page='2'] .page p {
+    font-size: 1.25rem;
+  }
+  section[data-page='2'] .page mark {
+    font-size: 1rem;
+  }
+  .col.text {
+    font-size: 1.25rem;
+  }
+}