Improve session connection monitoring and reconnection

larsbaunwall · larsbaunwall · commit 9b38a8caea8b · 2020-05-05T13:06:28.000+02:00
diff --git a/presenter-app/src/common/ApiService.js b/presenter-app/src/common/ApiService.js
@@ -15,6 +15,7 @@ const {
 
 let evtSource = null;
 let sseReconnectFrequencySeconds = 1;
+let shouldCloseEvtSource = false;
 
 const axiosInstance = axios.create({
   baseURL: `${apiEndpoint}/${apiVersion}`,
@@ -39,15 +40,18 @@ const ApiService = {
 
     if (process.type === "main") {
       ipcMain.on("CONNECT_EVENT_STREAM", (evt, args) => this.onConnectEventStream());
-      ipcMain.on("CLOSE_EVENT_STREAM", (evt, args) => {
-        if (evtSource) evtSource.close();
-      });
+      ipcMain.on("CLOSE_EVENT_STREAM", (evt, args) => this.onCloseEventStream());
     }
 
-    if(store.getters.activeSession.id !== "")
-      this.connectEventStream();
+    if (store.getters.activeSession.id !== "") this.connectEventStream();
   },
 
+  /**
+   * Create a new session on the server
+   *
+   * @param {{id}[]} votingOptions for the sessions
+   * @returns {{sessionId:String, accessToken:{}}} session data
+   */
   async joinSession(votingOptions) {
     const { data } = await axiosInstance.post("sessions", {
       votingOptions: votingOptions.map(x => x.id),
@@ -56,6 +60,11 @@ const ApiService = {
     return data;
   },
 
+  /**
+   * Abandon a session on the server
+   *
+   * @param {String} sessionId
+   */
   async leaveSession(sessionId) {
     await axiosInstance.delete(`sessions/${sessionId}`, {
       headers: { Authorization: `Bearer ${store.getters.accessToken}` },
@@ -78,22 +87,32 @@ const ApiService = {
       return;
     }
 
+    this.onCloseEventStream();
+  },
+
+  onCloseEventStream() {
+    shouldCloseEvtSource = true;
     if (evtSource) evtSource.close();
+    store.dispatch("updateSessionStreamState", null);
+    console.log("stream closed");
   },
 
   onConnectEventStream() {
     console.log("Connecting eventstream");
+    shouldCloseEvtSource = false;
     const waitFunc = () => sseReconnectFrequencySeconds * 1000;
     const tryToSetupFunc = () => {
-      setupEventSource();
-      sseReconnectFrequencySeconds *= 2;
-      if (sseReconnectFrequencySeconds >= 64) {
-        sseReconnectFrequencySeconds = 64;
+      if (!shouldCloseEvtSource) {
+        setupEventSource();
+        sseReconnectFrequencySeconds *= 2;
+        if (sseReconnectFrequencySeconds >= 64) {
+          sseReconnectFrequencySeconds = 64;
+        }
       }
     };
 
     const setupEventSource = () => {
-      if(evtSource) evtSource.close();
+      if (evtSource) evtSource.close();
 
       evtSource = new EventSource(`${streamEndpoint}?access_token=${store.getters.accessToken}`, {
         withCredentials: true,
@@ -113,12 +132,12 @@ const ApiService = {
         this.closeEventStream();
       });
 
-      evtSource.onopen = (e) => {
+      evtSource.onopen = e => {
         sseReconnectFrequencySeconds = 1;
-        console.log("Eventstream opened", {e});
+        console.log("Eventstream opened", { e });
       };
-      evtSource.onerror = (e) => {
-        console.log("Eventstream error", {e});
+      evtSource.onerror = e => {
+        console.log("Eventstream error", { e });
         evtSource.close();
         store.dispatch("updateSessionStreamState", false);
         setTimeout(tryToSetupFunc, waitFunc());
diff --git a/presenter-app/src/components/SessionHealth.vue b/presenter-app/src/components/SessionHealth.vue
@@ -1,13 +1,22 @@
 <template>
   <div>
-    <div class="tags has-addons">
+    <div v-if="sessionStream.connected" class="tags has-addons">
       <span
         :class="sessionStream.connected ? 'tag is-success' : 'tag is-danger'"
       >{{ sessionStream.connected ? 'Connected' : 'Connecting...' }}</span>
-      <span class="tag connectBtn" @click="connectEventStream()" title="Reconnect">
+      <span
+        class="tag has-background-grey-lighter has-text-primary connectBtn"
+        @click="connectEventStream()"
+        title="Reconnect"
+      >
         <b-icon icon="undo" size="is-small" />
       </span>
     </div>
+    <div v-else class="tags has-addons">
+      <span
+        class="tag is-success"
+      >Ready</span>
+    </div>
   </div>
 </template>
 
diff --git a/presenter-app/src/main.js b/presenter-app/src/main.js
@@ -23,11 +23,12 @@ import {
   faAsterisk,
   faInfoCircle,
   faSpinner,
+  faExternalLinkAlt,
 
 } from "@fortawesome/free-solid-svg-icons";
 
 import {
-
+  faHeart,
 } from "@fortawesome/free-regular-svg-icons";
 
 library.add(
@@ -44,6 +45,8 @@ library.add(
   faAsterisk,
   faInfoCircle,
   faSpinner,
+  faExternalLinkAlt,
+  faHeart
 );
 
 import "@/assets/scss/plodo.scss";
diff --git a/presenter-app/src/store/index.js b/presenter-app/src/store/index.js
@@ -70,10 +70,10 @@ export default new Vuex.Store({
   actions: {
     async createSession({ commit, dispatch, getters }, { votingOptions }) {
       try {
-        const data = await ApiService.joinSession(votingOptions);
+        const {sessionId, accessToken} = await ApiService.joinSession(votingOptions);
 
-        commit("setToken", { token: data.accessToken.token });
-        commit("setSession", { sessionId: data.sessionId, votingOptions: votingOptions });
+        commit("setToken", { token: accessToken.token });
+        commit("setSession", { sessionId: sessionId, votingOptions: votingOptions });
 
         ApiService.connectEventStream();
       } catch (e) {
diff --git a/presenter-app/src/views/PlayingSession.vue b/presenter-app/src/views/PlayingSession.vue
@@ -3,15 +3,9 @@
     <div class="level is-mobile">
       <div class="level-left">
         <div class="level-item">
-          <b-icon
-            class="has-text-secondary"
-            icon="asterisk"
-            size="is-small"
-          />
-        </div>
-        <div class="level-item has-text-secondary has-text-weight-bold">
-          Session ID
+          <b-icon class="has-text-secondary" icon="asterisk" size="is-small" />
         </div>
+        <div class="level-item has-text-secondary has-text-weight-bold">Session ID</div>
       </div>
       <div class="level-right">
         <div class="level-item">
@@ -20,74 +14,59 @@
               class="button is-family-monospace has-text-secondary has-text-weight-bold"
               title="Copy to clipboard"
               @click="copySessionId()"
-            >
-              {{ activeSession.id }}
-            </button>
+            >{{ activeSession.id }}</button>
             <button
               class="button has-text-secondary"
               title="Copy to clipboard"
               @click="copySessionId()"
             >
-              <b-icon
-                icon="copy"
-                size="is-small"
-              />
+              <b-icon icon="copy" size="is-small" />
+            </button>
+            <button
+              class="button has-text-grey"
+              title="Open in browser"
+              @click="openSessionInBrowser()"
+            >
+              <b-icon icon="external-link-alt" size="is-small" />
             </button>
           </div>
         </div>
       </div>
     </div>
-    <hr>
+    <hr />
     <div class="level is-mobile">
       <div class="level-left">
         <div class="level-item">
-          <b-icon
-            icon="info-circle"
-            size="is-small"
-          />
-        </div>
-        <div class="level-item">
-          Status
+          <b-icon class icon="tv" size="is-small" />
         </div>
+        <div class="level-item">Screen</div>
       </div>
       <div class="level-right">
         <div class="level-item">
-          <session-health />
+          <screen-selection-dropdown />
         </div>
       </div>
     </div>
     <div class="level is-mobile">
       <div class="level-left">
         <div class="level-item">
-          <b-icon
-            icon="tv"
-            size="is-small"
-          />
-        </div>
-        <div class="level-item">
-          Celebration
+          <b-icon icon="heart" pack="far" size="is-small" />
         </div>
+        <div class="level-item">Show celebration</div>
       </div>
       <div class="level-right">
         <div class="level-item">
           <b-switch
-            v-model="celebrate"
+            v-model="shouldCelebrate"
             size="is-small"
             title="Toggle celebration on screen"
-            @input="toggleCelebration"
           />
         </div>
       </div>
     </div>
     <div class="buttons is-centered">
-      <button
-        class="button is-secondary is-rounded"
-        @click="quitSession"
-      >
-        <b-icon
-          icon="sign-out-alt"
-          size="is-small"
-        />
+      <button class="button is-secondary is-rounded" @click="quitSession">
+        <b-icon icon="sign-out-alt" size="is-small" />
         <span>End session</span>
       </button>
     </div>
@@ -103,17 +82,20 @@
 <script>
 import { mapGetters } from "vuex";
 import SmileyCounter from "@/components/SmileyCounter.vue";
-import SessionHealth from "@/components/SessionHealth.vue";
-import { clipboard, ipcRenderer } from "electron";
+import ScreenSelectionDropdown from "../components/ScreenSelectionDropdown";
+import { clipboard, ipcRenderer, remote } from "electron";
 export default {
-  components: { SmileyCounter, SessionHealth },
-  data() {
-    return {
-      shouldCelebrate: this.celebrate,
-    };
-  },
+  components: { SmileyCounter, ScreenSelectionDropdown },
   computed: {
     ...mapGetters(["activeSession", "celebrate"]),
+    shouldCelebrate: {
+      get() {
+        return this.celebrate;
+      },
+      set(val) {
+        this.$store.dispatch("toggleCelebration", val);
+      },
+    },
   },
   methods: {
     async quitSession() {
@@ -126,6 +108,11 @@ export default {
     toggleCelebration(val) {
       this.$store.dispatch("toggleCelebration", val);
     },
+    openSessionInBrowser() {
+      remote.shell.openExternal(
+        `https://www.plodo.io/#/start/${this.activeSession.id}`
+      );
+    },
   },
 };
 </script>
