v0.9

src/Chat.js

@@ -16,9 +16,10 @@ import Sync from '@material-ui/icons/SyncOutlined';
 import Exit from '@material-ui/icons/ExitToAppRounded';
 import Share from '@material-ui/icons/ShareRounded';
 import Delete from '@material-ui/icons/Delete';
-import { SendMessageApi, LeaveRoomApi, DeleteRoomApi } from './Api';
+import { SendMessageApi, LeaveRoomApi, DeleteRoomApi, UpdatePlayerApi } from './Api';
 import { goTo } from 'route-lite';
 import Create from './Create';
+import VideoListener from './VideoListener';
 
 export default class Chat extends Component {
   constructor(props) {
@@ -28,8 +29,15 @@ export default class Chat extends Component {
       messages: [],
       newMessage: '',
       admin: false,
+      player: {},
+      localPlayer: {},
     };
     this.sendMessage = this.sendMessage.bind(this);
+    this.endParty = this.endParty.bind(this);
+    this.leaveParty = this.leaveParty.bind(this);
+    this.shareParty = this.shareParty.bind(this);
+    this.videoEventListener = this.videoEventListener.bind(this);
+    this.mVideoListener = new VideoListener(this.videoEventListener);
   }
   componentDidMount() {
     window.addEventListener('keyup', (ev) => {
@@ -49,9 +57,12 @@ export default class Chat extends Component {
       .doc(window.localStorage.getItem('watchPartyRoomId'))
       .onSnapshot(
         (snap) => {
+          if (snap.data().player.status !== this.state.localPlayer.status) {
+            this.mVideoListener.doUpdate(snap.data().player);
+          }
           this.setState(snap.data());
         },
-        (err) => console.error(err)
+        (err) => {}
       );
     firebase
       .firestore()
@@ -75,27 +86,50 @@ export default class Chat extends Component {
         const pcc = document.getElementsByClassName('thread-container')[0];
         if (pcc) pcc.scrollTop = pcc.scrollHeight;
       });
+    this.mVideoListener.start();
+    this.props.updateLoading(false);
+  }
+  videoEventListener(video) {
+    const { status, url, time, source } = video;
+    if (this.state.player.status !== status) {
+      UpdatePlayerApi({
+        roomId: window.localStorage.getItem('watchPartyRoomId'),
+        player: {
+          status,
+          url,
+          time,
+          source,
+        },
+      });
+    }
+    this.setState({ localPlayer: video });
   }
   endParty() {
+    this.props.notify('Ending party...');
+    this.props.updateLoading(true);
     const data = {
       roomId: window.localStorage.getItem('watchPartyRoomId'),
     };
     DeleteRoomApi(data).then((res) => {
       if (res.status === 200) {
+        this.props.notify('Ended party');
         window.localStorage.removeItem('watchPartyRoomId');
-        goTo(Create);
+        goTo(Create, this.props);
       }
     });
   }
   leaveParty() {
+    this.props.notify('Leaving party...');
+    this.props.updateLoading(true);
     const data = {
       roomId: window.localStorage.getItem('watchPartyRoomId'),
       uid: firebase.auth().currentUser.uid,
     };
     LeaveRoomApi(data).then((res) => {
       if (res.status === 200) {
+        this.props.notify('Left party');
         window.localStorage.removeItem('watchPartyRoomId');
-        goTo(Create);
+        goTo(Create, this.props);
       }
     });
   }
@@ -106,6 +140,7 @@ export default class Chat extends Component {
     el.select();
     document.execCommand('copy');
     document.body.removeChild(el);
+    this.props.notify('Copied room code');
   }
   sendMessage(message) {
     const data = {