Get lossless format list from server

consts/mime_types.go

@@ -2,6 +2,10 @@ package consts
 
 import "mime"
 
+var LosslessFormats = []string{
+	"flac", "wav", "alac", "ape", "dsf", "wav", "shn", "wv", "wvp",
+}
+
 func init() {
 	mt := map[string]string{
 		".mp3":  "audio/mpeg",
@@ -9,6 +13,7 @@ func init() {
 		".oga":  "audio/ogg",
 		".opus": "audio/ogg",
 		".aac":  "audio/mp4",
+		".alac": "audio/mp4",
 		".m4a":  "audio/mp4",
 		".m4b":  "audio/mp4",
 		".flac": "audio/flac",

server/app/serve_index.go

@@ -43,6 +43,7 @@ func serveIndex(ds model.DataStore, fs fs.FS) http.HandlerFunc {
 			"gaTrackingId":            conf.Server.GATrackingID,
 			"enableDownloads":         conf.Server.EnableDownloads,
 			"enableFavourites":        conf.Server.EnableFavourites,
+			"losslessFormats":         strings.ToUpper(strings.Join(consts.LosslessFormats, ",")),
 			"devActivityPanel":        conf.Server.DevActivityPanel,
 			"devFastAccessCoverArt":   conf.Server.DevFastAccessCoverArt,
 		}

server/app/serve_index_test.go

@@ -7,6 +7,7 @@ import (
 	"os"
 	"regexp"
 	"strconv"
+	"strings"
 
 	"github.com/navidrome/navidrome/conf"
 	"github.com/navidrome/navidrome/consts"
@@ -155,6 +156,17 @@ var _ = Describe("serveIndex", func() {
 		config := extractAppConfig(w.Body.String())
 		Expect(config).To(HaveKeyWithValue("version", consts.Version()))
 	})
+
+	It("sets the losslessFormats", func() {
+		r := httptest.NewRequest("GET", "/index.html", nil)
+		w := httptest.NewRecorder()
+
+		serveIndex(ds, fs)(w, r)
+
+		config := extractAppConfig(w.Body.String())
+		expected := strings.ToUpper(strings.Join(consts.LosslessFormats, ","))
+		Expect(config).To(HaveKeyWithValue("losslessFormats", expected))
+	})
 })
 
 var appConfigRegex = regexp.MustCompile(`(?m)window.__APP_CONFIG__="([^"]*)`)

ui/src/common/QualityInfo.js

@@ -1,16 +1,24 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Chip from '@material-ui/core/Chip'
-import { LOSSLESS_FORMATS } from '../consts'
+import config from '../config'
 
-export const QualityInfo = ({ record, size, ...rest }) => {
+const llFormats = new Set(config.losslessFormats.split(','))
-  let { suffix = 'NO_SUFFIX', bitRate = 'NO_BITRATE' } = record
+const placeholder = 'N/A'
-  suffix = suffix.toUpperCase()
+
-  let info = suffix
+export const QualityInfo = ({ record, ...rest }) => {
-  if (!LOSSLESS_FORMATS.includes(suffix)) {
+  let { suffix, bitRate } = record
-    info += ' ' + bitRate
+  let info = placeholder
+
+  if (suffix) {
+    suffix = suffix.toUpperCase()
+    info = suffix
+    if (!llFormats.has(suffix)) {
+      info += ' ' + bitRate
+    }
   }
-  return <Chip {...rest} size={size} variant="outlined" label={info} />
+
+  return <Chip {...rest} variant="outlined" label={info} />
 }
 
 QualityInfo.propTypes = {

ui/src/common/QualityInfo.test.js

@@ -5,76 +5,23 @@ import { QualityInfo } from './QualityInfo'
 describe('<QualityInfo />', () => {
   afterEach(cleanup)
 
-  it('only render FLAC', () => {
+  it('only render suffix for lossless formats', () => {
-    const info = { suffix: 'FLAC', bitRate: 108 }
+    const info = { suffix: 'FLAC', bitRate: 1008 }
-    const { getByText } = render(<QualityInfo record={info} />)
+    const { queryByText } = render(<QualityInfo record={info} />)
-    const format = getByText('FLAC')
+    expect(queryByText('FLAC')).not.toBeNull()
-    expect(format.innerHTML).toEqual('FLAC')
   })
-  it('only render WAV', () => {
+  it('only render suffix and bitrate for lossy formats', () => {
-    const info = { suffix: 'WAV', bitRate: 108 }
+    const info = { suffix: 'MP3', bitRate: 320 }
-    const { getByText } = render(<QualityInfo record={info} />)
+    const { queryByText } = render(<QualityInfo record={info} />)
-    const format = getByText('WAV')
+    expect(queryByText('MP3 320')).not.toBeNull()
-    expect(format.innerHTML).toEqual('WAV')
   })
-  it('only render DSF', () => {
+  it('renders placeholder if suffix is missing', () => {
-    const info = { suffix: 'DSF', bitRate: 108 }
-    const { getByText } = render(<QualityInfo record={info} />)
-    const format = getByText('DSF')
-    expect(format.innerHTML).toEqual('DSF')
-  })
-  it('only render ALAC', () => {
-    const info = { suffix: 'ALAC', bitRate: 108 }
-    const { getByText } = render(<QualityInfo record={info} />)
-    const format = getByText('ALAC')
-    expect(format.innerHTML).toEqual('ALAC')
-  })
-  it('only render TTA', () => {
-    const info = { suffix: 'TTA', bitRate: 108 }
-    const { getByText } = render(<QualityInfo record={info} />)
-    const format = getByText('TTA')
-    expect(format.innerHTML).toEqual('TTA')
-  })
-  it('only render ATRAC', () => {
-    const info = { suffix: 'ATRAC', bitRate: 108 }
-    const { getByText } = render(<QualityInfo record={info} />)
-    const format = getByText('ATRAC')
-    expect(format.innerHTML).toEqual('ATRAC')
-  })
-  it('only render SHN', () => {
-    const info = { suffix: 'SHN', bitRate: 108 }
-    const { getByText } = render(<QualityInfo record={info} />)
-    const format = getByText('SHN')
-    expect(format.innerHTML).toEqual('SHN')
-  })
-  it('only render OCG 108', () => {
-    const info = { suffix: 'OCG', bitRate: 108 }
-    const { getByText } = render(<QualityInfo record={info} />)
-    const format = getByText('OCG 108')
-    expect(format.innerHTML).toEqual('OCG 108')
-  })
-  it('only render MP3 108', () => {
-    const info = { suffix: 'MP3', bitRate: 108 }
-    const { getByText } = render(<QualityInfo record={info} />)
-    const format = getByText('MP3 108')
-    expect(format.innerHTML).toEqual('MP3 108')
-  })
-  it('only render AAC 108', () => {
-    const info = { suffix: 'AAC', bitRate: 108 }
-    const { getByText } = render(<QualityInfo record={info} />)
-    const format = getByText('AAC 108')
-    expect(format.innerHTML).toEqual('AAC 108')
-  })
-  it('only render OPUS 108', () => {
-    const info = { suffix: 'OPUS', bitRate: 108 }
-    const { getByText } = render(<QualityInfo record={info} />)
-    const format = getByText('OPUS 108')
-    expect(format.innerHTML).toEqual('OPUS 108')
-  })
-  it('render nothing', () => {
     const info = {}
-    const { getByText } = render(<QualityInfo record={info} />)
+    const { queryByText } = render(<QualityInfo record={info} />)
-    const format = getByText('NO_SUFFIX NO_BITRATE')
+    expect(queryByText('N/A')).not.toBeNull()
-    expect(format.innerHTML).toEqual('NO_SUFFIX NO_BITRATE')
+  })
+  it('does not break if record is null', () => {
+    const { queryByText } = render(<QualityInfo />)
+    expect(queryByText('N/A')).not.toBeNull()
   })
 })

ui/src/config.js

@@ -9,11 +9,12 @@ const defaultConfig = {
   loginBackgroundURL: 'https://source.unsplash.com/collection/1065384/1600x900',
   enableTranscodingConfig: true,
   enableDownloads: true,
+  enableFavourites: true,
+  losslessFormats: 'FLAC,WAV,ALAC,DSF',
   welcomeMessage: '',
   gaTrackingId: '',
   devActivityPanel: true,
   devFastAccessCoverArt: false,
-  enableFavourites: true,
 }
 
 let config

ui/src/consts.js

@@ -3,13 +3,3 @@ export const REST_URL = '/app/api'
 export const M3U_MIME_TYPE = 'audio/x-mpegurl'
 
 export const AUTO_THEME_ID = 'AUTO_THEME_ID'
-
-export const LOSSLESS_FORMATS = [
-  'FLAC',
-  'WAV',
-  'DSF',
-  'ALAC',
-  'TTA',
-  'ATRAC',
-  'SHN',
-]