From aaf2506f784d16c6069c6523e27a933ae9850fcb Mon Sep 17 00:00:00 2001 From: Ayushya Amitabh Date: Fri, 14 Aug 2020 00:36:44 -0400 Subject: [PATCH] v1.6.2/release -website update -dynamic showName and video element -time update on playing --- app/package-lock.json | 2 +- app/package.json | 2 +- app/public/background.js | 2 +- app/public/manifest.json | 2 +- app/src/App.js | 98 +++++---- app/src/Chat.js | 328 ++++++++++++++++++---------- app/src/Thread.css | 3 + app/src/VideoListener.js | 367 ++++++++++++++++++++------------ app/src/index.css | 10 +- functions/modules/createRoom.js | 81 ++++--- functions/package-lock.json | 2 +- functions/package.json | 2 +- package.json | 2 +- website/welcome/index.html | 19 +- 14 files changed, 582 insertions(+), 338 deletions(-) diff --git a/app/package-lock.json b/app/package-lock.json index 82f712b..9d3337e 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -1,6 +1,6 @@ { "name": "watch-party-crx", - "version": "1.6.0", + "version": "1.6.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/app/package.json b/app/package.json index 97c5b9d..bbfe520 100644 --- a/app/package.json +++ b/app/package.json @@ -1,6 +1,6 @@ { "name": "watch-party-crx", - "version": "1.6.1", + "version": "1.6.2", "private": true, "dependencies": {}, "scripts": { diff --git a/app/public/background.js b/app/public/background.js index c640893..230c22b 100644 --- a/app/public/background.js +++ b/app/public/background.js @@ -12,7 +12,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION. /* global chrome */ /* global firebase */ -const APP_VERSION = "1.6.1"; +const APP_VERSION = "1.6.2"; const APP_VERSION_STRING = APP_VERSION.replace(/\./g, ""); const firebaseConfig = { diff --git a/app/public/manifest.json b/app/public/manifest.json index 1231b42..06bd786 100644 --- a/app/public/manifest.json +++ b/app/public/manifest.json @@ -1,7 +1,7 @@ { "name": "Watch Party", "short_name": "WP", - "version": "1.6.1", + "version": "1.6.2", "description": "Watch streamed content together.", "background": { "page": "background.html" diff --git a/app/src/App.js b/app/src/App.js index d3fb57c..4a02d4c 100644 --- a/app/src/App.js +++ b/app/src/App.js @@ -9,27 +9,33 @@ 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.1'; -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", }, }, }); @@ -42,32 +48,41 @@ 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); @@ -79,8 +94,8 @@ const App = () => { getUserUid(); firebase .firestore() - .collection('server') - .doc('status') + .collection("server") + .doc("status") .onSnapshot((statusSnap) => { setStatus(statusSnap.data()); setLoading(false); @@ -88,18 +103,19 @@ 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(); @@ -110,8 +126,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 @@ -123,7 +139,7 @@ const App = () => { setNotification(closedNotification)} message={notification.message} @@ -136,12 +152,17 @@ const App = () => { title="Resize Sidebar / Double Click To Reset" aria-label="Resize Sidebar / Double Click To Reset" > -
+
||
{loading && } - {status[APP_VERSION_STRING] && status[APP_VERSION_STRING].active === true ? ( + {status[APP_VERSION_STRING] && + status[APP_VERSION_STRING].active === true ? ( setNotification({ open: true, message })} @@ -149,6 +170,7 @@ const App = () => { appVersionString={APP_VERSION_STRING} status={status[APP_VERSION_STRING]} selectors={status.selectors} + nameSelectors={status.nameSelectors} /> ) : ( { - 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(); @@ -137,12 +151,15 @@ 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) { @@ -161,14 +178,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; } @@ -178,13 +195,21 @@ 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 !== '') { + if (lastMessage.uid !== "") { this.props.notify( `${lastMessage.name}${ - lastMessage.type === 'giphy' ? ' sent a gif.' : ': ' + lastMessage.text + lastMessage.type === "giphy" + ? " sent a gif." + : ": " + lastMessage.text }` ); } @@ -200,12 +225,26 @@ 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); // DONE WITH MOUNTING TASKS this.props.updateLoading(false); + + setInterval(() => { + if ( + this.state.player && + this.state.player.time && + this.state.player.status === PLAYER_STATUS.PLAYING + ) { + const oldPlayer = this.state.player; + oldPlayer.time += 1; + this.setState({ + player: oldPlayer, + }); + } + }, 1000); } componentWillUnmount() { this.mVideoListener.end(); @@ -238,14 +277,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, @@ -259,20 +298,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, @@ -287,28 +326,30 @@ 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; @@ -319,9 +360,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({ @@ -342,7 +383,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(); @@ -350,10 +391,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); @@ -362,29 +403,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 = `

Grant Mic Permission

`; - 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); } @@ -397,7 +438,9 @@ export default class Chat extends Component { : new Date(t * 1000).toISOString().substr(14, 5); } updateAllowChatNotification() { - updateLocalData({ allowChatNotification: !this.state.allowChatNotification }); + updateLocalData({ + allowChatNotification: !this.state.allowChatNotification, + }); this.setState({ allowChatNotification: !this.state.allowChatNotification }); } updateAllowAutoRejoin() { @@ -418,7 +461,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) { @@ -430,7 +473,7 @@ export default class Chat extends Component { getReplyToContent() { const { replyTo } = this.state; if (replyTo) { - if (replyTo.type === 'giphy') { + if (replyTo.type === "giphy") { return gif; } return ( @@ -442,7 +485,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}`) { @@ -479,20 +522,23 @@ 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 ( @@ -519,7 +565,12 @@ export default class Chat extends Component { > WATCH PARTY - + {name}
@@ -528,9 +579,9 @@ export default class Chat extends Component { {admin && ( @@ -576,15 +633,17 @@ export default class Chat extends Component { checked={allowChatNotification} onChange={this.updateAllowChatNotification} name="allowChatNotification" - color={allowChatNotification ? 'secondary' : 'primary'} + color={allowChatNotification ? "secondary" : "primary"} /> } label={ Allow chat notification when side panel is closed
- - {allowChatNotification ? 'Notifications Enabled' : 'Notifications Disabled'} + + {allowChatNotification + ? "Notifications Enabled" + : "Notifications Disabled"} } @@ -597,15 +656,17 @@ export default class Chat extends Component { checked={allowAutoRejoin} onChange={this.updateAllowAutoRejoin} name="allowAutoRejoin" - color={allowAutoRejoin ? 'secondary' : 'primary'} + color={allowAutoRejoin ? "secondary" : "primary"} /> } label={ Allow Watch Party to auto rejoin (within 1 minute)
- - {allowAutoRejoin ? 'Auto Rejoin Enabled' : 'Auto Rejoin Disabled'} + + {allowAutoRejoin + ? "Auto Rejoin Enabled" + : "Auto Rejoin Disabled"} } @@ -619,7 +680,7 @@ export default class Chat extends Component { checked={adminOnly} onChange={this.updateAdminOnly} name="adminOnly" - color={adminOnly ? 'secondary' : 'primary'} + color={adminOnly ? "secondary" : "primary"} disabled={adminModeUpdate} /> } @@ -627,38 +688,53 @@ export default class Chat extends Component { Admin Only Mode
- + {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"} } labelPlacement="end" /> ) : null} - + PARTY MEMBERS
{users.map((user) => ( - + ))}
{Object.keys(usersOnCall).length > 0 ? ( - + MEMBERS IN CALL ) : null} {Object.keys(usersOnCall).length > 0 ? (
{Object.keys(usersOnCall).map((id) => { - return usersOnCall[id].status === 'Connected' || - usersOnCall[id].status === 'Connecting' ? ( + return usersOnCall[id].status === "Connected" || + usersOnCall[id].status === "Connecting" ? ( + @@ -669,7 +745,9 @@ 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) + } /> @@ -680,14 +758,15 @@ export default class Chat extends Component { > ) : null; @@ -698,13 +777,14 @@ export default class Chat extends Component { {player ? ( - {player.showName && player.status !== PLAYER_STATUS.NOT_PLAYING ? ( + {player.showName && + player.status !== PLAYER_STATUS.NOT_PLAYING ? ( {player.status === PLAYER_STATUS.PAUSED ? `PAUSED AT ${this.getPrettyTime(player.time)}` : player.status === PLAYER_STATUS.PLAYING - ? `STARTED PLAYING FROM ${this.getPrettyTime(player.time)}` + ? `CURRENTLY PLAYING (${this.getPrettyTime(player.time)})` : `SHOW IS AT ${this.getPrettyTime(player.time)}`}
@@ -723,12 +803,17 @@ export default class Chat extends Component { ) : ( - Nothing playing right now + Nothing playing right now, pause or play once after starting + a show to start sync. )} {player && player.showName && player.status ? ( - ) : null} @@ -759,7 +844,9 @@ export default class Chat extends Component {
@@ -773,8 +860,15 @@ export default class Chat extends Component {
{gif || newMessage ? null : ( - - + + {isFullscreen ? : } @@ -785,7 +879,7 @@ export default class Chat extends Component { {onCall ? ( @@ -827,12 +921,14 @@ 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" @@ -843,19 +939,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: ( this.sendMessageInvoker(newMessage)} @@ -868,13 +964,15 @@ export default class Chat extends Component { startAdornment: ( { 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(); @@ -892,9 +990,9 @@ export default class Chat extends Component { console.log('MISSING VIDEO LISTENER'); +const templateListener = (video) => console.log("MISSING VIDEO LISTENER"); export default class VideoListener { - constructor(listener = templateListener, selectors) { + constructor(listener = templateListener, selectors, nameSelectors) { this.video = { status: PLAYER_STATUS.NOT_PLAYING, time: 0, - showName: '', - source: '', + showName: "", + source: "", element: null, }; + this.nameSelectors = nameSelectors; this.selectors = selectors; this.isUpdating = false; this.listener = listener; @@ -33,6 +39,7 @@ export default class VideoListener { this.onplay = this.onplay.bind(this); this.shouldPushSync = this.shouldPushSync.bind(this); this.crunchyRollListener = this.crunchyRollListener.bind(this); + this.getShowName = this.getShowName.bind(this); } shouldPushSync() { return ( @@ -42,7 +49,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) @@ -69,23 +76,31 @@ 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); @@ -98,7 +113,10 @@ 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: @@ -107,8 +125,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, }) @@ -120,8 +138,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, }) @@ -140,15 +158,18 @@ 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, }) @@ -164,15 +185,18 @@ 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, }) @@ -180,7 +204,9 @@ 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: @@ -190,10 +216,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; @@ -206,77 +232,75 @@ export default class VideoListener { }); } async getShowName() { + const nS = this.nameSelectors[this.video.source]; switch (this.video.source) { case PLAYER_SOURCE.NETFLIX: - const titleContainerParent = document.querySelector( - '.PlayerControls--control-element.text-control.video-title' - ); - if (titleContainerParent) { - const titleContainer = titleContainerParent.firstChild; - const nshow = titleContainer.querySelector('h4') - ? titleContainer.querySelector('h4').innerHTML - : titleContainer.innerHTML; - let nepisode = ''; - titleContainer.querySelectorAll('span').forEach((e) => { - if (e.innerHTML) nepisode += e.innerHTML + ' '; - }); - return nshow === '' && nepisode === '' ? null : nshow + '\n' + nepisode; + var nshow = document.querySelector(nS.show).innerHTML || ""; + var nepisode = ""; + if (document.querySelectorAll(nS.episode)) { + document + .querySelectorAll(nS.episode) + .forEach((el) => (nepisode += el.innerHTML + " ")); } - break; + return nshow === "" && nepisode === "" ? null : nshow + "\n" + nepisode; case PLAYER_SOURCE.AMAZON: - const ashow = - document.querySelector( - '#dv-web-player > div > div:nth-child(1) > div > div > div.webPlayerSDKUiContainer > div > div > div > div > div > div > div > div:nth-child(2) > div:nth-child(2)' - ).innerText || ''; - return ashow === '' ? null : ashow; + const ashow = document.querySelector(nS.show).innerText || ""; + return ashow === "" ? null : ashow; case PLAYER_SOURCE.HULU: - const hshow = document.querySelector('.metadata-area__second-line').innerHTML; - const hepisode = document.querySelector('.metadata-area__third-line').innerHTML; - return hshow === '' && hepisode === '' ? null : hshow + '\n' + hepisode; + const hshow = document.querySelector(nS.show).innerText; + 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('.title-field') - ? document.querySelector('.title-field').innerHTML - : ''; - const depisode = document.querySelector('.subtitle-field') - ? document.querySelector('.subtitle-field').innerHTML - : ''; - return dshow === '' && depisode === '' ? null : dshow + '\n' + depisode; + 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; case PLAYER_SOURCE.YOUTUBE: - const yshow = document.querySelector('h1.title').innerText; - const yepisode = document.querySelector('yt-formatted-string.super-title').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; - case PLAYER_SOURCE.PEACOCK: - const peacockshow = document.querySelector( - '.item.playback-metadata__container-episode-metadata-info' - ).innerText; - const peacockepisode = document.querySelector('.item.playback-metadata__container-title') - .innerText; - return peacockshow === '' && peacockepisode === '' + 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 - : peacockshow + '\n' + peacockepisode; + : hboshow + "\n" + hboepisode; + case PLAYER_SOURCE.PEACOCK: + const peacockshow = document.querySelector(nS.show).innerText || ""; + const peacockepisode = + document.querySelector(nS.episode).innerText || ""; + return peacockshow === "" && peacockepisode === "" + ? null + : peacockshow + "\n" + peacockepisode; case PLAYER_SOURCE.GOOGLEPLAY: - const playerIframe = document.querySelector('body span div iframe'); - var googleplayshow = ''; + const playerIframe = document.querySelector( + this.selectors[PLAYER_SOURCE.GOOGLEPLAY] + ); + var googleplayshow = ""; if (playerIframe) { - const titleElement = playerIframe.contentWindow.document.querySelector('.playing-title'); - googleplayshow = titleElement ? titleElement.innerText : ''; + googleplayshow = + playerIframe.contentWindow.document.querySelector(nS.show) + .innerText || ""; } - return googleplayshow === '' ? null : googleplayshow; + return googleplayshow === "" ? null : googleplayshow; case PLAYER_SOURCE.CRUNCHYROLL: - const crunchyrollTitle = document.querySelector('#showmedia_about_media'); - const crunchyrollshow = crunchyrollTitle ? crunchyrollTitle.innerText : ''; - return crunchyrollshow === '' ? null : crunchyrollshow; + const crunchyrollTitle = document.querySelector(nS.show); + const crunchyrollshow = crunchyrollTitle + ? crunchyrollTitle.innerText + : ""; + return crunchyrollshow === "" ? null : crunchyrollshow; default: break; } @@ -297,8 +321,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, @@ -318,15 +342,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() { @@ -337,10 +361,12 @@ 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 { @@ -348,8 +374,13 @@ 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); } }, @@ -361,19 +392,26 @@ 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 videoElement = document.querySelector(this.selectors[PLAYER_SOURCE.HULU]); - if (videoElement) { - this.firstTimeSync(videoElement); + const huluVideoElement = document.querySelector( + this.selectors[PLAYER_SOURCE.HULU] + ); + if (huluVideoElement) { + this.firstTimeSync(huluVideoElement); } else { setInterval( 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); } }, @@ -382,16 +420,23 @@ export default class VideoListener { } break; case PLAYER_SOURCE.AMAZON: - const videoElement = document.querySelector(this.selectors[PLAYER_SOURCE.AMAZON]); - if (videoElement) { - this.firstTimeSync(videoElement); + const amazonVideoElement = document.querySelector( + this.selectors[PLAYER_SOURCE.AMAZON] + ); + if (amazonVideoElement) { + this.firstTimeSync(amazonVideoElement); } else { setInterval( 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); } }, @@ -400,7 +445,9 @@ 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 { @@ -408,8 +455,13 @@ 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); } }, @@ -418,15 +470,22 @@ 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); } }, @@ -438,22 +497,27 @@ 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 && @@ -467,25 +531,30 @@ export default class VideoListener { } break; case PLAYER_SOURCE.HBONOW: - const hboSeekInject = `window.seekScriptLoaded=!0;var getVideoPlayer=function(){var e=document.querySelector("${ + 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 hboSeekInjectScript = document.createElement('script'); - hboSeekInjectScript.text = hboSeekInject; - document.head.appendChild(hboSeekInjectScript); - const hboVideoElement = document.querySelector(this.selectors[PLAYER_SOURCE.HBONOW]); - if (hboVideoElement) { + const hboNowSeekInjectScript = document.createElement("script"); + hboNowSeekInjectScript.text = hboNowSeekInject; + document.head.appendChild(hboNowSeekInjectScript); + const hboNowVideoElement = document.querySelector( + this.selectors[PLAYER_SOURCE.HBONOW] + ); + if (hboNowVideoElement) { const bottomHalf = - hboVideoElement.parentNode.parentNode.parentNode.parentNode.parentNode.children[1]; - bottomHalf.children[0].id = 'hboUpperTitle'; - bottomHalf.children[1].id = 'hboLowerTitle'; - this.firstTimeSync(hboVideoElement); + 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 && @@ -502,10 +571,12 @@ 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 { @@ -513,7 +584,9 @@ 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 && @@ -527,9 +600,13 @@ 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); } @@ -538,9 +615,13 @@ 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); } @@ -551,10 +632,12 @@ 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 { @@ -562,7 +645,9 @@ 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); } @@ -572,7 +657,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); } @@ -584,12 +669,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); } } } diff --git a/app/src/index.css b/app/src/index.css index 5c3ff3f..601e0ad 100644 --- a/app/src/index.css +++ b/app/src/index.css @@ -110,7 +110,8 @@ 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 { @@ -239,7 +240,7 @@ body.disney #party_wrapper * { left: 0; align-items: center; justify-content: center; - box-sizing: content-box; + box-sizing: content-box !important; } #party-loading.inactive .MuiSvgIcon-root { font-size: 50px !important; @@ -276,6 +277,9 @@ body.disney #party_wrapper * { #party-routes-wrapper.visible { right: 0; } +#party-routes-wrapper input { + box-sizing: content-box !important; +} .party-notification-container { z-index: 99999 !important; bottom: 0.8rem !important; @@ -307,7 +311,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%; diff --git a/functions/modules/createRoom.js b/functions/modules/createRoom.js index fafdeaa..6184e79 100644 --- a/functions/modules/createRoom.js +++ b/functions/modules/createRoom.js @@ -1,21 +1,27 @@ -const admin = require('firebase-admin'); +const admin = require("firebase-admin"); module.exports = async (req, res) => { const bodydata = JSON.parse(req.body); - console.log('Requested Create - UID - ', bodydata.uid); - if (!bodydata.userName) res.status(400).send({ message: 'Missing user name' }); - if (!bodydata.partyName) res.status(400).send({ message: 'Missing party name' }); - if (!bodydata.partyPin) res.status(400).send({ message: 'Missing party pin' }); + console.log("Requested Create - UID - ", bodydata.uid); + if (!bodydata.userName) + res.status(400).send({ message: "Missing user name" }); + if (!bodydata.partyName) + res.status(400).send({ message: "Missing party name" }); + if (!bodydata.partyPin) + res.status(400).send({ message: "Missing party pin" }); const roomNameTaken = await admin .firestore() - .collection('rooms') - .doc(bodydata.partyName.replace('/', '\\')) + .collection("rooms") + .doc(bodydata.partyName.replace("/", "\\")) .get() .then((docSnap) => docSnap.exists); - if (roomNameTaken) return res.status(409).send({ message: 'That party name is already taken' }); + if (roomNameTaken) + return res + .status(409) + .send({ message: "That party name is already taken" }); await admin .firestore() - .collection('rooms') + .collection("rooms") .doc(bodydata.partyName) .set({ name: bodydata.partyName, @@ -26,17 +32,17 @@ module.exports = async (req, res) => { adminOnly: bodydata.adminOnly, }) .catch((err) => { - res.status(500).send({ message: 'Unable to start party.' }); + res.status(500).send({ message: "Unable to start party." }); console.error(err); }); await admin .firestore() - .collection('rooms') + .collection("rooms") .doc(bodydata.partyName) - .collection('messages') + .collection("messages") .add({ - uid: '', - name: '', + uid: "", + name: "", text: `${bodydata.userName} started the party.`, time: new Date(), }) @@ -48,9 +54,9 @@ module.exports = async (req, res) => { }); await admin .firestore() - .collection('rooms') + .collection("rooms") .doc(bodydata.partyName) - .collection('users') + .collection("users") .doc(bodydata.uid) .set({ admin: true, @@ -62,24 +68,47 @@ module.exports = async (req, res) => { err ); }); - if ( - bodydata.player && - (bodydata.player.source === 'amazon.' || bodydata.player.source === 'hulu.') - ) { + if (bodydata.player && bodydata.player.source === "amazon.") { await admin .firestore() - .collection('rooms') + .collection("rooms") .doc(bodydata.partyName) - .collection('messages') + .collection("messages") .add({ - uid: '', - name: '', + uid: "", + name: "Update to V1.6.1", + endpoint: "https://get.chromewatchparty.com", + type: "interactive/link", + text: `If Watch Party doesn't work make sure you're on V1.6.1. Try removing and re-adding if an update option is not visible`, + time: new Date(), + }) + .catch((err) => { + console.error( + `Failed to add amazon error message : \n\t Room: ${bodydata.partyName}`, + err + ); + }); + } + if (bodydata.player && bodydata.player.source === "hulu.") { + await admin + .firestore() + .collection("rooms") + .doc(bodydata.partyName) + .collection("messages") + .add({ + uid: "", + name: "", text: `Watch Party may not work temporarily. An update is coming to fix this.`, time: new Date(), }) .catch((err) => { - console.error(`Failed to add amazon error message : \n\t Room: ${bodydata.partyName}`, err); + console.error( + `Failed to add amazon error message : \n\t Room: ${bodydata.partyName}`, + err + ); }); } - res.status(201).send({ roomId: bodydata.partyName, message: 'Started a party!' }); + res + .status(201) + .send({ roomId: bodydata.partyName, message: "Started a party!" }); }; diff --git a/functions/package-lock.json b/functions/package-lock.json index 8d6c44b..fbaec9a 100644 --- a/functions/package-lock.json +++ b/functions/package-lock.json @@ -1,6 +1,6 @@ { "name": "watch-party-api", - "version": "1.6.0", + "version": "1.6.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/functions/package.json b/functions/package.json index 5781704..91617ea 100644 --- a/functions/package.json +++ b/functions/package.json @@ -1,6 +1,6 @@ { "name": "watch-party-api", - "version": "1.6.1", + "version": "1.6.2", "description": "Cloud Functions for Watch Party", "scripts": { "lint": "eslint .", diff --git a/package.json b/package.json index 7b76915..d5762b8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "watch-party", - "version": "1.6.1", + "version": "1.6.2", "description": "Watch Party", "scripts": { "start": "firebase emulators:start", diff --git a/website/welcome/index.html b/website/welcome/index.html index 07d6f3c..f07d6f9 100644 --- a/website/welcome/index.html +++ b/website/welcome/index.html @@ -212,6 +212,17 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION. Yes, Watch Party is not a hack. The sole purpose of Watch Party is to help synchronize the playing/pausing on streamed content.

+ +
+
+ CAN I DISABLE WATCH PARTY TEMPORARILY +
+

+ Watch Party is built to not be in your way but, it can be manually disabled by going to the Chrome Extensions page (chrome://extensions) and toggling the little blue switch next to Watch Party. +
+ You can alternatively go to a supported website, then right click on the Watch Party icons in toolbar (next to your user icon in the top right of Chrome), select "This can read and change site data", and change that to "When you click the extension" option. This will require you to click on the icon when you want to activate Watch Party. +

+
HOW CAN I HELP KEEP WATCH PARTY ALIVE @@ -260,14 +271,6 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION. Click on the title card in the sidebar, and click on the End Party button. Ending a party immediately deletes all data.

-
-
- CAN I DISABLE WATCH PARTY TEMPORARILY -
-

- Watch Party is built to not be in your way but, it can be manually disabled by going to the Chrome Extensions page (chrome://extensions). -

-
Ask A New Question