feat(media): inline audio playback with VLCJ no-video mode

Phase 9: AudioPlayer composable using VLCJ --no-video factory,
play/pause/seek controls, NoteCard splits audio from video URLs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
nrobi144
2026-03-16 11:03:31 +02:00
parent 4450aacdf9
commit dfaca39528
2 changed files with 252 additions and 2 deletions
@@ -0,0 +1,217 @@
/*
* Copyright (c) 2025 Vitor Pamplona
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the
* Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
package com.vitorpamplona.amethyst.desktop.ui.media
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MusicNote
import androidx.compose.material.icons.filled.Pause
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableLongStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay
import uk.co.caprica.vlcj.factory.MediaPlayerFactory
import uk.co.caprica.vlcj.player.base.MediaPlayer
import uk.co.caprica.vlcj.player.base.MediaPlayerEventAdapter
/**
* Audio-only player using VLCJ with no video surface.
* Creates its own MediaPlayerFactory with "--no-video" flag.
*/
@Composable
fun AudioPlayer(
url: String,
modifier: Modifier = Modifier,
) {
var isPlaying by remember { mutableStateOf(false) }
var position by remember { mutableFloatStateOf(0f) }
var duration by remember { mutableLongStateOf(0L) }
var currentTime by remember { mutableLongStateOf(0L) }
var vlcAvailable by remember { mutableStateOf(true) }
var player by remember { mutableStateOf<MediaPlayer?>(null) }
DisposableEffect(url) {
val factory =
try {
MediaPlayerFactory("--no-video", "--no-xlib")
} catch (_: Exception) {
vlcAvailable = false
return@DisposableEffect onDispose {}
}
val mp = factory.mediaPlayers().newMediaPlayer()
mp.events().addMediaPlayerEventListener(
object : MediaPlayerEventAdapter() {
override fun playing(mediaPlayer: MediaPlayer) {
isPlaying = true
duration = mediaPlayer.status().length()
}
override fun paused(mediaPlayer: MediaPlayer) {
isPlaying = false
}
override fun stopped(mediaPlayer: MediaPlayer) {
isPlaying = false
}
override fun positionChanged(
mediaPlayer: MediaPlayer,
newPosition: Float,
) {
position = newPosition
currentTime = (newPosition * duration).toLong()
}
override fun finished(mediaPlayer: MediaPlayer) {
isPlaying = false
position = 0f
currentTime = 0L
}
},
)
player = mp
onDispose {
player = null
try {
mp.controls().stop()
mp.release()
} catch (_: Exception) {
// Ignore
}
try {
factory.release()
} catch (_: Exception) {
// Ignore
}
}
}
// Position polling
LaunchedEffect(isPlaying) {
while (isPlaying) {
delay(500)
player?.let {
position = it.status().position()
currentTime = it.status().time()
}
}
}
if (!vlcAvailable) {
Text(
"Audio: $url (install VLC to play)",
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
modifier = modifier,
)
return
}
Row(
modifier =
modifier
.fillMaxWidth()
.clip(RoundedCornerShape(8.dp))
.background(MaterialTheme.colorScheme.surfaceContainerHigh)
.padding(horizontal = 8.dp, vertical = 4.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp),
) {
Icon(
Icons.Default.MusicNote,
contentDescription = null,
modifier = Modifier.size(20.dp),
tint = MaterialTheme.colorScheme.primary,
)
IconButton(
onClick = {
player?.let { p ->
if (isPlaying) {
p.controls().pause()
} else {
if (position <= 0f && !p.status().isPlaying) {
p.media().play(url)
} else {
p.controls().play()
}
}
}
},
modifier = Modifier.size(32.dp),
) {
Icon(
if (isPlaying) Icons.Default.Pause else Icons.Default.PlayArrow,
contentDescription = if (isPlaying) "Pause" else "Play",
modifier = Modifier.size(20.dp),
)
}
Text(
text = formatAudioTime(currentTime),
style = MaterialTheme.typography.labelSmall,
)
Slider(
value = position,
onValueChange = { player?.controls()?.setPosition(it) },
modifier = Modifier.weight(1f),
)
Text(
text = formatAudioTime(duration),
style = MaterialTheme.typography.labelSmall,
)
}
}
private fun formatAudioTime(millis: Long): String {
val totalSeconds = millis / 1000
val minutes = totalSeconds / 60
val seconds = totalSeconds % 60
return "%d:%02d".format(minutes, seconds)
}
@@ -54,6 +54,7 @@ import com.vitorpamplona.amethyst.commons.richtext.UrlParser
import com.vitorpamplona.amethyst.commons.richtext.Urls import com.vitorpamplona.amethyst.commons.richtext.Urls
import com.vitorpamplona.amethyst.commons.ui.components.UserAvatar import com.vitorpamplona.amethyst.commons.ui.components.UserAvatar
import com.vitorpamplona.amethyst.commons.util.toTimeAgo import com.vitorpamplona.amethyst.commons.util.toTimeAgo
import com.vitorpamplona.amethyst.desktop.ui.media.AudioPlayer
import com.vitorpamplona.amethyst.desktop.ui.media.DesktopVideoPlayer import com.vitorpamplona.amethyst.desktop.ui.media.DesktopVideoPlayer
/** /**
@@ -85,11 +86,27 @@ fun NoteCard(
remember(urls) { remember(urls) {
urls.withScheme.filter { RichTextParser.isImageUrl(it) } urls.withScheme.filter { RichTextParser.isImageUrl(it) }
} }
val videoUrls = val allMediaUrls =
remember(urls) { remember(urls) {
urls.withScheme.filter { RichTextParser.isVideoUrl(it) } urls.withScheme.filter { RichTextParser.isVideoUrl(it) }
} }
val mediaUrls = remember(imageUrls, videoUrls) { (imageUrls + videoUrls).toSet() } val audioExtensions = setOf("mp3", "ogg", "wav", "flac", "aac", "opus", "m4a")
val audioUrls =
remember(allMediaUrls) {
allMediaUrls.filter { url ->
val ext =
url
.substringAfterLast('.', "")
.substringBefore('?')
.lowercase()
ext in audioExtensions
}
}
val videoUrls =
remember(allMediaUrls, audioUrls) {
allMediaUrls - audioUrls.toSet()
}
val mediaUrls = remember(imageUrls, allMediaUrls) { (imageUrls + allMediaUrls).toSet() }
val strippedContent = val strippedContent =
remember(note.content, mediaUrls) { remember(note.content, mediaUrls) {
var text = note.content var text = note.content
@@ -214,6 +231,22 @@ fun NoteCard(
} }
} }
// Inline audio
if (audioUrls.isNotEmpty()) {
if (strippedContent.isNotBlank() || imageUrls.isNotEmpty() || videoUrls.isNotEmpty()) {
Spacer(Modifier.height(8.dp))
}
for (url in audioUrls) {
AudioPlayer(
url = url,
modifier = Modifier.fillMaxWidth(),
)
if (url != audioUrls.last()) {
Spacer(Modifier.height(4.dp))
}
}
}
Spacer(Modifier.height(8.dp)) Spacer(Modifier.height(8.dp))
HorizontalDivider(color = MaterialTheme.colorScheme.outline.copy(alpha = 0.3f)) HorizontalDivider(color = MaterialTheme.colorScheme.outline.copy(alpha = 0.3f))