v1.3.0-beta/UI redone

app/src/Chat.js

@@ -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"