Update frontend to handle some changes in the backend

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`;
       }
     }
   }

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 '';

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>
 

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) {

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>

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

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;

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);
 };