[web] Add page to control outputs #1450

web-src/src/components/NavbarTop.vue

@@ -128,6 +128,7 @@ export default {
         },
         { separator: true },
         { key: 'navigation.settings', name: 'settings-webinterface' },
+        { key: 'navigation.outputs', name: 'outputs' },
         { action: this.openUpdateDialog, key: 'navigation.update-library' },
         { key: 'navigation.about', name: 'about' }
       ]

web-src/src/i18n/de.json

@@ -130,6 +130,7 @@
     "files": "Dateien",
     "genres": "Genres",
     "music": "Musik",
+    "outputs": "Ausgänge",
     "playlists": "Playlisten",
     "podcasts": "Podcasts",
     "radio": "Radio",
@@ -137,7 +138,6 @@
     "settings": "Einstellungen",
     "spotify": "Spotify",
     "stream": "HTTP-stream",
-    "stream-error": "HTTP-stream-Fehler: Stream kann nicht geladen werden oder wurde wg. Netzwerkfehler gestopt",
     "update-library": "Bibliothek neu einlesen",
     "volume": "Lautstärke"
   },
@@ -213,6 +213,9 @@
         "spotify": "Spotify"
       }
     },
+    "outputs": {
+      "title": "Ausgänge"
+    },
     "player": {
       "info": "Tracks durch Auswählen aus der Bibliothek anfügen",
       "time": "Live|{time}|{time}",

web-src/src/i18n/en.json

@@ -130,6 +130,7 @@
     "files": "Files",
     "genres": "Genres",
     "music": "Music",
+    "outputs": "Outputs",
     "playlists": "Playlists",
     "podcasts": "Podcasts",
     "radio": "Radio",
@@ -137,7 +138,6 @@
     "settings": "Settings",
     "spotify": "Spotify",
     "stream": "HTTP stream",
-    "stream-error": "HTTP stream error: failed to load stream or stopped loading due to network problem",
     "update-library": "Update Library",
     "volume": "Volume"
   },
@@ -213,6 +213,9 @@
         "spotify": "Spotify"
       }
     },
+    "outputs": {
+      "title": "Outputs"
+    },
     "player": {
       "info": "Add some tracks by browsing your library",
       "time": "Live|{time}|{time}",

web-src/src/i18n/fr.json

@@ -130,6 +130,7 @@
     "files": "Fichiers",
     "genres": "Genres",
     "music": "Musique",
+    "outputs": "Sorties",
     "playlists": "Listes de lecture",
     "podcasts": "Podcasts",
     "radio": "Radio",
@@ -137,7 +138,6 @@
     "settings": "Réglages",
     "spotify": "Spotify",
     "stream": "Flux HTTP",
-    "stream-error": "Erreur du flux HTTP : échec du chargement du flux ou arrêt du chargement en raison d’un problème réseau",
     "update-library": "Actualiser la bibliothèque",
     "volume": "Volume"
   },
@@ -213,6 +213,9 @@
         "spotify": "Spotify"
       }
     },
+    "outputs": {
+      "title": "Sorties"
+    },
     "player": {
       "info": "Ajoutez des pistes en parcourant votre bibliothèque",
       "time": "En direct|{time}|{time}",

web-src/src/i18n/zh-CN.json

@@ -130,6 +130,7 @@
     "files": "文件",
     "genres": "流派",
     "music": "音乐",
+    "outputs": "输出",
     "playlists": "播放列表",
     "podcasts": "播客",
     "radio": "广播电台",
@@ -137,7 +138,6 @@
     "settings": "设置",
     "spotify": "Spotify",
     "stream": "HTTP流",
-    "stream-error": "HTTP流错误：流载入失败或者由于网络原因无法载入",
     "update-library": "更新资料库",
     "volume": "音量"
   },
@@ -213,6 +213,9 @@
         "spotify": "Spotify"
       }
     },
+    "outputs": {
+      "title": "输出"
+    },
     "player": {
       "info": "浏览资料库添加曲目",
       "time": "直播|{time}|{time}",

web-src/src/i18n/zh-TW.json

@@ -130,6 +130,7 @@
     "files": "文件",
     "genres": "音樂類型",
     "music": "音樂",
+    "outputs": "輸出",
     "playlists": "播放列表",
     "podcasts": "Podcast",
     "radio": "電台",
@@ -137,7 +138,6 @@
     "settings": "設定",
     "spotify": "Spotify",
     "stream": "HTTP串流",
-    "stream-error": "HTTP串流錯誤：串流載入失敗或者由於網絡原因無法載入",
     "update-library": "更新資料庫",
     "volume": "音量"
   },
@@ -213,6 +213,9 @@
         "spotify": "Spotify"
       }
     },
+    "outputs": {
+      "title": "輸出"
+    },
     "player": {
       "info": "瀏覽資料庫新增曲目",
       "time": "直播|{time}|{time}",

web-src/src/pages/PageOutputs.vue

@@ -0,0 +1,41 @@
+<template>
+  <content-with-heading>
+    <template #heading>
+      <pane-title :content="{ title: $t('page.outputs.title') }" />
+    </template>
+    <template #content>
+      <control-main-volume />
+      <control-output-volume
+        v-for="output in outputsStore.outputs"
+        :key="output.id"
+        :output="output"
+      />
+      <control-stream-volume />
+    </template>
+  </content-with-heading>
+</template>
+
+<script>
+import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import ControlMainVolume from '@/components/ControlMainVolume.vue'
+import ControlOutputVolume from '@/components/ControlOutputVolume.vue'
+import ControlStreamVolume from '@/components/ControlStreamVolume.vue'
+import PaneTitle from '@/components/PaneTitle.vue'
+import { useOutputsStore } from '@/stores/outputs'
+
+export default {
+  name: 'PageOutputs',
+  components: {
+    ContentWithHeading,
+    ControlMainVolume,
+    ControlOutputVolume,
+    ControlStreamVolume,
+    PaneTitle
+  },
+  setup() {
+    return {
+      outputsStore: useOutputsStore()
+    }
+  }
+}
+</script>

web-src/src/router/index.js

@@ -26,6 +26,7 @@ import PageMusicSpotify from '@/pages/PageMusicSpotify.vue'
 import PageMusicSpotifyFeaturedPlaylists from '@/pages/PageMusicSpotifyFeaturedPlaylists.vue'
 import PageMusicSpotifyFollowedArtists from '@/pages/PageMusicSpotifyFollowedArtists.vue'
 import PageMusicSpotifyNewReleases from '@/pages/PageMusicSpotifyNewReleases.vue'
+import PageOutputs from '@/pages/PageOutputs.vue'
 import PagePlayer from '@/pages/PagePlayer.vue'
 import PagePlaylistFolder from '@/pages/PagePlaylistFolder.vue'
 import PagePlaylistTracks from '@/pages/PagePlaylistTracks.vue'
@@ -109,6 +110,11 @@ export const router = createRouter({
       path: '/audiobooks',
       redirect: { name: 'audiobook-artists' }
     },
+    {
+      component: PageOutputs,
+      name: 'outputs',
+      path: '/outputs'
+    },
     {
       name: 'music',
       path: '/music',