react-native-waveform-player 0.0.1 → 1.0.0

package/android/src/main/java/com/audiowaveform/AudioWaveformViewManager.kt

@@ -0,0 +1,234 @@
+package com.audiowaveform
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.facebook.react.viewmanagers.AudioWaveformViewManagerDelegate
+import com.facebook.react.viewmanagers.AudioWaveformViewManagerInterface
+
+@ReactModule(name = AudioWaveformViewManager.NAME)
+class AudioWaveformViewManager(@Suppress("UNUSED_PARAMETER") context: ReactApplicationContext) :
+    SimpleViewManager<AudioWaveformView>(),
+    AudioWaveformViewManagerInterface<AudioWaveformView> {
+
+    private val mDelegate: ViewManagerDelegate<AudioWaveformView> =
+        AudioWaveformViewManagerDelegate(this)
+
+    override fun getDelegate(): ViewManagerDelegate<AudioWaveformView> = mDelegate
+
+    override fun getName(): String = NAME
+
+    public override fun createViewInstance(context: ThemedReactContext): AudioWaveformView {
+        val view = AudioWaveformView(context)
+        wireEvents(view)
+        return view
+    }
+
+    /** Hook the AudioWaveformView's callback closures up to the Fabric event dispatcher. */
+    private fun wireEvents(view: AudioWaveformView) {
+        view.onLoad = { durationMs ->
+            dispatchEvent(view, "topLoad") { putInt("durationMs", durationMs) }
+        }
+        view.onLoadError = { message ->
+            dispatchEvent(view, "topLoadError") { putString("message", message) }
+        }
+        view.onPlayerStateChange = { state, isPlaying, speed, error ->
+            dispatchEvent(view, "topPlayerStateChange") {
+                putString("state", state)
+                putBoolean("isPlaying", isPlaying)
+                putDouble("speed", speed.toDouble())
+                putString("error", error)
+            }
+        }
+        view.onTimeUpdate = { currentMs, durationMs ->
+            dispatchEvent(view, "topTimeUpdate") {
+                putInt("currentTimeMs", currentMs)
+                putInt("durationMs", durationMs)
+            }
+        }
+        view.onSeek = { positionMs ->
+            dispatchEvent(view, "topSeek") { putInt("positionMs", positionMs) }
+        }
+        view.onEnd = {
+            dispatchEvent(view, "topEnd") {}
+        }
+    }
+
+    private inline fun dispatchEvent(
+        view: AudioWaveformView,
+        eventName: String,
+        builder: WritableMap.() -> Unit
+    ) {
+        val context = view.context as? ThemedReactContext ?: return
+        val dispatcher: EventDispatcher? = UIManagerHelper.getEventDispatcherForReactTag(
+            context,
+            view.id
+        )
+        val surfaceId = UIManagerHelper.getSurfaceId(context)
+        val payload = Arguments.createMap()
+        payload.builder()
+        dispatcher?.dispatchEvent(
+            AudioWaveformEvent(surfaceId, view.id, eventName, payload)
+        )
+    }
+
+    // region Fabric prop setters (codegen interface) ----------------------------
+
+    override fun setSource(view: AudioWaveformView, value: ReadableMap?) {
+        val uri = value?.getString("uri") ?: ""
+        view.sourceUri = uri
+    }
+
+    override fun setSamples(view: AudioWaveformView, value: ReadableArray?) {
+        view.setSamplesFromArray(value)
+    }
+
+    override fun setPlayedBarColor(view: AudioWaveformView, value: Int?) {
+        view.playedBarColor = value ?: android.graphics.Color.WHITE
+    }
+
+    override fun setUnplayedBarColor(view: AudioWaveformView, value: Int?) {
+        view.unplayedBarColor =
+            value ?: android.graphics.Color.argb(128, 255, 255, 255)
+    }
+
+    override fun setBarWidth(view: AudioWaveformView, value: Float) {
+        view.barWidthDp = if (value > 0) value else 3f
+    }
+
+    override fun setBarGap(view: AudioWaveformView, value: Float) {
+        view.barGapDp = if (value >= 0) value else 2f
+    }
+
+    override fun setBarRadius(view: AudioWaveformView, value: Float) {
+        view.barRadiusDp = value  // -1 (or any negative) means "auto" = barWidth / 2
+    }
+
+    override fun setBarCount(view: AudioWaveformView, value: Int) {
+        view.barCountOverride = value.coerceAtLeast(0)
+    }
+
+    override fun setContainerBackgroundColor(view: AudioWaveformView, value: Int?) {
+        view.containerBackgroundColor =
+            value ?: android.graphics.Color.parseColor("#3478F6")
+    }
+
+    override fun setContainerBorderRadius(view: AudioWaveformView, value: Float) {
+        view.containerBorderRadiusDp = if (value >= 0) value else 16f
+    }
+
+    override fun setShowBackground(view: AudioWaveformView, value: Boolean) {
+        view.showBackground = value
+    }
+
+    override fun setShowPlayButton(view: AudioWaveformView, value: Boolean) {
+        view.showPlayButton = value
+    }
+
+    override fun setPlayButtonColor(view: AudioWaveformView, value: Int?) {
+        view.playButtonColor = value ?: android.graphics.Color.WHITE
+    }
+
+    override fun setShowTime(view: AudioWaveformView, value: Boolean) {
+        view.showTime = value
+    }
+
+    override fun setTimeColor(view: AudioWaveformView, value: Int?) {
+        view.timeColor = value ?: android.graphics.Color.WHITE
+    }
+
+    override fun setTimeMode(view: AudioWaveformView, value: String?) {
+        view.timeMode = value ?: "count-up"
+    }
+
+    override fun setShowSpeedControl(view: AudioWaveformView, value: Boolean) {
+        view.showSpeedControl = value
+    }
+
+    override fun setSpeedColor(view: AudioWaveformView, value: Int?) {
+        view.speedColor = value ?: android.graphics.Color.WHITE
+    }
+
+    override fun setSpeedBackgroundColor(view: AudioWaveformView, value: Int?) {
+        view.speedBackgroundColor =
+            value ?: android.graphics.Color.argb(64, 255, 255, 255)
+    }
+
+    override fun setSpeeds(view: AudioWaveformView, value: ReadableArray?) {
+        view.setSpeedsFromArray(value)
+    }
+
+    override fun setDefaultSpeed(view: AudioWaveformView, value: Float) {
+        view.defaultSpeed = if (value > 0) value else 1f
+    }
+
+    override fun setAutoPlay(view: AudioWaveformView, value: Boolean) {
+        view.autoPlay = value
+    }
+
+    override fun setInitialPositionMs(view: AudioWaveformView, value: Int) {
+        view.initialPositionMs = value.coerceAtLeast(0)
+    }
+
+    override fun setLoop(view: AudioWaveformView, value: Boolean) {
+        view.loopPlayback = value
+    }
+
+    override fun setPlayInBackground(view: AudioWaveformView, value: Boolean) {
+        view.playInBackground = value
+    }
+
+    override fun setPauseUiUpdatesInBackground(view: AudioWaveformView, value: Boolean) {
+        view.pauseUiUpdatesInBackground = value
+    }
+
+    override fun setControlledPlaying(view: AudioWaveformView, value: Int) {
+        view.controlledPlaying = value
+    }
+
+    override fun setControlledSpeed(view: AudioWaveformView, value: Float) {
+        view.controlledSpeed = value
+    }
+
+    // endregion
+
+    // region Commands -----------------------------------------------------------
+
+    override fun play(view: AudioWaveformView) {
+        view.play()
+    }
+
+    override fun pause(view: AudioWaveformView) {
+        view.pause()
+    }
+
+    override fun toggle(view: AudioWaveformView) {
+        view.toggle()
+    }
+
+    override fun seekTo(view: AudioWaveformView, positionMs: Int) {
+        view.seekTo(positionMs)
+    }
+
+    override fun setSpeed(view: AudioWaveformView, speed: Float) {
+        view.setSpeedValue(speed)
+    }
+
+    // endregion
+
+    override fun onDropViewInstance(view: AudioWaveformView) {
+        super.onDropViewInstance(view)
+    }
+
+    companion object {
+        const val NAME = "AudioWaveformView"
+    }
+}

