From 0539af91c3b148d6519661e107ea0757c1003528 Mon Sep 17 00:00:00 2001 From: Ayushya Amitabh Date: Sun, 10 May 2020 03:13:28 -0400 Subject: [PATCH] v1.1.0-beta/all fixes + styling --- functions/index.js | 2 +- public/background.js | 12 ++++++++---- src/Chat.js | 24 +++++++++++++++++++----- src/Create.js | 6 ++++-- src/Thread.css | 12 +++++++++++- src/Thread.js | 18 ++++++++++++++++-- src/VideoListener.js | 19 ++++++++----------- src/index.css | 22 ++++++++++++++-------- src/index.js | 2 -- 9 files changed, 81 insertions(+), 36 deletions(-) diff --git a/functions/index.js b/functions/index.js index 0960550..9e76768 100644 --- a/functions/index.js +++ b/functions/index.js @@ -384,7 +384,7 @@ const updatePlayer = async (req, res) => { .add({ uid: '', name: '', - text: `${userName} changed show \n${player.showName ? 'to ' + player.showName : ''}`, + text: `${userName} changed \n${player.showName ? 'to ' + player.showName : ''}`, time: new Date(), }); } diff --git a/public/background.js b/public/background.js index 531785d..402cdc8 100644 --- a/public/background.js +++ b/public/background.js @@ -67,11 +67,15 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { }); chrome.runtime.onConnect.addListener((port) => { - port.onDisconnect.addListener(() => {}); + port.onDisconnect.addListener(() => { + port.roomListener && port.roomListener(); + port.userListener && port.userListener(); + port.messageListener && port.messageListener(); + }); port.onMessage.addListener((request) => { const { type, roomId } = request; if (type === 'INIT') { - firebase + port.roomListener = firebase .firestore() .collection('rooms') .doc(roomId) @@ -85,7 +89,7 @@ chrome.runtime.onConnect.addListener((port) => { port.postMessage({ isError: true, ...err }); } ); - firebase + port.userListener = firebase .firestore() .collection('rooms') .doc(roomId) @@ -103,7 +107,7 @@ chrome.runtime.onConnect.addListener((port) => { port.postMessage({ isError: true, ...err }); } ); - firebase + port.messageListener = firebase .firestore() .collection('rooms') .doc(roomId) diff --git a/src/Chat.js b/src/Chat.js index 6acfa09..feeea65 100644 --- a/src/Chat.js +++ b/src/Chat.js @@ -16,12 +16,25 @@ import Delete from '@material-ui/icons/Delete'; import Gif from '@material-ui/icons/Gif'; import { Carousel } from '@giphy/react-components'; import { GiphyFetch } from '@giphy/js-fetch-api'; -import { SendMessageApi, LeaveRoomApi, DeleteRoomApi, UpdatePlayerApi, PLAYER_STATUS } from './Api'; +import { + SendMessageApi, + LeaveRoomApi, + DeleteRoomApi, + UpdatePlayerApi, + getPlayerSource, + PLAYER_SOURCE, +} from './Api'; import { goTo } from 'route-lite'; import Create from './Create'; import VideoListener from './VideoListener'; const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq'); +const huluAlert = { + name: '', + text: 'Time sync is not available on Hulu yet.', + time: '', + uid: '', +}; export default class Chat extends Component { constructor(props) { super(props); @@ -30,7 +43,6 @@ export default class Chat extends Component { messages: [], newMessage: '', admin: null, - player: {}, gif: false, }; this.sendMessage = this.sendMessage.bind(this); @@ -89,11 +101,11 @@ export default class Chat extends Component { this.syncPlayer(video); } syncPlayer(video) { - const { status, showName, time, source, element } = video; + const { status, showName, time, source, element, showChanged } = video; if (element) { UpdatePlayerApi({ roomId: window.localStorage.getItem('watchPartyRoomId'), - showChanged: showName !== this.state.player.showName, + showChanged, userName: window.localStorage.getItem('watchPartyUserName'), player: { status, @@ -201,6 +213,8 @@ export default class Chat extends Component { } render() { const { admin, name, messages, newMessage, gif } = this.state; + if (getPlayerSource() === PLAYER_SOURCE.HULU && messages[0] !== huluAlert) + messages.unshift(huluAlert); return (
@@ -242,7 +256,7 @@ export default class Chat extends Component { id: 'chat-message-box-input', endAdornment: ( - + this.sendMessageInvoker(newMessage)} edge="end"> diff --git a/src/Create.js b/src/Create.js index b008e2c..bbeb0dd 100644 --- a/src/Create.js +++ b/src/Create.js @@ -112,10 +112,11 @@ const Create = (props) => { setName(e.target.value)} + onChange={(e) => (e.target.value.length <= 24 ? setName(e.target.value) : null)} className="name-field" label="Name" variant="filled" + helperText={name.length > 0 ? `${name.length}/24` : null} InputProps={{ endAdornment: ( @@ -134,7 +135,8 @@ const Create = (props) => { fullWidth value={createName} className="card-field addFocus" - onChange={(e) => setCreateName(e.target.value)} + onChange={(e) => (e.target.value.length <= 24 ? setCreateName(e.target.value) : null)} + helperText={createName.length > 0 ? `${createName.length}/24` : null} label="Party Name" />
); } else { @@ -47,7 +61,7 @@ const Thread = (props) => {m.text} )} - {new Date(m.time).toLocaleTimeString()} + {new Date(m.time.seconds * 1000).toLocaleTimeString()}
); } diff --git a/src/VideoListener.js b/src/VideoListener.js index bc93550..0f22861 100644 --- a/src/VideoListener.js +++ b/src/VideoListener.js @@ -1,6 +1,6 @@ import { PLAYER_STATUS, getPlayerSource, PLAYER_SOURCE } from './Api'; -const templateListener = (video) => console.log(video); +const templateListener = (video) => console.log('MISSING VIDEO LISTENER'); export default class VideoListener { constructor(listener = templateListener) { @@ -36,19 +36,14 @@ export default class VideoListener { updateStatus(newStatus) { this.video = Object.assign({}, this.video, newStatus); if (this.shouldPushSync()) { - console.log(this.video); - this.listener(this.video); + this.listener({ + ...this.video, + showChanged: this.video.showName !== this.server.showName, + }); } } async doUpdate(serverPlayer) { this.server = serverPlayer; - console.log( - ` - isUpdating : ${this.isUpdating}\n - showName eq: ${serverPlayer.showName === this.video.showName}\n - updatedByMe: ${serverPlayer.updatedBy !== window.localStorage.getItem('watchPartyUserUid')} - ` - ); if ( this.isUpdating === false && serverPlayer.showName === this.video.showName && @@ -67,11 +62,13 @@ export default class VideoListener { window.postMessage({ type: 'SEEK', time: serverPlayer.time * 1000 }, '*'); break; case PLAYER_SOURCE.AMAZON: - await this.video.element.play(); + if (this.video.status === PLAYER_STATUS.PAUSED) await this.video.element.play(); this.video.element.currentTime = serverPlayer.time; + await this.timeout(500); break; case PLAYER_SOURCE.DISNEY: this.video.element.currentTime = serverPlayer.time; + await this.timeout(500); break; default: break; diff --git a/src/index.css b/src/index.css index ff81b5b..a90ac08 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,6 @@ :root { - --party-width: 22rem; - --neg-party-width: -22rem; + --party-width: 350px; + --neg-party-width: -350px; --body-width: calc(100% - var(--party-width)); } body { @@ -209,14 +209,10 @@ body.amazon-prime textarea:focus { } .room-title { text-overflow: ellipsis !important; - word-break: break-all !important; + word-break: break-word !important; overflow: hidden !important; padding-right: 1rem !important; } -.room-title, -.brand-title { - padding-left: 1rem !important; -} .thread-container::-webkit-scrollbar { width: 5px; } @@ -236,17 +232,27 @@ textarea::-webkit-scrollbar { } .party-chat-header { display: flex; - align-items: center; + align-items: flex-start; + padding-left: 2.25rem; } .party-chat-header-text { flex: 1; } +.party-controls { + margin-top: 2rem; +} +.party-controls .MuiButton-startIcon { + margin-right: 0px !important; +} .party-control-button-text { display: none; } .party-controls button:hover .party-control-button-text { display: initial; } +.party-controls button:hover .MuiButton-startIcon { + margin-right: 8px !important; +} .giphy-carousel { margin-top: 1rem; min-height: fit-content; diff --git a/src/index.js b/src/index.js index 7f79ba2..55f37e9 100644 --- a/src/index.js +++ b/src/index.js @@ -43,8 +43,6 @@ switch (getPlayerSource()) { const ds = document.createElement('script'); ds.text = `window.doquery=function(){window.huluPlayer=window.queryObjects(window.HuluMediaPlayer);}`; document.head.appendChild(ds); - if (window.queryObjects) console.log('canqyery'); - else console.log('cantqyery'); break; case PLAYER_SOURCE.AMAZON: document.body.classList.add('amazon-prime');