@arcgis/map-components
Version:
ArcGIS Map Components
114 lines (113 loc) • 7.23 kB
TypeScript
/// <reference path="../../index.d.ts" />
import type VideoView from "@arcgis/core/views/VideoView.js";
import type VideoLayer from "@arcgis/core/layers/VideoLayer.js";
import type Map from "@arcgis/core/Map.js";
import type WebMap from "@arcgis/core/WebMap.js";
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
/**
* The ArcGIS Video component provides a view for displaying video feeds from a
* [VideoLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/VideoLayer/).
* It is designed to render and interact with video layers.
*
* A Video component must have a valid VideoLayer.
* It supports various features such as navigating, zooming, and panning, making it suitable for
* applications that require interactive video overlays.
*
* @cssproperty [--arcgis-layout-overlay-space-top] - _Since 4.34_ Specifies the top padding for the layout.
* @cssproperty [--arcgis-layout-overlay-space-bottom] - _Since 4.34_ Specifies the bottom padding for the layout.
* @cssproperty [--arcgis-layout-overlay-space-left] - _Since 4.34_ Specifies the left padding for the layout.
* @cssproperty [--arcgis-layout-overlay-space-right] - _Since 4.34_ Specifies the right padding for the layout.
* @cssproperty [--arcgis-view-color-focus] - _Since 5.0_ Specifies the focus outline color for the view.
* @cssproperty [--arcgis-table-row-background-color] - _Since 5.1_ Specifies the background color for table rows.
* @cssproperty [--arcgis-table-row-alt-background-color] - _Since 5.1_ Specifies the background color for alternate table rows.
* @slot - Default slot for adding components to the video. User is responsible for positioning the content via CSS.
* @slot [top-left] - Slot for components positioned in the top-left corner.
* @slot [top-right] - Slot for components positioned in the top-right corner.
* @slot [bottom-left] - Slot for components positioned in the bottom-left corner.
* @slot [bottom-right] - Slot for components positioned in the bottom-right corner.
* @slot [top-start] - Slot for components positioned at the top-start (top-left in LTR, top-right in RTL).
* @slot [top-end] - Slot for components positioned at the top-end (top-right in LTR, top-left in RTL).
* @slot [bottom-start] - Slot for components positioned at the bottom-start (bottom-left in LTR, bottom-right in RTL).
* @slot [bottom-end] - Slot for components positioned at the bottom-end (bottom-right in LTR, bottom-left in RTL).
* @example
* ```html
* <arcgis-video></arcgis-video>
*
* <script type="module">
* const VideoLayer = await $arcgis.import("@arcgis/core/layers/VideoLayer.js");
* const videoElement = document.querySelector("arcgis-video");
* const videoLayer = new VideoLayer({
* autoplay: true,
* url: "YOUR_VIDEO_LAYER_URL",
* });
* await videoLayer.load();
* if (videoLayer.loaded) {
* videoElement.layer = videoLayer;
* }
* </script>
* ```
* @since 4.33
*/
export abstract class ArcgisVideo extends LitElement {
/**
* The ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: [`label`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label), [`description`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description), [`describedByElements`](https://developer.mozilla.org/docs/Web/API/Element/ariaDescribedByElements), and [`labelledByElements`](https://developer.mozilla.org/docs/Web/API/Element/ariaLabelledByElements).
*
* @since 4.34
*/
accessor aria: VideoView["aria"];
/**
* The light or dark mode used to display the attribution.
* By default, the mode is inherited from the [Calcite's mode](https://developers.arcgis.com/calcite-design-system/core-concepts/#modes).
* You can override the value to style the attribution alongside the map or scene content.
*
* @since 5.0
*/
accessor attributionMode: "dark" | "light" | null | undefined;
/**
* If true, the component will not be destroyed automatically when it is
* disconnected from the document. This is useful when you want to move the
* component to a different place on the page, or temporarily hide it. If this
* is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-video/#destroy) method when you are done to
* prevent memory leaks.
*
* @default false
*/
accessor autoDestroyDisabled: boolean;
/** The [VideoLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/VideoLayer/) to display in the view. */
accessor layer: VideoLayer | null | undefined;
/** A reference to the associated [Map](https://developers.arcgis.com/javascript/latest/references/core/Map/) or [WebMap](https://developers.arcgis.com/javascript/latest/references/core/WebMap/). */
accessor map: Map | WebMap | null | undefined;
/**
* Indicates whether map graphics from the reference map element are overlaid on the video player's content.
*
* @default false
* @since 5.1
*/
accessor operationalDataVisible: boolean;
/**
* When `true`, this property indicates whether the view successfully satisfied all dependencies,
* signaling that the following conditions are met.
*
* - [width](https://developers.arcgis.com/javascript/latest/references/core/views/VideoView/#width)
* - [height](https://developers.arcgis.com/javascript/latest/references/core/views/VideoView/#height)
* - [videoSize](https://developers.arcgis.com/javascript/latest/references/core/views/VideoView/#videoSize)
* - The [layer](https://developers.arcgis.com/javascript/latest/references/core/views/VideoView/#layer) is [ready](https://developers.arcgis.com/javascript/latest/references/core/layers/VideoLayer/#state).
*
* When a view becomes ready it will resolve itself and invoke
* the callback defined in [when()](https://developers.arcgis.com/javascript/latest/references/core/views/VideoView/#when) where code can execute on a working view. Subsequent
* changes to a view's readiness would typically be handled by watching `view.ready` and providing
* logic for cases where the [layer](https://developers.arcgis.com/javascript/latest/references/core/views/VideoView/#layer) or [container](https://developers.arcgis.com/javascript/latest/references/core/views/VideoView/#container) change.
*
* @default false
* @see [when()](https://developers.arcgis.com/javascript/latest/references/core/views/VideoView/#when)
*/
get ready(): boolean;
/** The [VideoView](https://developers.arcgis.com/javascript/latest/references/core/views/VideoView/) instance created and manged by the component. Accessible once the component is fully loaded. */
get view(): VideoView;
/** Destroys the view, and any associated resources, including its map, popup, and UI elements. */
destroy(): Promise<void>;
readonly arcgisViewReadyChange: import("@arcgis/lumina").TargetedEvent<this, void>;
readonly "@eventTypes": {
arcgisViewReadyChange: ArcgisVideo["arcgisViewReadyChange"]["detail"];
};
}