Is it possible to expose aria-label for all buttons?

[johnhooks]

I am interested in using media-chrome to create a translatable audio player. I see how most labels are looked up using labels.js. Is possible to make it customizable? It would have to be accessed by the components differently, rather than a file import.

[heff]

Hi @johnhooks. Is your goal just translated labels, are you looking to do any kind of custom labels beyond a straight translation? I ask because a potentially easier next step here would be to build out labels.js with automatic translations built in. Do you think direction would work for you?

[johnhooks]

I am only thinking straight translations. I don't have an issue with the current labels, other than they are only in english. What mechanism would the "automatic translations" use, would it be customizable?

[heff]

@cjpillsbury could weigh in on specifics, but I know we've relied on browser/system attributes, like the html lang attribute, for default language selection for captions. And the we have a sort of user preference that gets updated when the user selects a different language.

I think we could make the language updatable, but can you give me any more specifics on the user interaction you're trying to create?

[cjpillsbury]

Yeah getting a sense of what you're trying to accomplish would help here. Would official alternate translation versions of our label functions be sufficient? Do you need these to be fully overridable? Do you need these to be dynamic, where e.g. a user may change the language in use? Each of these will introduce more complexity and likely require more time/thought in building out. For the simplest case with our existing architecture/lack of i18n et al. architecture, the easiest to get in place (and likely be built upon for more advanced cases) would be simply updating our labels to have multiple languages and then just looking for the nearest lang attribute once on element initialization to determine which to use.

[johnhooks]

Sorry, I thought I was in the thread.

#887 (comment)

[johnhooks]

I am working on a audio player for the WordPress block editor, one of the goals of the project is for it to be translatable. WordPress has it's own mechanisms through gettext to register and lookup translations. The translations not being tied to the implementation of media-chrome works better for my purpose, though I totally understand that is more complex.

I was studying the source of media-chrome and trying to find a work around, though I thought starting a conversation might open up some possibilities.

[cjpillsbury]

For sure! I also appreciate the convo to help us see if we can nudge things in directions to help with these kinds of use cases. As a starting point, if you could share some docs/code examples/etc. for how WordPress uses gettext for these cases, that would be super helpful for me to chew on possibilities. (I've somehow managed to mostly avoid WordPress over the 15+ years of web development 😅).

[johnhooks]

What I would be using to get the translations are function from the @wordpress/i18n package. __, _x, _n and sprintf are typical. If there was a way to register a label provider, something like the function below it would allow using the language translations provided by WordPress or the plugin of a specific text domain (the text_domain can be specific to a plugin).

To be clear, I'm not suggesting this specifically as something to incorporate into media-chrome. Adding the ability to register a custom label provider is what I am looking for.

import { __, _n, sprintf } from "@wordpress/i18n");

function registerLabels() {
  /** @type {{ [k: string]: (x?: Partial<{ seekOffset: number; playbackRate: number; }>) => string; }} */
  const nouns = {
    AUDIO_PLAYER: () => __("audio player", "text_domain"),
    VIDEO_PLAYER: () => __("video player", "text_domain"),
    VOLUME: () => __("volume", "text_domain"),
    SEEK: () => __("seek", "text_domain"),
    CLOSED_CAPTIONS: () => __("closed captions", "text_domain"),
    PLAYBACK_RATE: ({ playbackRate = 1 } = {}) =>
      sprintf("current playback rate %s", playbackRate),
    PLAYBACK_TIME: () => __("playback time", "text_domain"),
    MEDIA_LOADING: () => __("media loading", "text_domain"),
    SETTINGS: () => __("settings", "text_domain"),
    AUDIO_TRACKS: () => __("audio tracks", "text_domain"),
    QUALITY: () => __("quality", "text_domain"),
  };

  /** @type {{ [k: string]: (x?: Partial<{ seekOffset: number; playbackRate: number; }>) => string; }} */
  const verbs = {
    PLAY: () => __("play", "text_domain"),
    PAUSE: () => __("pause", "text_domain"),
    MUTE: () => __("mute", "text_domain"),
    UNMUTE: () => __("unmute", "text_domain"),
    ENTER_AIRPLAY: () => __("start airplay", "text_domain"),
    EXIT_AIRPLAY: () => __("stop airplay", "text_domain"),
    ENTER_CAST: () => __("start casting", "text_domain"),
    EXIT_CAST: () => __("stop casting", "text_domain"),
    ENTER_FULLSCREEN: () => __("enter fullscreen mode", "text_domain"),
    EXIT_FULLSCREEN: () => __("exit fullscreen mode", "text_domain"),
    ENTER_PIP: () => __("enter picture in picture mode", "text_domain"),
    EXIT_PIP: () => __("exit picture in picture mode", "text_domain"),
    SEEK_FORWARD_N_SECS: ({ seekOffset = 30 } = {}) =>
      _n(
        "seek forward %s second",
        "seek forward %s seconds",
        seekOffset,
        "text_domain"
      ),
    SEEK_BACK_N_SECS: ({ seekOffset = 30 } = {}) =>
      _n(
        "seek back %s second",
        "seek back %s seconds",
        seekOffset,
        "text_domain"
      ),
    SEEK_LIVE: () => __("seek to live", "text_domain"),
    PLAYING_LIVE: () => __("playing live", "text_domain"),
  };

  return {
    ...nouns,
    ...verbs,
  };
}