From a7afbedffd3079448d54406b330d62771f426027 Mon Sep 17 00:00:00 2001
From: Marcel van der Veldt <m.vanderveldt@outlook.com>
Date: Fri, 7 Jul 2023 01:31:36 +0200
Subject: [PATCH] Update frontend to handle some changes in the backend (#127)

* Update frontend to handle some changes in the backend

* some more places to adjust
---
 src/components/ListviewItem.vue               |  8 +++---
 src/components/PanelviewItem.vue              |  8 +++---
 src/components/ProviderIcons.vue              | 12 ++++-----
 src/components/VolumeControl.vue              |  2 +-
 .../default/PlayerOSD/PlayerTrackDetails.vue  |  2 +-
 .../default/PlayerOSD/QualityDetailsBtn.vue   |  6 ++---
 src/plugins/api/interfaces.ts                 | 26 +++++++++++++------
 src/utils.ts                                  |  6 ++---
 8 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/src/components/ListviewItem.vue b/src/components/ListviewItem.vue
index f30de213..fbd5a858 100644
--- a/src/components/ListviewItem.vue
+++ b/src/components/ListviewItem.vue
@@ -230,10 +230,10 @@ const props = withDefaults(defineProps<Props>(), {
 const HiResDetails = computed(() => {
   if (props.item.provider_mappings) {
     for (const prov of props.item.provider_mappings) {
-      if (prov.content_type == undefined) continue;
-      if (!(prov.content_type in [ContentType.DSF, ContentType.FLAC, ContentType.AIFF, ContentType.WAV])) continue;
-      if (prov.sample_rate > 48000 || prov.bit_depth > 16) {
-        return `${prov.sample_rate}kHz ${prov.bit_depth} bits`;
+      if (prov.audio_format.content_type == undefined) continue;
+      if (!(prov.audio_format.content_type in [ContentType.DSF, ContentType.FLAC, ContentType.AIFF, ContentType.WAV])) continue;
+      if (prov.audio_format.sample_rate > 48000 || prov.audio_format.bit_depth > 16) {
+        return `${prov.audio_format.sample_rate}kHz ${prov.audio_format.bit_depth} bits`;
       }
     }
   }
diff --git a/src/components/PanelviewItem.vue b/src/components/PanelviewItem.vue
index 74ab3337..37474f45 100644
--- a/src/components/PanelviewItem.vue
+++ b/src/components/PanelviewItem.vue
@@ -89,10 +89,10 @@ const showSettingDots = ref(false);
 // computed properties
 const HiResDetails = computed(() => {
   for (const prov of props.item.provider_mappings) {
-    if (prov.content_type == undefined) continue;
-    if (!(prov.content_type in [ContentType.DSF, ContentType.FLAC, ContentType.AIFF, ContentType.WAV])) continue;
-    if (prov.sample_rate > 48000 || prov.bit_depth > 16) {
-      return `${prov.sample_rate}kHz ${prov.bit_depth} bits`;
+    if (prov.audio_format.content_type == undefined) continue;
+    if (!(prov.audio_format.content_type in [ContentType.DSF, ContentType.FLAC, ContentType.AIFF, ContentType.WAV])) continue;
+    if (prov.audio_format.sample_rate > 48000 || prov.audio_format.bit_depth > 16) {
+      return `${prov.audio_format.sample_rate}kHz ${prov.audio_format.bit_depth} bits`;
     }
   }
   return '';
diff --git a/src/components/ProviderIcons.vue b/src/components/ProviderIcons.vue
index 94fe4aa4..57257789 100644
--- a/src/components/ProviderIcons.vue
+++ b/src/components/ProviderIcons.vue
@@ -45,7 +45,7 @@
               <img
                 height="30"
                 width="50"
-                :src="getContentTypeIcon(mapping.content_type)"
+                :src="getContentTypeIcon(mapping.audio_format.content_type)"
                 :style="
                   $vuetify.theme.current.dark ? 'object-fit: contain;' : 'object-fit: contain;filter: invert(100%);'
                 "
@@ -142,17 +142,17 @@ export const getContentTypeIcon = function (contentType: ContentType) {
 export const getQualityDesc = function (provDetails: ProviderMapping) {
   if (
     [ContentType.DSF, ContentType.FLAC, ContentType.AIFF, ContentType.WAV, ContentType.ALAC].includes(
-      provDetails.content_type,
+      provDetails.audio_format.content_type,
     )
   ) {
     // lossless
-    if (provDetails.sample_rate > 48000 || provDetails.bit_depth > 16) {
+    if (provDetails.audio_format.sample_rate > 48000 || provDetails.audio_format.bit_depth > 16) {
       // hi res
-      return `Lossless Hi-Res ${provDetails.content_type}`;
+      return `Lossless Hi-Res ${provDetails.audio_format.content_type}`;
     }
-    return `Lossless ${provDetails.content_type}`;
+    return `Lossless ${provDetails.audio_format.content_type}`;
   }
-  return `Lossy ${provDetails.content_type}`;
+  return `Lossy ${provDetails.audio_format.content_type}`;
 };
 </script>
 
diff --git a/src/components/VolumeControl.vue b/src/components/VolumeControl.vue
index 78202e07..2bfbb9b4 100644
--- a/src/components/VolumeControl.vue
+++ b/src/components/VolumeControl.vue
@@ -119,7 +119,7 @@ defineProps<Props>();
 
 const getVolumePlayers = function (player: Player) {
   const items: Player[] = [];
-  if (player.type != PlayerType.GROUP) {
+  if (player.type != PlayerType.GROUP && !player.group_childs.includes(player.player_id)) {
     items.push(player);
   }
   for (const groupChildId of player.group_childs) {
diff --git a/src/layouts/default/PlayerOSD/PlayerTrackDetails.vue b/src/layouts/default/PlayerOSD/PlayerTrackDetails.vue
index 76ea4c4b..fc499ab0 100644
--- a/src/layouts/default/PlayerOSD/PlayerTrackDetails.vue
+++ b/src/layouts/default/PlayerOSD/PlayerTrackDetails.vue
@@ -56,7 +56,7 @@
         v-bind="props"
       >
         <div class="d-flex justify-center" style="width: 100%">
-          {{ curQueueItem?.streamdetails.content_type.toUpperCase() }}
+          {{ curQueueItem?.streamdetails.audio_format.content_type.toUpperCase() }}
         </div>
       </v-chip>
     </template>
diff --git a/src/layouts/default/PlayerOSD/QualityDetailsBtn.vue b/src/layouts/default/PlayerOSD/QualityDetailsBtn.vue
index 1a2cb041..c543cbb8 100644
--- a/src/layouts/default/PlayerOSD/QualityDetailsBtn.vue
+++ b/src/layouts/default/PlayerOSD/QualityDetailsBtn.vue
@@ -11,7 +11,7 @@
         v-bind="props"
       >
         <div class="d-flex justify-center" style="width: 100%">
-          {{ streamDetails.content_type.toUpperCase() }}
+          {{ streamDetails.audio_format.content_type.toUpperCase() }}
         </div>
       </v-chip>
     </template>
@@ -36,10 +36,10 @@
           <img
             height="30"
             width="50"
-            :src="getContentTypeIcon(streamDetails.content_type)"
+            :src="getContentTypeIcon(streamDetails.audio_format.content_type)"
             :style="$vuetify.theme.current.dark ? 'object-fit: contain;' : 'object-fit: contain;filter: invert(100%);'"
           />
-          {{ streamDetails.sample_rate / 1000 }} kHz / {{ streamDetails.bit_depth }} bits
+          {{ streamDetails.audio_format.sample_rate / 1000 }} kHz / {{ streamDetails.audio_format.bit_depth }} bits
         </div>
 
         <div
diff --git a/src/plugins/api/interfaces.ts b/src/plugins/api/interfaces.ts
index 97370079..5ce0b3e2 100644
--- a/src/plugins/api/interfaces.ts
+++ b/src/plugins/api/interfaces.ts
@@ -312,6 +312,13 @@ export interface PlayerConfig extends Config {
   default_name?: string;
 }
 
+export interface CoreConfig extends Config {
+  // Core(controller) Configuration.
+  module: string;
+  friendly_name: string;
+  last_error?: string;
+}
+
 //// media_items
 
 export interface ProviderMapping {
@@ -321,10 +328,7 @@ export interface ProviderMapping {
   provider_instance: string;
   available: boolean;
   // quality details (streamable content only)
-  content_type: ContentType;
-  sample_rate: number;
-  bit_depth: number;
-  bit_rate: number;
+  audio_format: AudioFormat;
   // optional details to store provider specific details
   details?: string;
   // url = link to provider details page if exists
@@ -463,14 +467,20 @@ export interface SearchResults {
   radio: Radio[];
 }
 
+export interface AudioFormat {
+    content_type: ContentType;
+    sample_rate: number;
+    bit_depth: number;
+    channels: number;
+    output_format_str: string;
+    bit_rate: number;
+}
+
 export interface StreamDetails {
   provider: string;
   item_id: string;
-  content_type: ContentType;
+  audio_format: AudioFormat;
   media_type: MediaType;
-  sample_rate: number;
-  bit_depth: number;
-  channels: number;
   stream_title?: string;
   duration?: number;
   size?: number;
diff --git a/src/utils.ts b/src/utils.ts
index ce435a6b..bd30662f 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -109,10 +109,10 @@ export const getBrowseFolderName = function (browseItem: BrowseFolder, t: any) {
 
 export const getPlayerName = function (player: Player, truncate = 26) {
   if (!player) return '';
-  if (player.type != PlayerType.GROUP && player.group_childs.length > 0) {
+  if (player.type != PlayerType.GROUP && player.group_childs.length > 1) {
     // create pretty name for syncgroup (e.g. playername +2)
-    // TODO: move to APi and only count available players
-    return `${truncateString(player.display_name, truncate - 3)} +${player.group_childs.length}`;
+    // TODO: move to API and only count available players
+    return `${truncateString(player.display_name, truncate - 3)} +${player.group_childs.length-1}`;
   }
   return truncateString(player.display_name, truncate);
 };