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

v1.1.0-beta/all fixes + styling

Browse Source
This commit is contained in:
ayushya
2020-05-10 03:13:28 -04:00
parent 041e7c77e1
commit 0539af91c3
9 changed files with 81 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Chat.js
+19 -5
View File
@@ -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: '<alert>',
text: 'Time sync is not available on Hulu yet.',
time: '',
uid: '<system>',
};
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 (
<div className="party-chat-container">
<div className="party-chat-header">
@@ -242,7 +256,7 @@ export default class Chat extends Component {
id: 'chat-message-box-input',
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={this.sendMessageInvoker} edge="end">
<IconButton onClick={() => this.sendMessageInvoker(newMessage)} edge="end">
<Send />
</IconButton>
</InputAdornment>
src/Create.js
+4 -2
View File
@@ -112,10 +112,11 @@ const Create = (props) => {
<TextField
fullWidth
value={name}
onChange={(e) => 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: (
<InputAdornment position="end">
@@ -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"
/>
<Button
src/Thread.css
+11 -1
View File
@@ -17,6 +17,15 @@
margin-top: 7.5px !important;
color: rgba(100, 100, 100, 0.8) !important;
}
.system-message.alert {
background-color: black;
border-radius: 1rem;
color: white !important;
padding: 5px 10px;
position: sticky;
top: 2px;
z-index: 1;
}
.my-message {
display: block;
width: fit-content;
@@ -62,8 +71,9 @@ img.party-message {
font-size: 10px !important;
}
.time {
top: 0;
color: #3a3a3a;
position: absolute;
bottom: 50%;
opacity: 0;
transition: all ease-in-out 0.3s;
}
src/Thread.js
+16 -2
View File
@@ -1,11 +1,25 @@
import React from 'react';
import { Typography } from '@material-ui/core';
import './Thread.css';
import firebase from 'firebase/app';
import 'firebase/firestore';
const Thread = (props) =>
props.messages.map((m, midx) => {
const userUid = window.localStorage.getItem('watchPartyUserUid');
if (m.uid === '<system>') {
if (m.name === '<alert>') {
return (
<Typography
variant="body2"
className="thread-item system-message alert"
key={m.id}
disabled
>
{m.text}
</Typography>
);
}
return (
<Typography variant="body2" className="thread-item system-message" key={m.id} disabled>
{m.text}
@@ -26,7 +40,7 @@ const Thread = (props) =>
{m.text}
</Typography>
)}
<span className="time">{new Date(m.time).toLocaleTimeString()}</span>
<span className="time">{new Date(m.time.seconds * 1000).toLocaleTimeString()}</span>
</div>
);
} else {
@@ -47,7 +61,7 @@ const Thread = (props) =>
{m.text}
</Typography>
)}
<span className="time">{new Date(m.time).toLocaleTimeString()}</span>
<span className="time">{new Date(m.time.seconds * 1000).toLocaleTimeString()}</span>
</div>
);
}
src/VideoListener.js
+8 -11
View File
@@ -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;
src/index.css
+14 -8
View File
@@ -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;
src/index.js
-2
View File
@@ -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');