switch GridView to icon placeholder

res/bundled_gen.sh

@@ -1,7 +1,6 @@
 #!/bin/sh
 
 fyne bundle -package res -prefix Res appicon-256.png > bundled.go
-fyne bundle -append -prefix Res albumplaceholder.png >> bundled.go
 fyne bundle -append -prefix Res icons/freepik/disc.png >> bundled.go
 fyne bundle -append -prefix Res icons/freepik/disc-invert.png >> bundled.go
 fyne bundle -append -prefix Res icons/freepik/headphones.png >> bundled.go

ui/browsing/albumspage.go

@@ -5,6 +5,7 @@ import (
 	"github.com/dweymouth/supersonic/backend/mediaprovider"
 	"github.com/dweymouth/supersonic/sharedutil"
 	"github.com/dweymouth/supersonic/ui/controller"
+	myTheme "github.com/dweymouth/supersonic/ui/theme"
 	"github.com/dweymouth/supersonic/ui/util"
 	"github.com/dweymouth/supersonic/ui/widgets"
 
@@ -75,7 +76,7 @@ func NewAlbumsPage(cfg *backend.AlbumsPageConfig, contr *controller.Controller,
 	}
 	a.sortOrder.Selected = cfg.SortOrder
 	iter := mp.IterateAlbums(a.sortOrder.Selected, a.filter)
-	a.grid = widgets.NewGridView(widgets.NewGridViewAlbumIterator(iter), im)
+	a.grid = widgets.NewGridView(widgets.NewGridViewAlbumIterator(iter), im, myTheme.AlbumIcon)
 	contr.ConnectAlbumGridActions(a.grid)
 	a.createSearchAndFilter()
 	a.createContainer(false)
@@ -190,7 +191,7 @@ func (a *AlbumsPage) Save() SavedPage {
 func (a *AlbumsPage) doSearch(query string) {
 	iter := widgets.NewGridViewAlbumIterator(a.mp.SearchAlbums(query, a.filter))
 	if a.searchGrid == nil {
-		a.searchGrid = widgets.NewGridView(iter, a.im)
+		a.searchGrid = widgets.NewGridView(iter, a.im, myTheme.AlbumIcon)
 		a.contr.ConnectAlbumGridActions(a.searchGrid)
 	} else {
 		a.searchGrid.Reset(iter)

ui/browsing/artistpage.go

@@ -7,7 +7,6 @@ import (
 
 	"github.com/dweymouth/supersonic/backend"
 	"github.com/dweymouth/supersonic/backend/mediaprovider"
-	"github.com/dweymouth/supersonic/res"
 	"github.com/dweymouth/supersonic/sharedutil"
 	"github.com/dweymouth/supersonic/ui/controller"
 	"github.com/dweymouth/supersonic/ui/layouts"
@@ -166,7 +165,7 @@ func (a *ArtistPage) showAlbumGrid() {
 				Secondary:  strconv.Itoa(al.Year),
 			}
 		})
-		a.albumGrid = widgets.NewFixedGridView(model, a.im)
+		a.albumGrid = widgets.NewFixedGridView(model, a.im, myTheme.AlbumIcon)
 		a.contr.ConnectAlbumGridActions(a.albumGrid)
 	}
 	a.container.Objects[0].(*fyne.Container).Objects[0] = a.albumGrid
@@ -251,7 +250,7 @@ func NewArtistPageHeader(page *ArtistPage) *ArtistPageHeader {
 	a.titleDisp.Segments[0].(*widget.TextSegment).Style = widget.RichTextStyle{
 		SizeName: theme.SizeNameHeadingText,
 	}
-	a.artistImage = widgets.NewImagePlaceholder(res.ResPeopleInvertPng, 225)
+	a.artistImage = widgets.NewImagePlaceholder(myTheme.ArtistIcon, 225)
 	a.artistImage.OnTapped = func() {
 		if im := a.artistImage.Image(); im != nil {
 			a.artistPage.contr.ShowPopUpImage(im)

ui/browsing/artistspage.go

@@ -14,6 +14,7 @@ import (
 	"github.com/dweymouth/supersonic/backend/mediaprovider"
 	"github.com/dweymouth/supersonic/sharedutil"
 	"github.com/dweymouth/supersonic/ui/controller"
+	myTheme "github.com/dweymouth/supersonic/ui/theme"
 	"github.com/dweymouth/supersonic/ui/util"
 	"github.com/dweymouth/supersonic/ui/widgets"
 )
@@ -74,7 +75,7 @@ func newArtistsPage(
 	a.searcher = widgets.NewSearchEntry()
 	a.searcher.OnSearched = func(query string) { a.onSearched(query, false /*firstLoad*/) }
 	a.searcher.Entry.Text = searchText
-	a.grid = widgets.NewFixedGridView(nil, a.im)
+	a.grid = widgets.NewFixedGridView(nil, a.im, myTheme.ArtistIcon)
 	a.grid.OnShowItemPage = a.showArtistPage
 	a.grid.OnPlay = func(artistID string, shuffle bool) { go a.contr.PlayArtistDiscography(artistID, shuffle) }
 	a.grid.OnAddToQueue = func(artistID string) {

ui/browsing/favoritespage.go

@@ -55,7 +55,7 @@ func NewFavoritesPage(cfg *backend.FavoritesPageConfig, contr *controller.Contro
 	a.ExtendBaseWidget(a)
 	a.createHeader(0)
 	iter := mp.IterateAlbums("", a.filter)
-	a.grid = widgets.NewGridView(widgets.NewGridViewAlbumIterator(iter), a.im)
+	a.grid = widgets.NewGridView(widgets.NewGridViewAlbumIterator(iter), a.im, myTheme.AlbumIcon)
 	a.contr.ConnectAlbumGridActions(a.grid)
 	if cfg.InitialView == "Artists" {
 		a.toggleBtns.SetActivatedButton(1)
@@ -233,7 +233,7 @@ func (a *FavoritesPage) SelectAll() {
 func (a *FavoritesPage) doSearchAlbums(query string) {
 	iter := a.mp.SearchAlbums(query, a.filter)
 	if a.searchGrid == nil {
-		a.searchGrid = widgets.NewGridView(widgets.NewGridViewAlbumIterator(iter), a.im)
+		a.searchGrid = widgets.NewGridView(widgets.NewGridViewAlbumIterator(iter), a.im, myTheme.AlbumIcon)
 		a.contr.ConnectAlbumGridActions(a.searchGrid)
 	} else {
 		a.searchGrid.Reset(widgets.NewGridViewAlbumIterator(iter))

ui/browsing/genrepage.go

@@ -53,7 +53,7 @@ func NewGenrePage(genre string, contr *controller.Controller, pm *backend.Playba
 	}
 	g.playRandom = widget.NewButtonWithIcon(" Play random", myTheme.ShuffleIcon, g.playRandomSongs)
 	iter := g.mp.IterateAlbums("", g.filter)
-	g.grid = widgets.NewGridView(widgets.NewGridViewAlbumIterator(iter), g.im)
+	g.grid = widgets.NewGridView(widgets.NewGridViewAlbumIterator(iter), g.im, myTheme.AlbumIcon)
 	g.contr.ConnectAlbumGridActions(g.grid)
 	g.createSearchAndFilter()
 	g.createContainer(false)
@@ -169,7 +169,7 @@ func (g *GenrePage) OnSearched(query string) {
 func (g *GenrePage) doSearch(query string) {
 	iter := g.mp.SearchAlbums(query, g.filter)
 	if g.searchGrid == nil {
-		g.searchGrid = widgets.NewGridView(widgets.NewGridViewAlbumIterator(iter), g.im)
+		g.searchGrid = widgets.NewGridView(widgets.NewGridViewAlbumIterator(iter), g.im, myTheme.AlbumIcon)
 		g.contr.ConnectAlbumGridActions(g.searchGrid)
 	} else {
 		g.searchGrid.Reset(widgets.NewGridViewAlbumIterator(iter))

ui/browsing/playlistpage.go

@@ -6,7 +6,6 @@ import (
 
 	"github.com/dweymouth/supersonic/backend"
 	"github.com/dweymouth/supersonic/backend/mediaprovider"
-	"github.com/dweymouth/supersonic/res"
 	"github.com/dweymouth/supersonic/sharedutil"
 	"github.com/dweymouth/supersonic/ui/controller"
 	"github.com/dweymouth/supersonic/ui/layouts"
@@ -183,7 +182,7 @@ func NewPlaylistPageHeader(page *PlaylistPage) *PlaylistPageHeader {
 	a := &PlaylistPageHeader{page: page}
 	a.ExtendBaseWidget(a)
 
-	a.image = widgets.NewImagePlaceholder(res.ResPlaylistInvertPng, 225)
+	a.image = widgets.NewImagePlaceholder(myTheme.PlaylistIcon, 225)
 	a.titleLabel = widget.NewRichTextWithText("")
 	a.titleLabel.Wrapping = fyne.TextTruncate
 	a.titleLabel.Segments[0].(*widget.TextSegment).Style = widget.RichTextStyle{

ui/browsing/playlistspage.go

@@ -12,6 +12,7 @@ import (
 	"github.com/dweymouth/supersonic/sharedutil"
 	"github.com/dweymouth/supersonic/ui/controller"
 	"github.com/dweymouth/supersonic/ui/layouts"
+	myTheme "github.com/dweymouth/supersonic/ui/theme"
 	"github.com/dweymouth/supersonic/ui/widgets"
 
 	"fyne.io/fyne/v2"
@@ -94,7 +95,7 @@ func (a *PlaylistsPage) createListView() {
 
 func (a *PlaylistsPage) createGridView(playlists []*mediaprovider.Playlist) {
 	model := createPlaylistGridViewModel(playlists)
-	a.gridView = widgets.NewFixedGridView(model, a.contr.App.ImageManager)
+	a.gridView = widgets.NewFixedGridView(model, a.contr.App.ImageManager, myTheme.PlaylistIcon)
 	a.gridView.OnPlay = func(id string, shuffle bool) {
 		go a.contr.App.PlaybackManager.PlayPlaylist(id, 0, shuffle)
 	}

ui/dialogs/aboutdialog.go

@@ -94,14 +94,12 @@ func (a *AboutDialog) buildCreditsContainer() fyne.CanvasObject {
 	freepikURL, _ := url.Parse("https://www.flaticon.com/authors/freepik")
 	appIconCredit := widget.NewLabel("The Supersonic app icon is a derivative of a work created by Piotr Siedlecki and placed in the public domain.")
 	appIconCredit.Wrapping = fyne.TextWrapWord
-	albumPlaceholderCredit := widget.NewLabel("The album cover placeholder image was created by @LaurenBacall originally for the MP3Tag project.")
-	albumPlaceholderCredit.Wrapping = fyne.TextWrapWord
 	return container.New(&layouts.VboxCustomPadding{ExtraPad: -10},
 		widget.NewLabel("Major frameworks and modules used in this application include:"),
 		container.NewHBox(widget.NewHyperlink("Fyne toolkit", fyneURL), widget.NewLabel("BSD 3-Clause License")),
 		container.NewHBox(widget.NewHyperlink("go-subsonic", goSubsonicURL), widget.NewLabel("GPL v3 License")),
 		container.NewHBox(widget.NewHyperlink("go-toml", goTomlURL), widget.NewLabel("MIT License")),
-		appIconCredit, albumPlaceholderCredit,
+		appIconCredit,
 		container.NewHBox(widget.NewLabel("Additional icons by:"), widget.NewHyperlink("Freepik on flaticon.com", freepikURL)),
 	)
 }

ui/theme/themedrectangle.go

@@ -11,7 +11,9 @@ type ThemedRectangle struct {
 
 	rect *canvas.Rectangle
 
-	ColorName fyne.ThemeColorName
+	ColorName       fyne.ThemeColorName
+	BorderWidth     float32
+	BorderColorName fyne.ThemeColorName
 }
 
 func NewThemedRectangle(colorName fyne.ThemeColorName) *ThemedRectangle {
@@ -25,8 +27,11 @@ func NewThemedRectangle(colorName fyne.ThemeColorName) *ThemedRectangle {
 }
 
 func (t *ThemedRectangle) Refresh() {
-	t.rect.FillColor = fyne.CurrentApp().Settings().Theme().Color(t.ColorName,
+	settings := fyne.CurrentApp().Settings()
-		fyne.CurrentApp().Settings().ThemeVariant())
+	theme := settings.Theme()
+	t.rect.FillColor = theme.Color(t.ColorName, settings.ThemeVariant())
+	t.rect.StrokeWidth = t.BorderWidth
+	t.rect.StrokeColor = theme.Color(t.BorderColorName, settings.ThemeVariant())
 	t.BaseWidget.Refresh()
 }
 

ui/widgets/gridview.go

@@ -7,7 +7,6 @@ import (
 	"sync"
 
 	"github.com/dweymouth/supersonic/backend/mediaprovider"
-	"github.com/dweymouth/supersonic/res"
 	"github.com/dweymouth/supersonic/sharedutil"
 
 	"fyne.io/fyne/v2"
@@ -81,6 +80,7 @@ type GridViewState struct {
 	itemsMutex   sync.RWMutex
 	iter         GridViewIterator
 	imageFetcher ImageFetcher
+	placeholder  fyne.Resource
 	highestShown int
 	fetchCancel  context.CancelFunc
 	done         bool
@@ -96,12 +96,13 @@ type GridViewState struct {
 
 var _ fyne.Widget = (*GridView)(nil)
 
-func NewFixedGridView(items []GridViewItemModel, fetch ImageFetcher) *GridView {
+func NewFixedGridView(items []GridViewItemModel, fetch ImageFetcher, placeholder fyne.Resource) *GridView {
 	g := &GridView{
 		GridViewState: GridViewState{
 			items:        items,
 			done:         true,
 			imageFetcher: fetch,
+			placeholder:  placeholder,
 		},
 	}
 	g.ExtendBaseWidget(g)
@@ -109,7 +110,7 @@ func NewFixedGridView(items []GridViewItemModel, fetch ImageFetcher) *GridView {
 	return g
 }
 
-func NewGridView(iter GridViewIterator, fetch ImageFetcher) *GridView {
+func NewGridView(iter GridViewIterator, fetch ImageFetcher, placeholder fyne.Resource) *GridView {
 	g := &GridView{
 		GridViewState: GridViewState{
 			iter:         iter,
@@ -117,7 +118,6 @@ func NewGridView(iter GridViewIterator, fetch ImageFetcher) *GridView {
 		},
 	}
 	g.ExtendBaseWidget(g)
-
 	g.createGridWrap()
 
 	// fetch initial items
@@ -174,6 +174,14 @@ func (g *GridView) ResetFixed(items []GridViewItemModel) {
 	g.iter = nil
 }
 
+func (g *GridView) GetScrollOffset() float32 {
+	return g.grid.GetScrollOffset()
+}
+
+func (g *GridView) ScrollToOffset(offs float32) {
+	g.grid.ScrollToOffset(offs)
+}
+
 func (g *GridView) createGridWrap() {
 	g.grid = NewGridWrap(
 		func() int {
@@ -181,7 +189,7 @@ func (g *GridView) createGridWrap() {
 		},
 		// create func
 		func() fyne.CanvasObject {
-			card := NewGridViewItem()
+			card := NewGridViewItem(g.placeholder)
 			card.OnPlay = func(shuffle bool) {
 				if g.OnPlay != nil {
 					g.OnPlay(card.ItemID(), shuffle)
@@ -244,7 +252,7 @@ func (g *GridView) doUpdateItemCard(itemIdx int, card *GridViewItem) {
 		if img, ok := g.imageFetcher.GetCoverThumbnailFromCache(item.CoverArtID); ok {
 			card.Cover.SetImage(img)
 		} else {
-			card.Cover.SetImageResource(res.ResAlbumplaceholderPng)
+			card.Cover.SetImage(nil)
 			// asynchronously fetch cover image
 			ctx, cancel := context.WithCancel(context.Background())
 			card.ImgLoadCancel = cancel
@@ -263,8 +271,8 @@ func (g *GridView) doUpdateItemCard(itemIdx int, card *GridViewItem) {
 			}(ctx)
 		}
 	} else {
-		// use the placeholder image for an item that has no cover art ID
+		// use the placeholder for an item that has no cover art ID
-		card.Cover.SetImageResource(res.ResAlbumplaceholderPng)
+		card.Cover.SetImage(nil)
 	}
 
 	// if user has scrolled near the bottom, fetch more

ui/widgets/gridviewitem.go

@@ -23,18 +23,18 @@ var _ fyne.SecondaryTappable = (*coverImage)(nil)
 type coverImage struct {
 	widget.BaseWidget
 
-	Im                *canvas.Image
+	Im                *ImagePlaceholder
 	playbtn           *canvas.Image
 	OnPlay            func()
 	OnShowPage        func()
 	OnShowContextMenu func(fyne.Position)
 }
 
-func newCoverImage() *coverImage {
+func newCoverImage(placeholderResource fyne.Resource) *coverImage {
 	c := &coverImage{}
 	c.ExtendBaseWidget(c)
-	c.Im = &canvas.Image{FillMode: canvas.ImageFillContain, ScaleMode: canvas.ImageScaleFastest}
+	c.Im = NewImagePlaceholder(placeholderResource, 200)
-	c.Im.SetMinSize(fyne.NewSize(200, 200))
+	c.Im.ScaleMode = canvas.ImageScaleFastest
 	c.playbtn = &canvas.Image{FillMode: canvas.ImageFillContain, Resource: res.ResPlaybuttonPng}
 	c.playbtn.SetMinSize(fyne.NewSize(60, 60))
 	c.playbtn.Hidden = true
@@ -93,15 +93,7 @@ func (a *coverImage) center() fyne.Position {
 }
 
 func (a *coverImage) SetImage(im image.Image) {
-	a.Im.Resource = nil
+	a.Im.SetImage(im, false)
-	a.Im.Image = im
-	a.Refresh()
-}
-
-func (a *coverImage) SetImageResource(res *fyne.StaticResource) {
-	a.Im.Image = nil
-	a.Im.Resource = res
-	a.Refresh()
 }
 
 func isInside(origin fyne.Position, radius float32, point fyne.Position) bool {
@@ -141,11 +133,11 @@ type GridViewItem struct {
 	OnShowSecondaryPage func()
 }
 
-func NewGridViewItem() *GridViewItem {
+func NewGridViewItem(placeholderResource fyne.Resource) *GridViewItem {
 	g := &GridViewItem{
 		primaryText:   NewCustomHyperlink(),
 		secondaryText: NewCustomHyperlink(),
-		Cover:         newCoverImage(),
+		Cover:         newCoverImage(placeholderResource),
 	}
 	g.ExtendBaseWidget(g)
 	g.Cover.OnPlay = func() { g.onPlay(false) }

ui/widgets/imageplaceholder.go

@@ -2,48 +2,50 @@ package widgets
 
 import (
 	"image"
-	"image/color"
 
 	"fyne.io/fyne/v2"
 	"fyne.io/fyne/v2/canvas"
 	"fyne.io/fyne/v2/container"
 	"fyne.io/fyne/v2/theme"
 	"fyne.io/fyne/v2/widget"
+	myTheme "github.com/dweymouth/supersonic/ui/theme"
 )
 
 // A widget that can display an image or else
 // a placeholder with a rectangular border frame
 // and an icon positioned in the center of the frame.
 type ImagePlaceholder struct {
+	ScaleMode canvas.ImageScale
+
 	widget.BaseWidget
-	container *fyne.Container
+	content   *fyne.Container
+	imageDisp *TappableImage
 	image     image.Image
+	iconImage *canvas.Image
+	border    *myTheme.ThemedRectangle
 	minSize   float32
 
 	OnTapped func()
 }
 
 func NewImagePlaceholder(centerIcon fyne.Resource, minSize float32) *ImagePlaceholder {
-	m := &ImagePlaceholder{minSize: minSize}
+	i := &ImagePlaceholder{minSize: minSize}
-	m.ExtendBaseWidget(m)
+	i.ExtendBaseWidget(i)
-	img := canvas.NewImageFromResource(centerIcon)
+	i.iconImage = canvas.NewImageFromResource(centerIcon)
-	img.FillMode = canvas.ImageFillContain
+	i.iconImage.FillMode = canvas.ImageFillContain
-	img.SetMinSize(fyne.NewSize(minSize/4, minSize/4))
+	i.iconImage.SetMinSize(fyne.NewSize(minSize/4, minSize/4))
-	rect := canvas.NewRectangle(theme.BackgroundColor())
+	i.imageDisp = NewTappableImage(i.onTapped)
-	rect.StrokeColor = color.Black
+	i.imageDisp.FillMode = canvas.ImageFillContain
-	rect.StrokeWidth = 3
+	i.imageDisp.Hidden = true
-	rect.SetMinSize(fyne.NewSize(minSize, minSize))
+	i.border = myTheme.NewThemedRectangle(theme.ColorNameBackground)
-	m.container = container.NewMax(
+	i.border.BorderColorName = theme.ColorNameForeground
-		rect,
+	i.border.BorderWidth = 3
-		container.NewCenter(img),
+	i.content = container.NewMax(
+		i.border,
+		container.NewCenter(i.iconImage),
+		i.imageDisp,
 	)
-	return m
+	return i
-}
-
-type CanvasImage interface {
-	fyne.CanvasObject
-
-	SetMinSize(fyne.Size)
 }
 
 func (i *ImagePlaceholder) HaveImage() bool {
@@ -51,22 +53,13 @@ func (i *ImagePlaceholder) HaveImage() bool {
 }
 
 func (i *ImagePlaceholder) SetImage(img image.Image, tappable bool) {
-	var cIm CanvasImage
 	i.image = img
-	if tappable {
+	if img != nil {
-		cImg := NewTappableImage(i.onTapped)
+		i.imageDisp.DisableTapping = !tappable
-		cImg.Image.Image = img
+		i.imageDisp.Image.Image = img
-		cImg.FillMode = canvas.ImageFillContain
-		cIm = cImg
-	} else {
-		cImg := canvas.NewImageFromImage(img)
-		cImg.FillMode = canvas.ImageFillContain
-		cIm = cImg
 	}
-	cIm.SetMinSize(fyne.NewSize(i.minSize, i.minSize))
+
-	i.container.RemoveAll()
+	i.Refresh()
-	i.container.Add(cIm)
-	i.container.Refresh()
 }
 
 func (i *ImagePlaceholder) Image() image.Image {
@@ -79,6 +72,18 @@ func (i *ImagePlaceholder) onTapped() {
 	}
 }
 
-func (i *ImagePlaceholder) CreateRenderer() fyne.WidgetRenderer {
+func (i *ImagePlaceholder) MinSize() fyne.Size {
-	return widget.NewSimpleRenderer(i.container)
+	return fyne.NewSize(i.minSize, i.minSize)
+}
+
+func (i *ImagePlaceholder) Refresh() {
+	i.border.Hidden = i.HaveImage()
+	i.iconImage.Hidden = i.HaveImage()
+	i.imageDisp.Hidden = !i.HaveImage()
+	i.imageDisp.ScaleMode = i.ScaleMode
+	i.BaseWidget.Refresh()
+}
+
+func (i *ImagePlaceholder) CreateRenderer() fyne.WidgetRenderer {
+	return widget.NewSimpleRenderer(i.content)
 }

ui/widgets/tappablewrappers.go

@@ -54,6 +54,7 @@ type TappableImage struct {
 	widget.BaseWidget
 	canvas.Image
 
+	DisableTapping    bool
 	OnTapped          func()
 	OnTappedSecondary func(pos fyne.Position)
 }
@@ -85,20 +86,20 @@ func (t *TappableImage) Resize(size fyne.Size) {
 }
 
 func (t *TappableImage) Cursor() desktop.Cursor {
-	if t.haveImage() {
+	if !t.DisableTapping && t.haveImage() {
 		return desktop.PointerCursor
 	}
 	return desktop.DefaultCursor
 }
 
 func (t *TappableImage) Tapped(_ *fyne.PointEvent) {
-	if t.haveImage() && t.OnTapped != nil {
+	if !t.DisableTapping && t.haveImage() && t.OnTapped != nil {
 		t.OnTapped()
 	}
 }
 
 func (t *TappableImage) TappedSecondary(e *fyne.PointEvent) {
-	if t.haveImage() && t.OnTappedSecondary != nil {
+	if !t.DisableTapping && t.haveImage() && t.OnTappedSecondary != nil {
 		t.OnTappedSecondary(e.AbsolutePosition)
 	}
 }