Estoy creando una aplicación de música y me gustaría mostrar el contenido de un objeto específico en una matriz basada en un tiempo de inicio y duración. Aquí hay un ejemplo de mis datos.
[ { id: 1, content: 'hello how are you', start: 0, duration: 10 }, { id: 2, content: 'hello Im fine', start: 15, duration: 10 }, { id: 3, content: 'hope you you have a great day', start: 30, duration: 10 } ]Básicamente, usaré la propiedad currentTime en el elemento de audio y, en función de esta propiedad, mostraré el mensaje apropiado en la propiedad de contenido. Actualmente, he podido hacer coincidir el inicio del contenido con el tiempo actual, pero no puedo descubrir cómo mostrarlo durante la duración. Esto es más o menos lo que tengo:
const PodcastDetail = ({ podcast }) => { const [currentMarker, setCurrentMarker] = useState({}); } const handleMarker = (podcast) => { let marker = podcast.markers.find((mark) => { return mark.start == currentTime; }) setCurrentMarker(marker) }Como puede ver, solo devuelvo el objeto de la matriz que coincide con la hora actual, sin embargo, desaparece una vez que cambia la hora actual. Me gustaría mostrar ese contenido a lo largo de su duración.
Debe cambiar la condición para verificar si también está dentro del intervalo.
const handleMarker = (podcast) => { let marker = podcast.markers.find((mark) => { return ( mark.start <= currentTime && currentTime <= mark.start + mark.duration ); }); setCurrentMarker(marker); };sin embargo, desaparece una vez que cambia la hora actual.
Es porque simplemente cambia su estado con un null (no se encontró ningún objeto) :) Básicamente, puede hacer algo así:
const handleMarker = (podcast) => { let marker = podcast.markers.find((mark) => { return mark.start == currentTime; }) if (marker) setCurrentMarker(marker) } Entonces, si ningún marcador coincide con su currentTime , no actualiza el estado, por lo que deja el marcador anterior en su estado
== EDITAR ==
Y si desea utilizar su duration , debe cambiar su condición a
const handleMarker = (podcast) => { let marker = podcast.markers.find((mark) => { return (currentTime >= mark.start) && (currentTime <= (mark.start + mark.duration)); }) setCurrentMarker(marker) } En este caso, elimino la condición de setCurrentMarker porque de hecho desea establecerlo en null si nada coincide con la condición.