Add element names to API docs (#46)

src/DefaultUI.ts

@@ -17,7 +17,7 @@ template.innerHTML = `<style>${defaultUiCss}</style>${defaultUiHtml}`;
 shadyCss.prepareTemplate(template, 'theoplayer-default-ui');
 
 /**
- * A default UI for THEOplayer.
+ * `<theoplayer-default-ui>` - A default UI for THEOplayer.
  *
  * This default UI provides a great player experience out-of-the-box, that works well on all types of devices
  * and for all types of streams. It provides all the common playback controls for playing, seeking,

src/UIContainer.ts

@@ -45,7 +45,7 @@ const DEFAULT_TV_USER_IDLE_TIMEOUT = 5;
 const DEFAULT_DVR_THRESHOLD = 60;
 
 /**
- * The container element for a THEOplayer UI.
+ * `<theoplayer-ui>` - The container element for a THEOplayer UI.
  *
  * This element provides a basic layout structure for a general player UI, and handles the creation and management
  * of a {@link theoplayer!ChromelessPlayer | THEOplayer player instance} for this UI.

src/components/ActiveQualityDisplay.ts

@@ -5,6 +5,8 @@ import { formatQualityLabel } from '../util/TrackUtils';
 import * as shadyCss from '@webcomponents/shadycss';
 
 /**
+ * `<theoplayer-active-quality-display>` - A control that displays the name of the active video quality.
+ *
  * @group Components
  */
 export class ActiveQualityDisplay extends StateReceiverMixin(HTMLElement, ['activeVideoQuality', 'targetVideoQualities']) {

src/components/AirPlayButton.ts

@@ -12,7 +12,7 @@ template.innerHTML = buttonTemplate(airPlayButtonHtml, airPlayButtonCss);
 shadyCss.prepareTemplate(template, 'theoplayer-airplay-button');
 
 /**
- * A button to start and stop casting using AirPlay.
+ * `<theoplayer-airplay-button>` - A button to start and stop casting using AirPlay.
  *
  * @group Components
  */

src/components/Button.ts

@@ -17,7 +17,7 @@ defaultTemplate.innerHTML = buttonTemplate('<slot></slot>');
 shadyCss.prepareTemplate(defaultTemplate, 'theoplayer-button');
 
 /**
- * A basic button.
+ * `<theoplayer-button>` - A basic button.
  *
  * @attribute `disabled` - Whether the button is disabled. When disabled, the button cannot be clicked.
  * @group Components

src/components/CastButton.ts

@@ -6,7 +6,7 @@ import * as shadyCss from '@webcomponents/shadycss';
 /**
  * A generic button to start and stop casting.
  *
- * For a concrete implementation, see {@link ChromecastButton}.
+ * For a concrete implementation, see {@link ChromecastButton} and {@link AirPlayButton}.
  * @group Components
  */
 export class CastButton extends Button {

src/components/ChromecastButton.ts

@@ -15,7 +15,7 @@ const maskId = 'theoplayer-chromecast-rings-mask';
 let chromecastButtonId = 0;
 
 /**
- * A button to start and stop casting using Chromecast.
+ * `<theoplayer-chromecast-button>` - A button to start and stop casting using Chromecast.
  *
  * @group Components
  */

src/components/ChromecastDisplay.ts

@@ -19,7 +19,7 @@ shadyCss.prepareTemplate(template, 'theoplayer-chromecast-display');
 const CAST_EVENTS = ['statechange'] as const;
 
 /**
- * A control that displays the casting status while using Chromecast.
+ * `<theoplayer-chromecast-display>` - A control that displays the casting status while using Chromecast.
  *
  * @group Components
  */

src/components/CloseMenuButton.ts

@@ -10,7 +10,7 @@ template.innerHTML = buttonTemplate(`<span part="icon"><slot>${backIcon}</slot><
 shadyCss.prepareTemplate(template, 'theoplayer-menu-close-button');
 
 /**
- * A button that closes its parent menu.
+ * `<theoplayer-menu-close-button>` - A button that closes its parent menu.
  *
  * This button must be placed inside a {@link Menu | `<theoplayer-menu>`}.
  *

src/components/ControlBar.ts

@@ -6,7 +6,7 @@ template.innerHTML = `<style>${controlBarCss}</style><slot></slot>`;
 shadyCss.prepareTemplate(template, 'theoplayer-control-bar');
 
 /**
- * A horizontal control bar that can contain other controls.
+ * `<theoplayer-control-bar>` - A horizontal control bar that can contain other controls.
  *
  * @group Components
  */

src/components/DurationDisplay.ts

@@ -13,7 +13,7 @@ shadyCss.prepareTemplate(template, 'theoplayer-duration-display');
 const PLAYER_EVENTS = ['durationchange'] as const;
 
 /**
- * A control that displays the duration of the stream.
+ * `<theoplayer-duration-display>` - A control that displays the duration of the stream.
  *
  * @group Components
  */

src/components/ErrorDisplay.ts

@@ -20,7 +20,7 @@ template.innerHTML =
 shadyCss.prepareTemplate(template, 'theoplayer-error-display');
 
 /**
- * A screen that shows the details of a fatal player error.
+ * `<theoplayer-error-display>` - A screen that shows the details of a fatal player error.
  *
  * @group Components
  */

src/components/FullscreenButton.ts

@@ -19,7 +19,7 @@ template.innerHTML = buttonTemplate(
 shadyCss.prepareTemplate(template, 'theoplayer-fullscreen-button');
 
 /**
- * A button that toggles fullscreen.
+ * `<theoplayer-fullscreen-button>` - A button that toggles fullscreen.
  *
  * @group Components
  */

src/components/GestureReceiver.ts

@@ -8,7 +8,7 @@ template.innerHTML = `<style>${gestureReceiverCss}</style>`;
 shadyCss.prepareTemplate(template, 'theoplayer-gesture-receiver');
 
 /**
- * An overlay that receives and handles gestures on the player.
+ * `<theoplayer-gesture-receiver>` - An overlay that receives and handles gestures on the player.
  *
  * On desktop devices, this plays or pauses the player whenever it is clicked.
  * On mobile devices, this currently does nothing.

src/components/LanguageMenu.ts

@@ -17,7 +17,7 @@ shadyCss.prepareTemplate(template, 'theoplayer-language-menu');
 const TRACK_EVENTS = ['addtrack', 'removetrack'] as const;
 
 /**
- * A menu to change the spoken language and subtitles of the stream.
+ * `<theoplayer-language-menu>` - A menu to change the spoken language and subtitles of the stream.
  *
  * @group Components
  */

src/components/LanguageMenuButton.ts

@@ -15,7 +15,7 @@ shadyCss.prepareTemplate(template, 'theoplayer-language-menu-button');
 const TRACK_EVENTS = ['addtrack', 'removetrack'] as const;
 
 /**
- * A menu button that opens a {@link LanguageMenu}.
+ * `<theoplayer-language-menu-button>` - A menu button that opens a {@link LanguageMenu}.
  *
  * When there are no alternative audio languages or subtitles, this button automatically hides itself.
  *

src/components/LinkButton.ts

@@ -15,7 +15,7 @@ defaultTemplate.innerHTML = linkButtonTemplate('<slot></slot>');
 shadyCss.prepareTemplate(defaultTemplate, 'theoplayer-link-button');
 
 /**
- * A {@link Button | button} that opens a hyperlink.
+ * `<theoplayer-link-button>` - A {@link Button | button} that opens a hyperlink.
  *
  * @attribute `disabled` - Whether the button is disabled. When disabled, the button cannot be clicked.
  * @group Components

src/components/LiveButton.ts

@@ -23,7 +23,8 @@ const LIVE_EVENTS = ['seeking', 'seeked', 'timeupdate', 'durationchange', 'empti
 const DEFAULT_LIVE_THRESHOLD = 10;
 
 /**
- * A button that shows whether the player is currently playing at the live point, and seeks to the live point when clicked.
+ * `<theoplayer-live-button>` - A button that shows whether the player is currently playing at the live point,
+ * and seeks to the live point when clicked.
  *
  * @attribute `live-threshold` - The maximum distance (in seconds) from the live point that the player's current time
  *   can be for it to still be considered "at the live point". If unset, defaults to 10 seconds.

src/components/LoadingIndicator.ts

@@ -13,7 +13,7 @@ shadyCss.prepareTemplate(template, 'theoplayer-loading-indicator');
 const PLAYER_EVENTS = ['readystatechange', 'play', 'pause', 'playing', 'seeking', 'seeked'] as const;
 
 /**
- * An indicator that shows whether the player is currently waiting for more data to resume playback.
+ * `<theoplayer-loading-indicator>` - An indicator that shows whether the player is currently waiting for more data to resume playback.
  *
  * @attribute `loading` (readonly) - Whether the player is waiting for more data. If set, the indicator is shown.
  * @group Components

src/components/MediaTrackRadioButton.ts

@@ -12,7 +12,9 @@ shadyCss.prepareTemplate(template, 'theoplayer-media-track-radio-button');
 const TRACK_EVENTS = ['change', 'update'] as const;
 
 /**
- * A radio button that shows the label of a given media track, and switches to that track when clicked.
+ * `<theoplayer-media-track-radio-button>` - A radio button that shows the label of a given media track,
+ * and switches to that track when clicked.
+ *
  * @group Components
  */
 export class MediaTrackRadioButton extends RadioButton {

src/components/Menu.ts

@@ -23,7 +23,7 @@ defaultTemplate.innerHTML = menuTemplate('<slot name="heading"></slot>', '<slot>
 shadyCss.prepareTemplate(defaultTemplate, 'theoplayer-menu');
 
 /**
- * A menu that can be opened on top of the player.
+ * `<theoplayer-menu>` - A menu that can be opened on top of the player.
  *
  * The menu has a heading at the top, with a {@link CloseMenuButton | close button} and a heading text.
  *

src/components/MenuButton.ts

@@ -9,7 +9,7 @@ template.innerHTML = buttonTemplate(`<slot></slot>`);
 shadyCss.prepareTemplate(template, 'theoplayer-menu-button');
 
 /**
- * A menu button that opens a {@link Menu}.
+ * `<theoplayer-menu-button>` - A menu button that opens a {@link Menu}.
  *
  * @attribute `menu` - The ID of the menu to open.
  * @group Components

src/components/MenuGroup.ts

@@ -28,7 +28,7 @@ interface OpenMenuEntry {
 }
 
 /**
- * A group of {@link Menu}s.
+ * `<theoplayer-menu-group>` - A group of {@link Menu}s.
  *
  * This can contain multiple other menus, which can be opened with {@link MenuGroup.openMenu}.
  * When a {@link MenuButton} in one menu opens another menu in this group, it is opened as a "submenu".

src/components/MuteButton.ts

@@ -22,7 +22,7 @@ export type VolumeLevel = 'off' | 'low' | 'high';
 const PLAYER_EVENTS = ['volumechange'] as const;
 
 /**
- * A button that toggles whether audio is muted or not.
+ * `<theoplayer-mute-button>` - A button that toggles whether audio is muted or not.
  *
  * @attribute `volume-level` (readonly) - The volume level of the player.
  *   Can be "off" (muted), "low" (volume < 50%) or "high" (volume >= 50%).

src/components/PlayButton.ts

@@ -21,7 +21,7 @@ shadyCss.prepareTemplate(template, 'theoplayer-play-button');
 const PLAYER_EVENTS = ['seeking', 'seeked', 'ended', 'emptied', 'sourcechange'] as const;
 
 /**
- * A button that toggles whether the player is playing or paused.
+ * `<theoplayer-play-button>` - A button that toggles whether the player is playing or paused.
  *
  * @attribute `paused` (readonly) - Whether the player is paused. Reflects `ui.player.paused`.
  * @attribute `ended` (readonly) - Whether the player is ended. Reflects `ui.player.ended`.

src/components/PlaybackRateDisplay.ts

@@ -3,6 +3,8 @@ import { setTextContent } from '../util/CommonUtils';
 import * as shadyCss from '@webcomponents/shadycss';
 
 /**
+ * `<theoplayer-playback-rate-display>` - A control that displays the current playback rate of the player.
+ *
  * @group Components
  */
 export class PlaybackRateDisplay extends StateReceiverMixin(HTMLElement, ['playbackRate']) {

src/components/PlaybackRateMenu.ts

@@ -8,7 +8,7 @@ template.innerHTML = menuTemplate(`<span slot="heading"><slot name="heading">Pla
 shadyCss.prepareTemplate(template, 'theoplayer-playback-rate-menu');
 
 /**
- * A menu to change the playback rate of the player.
+ * `<theoplayer-playback-rate-menu>` - A menu to change the playback rate of the player.
  *
  * @group Components
  */

src/components/PlaybackRateMenuButton.ts

@@ -9,7 +9,7 @@ template.innerHTML = buttonTemplate(`<span part="icon"><slot>${speedIcon}</slot>
 shadyCss.prepareTemplate(template, 'theoplayer-playback-rate-button');
 
 /**
- * A menu button that opens a [playback rate menu]{@link PlaybackRateMenu}.
+ * `<theoplayer-playback-rate-menu-button>` - A menu button that opens a [playback rate menu]{@link PlaybackRateMenu}.
  *
  * @attribute menu - The ID of the playback rate menu.
  * @group Components

src/components/PlaybackRateRadioGroup.ts

@@ -11,7 +11,8 @@ template.innerHTML = `<style>${verticalRadioGroupCss}</style><theoplayer-radio-g
 shadyCss.prepareTemplate(template, 'theoplayer-playback-rate-radio-group');
 
 /**
- * A radio group that shows a list of playback rates, from which the user can choose a desired playback rate.
+ * `<theoplayer-playback-rate-radio-group>` - A radio group that shows a list of playback rates,
+ * from which the user can choose a desired playback rate.
  *
  * @slot {@link RadioButton} - The possible options for the playback rate.
  *   The value of each radio button must be a valid number.

src/components/PreviewThumbnail.ts

@@ -11,7 +11,8 @@ shadyCss.prepareTemplate(template, 'theoplayer-preview-thumbnail');
 const TRACK_EVENTS = ['addtrack', 'removetrack'] as const;
 
 /**
- * A display that shows the thumbnail image at the current preview time of a {@link TimeRange | `<theoplayer-time-range>`}.
+ * `<theoplayer-preview-thumbnail>` - A display that shows the thumbnail image at the current preview time
+ * of a {@link TimeRange | `<theoplayer-time-range>`}.
  *
  * The first `metadata` text track whose label equals `"thumbnails"` is used as source for the thumbnails.
  * This track is expected to contain cues whose content is the URL for the thumbnail image.

src/components/PreviewTimeDisplay.ts

@@ -14,7 +14,7 @@ shadyCss.prepareTemplate(template, 'theoplayer-preview-time-display');
 const PLAYER_EVENTS = ['timeupdate', 'seeking', 'seeked', 'durationchange'] as const;
 
 /**
- * A display that shows the current preview time of a {@link TimeRange | `<theoplayer-time-range>`}.
+ * `<theoplayer-preview-time-display>` - A display that shows the current preview time of a {@link TimeRange | `<theoplayer-time-range>`}.
  *
  * @attribute `remaining` - If set, shows the remaining time of the stream.
  * @attribute `remaining-when-live` - If set, and the stream is a livestream, shows the remaining time

src/components/QualityRadioButton.ts

@@ -14,8 +14,8 @@ const TRACK_EVENTS = ['activequalitychanged', 'targetqualitychanged'] as const;
 const QUALITY_EVENTS = ['update'] as const;
 
 /**
- * A radio button that shows the label of a given video quality, and switches the video track's
- * {@link theoplayer!MediaTrack.targetQuality | target quality} to that quality when clicked.
+ * `<theoplayer-quality-radio-button>` - A radio button that shows the label of a given video quality,
+ * and switches the video track's {@link theoplayer!MediaTrack.targetQuality | target quality} to that quality when clicked.
  *
  * @group Components
  */

src/components/QualityRadioGroup.ts

@@ -14,7 +14,8 @@ shadyCss.prepareTemplate(template, 'theoplayer-quality-radio-group');
 const TRACK_EVENTS = ['addtrack', 'removetrack', 'change'] as const;
 
 /**
- * A radio group that shows a list of available video qualities, from which the user can choose a desired target quality.
+ * `<theoplayer-quality-radio-group>` - A radio group that shows a list of available video qualities,
+ * from which the user can choose a desired target quality.
  *
  * @group Components
  */

src/components/RadioButton.ts

@@ -9,7 +9,7 @@ defaultTemplate.innerHTML = buttonTemplate('<slot></slot>');
 shadyCss.prepareTemplate(defaultTemplate, 'theoplayer-radio-button');
 
 /**
- * A button that can be checked.
+ * `<theoplayer-radio-button>` - A button that can be checked.
  *
  * When part of a {@link RadioGroup}, at most one button in the group can be checked.
  *

src/components/RadioGroup.ts

@@ -14,7 +14,7 @@ radioGroupTemplate.innerHTML = `<slot></slot>`;
 shadyCss.prepareTemplate(radioGroupTemplate, 'theoplayer-radio-group');
 
 /**
- * A group of {@link RadioButton}s. At most one button in the group can be checked.
+ * `<theoplayer-radio-group>` - A group of {@link RadioButton}s. At most one button in the group can be checked.
  *
  * ## Behavior
  * This radio group implements the [roving tabindex](https://www.w3.org/WAI/ARIA/apg/example-index/radio/radio.html) pattern.

src/components/SeekButton.ts

@@ -17,7 +17,7 @@ shadyCss.prepareTemplate(template, 'theoplayer-seek-button');
 const DEFAULT_SEEK_OFFSET = 10;
 
 /**
- * A button that seeks forward or backward by a fixed offset.
+ * `<theoplayer-seek-button>` - A button that seeks forward or backward by a fixed offset.
  *
  * @attribute `seek-offset` - The offset (in seconds) by which to seek forward (if positive) or backward (if negative).
  * @group Components

src/components/SettingsMenu.ts

@@ -11,7 +11,8 @@ template.innerHTML = menuGroupTemplate(settingsMenuHtml, menuTableCss);
 shadyCss.prepareTemplate(template, 'theoplayer-settings-menu');
 
 /**
- * A menu to change the settings of the player, such as the active video quality and the playback speed.
+ * `<theoplayer-settings-menu>` - A menu to change the settings of the player,
+ * such as the active video quality and the playback speed.
  *
  * @group Components
  */

src/components/SettingsMenuButton.ts

@@ -9,7 +9,7 @@ template.innerHTML = buttonTemplate(`<span part="icon"><slot>${settingsIcon}</sl
 shadyCss.prepareTemplate(template, 'theoplayer-settings-menu-button');
 
 /**
- * A menu button that opens a {@link SettingsMenu}.
+ * `<theoplayer-settings-menu-button>` - A menu button that opens a {@link SettingsMenu}.
  *
  * @attribute `menu` - The ID of the settings menu.
  * @group Components

src/components/TextTrackOffRadioButton.ts

@@ -12,7 +12,7 @@ shadyCss.prepareTemplate(template, 'theoplayer-text-track-off-radio-button');
 const TRACK_EVENTS = ['change'] as const;
 
 /**
- * A radio button that disables the active subtitle track when clicked.
+ * `<theoplayer-text-track-off-radio-button>` - A radio button that disables the active subtitle track when clicked.
  *
  * @group Components
  */

src/components/TextTrackRadioButton.ts

@@ -12,7 +12,7 @@ shadyCss.prepareTemplate(template, 'theoplayer-text-track-radio-button');
 const TRACK_EVENTS = ['change', 'update'] as const;
 
 /**
- * A radio button that shows the label of a given text track, and switches to that track when clicked.
+ * `<theoplayer-text-track-radio-button>` -A radio button that shows the label of a given text track, and switches to that track when clicked.
  *
  * @group Components
  */

src/components/TextTrackStyleDisplay.ts

@@ -8,7 +8,8 @@ import { arrayFind, setTextContent } from '../util/CommonUtils';
 import { knownColors, knownEdgeStyles, knownFontFamilies } from '../util/TextTrackStylePresets';
 
 /**
- * Displays the value of a single text track style option in a human-readable format.
+ * `<theoplayer-text-track-style-display>` - A control that displays the value of a single text track style option
+ * in a human-readable format.
  *
  * @attribute `property` - The property name of the text track style option. One of {@link TextTrackStyleOption}.
  * @group Components

src/components/TextTrackStyleMenu.ts

@@ -11,7 +11,7 @@ template.innerHTML = menuGroupTemplate(textTrackStyleMenuHtml, `${menuTableCss}\
 shadyCss.prepareTemplate(template, 'theoplayer-text-track-style-menu');
 
 /**
- * A menu to change the {@link theoplayer!TextTrackStyle | text track style} of the player.
+ * `<theoplayer-text-track-style-menu>` - A menu to change the {@link theoplayer!TextTrackStyle | text track style} of the player.
  *
  * @group Components
  */

src/components/TextTrackStyleRadioGroup.ts

@@ -27,7 +27,8 @@ export interface TextTrackStyleMap {
 export type TextTrackStyleOption = keyof TextTrackStyleMap;
 
 /**
- * A radio group that shows a list of values for a text track style option, from which the user can choose a desired value.
+ * `<theoplayer-text-track-style-radio-group>` - A radio group that shows a list of values for a text track style option,
+ * from which the user can choose a desired value.
  *
  * @attribute `property` - The property name of the text track style option. One of {@link TextTrackStyleOption}.
  * @slot {@link RadioButton} - The possible options for the text track style option.