ui audio player bassicly finished (all we need are volume bar sprites)

source/funkin/backend/utils/FlxClipSprite.hx

@@ -0,0 +1,16 @@
+package funkin.backend.utils;
+
+import flixel.math.FlxRect;
+import flixel.FlxSprite;
+
+class FlxClipSprite extends FlxSprite {
+    override function set_clipRect(rect:FlxRect):FlxRect
+    {
+        clipRect = rect;
+
+        if (frames != null)
+            frame = frames.frames[animation.frameIndex];
+
+        return rect;
+    }
+}

source/funkin/editors/ui/UIAudioPlayer.hx

@@ -1,5 +1,6 @@
 package funkin.editors.ui;
 
+import flixel.math.FlxRect;
 import flixel.util.FlxColor;
 import flixel.ui.FlxBar;
 import openfl.geom.Rectangle;
@@ -16,10 +17,15 @@ class UIAudioPlayer extends UIButton {
 	public var bytes:Bytes;
 
 	public var playingSprite:FlxSprite;
-	public var timeBar:FlxBar;
 	public var timeText:UIText;
 
-	public var timeBarSpr:UISprite; // VISUAL FEEDBACK !11!11!
+	public var timeBar:FlxBar;
+	public var timeBarPlayer:FlxClipSprite;
+	public var timeBarSpr:UISprite;
+
+	public var volumeIcon:FlxSprite;
+	public var volumeBar:FlxBar;
+	public var volumeBarSpr:UISprite;
 
 	public function new(x:Float, y:Float, bytes:Bytes) {
 		sound = FlxG.sound.load(Sound.fromAudioBuffer(AudioBuffer.fromBytes(bytes)));
@@ -28,7 +34,6 @@ class UIAudioPlayer extends UIButton {
 			if (sound.playing) sound.pause();
 			else sound.play(false, sound.time);
 		}, 58 - 16, 58 - 16);
-		trace(x,y);
 
 		playingSprite = new FlxSprite(x + ((58 - 16)/2) - 8, y + ((58 - 16)/2) - 8).loadGraphic(Paths.image('editors/charter/audio-buttons'), true, 16, 16);
 		playingSprite.animation.add("paused", [0]);
@@ -44,47 +49,80 @@ class UIAudioPlayer extends UIButton {
 		timeBar = new FlxBar(x + bWidth + 8, y + (58 - 16) - ((58 - 16)/3) - 4, LEFT_TO_RIGHT, 202, Std.int((58 - 16)/3), sound, "time", 0, sound.length);
 		timeBar.createImageBar(Paths.image('editors/charter/audio-time-empty'), Paths.image('editors/charter/audio-time-full'));
 		timeBar.numDivisions = timeBar.barWidth;
+		timeBar.unbounded = true;
 		members.push(timeBar);
 
-		timeBarSpr = cast new UISprite(timeBar.x, timeBar.y).makeGraphic(timeBar.barWidth, timeBar.barHeight, 0xFFFFFF);
-		timeBarSpr.alpha = 0;
+		timeBarPlayer = cast new FlxClipSprite(timeBar.x, timeBar.y).loadGraphic(Paths.image('editors/charter/audio-time-empty'));
+		timeBarPlayer.colorTransform.color = 0x440364;
+		timeBarPlayer.scale.y = (timeBarPlayer.frameHeight + 2) / timeBarPlayer.frameHeight;
+		members.push(timeBarPlayer);
+
+		timeBarSpr = cast new UISprite(timeBar.x, timeBar.y).makeSolid(timeBar.barWidth, timeBar.barHeight, 0x00FFFFFF);
+		timeBarSpr.cursor = BUTTON;
 		members.push(timeBarSpr);
+
+		volumeBar = new FlxBar(timeBar.x + timeBar.barWidth - 56, y + 6, LEFT_TO_RIGHT, 56, 10, sound, "volume", 0, 1);
+		members.push(volumeBar);
+
+		volumeBarSpr = cast new UISprite(volumeBar.x, volumeBar.y).makeSolid(volumeBar.barWidth, volumeBar.barHeight, 0x00FFFFFF);
+		volumeBarSpr.cursor = BUTTON;
+		members.push(volumeBarSpr);
+
+		volumeIcon = new FlxSprite(volumeBar.x - 12 - 8, volumeBar.y-1).loadGraphic(Paths.image('editors/charter/audio-icon'));
+		volumeIcon.antialiasing = false;
+		members.push(volumeIcon);
 	}
 
-	public var dragging:Bool = false;
+	public var draggingObj:FlxBar = null;
 	public var wasPlaying:Bool = false;
 
+	public var nextPlayerColor:FlxColor = 0x440364;
+
 	public override function update(elapsed:Float) {
 		super.update(elapsed);
 
 		if (sound != null) {
 			playingSprite.animation.play(sound.playing ? "playing" : "paused");
 			timeText.text = '${FlxStringUtil.formatTime(sound.time/1000, true)} / ${FlxStringUtil.formatTime(sound.length/1000)}';
+
+			if(timeBarPlayer.clipRect == null) 
+				timeBarPlayer.clipRect = new FlxRect(0, 0, timeBarPlayer.frameWidth, timeBarPlayer.frameHeight);
+
+			timeBarPlayer.clipRect.x = timeBarPlayer.frameWidth * (sound.time/sound.length);
+			timeBarPlayer.clipRect.width = 2;
+
+			timeBarPlayer.clipRect = timeBarPlayer.clipRect;
+
+			nextPlayerColor = sound.playing ? 0x732D95 : 0x440364;
+			timeBarPlayer.colorTransform.color = FlxColor.interpolate(timeBarPlayer.colorTransform.color, nextPlayerColor, 1/14);
 		}
 
 		var mousePos = FlxG.mouse.getScreenPosition(__lastDrawCameras[0], FlxPoint.get());
-		var spritePos:FlxPoint = timeBar.getScreenPosition(FlxPoint.get(), __lastDrawCameras[0]);
 
-		if (((mousePos.x > (spritePos.x)) && (mousePos.x < (spritePos.x) + timeBar.barWidth)) 
-			&& ((mousePos.y > (spritePos.y)) && (mousePos.y < (spritePos.y) + timeBar.barHeight))) {
-			timeBarSpr.cursor = BUTTON;
-			timeBarSpr.alpha = 0.3;
-			if (FlxG.mouse.justPressed) {
-				dragging = true;
-				wasPlaying = sound.playing;
-			}
+		for (sprite in [timeBar, volumeBar]) {
+			var spritePos:FlxPoint = sprite.getScreenPosition(FlxPoint.get(), __lastDrawCameras[0]);
 
-			if (FlxG.mouse.pressed && dragging) {
-				if (sound.playing) sound.pause();
-				sound.time = FlxMath.remapToRange(mousePos.x - spritePos.x, 0, timeBar.barWidth, 0, sound.length);
+			if (((mousePos.x > (spritePos.x)) && (mousePos.x < (spritePos.x) + timeBar.barWidth)) 
+				&& ((mousePos.y > (spritePos.y)) && (mousePos.y < (spritePos.y) + timeBar.barHeight))) {
+				if (FlxG.mouse.justPressed) {
+					draggingObj = sprite;
+					wasPlaying = draggingObj == timeBar ? sound.playing : false;
+				}
+	
+				if (FlxG.mouse.pressed) {
+					if (draggingObj == timeBar) {
+						if (sound.playing) sound.pause();
+						sound.time = FlxMath.remapToRange(mousePos.x - spritePos.x, 0, timeBar.barWidth, 0, sound.length);
+					} else if (draggingObj == volumeBar) {
+						sound.volume = FlxMath.remapToRange(mousePos.x - spritePos.x, 0, volumeBar.barWidth, 0, 1);
+					}
+				}
 			}
-		} else {
-			timeBarSpr.cursor = ARROW;
-			timeBarSpr.alpha = 0;
 		}
 
-		if (FlxG.mouse.released && dragging && wasPlaying) {
-			sound.play(dragging = wasPlaying = false, sound.time);
+		if (FlxG.mouse.released && draggingObj == timeBar && wasPlaying) {
+			draggingObj = null;
+			sound.play(wasPlaying = false, sound.time);
 		}
 	}