ayushya/watchparty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.6.6/release- chat fix- hbo click fix- hbo resize

Browse Source
This commit is contained in:
ayushya
2020-09-01 22:12:20 -04:00
parent 0d75218c0c
commit 72acbf56f0
14 changed files with 307 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "watch-party-admin", "name": "watch-party-admin",
"version": "1.6.5", "version": "1.6.6",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@ant-design/icons": "^4.2.2", "@ant-design/icons": "^4.2.2",
app/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "watch-party-crx", "name": "watch-party-crx",
"version": "1.6.5", "version": "1.6.6",
"private": true, "private": true,
"dependencies": {}, "dependencies": {},
"scripts": { "scripts": {
app/public/background.js
+51 -53
View File
@@ -12,18 +12,18 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
/* global chrome */ /* global chrome */
/* global firebase */ /* global firebase */
const APP_VERSION = "1.6.5"; const APP_VERSION = '1.6.6';
const APP_VERSION_STRING = APP_VERSION.replace(/\./g, ""); const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
const firebaseConfig = { const firebaseConfig = {
apiKey: "AIzaSyCJLuYpzXLDRmu2ttzFuSGmYcpFxqToWFU", apiKey: 'AIzaSyCJLuYpzXLDRmu2ttzFuSGmYcpFxqToWFU',
authDomain: "watch-party-crx.firebaseapp.com", authDomain: 'watch-party-crx.firebaseapp.com',
databaseURL: "https://watch-party-crx.firebaseio.com", databaseURL: 'https://watch-party-crx.firebaseio.com',
projectId: "watch-party-crx", projectId: 'watch-party-crx',
storageBucket: "watch-party-crx.appspot.com", storageBucket: 'watch-party-crx.appspot.com',
messagingSenderId: "712242707190", messagingSenderId: '712242707190',
appId: "1:712242707190:web:65fa7f772e30da364b0ad7", appId: '1:712242707190:web:65fa7f772e30da364b0ad7',
measurementId: "G-EZS4PEVG4T", measurementId: 'G-EZS4PEVG4T',
}; };
firebase.initializeApp(firebaseConfig); firebase.initializeApp(firebaseConfig);
@@ -44,8 +44,8 @@ const fetcher = async (request, sendResponse) => {
method, method,
headers: { headers: {
Authorization: `Token ${idToken}:${firebase.auth().currentUser.uid}`, Authorization: `Token ${idToken}:${firebase.auth().currentUser.uid}`,
"Access-Control-Allow-Origin": "*", 'Access-Control-Allow-Origin': '*',
"Keep-Alive": true, 'Keep-Alive': true,
}, },
...request, ...request,
}) })
@@ -73,37 +73,37 @@ const sendAuth = async (sendResponse) => {
chrome.runtime.onInstalled.addListener((details) => { chrome.runtime.onInstalled.addListener((details) => {
if (details.reason) { if (details.reason) {
if (details.reason === "install") { if (details.reason === 'install') {
if (window.localStorage.getItem("watchPartyVersion")) { if (window.localStorage.getItem('watchPartyVersion')) {
if (window.localStorage.getItem("watchPartyVersion") !== APP_VERSION) { if (window.localStorage.getItem('watchPartyVersion') !== APP_VERSION) {
chrome.tabs.create({ chrome.tabs.create({
url: `http://www.chromewatchparty.com/changes/v${APP_VERSION}`, url: `http://www.chromewatchparty.com/changes/v${APP_VERSION}`,
active: true, active: true,
}); });
window.localStorage.setItem("watchPartyVersion", APP_VERSION); window.localStorage.setItem('watchPartyVersion', APP_VERSION);
} }
} else { } else {
chrome.tabs.create({ chrome.tabs.create({
url: "https://www.chromewatchparty.com/welcome", url: 'https://www.chromewatchparty.com/welcome',
active: true, active: true,
}); });
window.localStorage.setItem("watchPartyVersion", APP_VERSION); window.localStorage.setItem('watchPartyVersion', APP_VERSION);
} }
} else if (details.reason === "update") { } else if (details.reason === 'update') {
if (window.localStorage.getItem("watchPartyVersion")) { if (window.localStorage.getItem('watchPartyVersion')) {
if (window.localStorage.getItem("watchPartyVersion") !== APP_VERSION) { if (window.localStorage.getItem('watchPartyVersion') !== APP_VERSION) {
chrome.tabs.create({ chrome.tabs.create({
url: `http://www.chromewatchparty.com/changes/v${APP_VERSION}`, url: `http://www.chromewatchparty.com/changes/v${APP_VERSION}`,
active: true, active: true,
}); });
window.localStorage.setItem("watchPartyVersion", APP_VERSION); window.localStorage.setItem('watchPartyVersion', APP_VERSION);
} }
} else { } else {
chrome.tabs.create({ chrome.tabs.create({
url: `http://www.chromewatchparty.com/changes/v${APP_VERSION}`, url: `http://www.chromewatchparty.com/changes/v${APP_VERSION}`,
active: true, active: true,
}); });
window.localStorage.setItem("watchPartyVersion", APP_VERSION); window.localStorage.setItem('watchPartyVersion', APP_VERSION);
} }
} }
} }
@@ -112,41 +112,41 @@ chrome.runtime.onInstalled.addListener((details) => {
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
const { type } = request; const { type } = request;
switch (type) { switch (type) {
case "API_CALL": case 'API_CALL':
fetcher(request, sendResponse); fetcher(request, sendResponse);
break; break;
case "GET_AUTH": case 'GET_AUTH':
sendAuth(sendResponse); sendAuth(sendResponse);
break; break;
case "GET_PARTIES": case 'GET_PARTIES':
sendResponse( sendResponse(
window.localStorage.getItem("parties") window.localStorage.getItem('parties')
? JSON.parse(window.localStorage.getItem("parties")) ? JSON.parse(window.localStorage.getItem('parties'))
: [] : []
); );
break; break;
case "EMPTY_PARTIES": case 'EMPTY_PARTIES':
window.localStorage.removeItem("parties"); window.localStorage.removeItem('parties');
break; break;
case "IS_HIDDEN": case 'IS_HIDDEN':
sendResponse( sendResponse(
window.localStorage.getItem("showWPButton") window.localStorage.getItem('showWPButton')
? JSON.parse(window.localStorage.getItem("showWPButton")) ? JSON.parse(window.localStorage.getItem('showWPButton'))
: true : true
); );
break; break;
case "GET_TUTORIAL": case 'GET_TUTORIAL':
sendResponse( sendResponse(
window.localStorage.getItem("tutorialComplete") window.localStorage.getItem('tutorialComplete')
? JSON.parse(window.localStorage.getItem("tutorialComplete")) ? JSON.parse(window.localStorage.getItem('tutorialComplete'))
: false : false
); );
break; break;
case "SET_TUTORIAL": case 'SET_TUTORIAL':
window.localStorage.setItem("tutorialComplete", request.status); window.localStorage.setItem('tutorialComplete', request.status);
break; break;
default: default:
console.warn("Unknown message type: <", type, ">"); console.warn('Unknown message type: <', type, '>');
break; break;
} }
return true; return true;
@@ -160,10 +160,10 @@ chrome.runtime.onConnect.addListener((port) => {
}); });
port.onMessage.addListener((request) => { port.onMessage.addListener((request) => {
const { type, roomId, roomPin } = request; const { type, roomId, roomPin } = request;
if (type === "INIT") { if (type === 'INIT') {
port.roomListener = firebase port.roomListener = firebase
.firestore() .firestore()
.collection("rooms") .collection('rooms')
.doc(roomId) .doc(roomId)
.onSnapshot( .onSnapshot(
(snap) => { (snap) => {
@@ -177,16 +177,14 @@ chrome.runtime.onConnect.addListener((port) => {
); );
port.userListener = firebase port.userListener = firebase
.firestore() .firestore()
.collection("rooms") .collection('rooms')
.doc(roomId) .doc(roomId)
.collection("users") .collection('users')
.onSnapshot( .onSnapshot(
(snap) => { (snap) => {
if (snap) { if (snap) {
const isAdmin = snap.docs const isAdmin = snap.docs
.filter( .filter((user) => user.id === firebase.auth().currentUser.uid)[0]
(user) => user.id === firebase.auth().currentUser.uid
)[0]
.data().admin; .data().admin;
const users = snap.docs.map((userSnap) => userSnap.data().name); const users = snap.docs.map((userSnap) => userSnap.data().name);
port.postMessage({ admin: isAdmin, users }); port.postMessage({ admin: isAdmin, users });
@@ -198,10 +196,10 @@ chrome.runtime.onConnect.addListener((port) => {
); );
port.messageListener = firebase port.messageListener = firebase
.firestore() .firestore()
.collection("rooms") .collection('rooms')
.doc(roomId) .doc(roomId)
.collection("messages") .collection('messages')
.orderBy("time") .orderBy('time')
.onSnapshot( .onSnapshot(
(snap) => { (snap) => {
if (snap) { if (snap) {
@@ -215,18 +213,18 @@ chrome.runtime.onConnect.addListener((port) => {
port.postMessage({ isError: true, ...err }); port.postMessage({ isError: true, ...err });
} }
); );
if (window.localStorage.getItem("parties")) { if (window.localStorage.getItem('parties')) {
var existing = JSON.parse(window.localStorage.getItem("parties")); var existing = JSON.parse(window.localStorage.getItem('parties'));
if (!(existing.filter((i) => i.name === roomId).length > 0)) { if (!(existing.filter((i) => i.name === roomId).length > 0)) {
existing.push({ existing.push({
name: roomId, name: roomId,
pin: roomPin, pin: roomPin,
}); });
window.localStorage.setItem("parties", JSON.stringify(existing)); window.localStorage.setItem('parties', JSON.stringify(existing));
} }
} else { } else {
window.localStorage.setItem( window.localStorage.setItem(
"parties", 'parties',
JSON.stringify([ JSON.stringify([
{ {
name: roomId, name: roomId,
app/public/manifest.json
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"name": "Watch Party", "name": "Watch Party",
"short_name": "WP", "short_name": "WP",
"version": "1.6.5", "version": "1.6.6",
"description": "Watch streamed content together.", "description": "Watch streamed content together.",
"background": { "background": {
"page": "background.html" "page": "background.html"
app/src/Api.js
+1 -1
View File
@@ -115,7 +115,7 @@ export const scrollThread = () => {
setTimeout(function () { setTimeout(function () {
const pcc = document.querySelector('.thread-wrapper'); const pcc = document.querySelector('.thread-wrapper');
if (pcc) pcc.scrollTop = pcc.scrollHeight; if (pcc) pcc.scrollTop = pcc.scrollHeight;
}, 500); }, 250);
}; };
export const getUserUid = async () => export const getUserUid = async () =>
app/src/App.js
+45 -87
View File
@@ -9,40 +9,34 @@ ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, U
CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION. COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
************************************************************************/ ************************************************************************/
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from 'react';
import Router from "route-lite"; import Router from 'route-lite';
import { import { Fab, createMuiTheme, ThemeProvider, Snackbar, Tooltip } from '@material-ui/core';
Fab, import Create from './Create';
createMuiTheme, import Loading from './Loading';
ThemeProvider, import firebase from 'firebase/app';
Snackbar, import 'firebase/firestore';
Tooltip, import Inactive from './Inactive';
} from "@material-ui/core";
import Create from "./Create";
import Loading from "./Loading";
import firebase from "firebase/app";
import "firebase/firestore";
import Inactive from "./Inactive";
import { import {
getUserUid, getUserUid,
getPlayerSource, getPlayerSource,
PLAYER_SOURCE, PLAYER_SOURCE,
getShowWPButton, getShowWPButton,
getTutorialStatus, getTutorialStatus,
} from "./Api"; } from './Api';
import Tutorial from "./Tutorial"; import Tutorial from './Tutorial';
const APP_VERSION = "1.6.5"; const APP_VERSION = '1.6.6';
const APP_VERSION_STRING = APP_VERSION.replace(/\./g, ""); const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
const darkTheme = createMuiTheme({ const darkTheme = createMuiTheme({
palette: { palette: {
type: "dark", type: 'dark',
primary: { primary: {
main: "#FF0000", main: '#FF0000',
}, },
secondary: { secondary: {
main: "#c0f300", main: '#c0f300',
}, },
}, },
}); });
@@ -55,44 +49,37 @@ const Routes = (props) => (
const resetResize = () => { const resetResize = () => {
const checkedX = 425; const checkedX = 425;
document.documentElement.style.setProperty("--party-width", `${checkedX}px`); document.documentElement.style.setProperty('--party-width', `${checkedX}px`);
document.documentElement.style.setProperty( document.documentElement.style.setProperty('--neg-party-width', `-${checkedX}px`);
"--neg-party-width",
`-${checkedX}px`
);
}; };
const doResize = (ev) => { const doResize = (ev) => {
const checkedX = const checkedX =
window.innerWidth - window.innerWidth -
Math.min( Math.min(window.innerWidth - 300, Math.max(window.innerWidth * 0.5, ev.clientX));
window.innerWidth - 300, document.documentElement.style.setProperty('--party-width', `${checkedX}px`);
Math.max(window.innerWidth * 0.5, ev.clientX) document.documentElement.style.setProperty('--neg-party-width', `-${checkedX}px`);
);
document.documentElement.style.setProperty("--party-width", `${checkedX}px`);
document.documentElement.style.setProperty(
"--neg-party-width",
`-${checkedX}px`
);
}; };
const stopResize = (ev) => { const stopResize = (ev) => {
document.documentElement.removeEventListener("mousemove", doResize, false); document.documentElement.removeEventListener('mousemove', doResize, false);
document.documentElement.removeEventListener("mouseup", stopResize, false); document.documentElement.removeEventListener('mouseup', stopResize, false);
}; };
const startResize = (ev) => { const startResize = (ev) => {
document.documentElement.addEventListener("mousemove", doResize, false); ev.preventDefault();
document.documentElement.addEventListener("mouseup", stopResize, false); ev.stopPropagation();
document.documentElement.addEventListener('mousemove', doResize, false);
document.documentElement.addEventListener('mouseup', stopResize, false);
}; };
const App = () => { const App = () => {
const closedNotification = { open: false, message: "" }; const closedNotification = { open: false, message: '' };
const [tutorialComponent, setTutorialComponent] = useState(null); const [tutorialComponent, setTutorialComponent] = useState(null);
const [showFab, setShowFab] = useState(false); const [showFab, setShowFab] = useState(false);
const [tutorialComplete, setTutorialComplete] = useState(false); const [tutorialComplete, setTutorialComplete] = useState(false);
const [status, setStatus] = useState({ active: false, message: "" }); const [status, setStatus] = useState({ active: false, message: '' });
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [notification, setNotification] = useState(closedNotification); const [notification, setNotification] = useState(closedNotification);
@@ -104,8 +91,8 @@ const App = () => {
getUserUid(); getUserUid();
firebase firebase
.firestore() .firestore()
.collection("server") .collection('server')
.doc("status") .doc('status')
.onSnapshot((statusSnap) => { .onSnapshot((statusSnap) => {
setStatus(statusSnap.data()); setStatus(statusSnap.data());
setLoading(false); setLoading(false);
@@ -113,9 +100,7 @@ const App = () => {
getShowWPButton().then((showWPButton) => { getShowWPButton().then((showWPButton) => {
setShowFab(showWPButton); setShowFab(showWPButton);
if (showWPButton === true) { if (showWPButton === true) {
document document.querySelector('.watch-party-fab').classList.remove('watch-party-fab-hidden');
.querySelector(".watch-party-fab")
.classList.remove("watch-party-fab-hidden");
} }
}); });
}, []); }, []);
@@ -123,45 +108,23 @@ const App = () => {
getTutorialStatus().then((v) => setTutorialComplete(v)); getTutorialStatus().then((v) => setTutorialComplete(v));
// HANDLE VISIBILITY STYLING // HANDLE VISIBILITY STYLING
const PartyRoutesWrapper = document.getElementById("party-routes-wrapper"); const PartyRoutesWrapper = document.getElementById('party-routes-wrapper');
if (visible) { if (visible) {
document.body.classList.add("visible"); document.body.classList.add('visible');
PartyRoutesWrapper && PartyRoutesWrapper.classList.add("visible"); PartyRoutesWrapper && PartyRoutesWrapper.classList.add('visible');
if (
getPlayerSource() === PLAYER_SOURCE.HBOMAX ||
(getPlayerSource() === PLAYER_SOURCE.HBONOW && !hasAttached)
) {
document.addEventListener(
"mousedown",
function (ev) {
if (document.body.querySelector("body.visible")) {
ev.preventDefault();
ev.stopPropagation();
ev.stopImmediatePropagation();
}
},
{ capture: true }
);
hasAttached = true;
}
if (getPlayerSource() === PLAYER_SOURCE.APPLE) { if (getPlayerSource() === PLAYER_SOURCE.APPLE) {
const appleTvPlayer = document.querySelector("apple-tv-plus-player"); const appleTvPlayer = document.querySelector('apple-tv-plus-player');
const takeoverContainer = appleTvPlayer.shadowRoot.querySelector( const takeoverContainer = appleTvPlayer.shadowRoot.querySelector('.takeover.container.show');
".takeover.container.show" if (takeoverContainer) takeoverContainer.style.maxWidth = 'var(--body-width)';
);
if (takeoverContainer)
takeoverContainer.style.maxWidth = "var(--body-width)";
} }
} else { } else {
if (getPlayerSource() === PLAYER_SOURCE.APPLE) { if (getPlayerSource() === PLAYER_SOURCE.APPLE) {
const appleTvPlayer = document.querySelector("apple-tv-plus-player"); const appleTvPlayer = document.querySelector('apple-tv-plus-player');
const takeoverContainer = appleTvPlayer.shadowRoot.querySelector( const takeoverContainer = appleTvPlayer.shadowRoot.querySelector('.takeover.container.show');
".takeover.container.show" if (takeoverContainer) takeoverContainer.style.maxWidth = 'none';
);
if (takeoverContainer) takeoverContainer.style.maxWidth = "none";
} }
document.body.classList.remove("visible"); document.body.classList.remove('visible');
PartyRoutesWrapper && PartyRoutesWrapper.classList.remove("visible"); PartyRoutesWrapper && PartyRoutesWrapper.classList.remove('visible');
} }
// HANDLE FULLSCREEN EVENT // HANDLE FULLSCREEN EVENT
@@ -178,7 +141,7 @@ const App = () => {
<ThemeProvider theme={darkTheme}> <ThemeProvider theme={darkTheme}>
<Snackbar <Snackbar
className="party-notification-container" className="party-notification-container"
anchorOrigin={{ vertical: "bottom", horizontal: "right" }} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
open={notification.open} open={notification.open}
onClose={() => setNotification(closedNotification)} onClose={() => setNotification(closedNotification)}
message={notification.message} message={notification.message}
@@ -198,17 +161,12 @@ const App = () => {
title="Resize Sidebar / Double Click To Reset" title="Resize Sidebar / Double Click To Reset"
aria-label="Resize Sidebar / Double Click To Reset" aria-label="Resize Sidebar / Double Click To Reset"
> >
<div <div onDoubleClick={resetResize} onMouseDown={startResize} id="party-width-dragger">
onDoubleClick={resetResize}
onMouseDown={startResize}
id="party-width-dragger"
>
|| ||
</div> </div>
</Tooltip> </Tooltip>
{loading && <Loading />} {loading && <Loading />}
{status[APP_VERSION_STRING] && {status[APP_VERSION_STRING] && status[APP_VERSION_STRING].active === true ? (
status[APP_VERSION_STRING].active === true ? (
<Routes <Routes
showFab={showFab} showFab={showFab}
resetTutorial={resetTutorial} resetTutorial={resetTutorial}
app/src/Chat.js
+4 -13
View File
@@ -31,6 +31,7 @@ import {
Paper, Paper,
Grid, Grid,
Slider, Slider,
LinearProgress,
} from '@material-ui/core'; } from '@material-ui/core';
import Thread from './Thread'; import Thread from './Thread';
import { import {
@@ -501,18 +502,6 @@ export default class Chat extends Component {
volumes, volumes,
} = this.state; } = this.state;
const alerts = [ const alerts = [
{
condition: () =>
getPlayerSource() === PLAYER_SOURCE.HBOMAX || getPlayerSource() === PLAYER_SOURCE.HBONOW,
message: 'Functionality may be buggy, HBO has a horrible design.',
},
{
condition: () =>
getPlayerSource() === PLAYER_SOURCE.APPLE ||
getPlayerSource() === PLAYER_SOURCE.FUNIMATION ||
getPlayerSource() === PLAYER_SOURCE.VIKI,
message: 'Functionality may be buggy, support on this site is in testing.',
},
{ {
condition: () => adminOnly, condition: () => adminOnly,
message: 'Party is currently in admin only mode.', message: 'Party is currently in admin only mode.',
@@ -783,10 +772,12 @@ export default class Chat extends Component {
} else return null; } else return null;
})} })}
</div> </div>
<Thread setReplyTo={this.setReplyTo} sentMessages={messages} />
<Thread <Thread
isSending={true}
setReplyTo={this.setReplyTo} setReplyTo={this.setReplyTo}
sendingMessages={sendingMessages}
sentMessages={messages} sentMessages={messages}
sendingMessages={sendingMessages}
/> />
<Paper <Paper
square square
app/src/Thread.css
+11 -2
View File
@@ -25,8 +25,13 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
margin-top: 1rem; margin-top: 1rem;
outline: none; outline: none;
} }
.thread-wrapper > div { .thread-wrapper.sending-wrapper {
padding-bottom: 30px; flex: unset;
padding-top: 10px;
margin-bottom: 0;
}
.thread-wrapper.sending-wrapper > div {
padding-bottom: 0px;
} }
.thread-item { .thread-item {
color: white; color: white;
@@ -276,11 +281,15 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
S E N D I N G S E N D I N G
M E S S A G E S M E S S A G E S
*/ */
.thread-item.my-message.sending-message {
margin-top: 0;
}
.thread-item.my-message.sending-message .thread-message .thread-overline { .thread-item.my-message.sending-message .thread-message .thread-overline {
display: none; display: none;
} }
.thread-item.my-message.sending-message .thread-message p, .thread-item.my-message.sending-message .thread-message p,
.thread-item.my-message.sending-message .thread-message img { .thread-item.my-message.sending-message .thread-message img {
margin: 0;
margin-left: 0 !important; margin-left: 0 !important;
margin-right: 0 !important; margin-right: 0 !important;
opacity: 0.2; opacity: 0.2;
app/src/Thread.js
+31 -6
View File
@@ -149,9 +149,9 @@ export default class Thread extends Component {
} }
getMessage(params) { getMessage(params) {
const { autoSizeWidth } = this.state; const { autoSizeWidth } = this.state;
const { sendingMessages, sentMessages, setReplyTo } = this.props; const { sentMessages, setReplyTo } = this.props;
const { userUid } = LocalData(); const { userUid } = LocalData();
const messages = [...sentMessages, ...sendingMessages]; const messages = sentMessages;
const msg = messages[params.index]; const msg = messages[params.index];
const msgIdx = params.index; const msgIdx = params.index;
return ( return (
@@ -190,9 +190,10 @@ export default class Thread extends Component {
); );
} }
render() { render() {
const { userUid } = LocalData();
const { autoSizeWidth } = this.state; const { autoSizeWidth } = this.state;
const { sendingMessages, sentMessages } = this.props; const { sentMessages, isSending, sendingMessages, setReplyTo } = this.props;
return ( return !isSending ? (
<AutoSizer style={{ flex: 1 }}> <AutoSizer style={{ flex: 1 }}>
{({ height, width }) => { {({ height, width }) => {
if (autoSizeWidth !== width) { if (autoSizeWidth !== width) {
@@ -200,7 +201,6 @@ export default class Thread extends Component {
this.listRef.current.recomputeRowHeights(); this.listRef.current.recomputeRowHeights();
this.setState({ autoSizeWidth: width }); this.setState({ autoSizeWidth: width });
} }
return ( return (
<List <List
className="thread-wrapper" className="thread-wrapper"
@@ -208,13 +208,38 @@ export default class Thread extends Component {
height={height} height={height}
width={width} width={width}
ref={this.listRef} ref={this.listRef}
rowCount={sendingMessages.length + sentMessages.length} estimatedRowSize={40}
rowCount={sentMessages.length}
rowHeight={({ index }) => cache.rowHeight({ index }) + 10} rowHeight={({ index }) => cache.rowHeight({ index }) + 10}
rowRenderer={this.getMessage} rowRenderer={this.getMessage}
/> />
); );
}} }}
</AutoSizer> </AutoSizer>
) : (
<div className="thread-wrapper sending-wrapper">
{sendingMessages.map((msg, msgIdx) => (
<div
id={msg.id || `sending-${msgIdx}`}
key={`sending-msg-${msgIdx}-item`}
className={this.getItemClassNames(msg.uid, userUid, msgIdx, sendingMessages, true)}
>
<div className="thread-name">{msg.name}</div>
{this.getReplyMessage(msg.replyTo, sentMessages)}
<div className="thread-message">
<div className="thread-overline">
<span>{this.getTimeString(msg.time)}</span>
<div className="thread-reply-icon">
<IconButton onClick={() => setReplyTo(msg)}>
<Reply />
</IconButton>
</div>
</div>
{this.getMessageTextOrImage(msg, null)}
</div>
</div>
))}
</div>
); );
} }
} }
app/src/index.css
+20 -15
View File
@@ -66,10 +66,6 @@ body.visible #party-width-dragger {
display: block; display: block;
} }
body.hbo.visible #party-width-dragger {
display: none !important;
}
body.netflix.visible .AkiraPlayer, /* NETFLIX */ body.netflix.visible .AkiraPlayer, /* NETFLIX */
body.hulu.visible .Player__container,/* HULU */ body.hulu.visible .Player__container,/* HULU */
body.amazon-prime.visible #dv-web-player.dv-player-fullscreen, /* AMAZON PRIME */ body.amazon-prime.visible #dv-web-player.dv-player-fullscreen, /* AMAZON PRIME */
@@ -80,6 +76,15 @@ body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td, /* GOOGLE PLAY MOVIES *
body.viki.visible div.video-player /* VIKI */ { body.viki.visible div.video-player /* VIKI */ {
max-width: var(--body-width) !important; max-width: var(--body-width) !important;
} }
body.hulu #party_wrapper *,
body.peacock #party_wrapper *,
body.disney #party_wrapper *,
body.apple #party_wrapper *,
body.funimation #party_wrapper * {
box-sizing: inherit;
}
/* HULU MINIMIZED VIDEO */ /* HULU MINIMIZED VIDEO */
body.hulu.visible #__player__ .Player__container.Player__container--modal { body.hulu.visible #__player__ .Player__container.Player__container--modal {
right: calc(var(--party-width) + 2rem) !important; right: calc(var(--party-width) + 2rem) !important;
@@ -96,6 +101,12 @@ body.amazon-prime #party-routes-wrapper {
body.disney #hudson-wrapper { body.disney #hudson-wrapper {
left: 0; left: 0;
} }
body.disney #party_wrapper * {
box-sizing: border-box;
}
body.disney #party_wrapper .party-chat-container * {
box-sizing: inherit;
}
/* YOUTUBE VIDEO SIZING FIX */ /* YOUTUBE VIDEO SIZING FIX */
body.youtube.visible video { body.youtube.visible video {
max-width: 100%; max-width: 100%;
@@ -228,12 +239,8 @@ body.apple .thread-wrapper .ReactVirtualized__Grid__innerScrollContainer {
box-sizing: initial !important; box-sizing: initial !important;
} }
body.hulu #party_wrapper *, body.funimation.visible header {
body.peacock #party_wrapper *, z-index: 99 !important;
body.disney #party_wrapper *,
body.apple #party_wrapper *,
body.funimation #party_wrapper * {
box-sizing: inherit;
} }
#party-loading { #party-loading {
@@ -587,18 +594,16 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
} }
.alerts-container { .alerts-container {
margin: 5px 0; margin: 0;
top: 0; top: 0;
padding: 5px 0; padding: 0;
z-index: 999 !important; z-index: 999 !important;
background: #1b1b1b; background: #1b1b1b;
} }
.alert-card { .alert-card {
border: none !important; border: none !important;
border-radius: 26px !important; border-radius: 26px !important;
margin: 0px 10px !important; margin: 5px !important;
margin-bottom: 5px !important;
} }
.alert-card-content { .alert-card-content {
app/src/index.js
+21 -7
View File
@@ -14,6 +14,7 @@ import ReactDOM from 'react-dom';
import firebase from 'firebase/app'; import firebase from 'firebase/app';
import App from './App'; import App from './App';
import './index.css'; import './index.css';
import 'react-virtualized/styles.css';
import { PLAYER_SOURCE, getPlayerSource } from './Api'; import { PLAYER_SOURCE, getPlayerSource } from './Api';
const firebaseConfig = { const firebaseConfig = {
@@ -64,9 +65,6 @@ switch (getPlayerSource()) {
{ capture: true } { capture: true }
); );
document.body.classList.add('hulu'); document.body.classList.add('hulu');
const ds = document.createElement('script');
ds.text = `window.doquery=function(){window.huluPlayer=window.queryObjects(window.HuluMediaPlayer);}`;
document.head.appendChild(ds);
break; break;
case PLAYER_SOURCE.AMAZON: case PLAYER_SOURCE.AMAZON:
document.body.classList.add('amazon-prime'); document.body.classList.add('amazon-prime');
@@ -79,11 +77,27 @@ switch (getPlayerSource()) {
break; break;
case PLAYER_SOURCE.HBONOW: case PLAYER_SOURCE.HBONOW:
case PLAYER_SOURCE.HBOMAX: case PLAYER_SOURCE.HBOMAX:
const hboClickInject = `var hboInputFix=function(ev){if(ev.target.tagName==='INPUT'||ev.target.tagName==='TEXTAREA'){ev.target.focus();}ev.stopImmediatePropagation();ev.stopPropagation();};document.addEventListener('keydown',hboInputFix,{capture:true});var hboClickFix=function(ev){if(document.querySelector('body.visible')){if(ev.clientX > window.innerWidth - (parseInt(document.documentElement.style.getPropertyValue('--party-width').slice(0,-2)) + 50) ){if(ev.target.tagName==='INPUT'||ev.target.tagName==='TEXTAREA'){ev.target.focus();}ev.preventDefault();ev.stopPropagation();ev.stopImmediatePropagation();}}};document.addEventListener("mousedown",hboClickFix,{capture:true});`;
const hboClickInjectScript = document.createElement('script');
hboClickInjectScript.text = hboClickInject;
document.head.appendChild(hboClickInjectScript);
document.body.classList.add('hbo'); document.body.classList.add('hbo');
window.addEventListener(
'mousedown',
(ev) => {
const partyWrapper = document.querySelector('#party_wrapper');
const tutorialWrapper = document.querySelector('.watch-party-tutorial');
if (
(partyWrapper && partyWrapper.contains(ev.target)) ||
(tutorialWrapper && tutorialWrapper.contains(ev.target))
) {
if (ev.target.id !== 'party-width-dragger') {
ev.stopImmediatePropagation();
ev.preventDefault();
}
if (ev.target.tagName === 'INPUT' || ev.target.tagName === 'TEXTAREA') {
ev.target.focus();
}
}
},
{ capture: true }
);
break; break;
case PLAYER_SOURCE.PEACOCK: case PLAYER_SOURCE.PEACOCK:
document.body.classList.add('peacock'); document.body.classList.add('peacock');
functions/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "watch-party-api", "name": "watch-party-api",
"version": "1.6.5", "version": "1.6.6",
"description": "Cloud Functions for Watch Party", "description": "Cloud Functions for Watch Party",
"scripts": { "scripts": {
"lint": "eslint .", "lint": "eslint .",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "watch-party", "name": "watch-party",
"version": "1.6.5", "version": "1.6.6",
"description": "Watch Party", "description": "Watch Party",
"scripts": { "scripts": {
"start": "firebase emulators:start", "start": "firebase emulators:start",
website/changes/v1.6.6/index.html
+118
View File
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<!-----------------------------------------------------------------------
Copyright (C) Ayushya Amitabh - All Rights Reserved
Unauthorized copying of this file, via any medium is strictly prohibited
Proprietary and confidential
Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020
https://www.chromewatchparty.com/copyright
=========================================================================
ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, UNLESS OTHERWISE
CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
------------------------------------------------------------------------->
<html>
<head>
<link rel="apple-touch-icon" sizes="57x57" href="../../icons/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="../../icons/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="../../icons/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="../../icons/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="../../icons/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="../../icons/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="../../icons/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="../../icons/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="../../icons/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="../../icons/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="../../icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="../../icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="../../icons/favicon-16x16.png" />
<link rel="icon" href="../../icons/favicon.ico" />
<link rel="manifest" href="../../manifest.json" />
<meta name="msapplication-TileImage" content="../../icons/ms-icon-144x144.png" />
<link rel="stylesheet" type="text/css" href="../../font.css" />
<link rel="stylesheet" type="text/css" href="../../styles/index.css" />
<script src="../../scripts/Stickied.js"></script>
<title>Watch Party | V1.6.6</title>
</head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-87498806-2');
</script>
<body class="copyright welcome">
<div class="landing">
<div class="logo-circle"></div>
<div class="logo-circle"></div>
<div class="logo-circle"></div>
<h1 data-font="serif" class="logo duplicate"><a href="../../">WATCH PARTY</a> | V1.6.6</h1>
<h1 data-font="serif" class="logo"><a href="../../">WATCH PARTY</a> | V1.6.6</h1>
<h5 data-font="sans" class="logo-tag">
WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
</h5>
</div>
<div class="features">
<p data-font="sans-bold" class="title subtitle">CHANGES MADE IN FEATURES</p>
<div class="feature-card">
<div class="feature-icon" id="hideable">
<video loop muted autoplay src="../../media/features/Hideable.mp4"></video>
</div>
<p data-font="sans" class="feature-text">HBO related sidebar changes</p>
</div>
<div class="feature-card">
<div class="feature-icon" id="hideable">
<video loop muted autoplay src="../../media/features/Chat.mp4"></video>
</div>
<p data-font="sans" class="feature-text">Fix Chat rendering & performance</p>
</div>
</div>
<div id="tips" class="landing">
<p data-font="sans-bold" class="title">LISTED CHANGE DETAILS</p>
<div class="tip">
<p data-font="sans-bold">Add resizeable tab to HBO and fix smart click through sidebar</p>
</div>
<div class="tip">
<p data-font="sans-bold">Fix Chat, remove glitchy jump, show sending messages</p>
</div>
<a
data-font="sans-bold"
href="mailto:admin@chromewatchparty.com?subject=Question About V1.6.6 Changes"
class="link-button"
>
Have Questions About These Changes?
</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>, & <a href="https://dolby.io/">DOLBY VOXEET</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="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>
<a data-font="sans-bold" href="../../welcome/" class="link-button"> Getting Started </a>
<a data-font="sans-bold" href="../../changes/" class="link-button"> Changelog </a>
</footer>
</body>
</html>