@theoplayer/web-ui 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @theoplayer/web-ui
 
+## 2.3.0
+
+### ✨ Features
+
+- Added 360°/VR support: `<theoplayer-vr-button>` and `<theoplayer-vr-compass>`, included by default in `<theoplayer-default-ui>`.
+
+### 🐛 Issues
+
+- Fixed an issue where the subtitles were briefly overlapping the control bar.
+
 ## 2.2.0
 
 ### ✨ Features

package/dist/THEOplayerUI.d.ts

@@ -1,5 +1,5 @@
 /*!
- * THEOplayer Open Video UI for Web (v2.2.0)
+ * THEOplayer Open Video UI for Web (v2.3.0)
  * License: MIT
  */
 import * as lit from 'lit';
@@ -1058,6 +1058,58 @@ declare global {
     }
 }
 
+/**
+ * A button that toggles stereoscopic VR mode.
+ *
+ * The button is only shown when the current source supports VR (e.g. a 360° video),
+ * and is disabled when the device cannot present VR content.
+ */
+declare class VRButton extends Button {
+    private _player;
+    connectedCallback(): void;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    /**
+     * Whether stereoscopic VR mode is currently active.
+     */
+    accessor stereo: boolean;
+    accessor lang: string;
+    private readonly _updateFromPlayer;
+    protected handleClick(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    private _updateAriaLabel;
+    protected render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-vr-button': VRButton;
+    }
+}
+
+/**
+ * A compass that indicates the current viewing direction of a 360° (VR) video.
+ *
+ * @cssproperty `--theoplayer-vr-compass-size` - The size (diameter) of the compass. Defaults to `26px`.
+ * @cssproperty `--theoplayer-vr-compass-color` - The color of the compass border, center dot and pointer.
+ *   Defaults to `#fff`.
+ * @cssproperty `--theoplayer-vr-compass-fov-color` - The color of the field-of-view indicator.
+ *   Defaults to `rgba(255, 255, 255, 0.75)`.
+ */
+declare class VRCompass extends LitElement {
+    static styles: lit.CSSResult[];
+    private _player;
+    private accessor _yaw;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _updateFromPlayer;
+    protected render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-vr-compass': VRCompass;
+    }
+}
+
 declare class ColorStops {
     private _stops;
     constructor();
@@ -2116,6 +2168,7 @@ declare class UIContainer extends LitElement {
     private tryInitializePlayer_;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     protected firstUpdated(): void;
+    protected updated(): void;
     disconnectedCallback(): void;
     private readonly _onMutation;
     private readonly _onSlotChange;
@@ -2137,7 +2190,15 @@ declare class UIContainer extends LitElement {
     private readonly _onMenuPointerDown;
     private readonly _onMenuClick;
     private readonly _onEnterFullscreen;
+    private _enterFullscreen;
     private readonly _onExitFullscreen;
+    private _exitFullscreen;
+    /**
+     * On iOS, presenting stereoscopic VR requires the player to fill the screen.
+     */
+    private _vrFullscreen;
+    private _vrWasFullscreen;
+    private readonly _onVrStateChange;
     private readonly _onFullscreenChange;
     private readonly _exitFullscreenOnEsc;
     private readonly _updateAspectRatio;
@@ -2468,6 +2529,7 @@ declare enum Attribute {
     REMAINING = "remaining",
     REMAINING_WHEN_LIVE = "remaining-when-live",
     SHOW_DURATION = "show-duration",
+    STEREO = "stereo",
     SEEK_OFFSET = "seek-offset",
     MENU = "menu",
     MENU_OPENED = "menu-opened",
@@ -2550,6 +2612,18 @@ interface Locale {
      * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link FullscreenButton} when in fullscreen mode.
      */
     fullscreenExitAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link VRButton}.
+     */
+    vrAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link VRButton} when VR (stereo) mode is active.
+     */
+    vrExitAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link VRButton} when no VR capable device is available.
+     */
+    vrUnavailableAria: string;
     /**
      * The {@link HTMLElement.ariaLabel | `aria-label`} for an {@link AirPlayButton}.
      */
@@ -2903,6 +2977,6 @@ declare function addLocale(name: string, locale: PartialLocale): void;
  */
 declare const version: string;
 
-export { ActiveQualityDisplay, AdClickThroughButton, AdCountdown, AdDisplay, AdSkipButton, AirPlayButton, Attribute, AutomaticQualitySelector, BadNetworkModeButton, BadNetworkModeMenu, BadNetworkModeSelector, Button, CastButton, ChromecastButton, ChromecastDisplay, CloseMenuButton, ColorStops, ControlBar, DefaultUI, DurationDisplay, ErrorDisplay, ExtensionSlot, FullscreenButton, GestureReceiver, LanguageMenu, LanguageMenuButton, LinkButton, LiveButton, LoadingIndicator, MediaTrackRadioButton, Menu, MenuButton, MenuGroup, MuteButton, PlayButton, PlaybackRateDisplay, PlaybackRateMenu, PlaybackRateMenuButton, PlaybackRateRadioGroup, PreviewThumbnail, PreviewTimeDisplay, QualityRadioButton, QualityRadioGroup, RadioButton, RadioGroup, Range, SeekButton, SettingsMenu, SettingsMenuButton, SlotContainer, StateReceiverMixin, THEOliveDefaultUI, TextTrackOffRadioButton, TextTrackRadioButton, TextTrackStyleDisplay, TextTrackStyleMenu, TextTrackStyleRadioGroup, TextTrackStyleResetButton, TimeDisplay, TimeRange, TrackRadioGroup, UIContainer, VolumeRange, addLocale, buttonTemplate, linkButtonTemplate, menuGroupTemplate, menuTemplate, registerExtension, stateReceiver, version };
+export { ActiveQualityDisplay, AdClickThroughButton, AdCountdown, AdDisplay, AdSkipButton, AirPlayButton, Attribute, AutomaticQualitySelector, BadNetworkModeButton, BadNetworkModeMenu, BadNetworkModeSelector, Button, CastButton, ChromecastButton, ChromecastDisplay, CloseMenuButton, ColorStops, ControlBar, DefaultUI, DurationDisplay, ErrorDisplay, ExtensionSlot, FullscreenButton, GestureReceiver, LanguageMenu, LanguageMenuButton, LinkButton, LiveButton, LoadingIndicator, MediaTrackRadioButton, Menu, MenuButton, MenuGroup, MuteButton, PlayButton, PlaybackRateDisplay, PlaybackRateMenu, PlaybackRateMenuButton, PlaybackRateRadioGroup, PreviewThumbnail, PreviewTimeDisplay, QualityRadioButton, QualityRadioGroup, RadioButton, RadioGroup, Range, SeekButton, SettingsMenu, SettingsMenuButton, SlotContainer, StateReceiverMixin, THEOliveDefaultUI, TextTrackOffRadioButton, TextTrackRadioButton, TextTrackStyleDisplay, TextTrackStyleMenu, TextTrackStyleRadioGroup, TextTrackStyleResetButton, TimeDisplay, TimeRange, TrackRadioGroup, UIContainer, VRButton, VRCompass, VolumeRange, addLocale, buttonTemplate, linkButtonTemplate, menuGroupTemplate, menuTemplate, registerExtension, stateReceiver, version };
 export type { ButtonOptions, Constructor, DeviceType, Duration, Extension, KnownColor, KnownFontFamily, Locale, MenuGroupOptions, MenuOptions, PartialLocale, StateReceiverElement, StateReceiverPropertyMap, StreamType, TextTrackStyleMap, TextTrackStyleOption, TrackType, VolumeLevel };
 export as namespace THEOplayerUI;