From 84539808d713592393d12872409fc8fb243b477d Mon Sep 17 00:00:00 2001
From: lunarcleint <88809950+lunarcleint@users.noreply.github.com>
Date: Mon, 14 Aug 2023 18:45:28 -0700
Subject: [PATCH] ui audio player bassicly finished (all we need are volume bar
 sprites)

---
 assets/images/editors/charter/audio-icon.png  | Bin 0 -> 200 bytes
 .../editors/charter/audio-time-empty.png      | Bin 450 -> 347 bytes
 source/funkin/backend/utils/FlxClipSprite.hx  |  16 ++++
 source/funkin/editors/ui/UIAudioPlayer.hx     |  84 +++++++++++++-----
 4 files changed, 77 insertions(+), 23 deletions(-)
 create mode 100644 assets/images/editors/charter/audio-icon.png
 create mode 100644 source/funkin/backend/utils/FlxClipSprite.hx

diff --git a/assets/images/editors/charter/audio-icon.png b/assets/images/editors/charter/audio-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..2bc0a4d0da9ec57f777f335981d2a34eeafa8111
GIT binary patch
literal 200
zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k#^NA%Cx&(BWL^R}O`a}}AsQ3s
zPQ1v=Y{=p4yS>42(qH?NQXVNh-xqtmn-o`?`?vJ~zc)k7iMu<$8%<{Tu)~;t@l4OO
zA|@5fGfSs%@;u)3aPqe)st=?8^0^#Y>lymrJK(DLg=+WrwUXPe=_yJc{aGT|81;J2
y#3daZCm(yIsimpic=AqU;`V=wo(8H5FwFaTB~5ibw}A-IH4L7velF{r5}E+7uT8=L

literal 0
HcmV?d00001

diff --git a/assets/images/editors/charter/audio-time-empty.png b/assets/images/editors/charter/audio-time-empty.png
index 24157874f2a64485d05c493bbc77ece4dc3c4d65..d5a36361f3ece19d51f36de1ae9440157a67b07c 100644
GIT binary patch
delta 307
zcmV-30nGlw1KR?SF@F_FL_t(&f$iG8ii1EDhT-oFnsz|6NS($it+$ZG>&<4bBe{&&
z2o~{Y&e_5Y>n_W-2J$^%AvOd0&Wxx4Kvh+zwr$VOIjAa#XtvpGj@Rq;Q}+A)VHk!>
z(=;$MnAzH6BU+t^Ktzz|IlT9^lx1o6`yHyvP>7ylD9$+)MSp>097h0vnQ`0o0yt5v
zOGE(7_rW;_00<!<QB}l)D+;~4`233qR23qEX_}D4I2Z}hx7b4LA_*Zd6rx|2TQF6f
zSCl2jLiCfW!Z8e@|Ct$FJc&yU5zS%~s*2>V3q<d3*}^!ENU|)e0i3(8;|o2}Q~cnV
zrYXGlM*)D{ZY+0rJRX<6@7Eq5(MyQ`J#M$#`gXg0d;$3Xq?I<pxaR->002ovPDHLk
FV1iE8lmq|(

delta 411
zcmV;M0c8H$0>T53F@Iu7L_t(&1?`&8s)A4$#J{!wG7~{8NkkAqm-+<4rJa;pmEQjy
zzL<0AlJ^B#oLLN*x@nr<ne(M0A~FoaZQC|&nnvrorsx4PP}ll=KDFz*A21>~7{^iL
zIM&nYq)`-6^uYQIfCVrCHc%w8uB!p$csyzthI%+0D0*Oh27kZ;m;f-#vZ$10X+GdW
z5CqhhJ@9>BsqcC4$pDxDC{<Od6h&dk!43F<JkO)(f%O>x3t$4R0!HL|y_zi-A>jhS
zMRK13Fo9M9BXYT1%zhLmxvopm17^T=O``%7%<OrdtDMj09Vm|DC`Au!&j3mT<pEH@
zh-6ttP`Eg7aew@mflpAt$R8-E8C<k|CE@pHn<4{X;l1@r(^Td0c$h}PNzN&p(GU=7
zKcmd^tkSmat?zpS%lj{4Kts_3n==3wFrR>pvMhgJW5L1wem9To@z|cC2exM*NfMo=
zNl_$t)$0Y96$`8sUwqF1000hUSV?A0O#mtY000O802BZK0002eQ<DGy002ovPDHLk
FV1k$Lw4ML}

diff --git a/source/funkin/backend/utils/FlxClipSprite.hx b/source/funkin/backend/utils/FlxClipSprite.hx
new file mode 100644
index 00000000..916af63b
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/source/funkin/editors/ui/UIAudioPlayer.hx b/source/funkin/editors/ui/UIAudioPlayer.hx
index a63404ab..9c0275a9 100644
--- a/source/funkin/editors/ui/UIAudioPlayer.hx
+++ b/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);
 		}
 	}