Cache stream settings in local storage

GPU preview and MJPEG stream settings are now persisted
using localStorage.  The old code that disabled
the stream for local connections now
just sets the initial/default value.

The initialisation of stream settings is now done
in the created() method of streamContent.vue.

I've eliminated the "globalsafetogglepreview" event
in favour of watching the store.

openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue

@@ -73,8 +73,11 @@ export default {
         return this.$store.state.autoGpuPreview;
       },
       set(value) {
+        // NB the stream viewer watches the store, and is
+        // responsible for making the request that switches
+        // GPU preview on/off
+        // see streamContent.vue
         this.$store.commit("changeAutoGpuPreview", value);
-        this.$root.$emit("globalSafeTogglePreview", value);
       }
     },
 
@@ -86,6 +89,42 @@ export default {
         this.$store.commit("changeTrackWindow", value);
       }
     }
+  },
+
+  watch: {
+    // Cache the stream settings to local storage for persistence
+    // (the next 3 functions all relate to this)
+    disableStream: function(newValue) {
+      console.log(`disableStream updated to ${newValue} and saved in local storage`);
+    },
+    autoGpuPreview: function(newValue) {
+      console.log(`GPU preview updated to ${newValue} and saved in local storage`);
+    },
+    trackWindow: function(newValue) {
+      console.log(`trackWindow updated to ${newValue} and saved in local storage`);
+    }
+  },
+
+  created() {
+    // Apply sensible defaults for stream settings, depending on
+    // whether we're connecting locally or remotely, respecting
+    // the settings that were cached previously.
+    const localMode = ["localhost", "0.0.0.0", "127.0.0.1", "[::1]"].includes(
+      window.location.hostname
+    );
+    const localDefaults = {
+      disableStream: true,
+      autoGpuPreview: true,
+      trackWindow: true
+    };
+    for (let k in localDefaults) {
+      if (localStorage.getItem(k) !== null) {
+        this[k] = this.getLocalStorageObj(k);
+      } else if (localMode) {
+        console.log(`${k} set to default value for a local connection`);
+        this[k] = localDefaults[k];
+      }
+    }
   }
 };
 </script>

openflexure_microscope/api/static/src/components/tabContentComponents/streamContent.vue

@@ -69,6 +69,16 @@ export default {
     },
     settingsUri: function() {
       return `${this.$store.getters.baseUri}/api/v2/instrument/settings`;
+    },
+    autoGpuPreview: function() {
+      return this.$store.state.autoGpuPreview;
+    }
+  },
+
+  watch: {
+    autoGpuPreview: function(newValue) {
+      // When the GPU preview setting in the store changes, update the server
+      this.safePreviewRequest(newValue);
     }
   },
 
@@ -77,9 +87,6 @@ export default {
     this.$root.$on("globalTogglePreview", state => {
       this.previewRequest(state);
     });
-    this.$root.$on("globalSafeTogglePreview", state => {
-      this.safePreviewRequest(state);
-    });
     // A global signal listener to flash the stream element
     this.$root.$on("globalFlashStream", () => {
       this.flashStream();
@@ -97,7 +104,7 @@ export default {
 
   created: function() {
     // Send a request to start/stop GPU preview based on global setting
-    this.safePreviewRequest(this.$store.state.autoGpuPreview);
+    this.safePreviewRequest(this.autoGpuPreview);
   },
 
   beforeDestroy: function() {