Add option to disable album cover animation in the player. Closes #1185

conf/configuration.go

@@ -46,6 +46,7 @@ type configOptions struct {
 	EnableStarRating       bool
 	EnableUserEditing      bool
 	DefaultTheme           string
+	EnableCoverAnimation   bool
 	GATrackingID           string
 	EnableLogRedacting     bool
 	AuthRequestLimit       int
@@ -201,6 +202,7 @@ func init() {
 	viper.SetDefault("enablestarrating", true)
 	viper.SetDefault("enableuserediting", true)
 	viper.SetDefault("defaulttheme", "Dark")
+	viper.SetDefault("enablecoveranimation", true)
 	viper.SetDefault("gatrackingid", "")
 	viper.SetDefault("enablelogredacting", true)
 	viper.SetDefault("authrequestlimit", 5)

server/serve_index.go

@@ -38,6 +38,7 @@ func serveIndex(ds model.DataStore, fs fs.FS) http.HandlerFunc {
 			"enableFavourites":        conf.Server.EnableFavourites,
 			"enableStarRating":        conf.Server.EnableStarRating,
 			"defaultTheme":            conf.Server.DefaultTheme,
+			"enableCoverAnimation":    conf.Server.EnableCoverAnimation,
 			"gaTrackingId":            conf.Server.GATrackingID,
 			"losslessFormats":         strings.ToUpper(strings.Join(consts.LosslessFormats, ",")),
 			"devActivityPanel":        conf.Server.DevActivityPanel,

server/serve_index_test.go

@@ -148,6 +148,17 @@ var _ = Describe("serveIndex", func() {
 		Expect(config).To(HaveKeyWithValue("defaultTheme", "Light"))
 	})
 
+	It("sets the enableCoverAnimation", func() {
+		conf.Server.EnableCoverAnimation = true
+		r := httptest.NewRequest("GET", "/index.html", nil)
+		w := httptest.NewRecorder()
+
+		serveIndex(ds, fs)(w, r)
+
+		config := extractAppConfig(w.Body.String())
+		Expect(config).To(HaveKeyWithValue("enableCoverAnimation", true))
+	})
+
 	It("sets the gaTrackingId", func() {
 		conf.Server.GATrackingID = "UA-12345"
 		r := httptest.NewRequest("GET", "/index.html", nil)

ui/src/audioplayer/Player.js

@@ -62,6 +62,10 @@ const useStyle = makeStyles(
       '& .play-mode-title': {
         'pointer-events': 'none',
       },
+      '& .music-player-panel .panel-content div.img-rotate': {
+        'animation-duration': (props) =>
+          props.enableCoverAnimation ? null : '0s',
+      },
     },
     artistAlbum: {
       marginTop: '2px',
@@ -117,7 +121,10 @@ const Player = () => {
   )
 
   const visible = authenticated && queue.queue.length > 0
-  const classes = useStyle({ visible })
+  const classes = useStyle({
+    visible,
+    enableCoverAnimation: config.enableCoverAnimation,
+  })
   // Match the medium breakpoint defined in the material-ui theme
   // See https://material-ui.com/customization/breakpoints/#breakpoints
   const isDesktop = useMediaQuery('(min-width:810px)')

ui/src/config.js

@@ -21,6 +21,7 @@ const defaultConfig = {
   devEnableShare: true,
   devEnableScrobble: true,
   lastFMApiKey: '9b94a5515ea66b2da3ec03c12300327e',
+  enableCoverAnimation: false,
 }
 
 let config