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

v1.6.2/cleanup

Browse Source 
- remove api v2
- linting
This commit is contained in:
ayushya
2020-08-14 10:57:38 -04:00
parent aaf2506f78
commit 56cd151a04
32 changed files with 476 additions and 1437 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/App.js
+38 -59
View File
@@ -9,33 +9,27 @@ 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
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
************************************************************************/
import React, { useState, useEffect } from "react";
import Router from "route-lite";
import {
Fab,
createMuiTheme,
ThemeProvider,
Snackbar,
Tooltip,
} 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 { getUserUid, getPlayerSource, PLAYER_SOURCE } from "./Api";
import React, { useState, useEffect } from 'react';
import Router from 'route-lite';
import { Fab, createMuiTheme, ThemeProvider, Snackbar, Tooltip } 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 { getUserUid, getPlayerSource, PLAYER_SOURCE } from './Api';
const APP_VERSION = "1.6.2";
const APP_VERSION_STRING = APP_VERSION.replace(/\./g, "");
const APP_VERSION = '1.6.2';
const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
const darkTheme = createMuiTheme({
palette: {
type: "dark",
type: 'dark',
primary: {
main: "#FF0000",
main: '#FF0000',
},
secondary: {
main: "#c0f300",
main: '#c0f300',
},
},
});
@@ -48,41 +42,32 @@ const Routes = (props) => (
const resetResize = () => {
const checkedX = 400;
document.documentElement.style.setProperty("--party-width", `${checkedX}px`);
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 doResize = (ev) => {
const checkedX =
window.innerWidth -
Math.min(
window.innerWidth - 300,
Math.max(window.innerWidth * 0.5, ev.clientX)
);
document.documentElement.style.setProperty("--party-width", `${checkedX}px`);
document.documentElement.style.setProperty(
"--neg-party-width",
`-${checkedX}px`
);
Math.min(window.innerWidth - 300, Math.max(window.innerWidth * 0.5, ev.clientX));
document.documentElement.style.setProperty('--party-width', `${checkedX}px`);
document.documentElement.style.setProperty('--neg-party-width', `-${checkedX}px`);
};
const stopResize = (ev) => {
document.documentElement.removeEventListener("mousemove", doResize, false);
document.documentElement.removeEventListener("mouseup", stopResize, false);
document.documentElement.removeEventListener('mousemove', doResize, false);
document.documentElement.removeEventListener('mouseup', stopResize, false);
};
const startResize = (ev) => {
document.documentElement.addEventListener("mousemove", doResize, false);
document.documentElement.addEventListener("mouseup", stopResize, false);
document.documentElement.addEventListener('mousemove', doResize, false);
document.documentElement.addEventListener('mouseup', stopResize, false);
};
const App = () => {
const closedNotification = { open: false, message: "" };
const closedNotification = { open: false, message: '' };
const [status, setStatus] = useState({ active: false, message: "" });
const [status, setStatus] = useState({ active: false, message: '' });
const [visible, setVisible] = useState(false);
const [loading, setLoading] = useState(false);
const [notification, setNotification] = useState(closedNotification);
@@ -94,8 +79,8 @@ const App = () => {
getUserUid();
firebase
.firestore()
.collection("server")
.doc("status")
.collection('server')
.doc('status')
.onSnapshot((statusSnap) => {
setStatus(statusSnap.data());
setLoading(false);
@@ -103,19 +88,18 @@ const App = () => {
}, []);
// HANDLE VISIBILITY STYLING
const PartyRoutesWrapper = document.getElementById("party-routes-wrapper");
const PartyRoutesWrapper = document.getElementById('party-routes-wrapper');
if (visible) {
document.body.classList.add("visible");
PartyRoutesWrapper && PartyRoutesWrapper.classList.add("visible");
document.body.classList.add('visible');
PartyRoutesWrapper && PartyRoutesWrapper.classList.add('visible');
if (
!hasAttached &&
(getPlayerSource() === PLAYER_SOURCE.HBOMAX ||
getPlayerSource() === PLAYER_SOURCE.HBONOW)
(getPlayerSource() === PLAYER_SOURCE.HBOMAX || getPlayerSource() === PLAYER_SOURCE.HBONOW)
) {
document.addEventListener(
"mousedown",
'mousedown',
function (ev) {
if (document.body.querySelector("body.visible")) {
if (document.body.querySelector('body.visible')) {
ev.preventDefault();
ev.stopPropagation();
ev.stopImmediatePropagation();
@@ -126,8 +110,8 @@ const App = () => {
hasAttached = true;
}
} else {
document.body.classList.remove("visible");
PartyRoutesWrapper && PartyRoutesWrapper.classList.remove("visible");
document.body.classList.remove('visible');
PartyRoutesWrapper && PartyRoutesWrapper.classList.remove('visible');
}
// HANDLE FULLSCREEN EVENT
@@ -139,7 +123,7 @@ const App = () => {
<ThemeProvider theme={darkTheme}>
<Snackbar
className="party-notification-container"
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
open={notification.open}
onClose={() => setNotification(closedNotification)}
message={notification.message}
@@ -152,17 +136,12 @@ const App = () => {
title="Resize Sidebar / Double Click To Reset"
aria-label="Resize Sidebar / Double Click To Reset"
>
<div
onDoubleClick={resetResize}
onMouseDown={startResize}
id="party-width-dragger"
>
<div onDoubleClick={resetResize} onMouseDown={startResize} id="party-width-dragger">
||
</div>
</Tooltip>
{loading && <Loading />}
{status[APP_VERSION_STRING] &&
status[APP_VERSION_STRING].active === true ? (
{status[APP_VERSION_STRING] && status[APP_VERSION_STRING].active === true ? (
<Routes
updateLoading={setLoading}
notify={(message) => setNotification({ open: true, message })}
app/src/CallManager.js
+21 -21
View File
@@ -9,14 +9,14 @@ 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
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
************************************************************************/
import VoxeetSDK from "@voxeet/voxeet-web-sdk";
import VoxeetSDK from '@voxeet/voxeet-web-sdk';
import {
GetVoxeetTokenApi,
GetRefreshedVoxeetTokenApi,
LocalData,
UpdateVoxeetApi,
updateLocalData,
} from "./Api";
} from './Api';
export default class CallManager {
constructor(listener, notify) {
@@ -36,7 +36,7 @@ export default class CallManager {
if (onCall === true) this.leaveCall();
else this.boot(conference);
} catch (e) {
this.notify("Uh oh something went wrong, try rejoining the call.");
this.notify('Uh oh something went wrong, try rejoining the call.');
}
}
toggleMute(muted) {
@@ -52,14 +52,14 @@ export default class CallManager {
.fetch(conference._id)
.then(this.joinCall)
.catch((err) => {
console.error("Failed to fetch conference", err);
console.error('Failed to fetch conference', err);
this.startCall();
});
} else if (opened && !conference) {
this.startCall();
} else {
this.listener({ onCall: false, muted: false, callActionPending: false });
console.error("Unable to open Voxeet Session");
console.error('Unable to open Voxeet Session');
}
}
async startCall() {
@@ -89,7 +89,7 @@ export default class CallManager {
muted: false,
callActionPending: false,
});
console.error("Update Voxeet API Error", err);
console.error('Update Voxeet API Error', err);
return false;
}
});
@@ -101,11 +101,11 @@ export default class CallManager {
muted: false,
callActionPending: false,
});
console.error("Failed to update party Voxeet");
console.error('Failed to update party Voxeet');
}
});
} else {
this.notify("Ask your party admin to start the call.");
this.notify('Ask your party admin to start the call.');
this.leaveCall();
}
}
@@ -119,8 +119,8 @@ export default class CallManager {
muted: false,
callActionPending: false,
});
this.notify("Unable to join call. Try again in a moment.");
console.error("Error joining call", e);
this.notify('Unable to join call. Try again in a moment.');
console.error('Error joining call', e);
return true;
});
// Leave changes as comment for later
@@ -143,9 +143,9 @@ export default class CallManager {
});
return true;
} catch (error) {
console.error("Error Opening Voxeet Session", error);
console.error('Error Opening Voxeet Session', error);
}
console.error("Session not initialized");
console.error('Session not initialized');
return false;
}
return true;
@@ -158,14 +158,14 @@ export default class CallManager {
this.listener({ usersOnCall });
}
async initialize() {
VoxeetSDK.conference.on("participantAdded", () => this.usersListHandle());
VoxeetSDK.conference.on("participantUpdated", () => this.usersListHandle());
VoxeetSDK.conference.on('participantAdded', () => this.usersListHandle());
VoxeetSDK.conference.on('participantUpdated', () => this.usersListHandle());
VoxeetSDK.conference.on("joined", () => {
VoxeetSDK.conference.on('joined', () => {
this.listener({ onCall: true, callActionPending: false });
});
VoxeetSDK.conference.on("left", () => {
VoxeetSDK.conference.on('left', () => {
this.listener({
onCall: false,
callActionPending: false,
@@ -173,11 +173,11 @@ export default class CallManager {
});
});
VoxeetSDK.conference.on("streamAdded", (participant, stream) => {
VoxeetSDK.conference.on('streamAdded', (participant, stream) => {
this.listener({ callActionPending: false });
});
VoxeetSDK.conference.on("streamRemoved", (participant, stream) => {
VoxeetSDK.conference.on('streamRemoved', (participant, stream) => {
this.listener({ callActionPending: false });
});
@@ -195,11 +195,11 @@ export default class CallManager {
this.updateTokens(access_token, refresh_token);
VoxeetSDK.initializeToken(access_token, refresh_token);
} else {
console.error("Get Voxeet Token API Result Error", tokenResult);
console.error('Get Voxeet Token API Result Error', tokenResult);
}
})
.catch((err) => {
console.error("Get Voxeet Token API error", err);
console.error('Get Voxeet Token API error', err);
});
} else {
VoxeetSDK.initializeToken(this.__accessToken, this.__refreshToken);
@@ -215,7 +215,7 @@ export default class CallManager {
resolve(access_token);
})
.catch((err) => {
console.error("Get Voxeet Token API error", err);
console.error('Get Voxeet Token API error', err);
reject(err);
});
});
app/src/Chat.js
+113 -190
View File
@@ -10,7 +10,7 @@ CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
************************************************************************/
/*global chrome */
import React, { Component } from "react";
import React, { Component } from 'react';
import {
Typography,
TextField,
@@ -31,8 +31,8 @@ import {
Paper,
Grid,
Slider,
} from "@material-ui/core";
import Thread from "./Thread";
} from '@material-ui/core';
import Thread from './Thread';
import {
SendMessageApi,
LeaveRoomApi,
@@ -46,7 +46,7 @@ import {
UpdateAdminOnly,
scrollThread,
removeLocalData,
} from "./Api";
} from './Api';
import {
Send,
ExitToApp as Exit,
@@ -68,21 +68,21 @@ import {
VolumeDown,
VolumeUp,
CancelRounded,
} from "@material-ui/icons";
import Create from "./Create";
import { goTo } from "route-lite";
import CallManager from "./CallManager";
import VideoListener from "./VideoListener";
import ReactGiphySearchbox from "react-giphy-searchbox";
} from '@material-ui/icons';
import Create from './Create';
import { goTo } from 'route-lite';
import CallManager from './CallManager';
import VideoListener from './VideoListener';
import ReactGiphySearchbox from 'react-giphy-searchbox';
// const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
export default class Chat extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
name: '',
messages: [],
newMessage: "",
newMessage: '',
admin: null,
adminOnly: false,
adminModeUpdate: false,
@@ -94,14 +94,10 @@ export default class Chat extends Component {
callActionPending: false,
menuPopover: true,
allowChatNotification:
LocalData().allowChatNotification !== undefined
? LocalData().allowChatNotification
: true,
LocalData().allowChatNotification !== undefined ? LocalData().allowChatNotification : true,
isFullscreen: document.fullscreen,
allowAutoRejoin:
LocalData().allowAutoRejoin !== undefined
? LocalData().allowAutoRejoin
: true,
LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
replyTo: null,
sendingMessages: [],
volumes: {},
@@ -127,21 +123,15 @@ export default class Chat extends Component {
props.nameSelectors
);
this.updateAllowAutoRejoin = this.updateAllowAutoRejoin.bind(this);
this.updateAllowChatNotification = this.updateAllowChatNotification.bind(
this
);
this.mCallManager = new CallManager(
this.callEventListener,
this.props.notify
);
this.updateAllowChatNotification = this.updateAllowChatNotification.bind(this);
this.mCallManager = new CallManager(this.callEventListener, this.props.notify);
}
componentDidMount() {
// EVENT CAPTURE FOR ENTER TO SEND
window.onkeypress = (ev) => {
if (ev.code === "Enter") {
if (ev.target === document.getElementById("chat-message-box-input")) {
if (ev.shiftKey === false && this.state.gif === true)
ev.preventDefault();
if (ev.code === 'Enter') {
if (ev.target === document.getElementById('chat-message-box-input')) {
if (ev.shiftKey === false && this.state.gif === true) ev.preventDefault();
if (ev.shiftKey === false && this.state.gif === false) {
ev.preventDefault();
this.sendMessageInvoker();
@@ -151,15 +141,12 @@ export default class Chat extends Component {
};
// FULLSCREEN LISTENER
document.addEventListener("fullscreenchange", (ev) => {
document.addEventListener('fullscreenchange', (ev) => {
this.setState({ isFullscreen: document.fullscreen });
});
// ACTIVE TRACKER
if (
LocalData().allowAutoRejoin === undefined ||
LocalData().allowAutoRejoin === null
) {
if (LocalData().allowAutoRejoin === undefined || LocalData().allowAutoRejoin === null) {
updateLocalData({ allowAutoRejoin: this.state.allowAutoRejoin });
}
if (this.state.allowAutoRejoin === true) {
@@ -178,14 +165,14 @@ export default class Chat extends Component {
this.port = chrome.runtime.connect({ name: LocalData().partyName });
// Initialize listener
this.port.postMessage({
type: "INIT",
type: 'INIT',
roomId: LocalData().partyName,
roomPin: LocalData().partyPin,
});
// Listener
this.port.onMessage.addListener((response) => {
if (response.isError === true) {
this.props.notify("Uh oh. Got lost from the party.");
this.props.notify('Uh oh. Got lost from the party.');
goTo(Create, this.props);
return;
}
@@ -195,21 +182,13 @@ export default class Chat extends Component {
}
// IF CHAT IS HIDDEN AND ALLOWS NOTIFICATION
if (
!document.querySelector("body.visible") &&
this.state.allowChatNotification === true
) {
if (
response.messages &&
response.messages.length !== this.state.messages.length
) {
if (!document.querySelector('body.visible') && this.state.allowChatNotification === true) {
if (response.messages && response.messages.length !== this.state.messages.length) {
const lastMessage = response.messages[response.messages.length - 1];
if (lastMessage.uid !== "<system>") {
if (lastMessage.uid !== '<system>') {
this.props.notify(
`${lastMessage.name}${
lastMessage.type === "giphy"
? " sent a gif."
: ": " + lastMessage.text
lastMessage.type === 'giphy' ? ' sent a gif.' : ': ' + lastMessage.text
}`
);
}
@@ -225,7 +204,7 @@ export default class Chat extends Component {
// GIPHY IPC
const giphyInject = `var giphySearchInteraction=function(e){if(e.source===window){const{data}=e;if(data.watchPartyDirection==='TO_SCRIPT'){if(data.type==='WATCH_PARTY_SEARCH_GIF'){const giphyInput=document.querySelector('.giphy-search-form input');if(giphyInput){giphyInput.value=data.value;giphyInput.dispatchEvent(new Event('change',{bubbles:true}))}}}}};window.addEventListener("message",giphySearchInteraction);`;
const giphyInjectScript = document.createElement("script");
const giphyInjectScript = document.createElement('script');
giphyInjectScript.text = giphyInject;
document.head.appendChild(giphyInjectScript);
@@ -277,14 +256,14 @@ export default class Chat extends Component {
}).catch((err) => {
this.props.updateLoading(false);
this.props.notify(err.message || err.statusText);
console.error("Sync Party API error", err);
console.error('Sync Party API error', err);
});
} else {
this.mVideoListener.start();
}
}
endParty() {
this.props.notify("Ending party...");
this.props.notify('Ending party...');
this.props.updateLoading(true);
const data = {
partyName: LocalData().partyName,
@@ -298,20 +277,20 @@ export default class Chat extends Component {
);
DeleteRoomApi(data)
.then((res) => {
this.props.notify("Ended party");
removeLocalData("partyPin");
removeLocalData("partyName");
this.props.notify('Ended party');
removeLocalData('partyPin');
removeLocalData('partyName');
goTo(Create, this.props);
this.props.updateLoading(false);
})
.catch((err) => {
this.props.updateLoading(false);
this.props.notify(err.message || err.statusText);
console.error("End Party API error", err);
console.error('End Party API error', err);
});
}
leaveParty() {
this.props.notify("Leaving party...");
this.props.notify('Leaving party...');
this.props.updateLoading(true);
const data = {
partyName: LocalData().partyName,
@@ -326,30 +305,28 @@ export default class Chat extends Component {
);
LeaveRoomApi(data)
.then((res) => {
this.props.notify("Left party");
removeLocalData("partyPin");
removeLocalData("partyName");
this.props.notify('Left party');
removeLocalData('partyPin');
removeLocalData('partyName');
goTo(Create, this.props);
this.props.updateLoading(false);
})
.catch((err) => {
this.props.updateLoading(false);
this.props.notify(err.message || err.statusText);
console.error("End Party API error", err);
console.error('End Party API error', err);
});
}
shareParty() {
const el = document.createElement("textarea");
el.value = `Join my party on Watch Party!\nParty Name: ${
LocalData().partyName
}\nParty Pin: ${LocalData().partyPin}\n${
window.location.href
}\n---\nGet Watch Party at https:\\\\get.chromewatchparty.com`;
const el = document.createElement('textarea');
el.value = `Join my party on Watch Party!\nParty Name: ${LocalData().partyName}\nParty Pin: ${
LocalData().partyPin
}\n${window.location.href}\n---\nGet Watch Party at https:\\\\get.chromewatchparty.com`;
document.body.appendChild(el);
el.select();
document.execCommand("copy");
document.execCommand('copy');
document.body.removeChild(el);
this.props.notify("Copied party invitation");
this.props.notify('Copied party invitation');
}
sendMessage(message) {
const { sendingMessages } = this.state;
@@ -360,9 +337,9 @@ export default class Chat extends Component {
uid: LocalData().userUid,
text: message,
time: new Date(),
type: "",
type: '',
};
if (this.state.gif === true) data.type = "giphy";
if (this.state.gif === true) data.type = 'giphy';
if (this.state.replyTo !== null) data.replyTo = this.state.replyTo.id;
sendingMessages.push(data);
this.setState({
@@ -383,7 +360,7 @@ export default class Chat extends Component {
this.setState({ sendingMessages: sm });
scrollThread();
this.props.notify(err.message || err.statusText);
console.error("Send Message API error", err);
console.error('Send Message API error', err);
});
this.setState({ replyTo: null });
scrollThread();
@@ -391,10 +368,10 @@ export default class Chat extends Component {
sendMessageInvoker(overrideMessage) {
if (overrideMessage) this.sendMessage(overrideMessage);
else {
const trim = this.state.newMessage.replace(/^\s+|\s+$/g, "");
if (trim !== "") this.sendMessage(trim);
const trim = this.state.newMessage.replace(/^\s+|\s+$/g, '');
if (trim !== '') this.sendMessage(trim);
}
this.setState({ newMessage: "" });
this.setState({ newMessage: '' });
}
gifClick(iGif) {
this.sendMessageInvoker(iGif.images.original.url);
@@ -403,29 +380,29 @@ export default class Chat extends Component {
const { onCall, conference, admin, adminOnly } = this.state;
if (window.navigator && onCall === false) {
try {
const overlay = document.createElement("div");
const overlay = document.createElement('div');
overlay.innerHTML = `
<div id="mic-highlight"></div>
<h4 id="mic-text">Grant Mic Permission</h4>
`;
overlay.id = "mic-permission-overlay";
overlay.id = 'mic-permission-overlay';
document.body.appendChild(overlay);
window.navigator
.getUserMedia({
audio: true,
})
.then(() => {
document.getElementById("mic-permission-overlay").remove();
document.getElementById('mic-permission-overlay').remove();
this.mCallManager.toggleCall(onCall, conference, admin, adminOnly);
})
.catch(() => {
document.getElementById("mic-permission-overlay").remove();
document.getElementById('mic-permission-overlay').remove();
this.props.notify(
"Check your mic permission for this website. You can modify site permission by clicking on the lock icon in the top left."
'Check your mic permission for this website. You can modify site permission by clicking on the lock icon in the top left.'
);
});
} catch (err) {
console.error("Handle Phone Call Error", err);
console.error('Handle Phone Call Error', err);
}
} else this.mCallManager.toggleCall(onCall, conference, admin, adminOnly);
}
@@ -461,7 +438,7 @@ export default class Chat extends Component {
adminOnly: !this.state.adminOnly,
}).catch((err) => {
this.props.notify(err.message || err.statusText);
console.error("Update Admin Only API error", err);
console.error('Update Admin Only API error', err);
});
}
setReplyTo(message) {
@@ -473,7 +450,7 @@ export default class Chat extends Component {
getReplyToContent() {
const { replyTo } = this.state;
if (replyTo) {
if (replyTo.type === "giphy") {
if (replyTo.type === 'giphy') {
return <img alt="gif" src={replyTo.text} />;
}
return (
@@ -485,7 +462,7 @@ export default class Chat extends Component {
return null;
}
setVideoVolume(v, id) {
const audioOuts = document.querySelectorAll("audio.vxt-audio");
const audioOuts = document.querySelectorAll('audio.vxt-audio');
if (audioOuts.length > 0) {
audioOuts.forEach((el) => {
if (el.id === `audio-${id}`) {
@@ -522,23 +499,20 @@ export default class Chat extends Component {
const alerts = [
{
condition: () =>
getPlayerSource() === PLAYER_SOURCE.HBOMAX ||
getPlayerSource() === PLAYER_SOURCE.HBONOW,
message: "Functionality may be buggy, HBO has a horrible design.",
getPlayerSource() === PLAYER_SOURCE.HBOMAX || getPlayerSource() === PLAYER_SOURCE.HBONOW,
message: 'Functionality may be buggy, HBO has a horrible design.',
},
{
condition: () => getPlayerSource() === PLAYER_SOURCE.GOOGLEPLAY,
message:
"Functionality may be buggy, support on this site is in testing.",
message: 'Functionality may be buggy, support on this site is in testing.',
},
{
condition: () => getPlayerSource() === PLAYER_SOURCE.CRUNCHYROLL,
message:
"Functionality may be buggy, support on this site is in testing.",
message: 'Functionality may be buggy, support on this site is in testing.',
},
{
condition: () => adminOnly,
message: "Party is currently in admin only mode.",
message: 'Party is currently in admin only mode.',
},
];
return (
@@ -565,12 +539,7 @@ export default class Chat extends Component {
>
WATCH PARTY
</Typography>
<Typography
color="textPrimary"
className="room-title"
variant="h4"
gutterBottom
>
<Typography color="textPrimary" className="room-title" variant="h4" gutterBottom>
{name}
</Typography>
</div>
@@ -579,9 +548,9 @@ export default class Chat extends Component {
<TextField
className="share-textbox"
label="Party Details"
value={`Party Name: ${LocalData().partyName}\nParty Pin: ${
LocalData().partyPin
}\n${window.location.href}`}
value={`Party Name: ${LocalData().partyName}\nParty Pin: ${LocalData().partyPin}\n${
window.location.href
}`}
multiline
rowsMax={2}
variant="outlined"
@@ -608,19 +577,13 @@ export default class Chat extends Component {
color="secondary"
>
<Button onClick={this.leaveParty} startIcon={<Exit />}>
<Typography
variant="caption"
className="party-control-button-text"
>
<Typography variant="caption" className="party-control-button-text">
Leave
</Typography>
</Button>
{admin && (
<Button onClick={this.endParty} startIcon={<Delete />}>
<Typography
variant="caption"
className="party-control-button-text"
>
<Typography variant="caption" className="party-control-button-text">
End
</Typography>
</Button>
@@ -633,17 +596,15 @@ export default class Chat extends Component {
checked={allowChatNotification}
onChange={this.updateAllowChatNotification}
name="allowChatNotification"
color={allowChatNotification ? "secondary" : "primary"}
color={allowChatNotification ? 'secondary' : 'primary'}
/>
}
label={
<span>
Allow chat notification when side panel is closed
<br />
<span style={{ color: "#8a8a8a" }}>
{allowChatNotification
? "Notifications Enabled"
: "Notifications Disabled"}
<span style={{ color: '#8a8a8a' }}>
{allowChatNotification ? 'Notifications Enabled' : 'Notifications Disabled'}
</span>
</span>
}
@@ -656,17 +617,15 @@ export default class Chat extends Component {
checked={allowAutoRejoin}
onChange={this.updateAllowAutoRejoin}
name="allowAutoRejoin"
color={allowAutoRejoin ? "secondary" : "primary"}
color={allowAutoRejoin ? 'secondary' : 'primary'}
/>
}
label={
<span>
Allow Watch Party to auto rejoin (within 1 minute)
<br />
<span style={{ color: "#8a8a8a" }}>
{allowAutoRejoin
? "Auto Rejoin Enabled"
: "Auto Rejoin Disabled"}
<span style={{ color: '#8a8a8a' }}>
{allowAutoRejoin ? 'Auto Rejoin Enabled' : 'Auto Rejoin Disabled'}
</span>
</span>
}
@@ -680,7 +639,7 @@ export default class Chat extends Component {
checked={adminOnly}
onChange={this.updateAdminOnly}
name="adminOnly"
color={adminOnly ? "secondary" : "primary"}
color={adminOnly ? 'secondary' : 'primary'}
disabled={adminModeUpdate}
/>
}
@@ -688,53 +647,38 @@ export default class Chat extends Component {
<span>
Admin Only Mode
<br />
<span style={{ color: "#8a8a8a" }}>
<span style={{ color: '#8a8a8a' }}>
{adminOnly
? "Only admin can update player and start calls right now"
: "All party members can update player and start calls right now"}
? 'Only admin can update player and start calls right now'
: 'All party members can update player and start calls right now'}
</span>
</span>
}
labelPlacement="end"
/>
) : null}
<Typography
className="party-controls-users-title"
variant="overline"
>
<Typography className="party-controls-users-title" variant="overline">
PARTY MEMBERS
</Typography>
<div className="party-controls-users-container">
{users.map((user) => (
<Chip
className="party-controls-users-chip"
clickable
size="small"
label={user}
/>
<Chip className="party-controls-users-chip" clickable size="small" label={user} />
))}
</div>
{Object.keys(usersOnCall).length > 0 ? (
<Typography
className="party-controls-users-title"
variant="overline"
>
<Typography className="party-controls-users-title" variant="overline">
MEMBERS IN CALL
</Typography>
) : null}
{Object.keys(usersOnCall).length > 0 ? (
<div className="party-controls-users-container">
{Object.keys(usersOnCall).map((id) => {
return usersOnCall[id].status === "Connected" ||
usersOnCall[id].status === "Connecting" ? (
return usersOnCall[id].status === 'Connected' ||
usersOnCall[id].status === 'Connecting' ? (
<Tooltip
interactive
title={
<Grid
className="party-controls-users-volume"
container
spacing={2}
>
<Grid className="party-controls-users-volume" container spacing={2}>
<Grid item>
<VolumeDown />
</Grid>
@@ -745,9 +689,7 @@ export default class Chat extends Component {
step={1}
color="secondary"
value={volumes[id] || 10}
onChangeCommitted={(e, v) =>
this.setVideoVolume(v, id)
}
onChangeCommitted={(e, v) => this.setVideoVolume(v, id)}
/>
</Grid>
<Grid item>
@@ -758,15 +700,14 @@ export default class Chat extends Component {
>
<Chip
color={
usersOnCall[id].info.externalId ===
LocalData().userUid
? "secondary"
: "default"
usersOnCall[id].info.externalId === LocalData().userUid
? 'secondary'
: 'default'
}
className="party-controls-users-chip"
clickable
size="small"
label={usersOnCall[id].info.name || " "}
label={usersOnCall[id].info.name || ' '}
/>
</Tooltip>
) : null;
@@ -777,8 +718,7 @@ export default class Chat extends Component {
</ExpansionPanel>
{player ? (
<Card elevation={0} className="media-info-card">
{player.showName &&
player.status !== PLAYER_STATUS.NOT_PLAYING ? (
{player.showName && player.status !== PLAYER_STATUS.NOT_PLAYING ? (
<CardContent>
<Typography className="media-info-at" variant="overline">
{player.status === PLAYER_STATUS.PAUSED
@@ -803,17 +743,13 @@ export default class Chat extends Component {
) : (
<CardContent>
<Typography className="media-info-at" variant="caption">
Nothing playing right now, pause or play once after starting
a show to start sync.
Nothing playing right now, pause or play once after starting a show to start
sync.
</Typography>
</CardContent>
)}
{player && player.showName && player.status ? (
<Button
className="media-info-link"
href={player.url}
startIcon={<LinkOutlined />}
>
<Button className="media-info-link" href={player.url} startIcon={<LinkOutlined />}>
Link to currently playing
</Button>
) : null}
@@ -844,9 +780,7 @@ export default class Chat extends Component {
<Paper
square
variant="outlined"
className={`replying-to-card ${
replyTo !== null ? "replying-to-card-up" : ""
}`}
className={`replying-to-card ${replyTo !== null ? 'replying-to-card-up' : ''}`}
>
<div className="replying-to-content">
<Typography variant="overline" display="block" gutterBottom>
@@ -860,15 +794,8 @@ export default class Chat extends Component {
</Paper>
<div className="text-phone-panel">
{gif || newMessage ? null : (
<Tooltip
title="Fullscreen with Watch Party"
aria-label="Fullscreen"
>
<IconButton
className="icon-button"
color="secondary"
onClick={this.toggleFullscreen}
>
<Tooltip title="Fullscreen with Watch Party" aria-label="Fullscreen">
<IconButton className="icon-button" color="secondary" onClick={this.toggleFullscreen}>
{isFullscreen ? <FullscreenExit /> : <Fullscreen />}
</IconButton>
</Tooltip>
@@ -879,7 +806,7 @@ export default class Chat extends Component {
<IconButton
disabled={callActionPending}
onClick={this.handlePhoneCall}
color={!onCall ? "secondary" : "primary"}
color={!onCall ? 'secondary' : 'primary'}
className="icon-button"
>
{onCall ? (
@@ -921,14 +848,12 @@ export default class Chat extends Component {
multiline
rowsMax="3"
size="small"
placeholder={
this.state.gif ? "Search something..." : "Say something..."
}
placeholder={this.state.gif ? 'Search something...' : 'Say something...'}
helperText={
this.state.newMessage && !this.state.gif
? "Enter to send / Shift+Enter for new line"
? 'Enter to send / Shift+Enter for new line'
: this.state.gif
? "Click on gif to send / Scroll to load more"
? 'Click on gif to send / Scroll to load more'
: null
}
variant="outlined"
@@ -939,19 +864,19 @@ export default class Chat extends Component {
scrollThread();
if (gif) {
window.postMessage({
watchPartyDirection: "TO_SCRIPT",
type: "WATCH_PARTY_SEARCH_GIF",
watchPartyDirection: 'TO_SCRIPT',
type: 'WATCH_PARTY_SEARCH_GIF',
value: e.target.value,
});
}
}}
InputProps={{
id: "chat-message-box-input",
id: 'chat-message-box-input',
endAdornment: (
<InputAdornment position="end">
<IconButton
className={`${this.state.gif ? "gif-active" : ""} ${
this.state.newMessage ? "message-active" : ""
className={`${this.state.gif ? 'gif-active' : ''} ${
this.state.newMessage ? 'message-active' : ''
} message-send`}
size="small"
onClick={() => this.sendMessageInvoker(newMessage)}
@@ -964,15 +889,13 @@ export default class Chat extends Component {
startAdornment: (
<InputAdornment position="start">
<IconButton
className={`gif-button ${
this.state.gif ? "gif-close" : ""
}`}
className={`gif-button ${this.state.gif ? 'gif-close' : ''}`}
onClick={() => {
this.setState({ gif: !gif });
if (!gif) {
window.postMessage({
watchPartyDirection: "TO_SCRIPT",
type: "WATCH_PARTY_SEARCH_GIF",
watchPartyDirection: 'TO_SCRIPT',
type: 'WATCH_PARTY_SEARCH_GIF',
value: newMessage,
});
scrollThread();
@@ -990,9 +913,9 @@ export default class Chat extends Component {
<ReactGiphySearchbox
apiKey="ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq"
onSelect={this.gifClick}
masonryConfig={[{ columns: 2, imageWidth: "50%", gutter: 5 }]}
masonryConfig={[{ columns: 2, imageWidth: '50%', gutter: 5 }]}
searchFormClassName="giphy-search-form"
wrapperClassName={`giphy-wrapper ${gif ? "" : "giphy-wrapper-down"}`}
wrapperClassName={`giphy-wrapper ${gif ? '' : 'giphy-wrapper-down'}`}
listWrapperClassName="giphy-list-wrapper"
listItemClassName="giphy-list-item"
poweredByGiphy
app/src/Thread.css
+2 -2
View File
@@ -12,7 +12,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
.thread-container * {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif !important;
font-family: 'Roboto', sans-serif !important;
letter-spacing: 1.15px;
word-break: break-word !important;
}
@@ -100,7 +100,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
line-height: 16px;
font-size: 13px;
font-weight: 100;
font-family: "Roboto";
font-family: 'Roboto';
letter-spacing: 1.5px;
white-space: break-spaces;
word-break: break-all;
app/src/VideoListener.js
+107 -203
View File
@@ -9,22 +9,17 @@ 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
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
************************************************************************/
import {
PLAYER_STATUS,
getPlayerSource,
PLAYER_SOURCE,
LocalData,
} from "./Api";
import { PLAYER_STATUS, getPlayerSource, PLAYER_SOURCE, LocalData } from './Api';
const templateListener = (video) => console.log("MISSING VIDEO LISTENER");
const templateListener = (video) => console.log('MISSING VIDEO LISTENER');
export default class VideoListener {
constructor(listener = templateListener, selectors, nameSelectors) {
this.video = {
status: PLAYER_STATUS.NOT_PLAYING,
time: 0,
showName: "",
source: "",
showName: '',
source: '',
element: null,
};
this.nameSelectors = nameSelectors;
@@ -49,7 +44,7 @@ export default class VideoListener {
this.video.element !== null &&
this.video.element !== undefined &&
this.video.status !== PLAYER_STATUS.NOT_PLAYING &&
this.video.showName !== "" &&
this.video.showName !== '' &&
this.video.showName !== null &&
(this.video.status !== this.server.status ||
Math.abs(this.video.element.currentTime - this.server.time) > 1.5)
@@ -76,31 +71,24 @@ export default class VideoListener {
// REMOVE LISTENER BEFORE SYNCING
switch (this.video.source) {
case PLAYER_SOURCE.CRUNCHYROLL:
window.removeEventListener("watchParty", this.crunchyRollListener);
window.removeEventListener('watchParty', this.crunchyRollListener);
break;
default:
this.video.element.removeEventListener("playing", this.onplay);
this.video.element.removeEventListener("pause", this.onpause);
this.video.element.removeEventListener('playing', this.onplay);
this.video.element.removeEventListener('pause', this.onpause);
}
await this.timeout(250);
// SEEK
if (
Math.abs(serverPlayer.time - this.video.element.currentTime) > 1.5
) {
if (Math.abs(serverPlayer.time - this.video.element.currentTime) > 1.5) {
switch (serverPlayer.source) {
case PLAYER_SOURCE.NETFLIX:
window.postMessage(
{ type: "SEEK", time: serverPlayer.time * 1000 },
"*"
);
window.postMessage({ type: 'SEEK', time: serverPlayer.time * 1000 }, '*');
break;
case PLAYER_SOURCE.AMAZON:
if (this.video.status === PLAYER_STATUS.PAUSED)
await this.video.element
.play()
.catch((err) =>
console.error("WatchParty erred when syncing time.")
);
.catch((err) => console.error('WatchParty erred when syncing time.'));
await this.timeout(250);
this.video.element.currentTime = serverPlayer.time;
await this.timeout(500);
@@ -113,10 +101,7 @@ export default class VideoListener {
this.video.element.currentTime = serverPlayer.time;
break;
case PLAYER_SOURCE.HULU:
window.postMessage(
{ type: "SEEK", time: serverPlayer.time },
"*"
);
window.postMessage({ type: 'SEEK', time: serverPlayer.time }, '*');
break;
case PLAYER_SOURCE.HBOMAX:
case PLAYER_SOURCE.HBONOW:
@@ -125,8 +110,8 @@ export default class VideoListener {
case PLAYER_SOURCE.PEACOCK:
window.postMessage(
JSON.stringify({
watchPartyDirection: "TO_SCRIPT",
type: "WATCH_PARTY_SEEK",
watchPartyDirection: 'TO_SCRIPT',
type: 'WATCH_PARTY_SEEK',
status: serverPlayer.status,
time: serverPlayer.time,
})
@@ -138,8 +123,8 @@ export default class VideoListener {
case PLAYER_SOURCE.CRUNCHYROLL:
window.postMessage(
JSON.stringify({
watchPartyDirection: "TO_SCRIPT",
type: "WATCH_PARTY_SEEK",
watchPartyDirection: 'TO_SCRIPT',
type: 'WATCH_PARTY_SEEK',
status: serverPlayer.status,
time: serverPlayer.time,
})
@@ -158,18 +143,15 @@ export default class VideoListener {
PLAYER_SOURCE.HBOMAX === this.video.source ||
PLAYER_SOURCE.HBONOW === this.video.source
) {
window.postMessage(
{ type: "PAUSE", time: serverPlayer.time },
"*"
);
window.postMessage({ type: 'PAUSE', time: serverPlayer.time }, '*');
} else if (
PLAYER_SOURCE.CRUNCHYROLL === this.video.source ||
PLAYER_SOURCE.PEACOCK === this.video.source
) {
window.postMessage(
JSON.stringify({
watchPartyDirection: "TO_SCRIPT",
type: "WATCH_PARTY_STATUS",
watchPartyDirection: 'TO_SCRIPT',
type: 'WATCH_PARTY_STATUS',
status: serverPlayer.status,
time: serverPlayer.time,
})
@@ -185,18 +167,15 @@ export default class VideoListener {
PLAYER_SOURCE.HBOMAX === this.video.source ||
PLAYER_SOURCE.HBONOW === this.video.source
) {
window.postMessage(
{ type: "PLAY", time: serverPlayer.time },
"*"
);
window.postMessage({ type: 'PLAY', time: serverPlayer.time }, '*');
} else if (
PLAYER_SOURCE.CRUNCHYROLL === this.video.source ||
PLAYER_SOURCE.PEACOCK === this.video.source
) {
window.postMessage(
JSON.stringify({
watchPartyDirection: "TO_SCRIPT",
type: "WATCH_PARTY_STATUS",
watchPartyDirection: 'TO_SCRIPT',
type: 'WATCH_PARTY_STATUS',
status: serverPlayer.status,
time: serverPlayer.time,
})
@@ -204,9 +183,7 @@ export default class VideoListener {
} else {
await this.video.element
.play()
.catch((err) =>
console.error("WatchParty erred when syncing play.")
);
.catch((err) => console.error('WatchParty erred when syncing play.'));
}
break;
default:
@@ -216,10 +193,10 @@ export default class VideoListener {
// RE-ADD LISTENERS FOR FUTURE SYNC
switch (this.video.source) {
case PLAYER_SOURCE.CRUNCHYROLL:
window.addEventListener("watchParty", this.crunchyRollListener);
window.addEventListener('watchParty', this.crunchyRollListener);
default:
this.video.element.addEventListener("playing", this.onplay);
this.video.element.addEventListener("pause", this.onpause);
this.video.element.addEventListener('playing', this.onplay);
this.video.element.addEventListener('pause', this.onpause);
}
}
this.isUpdating = false;
@@ -235,72 +212,60 @@ export default class VideoListener {
const nS = this.nameSelectors[this.video.source];
switch (this.video.source) {
case PLAYER_SOURCE.NETFLIX:
var nshow = document.querySelector(nS.show).innerHTML || "";
var nepisode = "";
var nshow = document.querySelector(nS.show).innerHTML || '';
var nepisode = '';
if (document.querySelectorAll(nS.episode)) {
document
.querySelectorAll(nS.episode)
.forEach((el) => (nepisode += el.innerHTML + " "));
document.querySelectorAll(nS.episode).forEach((el) => (nepisode += el.innerHTML + ' '));
}
return nshow === "" && nepisode === "" ? null : nshow + "\n" + nepisode;
return nshow === '' && nepisode === '' ? null : nshow + '\n' + nepisode;
case PLAYER_SOURCE.AMAZON:
const ashow = document.querySelector(nS.show).innerText || "";
return ashow === "" ? null : ashow;
const ashow = document.querySelector(nS.show).innerText || '';
return ashow === '' ? null : ashow;
case PLAYER_SOURCE.HULU:
const hshow = document.querySelector(nS.show).innerText;
const hepisode = document
.querySelector(nS.episode)
.innerText.replace(/\n/gi, " ");
return hshow === "" && hepisode === "" ? null : hshow + "\n" + hepisode;
const hepisode = document.querySelector(nS.episode).innerText.replace(/\n/gi, ' ');
return hshow === '' && hepisode === '' ? null : hshow + '\n' + hepisode;
case PLAYER_SOURCE.DISNEY:
this.video.element.parentElement.click();
await this.timeout(200);
const dshow = document.querySelector(nS.show)
? document.querySelector(nS.show).innerHTML
: "";
: '';
const depisode = document.querySelector(nS.episode)
? document.querySelector(nS.episode).innerHTML
: "";
return dshow === "" && depisode === "" ? null : dshow + "\n" + depisode;
: '';
return dshow === '' && depisode === '' ? null : dshow + '\n' + depisode;
case PLAYER_SOURCE.YOUTUBE:
const yshow = document.querySelector(nS.show).innerText || "";
const yepisode = document.querySelector(nS.episode).innerText || "";
return yshow === "" && yepisode === "" ? null : yshow + "\n" + yepisode;
const yshow = document.querySelector(nS.show).innerText || '';
const yepisode = document.querySelector(nS.episode).innerText || '';
return yshow === '' && yepisode === '' ? null : yshow + '\n' + yepisode;
case PLAYER_SOURCE.HBOMAX:
case PLAYER_SOURCE.HBONOW:
const bottomHalf = this.video.element.parentNode.parentNode.parentNode
.parentNode.parentNode.children[1];
bottomHalf.children[0].id = "hboUpperTitle";
bottomHalf.children[1].id = "hboLowerTitle";
const hboshow = document.querySelector("#hboUpperTitle").innerText;
const hboepisode = document.querySelector("#hboLowerTitle").innerText;
return hboshow === "" && hboepisode === ""
? null
: hboshow + "\n" + hboepisode;
const bottomHalf = this.video.element.parentNode.parentNode.parentNode.parentNode.parentNode
.children[1];
bottomHalf.children[0].id = 'hboUpperTitle';
bottomHalf.children[1].id = 'hboLowerTitle';
const hboshow = document.querySelector('#hboUpperTitle').innerText;
const hboepisode = document.querySelector('#hboLowerTitle').innerText;
return hboshow === '' && hboepisode === '' ? null : hboshow + '\n' + hboepisode;
case PLAYER_SOURCE.PEACOCK:
const peacockshow = document.querySelector(nS.show).innerText || "";
const peacockepisode =
document.querySelector(nS.episode).innerText || "";
return peacockshow === "" && peacockepisode === ""
const peacockshow = document.querySelector(nS.show).innerText || '';
const peacockepisode = document.querySelector(nS.episode).innerText || '';
return peacockshow === '' && peacockepisode === ''
? null
: peacockshow + "\n" + peacockepisode;
: peacockshow + '\n' + peacockepisode;
case PLAYER_SOURCE.GOOGLEPLAY:
const playerIframe = document.querySelector(
this.selectors[PLAYER_SOURCE.GOOGLEPLAY]
);
var googleplayshow = "";
const playerIframe = document.querySelector(this.selectors[PLAYER_SOURCE.GOOGLEPLAY]);
var googleplayshow = '';
if (playerIframe) {
googleplayshow =
playerIframe.contentWindow.document.querySelector(nS.show)
.innerText || "";
playerIframe.contentWindow.document.querySelector(nS.show).innerText || '';
}
return googleplayshow === "" ? null : googleplayshow;
return googleplayshow === '' ? null : googleplayshow;
case PLAYER_SOURCE.CRUNCHYROLL:
const crunchyrollTitle = document.querySelector(nS.show);
const crunchyrollshow = crunchyrollTitle
? crunchyrollTitle.innerText
: "";
return crunchyrollshow === "" ? null : crunchyrollshow;
const crunchyrollshow = crunchyrollTitle ? crunchyrollTitle.innerText : '';
return crunchyrollshow === '' ? null : crunchyrollshow;
default:
break;
}
@@ -321,8 +286,8 @@ export default class VideoListener {
}
async crunchyRollListener(ev) {
if (
ev.detail.watchPartyDirection === "TO_APP" &&
ev.detail.type === "WATCH_PARTY_PLAYER_UPDATE"
ev.detail.watchPartyDirection === 'TO_APP' &&
ev.detail.type === 'WATCH_PARTY_PLAYER_UPDATE'
) {
this.updateStatus({
status: ev.detail.status,
@@ -342,15 +307,15 @@ export default class VideoListener {
case PLAYER_SOURCE.CRUNCHYROLL:
window.postMessage(
JSON.stringify({
watchPartyDirection: "TO_SCRIPT",
type: "WATCH_PARTY_ADD_LISTENERS",
watchPartyDirection: 'TO_SCRIPT',
type: 'WATCH_PARTY_ADD_LISTENERS',
})
);
window.addEventListener("watchParty", this.crunchyRollListener);
window.addEventListener('watchParty', this.crunchyRollListener);
break;
default:
videoElement.addEventListener("playing", this.onplay);
videoElement.addEventListener("pause", this.onpause);
videoElement.addEventListener('playing', this.onplay);
videoElement.addEventListener('pause', this.onpause);
}
}
async start() {
@@ -361,12 +326,10 @@ export default class VideoListener {
switch (this.video.source) {
case PLAYER_SOURCE.NETFLIX:
const seekInject = `window.seekScriptLoaded=!0;var getVideoPlayer=function(){var e=window.netflix.appContext.state.playerApp.getAPI().videoPlayer,t=e.getAllPlayerSessionIds()[0];return e.getVideoPlayerBySessionId(t)},seekInteraction=function(e){if(e.source==window){if(e.data.type&&"SEEK"==e.data.type){getVideoPlayer().pause();getVideoPlayer().seek(e.data.time);}if(e.data.type&&e.data.type==="PAUSE"){getVideoPlayer().pause();}if(e.data.type&&e.data.type==="PLAY"){getVideoPlayer().play();}e.data.type&&"teardown"==e.data.type&&(window.removeEventListener("message",seekInteraction,!1),window.seekScriptLoaded=!1)}};window.addEventListener("message",seekInteraction,!1);`;
const seekInjectScript = document.createElement("script");
const seekInjectScript = document.createElement('script');
seekInjectScript.text = seekInject;
document.head.appendChild(seekInjectScript);
const videoElement = document.querySelector(
this.selectors[PLAYER_SOURCE.NETFLIX]
);
const videoElement = document.querySelector(this.selectors[PLAYER_SOURCE.NETFLIX]);
if (videoElement && !this.video.element) {
this.firstTimeSync(videoElement);
} else {
@@ -374,13 +337,8 @@ export default class VideoListener {
this.video.element
? null
: () => {
var nve = document.querySelector(
this.selectors[PLAYER_SOURCE.NETFLIX]
);
if (
nve !== null &&
(this.video.element !== nve || this.video.element === null)
) {
var nve = document.querySelector(this.selectors[PLAYER_SOURCE.NETFLIX]);
if (nve !== null && (this.video.element !== nve || this.video.element === null)) {
this.firstTimeSync(nve);
}
},
@@ -392,12 +350,10 @@ export default class VideoListener {
const huluSeekInject = `window.seekScriptLoaded=!0;var getVideoPlayer=function(){var e=document.querySelector("${
this.selectors[PLAYER_SOURCE.HULU]
}").__HuluDashPlayer__;return e;},seekInteraction=function(e){if(e.source==window){if(e.data.type&&"SEEK"==e.data.type){getVideoPlayer().seek(e.data.time,e.data.time);}if(e.data.type&&e.data.type==="PAUSE"){getVideoPlayer().pause();}if(e.data.type&&e.data.type==="PLAY"){getVideoPlayer().play();}e.data.type&&"teardown"==e.data.type&&(window.removeEventListener("message",seekInteraction,!1),window.seekScriptLoaded=!1)}};window.addEventListener("message",seekInteraction,!1);`;
const huluSeekInjectScript = document.createElement("script");
const huluSeekInjectScript = document.createElement('script');
huluSeekInjectScript.text = huluSeekInject;
document.head.appendChild(huluSeekInjectScript);
const huluVideoElement = document.querySelector(
this.selectors[PLAYER_SOURCE.HULU]
);
const huluVideoElement = document.querySelector(this.selectors[PLAYER_SOURCE.HULU]);
if (huluVideoElement) {
this.firstTimeSync(huluVideoElement);
} else {
@@ -405,13 +361,8 @@ export default class VideoListener {
this.video.element
? null
: () => {
var hve = document.querySelector(
this.selectors[PLAYER_SOURCE.HULU]
);
if (
hve !== null &&
(this.video.element !== hve || this.video.element === null)
) {
var hve = document.querySelector(this.selectors[PLAYER_SOURCE.HULU]);
if (hve !== null && (this.video.element !== hve || this.video.element === null)) {
this.firstTimeSync(hve);
}
},
@@ -420,9 +371,7 @@ export default class VideoListener {
}
break;
case PLAYER_SOURCE.AMAZON:
const amazonVideoElement = document.querySelector(
this.selectors[PLAYER_SOURCE.AMAZON]
);
const amazonVideoElement = document.querySelector(this.selectors[PLAYER_SOURCE.AMAZON]);
if (amazonVideoElement) {
this.firstTimeSync(amazonVideoElement);
} else {
@@ -430,13 +379,8 @@ export default class VideoListener {
this.video.element
? null
: () => {
var ave = document.querySelector(
this.selectors[PLAYER_SOURCE.AMAZON]
);
if (
ave !== null &&
(this.video.element !== ave || this.video.element === null)
) {
var ave = document.querySelector(this.selectors[PLAYER_SOURCE.AMAZON]);
if (ave !== null && (this.video.element !== ave || this.video.element === null)) {
this.firstTimeSync(ave);
}
},
@@ -445,9 +389,7 @@ export default class VideoListener {
}
break;
case PLAYER_SOURCE.DISNEY:
const disneyVideoElement = document.querySelector(
this.selectors[PLAYER_SOURCE.DISNEY]
);
const disneyVideoElement = document.querySelector(this.selectors[PLAYER_SOURCE.DISNEY]);
if (disneyVideoElement) {
this.firstTimeSync(disneyVideoElement);
} else {
@@ -455,13 +397,8 @@ export default class VideoListener {
this.video.element
? null
: () => {
var dve = document.querySelector(
this.selectors[PLAYER_SOURCE.DISNEY]
);
if (
dve !== null &&
(this.video.element !== dve || this.video.element === null)
) {
var dve = document.querySelector(this.selectors[PLAYER_SOURCE.DISNEY]);
if (dve !== null && (this.video.element !== dve || this.video.element === null)) {
this.firstTimeSync(dve);
}
},
@@ -470,22 +407,15 @@ export default class VideoListener {
}
break;
case PLAYER_SOURCE.YOUTUBE:
const youtubeVideoElement = document.querySelector(
this.selectors[PLAYER_SOURCE.YOUTUBE]
);
const youtubeVideoElement = document.querySelector(this.selectors[PLAYER_SOURCE.YOUTUBE]);
if (youtubeVideoElement) this.firstTimeSync(youtubeVideoElement);
else {
setInterval(
this.video.element
? null
: () => {
var yve = document.querySelector(
this.selectors[PLAYER_SOURCE.YOUTUBE]
);
if (
yve !== null &&
(this.video.element !== yve || this.video.element === null)
) {
var yve = document.querySelector(this.selectors[PLAYER_SOURCE.YOUTUBE]);
if (yve !== null && (this.video.element !== yve || this.video.element === null)) {
this.firstTimeSync(yve);
}
},
@@ -497,27 +427,22 @@ export default class VideoListener {
const hboSeekInject = `window.seekScriptLoaded=!0;var getVideoPlayer=function(){var e=document.querySelector("${
this.selectors[PLAYER_SOURCE.HBOMAX]
}")._dispNode;return e;},seekInteraction=function(e){if(e.source==window){if(e.data.type&&e.data.type==="PAUSE"){getVideoPlayer().pause();}if(e.data.type&&e.data.type==="PLAY"){getVideoPlayer().play();}e.data.type&&"teardown"==e.data.type&&(window.removeEventListener("message",seekInteraction,!1),window.seekScriptLoaded=!1)}};window.addEventListener("message",seekInteraction,!1);`;
const hboSeekInjectScript = document.createElement("script");
const hboSeekInjectScript = document.createElement('script');
hboSeekInjectScript.text = hboSeekInject;
document.head.appendChild(hboSeekInjectScript);
const hboVideoElement = document.querySelector(
this.selectors[PLAYER_SOURCE.HBOMAX]
);
const hboVideoElement = document.querySelector(this.selectors[PLAYER_SOURCE.HBOMAX]);
if (hboVideoElement) {
const bottomHalf =
hboVideoElement.parentNode.parentNode.parentNode.parentNode
.parentNode.children[1];
bottomHalf.children[0].id = "hboUpperTitle";
bottomHalf.children[1].id = "hboLowerTitle";
hboVideoElement.parentNode.parentNode.parentNode.parentNode.parentNode.children[1];
bottomHalf.children[0].id = 'hboUpperTitle';
bottomHalf.children[1].id = 'hboLowerTitle';
this.firstTimeSync(hboVideoElement);
} else {
setInterval(
this.video.element
? null
: () => {
var hve = document.querySelector(
this.selectors[PLAYER_SOURCE.HBOMAX]
);
var hve = document.querySelector(this.selectors[PLAYER_SOURCE.HBOMAX]);
if (
hve !== null &&
hve !== undefined &&
@@ -534,27 +459,22 @@ export default class VideoListener {
const hboNowSeekInject = `window.seekScriptLoaded=!0;var getVideoPlayer=function(){var e=document.querySelector("${
this.selectors[PLAYER_SOURCE.HBONOW]
}")._dispNode;return e;},seekInteraction=function(e){if(e.source==window){if(e.data.type&&e.data.type==="PAUSE"){getVideoPlayer().pause();}if(e.data.type&&e.data.type==="PLAY"){getVideoPlayer().play();}e.data.type&&"teardown"==e.data.type&&(window.removeEventListener("message",seekInteraction,!1),window.seekScriptLoaded=!1)}};window.addEventListener("message",seekInteraction,!1);`;
const hboNowSeekInjectScript = document.createElement("script");
const hboNowSeekInjectScript = document.createElement('script');
hboNowSeekInjectScript.text = hboNowSeekInject;
document.head.appendChild(hboNowSeekInjectScript);
const hboNowVideoElement = document.querySelector(
this.selectors[PLAYER_SOURCE.HBONOW]
);
const hboNowVideoElement = document.querySelector(this.selectors[PLAYER_SOURCE.HBONOW]);
if (hboNowVideoElement) {
const bottomHalf =
hboNowVideoElement.parentNode.parentNode.parentNode.parentNode
.parentNode.children[1];
bottomHalf.children[0].id = "hboUpperTitle";
bottomHalf.children[1].id = "hboLowerTitle";
hboNowVideoElement.parentNode.parentNode.parentNode.parentNode.parentNode.children[1];
bottomHalf.children[0].id = 'hboUpperTitle';
bottomHalf.children[1].id = 'hboLowerTitle';
this.firstTimeSync(hboNowVideoElement);
} else {
setInterval(
this.video.element
? null
: () => {
var hve = document.querySelector(
this.selectors[PLAYER_SOURCE.HBONOW]
);
var hve = document.querySelector(this.selectors[PLAYER_SOURCE.HBONOW]);
if (
hve !== null &&
hve !== undefined &&
@@ -571,12 +491,10 @@ export default class VideoListener {
const peacockInject = `var watchPartyInteraction=function(e){if(e.source===window){const data=JSON.parse(e.data);const playerReactElement=document.querySelector("${
this.selectors[PLAYER_SOURCE.PEACOCK]
}");if(data.watchPartyDirection==='TO_SCRIPT'){if(data.type==='WATCH_PARTY_SEEK'){if(playerReactElement&&playerReactElement.player){playerReactElement.player.seek(data.time)}}else if(data.type==='WATCH_PARTY_STATUS'){if(playerReactElement&&playerReactElement.player){if(data.status==='PAUSED')playerReactElement.player.pause();if(data.status==='PLAYING')playerReactElement.player.play()}}}}};window.addEventListener("message",watchPartyInteraction);`;
const peacockInjectScript = document.createElement("script");
const peacockInjectScript = document.createElement('script');
peacockInjectScript.text = peacockInject;
document.head.appendChild(peacockInjectScript);
const peacockVideoElement = document.querySelector(
this.selectors[PLAYER_SOURCE.PEACOCK]
);
const peacockVideoElement = document.querySelector(this.selectors[PLAYER_SOURCE.PEACOCK]);
if (peacockVideoElement) {
this.firstTimeSync(peacockVideoElement);
} else {
@@ -584,9 +502,7 @@ export default class VideoListener {
this.video.element
? null
: () => {
var pve = document.querySelector(
this.selectors[PLAYER_SOURCE.PEACOCK]
);
var pve = document.querySelector(this.selectors[PLAYER_SOURCE.PEACOCK]);
if (
pve !== null &&
pve !== undefined &&
@@ -600,13 +516,9 @@ export default class VideoListener {
}
break;
case PLAYER_SOURCE.GOOGLEPLAY:
const playerIframe = document.querySelector(
this.selectors[PLAYER_SOURCE.GOOGLEPLAY]
);
const playerIframe = document.querySelector(this.selectors[PLAYER_SOURCE.GOOGLEPLAY]);
if (playerIframe) {
const googlePlayVideoElement = playerIframe.contentWindow.document.querySelector(
"video"
);
const googlePlayVideoElement = playerIframe.contentWindow.document.querySelector('video');
if (googlePlayVideoElement) {
this.firstTimeSync(googlePlayVideoElement);
}
@@ -615,13 +527,9 @@ export default class VideoListener {
this.video.element
? null
: () => {
const pif = document.querySelector(
this.selectors[PLAYER_SOURCE.GOOGLEPLAY]
);
const pif = document.querySelector(this.selectors[PLAYER_SOURCE.GOOGLEPLAY]);
if (pif) {
const gpve = pif.contentWindow.document.querySelector(
"video"
);
const gpve = pif.contentWindow.document.querySelector('video');
if (gpve) {
this.firstTimeSync(gpve);
}
@@ -632,12 +540,10 @@ export default class VideoListener {
}
case PLAYER_SOURCE.CRUNCHYROLL:
const crunchyRollInject = `var sendToWatchPartyApp = function(pS, pT) { var customWatchPartyEvent = new CustomEvent('watchParty', { detail: { watchPartyDirection: 'TO_APP', type: 'WATCH_PARTY_PLAYER_UPDATE', status: pS, time: pT } }); window.dispatchEvent(customWatchPartyEvent); }, watchPartyGetTimeAndSend = function(pS) { if (window.VILOS_PLAYERJS) { window.VILOS_PLAYERJS.getCurrentTime(function(pT) { sendToWatchPartyApp(pS, pT); }); } }, watchPartySendPlaying = function() { watchPartyGetTimeAndSend('PLAYING'); }, watchPartySendPaused = function() { watchPartyGetTimeAndSend('PAUSED'); }, watchPartyInteraction = function(e) { if (e.source === window) { const data = JSON.parse(e.data); if (data.watchPartyDirection === 'TO_SCRIPT') { if (data.type === 'WATCH_PARTY_ADD_LISTENERS') { if (window.VILOS_PLAYERJS) { window.VILOS_PLAYERJS.on('play', watchPartySendPlaying, 'player.js'); window.VILOS_PLAYERJS.on('pause', watchPartySendPaused, 'player.js'); } } else if (data.type === 'WATCH_PARTY_SEEK') { if (window.VILOS_PLAYERJS) { window.VILOS_PLAYERJS.setCurrentTime(data.time); } } else if (data.type === 'WATCH_PARTY_STATUS') { if (window.VILOS_PLAYERJS) { if (data.status === 'PAUSED') window.VILOS_PLAYERJS.pause(); if (data.status === 'PLAYING') window.VILOS_PLAYERJS.play(); } } } } }; window.addEventListener("message", watchPartyInteraction);`;
const crunchyRollInjectScript = document.createElement("script");
const crunchyRollInjectScript = document.createElement('script');
crunchyRollInjectScript.text = crunchyRollInject;
document.head.appendChild(crunchyRollInjectScript);
const crunchyrollIframe = document.querySelector(
this.selectors[PLAYER_SOURCE.CRUNCHYROLL]
);
const crunchyrollIframe = document.querySelector(this.selectors[PLAYER_SOURCE.CRUNCHYROLL]);
if (crunchyrollIframe) {
this.firstTimeSync(crunchyrollIframe);
} else {
@@ -645,9 +551,7 @@ export default class VideoListener {
this.video.element
? null
: () => {
const cif = document.querySelector(
this.selectors[PLAYER_SOURCE.CRUNCHYROLL]
);
const cif = document.querySelector(this.selectors[PLAYER_SOURCE.CRUNCHYROLL]);
if (cif) {
this.firstTimeSync(cif);
}
@@ -657,7 +561,7 @@ export default class VideoListener {
}
break;
case PLAYER_SOURCE.LOCAL:
const localVideoElement = document.getElementsByTagName("video")[0];
const localVideoElement = document.getElementsByTagName('video')[0];
if (localVideoElement) {
this.firstTimeSync(localVideoElement);
}
@@ -669,12 +573,12 @@ export default class VideoListener {
end() {
switch (this.video.source) {
case PLAYER_SOURCE.CRUNCHYROLL:
window.removeEventListener("watchParty", this.crunchyRollListener);
window.removeEventListener('watchParty', this.crunchyRollListener);
break;
default:
if (this.video.element) {
this.video.element.removeEventListener("playing", this.onplay);
this.video.element.removeEventListener("pause", this.onpause);
this.video.element.removeEventListener('playing', this.onplay);
this.video.element.removeEventListener('pause', this.onpause);
}
}
}
app/src/index.css
+2 -3
View File
@@ -110,8 +110,7 @@ body.youtube.visible .ytp-tooltip.ytp-bottom.ytp-preview {
bottom: 100px !important;
top: unset !important;
}
body.youtube.visible
td-two-column-browse-results-renderer.grid:not(.grid-disabled) {
body.youtube.visible td-two-column-browse-results-renderer.grid:not(.grid-disabled) {
max-width: calc(100% - 48px);
}
body.youtube.visible ytd-miniplayer {
@@ -311,7 +310,7 @@ body.disney #party_wrapper * {
border: 1px solid white;
background-color: black !important;
transition: all ease-in-out 0.3s !important;
background-image: url("chrome-extension://__MSG_@@extension_id__/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: 75%;