Merge pull request #392 from dweymouth/feat/tracklist-thumbnails

Add tracklist row thumbnails to everything but album page

backend/config.go

@@ -176,11 +176,11 @@ func DefaultConfig(appVersionTag string) *Config {
 			SortOrder: string("Name (A-Z)"),
 		},
 		FavoritesPage: FavoritesPageConfig{
-			TracklistColumns: []string{"Artist", "Album", "Time", "Plays"},
+			TracklistColumns: []string{"Album", "Time", "Plays"},
 			InitialView:      "Albums",
 		},
 		PlaylistPage: PlaylistPageConfig{
-			TracklistColumns: []string{"Artist", "Album", "Time", "Plays"},
+			TracklistColumns: []string{"Album", "Time", "Plays"},
 		},
 		PlaylistsPage: PlaylistsPageConfig{
 			InitialView: "List",
@@ -189,7 +189,7 @@ func DefaultConfig(appVersionTag string) *Config {
 			InitialView: "Play Queue",
 		},
 		TracksPage: TracksPageConfig{
-			TracklistColumns: []string{"Artist", "Album", "Time", "Plays"},
+			TracklistColumns: []string{"Album", "Time", "Plays"},
 		},
 		LocalPlayback: LocalPlaybackConfig{
 			// "auto" is the name to pass to MPV for autoselecting the output device

ui/browsing/albumpage.go

@@ -86,11 +86,11 @@ func newAlbumPage(
 		a.header = NewAlbumPageHeader(a)
 	}
 	a.header.page = a
-	if t := a.pool.Obtain(util.WidgetTypeTracklist); t != nil {
+	if t := a.pool.Obtain(util.WidgetTypeCompactTracklist); t != nil {
 		a.tracklist = t.(*widgets.Tracklist)
 		a.tracklist.Reset()
 	} else {
-		a.tracklist = widgets.NewTracklist(nil)
+		a.tracklist = widgets.NewTracklist(nil, a.im, true)
 	}
 	a.tracklist.SetVisibleColumns(a.cfg.TracklistColumns)
 	a.tracklist.SetSorting(sort)
@@ -122,7 +122,7 @@ func (a *AlbumPage) Save() SavedPage {
 	a.header.page = nil
 	a.pool.Release(util.WidgetTypeAlbumPageHeader, a.header)
 	a.tracklist.Clear()
-	a.pool.Release(util.WidgetTypeTracklist, a.tracklist)
+	a.pool.Release(util.WidgetTypeCompactTracklist, a.tracklist)
 	return &s
 }
 

ui/browsing/artistpage.go

@@ -233,7 +233,7 @@ func (a *ArtistPage) showTopTracks() {
 			tl.Reset()
 			tl.SetTracks(ts)
 		} else {
-			tl = widgets.NewTracklist(ts)
+			tl = widgets.NewTracklist(ts, a.im, false)
 		}
 		tl.Options = widgets.TracklistOptions{AutoNumber: true}
 		_, canRate := a.mp.(mediaprovider.SupportsRating)

ui/browsing/favoritespage.go

@@ -397,7 +397,7 @@ func (a *FavoritesPage) onShowFavoriteSongs() {
 				tracklist.Reset()
 				tracklist.SetTracks(fav.Tracks)
 			} else {
-				tracklist = widgets.NewTracklist(fav.Tracks)
+				tracklist = widgets.NewTracklist(fav.Tracks, a.im, false)
 			}
 			tracklist.Options = widgets.TracklistOptions{AutoNumber: true}
 			_, canRate := a.mp.(mediaprovider.SupportsRating)

ui/browsing/playlistpage.go

@@ -79,7 +79,7 @@ func newPlaylistPage(
 		a.tracklist = tl.(*widgets.Tracklist)
 		a.tracklist.Reset()
 	} else {
-		a.tracklist = widgets.NewTracklist(nil)
+		a.tracklist = widgets.NewTracklist(nil, a.im, false)
 	}
 	a.tracklist.SetVisibleColumns(conf.TracklistColumns)
 	a.tracklist.SetSorting(trackSort)

ui/browsing/router.go

@@ -54,7 +54,7 @@ func (r Router) CreatePage(rte controller.Route) Page {
 	case controller.Playlists:
 		return NewPlaylistsPage(r.Controller, r.widgetPool, &r.App.Config.PlaylistsPage, r.App.ServerManager.Server)
 	case controller.Tracks:
-		return NewTracksPage(r.Controller, &r.App.Config.TracksPage, r.widgetPool, r.App.ServerManager.Server)
+		return NewTracksPage(r.Controller, &r.App.Config.TracksPage, r.widgetPool, r.App.ServerManager.Server, r.App.ImageManager)
 	}
 	return nil
 }

ui/browsing/trackspage.go

@@ -38,12 +38,13 @@ type tracksPageState struct {
 	contr      *controller.Controller
 	conf       *backend.TracksPageConfig
 	mp         mediaprovider.MediaProvider
+	im         *backend.ImageManager
 	canRate    bool
 	canShare   bool
 }
 
-func NewTracksPage(contr *controller.Controller, conf *backend.TracksPageConfig, pool *util.WidgetPool, mp mediaprovider.MediaProvider) *TracksPage {
+func NewTracksPage(contr *controller.Controller, conf *backend.TracksPageConfig, pool *util.WidgetPool, mp mediaprovider.MediaProvider, im *backend.ImageManager) *TracksPage {
-	t := &TracksPage{tracksPageState: tracksPageState{contr: contr, conf: conf, widgetPool: pool, mp: mp}}
+	t := &TracksPage{tracksPageState: tracksPageState{contr: contr, conf: conf, widgetPool: pool, mp: mp, im: im}}
 	t.ExtendBaseWidget(t)
 
 	t.tracklist = t.obtainTracklist()
@@ -175,7 +176,7 @@ func (t *TracksPage) Save() SavedPage {
 }
 
 func (s *tracksPageState) Restore() Page {
-	t := NewTracksPage(s.contr, s.conf, s.widgetPool, s.mp)
+	t := NewTracksPage(s.contr, s.conf, s.widgetPool, s.mp, s.im)
 	t.searchText = s.searchText
 	if t.searchText != "" {
 		t.searcher.Entry.Text = t.searchText
@@ -194,5 +195,5 @@ func (t *TracksPage) obtainTracklist() *widgets.Tracklist {
 		tracklist.Reset()
 		return tracklist
 	}
-	return widgets.NewTracklist(nil)
+	return widgets.NewTracklist(nil, t.im, false)
 }

ui/util/widgetpool.go

@@ -15,6 +15,7 @@ const (
 	WidgetTypeGridView
 	WidgetTypePlaylistPageHeader
 	WidgetTypeTracklist
+	WidgetTypeCompactTracklist
 	WidgetTypeNowPlayingPage
 
 	// keep at bottom

ui/widgets/focuslist.go

@@ -24,6 +24,11 @@ type FocusList struct {
 type FocusListRow interface {
 	fyne.Focusable
 	ItemID() widget.ListItemID
+	SetItemID(widget.ListItemID)
+
+	SetOnTapped(func())
+	SetOnDoubleTapped(func())
+	SetOnFocusNeighbor(func(up bool))
 }
 
 func NewFocusList(len func() int, create func() fyne.CanvasObject, update func(widget.GridWrapItemID, fyne.CanvasObject)) *FocusList {
@@ -101,10 +106,26 @@ type FocusListRowBase struct {
 	selectionRect *canvas.Rectangle
 }
 
+func (l *FocusListRowBase) SetOnTapped(f func()) {
+	l.OnTapped = f
+}
+
+func (l *FocusListRowBase) SetOnDoubleTapped(f func()) {
+	l.OnDoubleTapped = f
+}
+
+func (l *FocusListRowBase) SetOnFocusNeighbor(f func(up bool)) {
+	l.OnFocusNeighbor = f
+}
+
 func (l *FocusListRowBase) ItemID() widget.ListItemID {
 	return l.ListItemID
 }
 
+func (l *FocusListRowBase) SetItemID(id widget.ListItemID) {
+	l.ListItemID = id
+}
+
 func (l *FocusListRowBase) EnsureUnfocused() {
 	if l.Focused {
 		fyne.CurrentApp().Driver().CanvasForObject(l).Unfocus()

ui/widgets/playqueuelist.go

@@ -21,7 +21,7 @@ import (
 	"github.com/dweymouth/supersonic/ui/util"
 )
 
-const thumbnailSize = 52
+const playQueueListThumbnailSize = 52
 
 type PlayQueueList struct {
 	widget.BaseWidget
@@ -298,7 +298,7 @@ func NewPlayQueueListRow(playQueueList *PlayQueueList, im *backend.ImageManager,
 		playingIcon:   playingIcon,
 		playQueueList: playQueueList,
 		num:           widget.NewLabel(""),
-		cover:         NewImagePlaceholder(myTheme.TracksIcon, thumbnailSize),
+		cover:         NewImagePlaceholder(myTheme.TracksIcon, playQueueListThumbnailSize),
 		title:         util.NewTruncatingLabel(),
 		artist:        NewMultiHyperlink(),
 		time:          util.NewTrailingAlignLabel(),

ui/widgets/tracklist.go

@@ -1,14 +1,13 @@
 package widgets
 
 import (
-	"fmt"
 	"log"
 	"slices"
 	"sort"
-	"strconv"
 	"strings"
 	"sync"
 
+	"github.com/dweymouth/supersonic/backend"
 	"github.com/dweymouth/supersonic/backend/mediaprovider"
 	"github.com/dweymouth/supersonic/sharedutil"
 	"github.com/dweymouth/supersonic/ui/layouts"
@@ -17,35 +16,13 @@ import (
 	"github.com/dweymouth/supersonic/ui/util"
 
 	"fyne.io/fyne/v2"
+	"fyne.io/fyne/v2/canvas"
 	"fyne.io/fyne/v2/container"
 	"fyne.io/fyne/v2/driver/desktop"
 	"fyne.io/fyne/v2/theme"
 	"fyne.io/fyne/v2/widget"
 )
 
-const (
-	ColumnNum      = "Num"
-	ColumnTitle    = "Title"
-	ColumnArtist   = "Artist"
-	ColumnAlbum    = "Album"
-	ColumnTime     = "Time"
-	ColumnYear     = "Year"
-	ColumnFavorite = "Favorite"
-	ColumnRating   = "Rating"
-	ColumnPlays    = "Plays"
-	ColumnComment  = "Comment"
-	ColumnBitrate  = "Bitrate"
-	ColumnSize     = "Size"
-	ColumnPath     = "Path"
-
-	numColumns = 13
-)
-
-var columns = []string{
-	ColumnNum, ColumnTitle, ColumnArtist, ColumnAlbum, ColumnTime, ColumnYear, ColumnFavorite,
-	ColumnRating, ColumnPlays, ColumnComment, ColumnBitrate, ColumnSize, ColumnPath,
-}
-
 type TracklistSort struct {
 	SortOrder  SortType
 	ColumnName string
@@ -81,6 +58,9 @@ type TracklistOptions struct {
 type Tracklist struct {
 	widget.BaseWidget
 
+	compactRows bool
+	columns     []TracklistColumn
+
 	Options TracklistOptions
 
 	// user action callbacks
@@ -120,17 +100,34 @@ type Tracklist struct {
 	container         *fyne.Container
 }
 
-func NewTracklist(tracks []*mediaprovider.Track) *Tracklist {
+func NewTracklist(tracks []*mediaprovider.Track, im *backend.ImageManager, useCompactRows bool) *Tracklist {
-	t := &Tracklist{visibleColumns: make([]bool, numColumns)}
+	playIcon := theme.NewThemedResource(theme.MediaPlayIcon())
+	playIcon.ColorName = theme.ColorNamePrimary
+
+	t := &Tracklist{compactRows: useCompactRows}
 	t.ExtendBaseWidget(t)
+	t.columns = ExpandedTracklistRowColumns
+	colWidths := ExpandedTracklistRowColumnWidths
+	var playingIcon fyne.CanvasObject
+	if useCompactRows {
+		t.columns = CompactTracklistRowColumns
+		colWidths = CompactTracklistRowColumnWidths
+		playingIcon = container.NewCenter(container.NewHBox(util.NewHSpace(2), widget.NewIcon(playIcon)))
+	} else {
+		playIconImg := canvas.NewImageFromResource(playIcon)
+		playIconImg.FillMode = canvas.ImageFillContain
+		playIconImg.SetMinSize(fyne.NewSquareSize(theme.IconInlineSize() * 1.5))
+		playingIcon = container.NewCenter(playIconImg)
+	}
+	t.visibleColumns = make([]bool, len(t.columns))
 
 	if len(tracks) > 0 {
 		t._setTracks(tracks)
 	}
 
-	// #, Title, Artist, Album, Time, Year, Favorite, Rating, Plays, Comment, Bitrate, Size, Path
+	t.colLayout = layouts.NewColumnsLayout(colWidths)
-	t.colLayout = layouts.NewColumnsLayout([]float32{40, -1, -1, -1, 60, 60, 55, 100, 65, -1, 75, 75, -1})
+	t.hdr = NewListHeader(sharedutil.MapSlice(t.columns,
-	t.buildHeader()
+		func(t TracklistColumn) ListColumn { return t.Col }), t.colLayout)
 	t.hdr.OnColumnSortChanged = t.onSorted
 	t.hdr.OnColumnVisibilityChanged = t.setColumnVisible
 	t.hdr.OnColumnVisibilityMenuShown = func(pop *widget.PopUp) {
@@ -139,24 +136,25 @@ func NewTracklist(tracks []*mediaprovider.Track) *Tracklist {
 		}
 	}
 
-	playIcon := theme.NewThemedResource(theme.MediaPlayIcon())
-	playIcon.ColorName = theme.ColorNamePrimary
-	playingIcon := container.NewCenter(container.NewHBox(util.NewHSpace(2), widget.NewIcon(playIcon)))
-
 	t.list = NewFocusList(
 		t.lenTracks,
 		func() fyne.CanvasObject {
-			tr := NewTrackRow(t, playingIcon)
+			var tr TracklistRow
-			tr.OnTapped = func() {
+			if t.compactRows {
-				t.onSelectTrack(tr.ListItemID)
+				tr = NewCompactTracklistRow(t, playingIcon)
-			}
+			} else {
-			tr.OnTappedSecondary = t.onShowContextMenu
+				tr = NewExpandedTracklistRow(t, im, playingIcon)
-			tr.OnDoubleTapped = func() {
-				t.onPlayTrackAt(tr.ListItemID)
-			}
-			tr.OnFocusNeighbor = func(up bool) {
-				t.list.FocusNeighbor(tr.ListItemID, up)
 			}
+			tr.SetOnTapped(func() {
+				t.onSelectTrack(tr.ItemID())
+			})
+			tr.SetOnTappedSecondary(t.onShowContextMenu)
+			tr.SetOnDoubleTapped(func() {
+				t.onPlayTrackAt(tr.ItemID())
+			})
+			tr.SetOnFocusNeighbor(func(up bool) {
+				t.list.FocusNeighbor(tr.ItemID(), up)
+			})
 			return tr
 		},
 		func(itemID widget.ListItemID, item fyne.CanvasObject) {
@@ -171,10 +169,10 @@ func NewTracklist(tracks []*mediaprovider.Track) *Tracklist {
 			model := t.tracks[itemID]
 			t.tracksMutex.RUnlock()
 
-			tr := item.(*TrackRow)
+			tr := item.(TracklistRow)
 			t.list.SetItemForID(itemID, tr)
-			if tr.trackID != model.Track.ID || tr.ListItemID != itemID {
+			if tr.TrackID() != model.Track.ID || tr.ItemID() != itemID {
-				tr.ListItemID = itemID
+				tr.SetItemID(itemID)
 			}
 			i := -1 // signal that we want to display the actual track num.
 			if t.Options.AutoNumber {
@@ -200,24 +198,6 @@ func (t *Tracklist) Scroll(amount float32) {
 	t.list.ScrollToOffset(t.list.GetScrollOffset() + amount)
 }
 
-func (t *Tracklist) buildHeader() {
-	t.hdr = NewListHeader([]ListColumn{
-		{Text: "#", Alignment: fyne.TextAlignTrailing, CanToggleVisible: false},
-		{Text: "Title", Alignment: fyne.TextAlignLeading, CanToggleVisible: false},
-		{Text: "Artist", Alignment: fyne.TextAlignLeading, CanToggleVisible: true},
-		{Text: "Album", Alignment: fyne.TextAlignLeading, CanToggleVisible: true},
-		{Text: "Time", Alignment: fyne.TextAlignTrailing, CanToggleVisible: true},
-		{Text: "Year", Alignment: fyne.TextAlignTrailing, CanToggleVisible: true},
-		{Text: " Fav.", Alignment: fyne.TextAlignCenter, CanToggleVisible: true},
-		{Text: "Rating", Alignment: fyne.TextAlignLeading, CanToggleVisible: true},
-		{Text: "Plays", Alignment: fyne.TextAlignTrailing, CanToggleVisible: true},
-		{Text: "Comment", Alignment: fyne.TextAlignLeading, CanToggleVisible: true},
-		{Text: "Bitrate", Alignment: fyne.TextAlignTrailing, CanToggleVisible: true},
-		{Text: "Size", Alignment: fyne.TextAlignTrailing, CanToggleVisible: true},
-		{Text: "File Path", Alignment: fyne.TextAlignLeading, CanToggleVisible: true}},
-		t.colLayout)
-}
-
 // Gets the track at the given index. Thread-safe.
 func (t *Tracklist) TrackAt(idx int) *mediaprovider.Track {
 	t.tracksMutex.RLock()
@@ -232,12 +212,13 @@ func (t *Tracklist) TrackAt(idx int) *mediaprovider.Track {
 func (t *Tracklist) SetVisibleColumns(cols []string) {
 	t.visibleColumns[0] = true
 	t.visibleColumns[1] = true
-	for i := 2; i < len(t.visibleColumns); i++ {
+
+	for i := 2; i < len(t.columns); i++ {
 		t.visibleColumns[i] = false
 		t.hdr.SetColumnVisible(i, false)
 	}
 	for _, col := range cols {
-		if num := ColNumber(col); num < 0 {
+		if num := t.ColNumber(col); num < 0 {
 			log.Printf("Unknown tracklist column %q", col)
 		} else {
 			t.visibleColumns[num] = true
@@ -250,7 +231,7 @@ func (t *Tracklist) VisibleColumns() []string {
 	var cols []string
 	for i := 2; i < len(t.visibleColumns); i++ {
 		if t.visibleColumns[i] {
-			cols = append(cols, string(colName(i)))
+			cols = append(cols, string(t.colName(i)))
 		}
 	}
 	return cols
@@ -275,13 +256,15 @@ func (t *Tracklist) Sorting() TracklistSort {
 func (t *Tracklist) SetSorting(sorting TracklistSort) {
 	if sorting.ColumnName == "" {
 		// nil case - reset current sort
-		if slices.Contains(columns, t.sorting.ColumnName) {
+		if slices.ContainsFunc(t.columns, func(c TracklistColumn) bool {
-			t.hdr.SetSorting(ListHeaderSort{ColNumber: ColNumber(t.sorting.ColumnName), Type: SortNone})
+			return c.Name == t.sorting.ColumnName
+		}) {
+			t.hdr.SetSorting(ListHeaderSort{ColNumber: t.ColNumber(t.sorting.ColumnName), Type: SortNone})
 		}
 		return
 	}
 	// actual sorting will be handled in callback from header
-	t.hdr.SetSorting(ListHeaderSort{ColNumber: ColNumber(sorting.ColumnName), Type: sorting.SortOrder})
+	t.hdr.SetSorting(ListHeaderSort{ColNumber: t.ColNumber(sorting.ColumnName), Type: sorting.SortOrder})
 }
 
 // Sets the currently playing track ID and updates the list rendering
@@ -471,7 +454,7 @@ func (t *Tracklist) doSortTracks() {
 }
 
 func (t *Tracklist) onSorted(sort ListHeaderSort) {
-	t.sorting = TracklistSort{ColumnName: colName(sort.ColNumber), SortOrder: sort.Type}
+	t.sorting = TracklistSort{ColumnName: t.colName(sort.ColNumber), SortOrder: sort.Type}
 	t.tracksMutex.Lock()
 	t.doSortTracks()
 	t.tracksMutex.Unlock()
@@ -689,205 +672,20 @@ func (t *Tracklist) lenTracks() int {
 	return len(t.tracks)
 }
 
-func ColNumber(colName string) int {
+func (t *Tracklist) ColNumber(colName string) int {
-	i := slices.Index(columns, colName)
+	i := slices.IndexFunc(t.columns, func(c TracklistColumn) bool {
+		return c.Name == colName
+	})
 	if i < 0 {
 		log.Printf("error: Tracklist: invalid column name %s", colName)
 	}
 	return i
 }
 
-func colName(i int) string {
+func (t *Tracklist) colName(i int) string {
-	if i < len(columns) {
+	if i < len(t.columns) {
-		return columns[i]
+		return t.columns[i].Name
 	}
 	log.Println("notReached: Tracklist.colName")
 	return ""
 }
-
-type TrackRow struct {
-	FocusListRowBase
-
-	// internal state
-	tracklist  *Tracklist
-	trackNum   int
-	trackID    string
-	isPlaying  bool
-	isFavorite bool
-	playCount  int
-
-	num      *widget.Label
-	name     *widget.RichText // for bold support
-	artist   *MultiHyperlink
-	album    *MultiHyperlink // for disabled support, if albumID is ""
-	dur      *widget.Label
-	year     *widget.Label
-	favorite *fyne.Container
-	rating   *StarRating
-	bitrate  *widget.Label
-	plays    *widget.Label
-	comment  *widget.Label
-	size     *widget.Label
-	path     *widget.Label
-
-	OnTappedSecondary func(e *fyne.PointEvent, trackIdx int)
-
-	playingIcon fyne.CanvasObject
-}
-
-func NewTrackRow(tracklist *Tracklist, playingIcon fyne.CanvasObject) *TrackRow {
-	t := &TrackRow{tracklist: tracklist, playingIcon: playingIcon}
-	t.ExtendBaseWidget(t)
-	t.num = util.NewTrailingAlignLabel()
-	t.name = util.NewTruncatingRichText()
-	t.artist = NewMultiHyperlink()
-	t.artist.OnTapped = tracklist.onArtistTapped
-	t.album = NewMultiHyperlink()
-	t.album.OnTapped = func(id string) { tracklist.onAlbumTapped(id) }
-	t.dur = util.NewTrailingAlignLabel()
-	t.year = util.NewTrailingAlignLabel()
-	favorite := NewFavoriteIcon()
-	favorite.OnTapped = t.toggleFavorited
-	t.favorite = container.NewCenter(favorite)
-	t.rating = NewStarRating()
-	t.rating.IsDisabled = t.tracklist.Options.DisableRating
-	t.rating.StarSize = 16
-	t.rating.OnRatingChanged = t.setTrackRating
-	t.plays = util.NewTrailingAlignLabel()
-	t.comment = util.NewTruncatingLabel()
-	t.bitrate = util.NewTrailingAlignLabel()
-	t.size = util.NewTrailingAlignLabel()
-	t.path = util.NewTruncatingLabel()
-
-	t.Content = container.New(tracklist.colLayout,
-		t.num, t.name, t.artist, t.album, t.dur, t.year, t.favorite, t.rating, t.plays, t.comment, t.bitrate, t.size, t.path)
-	return t
-}
-
-func (t *TrackRow) Update(tm *util.TrackListModel, rowNum int) {
-	changed := false
-	if tm.Selected != t.Selected {
-		t.Selected = tm.Selected
-		changed = true
-	}
-
-	// Update info that can change if this row is bound to
-	// a new track (*mediaprovider.Track)
-	tr := tm.Track
-	if tr.ID != t.trackID {
-		t.EnsureUnfocused()
-		t.trackID = tr.ID
-
-		t.name.Segments[0].(*widget.TextSegment).Text = tr.Name
-		t.artist.BuildSegments(tr.ArtistNames, tr.ArtistIDs)
-		t.album.BuildSegments([]string{tr.Album}, []string{tr.AlbumID})
-		t.dur.Text = util.SecondsToTimeString(float64(tr.Duration))
-		t.year.Text = strconv.Itoa(tr.Year)
-		t.plays.Text = strconv.Itoa(int(tr.PlayCount))
-		t.comment.Text = tr.Comment
-		t.bitrate.Text = strconv.Itoa(tr.BitRate)
-		t.size.Text = util.BytesToSizeString(tr.Size)
-		t.path.Text = tr.FilePath
-		changed = true
-	}
-
-	// Update track num if needed
-	// (which can change based on bound *mediaprovider.Track or tracklist.AutoNumber)
-	if t.trackNum != rowNum {
-		discNum := -1
-		var str string
-		if rowNum < 0 {
-			rowNum = tr.TrackNumber
-			if t.tracklist.Options.ShowDiscNumber {
-				discNum = tr.DiscNumber
-			}
-		}
-		t.trackNum = rowNum
-		if discNum >= 0 {
-			str = fmt.Sprintf("%d.%02d", discNum, rowNum)
-		} else {
-			str = strconv.Itoa(rowNum)
-		}
-		t.num.Text = str
-		changed = true
-	}
-
-	// Update play count if needed
-	if tr.PlayCount != t.playCount {
-		t.playCount = tr.PlayCount
-		t.plays.Text = strconv.Itoa(int(tr.PlayCount))
-		changed = true
-	}
-
-	// Render whether track is playing or not
-	if isPlaying := t.tracklist.nowPlayingID == tr.ID; isPlaying != t.isPlaying {
-		t.isPlaying = isPlaying
-		t.name.Segments[0].(*widget.TextSegment).Style.TextStyle.Bold = isPlaying
-
-		if isPlaying {
-			t.Content.(*fyne.Container).Objects[0] = t.playingIcon
-		} else {
-			t.Content.(*fyne.Container).Objects[0] = t.num
-		}
-		changed = true
-	}
-
-	// Update favorite column
-	if tr.Favorite != t.isFavorite {
-		t.isFavorite = tr.Favorite
-		t.favorite.Objects[0].(*FavoriteIcon).Favorite = tr.Favorite
-		changed = true
-	}
-
-	// Update rating column
-	if t.rating.Rating != tr.Rating {
-		t.rating.Rating = tr.Rating
-		t.rating.Refresh()
-	}
-	if t.rating.IsDisabled != t.tracklist.Options.DisableRating {
-		t.rating.IsDisabled = t.tracklist.Options.DisableRating
-		t.rating.Refresh()
-	}
-
-	// Show only columns configured to be visible
-	updateHidden := func(hiddenPtr *bool, colName string) {
-		colHidden := !t.tracklist.visibleColumns[ColNumber(colName)]
-		if colHidden != *hiddenPtr {
-			*hiddenPtr = colHidden
-			changed = true
-		}
-	}
-	updateHidden(&t.artist.Hidden, ColumnArtist)
-	updateHidden(&t.album.Hidden, ColumnAlbum)
-	updateHidden(&t.dur.Hidden, ColumnTime)
-	updateHidden(&t.year.Hidden, ColumnYear)
-	updateHidden(&t.favorite.Hidden, ColumnFavorite)
-	updateHidden(&t.rating.Hidden, ColumnRating)
-	updateHidden(&t.plays.Hidden, ColumnPlays)
-	updateHidden(&t.comment.Hidden, ColumnComment)
-	updateHidden(&t.bitrate.Hidden, ColumnBitrate)
-	updateHidden(&t.size.Hidden, ColumnSize)
-	updateHidden(&t.path.Hidden, ColumnPath)
-
-	if changed {
-		t.Refresh()
-	}
-}
-
-func (t *TrackRow) toggleFavorited() {
-	t.isFavorite = !t.isFavorite
-	favIcon := t.favorite.Objects[0].(*FavoriteIcon)
-	favIcon.Favorite = t.isFavorite
-	t.favorite.Refresh()
-	t.tracklist.onSetFavorite(t.trackID, t.isFavorite)
-}
-
-func (t *TrackRow) setTrackRating(rating int) {
-	t.tracklist.onSetRating(t.trackID, rating)
-}
-
-func (t *TrackRow) TappedSecondary(e *fyne.PointEvent) {
-	if t.OnTappedSecondary != nil {
-		t.OnTappedSecondary(e, t.ListItemID)
-	}
-}

ui/widgets/tracklistrow.go

@@ -0,0 +1,368 @@
+package widgets
+
+import (
+	"fmt"
+	"image"
+	"strconv"
+
+	"fyne.io/fyne/v2"
+	"fyne.io/fyne/v2/container"
+	"fyne.io/fyne/v2/layout"
+	"fyne.io/fyne/v2/theme"
+	"fyne.io/fyne/v2/widget"
+	"github.com/dweymouth/supersonic/backend"
+	myTheme "github.com/dweymouth/supersonic/ui/theme"
+	"github.com/dweymouth/supersonic/ui/util"
+)
+
+const tracklistThumbnailSize = 48
+
+type TracklistColumn struct {
+	Name string
+	Col  ListColumn
+}
+
+const (
+	ColumnNum         = "Num"
+	ColumnTitle       = "Title"
+	ColumnArtist      = "Artist"
+	ColumnTitleArtist = "Title/Artist"
+	ColumnAlbum       = "Album"
+	ColumnTime        = "Time"
+	ColumnYear        = "Year"
+	ColumnFavorite    = "Favorite"
+	ColumnRating      = "Rating"
+	ColumnPlays       = "Plays"
+	ColumnComment     = "Comment"
+	ColumnBitrate     = "Bitrate"
+	ColumnSize        = "Size"
+	ColumnPath        = "Path"
+)
+
+var (
+	ExpandedTracklistRowColumns = []TracklistColumn{
+		{Name: ColumnNum, Col: ListColumn{Text: "#", Alignment: fyne.TextAlignTrailing, CanToggleVisible: false}},
+		{Name: ColumnTitleArtist, Col: ListColumn{Text: "Title / Artist", Alignment: fyne.TextAlignLeading, CanToggleVisible: false}},
+		{Name: ColumnAlbum, Col: ListColumn{Text: "Album", Alignment: fyne.TextAlignLeading, CanToggleVisible: true}},
+		{Name: ColumnTime, Col: ListColumn{Text: "Time", Alignment: fyne.TextAlignTrailing, CanToggleVisible: true}},
+		{Name: ColumnYear, Col: ListColumn{Text: "Year", Alignment: fyne.TextAlignTrailing, CanToggleVisible: true}},
+		{Name: ColumnFavorite, Col: ListColumn{Text: " Fav.", Alignment: fyne.TextAlignCenter, CanToggleVisible: true}},
+		{Name: ColumnRating, Col: ListColumn{Text: "Rating", Alignment: fyne.TextAlignLeading, CanToggleVisible: true}},
+		{Name: ColumnPlays, Col: ListColumn{Text: "Plays", Alignment: fyne.TextAlignTrailing, CanToggleVisible: true}},
+		{Name: ColumnComment, Col: ListColumn{Text: "Comment", Alignment: fyne.TextAlignLeading, CanToggleVisible: true}},
+		{Name: ColumnBitrate, Col: ListColumn{Text: "Bitrate", Alignment: fyne.TextAlignTrailing, CanToggleVisible: true}},
+		{Name: ColumnSize, Col: ListColumn{Text: "Size", Alignment: fyne.TextAlignTrailing, CanToggleVisible: true}},
+		{Name: ColumnPath, Col: ListColumn{Text: "File Path", Alignment: fyne.TextAlignLeading, CanToggleVisible: true}},
+	}
+
+	// #, Title/Artist, Album, Time, Year, Favorite, Rating, Plays, Comment, Bitrate, Size, Path
+	ExpandedTracklistRowColumnWidths = []float32{40, -1, -1, 60, 60, 55, 100, 65, -1, 75, 75, -1}
+
+	CompactTracklistRowColumns = []TracklistColumn{
+		{Name: ColumnNum, Col: ListColumn{Text: "#", Alignment: fyne.TextAlignTrailing, CanToggleVisible: false}},
+		{Name: ColumnTitle, Col: ListColumn{Text: "Title", Alignment: fyne.TextAlignLeading, CanToggleVisible: false}},
+		{Name: ColumnArtist, Col: ListColumn{Text: "Artist", Alignment: fyne.TextAlignLeading, CanToggleVisible: true}},
+		{Name: ColumnAlbum, Col: ListColumn{Text: "Album", Alignment: fyne.TextAlignLeading, CanToggleVisible: true}},
+		{Name: ColumnTime, Col: ListColumn{Text: "Time", Alignment: fyne.TextAlignTrailing, CanToggleVisible: true}},
+		{Name: ColumnYear, Col: ListColumn{Text: "Year", Alignment: fyne.TextAlignTrailing, CanToggleVisible: true}},
+		{Name: ColumnFavorite, Col: ListColumn{Text: " Fav.", Alignment: fyne.TextAlignCenter, CanToggleVisible: true}},
+		{Name: ColumnRating, Col: ListColumn{Text: "Rating", Alignment: fyne.TextAlignLeading, CanToggleVisible: true}},
+		{Name: ColumnPlays, Col: ListColumn{Text: "Plays", Alignment: fyne.TextAlignTrailing, CanToggleVisible: true}},
+		{Name: ColumnComment, Col: ListColumn{Text: "Comment", Alignment: fyne.TextAlignLeading, CanToggleVisible: true}},
+		{Name: ColumnBitrate, Col: ListColumn{Text: "Bitrate", Alignment: fyne.TextAlignTrailing, CanToggleVisible: true}},
+		{Name: ColumnSize, Col: ListColumn{Text: "Size", Alignment: fyne.TextAlignTrailing, CanToggleVisible: true}},
+		{Name: ColumnPath, Col: ListColumn{Text: "File Path", Alignment: fyne.TextAlignLeading, CanToggleVisible: true}},
+	}
+
+	// #, Title, Artist, Album, Time, Year, Favorite, Rating, Plays, Comment, Bitrate, Size, Path
+	CompactTracklistRowColumnWidths = []float32{40, -1, -1, -1, 60, 60, 55, 100, 65, -1, 75, 75, -1}
+)
+
+type tracklistRowBase struct {
+	FocusListRowBase
+
+	OnTappedSecondary func(e *fyne.PointEvent, trackIdx int)
+
+	// set by extending widget
+	playingIcon fyne.CanvasObject
+
+	// when replacing the content of col 0 with playing icon,
+	// the original content is saved here for resetting
+	originalNumColContent fyne.CanvasObject
+
+	// internal state
+	tracklist  *Tracklist
+	trackNum   int
+	trackID    string
+	isPlaying  bool
+	isFavorite bool
+	playCount  int
+
+	num      *widget.Label
+	name     *widget.RichText // for bold support
+	artist   *MultiHyperlink
+	album    *MultiHyperlink // for disabled support, if albumID is ""
+	dur      *widget.Label
+	year     *widget.Label
+	favorite *fyne.Container
+	rating   *StarRating
+	bitrate  *widget.Label
+	plays    *widget.Label
+	comment  *widget.Label
+	size     *widget.Label
+	path     *widget.Label
+
+	// must be injected by extending widget
+	setColVisibility func(int, bool) bool
+}
+
+type TracklistRow interface {
+	fyne.CanvasObject
+	FocusListRow
+
+	SetOnTappedSecondary(func(_ *fyne.PointEvent, trackNum int))
+
+	TrackID() string
+	Update(model *util.TrackListModel, rowNum int)
+}
+
+type ExpandedTracklistRow struct {
+	tracklistRowBase
+
+	img         *ImagePlaceholder
+	imageLoader util.ThumbnailLoader
+}
+
+type CompactTracklistRow struct {
+	tracklistRowBase
+}
+
+var (
+	_ TracklistRow = (*CompactTracklistRow)(nil)
+	_ TracklistRow = (*ExpandedTracklistRow)(nil)
+)
+
+func NewExpandedTracklistRow(tracklist *Tracklist, im *backend.ImageManager, playingIcon fyne.CanvasObject) *ExpandedTracklistRow {
+	t := &ExpandedTracklistRow{}
+	t.ExtendBaseWidget(t)
+	t.tracklistRowBase.create(tracklist)
+	t.playingIcon = playingIcon
+	t.img = NewImagePlaceholder(myTheme.TracksIcon, tracklistThumbnailSize)
+
+	t.imageLoader = util.NewThumbnailLoader(im, func(i image.Image) {
+		t.img.SetImage(i, false)
+	})
+	t.imageLoader.OnBeforeLoad = func() {
+		t.img.SetImage(nil, false)
+	}
+
+	titleArtistImg := container.NewBorder(nil, nil,
+		container.New(layout.NewCustomPaddedLayout(2, 2, 2, -4), t.img) /*left*/, nil,
+		container.New(layout.NewCustomPaddedVBoxLayout(theme.Padding()-16),
+			t.name, t.artist))
+
+	v := makeVerticallyCentered // func alias
+	container := container.New(tracklist.colLayout,
+		v(t.num), titleArtistImg, v(t.album), v(t.dur), v(t.year), v(t.favorite), v(t.rating), v(t.plays), v(t.comment), v(t.bitrate), v(t.size), v(t.path))
+	t.Content = container
+	t.setColVisibility = func(colNum int, vis bool) bool {
+		c := container.Objects[colNum].(*fyne.Container)
+		wasHidden := c.Hidden
+		c.Hidden = vis
+		return c.Hidden != wasHidden
+	}
+	return t
+}
+
+func (t *ExpandedTracklistRow) Update(tm *util.TrackListModel, rowNum int) {
+	if t.trackID != tm.Track.ID {
+		t.imageLoader.Load(tm.Track.CoverArtID)
+	}
+	t.tracklistRowBase.Update(tm, rowNum)
+}
+
+func NewCompactTracklistRow(tracklist *Tracklist, playingIcon fyne.CanvasObject) *CompactTracklistRow {
+	t := &CompactTracklistRow{}
+	t.ExtendBaseWidget(t)
+
+	t.tracklistRowBase.create(tracklist)
+	t.playingIcon = playingIcon
+
+	t.Content = container.New(tracklist.colLayout,
+		t.num, t.name, t.artist, t.album, t.dur, t.year, t.favorite, t.rating, t.plays, t.comment, t.bitrate, t.size, t.path)
+
+	colHiddenPtrMap := map[int]*bool{
+		2:  &t.artist.Hidden,
+		3:  &t.album.Hidden,
+		4:  &t.dur.Hidden,
+		5:  &t.year.Hidden,
+		6:  &t.favorite.Hidden,
+		7:  &t.rating.Hidden,
+		8:  &t.plays.Hidden,
+		9:  &t.comment.Hidden,
+		10: &t.bitrate.Hidden,
+		11: &t.size.Hidden,
+		12: &t.path.Hidden,
+	}
+	t.setColVisibility = func(colNum int, vis bool) bool {
+		ptr, ok := colHiddenPtrMap[colNum]
+		if !ok {
+			return false // column is always visible
+		}
+		wasHidden := *ptr
+		*ptr = vis
+		return vis != wasHidden
+	}
+	return t
+}
+
+func (t *tracklistRowBase) create(tracklist *Tracklist) {
+	t.tracklist = tracklist
+	t.num = util.NewTrailingAlignLabel()
+	t.name = util.NewTruncatingRichText()
+	t.artist = NewMultiHyperlink()
+	t.artist.OnTapped = tracklist.onArtistTapped
+	t.album = NewMultiHyperlink()
+	t.album.OnTapped = func(id string) { tracklist.onAlbumTapped(id) }
+	t.dur = util.NewTrailingAlignLabel()
+	t.year = util.NewTrailingAlignLabel()
+	favorite := NewFavoriteIcon()
+	favorite.OnTapped = t.toggleFavorited
+	t.favorite = container.NewCenter(favorite)
+	t.rating = NewStarRating()
+	t.rating.IsDisabled = t.tracklist.Options.DisableRating
+	t.rating.StarSize = 16
+	t.rating.OnRatingChanged = t.setTrackRating
+	t.plays = util.NewTrailingAlignLabel()
+	t.comment = util.NewTruncatingLabel()
+	t.bitrate = util.NewTrailingAlignLabel()
+	t.size = util.NewTrailingAlignLabel()
+	t.path = util.NewTruncatingLabel()
+}
+
+func (t *tracklistRowBase) SetOnTappedSecondary(f func(*fyne.PointEvent, int)) {
+	t.OnTappedSecondary = f
+}
+func (t *tracklistRowBase) TrackID() string {
+	return t.trackID
+}
+
+func (t *tracklistRowBase) Update(tm *util.TrackListModel, rowNum int) {
+	changed := false
+	if tm.Selected != t.Selected {
+		t.Selected = tm.Selected
+		changed = true
+	}
+
+	// Update info that can change if this row is bound to
+	// a new track (*mediaprovider.Track)
+	tr := tm.Track
+	if tr.ID != t.trackID {
+		t.EnsureUnfocused()
+		t.trackID = tr.ID
+
+		t.name.Segments[0].(*widget.TextSegment).Text = tr.Name
+		t.artist.BuildSegments(tr.ArtistNames, tr.ArtistIDs)
+		t.album.BuildSegments([]string{tr.Album}, []string{tr.AlbumID})
+		t.dur.Text = util.SecondsToTimeString(float64(tr.Duration))
+		t.year.Text = strconv.Itoa(tr.Year)
+		t.plays.Text = strconv.Itoa(int(tr.PlayCount))
+		t.comment.Text = tr.Comment
+		t.bitrate.Text = strconv.Itoa(tr.BitRate)
+		t.size.Text = util.BytesToSizeString(tr.Size)
+		t.path.Text = tr.FilePath
+		changed = true
+	}
+
+	// Update track num if needed
+	// (which can change based on bound *mediaprovider.Track or tracklist.AutoNumber)
+	if t.trackNum != rowNum {
+		discNum := -1
+		var str string
+		if rowNum < 0 {
+			rowNum = tr.TrackNumber
+			if t.tracklist.Options.ShowDiscNumber {
+				discNum = tr.DiscNumber
+			}
+		}
+		t.trackNum = rowNum
+		if discNum >= 0 {
+			str = fmt.Sprintf("%d.%02d", discNum, rowNum)
+		} else {
+			str = strconv.Itoa(rowNum)
+		}
+		t.num.Text = str
+		changed = true
+	}
+
+	// Update play count if needed
+	if tr.PlayCount != t.playCount {
+		t.playCount = tr.PlayCount
+		t.plays.Text = strconv.Itoa(int(tr.PlayCount))
+		changed = true
+	}
+
+	// Render whether track is playing or not
+	if isPlaying := t.tracklist.nowPlayingID == tr.ID; isPlaying != t.isPlaying {
+		t.isPlaying = isPlaying
+		t.name.Segments[0].(*widget.TextSegment).Style.TextStyle.Bold = isPlaying
+
+		if isPlaying {
+			t.originalNumColContent = t.Content.(*fyne.Container).Objects[0]
+			t.Content.(*fyne.Container).Objects[0] = t.playingIcon
+		} else {
+			t.Content.(*fyne.Container).Objects[0] = t.originalNumColContent
+		}
+		changed = true
+	}
+
+	// Update favorite column
+	if tr.Favorite != t.isFavorite {
+		t.isFavorite = tr.Favorite
+		t.favorite.Objects[0].(*FavoriteIcon).Favorite = tr.Favorite
+		changed = true
+	}
+
+	// Update rating column
+	if t.rating.Rating != tr.Rating {
+		t.rating.Rating = tr.Rating
+		t.rating.Refresh()
+	}
+	if t.rating.IsDisabled != t.tracklist.Options.DisableRating {
+		t.rating.IsDisabled = t.tracklist.Options.DisableRating
+		t.rating.Refresh()
+	}
+
+	// Show only columns configured to be visible
+	for i := 2; i < len(t.tracklist.columns); i++ {
+		if ch := t.setColVisibility(i, !t.tracklist.visibleColumns[i]); ch {
+			changed = true
+		}
+	}
+
+	if changed {
+		t.Refresh()
+	}
+}
+
+func (t *tracklistRowBase) toggleFavorited() {
+	t.isFavorite = !t.isFavorite
+	favIcon := t.favorite.Objects[0].(*FavoriteIcon)
+	favIcon.Favorite = t.isFavorite
+	t.favorite.Refresh()
+	t.tracklist.onSetFavorite(t.trackID, t.isFavorite)
+}
+
+func (t *tracklistRowBase) setTrackRating(rating int) {
+	t.tracklist.onSetRating(t.trackID, rating)
+}
+
+func (t *tracklistRowBase) TappedSecondary(e *fyne.PointEvent) {
+	if t.OnTappedSecondary != nil {
+		t.OnTappedSecondary(e, t.ListItemID)
+	}
+}
+
+func makeVerticallyCentered(obj fyne.CanvasObject) fyne.CanvasObject {
+	return container.NewVBox(layout.NewSpacer(), obj, layout.NewSpacer())
+}