v1.4.2-release/release

app/public/background.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src *; style-src 'self' https://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'"
+    />
+    <style>
+      html {
+        height: fit-content;
+        width: fit-content;
+      }
+      body {
+        margin: 0;
+        min-width: 200px;
+        background-color: rgba(46, 46, 46, 1);
+        height: fit-content;
+      }
+      a:hover {
+        filter: drop-shadow(0 0 10px black);
+      }
+      a {
+        border-radius: 13px;
+        font-family: sans-serif;
+        font-weight: 500;
+        display: block;
+        user-select: none;
+        color: black;
+        text-decoration: none;
+        padding: 5px 10px;
+        text-align: center;
+        margin: 10px 10px;
+      }
+      a:nth-child(1) {
+        background-color: rgb(23, 245, 160);
+      }
+      a:nth-child(2) {
+        background-color: rgb(235, 77, 77);
+      }
+      a:nth-child(3) {
+        background-color: cornflowerblue;
+      }
+    </style>
+  </head>
+  <body>
+    <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-auth.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-firestore.js"></script>
+    <script src="background.js"></script>
+    <a target="_blank" href="https://www.hulu.com/">Hulu</a>
+    <a target="_blank" href="https://www.netflix.com/browse">Netflix</a>
+    <a target="_blank" href="https://www.amazon.com/gp/video/storefront">Prime Video</a>
+  </body>
+</html>

app/public/background.js

