Music player controls (#9087)

* Music controls cleanup

* Music controls cleanup - assets

* Music controls cleanup - fix incorrect attribution

android/assets/game.atlas

@@ -69,70 +69,70 @@ EmojiIcons/Food
   index: -1
 EmojiIcons/Gold
   rotate: false
-  xy: 436, 186
+  xy: 436, 128
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
   index: -1
 EmojiIcons/Great Artist
   rotate: false
-  xy: 436, 128
+  xy: 436, 70
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
   index: -1
 EmojiIcons/Great Engineer
   rotate: false
-  xy: 436, 70
+  xy: 436, 12
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
   index: -1
 EmojiIcons/Great General
   rotate: false
-  xy: 436, 12
+  xy: 494, 534
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
   index: -1
 EmojiIcons/Great Merchant
   rotate: false
-  xy: 494, 534
+  xy: 494, 476
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
   index: -1
 EmojiIcons/Great Scientist
   rotate: false
-  xy: 494, 476
+  xy: 494, 418
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
   index: -1
 EmojiIcons/Happiness
   rotate: false
-  xy: 494, 418
+  xy: 494, 360
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
   index: -1
 EmojiIcons/Production
   rotate: false
-  xy: 494, 70
+  xy: 527, 607
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
   index: -1
 EmojiIcons/Science
   rotate: false
-  xy: 552, 549
+  xy: 552, 433
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
   index: -1
 EmojiIcons/Turn
   rotate: false
-  xy: 552, 433
+  xy: 552, 317
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
@@ -627,6 +627,13 @@ OtherIcons/Fire
   orig: 115, 115
   offset: 0, 0
   index: -1
+OtherIcons/ForwardArrow
+  rotate: false
+  xy: 436, 186
+  size: 50, 50
+  orig: 50, 50
+  offset: 0, 0
+  index: -1
 OtherIcons/Hexagon
   rotate: false
   xy: 4, 1791
@@ -643,7 +650,7 @@ OtherIcons/HexagonOutline
   index: -1
 OtherIcons/Improvements
   rotate: false
-  xy: 494, 360
+  xy: 494, 302
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
@@ -657,7 +664,7 @@ OtherIcons/Keyboard
   index: -1
 OtherIcons/Link
   rotate: false
-  xy: 494, 244
+  xy: 494, 186
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
@@ -692,7 +699,7 @@ NotificationIcons/Working
   index: -1
 OtherIcons/LockSmall
   rotate: false
-  xy: 494, 186
+  xy: 494, 128
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
@@ -734,7 +741,7 @@ OtherIcons/NationSwap
   index: -1
 OtherIcons/Nations
   rotate: false
-  xy: 494, 128
+  xy: 494, 70
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
@@ -760,6 +767,13 @@ OtherIcons/Options
   orig: 100, 100
   offset: 0, 0
   index: -1
+OtherIcons/Pause
+  rotate: false
+  xy: 494, 12
+  size: 50, 50
+  orig: 50, 50
+  offset: 0, 0
+  index: -1
 OtherIcons/Pencil
   rotate: false
   xy: 406, 1421
@@ -1266,7 +1280,7 @@ StatIcons/Happiness
   index: -1
 StatIcons/InterceptRange
   rotate: false
-  xy: 494, 302
+  xy: 494, 244
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
@@ -1294,14 +1308,14 @@ TileIcons/Worked
   index: -1
 StatIcons/Range
   rotate: false
-  xy: 494, 12
+  xy: 552, 549
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
   index: -1
 StatIcons/RangedStrength
   rotate: false
-  xy: 527, 607
+  xy: 552, 491
   size: 50, 50
   orig: 50, 50
   offset: 0, 0
@@ -1329,7 +1343,7 @@ StatIcons/Specialist
   index: -1
 StatIcons/Strength
   rotate: false
-  xy: 552, 491
+  xy: 552, 375
   size: 50, 50
   orig: 50, 50
   offset: 0, 0

core/src/com/unciv/ui/components/extensions/Scene2dExtensions.kt

@@ -16,6 +16,7 @@ import com.badlogic.gdx.scenes.scene2d.ui.Button.ButtonStyle
 import com.badlogic.gdx.scenes.scene2d.ui.Cell
 import com.badlogic.gdx.scenes.scene2d.ui.CheckBox
 import com.badlogic.gdx.scenes.scene2d.ui.Image
+import com.badlogic.gdx.scenes.scene2d.ui.ImageButton
 import com.badlogic.gdx.scenes.scene2d.ui.Label
 import com.badlogic.gdx.scenes.scene2d.ui.Table
 import com.badlogic.gdx.scenes.scene2d.ui.TextButton
@@ -473,6 +474,18 @@ fun String.toTextButton(style: TextButtonStyle? = null): TextButton {
     return if (style == null) TextButton(text, BaseScreen.skin) else TextButton(text, style)
 }
 
+/** Convert a texture path into an Image, make an ImageButton with a [tinted][overColor]
+ *  hover version of the image from it, then [surroundWithCircle] it. */
+fun String.toImageButton(iconSize: Float, circleSize: Float, circleColor: Color, overColor: Color): Group {
+    val style = ImageButton.ImageButtonStyle()
+    val image = ImageGetter.getDrawable(this)
+    style.imageUp = image
+    style.imageOver = image.tint(overColor)
+    val button = ImageButton(style)
+    button.setSize(iconSize, iconSize)
+    return button.surroundWithCircle( circleSize, false, circleColor)
+}
+
 /** Translate a [String] and make a [Label] widget from it */
 fun String.toLabel() = Label(this.tr(), BaseScreen.skin)
 /** Make a [Label] widget containing this [Int] as text */

core/src/com/unciv/ui/popups/options/SoundTab.kt

@@ -15,6 +15,7 @@ import com.unciv.ui.components.extensions.disable
 import com.unciv.ui.components.extensions.onClick
 import com.unciv.ui.components.extensions.toLabel
 import com.unciv.ui.components.extensions.toTextButton
+import com.unciv.ui.components.extensions.toImageButton
 import com.unciv.utils.concurrency.Concurrency
 import com.unciv.utils.concurrency.launchOnGLThread
 import kotlin.math.floor
@@ -32,25 +33,13 @@ fun soundTab(
     addCitySoundsVolumeSlider(this, settings)
 
     if (UncivGame.Current.musicController.isMusicAvailable()) {
-        addMusicVolumeSlider(this, settings, music)
+        addMusicControls(this, settings, music)
-        addMusicPauseSlider(this, settings, music)
-        addMusicCurrentlyPlaying(this, music)
-        addButton(this, "Pause", action = { music.pause(0.5f) })
-        addButton(this, "Resume", action = { music.resume(0.5f) })
-        addButton(this, "Skip", action = { music.chooseTrack(flags = MusicTrackChooserFlags.none) })
-        row()
     }
 
     if (!UncivGame.Current.musicController.isDefaultFileAvailable())
         addDownloadMusic(this, optionsPopup)
 }
 
-private fun addButton(table: Table, text: String, action: () -> Unit) {
-    val button = text.toTextButton()
-    table.add(button)
-    button.onClick { action.invoke() }
-}
-
 private fun addDownloadMusic(table: Table, optionsPopup: OptionsPopup) {
     val downloadMusicButton = "Download music".toTextButton()
     table.add(downloadMusicButton).colspan(2).row()
@@ -80,7 +69,6 @@ private fun addDownloadMusic(table: Table, optionsPopup: OptionsPopup) {
     }
 }
 
-
 private fun addSoundEffectsVolumeSlider(table: Table, settings: GameSettings) {
     table.add("Sound effects volume".tr()).left().fillX()
 
@@ -107,7 +95,7 @@ private fun addCitySoundsVolumeSlider(table: Table, settings: GameSettings) {
     table.add(citySoundVolumeSlider).pad(5f).row()
 }
 
-fun addMusicVolumeSlider(table: Table, settings: GameSettings, music: MusicController) {
+private fun addMusicVolumeSlider(table: Table, settings: GameSettings, music: MusicController) {
     table.add("Music volume".tr()).left().fillX()
 
     val musicVolumeSlider = UncivSlider(
@@ -125,7 +113,7 @@ fun addMusicVolumeSlider(table: Table, settings: GameSettings, music: MusicContr
     table.add(musicVolumeSlider).pad(5f).row()
 }
 
-fun addMusicPauseSlider(table: Table, settings: GameSettings, music: MusicController) {
+private fun addMusicPauseSlider(table: Table, settings: GameSettings, music: MusicController) {
     // map to/from 0-1-2..10-12-14..30-35-40..60-75-90-105-120
     fun posToLength(pos: Float): Float = when (pos) {
         in 0f..10f -> pos
@@ -161,7 +149,7 @@ fun addMusicPauseSlider(table: Table, settings: GameSettings, music: MusicContro
     table.add(pauseLengthSlider).pad(5f).row()
 }
 
-fun addMusicCurrentlyPlaying(table: Table, music: MusicController) {
+private fun addMusicCurrentlyPlaying(table: Table, music: MusicController) {
     val label = WrappableLabel("", table.width - 10f, Color(-0x2f5001), 16)
     label.wrap = true
     table.add(label).padTop(20f).colspan(2).fillX().row()
@@ -170,7 +158,23 @@ fun addMusicCurrentlyPlaying(table: Table, music: MusicController) {
             label.setText("Currently playing: [$it]".tr())
         }
     }
-    label.onClick(UncivSound.Silent) {
+}
-        music.chooseTrack(flags = MusicTrackChooserFlags.none)
+
-    }
+private fun addSimplePlayerControls(table: Table, music: MusicController) {
+    fun String.toImageButton(overColor: Color) = toImageButton(30f, 30f, Color.CLEAR, overColor)
+    table.add(Table().apply {
+        defaults().space(25f)
+        add("OtherIcons/Pause".toImageButton(Color.GOLD).onClick { music.pause(0.5f) })
+        add("OtherIcons/ForwardArrow".toImageButton(Color.LIME).onClick { music.resume(0.5f) })
+        add("OtherIcons/Loading".toImageButton(Color.VIOLET).onClick { music.chooseTrack(flags = MusicTrackChooserFlags.none) })
+    }).colspan(2).center().row()
+}
+
+/** Adds music volume/pause sliders, currently playing label and player controls to a [table] */
+// public - used here and in WorldScreenMenuPopup
+fun addMusicControls(table: Table, settings: GameSettings, music: MusicController) {
+    addMusicVolumeSlider(table, settings, music)
+    addMusicPauseSlider(table, settings, music)
+    addMusicCurrentlyPlaying(table, music)
+    addSimplePlayerControls(table, music)
 }

core/src/com/unciv/ui/screens/newgamescreen/GameOptionsTable.kt

@@ -29,8 +29,8 @@ import com.unciv.ui.components.extensions.onActivation
 import com.unciv.ui.components.extensions.onChange
 import com.unciv.ui.components.extensions.onClick
 import com.unciv.ui.components.extensions.pad
-import com.unciv.ui.components.extensions.surroundWithCircle
 import com.unciv.ui.components.extensions.toCheckBox
+import com.unciv.ui.components.extensions.toImageButton
 import com.unciv.ui.components.extensions.toLabel
 import com.unciv.ui.components.extensions.toTextButton
 
@@ -547,16 +547,8 @@ private class RandomNationPickerPopup(
         }
     }
 
-    private fun String.toImageButton(overColor: Color): Group {
+    private fun String.toImageButton(overColor: Color) =
-        val style = ImageButton.ImageButtonStyle()
+            toImageButton(buttonsIconSize, buttonsCircleSize, buttonsBackColor, overColor)
-        val image = ImageGetter.getDrawable(this)
-        style.imageUp = image
-        style.imageOver = image.tint(overColor)
-        val button = ImageButton(style)
-        button.setSize(buttonsIconSize, buttonsIconSize)
-
-        return button.surroundWithCircle(buttonsCircleSize, false, buttonsBackColor)
-    }
 
     private fun addNationToPool(nation: Nation) {
         availableNations.remove(nation.name)

core/src/com/unciv/ui/screens/newgamescreen/PlayerPickerTable.kt

@@ -2,9 +2,7 @@ package com.unciv.ui.screens.newgamescreen
 
 import com.badlogic.gdx.Gdx
 import com.badlogic.gdx.graphics.Color
-import com.badlogic.gdx.scenes.scene2d.Group
 import com.badlogic.gdx.scenes.scene2d.Touchable
-import com.badlogic.gdx.scenes.scene2d.ui.ImageButton
 import com.badlogic.gdx.scenes.scene2d.ui.Table
 import com.badlogic.gdx.utils.Align
 import com.unciv.Constants
@@ -24,10 +22,11 @@ import com.unciv.ui.screens.multiplayerscreens.FriendPickerList
 import com.unciv.ui.screens.pickerscreens.PickerPane
 import com.unciv.ui.screens.pickerscreens.PickerScreen
 import com.unciv.ui.popups.Popup
-import com.unciv.ui.components.*
+import com.unciv.ui.components.UncivTextField
+import com.unciv.ui.components.KeyCharAndCode
 import com.unciv.ui.components.extensions.*
 import com.unciv.ui.screens.basescreen.BaseScreen
-import java.util.*
+import java.util.UUID
 import com.unciv.ui.components.AutoScrollPane as ScrollPane
 
 /**
@@ -414,16 +413,8 @@ private class NationPickerPopup(
         nationDetailsTable.onClick { returnSelected() }
     }
 
-    private fun String.toImageButton(overColor: Color): Group {
+    private fun String.toImageButton(overColor: Color) =
-        val style = ImageButton.ImageButtonStyle()
+            toImageButton(buttonsIconSize, buttonsCircleSize, buttonsBackColor, overColor)
-        val image = ImageGetter.getDrawable(this)
-        style.imageUp = image
-        style.imageOver = image.tint(overColor)
-        val button = ImageButton(style)
-        button.setSize(buttonsIconSize, buttonsIconSize)
-
-        return button.surroundWithCircle(buttonsCircleSize, false, buttonsBackColor)
-    }
 
     private fun setNationDetails(nation: Nation) {
         nationDetailsTable.clearChildren()  // .clear() also clears listeners!

core/src/com/unciv/ui/screens/worldscreen/mainmenu/WorldScreenMenuPopup.kt

@@ -3,12 +3,9 @@ package com.unciv.ui.screens.worldscreen.mainmenu
 import com.badlogic.gdx.Gdx
 import com.unciv.UncivGame
 import com.unciv.models.metadata.GameSetupInfo
-import com.unciv.ui.audio.MusicTrackChooserFlags
 import com.unciv.ui.screens.civilopediascreen.CivilopediaScreen
 import com.unciv.ui.screens.newgamescreen.NewGameScreen
-import com.unciv.ui.popups.options.addMusicCurrentlyPlaying
+import com.unciv.ui.popups.options.addMusicControls
-import com.unciv.ui.popups.options.addMusicPauseSlider
-import com.unciv.ui.popups.options.addMusicVolumeSlider
 import com.unciv.ui.popups.Popup
 import com.unciv.ui.screens.savescreens.LoadGameScreen
 import com.unciv.ui.screens.savescreens.SaveGameScreen
@@ -92,16 +89,7 @@ class WorldScreenMusicButton(val worldScreen: WorldScreen) : Popup(worldScreen)
         val settings = UncivGame.Current.settings
 
         defaults().fillX()
-        addMusicVolumeSlider(this, settings, musicController)
+        addMusicControls(this, settings, musicController)
-        row()
+        addCloseButton().colspan(2)
-        addMusicPauseSlider(this , settings, musicController)
-        row()
-        addMusicCurrentlyPlaying(this, musicController)
-        row()
-        addButton("Pause", action = { musicController.pause(0.5f) })
-        addButton("Resume", action = { musicController.resume(0.5f) })
-        addButton("Skip", action = { musicController.chooseTrack(flags = MusicTrackChooserFlags.none) }).row()
-
-        addCloseButton()
     }
 }

docs/Credits.md

@@ -671,7 +671,7 @@ Unless otherwise specified, all the following are from [the Noun Project](https:
 - [Sleep](https://thenounproject.com/search/?q=sleep&i=1760085) By Saeful Muslim
 - [Clockwise](https://thenounproject.com/icon/clockwise-184528/) By Universal Icons (Louis Dawson) for "Wait" icon. The original work has been slightly modified.
 - [Banner](https://thenounproject.com/term/banner/866282/) By Emir Palavan for embarked units
-- [Arrow](https://thenounproject.com/term/arrow/18123/) By uzeir syarief for moving between idle units
+- [Arrow](https://thenounproject.com/icon/arrow-2032227/) By uzeir syarief for moving between idle units, expanders, etc.
 - [Replace](https://thenounproject.com/search/?q=replace&i=17858) By Mike Rowe for switching tiles between cities
 - [Resistance](https://thenounproject.com/term/revolution/1315305/) By HeadsOfBirds
 - [Viking Hat](https://thenounproject.com/search/?q=pillage&i=185405) By my name is mud for pillaging improvements