fix: workaround to force check for initial setup

README.md

@@ -26,14 +26,13 @@ please fill a [GitHub issue](https://github.com/deluan/navidrome/issues) or join
    [Airsonic](https://airsonic.github.io/) and [Madsonic](https://www.madsonic.org/). 
    See the [complete list of available mobile and web apps](https://airsonic.github.io/docs/apps/)
 - Transcoding/Downsampling on-the-fly (WIP. Experimental support is available)
-
+- Integrated music player (WIP)
 
 ## Road map
 
 This project is being actively worked on. Expect a more polished experience and new features/releases 
 on a frequent basis. Some upcoming features planned: 
 
-- Integrated music player
 - Last.FM integration
 - Pre-build binaries for Raspberry Pi
 - Smart/dynamic playlists (similar to iTunes)
@@ -119,10 +118,10 @@ For more options, run `navidrome --help`
 
 <p align="center">
 <p float="left">
-    <img width="270" src="https://raw.githubusercontent.com/deluan/navidrome/master/.github/screenshots/screenshot-login-mobile.png">
-    <img width="270" src="https://raw.githubusercontent.com/deluan/navidrome/master/.github/screenshots/screenshot-mobile.png">
-    <img width="270" src="https://raw.githubusercontent.com/deluan/navidrome/master/.github/screenshots/screenshot-users-mobile.png">
-    <img width="900"src="https://raw.githubusercontent.com/deluan/navidrome/master/.github/screenshots/screenshot-desktop.png">
+    <img width="270" src="https://raw.githubusercontent.com/deluan/navidrome/master/.github/screenshots/ss-mobile-login.png">
+    <img width="270" src="https://raw.githubusercontent.com/deluan/navidrome/master/.github/screenshots/ss-mobile-player.png">
+    <img width="270" src="https://raw.githubusercontent.com/deluan/navidrome/master/.github/screenshots/ss-mobile-album-view.png">
+    <img width="900"src="https://raw.githubusercontent.com/deluan/navidrome/master/.github/screenshots/ss-desktop-player.png">
 </p>
 </p>
 

engine/auth/auth.go

@@ -0,0 +1,64 @@
+package auth
+
+import (
+	"fmt"
+	"sync"
+	"time"
+
+	"github.com/deluan/navidrome/consts"
+	"github.com/deluan/navidrome/log"
+	"github.com/deluan/navidrome/model"
+	"github.com/dgrijalva/jwt-go"
+	"github.com/go-chi/jwtauth"
+)
+
+var (
+	once      sync.Once
+	JwtSecret []byte
+	TokenAuth *jwtauth.JWTAuth
+)
+
+func InitTokenAuth(ds model.DataStore) {
+	once.Do(func() {
+		secret, err := ds.Property(nil).DefaultGet(consts.JWTSecretKey, "not so secret")
+		if err != nil {
+			log.Error("No JWT secret found in DB. Setting a temp one, but please report this error", err)
+		}
+		JwtSecret = []byte(secret)
+		TokenAuth = jwtauth.New("HS256", JwtSecret, nil)
+	})
+}
+
+func CreateToken(u *model.User) (string, error) {
+	token := jwt.New(jwt.SigningMethodHS256)
+	claims := token.Claims.(jwt.MapClaims)
+	claims["iss"] = consts.JWTIssuer
+	claims["sub"] = u.UserName
+	claims["adm"] = u.IsAdmin
+
+	return TouchToken(token)
+}
+
+func TouchToken(token *jwt.Token) (string, error) {
+	expireIn := time.Now().Add(consts.JWTTokenExpiration).Unix()
+	claims := token.Claims.(jwt.MapClaims)
+	claims["exp"] = expireIn
+
+	return token.SignedString(JwtSecret)
+}
+
+func Validate(tokenStr string) (jwt.MapClaims, error) {
+	token, err := jwt.Parse(tokenStr, func(token *jwt.Token) (interface{}, error) {
+		// Don't forget to validate the alg is what you expect:
+		if _, ok := token.Method.(*jwt.SigningMethodHMAC); !ok {
+			return nil, fmt.Errorf("Unexpected signing method: %v", token.Header["alg"])
+		}
+
+		// hmacSampleSecret is a []byte containing your secret, e.g. []byte("my_secret_key")
+		return JwtSecret, nil
+	})
+	if err != nil {
+		return nil, err
+	}
+	return token.Claims.(jwt.MapClaims), err
+}

engine/auth/auth_test.go

@@ -0,0 +1,55 @@
+package auth_test
+
+import (
+	"testing"
+	"time"
+
+	"github.com/deluan/navidrome/engine/auth"
+	"github.com/deluan/navidrome/log"
+	"github.com/dgrijalva/jwt-go"
+	. "github.com/onsi/ginkgo"
+	. "github.com/onsi/gomega"
+)
+
+func TestAuth(t *testing.T) {
+	log.SetLevel(log.LevelCritical)
+	RegisterFailHandler(Fail)
+	RunSpecs(t, "Auth Test Suite")
+}
+
+const testJWTSecret = "not so secret"
+
+var _ = Describe("Auth", func() {
+	BeforeEach(func() {
+		auth.JwtSecret = []byte(testJWTSecret)
+	})
+	Context("Validate", func() {
+		It("returns error with an invalid JWT token", func() {
+			_, err := auth.Validate("invalid.token")
+			Expect(err).To(Not(BeNil()))
+		})
+
+		It("returns the claims from a valid JWT token", func() {
+			token := jwt.New(jwt.SigningMethodHS256)
+			claims := token.Claims.(jwt.MapClaims)
+			claims["iss"] = "issuer"
+			claims["exp"] = time.Now().Add(1 * time.Minute).Unix()
+			tokenStr, _ := token.SignedString(auth.JwtSecret)
+
+			decodedClaims, err := auth.Validate(tokenStr)
+			Expect(err).To(BeNil())
+			Expect(decodedClaims["iss"]).To(Equal("issuer"))
+		})
+
+		It("returns ErrExpired if the `exp` field is in the past", func() {
+			token := jwt.New(jwt.SigningMethodHS256)
+			claims := token.Claims.(jwt.MapClaims)
+			claims["iss"] = "issuer"
+			claims["exp"] = time.Now().Add(-1 * time.Minute).Unix()
+			tokenStr, _ := token.SignedString(auth.JwtSecret)
+
+			_, err := auth.Validate(tokenStr)
+			Expect(err).To(MatchError("Token is expired"))
+		})
+	})
+})

engine/media_streamer.go

@@ -150,7 +150,7 @@ func (m *transcodedMediaStream) Read(p []byte) (n int, err error) {
 // a Seek happens. This is ok-ish for audio, but would kill the server for video.
 func (m *transcodedMediaStream) Seek(offset int64, whence int) (int64, error) {
 	size := int64((m.mf.Duration)*m.bitRate*1000) / 8
-	log.Trace(m.ctx, "Seeking file", "path", m.mf.Path, "offset", offset, "whence", whence, "size", size)
+	log.Trace(m.ctx, "Seeking transcoded stream", "path", m.mf.Path, "offset", offset, "whence", whence, "size", size)
 
 	switch whence {
 	case io.SeekEnd:

engine/users.go

@@ -7,11 +7,12 @@ import (
 	"fmt"
 	"strings"
 
+	"github.com/deluan/navidrome/engine/auth"
 	"github.com/deluan/navidrome/model"
 )
 
 type Users interface {
-	Authenticate(ctx context.Context, username, password, token, salt string) (*model.User, error)
+	Authenticate(ctx context.Context, username, password, token, salt, jwt string) (*model.User, error)
 }
 
 func NewUsers(ds model.DataStore) Users {
@@ -22,7 +23,7 @@ type users struct {
 	ds model.DataStore
 }
 
-func (u *users) Authenticate(ctx context.Context, username, pass, token, salt string) (*model.User, error) {
+func (u *users) Authenticate(ctx context.Context, username, pass, token, salt, jwt string) (*model.User, error) {
 	user, err := u.ds.User(ctx).FindByUsername(username)
 	if err == model.ErrNotFound {
 		return nil, model.ErrInvalidAuth
@@ -33,6 +34,9 @@ func (u *users) Authenticate(ctx context.Context, username, pass, token, salt st
 	valid := false
 
 	switch {
+	case jwt != "":
+		claims, err := auth.Validate(jwt)
+		valid = err == nil && claims["sub"] == username
 	case pass != "":
 		if strings.HasPrefix(pass, "enc:") {
 			if dec, err := hex.DecodeString(pass[4:]); err == nil {

engine/users_test.go

@@ -3,6 +3,7 @@ package engine
 import (
 	"context"
 
+	"github.com/deluan/navidrome/engine/auth"
 	"github.com/deluan/navidrome/model"
 	"github.com/deluan/navidrome/persistence"
 	. "github.com/onsi/ginkgo"
@@ -19,20 +20,20 @@ var _ = Describe("Users", func() {
 
 		Context("Plaintext password", func() {
 			It("authenticates with plaintext password ", func() {
-				usr, err := users.Authenticate(context.TODO(), "admin", "wordpass", "", "")
+				usr, err := users.Authenticate(context.TODO(), "admin", "wordpass", "", "", "")
 				Expect(err).NotTo(HaveOccurred())
 				Expect(usr).To(Equal(&model.User{UserName: "admin", Password: "wordpass"}))
 			})
 
 			It("fails authentication with wrong password", func() {
-				_, err := users.Authenticate(context.TODO(), "admin", "INVALID", "", "")
+				_, err := users.Authenticate(context.TODO(), "admin", "INVALID", "", "", "")
 				Expect(err).To(MatchError(model.ErrInvalidAuth))
 			})
 		})
 
 		Context("Encoded password", func() {
 			It("authenticates with simple encoded password ", func() {
-				usr, err := users.Authenticate(context.TODO(), "admin", "enc:776f726470617373", "", "")
+				usr, err := users.Authenticate(context.TODO(), "admin", "enc:776f726470617373", "", "", "")
 				Expect(err).NotTo(HaveOccurred())
 				Expect(usr).To(Equal(&model.User{UserName: "admin", Password: "wordpass"}))
 			})
@@ -40,13 +41,41 @@ var _ = Describe("Users", func() {
 
 		Context("Token based authentication", func() {
 			It("authenticates with token based authentication", func() {
-				usr, err := users.Authenticate(context.TODO(), "admin", "", "23b342970e25c7928831c3317edd0b67", "retnlmjetrymazgkt")
+				usr, err := users.Authenticate(context.TODO(), "admin", "", "23b342970e25c7928831c3317edd0b67", "retnlmjetrymazgkt", "")
 				Expect(err).NotTo(HaveOccurred())
 				Expect(usr).To(Equal(&model.User{UserName: "admin", Password: "wordpass"}))
 			})
 
 			It("fails if salt is missing", func() {
-				_, err := users.Authenticate(context.TODO(), "admin", "", "23b342970e25c7928831c3317edd0b67", "")
+				_, err := users.Authenticate(context.TODO(), "admin", "", "23b342970e25c7928831c3317edd0b67", "", "")
+				Expect(err).To(MatchError(model.ErrInvalidAuth))
+			})
+		})
+
+		Context("JWT based authentication", func() {
+			var validToken string
+			BeforeEach(func() {
+				u := &model.User{UserName: "admin"}
+				var err error
+				validToken, err = auth.CreateToken(u)
+				if err != nil {
+					panic(err)
+				}
+			})
+			It("authenticates with JWT token based authentication", func() {
+				usr, err := users.Authenticate(context.TODO(), "admin", "", "", "", validToken)
+
+				Expect(err).NotTo(HaveOccurred())
+				Expect(usr).To(Equal(&model.User{UserName: "admin", Password: "wordpass"}))
+			})
+
+			It("fails if JWT token is invalid", func() {
+				_, err := users.Authenticate(context.TODO(), "admin", "", "", "", "invalid.token")
+				Expect(err).To(MatchError(model.ErrInvalidAuth))
+			})
+
+			It("fails if JWT token sub is different than username", func() {
+				_, err := users.Authenticate(context.TODO(), "not_admin", "", "", "", validToken)
 				Expect(err).To(MatchError(model.ErrInvalidAuth))
 			})
 		})

persistence/mediafile_repository.go

@@ -21,6 +21,10 @@ func NewMediaFileRepository(ctx context.Context, o orm.Ormer) *mediaFileReposito
 	r.ctx = ctx
 	r.ormer = o
 	r.tableName = "media_file"
+	r.sortMappings = map[string]string{
+		"artist": "artist asc, album asc, disc_number asc, track_number asc",
+		"album":  "album asc, disc_number asc, track_number asc",
+	}
 	return r
 }
 

persistence/sql_base_repository.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"fmt"
 	"strings"
+	"text/scanner"
 	"time"
 
 	. "github.com/Masterminds/squirrel"
@@ -15,9 +16,10 @@ import (
 )
 
 type sqlRepository struct {
-	ctx       context.Context
-	tableName string
-	ormer     orm.Ormer
+	ctx          context.Context
+	tableName    string
+	ormer        orm.Ormer
+	sortMappings map[string]string
 }
 
 const invalidUserId = "-1"
@@ -55,11 +57,30 @@ func (r sqlRepository) applyOptions(sq SelectBuilder, options ...model.QueryOpti
 			sq = sq.Offset(uint64(options[0].Offset))
 		}
 		if options[0].Sort != "" {
-			if options[0].Order == "desc" {
-				sq = sq.OrderBy(toSnakeCase(options[0].Sort + " desc"))
-			} else {
-				sq = sq.OrderBy(toSnakeCase(options[0].Sort))
+			sort := toSnakeCase(options[0].Sort)
+			if mapping, ok := r.sortMappings[sort]; ok {
+				sort = mapping
 			}
+			if !strings.Contains(sort, "asc") && !strings.Contains(sort, "desc") {
+				sort = sort + " asc"
+			}
+			if options[0].Order == "desc" {
+				var s scanner.Scanner
+				s.Init(strings.NewReader(sort))
+				var newSort string
+				for tok := s.Scan(); tok != scanner.EOF; tok = s.Scan() {
+					switch s.TokenText() {
+					case "asc":
+						newSort += " " + "desc"
+					case "desc":
+						newSort += " " + "asc"
+					default:
+						newSort += " " + s.TokenText()
+					}
+				}
+				sort = newSort
+			}
+			sq = sq.OrderBy(sort)
 		}
 	}
 	return sq
@@ -190,7 +211,7 @@ func (r sqlRepository) parseRestOptions(options ...rest.QueryOptions) model.Quer
 	qo := model.QueryOptions{}
 	if len(options) > 0 {
 		qo.Sort = options[0].Sort
-		qo.Order = options[0].Order
+		qo.Order = strings.ToLower(options[0].Order)
 		qo.Max = options[0].Max
 		qo.Offset = options[0].Offset
 		if len(options[0].Filters) > 0 {

server/app/app.go

@@ -7,6 +7,7 @@ import (
 	"strings"
 
 	"github.com/deluan/navidrome/assets"
+	"github.com/deluan/navidrome/engine/auth"
 	"github.com/deluan/navidrome/model"
 	"github.com/deluan/rest"
 	"github.com/go-chi/chi"
@@ -32,19 +33,19 @@ func (app *Router) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 func (app *Router) routes() http.Handler {
 	r := chi.NewRouter()
 
-	// Basic unauthenticated ping
-	r.Get("/ping", func(w http.ResponseWriter, r *http.Request) { w.Write([]byte(`{"response":"pong"}`)) })
-
 	r.Post("/login", Login(app.ds))
 	r.Post("/createAdmin", CreateAdmin(app.ds))
 
 	r.Route("/api", func(r chi.Router) {
-		r.Use(jwtauth.Verifier(TokenAuth))
+		r.Use(jwtauth.Verifier(auth.TokenAuth))
 		r.Use(Authenticator(app.ds))
 		app.R(r, "/user", model.User{})
 		app.R(r, "/song", model.MediaFile{})
 		app.R(r, "/album", model.Album{})
 		app.R(r, "/artist", model.Artist{})
+
+		// Keepalive endpoint to be used to keep the session valid (ex: while playing songs)
+		r.Get("/keepalive/*", func(w http.ResponseWriter, r *http.Request) { w.Write([]byte(`{"response":"ok"}`)) })
 	})
 
 	// Serve UI app assets

server/app/auth.go

@@ -10,6 +10,7 @@ import (
 	"time"
 
 	"github.com/deluan/navidrome/consts"
+	"github.com/deluan/navidrome/engine/auth"
 	"github.com/deluan/navidrome/log"
 	"github.com/deluan/navidrome/model"
 	"github.com/deluan/rest"
@@ -20,13 +21,11 @@ import (
 
 var (
 	once         sync.Once
-	jwtSecret    []byte
-	TokenAuth    *jwtauth.JWTAuth
 	ErrFirstTime = errors.New("no users created")
 )
 
 func Login(ds model.DataStore) func(w http.ResponseWriter, r *http.Request) {
-	initTokenAuth(ds)
+	auth.InitTokenAuth(ds)
 
 	return func(w http.ResponseWriter, r *http.Request) {
 		username, password, err := getCredentialsFromBody(r)
@@ -52,7 +51,7 @@ func handleLogin(ds model.DataStore, username string, password string, w http.Re
 		return
 	}
 
-	tokenString, err := createToken(user)
+	tokenString, err := auth.CreateToken(user)
 	if err != nil {
 		rest.RespondWithError(w, http.StatusInternalServerError, "Unknown error authenticating user. Please try again")
 		return
@@ -82,7 +81,7 @@ func getCredentialsFromBody(r *http.Request) (username string, password string,
 }
 
 func CreateAdmin(ds model.DataStore) func(w http.ResponseWriter, r *http.Request) {
-	initTokenAuth(ds)
+	auth.InitTokenAuth(ds)
 
 	return func(w http.ResponseWriter, r *http.Request) {
 		username, password, err := getCredentialsFromBody(r)
@@ -129,16 +128,6 @@ func createDefaultUser(ctx context.Context, ds model.DataStore, username, passwo
 	return nil
 }
 
-func initTokenAuth(ds model.DataStore) {
-	once.Do(func() {
-		secret, err := ds.Property(nil).DefaultGet(consts.JWTSecretKey, "not so secret")
-		if err != nil {
-			log.Error("No JWT secret found in DB. Setting a temp one, but please report this error", err)
-		}
-		jwtSecret = []byte(secret)
-		TokenAuth = jwtauth.New("HS256", jwtSecret, nil)
-	})
-}
 func validateLogin(userRepo model.UserRepository, userName, password string) (*model.User, error) {
 	u, err := userRepo.FindByUsername(userName)
 	if err == model.ErrNotFound {
@@ -157,24 +146,6 @@ func validateLogin(userRepo model.UserRepository, userName, password string) (*m
 	return u, nil
 }
 
-func createToken(u *model.User) (string, error) {
-	token := jwt.New(jwt.SigningMethodHS256)
-	claims := token.Claims.(jwt.MapClaims)
-	claims["iss"] = consts.JWTIssuer
-	claims["sub"] = u.UserName
-	claims["adm"] = u.IsAdmin
-
-	return touchToken(token)
-}
-
-func touchToken(token *jwt.Token) (string, error) {
-	expireIn := time.Now().Add(consts.JWTTokenExpiration).Unix()
-	claims := token.Claims.(jwt.MapClaims)
-	claims["exp"] = expireIn
-
-	return token.SignedString(jwtSecret)
-}
-
 func contextWithUser(ctx context.Context, ds model.DataStore, claims jwt.MapClaims) context.Context {
 	userName := claims["sub"].(string)
 	user, _ := ds.User(ctx).FindByUsername(userName)
@@ -199,7 +170,7 @@ func getToken(ds model.DataStore, ctx context.Context) (*jwt.Token, error) {
 }
 
 func Authenticator(ds model.DataStore) func(next http.Handler) http.Handler {
-	initTokenAuth(ds)
+	auth.InitTokenAuth(ds)
 
 	return func(next http.Handler) http.Handler {
 		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
@@ -216,7 +187,7 @@ func Authenticator(ds model.DataStore) func(next http.Handler) http.Handler {
 			claims := token.Claims.(jwt.MapClaims)
 
 			newCtx := contextWithUser(r.Context(), ds, claims)
-			newTokenString, err := touchToken(token)
+			newTokenString, err := auth.TouchToken(token)
 			if err != nil {
 				log.Error(r, "signing new token", err)
 				rest.RespondWithError(w, http.StatusUnauthorized, "Not authenticated")

server/subsonic/album_lists.go

@@ -47,8 +47,8 @@ func (c *AlbumListController) getAlbumList(r *http.Request) (engine.Entries, err
 		return nil, errors.New("Not implemented!")
 	}
 
-	offset := ParamInt(r, "offset", 0)
-	size := utils.MinInt(ParamInt(r, "size", 10), 500)
+	offset := utils.ParamInt(r, "offset", 0)
+	size := utils.MinInt(utils.ParamInt(r, "size", 10), 500)
 
 	albums, err := listFunc(r.Context(), offset, size)
 	if err != nil {
@@ -132,8 +132,8 @@ func (c *AlbumListController) GetNowPlaying(w http.ResponseWriter, r *http.Reque
 }
 
 func (c *AlbumListController) GetRandomSongs(w http.ResponseWriter, r *http.Request) (*responses.Subsonic, error) {
-	size := utils.MinInt(ParamInt(r, "size", 10), 500)
-	genre := ParamString(r, "genre")
+	size := utils.MinInt(utils.ParamInt(r, "size", 10), 500)
+	genre := utils.ParamString(r, "genre")
 
 	songs, err := c.listGen.GetRandomSongs(r.Context(), size, genre)
 	if err != nil {

server/subsonic/api.go

@@ -9,6 +9,7 @@ import (
 	"github.com/deluan/navidrome/engine"
 	"github.com/deluan/navidrome/log"
 	"github.com/deluan/navidrome/server/subsonic/responses"
+	"github.com/deluan/navidrome/utils"
 	"github.com/go-chi/chi"
 )
 
@@ -163,7 +164,7 @@ func SendError(w http.ResponseWriter, r *http.Request, err error) {
 }
 
 func SendResponse(w http.ResponseWriter, r *http.Request, payload *responses.Subsonic) {
-	f := ParamString(r, "f")
+	f := utils.ParamString(r, "f")
 	var response []byte
 	switch f {
 	case "json":
@@ -172,7 +173,7 @@ func SendResponse(w http.ResponseWriter, r *http.Request, payload *responses.Sub
 		response, _ = json.Marshal(wrapper)
 	case "jsonp":
 		w.Header().Set("Content-Type", "application/javascript")
-		callback := ParamString(r, "callback")
+		callback := utils.ParamString(r, "callback")
 		wrapper := &responses.JsonWrapper{Subsonic: *payload}
 		data, _ := json.Marshal(wrapper)
 		response = []byte(fmt.Sprintf("%s(%s)", callback, data))

server/subsonic/browsing.go

@@ -59,8 +59,8 @@ func (c *BrowsingController) getArtistIndex(r *http.Request, musicFolderId strin
 }
 
 func (c *BrowsingController) GetIndexes(w http.ResponseWriter, r *http.Request) (*responses.Subsonic, error) {
-	musicFolderId := ParamString(r, "musicFolderId")
-	ifModifiedSince := ParamTime(r, "ifModifiedSince", time.Time{})
+	musicFolderId := utils.ParamString(r, "musicFolderId")
+	ifModifiedSince := utils.ParamTime(r, "ifModifiedSince", time.Time{})
 
 	res, err := c.getArtistIndex(r, musicFolderId, ifModifiedSince)
 	if err != nil {
@@ -73,7 +73,7 @@ func (c *BrowsingController) GetIndexes(w http.ResponseWriter, r *http.Request)
 }
 
 func (c *BrowsingController) GetArtists(w http.ResponseWriter, r *http.Request) (*responses.Subsonic, error) {
-	musicFolderId := ParamString(r, "musicFolderId")
+	musicFolderId := utils.ParamString(r, "musicFolderId")
 	res, err := c.getArtistIndex(r, musicFolderId, time.Time{})
 	if err != nil {
 		return nil, err
@@ -85,7 +85,7 @@ func (c *BrowsingController) GetArtists(w http.ResponseWriter, r *http.Request)
 }
 
 func (c *BrowsingController) GetMusicDirectory(w http.ResponseWriter, r *http.Request) (*responses.Subsonic, error) {
-	id := ParamString(r, "id")
+	id := utils.ParamString(r, "id")
 	dir, err := c.browser.Directory(r.Context(), id)
 	switch {
 	case err == model.ErrNotFound:
@@ -102,7 +102,7 @@ func (c *BrowsingController) GetMusicDirectory(w http.ResponseWriter, r *http.Re
 }
 
 func (c *BrowsingController) GetArtist(w http.ResponseWriter, r *http.Request) (*responses.Subsonic, error) {
-	id := ParamString(r, "id")
+	id := utils.ParamString(r, "id")
 	dir, err := c.browser.Artist(r.Context(), id)
 	switch {
 	case err == model.ErrNotFound:
@@ -119,7 +119,7 @@ func (c *BrowsingController) GetArtist(w http.ResponseWriter, r *http.Request) (
 }
 
 func (c *BrowsingController) GetAlbum(w http.ResponseWriter, r *http.Request) (*responses.Subsonic, error) {
-	id := ParamString(r, "id")
+	id := utils.ParamString(r, "id")
 	dir, err := c.browser.Album(r.Context(), id)
 	switch {
 	case err == model.ErrNotFound:
@@ -136,7 +136,7 @@ func (c *BrowsingController) GetAlbum(w http.ResponseWriter, r *http.Request) (*
 }
 
 func (c *BrowsingController) GetSong(w http.ResponseWriter, r *http.Request) (*responses.Subsonic, error) {
-	id := ParamString(r, "id")
+	id := utils.ParamString(r, "id")
 	song, err := c.browser.GetSong(r.Context(), id)
 	switch {
 	case err == model.ErrNotFound:

server/subsonic/helpers.go

@@ -5,8 +5,6 @@ import (
 	"mime"
 	"net/http"
 	"strconv"
-	"strings"
-	"time"
 
 	"github.com/deluan/navidrome/consts"
 	"github.com/deluan/navidrome/engine"
@@ -20,7 +18,7 @@ func NewResponse() *responses.Subsonic {
 }
 
 func RequiredParamString(r *http.Request, param string, msg string) (string, error) {
-	p := ParamString(r, param)
+	p := utils.ParamString(r, param)
 	if p == "" {
 		return "", NewError(responses.ErrorMissingParameter, msg)
 	}
@@ -28,83 +26,19 @@ func RequiredParamString(r *http.Request, param string, msg string) (string, err
 }
 
 func RequiredParamStrings(r *http.Request, param string, msg string) ([]string, error) {
-	ps := ParamStrings(r, param)
+	ps := utils.ParamStrings(r, param)
 	if len(ps) == 0 {
 		return nil, NewError(responses.ErrorMissingParameter, msg)
 	}
 	return ps, nil
 }
 
-func ParamString(r *http.Request, param string) string {
-	return r.URL.Query().Get(param)
-}
-
-func ParamStrings(r *http.Request, param string) []string {
-	return r.URL.Query()[param]
-}
-
-func ParamTimes(r *http.Request, param string) []time.Time {
-	pStr := ParamStrings(r, param)
-	times := make([]time.Time, len(pStr))
-	for i, t := range pStr {
-		ti, err := strconv.ParseInt(t, 10, 64)
-		if err == nil {
-			times[i] = utils.ToTime(ti)
-		}
-	}
-	return times
-}
-
-func ParamTime(r *http.Request, param string, def time.Time) time.Time {
-	v := ParamString(r, param)
-	if v == "" {
-		return def
-	}
-	value, err := strconv.ParseInt(v, 10, 64)
-	if err != nil {
-		return def
-	}
-	return utils.ToTime(value)
-}
-
 func RequiredParamInt(r *http.Request, param string, msg string) (int, error) {
-	p := ParamString(r, param)
+	p := utils.ParamString(r, param)
 	if p == "" {
 		return 0, NewError(responses.ErrorMissingParameter, msg)
 	}
-	return ParamInt(r, param, 0), nil
-}
-
-func ParamInt(r *http.Request, param string, def int) int {
-	v := ParamString(r, param)
-	if v == "" {
-		return def
-	}
-	value, err := strconv.ParseInt(v, 10, 32)
-	if err != nil {
-		return def
-	}
-	return int(value)
-}
-
-func ParamInts(r *http.Request, param string) []int {
-	pStr := ParamStrings(r, param)
-	ints := make([]int, 0, len(pStr))
-	for _, s := range pStr {
-		i, err := strconv.ParseInt(s, 10, 32)
-		if err == nil {
-			ints = append(ints, int(i))
-		}
-	}
-	return ints
-}
-
-func ParamBool(r *http.Request, param string, def bool) bool {
-	p := ParamString(r, param)
-	if p == "" {
-		return def
-	}
-	return strings.Index("/true/on/1/", "/"+p+"/") != -1
+	return utils.ParamInt(r, param, 0), nil
 }
 
 type SubsonicError struct {

server/subsonic/media_annotation.go

@@ -9,6 +9,7 @@ import (
 	"github.com/deluan/navidrome/log"
 	"github.com/deluan/navidrome/model"
 	"github.com/deluan/navidrome/server/subsonic/responses"
+	"github.com/deluan/navidrome/utils"
 )
 
 type MediaAnnotationController struct {
@@ -49,9 +50,9 @@ func (c *MediaAnnotationController) SetRating(w http.ResponseWriter, r *http.Req
 }
 
 func (c *MediaAnnotationController) Star(w http.ResponseWriter, r *http.Request) (*responses.Subsonic, error) {
-	ids := ParamStrings(r, "id")
-	albumIds := ParamStrings(r, "albumId")
-	artistIds := ParamStrings(r, "artistId")
+	ids := utils.ParamStrings(r, "id")
+	albumIds := utils.ParamStrings(r, "albumId")
+	artistIds := utils.ParamStrings(r, "artistId")
 	if len(ids)+len(albumIds)+len(artistIds) == 0 {
 		return nil, NewError(responses.ErrorMissingParameter, "Required id parameter is missing")
 	}
@@ -84,9 +85,9 @@ func (c *MediaAnnotationController) star(ctx context.Context, starred bool, ids
 }
 
 func (c *MediaAnnotationController) Unstar(w http.ResponseWriter, r *http.Request) (*responses.Subsonic, error) {
-	ids := ParamStrings(r, "id")
-	albumIds := ParamStrings(r, "albumId")
-	artistIds := ParamStrings(r, "artistId")
+	ids := utils.ParamStrings(r, "id")
+	albumIds := utils.ParamStrings(r, "albumId")
+	artistIds := utils.ParamStrings(r, "artistId")
 	if len(ids)+len(albumIds)+len(artistIds) == 0 {
 		return nil, NewError(responses.ErrorMissingParameter, "Required id parameter is missing")
 	}
@@ -106,14 +107,14 @@ func (c *MediaAnnotationController) Scrobble(w http.ResponseWriter, r *http.Requ
 	if err != nil {
 		return nil, err
 	}
-	times := ParamTimes(r, "time")
+	times := utils.ParamTimes(r, "time")
 	if len(times) > 0 && len(times) != len(ids) {
 		return nil, NewError(responses.ErrorGeneric, "Wrong number of timestamps: %d, should be %d", len(times), len(ids))
 	}
-	submission := ParamBool(r, "submission", true)
+	submission := utils.ParamBool(r, "submission", true)
 	playerId := 1 // TODO Multiple players, based on playerName/username/clientIP(?)
-	playerName := ParamString(r, "c")
-	username := ParamString(r, "u")
+	playerName := utils.ParamString(r, "c")
+	username := utils.ParamString(r, "u")
 
 	log.Debug(r, "Scrobbling tracks", "ids", ids, "times", times, "submission", submission)
 	for i, id := range ids {

server/subsonic/media_retrieval.go

@@ -9,6 +9,7 @@ import (
 	"github.com/deluan/navidrome/model"
 	"github.com/deluan/navidrome/server/subsonic/responses"
 	"github.com/deluan/navidrome/static"
+	"github.com/deluan/navidrome/utils"
 )
 
 type MediaRetrievalController struct {
@@ -36,7 +37,7 @@ func (c *MediaRetrievalController) GetCoverArt(w http.ResponseWriter, r *http.Re
 	if err != nil {
 		return nil, err
 	}
-	size := ParamInt(r, "size", 0)
+	size := utils.ParamInt(r, "size", 0)
 
 	err = c.cover.Get(r.Context(), id, size, w)
 

server/subsonic/middlewares.go

@@ -11,6 +11,7 @@ import (
 	"github.com/deluan/navidrome/log"
 	"github.com/deluan/navidrome/model"
 	"github.com/deluan/navidrome/server/subsonic/responses"
+	"github.com/deluan/navidrome/utils"
 )
 
 func postFormToQueryParams(next http.Handler) http.Handler {
@@ -36,7 +37,7 @@ func checkRequiredParameters(next http.Handler) http.Handler {
 		requiredParameters := []string{"u", "v", "c"}
 
 		for _, p := range requiredParameters {
-			if ParamString(r, p) == "" {
+			if utils.ParamString(r, p) == "" {
 				msg := fmt.Sprintf(`Missing required parameter "%s"`, p)
 				log.Warn(r, msg)
 				SendError(w, r, NewError(responses.ErrorMissingParameter, msg))
@@ -44,13 +45,9 @@ func checkRequiredParameters(next http.Handler) http.Handler {
 			}
 		}
 
-		if ParamString(r, "p") == "" && (ParamString(r, "s") == "" || ParamString(r, "t") == "") {
-			log.Warn(r, "Missing authentication information")
-		}
-
-		user := ParamString(r, "u")
-		client := ParamString(r, "c")
-		version := ParamString(r, "v")
+		user := utils.ParamString(r, "u")
+		client := utils.ParamString(r, "c")
+		version := utils.ParamString(r, "v")
 		ctx := r.Context()
 		ctx = context.WithValue(ctx, "username", user)
 		ctx = context.WithValue(ctx, "client", client)
@@ -65,12 +62,13 @@ func checkRequiredParameters(next http.Handler) http.Handler {
 func authenticate(users engine.Users) func(next http.Handler) http.Handler {
 	return func(next http.Handler) http.Handler {
 		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-			username := ParamString(r, "u")
-			pass := ParamString(r, "p")
-			token := ParamString(r, "t")
-			salt := ParamString(r, "s")
+			username := utils.ParamString(r, "u")
+			pass := utils.ParamString(r, "p")
+			token := utils.ParamString(r, "t")
+			salt := utils.ParamString(r, "s")
+			jwt := utils.ParamString(r, "jwt")
 
-			usr, err := users.Authenticate(r.Context(), username, pass, token, salt)
+			usr, err := users.Authenticate(r.Context(), username, pass, token, salt, jwt)
 			if err == model.ErrInvalidAuth {
 				log.Warn(r, "Invalid login", "username", username, err)
 			} else if err != nil {

server/subsonic/middlewares_test.go

@@ -113,7 +113,7 @@ var _ = Describe("Middlewares", func() {
 		})
 
 		It("passes all parameters to users.Authenticate ", func() {
-			r := newGetRequest("u=valid", "p=password", "t=token", "s=salt")
+			r := newGetRequest("u=valid", "p=password", "t=token", "s=salt", "jwt=jwt")
 			cp := authenticate(mockedUser)(next)
 			cp.ServeHTTP(w, r)
 
@@ -121,6 +121,7 @@ var _ = Describe("Middlewares", func() {
 			Expect(mockedUser.password).To(Equal("password"))
 			Expect(mockedUser.token).To(Equal("token"))
 			Expect(mockedUser.salt).To(Equal("salt"))
+			Expect(mockedUser.jwt).To(Equal("jwt"))
 			Expect(next.called).To(BeTrue())
 			user := next.req.Context().Value("user").(*model.User)
 			Expect(user.UserName).To(Equal("valid"))
@@ -149,14 +150,15 @@ func (mh *mockHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 
 type mockUsers struct {
 	engine.Users
-	username, password, token, salt string
+	username, password, token, salt, jwt string
 }
 
-func (m *mockUsers) Authenticate(ctx context.Context, username, password, token, salt string) (*model.User, error) {
+func (m *mockUsers) Authenticate(ctx context.Context, username, password, token, salt, jwt string) (*model.User, error) {
 	m.username = username
 	m.password = password
 	m.token = token
 	m.salt = salt
+	m.jwt = jwt
 	if username == "valid" {
 		return &model.User{UserName: username, Password: password}, nil
 	}

server/subsonic/playlists.go

@@ -9,6 +9,7 @@ import (
 	"github.com/deluan/navidrome/log"
 	"github.com/deluan/navidrome/model"
 	"github.com/deluan/navidrome/server/subsonic/responses"
+	"github.com/deluan/navidrome/utils"
 )
 
 type PlaylistsController struct {
@@ -61,9 +62,9 @@ func (c *PlaylistsController) GetPlaylist(w http.ResponseWriter, r *http.Request
 }
 
 func (c *PlaylistsController) CreatePlaylist(w http.ResponseWriter, r *http.Request) (*responses.Subsonic, error) {
-	songIds := ParamStrings(r, "songId")
-	playlistId := ParamString(r, "playlistId")
-	name := ParamString(r, "name")
+	songIds := utils.ParamStrings(r, "songId")
+	playlistId := utils.ParamString(r, "playlistId")
+	name := utils.ParamString(r, "name")
 	if playlistId == "" && name == "" {
 		return nil, errors.New("Required parameter name is missing")
 	}
@@ -96,8 +97,8 @@ func (c *PlaylistsController) UpdatePlaylist(w http.ResponseWriter, r *http.Requ
 	if err != nil {
 		return nil, err
 	}
-	songsToAdd := ParamStrings(r, "songIdToAdd")
-	songIndexesToRemove := ParamInts(r, "songIndexToRemove")
+	songsToAdd := utils.ParamStrings(r, "songIdToAdd")
+	songIndexesToRemove := utils.ParamInts(r, "songIndexToRemove")
 
 	var pname *string
 	if len(r.URL.Query()["name"]) > 0 {

server/subsonic/searching.go

@@ -7,6 +7,7 @@ import (
 	"github.com/deluan/navidrome/engine"
 	"github.com/deluan/navidrome/log"
 	"github.com/deluan/navidrome/server/subsonic/responses"
+	"github.com/deluan/navidrome/utils"
 )
 
 type SearchingController struct {
@@ -34,12 +35,12 @@ func (c *SearchingController) getParams(r *http.Request) (*searchParams, error)
 	if err != nil {
 		return nil, err
 	}
-	sp.artistCount = ParamInt(r, "artistCount", 20)
-	sp.artistOffset = ParamInt(r, "artistOffset", 0)
-	sp.albumCount = ParamInt(r, "albumCount", 20)
-	sp.albumOffset = ParamInt(r, "albumOffset", 0)
-	sp.songCount = ParamInt(r, "songCount", 20)
-	sp.songOffset = ParamInt(r, "songOffset", 0)
+	sp.artistCount = utils.ParamInt(r, "artistCount", 20)
+	sp.artistOffset = utils.ParamInt(r, "artistOffset", 0)
+	sp.albumCount = utils.ParamInt(r, "albumCount", 20)
+	sp.albumOffset = utils.ParamInt(r, "albumOffset", 0)
+	sp.songCount = utils.ParamInt(r, "songCount", 20)
+	sp.songOffset = utils.ParamInt(r, "songOffset", 0)
 	return sp, nil
 }
 

server/subsonic/stream.go

@@ -5,6 +5,7 @@ import (
 
 	"github.com/deluan/navidrome/engine"
 	"github.com/deluan/navidrome/server/subsonic/responses"
+	"github.com/deluan/navidrome/utils"
 )
 
 type StreamController struct {
@@ -20,8 +21,8 @@ func (c *StreamController) Stream(w http.ResponseWriter, r *http.Request) (*resp
 	if err != nil {
 		return nil, err
 	}
-	maxBitRate := ParamInt(r, "maxBitRate", 0)
-	format := ParamString(r, "format")
+	maxBitRate := utils.ParamInt(r, "maxBitRate", 0)
+	format := utils.ParamString(r, "format")
 
 	ms, err := c.streamer.NewStream(r.Context(), id, maxBitRate, format)
 	if err != nil {

ui/package-lock.json

@@ -2491,6 +2491,14 @@
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
       "integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA=="
     },
+    "add-dom-event-listener": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz",
+      "integrity": "sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==",
+      "requires": {
+        "object-assign": "4.x"
+      }
+    },
     "address": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/address/-/address-1.1.2.tgz",
@@ -3312,6 +3320,11 @@
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
     },
+    "blueimp-md5": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.12.0.tgz",
+      "integrity": "sha512-zo+HIdIhzojv6F1siQPqPFROyVy7C50KzHv/k/Iz+BtvtVzSHXiMXOpq2wCfNkeBqdCv+V8XOV96tsEt2W/3rQ=="
+    },
     "bn.js": {
       "version": "4.11.8",
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
@@ -4039,11 +4052,24 @@
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
     },
+    "component-classes": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz",
+      "integrity": "sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=",
+      "requires": {
+        "component-indexof": "0.0.3"
+      }
+    },
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
       "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
     },
+    "component-indexof": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz",
+      "integrity": "sha1-EdCRMSI5648yyPJa6csAL/6NPCQ="
+    },
     "compose-function": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/compose-function/-/compose-function-3.0.3.tgz",
@@ -4352,6 +4378,15 @@
         "urix": "^0.1.0"
       }
     },
+    "css-animation": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.6.1.tgz",
+      "integrity": "sha512-/48+/BaEaHRY6kNQ2OIPzKf9A6g8WjZYjhiNDNuIVbsm5tXCGIAsHDjB4Xu1C4vXJtUWZo26O68OQkDpNBaPog==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "component-classes": "^1.2.5"
+      }
+    },
     "css-blank-pseudo": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz",
@@ -4685,6 +4720,11 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+    },
     "default-gateway": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@@ -4906,6 +4946,11 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-align": {
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.10.4.tgz",
+      "integrity": "sha512-wytDzaru67AmqFOY4B9GUb/hrwWagezoYYK97D/vpK+ezg+cnuZO0Q2gltUPa7KfNmIqfRIYVCF8UhRDEHAmgQ=="
+    },
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -4992,6 +5037,11 @@
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
     },
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
+      "integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
+    },
     "downshift": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/downshift/-/downshift-3.2.7.tgz",
@@ -7564,6 +7614,11 @@
       "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
       "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
     },
+    "is-mobile": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-mobile/-/is-mobile-2.1.0.tgz",
+      "integrity": "sha512-M5OhlZwh+aTlmRUvDg0Wq3uWVNa+w4DyZ2SjbrS+BhSLu9Po+JXHendC305ZEu+Hh7lywb19Zu4kYXu3L1Oo8A=="
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -10444,6 +10499,14 @@
         "object-visit": "^1.0.0"
       }
     },
+    "md5-hex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/md5-hex/-/md5-hex-3.0.1.tgz",
+      "integrity": "sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==",
+      "requires": {
+        "blueimp-md5": "^2.10.0"
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -13046,6 +13109,92 @@
         }
       }
     },
+    "rc-align": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-2.4.5.tgz",
+      "integrity": "sha512-nv9wYUYdfyfK+qskThf4BQUSIadeI/dCsfaMZfNEoxm9HwOIioQ+LyqmMK6jWHAZQgOzMLaqawhuBXlF63vgjw==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "dom-align": "^1.7.0",
+        "prop-types": "^15.5.8",
+        "rc-util": "^4.0.4"
+      }
+    },
+    "rc-animate": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.10.2.tgz",
+      "integrity": "sha512-cE/A7piAzoWFSgUD69NmmMraqCeqVBa51UErod8NS3LUEqWfppSVagHfa0qHAlwPVPiIBg3emRONyny3eiH0Dg==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.6",
+        "css-animation": "^1.3.2",
+        "prop-types": "15.x",
+        "raf": "^3.4.0",
+        "rc-util": "^4.15.3",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-slider": {
+      "version": "8.7.1",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-8.7.1.tgz",
+      "integrity": "sha512-WMT5mRFUEcrLWwTxsyS8jYmlaMsTVCZIGENLikHsNv+tE8ThU2lCoPfi/xFNUfJFNFSBFP3MwPez9ZsJmNp13g==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.4",
+        "rc-tooltip": "^3.7.0",
+        "rc-util": "^4.0.4",
+        "react-lifecycles-compat": "^3.0.4",
+        "shallowequal": "^1.1.0",
+        "warning": "^4.0.3"
+      }
+    },
+    "rc-switch": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/rc-switch/-/rc-switch-1.9.0.tgz",
+      "integrity": "sha512-Isas+egaK6qSk64jaEw4GgPStY4umYDbT7ZY93bZF1Af+b/JEsKsJdNOU2qG3WI0Z6tXo2DDq0kJCv8Yhu0zww==",
+      "requires": {
+        "classnames": "^2.2.1",
+        "prop-types": "^15.5.6",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-tooltip": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-3.7.3.tgz",
+      "integrity": "sha512-dE2ibukxxkrde7wH9W8ozHKUO4aQnPZ6qBHtrTH9LoO836PjDdiaWO73fgPB05VfJs9FbZdmGPVEbXCeOP99Ww==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "prop-types": "^15.5.8",
+        "rc-trigger": "^2.2.2"
+      }
+    },
+    "rc-trigger": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-2.6.5.tgz",
+      "integrity": "sha512-m6Cts9hLeZWsTvWnuMm7oElhf+03GOjOLfTuU0QmdB9ZrW7jR2IpI5rpNM7i9MvAAlMAmTx5Zr7g3uu/aMvZAw==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.6",
+        "prop-types": "15.x",
+        "rc-align": "^2.4.0",
+        "rc-animate": "2.x",
+        "rc-util": "^4.4.0",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-util": {
+      "version": "4.19.0",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.19.0.tgz",
+      "integrity": "sha512-mptALlLwpeczS3nrv83DbwJNeupolbuvlIEjcvimSiWI8NUBjpF0HgG3kWp1RymiuiRCNm9yhaXqDz0a99dpgQ==",
+      "requires": {
+        "add-dom-event-listener": "^1.1.0",
+        "babel-runtime": "6.x",
+        "prop-types": "^15.5.10",
+        "react-lifecycles-compat": "^3.0.4",
+        "shallowequal": "^1.1.0"
+      }
+    },
     "react": {
       "version": "16.12.0",
       "resolved": "https://registry.npmjs.org/react/-/react-16.12.0.tgz",
@@ -13231,6 +13380,23 @@
         "scheduler": "^0.18.0"
       }
     },
+    "react-drag-listview": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/react-drag-listview/-/react-drag-listview-0.1.6.tgz",
+      "integrity": "sha512-0nSWkR1bMLKgLZIYY2YVURYapppzy46FNSs9uAcCxceo2lnajngzLQ3tBgWaTjKTlWMXD0MAcDUWFDYdqMPYUg==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
+    "react-draggable": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-3.3.2.tgz",
+      "integrity": "sha512-oaz8a6enjbPtx5qb0oDWxtDNuybOylvto1QLydsXgKmwT7e3GXC2eMVDwEMIUYJIFqVG72XpOv673UuuAq6LhA==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-dropzone": {
       "version": "10.2.1",
       "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-10.2.1.tgz",
@@ -13263,11 +13429,40 @@
         "@babel/runtime": "^7.4.5"
       }
     },
+    "react-icon-base": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-icon-base/-/react-icon-base-2.1.0.tgz",
+      "integrity": "sha1-oZbjP98eeqof2jrvu2i9rZ6Cp50="
+    },
+    "react-icons": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-2.2.7.tgz",
+      "integrity": "sha512-0n4lcGqzJFcIQLoQytLdJCE0DKSA9dkwEZRYoGrIDJZFvIT6Hbajx5mv9geqhqFiNjUgtxg8kPyDfjlhymbGFg==",
+      "requires": {
+        "react-icon-base": "2.1.0"
+      }
+    },
     "react-is": {
       "version": "16.12.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
       "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
     },
+    "react-jinke-music-player": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/react-jinke-music-player/-/react-jinke-music-player-4.7.2.tgz",
+      "integrity": "sha512-r2P1gf7nsOBBXqVaKbN73POomWXAYiHuOq5q6AIiUPCVvKx19pCiOsVqwN0vB3kN5tK3Vypm1tO0GkFBVVK11Q==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "downloadjs": "^1.4.7",
+        "is-mobile": "^2.1.0",
+        "prop-types": "^15.7.2",
+        "rc-slider": "^8.7.1",
+        "rc-switch": "^1.9.0",
+        "react-drag-listview": "^0.1.6",
+        "react-draggable": "^3.3.2",
+        "react-icons": "^2.2.5"
+      }
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -14262,6 +14457,11 @@
         }
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

ui/package.json

@@ -6,12 +6,16 @@
     "@testing-library/jest-dom": "^5.0.2",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^8.0.4",
+    "deepmerge": "^4.2.2",
     "jwt-decode": "^2.2.0",
+    "md5-hex": "^3.0.1",
     "prop-types": "^15.7.2",
     "ra-data-json-server": "^3.1.2",
     "react": "^16.12.0",
     "react-admin": "^3.1.2",
     "react-dom": "^16.12.0",
+    "react-jinke-music-player": "^4.7.2",
+    "react-redux": "^7.1.0",
     "react-scripts": "3.3.0"
   },
   "scripts": {

ui/src/App.js

@@ -1,22 +1,31 @@
-// in src/App.js
-import React from 'react'
-import { Admin, Resource } from 'react-admin'
+import React, { useState } from 'react'
+import { Admin, resolveBrowserLocale, Resource } from 'react-admin'
 import dataProvider from './dataProvider'
 import authProvider from './authProvider'
-import { Login, Layout, DarkTheme } from './layout'
+import polyglotI18nProvider from 'ra-i18n-polyglot'
+import messages from './i18n'
+import { DarkTheme, Layout, Login } from './layout'
 import user from './user'
 import song from './song'
 import album from './album'
 import artist from './artist'
 import { createMuiTheme } from '@material-ui/core/styles'
+import { Player, playQueueReducer } from './player'
 
 const theme = createMuiTheme(DarkTheme)
 
+const i18nProvider = polyglotI18nProvider(
+  (locale) => (messages[locale] ? messages[locale] : messages.en),
+  resolveBrowserLocale()
+)
+
 const App = () => (
   <Admin
     theme={theme}
+    customReducers={{ queue: playQueueReducer }}
     dataProvider={dataProvider}
     authProvider={authProvider}
+    i18nProvider={i18nProvider}
     layout={Layout}
     loginPage={Login}
   >
@@ -24,8 +33,34 @@ const App = () => (
       <Resource name="artist" {...artist} options={{ subMenu: 'library' }} />,
       <Resource name="album" {...album} options={{ subMenu: 'library' }} />,
       <Resource name="song" {...song} options={{ subMenu: 'library' }} />,
-      permissions === 'admin' ? <Resource name="user" {...user} /> : null
+      permissions === 'admin' ? <Resource name="user" {...user} /> : null,
+      <Player />
     ]}
   </Admin>
 )
-export default App
+
+// TODO: This is a complicated way to force a first check for initial setup. A better way would be to send this info
+// set in the `window` object in the index.html
+const AppWrapper = () => {
+  const [checked, setChecked] = useState(false)
+
+  if (!checked) {
+    dataProvider
+      .getOne('keepalive', { id: new Date().getTime() })
+      .then(() => setChecked(true))
+      .catch((err) => {
+        authProvider
+          .checkError(err)
+          .then(() => {
+            setChecked(true)
+          })
+          .catch(() => {
+            setChecked(true)
+          })
+      })
+    return null
+  }
+  return <App />
+}
+
+export default AppWrapper

ui/src/album/AlbumDetails.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Loading, useGetOne } from 'react-admin'
+import { Card, CardContent, CardMedia, Typography } from '@material-ui/core'
+import { subsonicUrl } from '../subsonic'
+
+const AlbumDetails = ({ id, classes }) => {
+  const { data, loading, error } = useGetOne('album', id)
+
+  if (loading) {
+    return <Loading />
+  }
+
+  if (error) {
+    return <p>ERROR: {error}</p>
+  }
+
+  const genreYear = (data) => {
+    let genreDateLine = []
+    if (data.genre) {
+      genreDateLine.push(data.genre)
+    }
+    if (data.year) {
+      genreDateLine.push(data.year)
+    }
+    return genreDateLine.join(' - ')
+  }
+
+  return (
+    <Card className={classes.container}>
+      <CardMedia
+        image={subsonicUrl(
+          'getCoverArt',
+          data.coverArtId || 'not_found',
+          'size=500'
+        )}
+        className={classes.albumCover}
+      />
+      <CardContent className={classes.albumDetails}>
+        <Typography variant="h5" className={classes.albumTitle}>
+          {data.name}
+        </Typography>
+        <Typography component="h6">
+          {data.albumArtist || data.artist}
+        </Typography>
+        <Typography component="p">{genreYear(data)}</Typography>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default AlbumDetails

ui/src/album/AlbumList.js

@@ -6,13 +6,15 @@ import {
   Filter,
   List,
   NumberField,
+  FunctionField,
   SearchInput,
   TextInput,
   Show,
   SimpleShowLayout,
   TextField
 } from 'react-admin'
-import { DurationField, Title } from '../common'
+import { DurationField, Pagination, Title } from '../common'
+import { useMediaQuery } from '@material-ui/core'
 
 const AlbumFilter = (props) => (
   <Filter {...props}>
@@ -25,7 +27,7 @@ const AlbumDetails = (props) => {
   return (
     <Show {...props} title=" ">
       <SimpleShowLayout>
-        <TextField label="Album Artist" source="albumArtist" />
+        <TextField source="albumArtist" />
         <TextField source="genre" />
         <BooleanField source="compilation" />
         <DateField source="updatedAt" showTime />
@@ -34,32 +36,30 @@ const AlbumDetails = (props) => {
   )
 }
 
-const albumRowClick = (id, basePath, record) => {
-  const filter = { album: record.name, album_id: id }
-  if (!record.compilation) {
-    filter.artist = record.artist
-  }
-  return `/song?filter=${JSON.stringify(filter)}&order=ASC&sort=trackNumber`
+const AlbumList = (props) => {
+  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+  return (
+    <List
+      {...props}
+      title={<Title subTitle={'Albums'} />}
+      sort={{ field: 'name', order: 'ASC' }}
+      exporter={false}
+      bulkActionButtons={false}
+      filters={<AlbumFilter />}
+      perPage={15}
+      pagination={<Pagination />}
+    >
+      <Datagrid expand={<AlbumDetails />} rowClick={'show'}>
+        <TextField source="name" />
+        <FunctionField
+          source="artist"
+          render={(r) => (r.albumArtist ? r.albumArtist : r.artist)}
+        />
+        {isDesktop && <NumberField source="songCount" />}
+        <TextField source="year" />
+        {isDesktop && <DurationField source="duration" />}
+      </Datagrid>
+    </List>
+  )
 }
-
-const AlbumList = (props) => (
-  <List
-    {...props}
-    title={<Title subTitle={'Albums'} />}
-    sort={{ field: 'name', order: 'ASC' }}
-    exporter={false}
-    bulkActionButtons={false}
-    filters={<AlbumFilter />}
-    perPage={15}
-  >
-    <Datagrid expand={<AlbumDetails />} rowClick={albumRowClick}>
-      <TextField source="name" />
-      <TextField source="artist" />
-      <NumberField source="songCount" />
-      <TextField source="year" />
-      <DurationField label="Time" source="duration" />
-    </Datagrid>
-  </List>
-)
-
 export default AlbumList

ui/src/album/AlbumShow.js

@@ -0,0 +1,70 @@
+import React from 'react'
+import { Show } from 'react-admin'
+import { Title } from '../common'
+import { makeStyles } from '@material-ui/core/styles'
+import AlbumSongList from './AlbumSongList'
+import AlbumDetails from './AlbumDetails'
+
+const AlbumTitle = ({ record }) => {
+  return <Title subTitle={record ? record.name : ''} />
+}
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    [theme.breakpoints.down('xs')]: {
+      padding: '0.7em',
+      minWidth: '24em'
+    },
+    [theme.breakpoints.up('sm')]: {
+      padding: '1em',
+      minWidth: '32em'
+    }
+  },
+  albumCover: {
+    display: 'inline-block',
+    [theme.breakpoints.down('xs')]: {
+      height: '8em',
+      width: '8em'
+    },
+    [theme.breakpoints.up('sm')]: {
+      height: '15em',
+      width: '15em'
+    },
+    [theme.breakpoints.up('lg')]: {
+      height: '20em',
+      width: '20em'
+    }
+  },
+  albumDetails: {
+    display: 'inline-block',
+    verticalAlign: 'top',
+    [theme.breakpoints.down('xs')]: {
+      width: '14em'
+    },
+    [theme.breakpoints.up('sm')]: {
+      width: '26em'
+    },
+    [theme.breakpoints.up('lg')]: {
+      width: '38em'
+    }
+  },
+  albumTitle: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }
+}))
+
+const AlbumShow = (props) => {
+  const classes = useStyles()
+  return (
+    <>
+      <AlbumDetails classes={classes} {...props} />
+      <Show title={<AlbumTitle />} {...props}>
+        <AlbumSongList {...props} />
+      </Show>
+    </>
+  )
+}
+
+export default AlbumShow

ui/src/album/AlbumSongList.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import { useGetList } from 'react-admin'
+import { DurationField, PlayButton, SimpleList } from '../common'
+import { addTrack } from '../player'
+import AddIcon from '@material-ui/icons/Add'
+import { useDispatch } from 'react-redux'
+import { playAlbum } from '../player/queue'
+
+const AlbumSongList = (props) => {
+  const dispatch = useDispatch()
+  const { record } = props
+
+  const { data, total, loading, error } = useGetList(
+    'song',
+    { page: 0, perPage: 100 },
+    { field: 'album', order: 'ASC' },
+    { album_id: record.id }
+  )
+
+  if (error) {
+    return <p>ERROR: {error}</p>
+  }
+
+  const trackName = (r) => {
+    const name = r.title
+    if (r.trackNumber) {
+      return r.trackNumber + '. ' + name
+    }
+    return name
+  }
+
+  return (
+    <SimpleList
+      data={data}
+      ids={Object.keys(data)}
+      loading={loading}
+      total={total}
+      primaryText={(r) => (
+        <>
+          <PlayButton action={playAlbum(r.id, data)} />
+          <PlayButton action={addTrack(r)} icon={<AddIcon />} />
+          {trackName(r)}
+        </>
+      )}
+      secondaryText={(r) =>
+        r.albumArtist && r.artist !== r.albumArtist ? r.artist : ''
+      }
+      tertiaryText={(r) => <DurationField record={r} source={'duration'} />}
+      linkType={(id) => dispatch(playAlbum(id, data))}
+    />
+  )
+}
+
+export default AlbumSongList

ui/src/album/index.js

@@ -1,7 +1,9 @@
 import AlbumIcon from '@material-ui/icons/Album'
 import AlbumList from './AlbumList'
+import AlbumShow from './AlbumShow'
 
 export default {
   list: AlbumList,
+  show: AlbumShow,
   icon: AlbumIcon
 }

ui/src/artist/ArtistList.js

@@ -7,7 +7,7 @@ import {
   SearchInput,
   TextField
 } from 'react-admin'
-import { Title } from '../common'
+import { Pagination, Title } from '../common'
 
 const ArtistFilter = (props) => (
   <Filter {...props}>
@@ -29,6 +29,7 @@ const ArtistList = (props) => (
     bulkActionButtons={false}
     filters={<ArtistFilter />}
     perPage={15}
+    pagination={<Pagination />}
   >
     <Datagrid rowClick={artistRowClick}>
       <TextField source="name" />

ui/src/authProvider.js

@@ -1,4 +1,5 @@
 import jwtDecode from 'jwt-decode'
+import md5 from 'md5-hex'
 
 const authProvider = {
   login: ({ username, password }) => {
@@ -27,6 +28,12 @@ const authProvider = {
         localStorage.setItem('name', response.name)
         localStorage.setItem('username', response.username)
         localStorage.setItem('role', response.isAdmin ? 'admin' : 'regular')
+        const salt = new Date().getTime().toString()
+        localStorage.setItem('subsonic-salt', salt)
+        localStorage.setItem(
+          'subsonic-token',
+          generateSubsonicToken(password, salt)
+        )
         return response
       })
       .catch((error) => {
@@ -73,6 +80,12 @@ const removeItems = () => {
   localStorage.removeItem('username')
   localStorage.removeItem('role')
   localStorage.removeItem('version')
+  localStorage.removeItem('subsonic-salt')
+  localStorage.removeItem('subsonic-token')
+}
+
+const generateSubsonicToken = (password, salt) => {
+  return md5(password + salt)
 }
 
 export default authProvider

ui/src/common/Pagination.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Pagination as RAPagination } from 'react-admin'
+
+const Pagination = (props) => (
+  <RAPagination rowsPerPageOptions={[15, 25, 50]} {...props} />
+)
+
+export default Pagination

ui/src/common/PlayButton.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import PlayArrowIcon from '@material-ui/icons/PlayArrow'
+import { IconButton } from '@material-ui/core'
+import { useDispatch } from 'react-redux'
+
+const defaultIcon = <PlayArrowIcon fontSize="small" />
+
+const PlayButton = ({ icon = defaultIcon, action, ...rest }) => {
+  const dispatch = useDispatch()
+
+  return (
+    <IconButton
+      onClick={(e) => {
+        e.stopPropagation()
+        dispatch(action)
+      }}
+      {...rest}
+      size={'small'}
+    >
+      {icon}
+    </IconButton>
+  )
+}
+
+PlayButton.propTypes = {
+  icon: PropTypes.element,
+  action: PropTypes.object
+}
+export default PlayButton

ui/src/common/SimpleList.js

@@ -0,0 +1,149 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Avatar from '@material-ui/core/Avatar'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemAvatar from '@material-ui/core/ListItemAvatar'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItemText from '@material-ui/core/ListItemText'
+import { makeStyles } from '@material-ui/core/styles'
+import { Link } from 'react-router-dom'
+import { linkToRecord, sanitizeListRestProps } from 'ra-core'
+
+const useStyles = makeStyles(
+  {
+    link: {
+      textDecoration: 'none',
+      color: 'inherit'
+    },
+    tertiary: { float: 'right', opacity: 0.541176 }
+  },
+  { name: 'RaSimpleList' }
+)
+
+const LinkOrNot = ({
+  classes: classesOverride,
+  linkType,
+  basePath,
+  id,
+  record,
+  children
+}) => {
+  const classes = useStyles({ classes: classesOverride })
+  return linkType === 'edit' || linkType === true ? (
+    <Link to={linkToRecord(basePath, id)} className={classes.link}>
+      {children}
+    </Link>
+  ) : linkType === 'show' ? (
+    <Link to={`${linkToRecord(basePath, id)}/show`} className={classes.link}>
+      {children}
+    </Link>
+  ) : typeof linkType === 'function' ? (
+    <span onClick={() => linkType(id, basePath, record)}>{children}</span>
+  ) : (
+    <span>{children}</span>
+  )
+}
+
+const SimpleList = ({
+  basePath,
+  className,
+  classes: classesOverride,
+  data,
+  hasBulkActions,
+  ids,
+  loading,
+  leftAvatar,
+  leftIcon,
+  linkType,
+  onToggleItem,
+  primaryText,
+  rightAvatar,
+  rightIcon,
+  secondaryText,
+  selectedIds,
+  tertiaryText,
+  total,
+  ...rest
+}) => {
+  const classes = useStyles({ classes: classesOverride })
+  return (
+    (loading || total > 0) && (
+      <List className={className} {...sanitizeListRestProps(rest)}>
+        {ids.map((id) => (
+          <LinkOrNot
+            linkType={linkType}
+            basePath={basePath}
+            id={id}
+            key={id}
+            record={data[id]}
+          >
+            <ListItem button={!!linkType}>
+              {leftIcon && (
+                <ListItemIcon>{leftIcon(data[id], id)}</ListItemIcon>
+              )}
+              {leftAvatar && (
+                <ListItemAvatar>
+                  <Avatar>{leftAvatar(data[id], id)}</Avatar>
+                </ListItemAvatar>
+              )}
+              <ListItemText
+                primary={
+                  <div>
+                    {primaryText(data[id], id)}
+                    {tertiaryText && (
+                      <span className={classes.tertiary}>
+                        {tertiaryText(data[id], id)}
+                      </span>
+                    )}
+                  </div>
+                }
+                secondary={secondaryText && secondaryText(data[id], id)}
+              />
+              {(rightAvatar || rightIcon) && (
+                <ListItemSecondaryAction>
+                  {rightAvatar && <Avatar>{rightAvatar(data[id], id)}</Avatar>}
+                  {rightIcon && (
+                    <ListItemIcon>{rightIcon(data[id], id)}</ListItemIcon>
+                  )}
+                </ListItemSecondaryAction>
+              )}
+            </ListItem>
+          </LinkOrNot>
+        ))}
+      </List>
+    )
+  )
+}
+
+SimpleList.propTypes = {
+  basePath: PropTypes.string,
+  className: PropTypes.string,
+  classes: PropTypes.object,
+  data: PropTypes.object,
+  hasBulkActions: PropTypes.bool.isRequired,
+  ids: PropTypes.array,
+  leftAvatar: PropTypes.func,
+  leftIcon: PropTypes.func,
+  linkType: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool,
+    PropTypes.func
+  ]).isRequired,
+  onToggleItem: PropTypes.func,
+  primaryText: PropTypes.func,
+  rightAvatar: PropTypes.func,
+  rightIcon: PropTypes.func,
+  secondaryText: PropTypes.func,
+  selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
+  tertiaryText: PropTypes.func
+}
+
+SimpleList.defaultProps = {
+  linkType: 'edit',
+  hasBulkActions: false,
+  selectedIds: []
+}
+
+export default SimpleList

ui/src/common/Title.js

@@ -1,7 +1,13 @@
 import React from 'react'
+import { useMediaQuery } from '@material-ui/core'
 
 const Title = ({ subTitle }) => {
-  return <span>Navidrome {subTitle ? ` - ${subTitle}` : ''}</span>
+  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+
+  if (isDesktop) {
+    return <span>Navidrome {subTitle ? ` - ${subTitle}` : ''}</span>
+  }
+  return <span>{subTitle ? subTitle : 'Navidrome'}</span>
 }
 
 export default Title

ui/src/common/index.js

@@ -1,5 +1,15 @@
 import Title from './Title'
 import DurationField from './DurationField'
 import BitrateField from './BitrateField'
+import Pagination from './Pagination'
+import PlayButton from './PlayButton'
+import SimpleList from './SimpleList'
 
-export { Title, DurationField, BitrateField }
+export {
+  Title,
+  DurationField,
+  BitrateField,
+  Pagination,
+  PlayButton,
+  SimpleList
+}

ui/src/i18n/en.js

@@ -0,0 +1,47 @@
+import deepmerge from 'deepmerge'
+import englishMessages from 'ra-language-english'
+
+export default deepmerge(englishMessages, {
+  resources: {
+    song: {
+      fields: {
+        albumArtist: 'Album Artist',
+        duration: 'Time',
+        trackNumber: 'Track #'
+      },
+      bulk: {
+        addToQueue: 'Play Later'
+      }
+    },
+    album: {
+      fields: {
+        albumArtist: 'Album Artist',
+        duration: 'Time'
+      }
+    }
+  },
+  ra: {
+    auth: {
+      welcome1: 'Thanks for installing Navidrome!',
+      welcome2: 'To start, create an admin user',
+      confirmPassword: 'Confirm Password',
+      buttonCreateAdmin: 'Create Admin'
+    },
+    validation: {
+      invalidChars: 'Please only use letter and numbers',
+      passwordDoesNotMatch: 'Password does not match'
+    }
+  },
+  menu: {
+    library: 'Library'
+  },
+  player: {
+    panelTitle: 'Play Queue',
+    playModeText: {
+      order: 'In order',
+      orderLoop: 'Repeat',
+      singleLoop: 'Repeat One',
+      shufflePlay: 'Shuffle'
+    }
+  }
+})

ui/src/i18n/index.js

@@ -0,0 +1,3 @@
+import en from './en'
+
+export default { en }

ui/src/layout/Login.js

@@ -149,10 +149,10 @@ const FormSignUp = ({ loading, handleSubmit, validate }) => {
                 </Avatar>
               </div>
               <div className={classes.systemName}>
-                Thanks for installing Navidrome!
+                {translate('ra.auth.welcome1')}
               </div>
               <div className={classes.systemName}>
-                To start, create an admin user
+                {translate('ra.auth.welcome2')}
               </div>
               <div className={classes.form}>
                 <div className={classes.input}>
@@ -160,7 +160,7 @@ const FormSignUp = ({ loading, handleSubmit, validate }) => {
                     autoFocus
                     name="username"
                     component={renderInput}
-                    label={'Admin Username'}
+                    label={translate('ra.auth.username')}
                     disabled={loading}
                   />
                 </div>
@@ -177,7 +177,7 @@ const FormSignUp = ({ loading, handleSubmit, validate }) => {
                   <Field
                     name="confirmPassword"
                     component={renderInput}
-                    label={'Confirm Password'}
+                    label={translate('ra.auth.confirmPassword')}
                     type="password"
                     disabled={loading}
                   />
@@ -193,7 +193,7 @@ const FormSignUp = ({ loading, handleSubmit, validate }) => {
                   fullWidth
                 >
                   {loading && <CircularProgress size={25} thickness={2} />}
-                  {translate('Create Admin')}
+                  {translate('ra.auth.buttonCreateAdmin')}
                 </Button>
               </CardActions>
             </Card>
@@ -242,13 +242,13 @@ const Login = ({ location }) => {
     const errors = validateLogin(values)
     const regex = /^\w+$/g
     if (values.username && !values.username.match(regex)) {
-      errors.username = translate('Please only use letter and numbers')
+      errors.username = translate('ra.validation.invalidChars')
     }
     if (!values.confirmPassword) {
       errors.confirmPassword = translate('ra.validation.required')
     }
     if (values.confirmPassword !== values.password) {
-      errors.confirmPassword = 'Password does not match'
+      errors.confirmPassword = translate('ra.validation.passwordDoesNotMatch')
     }
     return errors
   }

ui/src/layout/Menu.js

@@ -1,4 +1,3 @@
-// in src/Menu.js
 import React, { useState, createElement } from 'react'
 import { useSelector } from 'react-redux'
 import { useMediaQuery } from '@material-ui/core'
@@ -58,7 +57,7 @@ const Menu = ({ onMenuClick, dense, logout }) => {
         handleToggle={() => handleToggle('menuLibrary')}
         isOpen={state.menuLibrary}
         sidebarIsOpen={open}
-        name="Library"
+        name="menu.library"
         icon={<LibraryMusicIcon />}
         dense={dense}
       >

ui/src/player/Player.js

@@ -0,0 +1,91 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  fetchUtils,
+  useAuthState,
+  useDataProvider,
+  useTranslate
+} from 'react-admin'
+import ReactJkMusicPlayer from 'react-jinke-music-player'
+import 'react-jinke-music-player/assets/index.css'
+import { scrobble, syncQueue } from './queue'
+
+const Player = () => {
+  const translate = useTranslate()
+
+  const defaultOptions = {
+    bounds: 'body',
+    mode: 'full',
+    autoPlay: true,
+    preload: true,
+    autoPlayInitLoadPlayList: true,
+    clearPriorAudioLists: false,
+    showDownload: false,
+    showReload: false,
+    glassBg: false,
+    showThemeSwitch: false,
+    playModeText: {
+      order: translate('player.playModeText.order'),
+      orderLoop: translate('player.playModeText.orderLoop'),
+      singleLoop: translate('player.playModeText.singleLoop'),
+      shufflePlay: translate('player.playModeText.shufflePlay')
+    },
+    panelTitle: translate('player.panelTitle'),
+    defaultPosition: {
+      top: 300,
+      left: 120
+    }
+  }
+
+  const addQueueToOptions = (queue) => {
+    return {
+      ...defaultOptions,
+      autoPlay: true,
+      clearPriorAudioLists: queue.clear,
+      audioLists: queue.queue.map((item) => item)
+    }
+  }
+
+  const dataProvider = useDataProvider()
+  const dispatch = useDispatch()
+  const queue = useSelector((state) => state.queue)
+  const options = addQueueToOptions(queue)
+  const { authenticated } = useAuthState()
+
+  const OnAudioListsChange = (currentPlayIndex, audioLists) => {
+    dispatch(syncQueue(audioLists))
+  }
+
+  const OnAudioProgress = (info) => {
+    const progress = (info.currentTime / info.duration) * 100
+    if (isNaN(info.duration) || progress < 90) {
+      return
+    }
+    const item = queue.queue.find((item) => item.id === info.id)
+    if (item && !item.scrobbled) {
+      dispatch(scrobble(info.id))
+      fetchUtils.fetchJson(info.scrobble(true))
+    }
+  }
+
+  const OnAudioPlay = (info) => {
+    if (info.duration) {
+      fetchUtils.fetchJson(info.scrobble(false))
+      dataProvider.getOne('keepalive', { id: info.id })
+    }
+  }
+
+  if (authenticated && options.audioLists.length > 0) {
+    return (
+      <ReactJkMusicPlayer
+        {...options}
+        onAudioListsChange={OnAudioListsChange}
+        onAudioProgress={OnAudioProgress}
+        onAudioPlay={OnAudioPlay}
+      />
+    )
+  }
+  return <div />
+}
+
+export default Player

ui/src/player/index.js

@@ -0,0 +1,4 @@
+import Player from './Player'
+import { addTrack, setTrack, playQueueReducer } from './queue'
+
+export { Player, addTrack, setTrack, playQueueReducer }

ui/src/player/queue.js

@@ -0,0 +1,84 @@
+import 'react-jinke-music-player/assets/index.css'
+import { subsonicUrl } from '../subsonic'
+
+const PLAYER_ADD_TRACK = 'PLAYER_ADD_TRACK'
+const PLAYER_SET_TRACK = 'PLAYER_SET_TRACK'
+const PLAYER_SYNC_QUEUE = 'PLAYER_SYNC_QUEUE'
+const PLAYER_SCROBBLE = 'PLAYER_SCROBBLE'
+const PLAYER_PLAY_ALBUM = 'PLAYER_PLAY_ALBUM'
+
+const mapToAudioLists = (item) => ({
+  name: item.title,
+  singer: item.artist,
+  cover: subsonicUrl('getCoverArt', item.id, 'size=300'),
+  musicSrc: subsonicUrl('stream', item.id),
+  scrobble: (submit) => subsonicUrl('scrobble', item.id, `submission=${submit}`)
+})
+
+const addTrack = (data) => ({
+  type: PLAYER_ADD_TRACK,
+  data
+})
+
+const setTrack = (data) => ({
+  type: PLAYER_SET_TRACK,
+  data
+})
+
+const playAlbum = (id, data) => ({
+  type: PLAYER_PLAY_ALBUM,
+  data,
+  id
+})
+
+const syncQueue = (data) => ({
+  type: PLAYER_SYNC_QUEUE,
+  data
+})
+
+const scrobble = (id) => ({
+  type: PLAYER_SCROBBLE,
+  data: id
+})
+
+const playQueueReducer = (
+  previousState = { queue: [], clear: true },
+  payload
+) => {
+  let queue
+  const { type, data } = payload
+  switch (type) {
+    case PLAYER_ADD_TRACK:
+      queue = previousState.queue
+      queue.push(mapToAudioLists(data))
+      return { queue, clear: false }
+    case PLAYER_SET_TRACK:
+      return { queue: [mapToAudioLists(data)], clear: true }
+    case PLAYER_SYNC_QUEUE:
+      return { queue: data, clear: false }
+    case PLAYER_SCROBBLE:
+      const newQueue = previousState.queue.map((item) => {
+        return {
+          ...item,
+          scrobbled: item.scrobbled || item.id === data
+        }
+      })
+      return { queue: newQueue, clear: false }
+    case PLAYER_PLAY_ALBUM:
+      queue = []
+      let match = false
+      Object.keys(data).forEach((id) => {
+        if (id === payload.id) {
+          match = true
+        }
+        if (match) {
+          queue.push(mapToAudioLists(data[id]))
+        }
+      })
+      return { queue, clear: true }
+    default:
+      return previousState
+  }
+}
+
+export { addTrack, setTrack, playAlbum, syncQueue, scrobble, playQueueReducer }

ui/src/song/AddToQueueButton.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import {
+  Button,
+  useDataProvider,
+  useUnselectAll,
+  useTranslate
+} from 'react-admin'
+import { useDispatch } from 'react-redux'
+import { addTrack } from '../player'
+import AddToQueueIcon from '@material-ui/icons/AddToQueue'
+
+import Tooltip from '@material-ui/core/Tooltip'
+
+const AddToQueueButton = ({ selectedIds }) => {
+  const dispatch = useDispatch()
+  const translate = useTranslate()
+  const dataProvider = useDataProvider()
+  const unselectAll = useUnselectAll()
+  const addToQueue = () => {
+    selectedIds.forEach((id) => {
+      dataProvider.getOne('song', { id }).then((response) => {
+        dispatch(addTrack(response.data))
+      })
+    })
+    unselectAll('song')
+  }
+
+  return (
+    <Button color="secondary" onClick={addToQueue}>
+      <Tooltip
+        title={translate('resources.song.bulk.addToQueue')}
+        placement="right"
+      >
+        <AddToQueueIcon />
+      </Tooltip>
+    </Button>
+  )
+}
+
+export default AddToQueueButton

ui/src/song/SongList.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import {
   BooleanField,
   Datagrid,
@@ -7,12 +7,18 @@ import {
   List,
   NumberField,
   SearchInput,
-  TextInput,
   Show,
   SimpleShowLayout,
-  TextField
+  TextField,
+  TextInput
 } from 'react-admin'
-import { BitrateField, DurationField, Title } from '../common'
+import { useMediaQuery } from '@material-ui/core'
+import { BitrateField, DurationField, Pagination, Title } from '../common'
+import AddToQueueButton from './AddToQueueButton'
+import { PlayButton, SimpleList } from '../common'
+import { useDispatch } from 'react-redux'
+import { setTrack, addTrack } from '../player'
+import AddIcon from '@material-ui/icons/Add'
 
 const SongFilter = (props) => (
   <Filter {...props}>
@@ -22,12 +28,18 @@ const SongFilter = (props) => (
   </Filter>
 )
 
+const SongBulkActionButtons = (props) => (
+  <Fragment>
+    <AddToQueueButton {...props} />
+  </Fragment>
+)
+
 const SongDetails = (props) => {
   return (
     <Show {...props} title=" ">
       <SimpleShowLayout>
         <TextField source="path" />
-        <TextField label="Album Artist" source="albumArtist" />
+        <TextField source="albumArtist" />
         <TextField source="genre" />
         <BooleanField source="compilation" />
         <BitrateField source="bitRate" />
@@ -37,26 +49,49 @@ const SongDetails = (props) => {
   )
 }
 
-const SongList = (props) => (
-  <List
-    {...props}
-    title={<Title subTitle={'Songs'} />}
-    sort={{ field: 'title', order: 'ASC' }}
-    exporter={false}
-    bulkActionButtons={false}
-    filters={<SongFilter />}
-    perPage={15}
-  >
-    <Datagrid expand={<SongDetails />}>
-      <TextField source="title" />
-      <TextField source="album" />
-      <TextField source="artist" />
-      <NumberField label="Track #" source="trackNumber" />
-      <NumberField label="Disc #" source="discNumber" />
-      <TextField source="year" />
-      <DurationField label="Time" source="duration" />
-    </Datagrid>
-  </List>
-)
+const SongList = (props) => {
+  const dispatch = useDispatch()
+  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
+  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+  return (
+    <List
+      {...props}
+      title={<Title subTitle={'Songs'} />}
+      sort={{ field: 'title', order: 'ASC' }}
+      exporter={false}
+      bulkActionButtons={<SongBulkActionButtons />}
+      filters={<SongFilter />}
+      perPage={isXsmall ? 50 : 15}
+      pagination={<Pagination />}
+    >
+      {isXsmall ? (
+        <SimpleList
+          primaryText={(r) => (
+            <>
+              <PlayButton action={setTrack(r)} />
+              <PlayButton action={addTrack(r)} icon={<AddIcon />} />
+              {r.title}
+            </>
+          )}
+          secondaryText={(r) => r.artist}
+          tertiaryText={(r) => <DurationField record={r} source={'duration'} />}
+          linkType={(id, basePath, record) => dispatch(setTrack(record))}
+        />
+      ) : (
+        <Datagrid
+          expand={<SongDetails />}
+          rowClick={(id, basePath, record) => dispatch(setTrack(record))}
+        >
+          <TextField source="title" />
+          {isDesktop && <TextField source="album" />}
+          <TextField source="artist" />
+          {isDesktop && <NumberField source="trackNumber" />}
+          {isDesktop && <TextField source="year" />}
+          <DurationField source="duration" />
+        </Datagrid>
+      )}
+    </List>
+  )
+}
 
 export default SongList

ui/src/subsonic/index.js

@@ -0,0 +1,13 @@
+const subsonicUrl = (command, id, options) => {
+  const username = localStorage.getItem('username')
+  const token = localStorage.getItem('subsonic-token')
+  const salt = localStorage.getItem('subsonic-salt')
+  const timeStamp = new Date().getTime()
+  const url = `rest/${command}?u=${username}&f=json&v=1.8.0&c=NavidromeUI&t=${token}&s=${salt}&id=${id}&_=${timeStamp}`
+  if (options) {
+    return url + '&' + options
+  }
+  return url
+}
+
+export { subsonicUrl }

utils/request_helpers.go

@@ -0,0 +1,72 @@
+package utils
+
+import (
+	"net/http"
+	"strconv"
+	"strings"
+	"time"
+)
+
+func ParamString(r *http.Request, param string) string {
+	return r.URL.Query().Get(param)
+}
+
+func ParamStrings(r *http.Request, param string) []string {
+	return r.URL.Query()[param]
+}
+
+func ParamTimes(r *http.Request, param string) []time.Time {
+	pStr := ParamStrings(r, param)
+	times := make([]time.Time, len(pStr))
+	for i, t := range pStr {
+		ti, err := strconv.ParseInt(t, 10, 64)
+		if err == nil {
+			times[i] = ToTime(ti)
+		}
+	}
+	return times
+}
+
+func ParamTime(r *http.Request, param string, def time.Time) time.Time {
+	v := ParamString(r, param)
+	if v == "" {
+		return def
+	}
+	value, err := strconv.ParseInt(v, 10, 64)
+	if err != nil {
+		return def
+	}
+	return ToTime(value)
+}
+
+func ParamInt(r *http.Request, param string, def int) int {
+	v := ParamString(r, param)
+	if v == "" {
+		return def
+	}
+	value, err := strconv.ParseInt(v, 10, 32)
+	if err != nil {
+		return def
+	}
+	return int(value)
+}
+
+func ParamInts(r *http.Request, param string) []int {
+	pStr := ParamStrings(r, param)
+	ints := make([]int, 0, len(pStr))
+	for _, s := range pStr {
+		i, err := strconv.ParseInt(s, 10, 32)
+		if err == nil {
+			ints = append(ints, int(i))
+		}
+	}
+	return ints
+}
+
+func ParamBool(r *http.Request, param string, def bool) bool {
+	p := ParamString(r, param)
+	if p == "" {
+		return def
+	}
+	return strings.Index("/true/on/1/", "/"+p+"/") != -1
+}