Feature: Export translateText api in CDN delivered @videojs/html

[danrossi]

Should this be a feature proposal discussion?

• This is not a substantial change

Is there an existing issue for this?

• I have searched the existing issues and discussions

Which package(s) does this apply to? Select all that apply

HTML (@videojs/html)

Motivation

There is no exported translateText api for external components to use for translations. Until a standard reusable button component is provided it needs to be replicated into an external button component. So it can be imported like this

import { MediaElement,MediaButtonElement, PlayerController, playerContext, selectTime, selectPlayback,I18nController,i18nContext, translateText, registerI18n } from 'https://cdn.jsdelivr.net/npm/@videojs/html@10.0.0-beta.31/+esm';

Description

Ive created bundles for testing for self hosting.

Translations for custom components need further docs or a common button component to extend from.

Usage:

registerI18n('en', {
  buttons: {
    skip: 'Skip Intro',
  },
});

class SkipIntroButtonElement extends MediaElement {
   #i18n = new I18nController(this, i18nContext);
  #playback = new PlayerController(this, playerContext, selectPlayback);
  //#disconnect: AbortController | null = null;
#disconnect = null;
  #label = null;
  connectedCallback() {
    super.connectedCallback();
    this.#disconnect?.abort();
    this.#disconnect = new AbortController();
    const { signal } = this.#disconnect;

    this.#label = translateText({key: "buttons.skip", text: 'Skip Intro'}, this.#i18n.value);

    //'Skip intro'
    this.setAttribute('role', 'button');
    this.setAttribute('aria-label', this.#label);
    this.setAttribute('tabindex', '0');

    this.setAttribute("commandfor", "skip-tooltip");
    this.className = "media-button media-button--subtle media-button--icon media-button--skip";

    this.addEventListener('click', this.#handleActivate, { signal });
   
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    // Removes all listeners registered with this signal
    this.#disconnect?.abort();
    this.#disconnect = null;
  }

  //update(changed: PropertyValues) {
  update(changed) {
    super.update(changed);
   
    const playback = this.#playback.value;

     this.toggleAttribute('data-visible', true);
    this.setAttribute('tabindex', '0');

    // Features are configured per-player, so a feature may not be available
    if (!playback) return;

  }

  #handleActivate = () => {

  };

  getLabel() {
    return this.#label;
  }


  /** Resolved label for tooltips and other display surfaces. */
  getResolvedLabel() {
    return this.#label;
  }

}

customElements.define('skip-intro-button', SkipIntroButtonElement);

Expected Behavior

 this.#label = translateText({key: "buttons.skip", text: 'Skip Intro'}, this.#i18n.value);

Alternatives and Workarounds

self hosted bundle

Examples in other libraries

No response

[danrossi]

The export allows to do this component I just figured out to add to the controls. I've had to use a built bundle for the demo. I've setup a vite/rolldown build system for that.

https://electroteque.org/dev/videojs10/controls.html

[github-actions]

Follow-up from #2598: CDN bundles now belong to @videojs/cdn. It adds a named @videojs/cdn/i18n entry that exports translateText and registerI18n, but it does not change the @videojs/html +esm public surface or expose the other component APIs through the CDN package. Keep this open; clarify whether the target is the published HTML ESM API or a browser-bundle integration API, then track the remaining exports and documentation.