v1.3.0-beta/UI redone
This commit is contained in:
Generated
+124
-3
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "watch-party-crx",
|
||||
"version": "1.2.0",
|
||||
"version": "1.2.1",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@@ -1914,6 +1914,64 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@voxeet/voxeet-web-sdk": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@voxeet/voxeet-web-sdk/-/voxeet-web-sdk-2.3.1.tgz",
|
||||
"integrity": "sha512-y3/rewt+Rtkk7KVUY9DuYffAY9s+m2nrvumfFuwMnOxAeJw2N4fB1KuyGx80MQqk70xpFfZCLTt3JO6l19uJIg==",
|
||||
"requires": {
|
||||
"bowser": "^2.8.1",
|
||||
"browserslist": "^4.5.2",
|
||||
"btoa": "^1.1.2",
|
||||
"events": "^1.1.0",
|
||||
"get-float-time-domain-data": "^0.1.0",
|
||||
"global": "^4.4.0",
|
||||
"lodash": "^4.17.4",
|
||||
"moment": "^2.24.0",
|
||||
"sdp": "^2.3.0",
|
||||
"webrtc-adapter": "^6.3.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"browserslist": {
|
||||
"version": "4.12.0",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
|
||||
"integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
|
||||
"requires": {
|
||||
"caniuse-lite": "^1.0.30001043",
|
||||
"electron-to-chromium": "^1.3.413",
|
||||
"node-releases": "^1.1.53",
|
||||
"pkg-up": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001066",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001066.tgz",
|
||||
"integrity": "sha512-Gfj/WAastBtfxLws0RCh2sDbTK/8rJuSeZMecrSkNGYxPcv7EzblmDGfWQCFEQcSqYE2BRgQiJh8HOD07N5hIw=="
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.3.455",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.455.tgz",
|
||||
"integrity": "sha512-4lwnxp+ArqOX9hiLwLpwhfqvwzUHFuDgLz4NTiU3lhygUzWtocIJ/5Vix+mWVNE2HQ9aI1k2ncGe5H/0OktMvA=="
|
||||
},
|
||||
"events": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
|
||||
"integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
|
||||
},
|
||||
"node-releases": {
|
||||
"version": "1.1.57",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.57.tgz",
|
||||
"integrity": "sha512-ZQmnWS7adi61A9JsllJ2gdj2PauElcjnOwTp2O011iGzoakTxUsDGSe+6vD7wXbKdqhSFymC0OSx35aAMhrSdw=="
|
||||
},
|
||||
"pkg-up": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz",
|
||||
"integrity": "sha1-yBmscoBZpGHKscOImivjxJoATX8=",
|
||||
"requires": {
|
||||
"find-up": "^2.1.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@webassemblyjs/ast": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
|
||||
@@ -3054,6 +3112,11 @@
|
||||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
||||
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
|
||||
},
|
||||
"bowser": {
|
||||
"version": "2.9.0",
|
||||
"resolved": "https://registry.npmjs.org/bowser/-/bowser-2.9.0.tgz",
|
||||
"integrity": "sha512-2ld76tuLBNFekRgmJfT2+3j5MIrP6bFict8WAIT3beq+srz1gcKNAdNKMqHqauQt63NmAa88HfP1/Ypa9Er3HA=="
|
||||
},
|
||||
"boxen": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
|
||||
@@ -3248,6 +3311,11 @@
|
||||
"node-int64": "^0.4.0"
|
||||
}
|
||||
},
|
||||
"btoa": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
|
||||
"integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
|
||||
},
|
||||
"buffer": {
|
||||
"version": "4.9.2",
|
||||
"resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
|
||||
@@ -4951,6 +5019,11 @@
|
||||
"urijs": "^1.16.1"
|
||||
}
|
||||
},
|
||||
"dom-walk": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
|
||||
"integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
|
||||
},
|
||||
"domain-browser": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
|
||||
@@ -7628,6 +7701,11 @@
|
||||
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
|
||||
"integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
|
||||
},
|
||||
"get-float-time-domain-data": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/get-float-time-domain-data/-/get-float-time-domain-data-0.1.0.tgz",
|
||||
"integrity": "sha1-XYVZJKQwOITJY4qrEnzOTQBlljs="
|
||||
},
|
||||
"get-stdin": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
|
||||
@@ -7686,6 +7764,15 @@
|
||||
"resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz",
|
||||
"integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs="
|
||||
},
|
||||
"global": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
|
||||
"integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
|
||||
"requires": {
|
||||
"min-document": "^2.19.0",
|
||||
"process": "^0.11.10"
|
||||
}
|
||||
},
|
||||
"global-dirs": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
|
||||
@@ -10084,6 +10171,14 @@
|
||||
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
|
||||
"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
|
||||
},
|
||||
"min-document": {
|
||||
"version": "2.19.0",
|
||||
"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
|
||||
"integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
|
||||
"requires": {
|
||||
"dom-walk": "^0.1.0"
|
||||
}
|
||||
},
|
||||
"mini-css-extract-plugin": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.2.tgz",
|
||||
@@ -10178,6 +10273,11 @@
|
||||
"minimist": "^1.2.5"
|
||||
}
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.26.0",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
|
||||
"integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw=="
|
||||
},
|
||||
"move-concurrently": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
|
||||
@@ -12375,8 +12475,7 @@
|
||||
"process": {
|
||||
"version": "0.11.10",
|
||||
"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
|
||||
"integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
|
||||
"dev": true
|
||||
"integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
|
||||
},
|
||||
"process-nextick-args": {
|
||||
"version": "2.0.1",
|
||||
@@ -13662,6 +13761,14 @@
|
||||
"resolved": "https://registry.npmjs.org/route-lite/-/route-lite-0.3.0.tgz",
|
||||
"integrity": "sha512-5A5Mh7gbQfk1P7u0jh0O87vu+/zAyS1xx16YO6ds+4oeLR6cuVtncEA8/d4qevSBv4hijvLloI+IKybtZMUB9g=="
|
||||
},
|
||||
"rtcpeerconnection-shim": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
|
||||
"integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
|
||||
"requires": {
|
||||
"sdp": "^2.6.0"
|
||||
}
|
||||
},
|
||||
"run-async": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.0.tgz",
|
||||
@@ -13760,6 +13867,11 @@
|
||||
"ajv-keywords": "^3.4.1"
|
||||
}
|
||||
},
|
||||
"sdp": {
|
||||
"version": "2.12.0",
|
||||
"resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz",
|
||||
"integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
|
||||
},
|
||||
"select-hose": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
|
||||
@@ -16514,6 +16626,15 @@
|
||||
"source-map": "~0.6.1"
|
||||
}
|
||||
},
|
||||
"webrtc-adapter": {
|
||||
"version": "6.4.8",
|
||||
"resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-6.4.8.tgz",
|
||||
"integrity": "sha512-YM8yl545c/JhYcjGHgaCoA7jRK/KZuMwEDFeP2AcP0Auv5awEd+gZE0hXy9z7Ed3p9HvAXp8jdbe+4ESb1zxAw==",
|
||||
"requires": {
|
||||
"rtcpeerconnection-shim": "^1.2.14",
|
||||
"sdp": "^2.9.0"
|
||||
}
|
||||
},
|
||||
"websocket-driver": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.3.tgz",
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
"@giphy/react-components": "^1.0.4",
|
||||
"@material-ui/core": "^4.9.10",
|
||||
"@material-ui/icons": "^4.9.1",
|
||||
"@voxeet/voxeet-web-sdk": "^2.3.1",
|
||||
"autoprefixer": "7.1.6",
|
||||
"babel-core": "6.26.3",
|
||||
"babel-eslint": "10.x",
|
||||
|
||||
@@ -12,7 +12,8 @@
|
||||
"https://*.amazon.com/*",
|
||||
"https://*.disneyplus.com/*",
|
||||
"https://*.youtube.com/*",
|
||||
"https://play.hbonow.com/*"
|
||||
"https://play.hbonow.com/*",
|
||||
"http://localhost/*"
|
||||
],
|
||||
"content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'",
|
||||
"content_scripts": [
|
||||
|
||||
+14
-4
@@ -1,9 +1,9 @@
|
||||
/*global chrome*/
|
||||
|
||||
const API_HOST = window.location.href.startsWith('http://localhost')
|
||||
? 'http://localhost:5001/watch-party-crx/us-central1/widgets'
|
||||
: // : 'http://localhost:5001/watch-party-crx/us-central1/widgets';
|
||||
'https://us-central1-watch-party-crx.cloudfunctions.net/widgets';
|
||||
? 'http://localhost:5000/watch-party-crx/us-central1/widgets'
|
||||
: // : 'https://us-central1-watch-party-crx.cloudfunctions.net/widgets';
|
||||
'http://localhost:5000/watch-party-crx/us-central1/widgets';
|
||||
|
||||
export const PLAYER_STATUS = {
|
||||
PLAYING: 'PLAYING',
|
||||
@@ -32,6 +32,16 @@ export const getPlayerSource = () => {
|
||||
if (HREF.startsWith(PLAYER_SOURCE.LOCAL)) return PLAYER_SOURCE.LOCAL;
|
||||
};
|
||||
|
||||
export const LocalData = () => {
|
||||
return JSON.parse(window.localStorage.getItem('WatchParty')) || {};
|
||||
};
|
||||
|
||||
export const updateLocalData = (data) => {
|
||||
window.localStorage.setItem('WatchParty', JSON.stringify(Object.assign({}, LocalData(), data)));
|
||||
};
|
||||
|
||||
export const emptyLocalData = () => window.localStorage.setItem('WatchParty', undefined);
|
||||
|
||||
export const getUserUid = async () =>
|
||||
new Promise((resolve, reject) => {
|
||||
chrome.runtime.sendMessage(
|
||||
@@ -40,7 +50,7 @@ export const getUserUid = async () =>
|
||||
},
|
||||
(response) => {
|
||||
const { uid } = response;
|
||||
window.localStorage.setItem('watchPartyUserUid', uid);
|
||||
updateLocalData({ userUid: uid });
|
||||
resolve(uid);
|
||||
}
|
||||
);
|
||||
|
||||
+4
-1
@@ -12,7 +12,10 @@ const darkTheme = createMuiTheme({
|
||||
palette: {
|
||||
type: 'dark',
|
||||
primary: {
|
||||
main: '#a6d4fa',
|
||||
main: '#FF0000',
|
||||
},
|
||||
secondary: {
|
||||
main: '#c0f300',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { VoxeetSDK } from '@voxeet/voxeet-web-sdk';
|
||||
import { GetVoxeetTokenApi, GetRefreshedVoxeetTokenApi } from './Api';
|
||||
|
||||
class CallManager {
|
||||
export default class CallManager {
|
||||
constructor(listener) {
|
||||
this.listener = listener;
|
||||
this.__refreshToken = null;
|
||||
|
||||
+124
-24
@@ -7,6 +7,11 @@ import {
|
||||
IconButton,
|
||||
ButtonGroup,
|
||||
Button,
|
||||
ExpansionPanel,
|
||||
ExpansionPanelSummary,
|
||||
ExpansionPanelDetails,
|
||||
Card,
|
||||
CardContent,
|
||||
} from '@material-ui/core';
|
||||
import Thread from './Thread';
|
||||
import Send from '@material-ui/icons/Send';
|
||||
@@ -27,11 +32,20 @@ import {
|
||||
UpdatePlayerApi,
|
||||
getPlayerSource,
|
||||
PLAYER_SOURCE,
|
||||
LocalData,
|
||||
PLAYER_STATUS,
|
||||
} from './Api';
|
||||
import { goTo } from 'route-lite';
|
||||
import Create from './Create';
|
||||
import VideoListener from './VideoListener';
|
||||
import CallManager from './CallManager';
|
||||
import {
|
||||
MoreVert,
|
||||
FileCopyTwoTone,
|
||||
PauseCircleFilled,
|
||||
LinkOutlined,
|
||||
PlayCircleFilled,
|
||||
} from '@material-ui/icons';
|
||||
|
||||
const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
|
||||
const alertMessage = {
|
||||
@@ -51,6 +65,7 @@ export default class Chat extends Component {
|
||||
gif: false,
|
||||
onCall: false,
|
||||
muted: false,
|
||||
menuPopover: true,
|
||||
};
|
||||
this.port = null;
|
||||
this.gifClick = this.gifClick.bind(this);
|
||||
@@ -86,11 +101,11 @@ export default class Chat extends Component {
|
||||
this.mVideoListener.start();
|
||||
|
||||
// CHROME FIREBASE FIRESTORE LISTENER
|
||||
this.port = chrome.runtime.connect({ name: window.localStorage.getItem('watchPartyRoomId') });
|
||||
this.port = chrome.runtime.connect({ name: LocalData().partyName });
|
||||
// Initialize listener
|
||||
this.port.postMessage({
|
||||
type: 'INIT',
|
||||
roomId: window.localStorage.getItem('watchPartyRoomId'),
|
||||
roomId: LocalData().partyName,
|
||||
});
|
||||
// Listener
|
||||
this.port.onMessage.addListener((response) => {
|
||||
@@ -119,15 +134,16 @@ export default class Chat extends Component {
|
||||
const { status, showName, time, source, element, showChanged } = video;
|
||||
if (element) {
|
||||
UpdatePlayerApi({
|
||||
roomId: window.localStorage.getItem('watchPartyRoomId'),
|
||||
roomId: LocalData().partyName,
|
||||
showChanged,
|
||||
userName: window.localStorage.getItem('watchPartyUserName'),
|
||||
userName: LocalData().userName,
|
||||
player: {
|
||||
status,
|
||||
showName,
|
||||
time,
|
||||
source,
|
||||
updatedBy: window.localStorage.getItem('watchPartyUserUid'),
|
||||
updatedBy: LocalData().userUid,
|
||||
url: window.location.href,
|
||||
},
|
||||
}).catch((err) => {
|
||||
this.props.updateLoading(false);
|
||||
@@ -142,12 +158,12 @@ export default class Chat extends Component {
|
||||
this.props.notify('Ending party...');
|
||||
this.props.updateLoading(true);
|
||||
const data = {
|
||||
roomId: window.localStorage.getItem('watchPartyRoomId'),
|
||||
roomId: LocalData().partyName,
|
||||
};
|
||||
DeleteRoomApi(data)
|
||||
.then((res) => {
|
||||
this.props.notify('Ended party');
|
||||
window.localStorage.removeItem('watchPartyRoomId');
|
||||
// window.localStorage.removeItem('watchPartyRoomId');
|
||||
goTo(Create, this.props);
|
||||
this.props.updateLoading(false);
|
||||
})
|
||||
@@ -161,13 +177,13 @@ export default class Chat extends Component {
|
||||
this.props.notify('Leaving party...');
|
||||
this.props.updateLoading(true);
|
||||
const data = {
|
||||
roomId: window.localStorage.getItem('watchPartyRoomId'),
|
||||
uid: window.localStorage.getItem('watchPartyUserUid'),
|
||||
roomId: LocalData().partyName,
|
||||
uid: LocalData().userUid,
|
||||
};
|
||||
LeaveRoomApi(data)
|
||||
.then((res) => {
|
||||
this.props.notify('Left party');
|
||||
window.localStorage.removeItem('watchPartyRoomId');
|
||||
// window.localStorage.removeItem('watchPartyRoomId');
|
||||
goTo(Create, this.props);
|
||||
this.props.updateLoading(false);
|
||||
})
|
||||
@@ -179,12 +195,14 @@ export default class Chat extends Component {
|
||||
}
|
||||
shareParty() {
|
||||
const el = document.createElement('textarea');
|
||||
el.value = window.localStorage.getItem('watchPartyRoomId');
|
||||
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.body.removeChild(el);
|
||||
this.props.notify('Copied room code');
|
||||
this.props.notify('Copied party invitation');
|
||||
}
|
||||
sendMessage(message) {
|
||||
const data = {
|
||||
@@ -225,54 +243,136 @@ export default class Chat extends Component {
|
||||
this.mCallManager.toggleMute();
|
||||
this.setState({ muted: !this.state.muted });
|
||||
}
|
||||
getPrettyTime(t) {
|
||||
return t > 3600
|
||||
? new Date(t * 1000).toISOString().substr(11, 8)
|
||||
: new Date(t * 1000).toISOString().substr(14, 5);
|
||||
}
|
||||
render() {
|
||||
const { admin, name, messages, newMessage, gif, onCall, muted } = this.state;
|
||||
const { admin, name, messages, newMessage, gif, onCall, muted, player } = this.state;
|
||||
if (getPlayerSource() === PLAYER_SOURCE.HBONOW && messages[0] !== alertMessage)
|
||||
messages.unshift(alertMessage);
|
||||
return (
|
||||
<div className="party-chat-container">
|
||||
<div className="party-chat-header">
|
||||
<ExpansionPanel elevation={0} className="expander">
|
||||
<ExpansionPanelSummary
|
||||
expandIcon={
|
||||
<MoreVert
|
||||
alt="Share, leave, and other controls"
|
||||
aria-label="Share, leave, and other controls"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div className="party-chat-header-text">
|
||||
<Typography className="brand-title" variant="overline" display="block">
|
||||
<Typography
|
||||
color="secondary"
|
||||
className="brand-title"
|
||||
variant="caption"
|
||||
display="block"
|
||||
>
|
||||
WATCH PARTY
|
||||
</Typography>
|
||||
<Typography className="room-title" variant="h4" gutterBottom>
|
||||
<Typography color="textPrimary" className="room-title" variant="h4" gutterBottom>
|
||||
{name}
|
||||
</Typography>
|
||||
</div>
|
||||
<ButtonGroup className="party-controls" size="small" color="secondary">
|
||||
<Button onClick={this.shareParty} startIcon={<Share />}>
|
||||
<span className="party-control-button-text">Share</span>
|
||||
</Button>
|
||||
</ExpansionPanelSummary>
|
||||
<ExpansionPanelDetails>
|
||||
<TextField
|
||||
label="Party Details"
|
||||
value={`Party Name: ${LocalData().partyName}\nParty Pin: ${LocalData().partyPin}\n${
|
||||
window.location.href
|
||||
}`}
|
||||
multiline
|
||||
rowsMax={2}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton onClick={this.shareParty}>
|
||||
<Share />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<ButtonGroup fullWidth className="party-controls" size="small">
|
||||
<Button onClick={this.leaveParty} startIcon={<Exit />}>
|
||||
<span className="party-control-button-text">Leave</span>
|
||||
<Typography variant="caption" className="party-control-button-text">
|
||||
Leave
|
||||
</Typography>
|
||||
</Button>
|
||||
{admin && (
|
||||
<Button onClick={this.endParty} startIcon={<Delete />}>
|
||||
<span className="party-control-button-text">End</span>
|
||||
<Typography variant="caption" className="party-control-button-text">
|
||||
End
|
||||
</Typography>
|
||||
</Button>
|
||||
)}
|
||||
</ButtonGroup>
|
||||
</ExpansionPanelDetails>
|
||||
</ExpansionPanel>
|
||||
{player ? (
|
||||
<Card elevation={0} className="media-info-card">
|
||||
{player.showName && player.status !== PLAYER_STATUS.NOT_PLAYING ? (
|
||||
<CardContent>
|
||||
<Typography className="media-info-at" variant="overline">
|
||||
{player.status === PLAYER_STATUS.PAUSED
|
||||
? `PAUSED AT ${this.getPrettyTime(player.time)}`
|
||||
: player.status === PLAYER_STATUS.PLAYING
|
||||
? `STARTED PLAYING FROM ${this.getPrettyTime(player.time)}`
|
||||
: `SHOW IS AT ${this.getPrettyTime(player.time)}`}
|
||||
</Typography>
|
||||
<div className="media-info-container">
|
||||
{player.status === PLAYER_STATUS.PAUSED ? (
|
||||
<PauseCircleFilled className="media-info-icon" />
|
||||
) : (
|
||||
<PlayCircleFilled className="media-info-icon" />
|
||||
)}
|
||||
<div className="media-info-right">
|
||||
<Typography className="show-name" variant="subtitle1">
|
||||
{player.showName}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
) : (
|
||||
<CardContent>
|
||||
<Typography className="media-info-at" variant="caption">
|
||||
Nothing playing right now
|
||||
</Typography>
|
||||
</CardContent>
|
||||
)}
|
||||
{player && player.showName && player.status ? (
|
||||
<Button className="media-info-link" href={player.url} startIcon={<LinkOutlined />}>
|
||||
Link to show
|
||||
</Button>
|
||||
) : null}
|
||||
</Card>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="thread-container">
|
||||
<Thread messages={messages} />
|
||||
</div>
|
||||
<div className="text-phone-panel">
|
||||
{gif || newMessage ? null : (
|
||||
<IconButton onClick={this.handlePhoneCall} color={onCall ? 'secondary' : 'primary'}>
|
||||
<IconButton onClick={this.handlePhoneCall} color={!onCall ? 'secondary' : 'primary'}>
|
||||
{onCall ? <PhoneDisable /> : <PhoneEnable />}
|
||||
</IconButton>
|
||||
)}
|
||||
{!gif && !newMessage && onCall && !muted ? (
|
||||
<IconButton onClick={this.handleMute} color="secondary">
|
||||
<IconButton onClick={this.handleMute} color="primary">
|
||||
<MicOff />
|
||||
</IconButton>
|
||||
) : !gif && !newMessage && onCall && muted ? (
|
||||
<IconButton onClick={this.handleMute} color="primary">
|
||||
<IconButton onClick={this.handleMute} color="secondary">
|
||||
<MicOn />
|
||||
</IconButton>
|
||||
) : null}
|
||||
<TextField
|
||||
color="secondary"
|
||||
multiline
|
||||
rowsMax="3"
|
||||
size="small"
|
||||
|
||||
+164
-156
@@ -1,200 +1,208 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import { Button, TextField, Typography, Paper, ButtonGroup } from '@material-ui/core';
|
||||
import {
|
||||
Button,
|
||||
InputAdornment,
|
||||
TextField,
|
||||
Typography,
|
||||
IconButton,
|
||||
Paper,
|
||||
} from '@material-ui/core';
|
||||
import Save from '@material-ui/icons/Save';
|
||||
import { JoinRoomApi, CreateRoomApi, PLAYER_STATUS, getPlayerSource } from './Api';
|
||||
JoinRoomApi,
|
||||
CreateRoomApi,
|
||||
PLAYER_STATUS,
|
||||
getPlayerSource,
|
||||
LocalData,
|
||||
updateLocalData,
|
||||
} from './Api';
|
||||
import { goTo } from 'route-lite';
|
||||
import Chat from './Chat';
|
||||
import { ChevronRight } from '@material-ui/icons';
|
||||
|
||||
const saveName = (data) => {
|
||||
const { name, notify } = data;
|
||||
window.localStorage.setItem('watchPartyUserName', name);
|
||||
notify('Saved name');
|
||||
const CONSTANTS = {
|
||||
USER_NAME_LENGTH: 12,
|
||||
NAME_LENGTH: 24,
|
||||
PIN_LENGTH: 9,
|
||||
};
|
||||
const getName = () => window.localStorage.getItem('watchPartyUserName');
|
||||
|
||||
const saveRoomId = (data) => {
|
||||
const { rid, notify } = data;
|
||||
window.localStorage.setItem('watchPartyRoomId', rid);
|
||||
notify('Saved room');
|
||||
export default class Create extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const defaultMode = LocalData().partyName ? 'join' : 'create';
|
||||
this.state = {
|
||||
userName: LocalData().userName || '',
|
||||
name: LocalData().partyName || '',
|
||||
pin: LocalData().partyPin || '',
|
||||
mode: defaultMode,
|
||||
};
|
||||
const getRoomId = () => window.localStorage.getItem('watchPartyRoomId');
|
||||
|
||||
const joinRoom = async (data) => {
|
||||
data.props.updateLoading(true);
|
||||
data.props.notify('Joining party...');
|
||||
const apidata = {
|
||||
roomId: data.joinName.trim(),
|
||||
userName: data.name.trim(),
|
||||
source: getPlayerSource(),
|
||||
};
|
||||
const confirmedRoomId = await JoinRoomApi(apidata)
|
||||
.then((res) => res.json())
|
||||
.then((res) => res.roomId)
|
||||
.catch((err) => {
|
||||
data.props.updateLoading(false);
|
||||
data.props.notify(err.message || err.statusText);
|
||||
console.error('Join Room API error', err);
|
||||
});
|
||||
if (confirmedRoomId && confirmedRoomId === apidata.roomId) {
|
||||
saveName({
|
||||
name: apidata.userName,
|
||||
notify: data.props.notify,
|
||||
});
|
||||
saveRoomId({
|
||||
rid: confirmedRoomId,
|
||||
notify: data.props.notify,
|
||||
});
|
||||
data.props.notify('Joined party');
|
||||
goTo(Chat, data.props);
|
||||
this.createCall = this.createCall.bind(this);
|
||||
this.joinCall = this.joinCall.bind(this);
|
||||
this.success = this.success.bind(this);
|
||||
}
|
||||
};
|
||||
|
||||
const createRoom = async (data) => {
|
||||
data.props.updateLoading(true);
|
||||
data.props.notify('Starting party...');
|
||||
|
||||
partyNameChange(value) {
|
||||
if (value.length <= CONSTANTS.NAME_LENGTH) this.setState({ name: value });
|
||||
}
|
||||
partyPinChange(value) {
|
||||
if (value.length <= CONSTANTS.PIN_LENGTH) this.setState({ pin: value });
|
||||
}
|
||||
userNameChange(value) {
|
||||
if (value.length <= CONSTANTS.USER_NAME_LENGTH) this.setState({ userName: value });
|
||||
}
|
||||
createOrJoin() {
|
||||
const { userName, name, pin, mode } = this.state;
|
||||
if (!userName.replace(/\s+/g, '')) {
|
||||
this.props.notify('Missing user name');
|
||||
return;
|
||||
}
|
||||
if (!name.replace(/\s+/g, '')) {
|
||||
this.props.notify('Missing party name');
|
||||
return;
|
||||
}
|
||||
if (!pin.replace(/\s+/g, '')) {
|
||||
this.props.notify('Missing party pin');
|
||||
return;
|
||||
}
|
||||
if (userName && name && pin) {
|
||||
switch (mode) {
|
||||
case 'create':
|
||||
this.createCall(userName, name, pin);
|
||||
break;
|
||||
case 'join':
|
||||
this.joinCall(userName, name, pin);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
this.props.notify('Double check your inputs');
|
||||
}
|
||||
}
|
||||
createCall(userName, partyName, partyPin) {
|
||||
this.props.updateLoading(true);
|
||||
const apidata = {
|
||||
roomPin: data.createPin,
|
||||
roomName: data.createName,
|
||||
userName: data.name,
|
||||
userName,
|
||||
partyName,
|
||||
partyPin,
|
||||
player: {
|
||||
source: getPlayerSource(),
|
||||
status: PLAYER_STATUS.PAUSED,
|
||||
time: 0,
|
||||
url: '',
|
||||
url: window.location.href,
|
||||
},
|
||||
};
|
||||
|
||||
CreateRoomApi(apidata)
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
if (res.status <= 299) {
|
||||
saveName({
|
||||
name: data.name,
|
||||
notify: data.props.notify,
|
||||
});
|
||||
saveRoomId({
|
||||
rid: res.roomId,
|
||||
notify: data.props.notify,
|
||||
});
|
||||
data.props.notify('Started party');
|
||||
goTo(Chat, data.props);
|
||||
.then((createResult) => {
|
||||
if (createResult.status <= 299) {
|
||||
this.success(userName, partyName, partyPin);
|
||||
} else {
|
||||
data.props.updateLoading(false);
|
||||
data.props.notify(res.message || res.statusText);
|
||||
this.props.updateLoading(false);
|
||||
this.props.notify(createResult.message || createResult.statusText);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
data.props.updateLoading(false);
|
||||
data.props.notify(err.message || err.statusText);
|
||||
console.error('Create Room API error', err);
|
||||
console.error('Create Party API Error', err);
|
||||
this.props.notify(err.message || 'Something went wrong');
|
||||
this.props.updateLoading(false);
|
||||
});
|
||||
}
|
||||
joinCall(userName, partyName, partyPin) {
|
||||
const apidata = {
|
||||
userName,
|
||||
partyName,
|
||||
partyPin,
|
||||
source: getPlayerSource(),
|
||||
};
|
||||
|
||||
const Create = (props) => {
|
||||
const [name, setName] = useState(getName() || '');
|
||||
const [createName, setCreateName] = useState('');
|
||||
const [createPin, setCreatePin] = useState('');
|
||||
const [joinName, setJoinName] = useState(getRoomId() || '');
|
||||
const [joinPin, setJoinPin] = useState('');
|
||||
const { notify } = props;
|
||||
|
||||
JoinRoomApi(apidata)
|
||||
.then((res) => res.json())
|
||||
.then((joinResult) => {
|
||||
if (joinResult.status <= 299) {
|
||||
this.success(userName, partyName, partyPin);
|
||||
} else {
|
||||
this.props.updateLoading(false);
|
||||
this.props.notify(joinResult.message || joinResult.statusText);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Join Party API Error', err);
|
||||
this.props.notify(err.message || 'Something went wrong');
|
||||
this.props.updateLoading(false);
|
||||
});
|
||||
}
|
||||
success(userName, partyName, partyPin) {
|
||||
updateLocalData({ userName, partyName, partyPin });
|
||||
this.props.updateLoading(false);
|
||||
goTo(Chat, this.props);
|
||||
}
|
||||
render() {
|
||||
const { mode, name, pin, userName } = this.state;
|
||||
return (
|
||||
<div className="party-create-container">
|
||||
<Typography className="brand-title" variant="h6" display="block" gutterBottom>
|
||||
<Typography
|
||||
color="secondary"
|
||||
className="brand-title"
|
||||
variant="h6"
|
||||
display="block"
|
||||
gutterBottom
|
||||
>
|
||||
WATCH PARTY
|
||||
</Typography>
|
||||
<div className="party-create-inputs">
|
||||
<Paper className="create-input-card" elevation={3}>
|
||||
<ButtonGroup className="create-mode-select" size="small" fullWidth>
|
||||
<Button
|
||||
id="mode-select-left"
|
||||
variant={mode === 'create' ? 'contained' : null}
|
||||
color={mode === 'create' ? 'secondary' : null}
|
||||
disableElevation={mode === 'create'}
|
||||
onClick={() => this.setState({ mode: 'create' })}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
<Button
|
||||
id="mode-select-right"
|
||||
variant={mode === 'join' ? 'contained' : null}
|
||||
color={mode === 'join' ? 'secondary' : null}
|
||||
disableElevation={mode === 'join'}
|
||||
onClick={() => this.setState({ mode: 'join' })}
|
||||
>
|
||||
Join
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<TextField
|
||||
fullWidth
|
||||
value={name}
|
||||
onChange={(e) => (e.target.value.length <= 24 ? setName(e.target.value) : null)}
|
||||
className="name-field"
|
||||
color="secondary"
|
||||
size="small"
|
||||
className="create-name"
|
||||
label="Name"
|
||||
variant="filled"
|
||||
helperText={name.length > 0 ? `${name.length}/24` : null}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton onClick={() => saveName({ name, notify })}>
|
||||
<Save />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
variant="outlined"
|
||||
value={userName}
|
||||
onChange={(e) => this.userNameChange(e.target.value)}
|
||||
helperText={
|
||||
userName ? `${userName.length}/${CONSTANTS.USER_NAME_LENGTH} Characters` : null
|
||||
}
|
||||
/>
|
||||
<Paper className="join-card" elevation={3}>
|
||||
<Typography variant="button" display="block" gutterBottom>
|
||||
CREATE PARTY
|
||||
</Typography>
|
||||
<TextField
|
||||
fullWidth
|
||||
value={createName}
|
||||
className="card-field addFocus"
|
||||
onChange={(e) => (e.target.value.length <= 24 ? setCreateName(e.target.value) : null)}
|
||||
helperText={createName.length > 0 ? `${createName.length}/24` : null}
|
||||
label="Party Name"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
type="number"
|
||||
value={createPin}
|
||||
className="card-field addFocus"
|
||||
onChange={(e) => (e.target.value.length <= 10 ? setCreatePin(e.target.value) : null)}
|
||||
helperText={createPin.length > 0 ? `${createPin.length}/10` : null}
|
||||
label="Pin Code"
|
||||
/>
|
||||
<Button
|
||||
onClick={() => createRoom({ name, createName, props, createPin })}
|
||||
disabled={createName === ''}
|
||||
color="primary"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
>
|
||||
CREATE
|
||||
</Button>
|
||||
</Paper>
|
||||
<Paper className="join-card" elevation={3}>
|
||||
<Typography variant="button" display="block" gutterBottom>
|
||||
JOIN PARTY
|
||||
</Typography>
|
||||
<TextField
|
||||
color="secondary"
|
||||
fullWidth
|
||||
value={joinName}
|
||||
className="card-field addFocus"
|
||||
onChange={(e) => setJoinName(e.target.value)}
|
||||
size="small"
|
||||
className="create-name"
|
||||
label="Party Name"
|
||||
variant="outlined"
|
||||
value={name}
|
||||
onChange={(e) => this.partyNameChange(e.target.value)}
|
||||
helperText={name ? `${name.length}/${CONSTANTS.NAME_LENGTH} Characters` : null}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
color="secondary"
|
||||
size="small"
|
||||
className="create-pin"
|
||||
label="Party Pin"
|
||||
variant="outlined"
|
||||
type="number"
|
||||
value={joinPin}
|
||||
className="card-field addFocus"
|
||||
onChange={(e) => setJoinPin(e.target.value)}
|
||||
helperText="Ask your party leader for this code"
|
||||
label="Pin Code"
|
||||
value={pin}
|
||||
onChange={(e) => this.partyPinChange(e.target.value)}
|
||||
helperText={pin ? `${pin.length}/${CONSTANTS.PIN_LENGTH} Digits` : null}
|
||||
/>
|
||||
<Button
|
||||
onClick={() => joinRoom({ joinName, name, props, joinPin })}
|
||||
disabled={joinName === ''}
|
||||
size="small"
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
fullWidth
|
||||
onClick={() => this.createOrJoin()}
|
||||
>
|
||||
JOIN
|
||||
<span>{mode === 'create' ? 'Start Party' : 'Join Party'}</span> <ChevronRight />
|
||||
</Button>
|
||||
</Paper>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Create;
|
||||
}
|
||||
}
|
||||
|
||||
+74
-30
@@ -129,11 +129,10 @@ body.amazon-prime textarea:focus {
|
||||
position: fixed;
|
||||
background-color: rgb(27, 27, 27);
|
||||
bottom: 0;
|
||||
width: calc(var(--party-width) - 2rem);
|
||||
right: var(--neg-party-width);
|
||||
transition: all ease-in-out 0.3s;
|
||||
height: calc(100% - 2rem);
|
||||
padding: 1rem;
|
||||
width: var(--party-width);
|
||||
height: 100%;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -150,7 +149,6 @@ body.amazon-prime textarea:focus {
|
||||
width: calc(var(--party-width) - 2rem) !important;
|
||||
}
|
||||
.party-notification-container .MuiPaper-root {
|
||||
border-radius: 26px !important;
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
@@ -177,14 +175,15 @@ body.amazon-prime textarea:focus {
|
||||
background-image: url('chrome-extension://__MSG_@@extension_id__/android-icon-192x192.png');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 2rem;
|
||||
background-size: 75%;
|
||||
animation-name: showbutton;
|
||||
animation-iteration-count: 1;
|
||||
animation-duration: 2s;
|
||||
transition: all ease-in-out 0.3s !important;
|
||||
}
|
||||
.watch-party-fab:hover {
|
||||
right: 1rem !important;
|
||||
right: 0rem !important;
|
||||
background-size: 90%;
|
||||
}
|
||||
.watch-party-fab .fab-logo {
|
||||
max-width: 75%;
|
||||
@@ -192,37 +191,24 @@ body.amazon-prime textarea:focus {
|
||||
}
|
||||
|
||||
.party-create-container {
|
||||
padding: 3.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.party-create-container .brand-title {
|
||||
padding-top: 1.4rem !important;
|
||||
padding-left: 3.5rem !important;
|
||||
}
|
||||
.party-create-container .name-field {
|
||||
margin-bottom: 2rem !important;
|
||||
}
|
||||
.party-create-container .join-card {
|
||||
padding: 1rem !important;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.party-create-container .join-card .card-field {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
.party-create-container .party-create-inputs {
|
||||
flex: 1;
|
||||
.party-create-container .create-input-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.party-chat-container {
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
.party-create-container .create-input-card .create-mode-select,
|
||||
.party-create-container .create-input-card .create-name,
|
||||
.party-create-container .create-input-card .create-pin {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.party-create-container .create-input-card {
|
||||
background-color: #2d2d2d;
|
||||
}
|
||||
|
||||
.thread-container {
|
||||
@@ -258,11 +244,32 @@ textarea::-webkit-scrollbar {
|
||||
.chat-message-box > div {
|
||||
border-radius: 26px;
|
||||
}
|
||||
|
||||
.party-chat-container {
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.party-chat-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding-left: 2.25rem;
|
||||
padding-left: 1rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.party-chat-header .expander {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.party-chat-header .expander .MuiExpansionPanelDetails-root {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.party-chat-header-text {
|
||||
flex: 1;
|
||||
}
|
||||
@@ -277,10 +284,47 @@ textarea::-webkit-scrollbar {
|
||||
}
|
||||
.party-controls button:hover .party-control-button-text {
|
||||
display: initial;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
.party-controls button:hover .MuiButton-startIcon {
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
|
||||
.media-info-card {
|
||||
width: 100%;
|
||||
border-top-left-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
padding: 0 2rem !important;
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
.media-info-card .MuiCardContent-root {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.media-info-at {
|
||||
font-size: 1rem !important;
|
||||
padding-left: 3px !important;
|
||||
}
|
||||
.media-info-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.media-info-icon {
|
||||
width: 3.5rem !important;
|
||||
height: 3.5rem !important;
|
||||
}
|
||||
.media-info-right {
|
||||
flex: 1;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.media-info-right .show-name {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.75rem;
|
||||
white-space: break-spaces !important;
|
||||
}
|
||||
.media-info-link {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.giphy-carousel::before {
|
||||
position: relative;
|
||||
bottom: 40%;
|
||||
|
||||
+5
-1
@@ -6,7 +6,7 @@
|
||||
"source": "functions"
|
||||
},
|
||||
"hosting": {
|
||||
"public": "./website",
|
||||
"public": "website",
|
||||
"ignore": [
|
||||
"firebase.json",
|
||||
"**/.*",
|
||||
@@ -26,5 +26,9 @@
|
||||
"ui": {
|
||||
"enabled": true
|
||||
}
|
||||
},
|
||||
"firestore": {
|
||||
"rules": "firestore.rules",
|
||||
"indexes": "firestore.indexes.json"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"indexes": [],
|
||||
"fieldOverrides": []
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
rules_version = '2';
|
||||
service cloud.firestore {
|
||||
match /databases/{database}/documents {
|
||||
|
||||
function userInRoom(rid) {
|
||||
return exists(/databases/$(database)/documents/rooms/$(rid)/users/$(request.auth.uid));
|
||||
}
|
||||
|
||||
match /rooms/{rid}/{detail=**} {
|
||||
allow read: if userInRoom(rid);
|
||||
allow write: if false;
|
||||
}
|
||||
|
||||
match /server/status {
|
||||
allow read: if true;
|
||||
allow write: if false;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
node_modules/
|
||||
@@ -8,10 +8,6 @@ const FIREBASE_OPTIONS = {
|
||||
credential: admin.credential.cert(secret),
|
||||
databaseURL: 'https://watch-party-crx.firebaseio.com',
|
||||
};
|
||||
if (process.env.NODE_ENV === 'DEV') {
|
||||
FIREBASE_OPTIONS.databaseURL = 'http://localhost:4000/firestore';
|
||||
console.info('RUNNING IN DEV ENV');
|
||||
}
|
||||
|
||||
admin.initializeApp(FIREBASE_OPTIONS);
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
const admin = require('firebase-admin');
|
||||
|
||||
module.exports = (req, res, next) => {
|
||||
res.set('Access-Control-Allow-Origin', ['*']);
|
||||
if (req.method === 'OPTIONS') {
|
||||
@@ -30,11 +32,11 @@ module.exports = (req, res, next) => {
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Failed Auth - ', req.headers.authorization, '\n', err);
|
||||
return res.status(500).send({ message: 'Unable to verify user token', ...err });
|
||||
return res.status(500).send({ message: 'Unable to verify user token' });
|
||||
});
|
||||
} catch (err) {
|
||||
return res.status(401).send({ message: 'Got no user token', ...err });
|
||||
console.log(err);
|
||||
return res.status(401).send({ message: 'Something went wrong when authorizing' });
|
||||
}
|
||||
}
|
||||
return res.status(401).send({ message: 'Got no user token' });
|
||||
} else return res.status(401).send({ message: 'Got no user token' });
|
||||
};
|
||||
|
||||
@@ -4,20 +4,22 @@ 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.roomName) res.status(400).send({ message: 'Missing party 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.roomName)
|
||||
.doc(bodydata.partyName)
|
||||
.get()
|
||||
.then((docSnap) => docSnap.exists);
|
||||
if (roomNameTaken) return res.status(409).send({ message: 'That party name is already taken' });
|
||||
await admin
|
||||
.firestore()
|
||||
.collection('rooms')
|
||||
.doc(bodydata.roomName)
|
||||
.doc(bodydata.partyName)
|
||||
.set({
|
||||
name: bodydata.roomName,
|
||||
name: bodydata.partyName,
|
||||
pin: bodydata.partyPin,
|
||||
player: bodydata.player,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
@@ -29,7 +31,7 @@ module.exports = async (req, res) => {
|
||||
await admin
|
||||
.firestore()
|
||||
.collection('rooms')
|
||||
.doc(bodydata.roomName)
|
||||
.doc(bodydata.partyName)
|
||||
.collection('messages')
|
||||
.add({
|
||||
uid: '<system>',
|
||||
@@ -39,14 +41,14 @@ module.exports = async (req, res) => {
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(
|
||||
`Failed to add system create party message : \n\t Room: ${bodydata.roomName}`,
|
||||
`Failed to add system create party message : \n\t Room: ${bodydata.partyName}`,
|
||||
err
|
||||
);
|
||||
});
|
||||
await admin
|
||||
.firestore()
|
||||
.collection('rooms')
|
||||
.doc(bodydata.roomName)
|
||||
.doc(bodydata.partyName)
|
||||
.collection('users')
|
||||
.doc(bodydata.uid)
|
||||
.set({
|
||||
@@ -55,9 +57,9 @@ module.exports = async (req, res) => {
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(
|
||||
`Failed to set admin when creating party : \n\t Room: ${bodydata.roomName} \n\t User: ${bodydata.uid}`,
|
||||
`Failed to set admin when creating party : \n\t Room: ${bodydata.partyName} \n\t User: ${bodydata.uid}`,
|
||||
err
|
||||
);
|
||||
});
|
||||
res.status(201).send({ roomId: bodydata.roomName, message: 'Started a party!' });
|
||||
res.status(201).send({ roomId: bodydata.partyName, message: 'Started a party!' });
|
||||
};
|
||||
|
||||
@@ -2,46 +2,72 @@ const admin = require('firebase-admin');
|
||||
|
||||
module.exports = async (req, res) => {
|
||||
const bodydata = JSON.parse(req.body);
|
||||
console.log('Requested Join - UID - ', bodydata.uid, '\n\tRoom - ', bodydata.roomId);
|
||||
const [exists, roomSource] = await admin
|
||||
console.log('Requested Join - UID - ', bodydata.uid, '\n\tRoom - ', bodydata.partyName);
|
||||
// GET ROOM EXISTS, ROOM SOURCE, & ROOM PIN
|
||||
const [exists, roomSource, roomPin] = await admin
|
||||
.firestore()
|
||||
.collection('rooms')
|
||||
.doc(bodydata.roomId)
|
||||
.doc(bodydata.partyName)
|
||||
.get()
|
||||
.then((roomSnap) => [roomSnap.exists, roomSnap.exists ? roomSnap.data().player.source : ''])
|
||||
.then((roomSnap) => [
|
||||
roomSnap.exists,
|
||||
roomSnap.exists ? roomSnap.data().player.source : '',
|
||||
roomSnap.exists ? roomSnap.data().pin : '',
|
||||
])
|
||||
.catch((err) => {
|
||||
console.error(
|
||||
`Failed to get room when joining room : \n\t Room: ${bodydata.roomId} \n\t User: ${bodydata.uid}`,
|
||||
`Failed to get room when joining room : \n\t Room: ${bodydata.partyName} \n\t User: ${bodydata.uid}`,
|
||||
err
|
||||
);
|
||||
});
|
||||
const [userExists, userAdmin] = await admin
|
||||
if (exists && roomPin !== bodydata.partyPin)
|
||||
return res.status(401).send({ message: 'Incorrect party pin' });
|
||||
// GET IF USER EXISTS AND IS ADMIN
|
||||
const [userExists, userAdmin, userName] = await admin
|
||||
.firestore()
|
||||
.collection('rooms')
|
||||
.doc(bodydata.roomId)
|
||||
.doc(bodydata.partyName)
|
||||
.collection('users')
|
||||
.doc(bodydata.uid)
|
||||
.get()
|
||||
.then((userSnap) => [userSnap.exists, userSnap.exists ? userSnap.data().admin : false])
|
||||
.then((userSnap) => [
|
||||
userSnap.exists,
|
||||
userSnap.exists ? userSnap.data().admin : false,
|
||||
userSnap.exists ? userSnap.data().name : '',
|
||||
])
|
||||
.catch((err) => {
|
||||
console.error(
|
||||
`Failed to get user when joining room : \n\t Room: ${bodydata.roomId} \n\t User: ${bodydata.uid}`,
|
||||
`Failed to get user when joining room : \n\t Room: ${bodydata.partyName} \n\t User: ${bodydata.uid}`,
|
||||
err
|
||||
);
|
||||
});
|
||||
if (userExists && exists && roomSource === bodydata.source)
|
||||
res.status(200).send({ roomId: bodydata.roomId, message: 'Joined a party' });
|
||||
// IF USER PRE-EXISTS AND SAME SOURCE - JOIN
|
||||
if (userExists && exists && roomSource === bodydata.source) {
|
||||
// UPDATE NAME IF NEEDED
|
||||
if (userName !== bodydata.userName) {
|
||||
await admin
|
||||
.firestore()
|
||||
.collection('rooms')
|
||||
.doc(bodydata.partyName)
|
||||
.collection('users')
|
||||
.doc(body.uid)
|
||||
.update({ name: bodydata.userName });
|
||||
}
|
||||
res.status(200).send({ partyName: bodydata.partyName, message: 'Joined a party' });
|
||||
}
|
||||
// USER DOES NOT PRE-EXIST BUT SAME SOURCE AND RIGHT PIN
|
||||
else if (
|
||||
!userExists &&
|
||||
exists &&
|
||||
bodydata.roomId &&
|
||||
bodydata.partyName &&
|
||||
bodydata.userName &&
|
||||
roomSource === bodydata.source
|
||||
roomSource === bodydata.source &&
|
||||
roomPin === bodydata.partyPin
|
||||
) {
|
||||
await admin
|
||||
.firestore()
|
||||
.collection('rooms')
|
||||
.doc(bodydata.roomId)
|
||||
.doc(bodydata.partyName)
|
||||
.collection('messages')
|
||||
.add({
|
||||
uid: '<system>',
|
||||
@@ -51,14 +77,14 @@ module.exports = async (req, res) => {
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(
|
||||
`Failed to add system join party message : \n\t Room: ${roomId} \n\t ${bodydata.uid}`,
|
||||
`Failed to add system join party message : \n\t Room: ${partyName} \n\t ${bodydata.uid}`,
|
||||
err
|
||||
);
|
||||
});
|
||||
await admin
|
||||
.firestore()
|
||||
.collection('rooms')
|
||||
.doc(bodydata.roomId)
|
||||
.doc(bodydata.partyName)
|
||||
.collection('users')
|
||||
.doc(bodydata.uid)
|
||||
.set({
|
||||
@@ -67,36 +93,37 @@ module.exports = async (req, res) => {
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(
|
||||
`Failed to set admin when joining party : \n\t Room: ${roomId} \n\t User: ${bodydata.uid}`,
|
||||
`Failed to set admin when joining party : \n\t Room: ${partyName} \n\t User: ${bodydata.uid}`,
|
||||
err
|
||||
);
|
||||
});
|
||||
await admin
|
||||
.firestore()
|
||||
.collection('rooms')
|
||||
.doc(bodydata.roomId)
|
||||
.doc(bodydata.partyName)
|
||||
.update({
|
||||
updatedAt: new Date(),
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(
|
||||
`Failed to set updated time when joining party : \n\t Room: ${roomId} \n\t User: ${bodydata.uid}`,
|
||||
`Failed to set updated time when joining party : \n\t Room: ${partyName} \n\t User: ${bodydata.uid}`,
|
||||
err
|
||||
);
|
||||
});
|
||||
res.status(200).send({ roomId: bodydata.roomId, message: 'Joined a party' });
|
||||
} else if (!userExists && !bodydata.userName)
|
||||
res.status(400).send({ message: 'Missing user name' });
|
||||
res.status(200).send({ partyName: bodydata.partyName, message: 'Joined a party' });
|
||||
}
|
||||
// ONLY WRONG SOURCE
|
||||
else if (exists && roomSource !== bodydata.source) {
|
||||
// MOVE SOURCE IF ADMIN
|
||||
if (userAdmin === true) {
|
||||
await admin
|
||||
.firestore()
|
||||
.collection('rooms')
|
||||
.doc(bodydata.roomId)
|
||||
.doc(bodydata.partyName)
|
||||
.update({
|
||||
player: {
|
||||
showName: null,
|
||||
source: roomSource,
|
||||
source: null,
|
||||
status: 'NOT_PLAYING',
|
||||
time: 0,
|
||||
updatedBy: bodydata.uid,
|
||||
@@ -104,7 +131,7 @@ module.exports = async (req, res) => {
|
||||
})
|
||||
.catch(() => {
|
||||
console.error(
|
||||
`Failed to update player source when admin joining party \n\t Room: ${roomId} \n\t User: ${bodydata.uid}`
|
||||
`Failed to update player source when admin joining party \n\t Room: ${partyName} \n\t User: ${bodydata.uid}`
|
||||
);
|
||||
res.status(500).send({ message: 'Unable to move party, please try again' });
|
||||
});
|
||||
|
||||
@@ -2,18 +2,18 @@ const admin = require('firebase-admin');
|
||||
|
||||
module.exports = async (req, res) => {
|
||||
const { player, roomId, uid, showChanged, userName } = JSON.parse(req.body);
|
||||
const statusString =
|
||||
player.status === 'PLAYING'
|
||||
? 'started playing from'
|
||||
: player.status === 'PAUSED'
|
||||
? 'paused at'
|
||||
: player.status === 'NOT_PLAYING'
|
||||
? 'stopped at'
|
||||
: 'is at';
|
||||
const timeString =
|
||||
player.time > 3600
|
||||
? new Date(player.time * 1000).toISOString().substr(11, 8)
|
||||
: new Date(player.time * 1000).toISOString().substr(14, 5);
|
||||
// const statusString =
|
||||
// player.status === 'PLAYING'
|
||||
// ? 'started playing from'
|
||||
// : player.status === 'PAUSED'
|
||||
// ? 'paused at'
|
||||
// : player.status === 'NOT_PLAYING'
|
||||
// ? 'stopped at'
|
||||
// : 'is at';
|
||||
// const timeString =
|
||||
// player.time > 3600
|
||||
// ? new Date(player.time * 1000).toISOString().substr(11, 8)
|
||||
// : new Date(player.time * 1000).toISOString().substr(14, 5);
|
||||
const [roomExists, roomData] = await admin
|
||||
.firestore()
|
||||
.collection('rooms')
|
||||
@@ -55,23 +55,23 @@ module.exports = async (req, res) => {
|
||||
console.error(`Failed to update player : \n\t Room: ${roomId} \n\t ${uid}`, err);
|
||||
res.status(500).send({ message: "Uh oh party could't be synced", err });
|
||||
});
|
||||
await admin
|
||||
.firestore()
|
||||
.collection('rooms')
|
||||
.doc(roomId)
|
||||
.collection('messages')
|
||||
.add({
|
||||
uid: '<system>',
|
||||
name: '',
|
||||
text: `${userName} ${statusString} ${timeString}`,
|
||||
time: new Date(),
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(
|
||||
`Failed to add system update player message : \n\t Room: ${roomId} \n\t ${uid}`,
|
||||
err
|
||||
);
|
||||
});
|
||||
// await admin
|
||||
// .firestore()
|
||||
// .collection('rooms')
|
||||
// .doc(roomId)
|
||||
// .collection('messages')
|
||||
// .add({
|
||||
// uid: '<system>',
|
||||
// name: '',
|
||||
// text: `${userName} ${statusString} ${timeString}`,
|
||||
// time: new Date(),
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.error(
|
||||
// `Failed to add system update player message : \n\t Room: ${roomId} \n\t ${uid}`,
|
||||
// err
|
||||
// );
|
||||
// });
|
||||
return res.status(200).send({ message: 'Synced party player' });
|
||||
} else {
|
||||
return res.status(208).send({ message: 'Player already up to date' });
|
||||
|
||||
Generated
+2
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "watchparty",
|
||||
"version": "1.0.0-beta",
|
||||
"name": "watch-party-api",
|
||||
"version": "1.2.1",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
+1
-1
@@ -3,7 +3,7 @@
|
||||
"version": "1.2.1",
|
||||
"description": "Watch Party",
|
||||
"scripts": {
|
||||
"start": "env NODE_ENV=DEV firebase emulators:start",
|
||||
"start": "firebase emulators:start",
|
||||
"build": "cd ./app && node ./scripts/build.js"
|
||||
},
|
||||
"private": true,
|
||||
|
||||
Reference in New Issue
Block a user