Merge pull request #36 from capital-G/develop

Develop

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## v0.2.1
+
+* Add pinia for state management
+* Change behavior of SocketIO host detection
+* fix reverse proxy example
+* remove web-font loader as dependency
+* Fix `docker-compose.yml` depends_on bug
+* Reuse same SocketIO connection in app
+
 ## v0.2.0
 
 * Move from JavaScript to TypeScript

README.md

@@ -48,6 +48,7 @@ In order to try it out on your local machine you can type
 ```shell
 docker-compose up --build
 ```
+
 Once everything spun up you can access the frontend on <http://localhost:3000> and start creating controls from SuperCollider by reading the docs
 
 ```supercollider
@@ -112,6 +113,9 @@ server {
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "Upgrade";
+
       add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
       client_max_body_size 0;
 

WebRTCGUI.quark

@@ -1,8 +1,8 @@
 (
   name: "WebRTCGUI",
-  summary: "GUI for browsers with remote sync capablities.",
-  version: "0.1.0",
-  schelp: "DemonWidgets",
+  summary: "GUI for browsers with remote sync capabilities.",
+  version: "0.2.0",
+  schelp: "WebRTCGUI",
   url: "https://github.com/capital-G/webRTCgui",
   license: "GPL-2.0",
   copyright: "Dennis Scheiba, 2022"

docker-compose.server.yml

@@ -4,6 +4,8 @@ services:
   backend:
     build:
       context: js
+      args:
+        - VUE_APP_SOCKET_ENDPOINT
     entrypoint: [ "npm", "run", "server"]
     environment:
       - BACKEND_AUTH_TOKEN=${BACKEND_AUTH_TOKEN:-change_me}

js/Dockerfile

@@ -9,6 +9,8 @@ RUN npm install
 
 COPY . .
 
+ARG VUE_APP_SOCKET_ENDPOINT
+
 RUN [ "npm", "run",  "build"]
 
 ENTRYPOINT [ "npm", "run", "server" ]

js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "supercollider_web_rtc_gui",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "private": true,
   "description": "Allows to dynamically create GUIs for the web via SuperCollider",
   "author": "Dennis Scheiba",
@@ -28,19 +28,18 @@
     "core-js": "^3.8.3",
     "express": "^4.17.3",
     "osc": "^2.4.2",
+    "pinia": "^2.0.28",
     "roboto-fontface": "*",
     "socket.io": "^4.4.1",
     "socket.io-client": "^4.4.1",
     "vue": "^3.2.13",
     "vue-class-component": "^8.0.0-0",
-    "vuetify": "^3.0.4",
-    "webfontloader": "^1.0.0"
+    "vuetify": "^3.0.4"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.33.1",
     "@types/express": "^4.17.14",
     "@types/node": "^18.11.9",
-    "@types/webfontloader": "^1.6.35",
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^8.29.0",

js/src/components/ControlPanel.vue

@@ -1,28 +1,18 @@
 <script lang="ts" setup>
-import type { Ref } from "vue";
-import { ref } from "vue";
-import { useSocketIO } from "../services/socketio.service";
-import type { Controller } from "../communication";
+import { Ref, computed, ref } from "vue";
+import { useControllerStore } from "../services/store.service";
 import ControllerSlider from "./ControllerSlider.vue";
 import ControllerButton from "./ControllerButton.vue";
 import ControllerText from "./ControllerText.vue";
 
-const controllers: Ref<{ [id: string]: Controller }> = ref({});
-
-const { socket } = useSocketIO();
-
-socket.on("controllers", (newControllers) => {
-  console.log("received", newControllers);
-  controllers.value = newControllers;
-});
-
-socket.emit("getState");
+const controllerStore = useControllerStore();
+const controllersValue = computed(() => controllerStore.controllers);
 </script>
 
 <template>
   <v-container>
     <h2>Controller Panel</h2>
-    <div v-for="controller in controllers" :key="controller.name">
+    <div v-for="controller in controllersValue" :key="controller.name">
       <ControllerSlider
         v-if="controller.type === 'slider'"
         :controller="controller"

js/src/components/ControllerButton.vue

@@ -1,23 +1,19 @@
 <script setup lang="ts">
 import type { PropType, Ref } from "vue";
 import { defineProps, ref } from "vue";
-import { useSocketIO } from "../services/socketio.service";
+import { socket } from "../services/socketio.service";
 import type { ButtonController } from "../communication";
+import { useControllerStore } from "../services/store.service";
 
 const props = defineProps({
   controller: { type: Object as PropType<ButtonController>, required: true }
 });
 
-const { socket } = useSocketIO();
-
-const value: Ref<number> = ref(props.controller.value);
+const controllerStore = useControllerStore();
+const controller = controllerStore.controllers[props.controller.name];
 
 async function buttonPress() {
-  // as we can not update props in vue
-  // we instead copy it and use it to set the values
-  const c = structuredClone({ ...props.controller });
-  c.value = value.value;
-  socket.emit("changeController", c);
+  socket.emit("changeController", controller);
 }
 </script>
 
@@ -27,7 +23,7 @@ async function buttonPress() {
       <v-col>
         <div>
           <v-btn
-            v-model="value"
+            v-model="controller.value"
             color="orange"
             @click="buttonPress()"
           >