diff --git a/.gitignore b/.gitignore index 814b71a..54068ed 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,5 @@ yarn-debug.log* yarn-error.log* .history/ -FirebaseSecret.json \ No newline at end of file +FirebaseSecret.json +*.cache \ No newline at end of file diff --git a/firebase.json b/firebase.json index a68a195..27d9811 100644 --- a/firebase.json +++ b/firebase.json @@ -2,6 +2,15 @@ "functions": { "predeploy": [ "npm --prefix \"$RESOURCE_DIR\" run lint" + ], + "source": "functions" + }, + "hosting": { + "public": "website", + "ignore": [ + "firebase.json", + "**/.*", + "**/node_modules/**" ] } } diff --git a/public/android-icon-144x144.png b/public/android-icon-144x144.png new file mode 100644 index 0000000..b49a3db Binary files /dev/null and b/public/android-icon-144x144.png differ diff --git a/public/android-icon-192x192.png b/public/android-icon-192x192.png new file mode 100644 index 0000000..7d04301 Binary files /dev/null and b/public/android-icon-192x192.png differ diff --git a/public/favicon-128x128.png b/public/favicon-128x128.png new file mode 100644 index 0000000..b1ae254 Binary files /dev/null and b/public/favicon-128x128.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000..83db93e Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000..29d4a94 Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png new file mode 100644 index 0000000..549500a Binary files /dev/null and b/public/favicon-96x96.png differ diff --git a/public/favicon.ico b/public/favicon.ico index d85d2d7..2d07826 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/manifest.json b/public/manifest.json index 1fcc7c6..9f2851f 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,7 +1,7 @@ { - "name": "WatchParty", + "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", - "32": "favicon.ico", - "64": "favicon.ico", - "128": "logo192.png", - "512": "logo512.png" + "16": "favicon-16x16.png", + "32": "favicon-32x32.png", + "96": "favicon-96x96.png", + "128": "favicon-128x128.png", + "144": "android-icon-144x144.png", + "192": "android-icon-192x192.png" }, "manifest_version": 2 } diff --git a/src/Chat.js b/src/Chat.js index ba286fe..ee1f037 100644 --- a/src/Chat.js +++ b/src/Chat.js @@ -213,7 +213,7 @@ export default class Chat extends Component { multiline rowsMax="3" size="small" - placeholder="New message... ( to send)" + placeholder="New message... (Enter to send)" variant="outlined" className="chat-message-box addFocus" value={newMessage} diff --git a/src/Thread.css b/src/Thread.css index 1b8469c..cd5dfe8 100644 --- a/src/Thread.css +++ b/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; +} diff --git a/src/VideoListener.js b/src/VideoListener.js index ef138b5..294afcf 100644 --- a/src/VideoListener.js +++ b/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; } diff --git a/src/index.css b/src/index.css index 815a9f4..6a574c5 100644 --- a/src/index.css +++ b/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); - right: -35%; + width: calc(25% - 2rem); + 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('chrome-extension://__MSG_@@extension_id__/logo192.png'); + /* background-image: url('/android-icon-192x192.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-height: 65%; + max-width: 75%; + max-height: 75%; } .party-create-container { diff --git a/website/404.html b/website/404.html new file mode 100644 index 0000000..59d7083 --- /dev/null +++ b/website/404.html @@ -0,0 +1,54 @@ + + + + + + Watch Party + + +
+
+ + + That page doesn't exist, but you can still get the Chrome Extension. + + + + + WATCH PARTY + + + + + ▶ Go To Home ◀ + + +
+
+ + + diff --git a/website/android-icon-144x144.png b/website/android-icon-144x144.png new file mode 100644 index 0000000..b1ae254 Binary files /dev/null and b/website/android-icon-144x144.png differ diff --git a/website/android-icon-192x192.png b/website/android-icon-192x192.png new file mode 100644 index 0000000..7d04301 Binary files /dev/null and b/website/android-icon-192x192.png differ diff --git a/website/android-icon-36x36.png b/website/android-icon-36x36.png new file mode 100644 index 0000000..39d0e3d Binary files /dev/null and b/website/android-icon-36x36.png differ diff --git a/website/android-icon-48x48.png b/website/android-icon-48x48.png new file mode 100644 index 0000000..53eb68d Binary files /dev/null and b/website/android-icon-48x48.png differ diff --git a/website/android-icon-72x72.png b/website/android-icon-72x72.png new file mode 100644 index 0000000..d665a81 Binary files /dev/null and b/website/android-icon-72x72.png differ diff --git a/website/android-icon-96x96.png b/website/android-icon-96x96.png new file mode 100644 index 0000000..549500a Binary files /dev/null and b/website/android-icon-96x96.png differ diff --git a/website/apple-icon-114x114.png b/website/apple-icon-114x114.png new file mode 100644 index 0000000..99ef6c2 Binary files /dev/null and b/website/apple-icon-114x114.png differ diff --git a/website/apple-icon-120x120.png b/website/apple-icon-120x120.png new file mode 100644 index 0000000..34683e4 Binary files /dev/null and b/website/apple-icon-120x120.png differ diff --git a/website/apple-icon-144x144.png b/website/apple-icon-144x144.png new file mode 100644 index 0000000..b49a3db Binary files /dev/null and b/website/apple-icon-144x144.png differ diff --git a/website/apple-icon-152x152.png b/website/apple-icon-152x152.png new file mode 100644 index 0000000..ee4cd09 Binary files /dev/null and b/website/apple-icon-152x152.png differ diff --git a/website/apple-icon-180x180.png b/website/apple-icon-180x180.png new file mode 100644 index 0000000..79369ae Binary files /dev/null and b/website/apple-icon-180x180.png differ diff --git a/website/apple-icon-57x57.png b/website/apple-icon-57x57.png new file mode 100644 index 0000000..c1195f3 Binary files /dev/null and b/website/apple-icon-57x57.png differ diff --git a/website/apple-icon-60x60.png b/website/apple-icon-60x60.png new file mode 100644 index 0000000..a22e9b8 Binary files /dev/null and b/website/apple-icon-60x60.png differ diff --git a/website/apple-icon-72x72.png b/website/apple-icon-72x72.png new file mode 100644 index 0000000..d665a81 Binary files /dev/null and b/website/apple-icon-72x72.png differ diff --git a/website/apple-icon-76x76.png b/website/apple-icon-76x76.png new file mode 100644 index 0000000..48b7158 Binary files /dev/null and b/website/apple-icon-76x76.png differ diff --git a/website/apple-icon-precomposed.png b/website/apple-icon-precomposed.png new file mode 100644 index 0000000..89fe556 Binary files /dev/null and b/website/apple-icon-precomposed.png differ diff --git a/website/apple-icon.png b/website/apple-icon.png new file mode 100644 index 0000000..89fe556 Binary files /dev/null and b/website/apple-icon.png differ diff --git a/website/favicon-128x128.png b/website/favicon-128x128.png new file mode 100644 index 0000000..b1ae254 Binary files /dev/null and b/website/favicon-128x128.png differ diff --git a/website/favicon-16x16.png b/website/favicon-16x16.png new file mode 100644 index 0000000..83db93e Binary files /dev/null and b/website/favicon-16x16.png differ diff --git a/website/favicon-32x32.png b/website/favicon-32x32.png new file mode 100644 index 0000000..29d4a94 Binary files /dev/null and b/website/favicon-32x32.png differ diff --git a/website/favicon-96x96.png b/website/favicon-96x96.png new file mode 100644 index 0000000..549500a Binary files /dev/null and b/website/favicon-96x96.png differ diff --git a/website/favicon.ico b/website/favicon.ico new file mode 100644 index 0000000..2d07826 Binary files /dev/null and b/website/favicon.ico differ diff --git a/website/font.css b/website/font.css new file mode 100644 index 0000000..506f2d8 --- /dev/null +++ b/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; +} diff --git a/website/glacialindifference-bold-webfont.woff b/website/glacialindifference-bold-webfont.woff new file mode 100644 index 0000000..0b2a375 Binary files /dev/null and b/website/glacialindifference-bold-webfont.woff differ diff --git a/website/glacialindifference-bold-webfont.woff2 b/website/glacialindifference-bold-webfont.woff2 new file mode 100644 index 0000000..452055e Binary files /dev/null and b/website/glacialindifference-bold-webfont.woff2 differ diff --git a/website/glacialindifference-italic-webfont.woff b/website/glacialindifference-italic-webfont.woff new file mode 100644 index 0000000..ac14a23 Binary files /dev/null and b/website/glacialindifference-italic-webfont.woff differ diff --git a/website/glacialindifference-italic-webfont.woff2 b/website/glacialindifference-italic-webfont.woff2 new file mode 100644 index 0000000..d1317b3 Binary files /dev/null and b/website/glacialindifference-italic-webfont.woff2 differ diff --git a/website/glacialindifference-regular-webfont.woff b/website/glacialindifference-regular-webfont.woff new file mode 100644 index 0000000..64b9726 Binary files /dev/null and b/website/glacialindifference-regular-webfont.woff differ diff --git a/website/glacialindifference-regular-webfont.woff2 b/website/glacialindifference-regular-webfont.woff2 new file mode 100644 index 0000000..f663610 Binary files /dev/null and b/website/glacialindifference-regular-webfont.woff2 differ diff --git a/website/index.html b/website/index.html new file mode 100644 index 0000000..246b280 --- /dev/null +++ b/website/index.html @@ -0,0 +1,155 @@ + + + + + + + + + + + + + + + + + + + + + Watch Party + + + +
+
+ + + Get Chrome Extension. It's Free. + + + + + WATCH PARTY + + + + + Support Watch Party + + +
+
+
+
+ Watch Party Intro +

Watch your favorites on Netflix, Hulu & Amazon Prime with your favorite people

+ Disney+ And More Coming Soon. +
+
+
+
+
+
+ No time sync +
+
+ Hide the chat - focus on the show,
+ while staying synced.
+ Built to not be in your way but,
+ also be there when you need it. +
+
+
+
+ No signup or login required.
+ Just ready to go. +
+
+ No time sync +
+
+ No signup or login required. Just ready to go. +
+
+
+
+ No time sync +
+
+ Start the party before the show,
+ or after the show.
+ Just do what you want. +
+
+
+
+ What happens in Watch Party,
+ stays in Watch Party -
+ for 24 hours - then it's gone. +
+
+ No time sync +
+
+ What happens in Watch Party, stays in Watch Party - for 24 hours - then it's gone. +
+
+
+
+ No time sync +
+
+ Know when your friends pause and play +
+
+
+
+ + + diff --git a/website/intro.gif b/website/intro.gif new file mode 100644 index 0000000..ac2d7bf Binary files /dev/null and b/website/intro.gif differ diff --git a/website/manifest.json b/website/manifest.json new file mode 100644 index 0000000..a9562ab --- /dev/null +++ b/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" + } + ] +} diff --git a/website/ms-icon-144x144.png b/website/ms-icon-144x144.png new file mode 100644 index 0000000..b49a3db Binary files /dev/null and b/website/ms-icon-144x144.png differ diff --git a/website/ms-icon-150x150.png b/website/ms-icon-150x150.png new file mode 100644 index 0000000..ba4425d Binary files /dev/null and b/website/ms-icon-150x150.png differ diff --git a/website/ms-icon-310x310.png b/website/ms-icon-310x310.png new file mode 100644 index 0000000..409273b Binary files /dev/null and b/website/ms-icon-310x310.png differ diff --git a/website/ms-icon-70x70.png b/website/ms-icon-70x70.png new file mode 100644 index 0000000..1538211 Binary files /dev/null and b/website/ms-icon-70x70.png differ diff --git a/website/pixelsplitter-bold-webfont.woff b/website/pixelsplitter-bold-webfont.woff new file mode 100644 index 0000000..2d3e581 Binary files /dev/null and b/website/pixelsplitter-bold-webfont.woff differ diff --git a/website/pixelsplitter-bold-webfont.woff2 b/website/pixelsplitter-bold-webfont.woff2 new file mode 100644 index 0000000..08ad023 Binary files /dev/null and b/website/pixelsplitter-bold-webfont.woff2 differ diff --git a/website/placeholder.jpg b/website/placeholder.jpg new file mode 100644 index 0000000..2cba951 Binary files /dev/null and b/website/placeholder.jpg differ diff --git a/website/static.gif b/website/static.gif new file mode 100644 index 0000000..2a1626c Binary files /dev/null and b/website/static.gif differ diff --git a/website/style.css b/website/style.css new file mode 100644 index 0000000..cf4c642 --- /dev/null +++ b/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; + } +}