Merge develop into dev-deploy

Author: github-actions[bot]

src/components/HostPlayer/index.jsx

@@ -185,7 +185,7 @@ class HostPlayer extends React.Component {
         <div className="flexContainer">
           <Player isHost />
           <div className={`${styles.textWrapper} textAlignCenter`}>
-            <h2>Hosting to {this.state.connections} listeners.</h2>
+            <h2>Hosting {SessionManager.SessionCount.get()} listeners.</h2>
             <p className="textAlignLeft">
               You can continue using Spotify as you normally would. The music is
               playing through this browser tab, you can open this tab in a new

src/components/ListenerPlayer/index.jsx

@@ -92,9 +92,12 @@ class ListenerPlayer extends React.Component {
           Math.abs(calcPos - data.position) > 2000)
       ) {
         // console.log("not synced");
-        this.setState({
-          synced: false,
-        }, () => this.syncListener(hostUri, calcPos, hostPlaying, true));
+        this.setState(
+          {
+            synced: false,
+          },
+          () => this.syncListener(hostUri, calcPos, hostPlaying)
+        );
       } else {
         // console.log("synced");
         this.setState({
@@ -224,36 +227,33 @@ class ListenerPlayer extends React.Component {
    * @param {string} uri spotify track uri
    * @param {number} position position in milliseconds
    * @param {boolean} playing playing state
-   * @param {boolean} force whether to force playing
    */
-  async syncListener(uri, position, playing, force) {
+  async syncListener(uri, position, playing) {
     if (uri !== playerStore.uri) {
       await playerStore.newTrack(uri, position);
       console.log(playing, position, playerStore.position.value);
       // defer setting play/pause till after update
-      this.setState(
-        {
-          changeSongCallback: () => {
-            if (
-              playing &&
-              position > playerStore.position &&
-              playerStore.position > 0
-            ) {
-              // if host plays and listener was listening when host paused, then resume and seek. if force then play on force.
-              playerStore.resume(this.state.parked);
-            } else if (!playing) {
-              // if host pauses, pause
-              playerStore.pause(this.parked);
-            }
-          },
-        }
-      );
+      this.setState({
+        changeSongCallback: () => {
+          if (
+            playing &&
+            position > playerStore.position &&
+            playerStore.position > 0
+          ) {
+            // if host plays and listener was listening when host paused, then resume and seek. if force then play on force.
+            playerStore.resume(this.state.parked);
+          } else if (!playing) {
+            // if host pauses, pause
+            playerStore.pause(this.parked);
+          }
+        },
+      });
     } else {
       await playerStore.seek(position);
       // defer setting play/pause till after update
       this.setState({
         changeSongCallback: () => {
-          if (playing || force) {
+          if (playing) {
             // if host plays and listener was listening when host paused, then resume and seek. if force then play on force.
             playerStore.resume(this.state.parked);
           } else if (!playing) {

src/utils/sessionManager.js

@@ -1,5 +1,6 @@
 import axios from "axios";
 import urlJoin from "url-join";
+import { observable } from "mobx";
 
 import * as firebase from "firebase/app";
 import "firebase/auth";
@@ -48,6 +49,11 @@ function initializeApp() {
   }
 }
 
+/**
+ * Listener count observable
+ */
+export const SessionCount = observable.box(0);
+
 /**
  * Refresh session token and stick it in localStorage
  */
@@ -129,7 +135,7 @@ export const publishUpdate = async (uri, position, playing, retries = 0) => {
   try {
     let user = await FBAuth.signInAnonymously();
     console.log("publishUpdate", uri, position, playing);
-    await axios.post(
+    let res = await axios.post(
       cloudFunctions.postUpdate,
       {
         uri,
@@ -145,6 +151,7 @@ export const publishUpdate = async (uri, position, playing, retries = 0) => {
         },
       }
     );
+    SessionCount.set(res.data.subscribers);
   } catch (e) {
     if (e.response) {
       if (e.response.status === 401) {