Cómo pausar y reanudar la reproducción de contenido multimedia con la barra espaciadora del teclado

La optimización para pantallas grandes incluye la posibilidad de controlar entradas de teclado externas, como reaccionar cuando se presiona la Spacebar para pausar o reanudar la reproducción de videos y otro contenido multimedia. Esto es particularmente útil para tablets, que a menudo se conectan a teclados externos, y Chromebooks, que suelen tener teclados externos, pero que se pueden usar en modo tablet.

Cuando el contenido multimedia sea el único elemento de la ventana (como la reproducción de video en pantalla completa), puede responder a eventos de pulsación de teclas a nivel de pantalla en Jetpack Compose.

Prácticas recomendadas

Cada vez que la app reproduce un archivo multimedia, los usuarios deben poder pausar y reanudar la reproducción presionando la barra espaciadora en un teclado físico.

Ingredientes

• KEYCODE_SPACE: Clave de código constante para la barra espaciadora.
• onPreviewKeyEvent: Modifier permite que un componente intercepte eventos clave de hardware cuando este (o uno de sus elementos secundarios) esté enfocado.
• onKeyEvent: Al igual que onPreviewKeyEvent, este Modifier permite que un componente intercepte eventos clave de hardware cuando este (o uno de sus elementos secundarios) esté enfocado.

Pasos

Para responder a las pulsaciones de teclas del teclado en Jetpack Compose, tu app debe escuchar los eventos de pulsación de teclas, filtrarlos y responder a las pulsaciones de teclas seleccionadas, como cuando se presiona la barra espaciadora.

1. Cómo escuchar eventos del teclado

Con Jetpack Compose, puedes aprovechar el modificador onPreviewKeyEvent o onKeyEvent dentro del componente que administra la pulsación de teclas.

La diferencia principal entre los dos modificadores es a dónde se envía el evento si el modificador no lo consume:

• onPreviewKeyEvent: Envía el evento a su primer elemento secundario.
• onKeyEvent: Envía el evento al elemento superior del elemento componible.

2. Filtra y controla las pulsaciones de la barra espaciadora

Dentro de la expresión lambda del modificador onPreviewKeyEvent o onKeyEvent, filtra los eventos clave en los que la liberación de la tecla (KeyEventType.KeyUp) coincida con la barra espaciadora (Key.Spacebar).

Muestra true si tu código controla el evento y no quieres que se propague más. Muestra false para permitir que otros componentes controlen el evento.

• Opción A: Usar onPreviewKeyEvent

  Column(
      modifier = Modifier.onPreviewKeyEvent { event ->
          if (event.type == KeyEventType.KeyUp && event.key == Key.Spacebar) {
              // Handle spacebar keypress to pause/resume playback.
              true
          } else {
              false
          }
      }
  ) {
      // Content
  }
  AdaptiveAppCookbook.kt

• Opción B: Usar onKeyEvent

  Column(
      modifier = Modifier.onKeyEvent { event ->
          if (event.type == KeyEventType.KeyUp && event.key == Key.Spacebar) {
              // Handle spacebar keypress to pause/resume playback.
              true
          } else {
              false
          }
      }
  ) {
      // Content
  }
  AdaptiveAppCookbook.kt

Resultados

Tu app ahora puede responder cuando se presiona la barra espaciadora para pausar y reanudar un video o cualquier otro contenido multimedia.

Recursos adicionales

Para obtener más información sobre los eventos del teclado y cómo administrarlos, consulta Cómo controlar las entradas del teclado.