Audio audio-volume and audio-pitch css properties (#109)

* wip: added audio-volume and audio-pitch css properties

* fix: feedback after testing in the editor

* fix: more testing in the editor

* fix(audio): compound form

* dont store volume and pitch in state

---------

Co-authored-by: Gokhan Kurt <[email protected]>

Author: ProGM

Editor/Renderer/EditorContext.cs

@@ -99,7 +99,7 @@ protected override IReactComponent CreateComponentInternal(string tag, string te
             return res;
         }
 
-        public override void PlayAudio(AudioClip clip)
+        public override void PlayAudio(AudioClip clip, float volume, float pitch)
         {
             EditorSFX.PlayClip(clip);
         }

Runtime/Core/ReactContext.cs

@@ -168,7 +168,7 @@ public virtual ScriptSource CreateStaticScript(string path)
             return src;
         }
 
-        public abstract void PlayAudio(AudioClip clip);
+        public abstract void PlayAudio(AudioClip clip, float volume, float pitch);
 
         public void Start(Action afterStart = null)
         {

Runtime/Frameworks/Noop/NoopContext.cs

@@ -67,6 +67,6 @@ protected override IReactComponent CreatePseudoComponentInternal(string tag)
             return tc;
         }
 
-        public override void PlayAudio(AudioClip clip) { }
+        public override void PlayAudio(AudioClip clip, float volume, float pitch) { }
     }
 }

Runtime/Frameworks/UGUI/General/UGUIContext.cs

@@ -155,10 +155,11 @@ protected override IReactComponent CreatePseudoComponentInternal(string tag)
             return tc;
         }
 
-        public override void PlayAudio(AudioClip clip)
+        public override void PlayAudio(AudioClip clip, float volume, float pitch)
         {
             var source = (Host as HostComponent).GetOrAddComponent<AudioSource>();
-            source.PlayOneShot(clip);
+            source.pitch = pitch;
+            source.PlayOneShot(clip, volume);
         }
 
         public GameObject CreateNativeObject(string name, params Type[] components)

Runtime/Frameworks/UIToolkit/General/ReactRendererUIToolkit.cs

@@ -40,10 +40,11 @@ protected override ReactContext CreateContext(ScriptSource script)
             return ctx;
         }
 
-        public void PlayAudio(AudioClip clip)
+        public void PlayAudio(AudioClip clip, float volume, float pitch)
         {
             var source = GetComponent<AudioSource>();
-            source.PlayOneShot(clip);
+            source.pitch = pitch;
+            source.PlayOneShot(clip, volume);
         }
 
         protected override IMediaProvider CreateMediaProvider()

Runtime/Frameworks/UIToolkit/General/UIToolkitContext.cs

@@ -12,7 +12,7 @@ public class UIToolkitContext : ReactContext
         public new class Options : ReactContext.Options
         {
             public VisualElement HostElement;
-            public Action<AudioClip> OnAudioPlayback;
+            public Action<AudioClip, float, float> OnAudioPlayback;
             public override bool CalculatesLayout => false;
         }
 
@@ -69,7 +69,7 @@ public static Dictionary<string, Func<string, string, UIToolkitContext, IReactCo
                 { "hover", typeof(HoverStateHandler) },
             };
 
-        private Action<AudioClip> OnAudioPlayback = null;
+        private Action<AudioClip, float, float> OnAudioPlayback = null;
 
         public VisualElement HostElement { get; }
 
@@ -115,9 +115,9 @@ protected override IReactComponent CreatePseudoComponentInternal(string tag)
             return tc;
         }
 
-        public override void PlayAudio(AudioClip clip)
+        public override void PlayAudio(AudioClip clip, float volume, float pitch)
         {
-            OnAudioPlayback?.Invoke(clip);
+            OnAudioPlayback?.Invoke(clip, volume, pitch);
         }
     }
 }

Runtime/Styling/NodeStyle.cs

@@ -122,6 +122,8 @@ public class NodeStyle
         public ICssValueList<AudioReference> audioClip => GetStyleValue(StyleProperties.audioClip);
         public ICssValueList<int> audioIterationCount => GetStyleValue(StyleProperties.audioIterationCount);
         public ICssValueList<float> audioDelay => GetStyleValue(StyleProperties.audioDelay);
+        public ICssValueList<float> audioVolume => GetStyleValue(StyleProperties.audioVolume);
+        public ICssValueList<float> audioPitch => GetStyleValue(StyleProperties.audioPitch);
 
         #endregion
 

Runtime/Styling/Properties/StyleProperties.cs