package/android/src/main/java/com/audiowaveform/PlayPauseButton.kt

@@ -0,0 +1,106 @@
+package com.audiowaveform
+
+import android.content.Context
+import android.content.res.ColorStateList
+import android.graphics.Color
+import android.util.AttributeSet
+import android.view.Gravity
+import android.view.View
+import android.widget.FrameLayout
+import android.widget.ImageView
+import android.widget.ProgressBar
+
+/**
+ * Play/pause button backed by the bundled vector drawables
+ * `R.drawable.play_fill` and `R.drawable.pause_fill`. Tintable via `iconColor`.
+ *
+ * While `isLoading` is `true`, the icon is hidden and a native
+ * indeterminate `ProgressBar` is shown in its place. The view stays
+ * clickable so callers can queue a "play once ready" intent.
+ */
+class PlayPauseButton @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0
+) : FrameLayout(context, attrs, defStyleAttr) {
+
+    var isPlaying: Boolean = false
+        set(value) {
+            if (field == value) return
+            field = value
+            updateImage()
+        }
+
+    var isLoading: Boolean = false
+        set(value) {
+            if (field == value) return
+            field = value
+            updateLoadingState()
+        }
+
+    var iconColor: Int = Color.WHITE
+        set(value) {
+            field = value
+            imageView.setColorFilter(value)
+            applySpinnerTint(value)
+        }
+
+    private val imageView = ImageView(context).apply {
+        scaleType = ImageView.ScaleType.FIT_CENTER
+        setColorFilter(Color.WHITE)
+    }
+
+    private val spinner = ProgressBar(context).apply {
+        isIndeterminate = true
+        visibility = View.GONE
+    }
+
+    init {
+        addView(
+            imageView,
+            LayoutParams(
+                LayoutParams.MATCH_PARENT,
+                LayoutParams.MATCH_PARENT
+            )
+        )
+        // Spinner sits on top of the icon (which is hidden while loading).
+        // Wrap content + center so the OS-default size is preserved.
+        addView(
+            spinner,
+            LayoutParams(
+                LayoutParams.WRAP_CONTENT,
+                LayoutParams.WRAP_CONTENT,
+                Gravity.CENTER
+            )
+        )
+        isClickable = true
+        isFocusable = true
+        applySpinnerTint(iconColor)
+        updateImage()
+    }
+
+    private fun updateImage() {
+        val res = if (isPlaying) R.drawable.pause_fill else R.drawable.play_fill
+        imageView.setImageResource(res)
+        imageView.setColorFilter(iconColor)
+    }
+
+    private fun updateLoadingState() {
+        if (isLoading) {
+            imageView.visibility = View.INVISIBLE
+            spinner.visibility = View.VISIBLE
+        } else {
+            imageView.visibility = View.VISIBLE
+            spinner.visibility = View.GONE
+        }
+    }
+
+    private fun applySpinnerTint(color: Int) {
+        spinner.indeterminateTintList = ColorStateList.valueOf(color)
+    }
+
+    override fun performClick(): Boolean {
+        super.performClick()
+        return true
+    }
+}

