diff --git a/app/public/background.html b/app/public/background.html
new file mode 100644
index 0000000..ddcc5ad
--- /dev/null
+++ b/app/public/background.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+
+ Hulu
+ Netflix
+ Prime Video
+
+
diff --git a/app/public/background.js b/app/public/background.js
index 0614d97..0adbc27 100644
--- a/app/public/background.js
+++ b/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) {
diff --git a/app/public/manifest.json b/app/public/manifest.json
index 82643af..10ae023 100644
--- a/app/public/manifest.json
+++ b/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/*",
- "http://localhost/*"
+ "https://play.hbomax.com/*"
],
"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/*"],
- "run_at": "document_idle",
- "js": ["/static/js/content.js"],
- "css": ["/static/css/app.css"]
- },
- {
- "matches": ["https://*.netflix.com/*"],
- "run_at": "document_idle",
- "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/*"],
+ "matches": [
+ "https://*.hulu.com/*",
+ "https://*.netflix.com/*",
+ "https://*.amazon.com/*",
+ "https://*.disneyplus.com/*",
+ "https://*.youtube.com/*",
+ "https://play.hbonow.com/*",
+ "https://play.hbomax.com/*"
+ ],
"run_at": "document_idle",
"js": ["/static/js/content.js"],
"css": ["/static/css/app.css"]
diff --git a/app/public/popup.html b/app/public/popup.html
index ddcc5ad..e480f75 100644
--- a/app/public/popup.html
+++ b/app/public/popup.html
@@ -1,54 +1,11 @@
-
-
+
-
-
-
-
- Hulu
- Netflix
- Prime Video
+ Show tips
+ Give Feedback
+ Support Watch Party
diff --git a/app/src/Api.js b/app/src/Api.js
index 2977b0a..550cc7c 100644
--- a/app/src/Api.js
+++ b/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) => {
diff --git a/app/src/Chat.js b/app/src/Chat.js
index 9919e4c..b4800d9 100644
--- a/app/src/Chat.js
+++ b/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
diff --git a/app/src/Create.js b/app/src/Create.js
index c237bf9..dbf66e7 100644
--- a/app/src/Create.js
+++ b/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 {
{mode === 'create' ? 'Start Party' : 'Join Party'}
+
+ }
+ size="small"
+ href="https://www.chromewatchparty.com/welcome/#tips"
+ >
+ FAQ
+
+ }
+ size="small"
+ href="mailto:admin@chromewatchparty.com?subject=User Feedback"
+ >
+ Feedback
+
+ }
+ size="small"
+ href="https://paypal.me/Ayushya"
+ >
+ Donate
+
+
);
}
diff --git a/app/src/index.css b/app/src/index.css
index a730179..9c38aef 100644
--- a/app/src/index.css
+++ b/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 {
diff --git a/website/index.html b/website/index.html
index d5fad74..12c583f 100644
--- a/website/index.html
+++ b/website/index.html
@@ -124,6 +124,13 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
Get Chrome Extension
+
+ Give Feedback
+