feat(webapp): inital mopidy testing

.vscode/settings.json

@@ -9,6 +9,8 @@
     "Gitea",
     "heroicons",
     "kispi",
+    "mopidy",
+    "Mopidy",
     "pnpm",
     "tailwindcss",
     "vite",

package.json

@@ -12,6 +12,8 @@
     "@heroicons/vue": "^1.0.6",
     "@vueuse/core": "^8.9.2",
     "daisyui": "^2.19.0",
+    "events": "^3.3.0",
+    "mopidy": "^1.3.0",
     "vue": "^3.2.37",
     "vue-router": "4"
   },

pnpm-lock.yaml

@@ -12,6 +12,8 @@ specifiers:
   eslint: ^8.19.0
   eslint-plugin-vue: ^9.2.0
   eslint-plugin-vue-scoped-css: ^2.2.0
+  events: ^3.3.0
+  mopidy: ^1.3.0
   postcss: ^8.4.14
   sass: ^1.53.0
   tailwindcss: ^3.1.6
@@ -26,6 +28,8 @@ dependencies:
   '@heroicons/vue': 1.0.6_vue@3.2.37
   '@vueuse/core': 8.9.2_vue@3.2.37
   daisyui: 2.19.0_ugi4xkrfysqkt4c4y6hkyfj344
+  events: 3.3.0
+  mopidy: 1.3.0
   vue: 3.2.37
   vue-router: 4.1.2_vue@3.2.37
 
@@ -1103,6 +1107,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /events/3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
+    dev: false
+
   /fast-deep-equal/3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
@@ -1303,6 +1312,14 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
+  /isomorphic-ws/4.0.1_ws@7.5.8:
+    resolution: {integrity: sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==}
+    peerDependencies:
+      ws: '*'
+    dependencies:
+      ws: 7.5.8
+    dev: false
+
   /js-yaml/4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
@@ -1388,6 +1405,17 @@ packages:
     hasBin: true
     dev: true
 
+  /mopidy/1.3.0:
+    resolution: {integrity: sha512-wBk5XKXpZY5tMedeWtiS8mZlwOu5RZYibNe5TW85dQMovN4ZW0gl6SPNAwfqiwQ9YiCDOQwwEQ6CnPNPab6QYA==}
+    engines: {node: '>= 10'}
+    dependencies:
+      isomorphic-ws: 4.0.1_ws@7.5.8
+      ws: 7.5.8
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: false
+
   /ms/2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
     dev: true
@@ -1963,6 +1991,19 @@ packages:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
 
+  /ws/7.5.8:
+    resolution: {integrity: sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==}
+    engines: {node: '>=8.3.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: false
+
   /xml-name-validator/4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}

src/components/views/RadioView.vue

@@ -1,8 +1,56 @@
 <template>
-  #Radio
+  <button @click="getTrack()">GetTrack</button>
+  <button @click="setPlayPause()">Play/Pause</button>
+  <div>Currently Playing: {{ `${artist} - ${track}` }}</div>
 </template>
 
 <script lang="ts" setup>
+import Mopidy from 'mopidy';
+import { onBeforeUnmount, ref } from 'vue';
+
+const artist = ref('');
+const track = ref('');
+
+const mopidy = new Mopidy({
+  webSocketUrl: 'ws://localhost:6680/mopidy/ws/',
+});
+
+mopidy.on('state', console.log);
+mopidy.on('event', console.log);
+
+mopidy.on('state:online', () => {
+  getTrack();
+});
+
+mopidy.on('event:trackPlaybackStarted', (event) => {
+  track.value = event.tl_track.track.name;
+  artist.value = event.tl_track.track.artists.map((artist) => artist.name).join(', ');
+});
+
+async function getTrack() {
+  if(mopidy.playback) {
+    const currentTrack = await mopidy.playback.getCurrentTrack();
+    console.log(await mopidy.playback.getTimePosition());
+    if(currentTrack) {
+      track.value = currentTrack.name;
+      artist.value = currentTrack.artists.map((artist) => artist.name).join(', ');
+    }
+  }
+}
+
+async function setPlayPause() {
+  const currentState = await mopidy.playback?.getState();
+  if(currentState === 'playing') {
+    await mopidy.playback?.pause();
+  } else {
+    await mopidy.playback?.resume();
+  }
+}
+
+onBeforeUnmount(() => {
+  mopidy.close();
+  mopidy.off();
+});
 
 </script>