@@ -50,6 +50,13 @@ const sendAuth = async (sendResponse) => {
   sendResponse(firebase.auth().currentUser);
 };
 
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.tabs.create({
+    url: 'https://www.chromewatchparty.com/welcome',
+    active: true,
+  });
+});
+
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   const { type } = request;
   switch (type) {

app/public/manifest.json

@@ -4,7 +4,10 @@
   "version": "1.4.2",
   "description": "Watch streamed content together.",
   "background": {
-    "page": "popup.html"
+    "page": "background.html"
+  },
+  "browser_action": {
+    "default_popup": "popup.html"
   },
   "permissions": [
     "https://*.hulu.com/*",
@@ -13,43 +16,20 @@
     "https://*.disneyplus.com/*",
     "https://*.youtube.com/*",
     "https://play.hbonow.com/*",
-    "https://play.hbomax.com/*",
+    "https://play.hbomax.com/*"
-    "http://localhost/*"
   ],
   "content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'",
   "content_scripts": [
     {
-      "matches": ["https://*.hulu.com/*"],
+      "matches": [
-      "run_at": "document_idle",
+        "https://*.hulu.com/*",
-      "js": ["/static/js/content.js"],
+        "https://*.netflix.com/*",
-      "css": ["/static/css/app.css"]
+        "https://*.amazon.com/*",
-    },
+        "https://*.disneyplus.com/*",
-    {
+        "https://*.youtube.com/*",
-      "matches": ["https://*.netflix.com/*"],
+        "https://play.hbonow.com/*",
-      "run_at": "document_idle",
+        "https://play.hbomax.com/*"
-      "js": ["/static/js/content.js"],
+      ],
-      "css": ["/static/css/app.css"]
-    },
-    {
-      "matches": ["https://*.amazon.com/*"],
-      "run_at": "document_idle",
-      "js": ["/static/js/content.js"],
-      "css": ["/static/css/app.css"]
-    },
-    {
-      "matches": ["https://*.disneyplus.com/*"],
-      "run_at": "document_idle",
-      "js": ["/static/js/content.js"],
-      "css": ["/static/css/app.css"]
-    },
-    {
-      "matches": ["https://*.youtube.com/*"],
-      "run_at": "document_idle",
-      "js": ["/static/js/content.js"],
-      "css": ["/static/css/app.css"]
-    },
-    {
-      "matches": ["https://play.hbonow.com/*", "https://play.hbomax.com/*"],
       "run_at": "document_idle",
       "js": ["/static/js/content.js"],
       "css": ["/static/css/app.css"]

app/public/popup.html

@@ -1,54 +1,11 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta
+    <style></style>
-      http-equiv="Content-Security-Policy"
-      content="default-src *; style-src 'self' https://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'"
-    />
-    <style>
-      html {
-        height: fit-content;
-        width: fit-content;
-      }
-      body {
-        margin: 0;
-        min-width: 200px;
-        background-color: rgba(46, 46, 46, 1);
-        height: fit-content;
-      }
-      a:hover {
-        filter: drop-shadow(0 0 10px black);
-      }
-      a {
-        border-radius: 13px;
-        font-family: sans-serif;
-        font-weight: 500;
-        display: block;
-        user-select: none;
-        color: black;
-        text-decoration: none;
-        padding: 5px 10px;
-        text-align: center;
-        margin: 10px 10px;
-      }
-      a:nth-child(1) {
-        background-color: rgb(23, 245, 160);
-      }
-      a:nth-child(2) {
-        background-color: rgb(235, 77, 77);
-      }
-      a:nth-child(3) {
-        background-color: cornflowerblue;
-      }
-    </style>
   </head>
   <body>
-    <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-app.js"></script>
+    <a>Show tips</a>
-    <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-auth.js"></script>
+    <a>Give Feedback</a>
-    <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-firestore.js"></script>
+    <a>Support Watch Party</a>
-    <script src="background.js"></script>
-    <a target="_blank" href="https://www.hulu.com/">Hulu</a>
-    <a target="_blank" href="https://www.netflix.com/browse">Netflix</a>
-    <a target="_blank" href="https://www.amazon.com/gp/video/storefront">Prime Video</a>
   </body>
 </html>

app/src/Api.js

@@ -43,7 +43,7 @@ export const updateLocalData = (data) => {
   window.localStorage.setItem('WatchParty', JSON.stringify(Object.assign({}, LocalData(), data)));
 };
 
-export const emptyLocalData = () => window.localStorage.reject('WatchParty');
+export const emptyLocalData = () => window.localStorage.removeItem('WatchParty');
 
 export const getUserUid = async () =>
   new Promise((resolve, reject) => {

app/src/Chat.js

@@ -459,7 +459,7 @@ export default class Chat extends Component {
             placeholder={this.state.gif ? 'Search something...' : 'Say something...'}
             helperText={
               this.state.newMessage && !this.state.gif
-                ? 'Enter to send'
+                ? 'Enter to send / Shift+Enter for next line'
                 : this.state.gif
                 ? 'Click on gif to send'
                 : null

app/src/Create.js

@@ -10,7 +10,12 @@ import {
 } from './Api';
 import { goTo } from 'route-lite';
 import Chat from './Chat';
-import { ChevronRight } from '@material-ui/icons';
+import {
+  ChevronRight,
+  InfoRounded,
+  ContactSupportRounded,
+  MonetizationOnRounded,
+} from '@material-ui/icons';
 
 const CONSTANTS = {
   USER_NAME_LENGTH: 12,
@@ -207,6 +212,35 @@ export default class Create extends Component {
             <span>{mode === 'create' ? 'Start Party' : 'Join Party'}</span> <ChevronRight />
           </Button>
         </Paper>
+        <div className="create-bottom-card">
+          <Button
+            color="secondary"
+            target="_blank"
+            startIcon={<InfoRounded />}
+            size="small"
+            href="https://www.chromewatchparty.com/welcome/#tips"
+          >
+            FAQ
+          </Button>
+          <Button
+            color="secondary"
+            target="_blank"
+            startIcon={<ContactSupportRounded />}
+            size="small"
+            href="mailto:admin@chromewatchparty.com?subject=User Feedback"
+          >
+            Feedback
+          </Button>
+          <Button
+            color="secondary"
+            target="_blank"
+            startIcon={<MonetizationOnRounded />}
+            size="small"
+            href="https://paypal.me/Ayushya"
+          >
+            Donate
+          </Button>
+        </div>
       </div>
     );
   }

app/src/index.css

@@ -16,8 +16,13 @@ body.visible {
 }
 body.visible .watch-party-fab {
   right: var(--party-width) !important;
-  transform: translateX(50%);
+  transform: translateX(0);
   top: 1.5rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  background-color: #424242 !important;
+  box-shadow: none;
+  background-blend-mode: lighten;
 }
 body.visible .party-notification-container {
   display: block !important;
@@ -182,21 +187,32 @@ body.amazon-prime textarea:focus {
 }
 
 .party-create-container {
-  padding: 38px;
   display: flex;
   flex-direction: column;
   height: 100%;
+  background: #424242;
+  padding: 0;
 }
+.party-create-container .brand-title {
+  padding: 36px;
+}
+
 .party-create-container .create-input-card {
   display: flex;
   flex-direction: column;
   padding: 2rem;
-  margin: auto 0;
+  margin: 0;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  background: #424242;
 }
 .create-input-card * {
   font-size: 12px !important;
 }
-.party-create-container .create-input-card .create-mode-select,
+.party-create-container .create-input-card .create-mode-select {
+  margin-bottom: 36px;
+}
 .party-create-container .create-input-card .create-name,
 .party-create-container .create-input-card .create-pin {
   margin-bottom: 1rem;
@@ -204,12 +220,25 @@ body.amazon-prime textarea:focus {
 .party-create-container .create-input-card {
   background-color: #2d2d2d;
 }
-
+.create-bottom-card {
+  background-color: #202020;
+  padding: 30px 15px;
+  display: flex;
+  justify-content: space-evenly;
+}
+.create-bottom-card * {
+  letter-spacing: 1.5px !important;
+  font-size: 11px;
+}
+.create-bottom-card a:hover {
+  color: #c0f300;
+}
 .thread-container {
   max-height: 100%;
   flex: 1;
   overflow-y: auto;
   margin-bottom: 1rem;
+  padding: 0 15px;
   margin-top: 1rem;
 }
 .room-title {
@@ -238,6 +267,7 @@ textarea::-webkit-scrollbar {
 }
 .chat-message-box > div {
   border-radius: 26px;
+  background-color: #424242;
 }
 .chat-message-box .MuiFormHelperText-root {
   font-size: 10px !important;
@@ -252,7 +282,7 @@ textarea::-webkit-scrollbar {
   max-height: 100%;
   flex-direction: column;
   flex: 1;
-  padding: 30px 15px 15px 30px;
+  padding: 0 !important;
   box-sizing: border-box !important;
 }
 
@@ -377,6 +407,8 @@ textarea::-webkit-scrollbar {
 .text-phone-panel {
   display: flex;
   align-items: center;
+  margin: 0 15px 15px 15px;
+  border-radius: 26px;
 }
 
 .MuiTooltip-popper {

website/index.html

@@ -124,6 +124,13 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
       <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>
     </footer>
   </body>
 </html>

website/styles/extrasmall.css

@@ -188,9 +188,44 @@ footer .link-button {
   border-bottom: 1px solid;
 }
 
-.landing video {
+.welcome .landing video {
   display: block;
   max-width: 85%;
   height: auto;
   border-radius: 7rem;
+  border: 2px solid var(--cta);
+  margin: 10rem 0;
+  box-shadow: 0px 0px 50px #c0f30054;
+}
+
+.welcome .landing .title.subtitle {
+  display: table;
+  text-transform: uppercase;
+}
+
+.welcome .landing#tips .tip {
+  padding: 3rem 0;
+  border-bottom: 0.5px solid var(--primary-medium);
+  padding-right: 3rem;
+}
+
+.welcome .landing#tips .tip:last-of-type {
+  border-bottom: none;
+}
+
+.welcome .landing#tips .link-button {
+  margin-bottom: 7rem;
+}
+
+.welcome .landing#tips .tip h6 {
+  color: var(--primary-light);
+  font-size: 3rem;
+  letter-spacing: 0.5rem;
+}
+
+.welcome .landing#tips .tip p {
+  color: var(--primary-medium);
+  font-size: 3rem;
+  margin: 1.5rem 0;
+  letter-spacing: 0.25rem;
 }

website/styles/large.css

@@ -11,5 +11,5 @@ Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020
 }
 
 .landing video {
-  max-width: 55%;
+  max-width: 45%;
 }

website/styles/medium.css

@@ -174,8 +174,8 @@ footer .link-button {
   color: var(--primary);
 }
 
-.landing video {
+.welcome .landing video {
-  max-width: 75%;
+  max-width: 45%;
 }
 
 .welcome .landing .supported-logo {
@@ -183,6 +183,18 @@ footer .link-button {
   border-bottom: 1px solid var(--cta);
 }
 
+.welcome .landing#tips .tip {
+  padding-right: 0;
+}
+
+.welcome .landing#tips .link-button {
+  max-width: fit-content;
+  display: inline-table;
+  margin-right: 3rem;
+  padding: 0.8rem 3.375rem;
+  font-size: 2.5rem;
+}
+
 .welcome .landing .supported-logo::before {
   content: 'START WATCHING';
   position: absolute;

website/styles/small.css

@@ -4,3 +4,7 @@ Unauthorized copying of this file, via any medium is strictly prohibited
 Proprietary and confidential
 Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020 
 ************************************************************************/
+
+.welcome .landing video {
+  max-width: 75%;
+}

website/welcome/index.html

@@ -46,8 +46,9 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
       <div class="logo-circle"></div>
       <h1 data-font="serif" class="logo">WATCH PARTY</h1>
       <h5 data-font="sans" class="logo-tag">
-        WELCOME TO WATCH PARTY.
+        WELCOME TO WATCH PARTY
       </h5>
+      <p data-font="sans-bold" class="title subtitle">Watch Party lives in the bottom right corner of your screen. <br /> It's there when you need it and hidden when you don't.</p>
       <video src="../media/features/Tutorial.mp4" autoplay muted loop> </video>
       <p data-font="sans-bold" class="title subtitle">
         WATCH TOGETHER ON
@@ -62,16 +63,82 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
         <a href="https://play.hbomax.com"><div class="supported-logo" id="hbomax"></div></a>
       </div>
     </div>
+    <div id="tips" class="landing">
+      <p data-font="sans-bold" class="title">
+       TIPS & FAQ
+      </p>
+      <div class="tip">
+        <h6 data-font="sans">
+          CAN I USE THE SAME PARTY, ON A DIFFERENT SITE
+        </h6>
+        <p data-font="sans-bold">
+          If you started the party, you can simply join the party from a different place to change the party location.
+        </p>
+      </div>
+      <div class="tip">
+        <h6 data-font="sans">
+          I CAN'T START A CALL
+        </h6>
+        <p data-font="sans-bold">
+          A group call can only be started by the person who started the party - after that the rest of the party can join.
+        </p>
+      </div>
+      <div class="tip">
+        <h6 data-font="sans">
+          CHAT NOTIFICATIONS ARE ANNOYING
+        </h6>
+        <p data-font="sans-bold">
+          You can turn off the chat notifications from the title card in the sidebar. Click on the title card to see the setting.
+        </p>
+      </div>
+      <div class="tip">
+        <h6 data-font="sans">
+          HOW DO I SEARCH FOR GIFs
+        </h6>
+        <p data-font="sans-bold">
+          Click on the GIF button next to the message input box, start searching! Scroll to the right to load more results.
+        </p>
+      </div>
+      <div class="tip">
+        <h6 data-font="sans">
+          CAN I DELETE PARTY DATA MANUALLY
+        </h6>
+        <p data-font="sans-bold">
+          Click on the title card in the sidebar, and click on the End Party button. Ending a party immediately deletes all data.
+        </p>
+      </div>
+      <div class="tip">
+        <h6 data-font="sans">
+          CAN I DISABLE WATCH PARTY TEMPORARILY
+        </h6>
+        <p data-font="sans-bold">
+          Watch Party is built to not be in your way but, it can be manually disabled by going to the Chrome Extensions page (chrome://extensions).</a>
+        </p>
+      </div>
+      <a data-font="sans-bold" href="mailto:admin@chromewatchparty.com?subject=New FAQ Question" class="link-button">
+        Ask A New Question
+      </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>.
+      </p>
       <a data-font="sans-bold" href="https://paypal.me/Ayushya" class="link-button">
         Support Watch Party
       </a>
-      <a data-font="sans-bold" href="mailto:admin@chromewatchparty.com" class="link-button">
+      <a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button"
-        Give Feedback</a
+        >Get Chrome Extension
-      >
+      </a>
-      <p class="title built-with">
+      <a data-font="sans-bold" href="mailto:admin@chromewatchparty.com?subject=User Feedback" class="link-button">
-        <a href="../copyright/">COPYRIGHT</a> &copy; 2020 AYUSHYA AMITABH. ALL RIGHTS RESERVED.
+        Give Feedback
-      </p>
+      </a>
     </footer>
   </body>
 </html>