@@ -113,6 +113,8 @@ public static class StyleProperties
         public static readonly ValueListStyleProperty<AudioReference> audioClip = new ValueListStyleProperty<AudioReference>("audioClip");
         public static readonly ValueListStyleProperty<int> audioIterationCount = new ValueListStyleProperty<int>("audioIterationCount", 1);
         public static readonly ValueListStyleProperty<float> audioDelay = new ValueListStyleProperty<float>("audioDelay");
+        public static readonly ValueListStyleProperty<float> audioVolume = new ValueListStyleProperty<float>("audioVolume", 1f, true, baseConverter: AllConverters.PercentageConverter);
+        public static readonly ValueListStyleProperty<float> audioPitch = new ValueListStyleProperty<float>("audioPitch", 1f);
 
         public static readonly Dictionary<string, IStyleProperty> PropertyMap = new Dictionary<string, IStyleProperty>(StringComparer.InvariantCultureIgnoreCase)
         {
@@ -233,10 +235,14 @@ public static class StyleProperties
             { "audioClip", audioClip },
             { "audioDelay", audioDelay },
             { "audioIterationCount", audioIterationCount },
+            { "audioVolume", audioVolume },
+            { "audioPitch", audioPitch },
 
             { "audio-clip", audioClip },
             { "audio-delay", audioDelay },
             { "audio-iteration-count", audioIterationCount },
+            { "audio-volume", audioVolume },
+            { "audio-pitch", audioPitch },
 
             { "border-image-source", borderImageSource },
             { "border-image-slice", borderImageSlice },

Runtime/Styling/Shorthands/AudioShorthand.cs

@@ -22,6 +22,7 @@ protected override List<IStyleProperty> ModifyInternal(IDictionary<IStylePropert
             var clips = new IComputedValue[count];
             var delays = new IComputedValue[count];
             var iterations = new IComputedValue[count];
+            var volumes = new IComputedValue[count];
 
             for (int ci = 0; ci < count; ci++)
             {
@@ -33,6 +34,7 @@ protected override List<IStyleProperty> ModifyInternal(IDictionary<IStylePropert
                 var countSet = false;
                 var delaySet = false;
                 var clipSet = false;
+                var volumeSet = false;
 
                 for (int i = 0; i < splits.Count; i++)
                 {
@@ -49,6 +51,17 @@ protected override List<IStyleProperty> ModifyInternal(IDictionary<IStylePropert
                         continue;
                     }
 
+                    if (AllConverters.PercentageConverter.TryParse(split, out var fvolume))
+                    {
+                        if (!volumeSet)
+                        {
+                            volumes[ci] = fvolume;
+                            volumeSet = true;
+                        }
+                        else return null;
+                        continue;
+                    }
+
                     if (AllConverters.DurationConverter.TryParse(split, out var f))
                     {
                         if (!delaySet)
@@ -75,11 +88,13 @@ protected override List<IStyleProperty> ModifyInternal(IDictionary<IStylePropert
                 if (!clipSet) return null;
                 if (!delaySet) delays[ci] = new ComputedConstant(0f);
                 if (!countSet) iterations[ci] = new ComputedConstant(1);
+                if (!volumeSet) volumes[ci] = new ComputedConstant(1f);
             }
 
             collection[StyleProperties.audioClip] = StyleProperties.audioClip.Converter.FromList(clips);
             collection[StyleProperties.audioDelay] = StyleProperties.audioDelay.Converter.FromList(delays);
             collection[StyleProperties.audioIterationCount] = StyleProperties.audioIterationCount.Converter.FromList(iterations);
+            collection[StyleProperties.audioVolume] = StyleProperties.audioVolume.Converter.FromList(volumes);
 
             return ModifiedProperties;
         }

Runtime/Styling/StyleState.cs

@@ -652,8 +652,10 @@ private bool UpdateAudio()
             var clip = Current.audioClip;
             var delay = Current.audioDelay;
             var iterationCount = Current.audioIterationCount;
+            var volume = Current.audioVolume;
+            var pitch = Current.audioPitch;
 
-            var maxLength = Mathf.Max(delay.Count, iterationCount.Count, clip.Count);
+            var maxLength = Mathf.Max(delay.Count, iterationCount.Count, clip.Count, volume.Count, pitch.Count);
 
             if (audioStates == null) audioStates = new AudioState[maxLength];
 
@@ -664,12 +666,14 @@ private bool UpdateAudio()
 
                 var state = audioStates[i] = audioStates[i] ?? new AudioState();
 
+                var curVolume = volume.Get(i, 1);
+                var curPitch = pitch.Get(i, 1);
 
                 Action tryPlayClip = () => {
                     if (state.Loaded && state.ShouldStart)
                     {
                         state.ShouldStart = false;
-                        Context.PlayAudio(state.Clip);
+                        Context.PlayAudio(state.Clip, curVolume, curPitch);
                     }
                 };