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",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* global chrome */
|
||||
/*global firebase*/
|
||||
/* global firebase */
|
||||
|
||||
const firebaseConfig = {
|
||||
apiKey: 'AIzaSyCJLuYpzXLDRmu2ttzFuSGmYcpFxqToWFU',
|
||||
|
||||
@@ -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;
|
||||
|
||||
+137
-37
@@ -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">
|
||||
<div className="party-chat-header-text">
|
||||
<Typography className="brand-title" variant="overline" display="block">
|
||||
WATCH PARTY
|
||||
</Typography>
|
||||
<Typography 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>
|
||||
<Button onClick={this.leaveParty} startIcon={<Exit />}>
|
||||
<span className="party-control-button-text">Leave</span>
|
||||
</Button>
|
||||
{admin && (
|
||||
<Button onClick={this.endParty} startIcon={<Delete />}>
|
||||
<span className="party-control-button-text">End</span>
|
||||
</Button>
|
||||
)}
|
||||
</ButtonGroup>
|
||||
<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
|
||||
color="secondary"
|
||||
className="brand-title"
|
||||
variant="caption"
|
||||
display="block"
|
||||
>
|
||||
WATCH PARTY
|
||||
</Typography>
|
||||
<Typography color="textPrimary" className="room-title" variant="h4" gutterBottom>
|
||||
{name}
|
||||
</Typography>
|
||||
</div>
|
||||
</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 />}>
|
||||
<Typography variant="caption" className="party-control-button-text">
|
||||
Leave
|
||||
</Typography>
|
||||
</Button>
|
||||
{admin && (
|
||||
<Button onClick={this.endParty} startIcon={<Delete />}>
|
||||
<Typography variant="caption" className="party-control-button-text">
|
||||
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"
|
||||
|
||||
+188
-180
@@ -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');
|
||||
};
|
||||
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);
|
||||
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,
|
||||
};
|
||||
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...');
|
||||
|
||||
const apidata = {
|
||||
roomPin: data.createPin,
|
||||
roomName: data.createName,
|
||||
userName: data.name,
|
||||
player: {
|
||||
source: getPlayerSource(),
|
||||
status: PLAYER_STATUS.PAUSED,
|
||||
time: 0,
|
||||
url: '',
|
||||
},
|
||||
};
|
||||
|
||||
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);
|
||||
} else {
|
||||
data.props.updateLoading(false);
|
||||
data.props.notify(res.message || res.statusText);
|
||||
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;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
data.props.updateLoading(false);
|
||||
data.props.notify(err.message || err.statusText);
|
||||
console.error('Create Room API error', err);
|
||||
});
|
||||
};
|
||||
|
||||
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;
|
||||
|
||||
return (
|
||||
<div className="party-create-container">
|
||||
<Typography className="brand-title" variant="h6" display="block" gutterBottom>
|
||||
WATCH PARTY
|
||||
</Typography>
|
||||
<div className="party-create-inputs">
|
||||
<TextField
|
||||
fullWidth
|
||||
value={name}
|
||||
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">
|
||||
<IconButton onClick={() => saveName({ name, notify })}>
|
||||
<Save />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<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>
|
||||
} else {
|
||||
this.props.notify('Double check your inputs');
|
||||
}
|
||||
}
|
||||
createCall(userName, partyName, partyPin) {
|
||||
this.props.updateLoading(true);
|
||||
const apidata = {
|
||||
userName,
|
||||
partyName,
|
||||
partyPin,
|
||||
player: {
|
||||
source: getPlayerSource(),
|
||||
status: PLAYER_STATUS.PAUSED,
|
||||
time: 0,
|
||||
url: window.location.href,
|
||||
},
|
||||
};
|
||||
CreateRoomApi(apidata)
|
||||
.then((res) => res.json())
|
||||
.then((createResult) => {
|
||||
if (createResult.status <= 299) {
|
||||
this.success(userName, partyName, partyPin);
|
||||
} else {
|
||||
this.props.updateLoading(false);
|
||||
this.props.notify(createResult.message || createResult.statusText);
|
||||
}
|
||||
})
|
||||
.catch((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(),
|
||||
};
|
||||
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
|
||||
color="secondary"
|
||||
className="brand-title"
|
||||
variant="h6"
|
||||
display="block"
|
||||
gutterBottom
|
||||
>
|
||||
WATCH PARTY
|
||||
</Typography>
|
||||
<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
|
||||
color="secondary"
|
||||
fullWidth
|
||||
value={joinName}
|
||||
className="card-field addFocus"
|
||||
onChange={(e) => setJoinName(e.target.value)}
|
||||
label="Party Name"
|
||||
size="small"
|
||||
className="create-name"
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
value={userName}
|
||||
onChange={(e) => this.userNameChange(e.target.value)}
|
||||
helperText={
|
||||
userName ? `${userName.length}/${CONSTANTS.USER_NAME_LENGTH} Characters` : null
|
||||
}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
color="secondary"
|
||||
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
|
||||
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%;
|
||||
|
||||
Reference in New Issue
Block a user