package/android/src/main/java/com/audiowaveform/SpeedPillView.kt

@@ -0,0 +1,70 @@
+package com.audiowaveform
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.Typeface
+import android.graphics.drawable.GradientDrawable
+import android.util.AttributeSet
+import android.view.Gravity
+import android.widget.TextView
+import kotlin.math.floor
+
+/**
+ * Rounded "1.5x" speed-rate label. Tap-to-cycle is wired up via `onTap`;
+ * the parent (`AudioWaveformView`) is responsible for applying the new rate.
+ */
+class SpeedPillView @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0
+) : TextView(context, attrs, defStyleAttr) {
+
+    private val pillBackground = GradientDrawable().apply {
+        shape = GradientDrawable.RECTANGLE
+        setColor(Color.argb(64, 255, 255, 255))
+    }
+
+    var pillColor: Int = Color.argb(64, 255, 255, 255)
+        set(value) {
+            field = value
+            pillBackground.setColor(value)
+            invalidate()
+        }
+
+    var onTap: (() -> Unit)? = null
+
+    init {
+        gravity = Gravity.CENTER
+        setTextColor(Color.WHITE)
+        textSize = 12f
+        setTypeface(typeface, Typeface.BOLD)
+        background = pillBackground
+        // Vertical padding stays small; the pill height is driven by intrinsic size.
+        val hPadding = (8f * resources.displayMetrics.density).toInt()
+        val vPadding = (2f * resources.displayMetrics.density).toInt()
+        setPadding(hPadding, vPadding, hPadding, vPadding)
+        isClickable = true
+        isFocusable = true
+        setOnClickListener {
+            animate().alpha(0.6f).setDuration(80).withEndAction {
+                animate().alpha(1.0f).setDuration(120).start()
+            }.start()
+            onTap?.invoke()
+        }
+    }
+
+    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+        super.onSizeChanged(w, h, oldw, oldh)
+        // Make the corner radius track the height for a perfect pill shape.
+        pillBackground.cornerRadius = h / 2f
+    }
+
+    fun setSpeed(speed: Float) {
+        val rounded = (speed * 10f).toInt().toFloat() / 10f
+        text = if (rounded == floor(rounded)) {
+            "${rounded.toInt()}x"
+        } else {
+            String.format("%.1fx", rounded)
+        }
+    }
+}