Move loop button to auxiliary controls, change button color on toggle

ui/bottompanel.go

@@ -55,7 +55,7 @@ func NewBottomPanel(p *player.Player, pm *backend.PlaybackManager, contr *contro
 		bp.Controls.SetPlaying(false)
 	})
 	pm.OnLoopModeChange(func(mode string) {
-		bp.Controls.SetLoopMode(mode)
+		bp.AuxControls.SetLoopMode(mode)
 	})
 
 	bp.NowPlaying = widgets.NewNowPlayingCard()
@@ -98,14 +98,14 @@ func NewBottomPanel(p *player.Player, pm *backend.PlaybackManager, contr *contro
 	bp.Controls.OnSeek(func(f float64) {
 		p.Seek(fmt.Sprintf("%d", int(f*100)), player.SeekAbsolutePercent)
 	})
-	bp.Controls.OnChangeLoopMode(func() {
-		bp.playbackManager.SetNextLoopMode()
-	})
 
 	bp.AuxControls = widgets.NewAuxControls(p.GetVolume())
 	bp.AuxControls.VolumeControl.OnVolumeChanged = func(v int) {
 		_ = p.SetVolume(v)
 	}
+	bp.AuxControls.OnChangeLoopMode(func() {
+		bp.playbackManager.SetNextLoopMode()
+	})
 
 	bp.container = container.New(layouts.NewLeftMiddleRightLayout(500),
 		bp.NowPlaying, bp.Controls, bp.AuxControls)

ui/widgets/auxcontrols.go

@@ -14,6 +14,7 @@ type AuxControls struct {
 	widget.BaseWidget
 
 	VolumeControl *VolumeControl
+	loop          *widget.Button
 
 	container *fyne.Container
 }
@@ -21,8 +22,17 @@ type AuxControls struct {
 func NewAuxControls(initialVolume int) *AuxControls {
 	a := &AuxControls{
 		VolumeControl: NewVolumeControl(initialVolume),
+		loop:          widget.NewButtonWithIcon("", theme.MediaReplayIcon(), func() {}),
 	}
-	a.container = container.NewHBox(layout.NewSpacer(), a.VolumeControl)
+	a.container = container.NewHBox(
+		layout.NewSpacer(),
+		container.NewVBox(
+			layout.NewSpacer(),
+			a.VolumeControl,
+			container.NewCenter(layout.NewSpacer(), a.loop),
+			layout.NewSpacer(),
+		),
+	)
 	return a
 }
 
@@ -31,6 +41,19 @@ func (a *AuxControls) CreateRenderer() fyne.WidgetRenderer {
 	return widget.NewSimpleRenderer(a.container)
 }
 
+func (a *AuxControls) OnChangeLoopMode(f func()) {
+	a.loop.OnTapped = f
+}
+
+func (a *AuxControls) SetLoopMode(mode string) {
+	if mode == "all" {
+		a.loop.Importance = widget.HighImportance
+	} else {
+		a.loop.Importance = widget.MediumImportance
+	}
+	a.loop.Refresh()
+}
+
 type volumeSlider struct {
 	widget.Slider
 

ui/widgets/playercontrols.go

@@ -10,10 +10,6 @@ import (
 	"fyne.io/fyne/v2/widget"
 )
 
-var (
-	themedResReplay = theme.NewThemedResource(theme.MediaReplayIcon())
-)
-
 // TrackPosSlider is a custom slider that doesn't trigger
 // the seek action until drag end.
 type TrackPosSlider struct {
@@ -66,7 +62,6 @@ type PlayerControls struct {
 	prev           *widget.Button
 	playpause      *widget.Button
 	next           *widget.Button
-	loop           *widget.Button
 	container      *fyne.Container
 
 	totalTime float64
@@ -110,9 +105,8 @@ func NewPlayerControls() *PlayerControls {
 	pc.prev = widget.NewButtonWithIcon("", theme.MediaSkipPreviousIcon(), func() {})
 	pc.next = widget.NewButtonWithIcon("", theme.MediaSkipNextIcon(), func() {})
 	pc.playpause = widget.NewButtonWithIcon("", theme.MediaPlayIcon(), func() {})
-	pc.loop = widget.NewButtonWithIcon("", themedResReplay, func() {})
 
-	buttons := container.NewHBox(pc.prev, pc.playpause, pc.next, pc.loop)
+	buttons := container.NewHBox(pc.prev, pc.playpause, pc.next)
 	b := container.New(layout.NewCenterLayout(), buttons)
 
 	c := container.NewBorder(nil, nil, pc.curTimeLabel, pc.totalTimeLabel, pc.slider)
@@ -145,20 +139,6 @@ func (pc *PlayerControls) SetPlaying(playing bool) {
 	}
 }
 
-func (pc *PlayerControls) OnChangeLoopMode(f func()) {
-	pc.loop.OnTapped = f
-}
-
-func (pc *PlayerControls) SetLoopMode(mode string) {
-	if mode == "all" {
-		themedResReplay.ColorName = theme.ColorNameSuccess
-		pc.loop.SetIcon(themedResReplay)
-	} else {
-		themedResReplay.ColorName = ""
-		pc.loop.SetIcon(themedResReplay)
-	}
-}
-
 func (pc *PlayerControls) UpdatePlayTime(curTime, totalTime float64) {
 	pc.totalTime = totalTime
 	v := 0.0