@arcgis/map-components
Version:
ArcGIS Map Components
273 lines (272 loc) • 10.5 kB
TypeScript
/// <reference path="../../index.d.ts" />
import type VideoPlayerViewModel from "@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
import type VideoLayer from "@arcgis/core/layers/VideoLayer.js";
import type MapView from "@arcgis/core/views/MapView.js";
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { ArcgisReferenceElement } from "../types.js";
import type { T9nMeta } from "@arcgis/lumina/controllers";
import type { VideoState } from "@arcgis/core/layers/video/types.js";
/**
* The Video Player component provides a user interface for interacting with a [VideoLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/VideoLayer/).
* It displays the original video content and provides controls for playing, pausing, seeking, and changing the video speed and quality.
*
* The Video Player component provides the following capabilities:
* - Control operations (play, pause, seek)
* - Time and duration display
* - Customizable graphics colors
* - Following options (sensor, frame, video)
* - Adjustable speed and quality
* - Access to frame metadata
*
* The [VideoPlayerViewModel](https://developers.arcgis.com/javascript/latest/references/core/widgets/VideoPlayer/VideoPlayerViewModel/) class provides the logic for the Video Player.
*
* **Known limitations**
*
* * Not supported in 3D [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/).
* * Not supported on macOS and iOS devices.
*
* [](https://mediaspace.esri.com/media/1_ctc3psfr)
*
* @example
* ```html
* <arcgis-map>
* <arcgis-video-player slot="top-right"></arcgis-video-player>
* </arcgis-map>
*
* <script type="module">
* const [Map, VideoLayer] = await $arcgis.import([
* "@arcgis/core/Map.js",
* "@arcgis/core/layers/VideoLayer.js",
* ]);
* const viewElement = document.querySelector("arcgis-map");
* const videoPlayerElement = document.querySelector("arcgis-video-player");
* const videoLayer = new VideoLayer({
* url: "YOUR_VIDEO_LAYER_URL",
* });
* viewElement.map = new Map({
* basemap: "topo-vector",
* layers: [videoLayer],
* });
* await viewElement.viewOnReady();
* await videoLayer.load();
* if (videoLayer.loaded) {
* videoPlayerElement.layer = videoLayer;
* }
* await viewElement.whenLayerView(videoLayer);
* viewElement.goTo(videoLayer.fullExtent);
* </script>
* ```
* @since 4.33
*/
export abstract class ArcgisVideoPlayer extends LitElement {
/**
* 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-player/#destroy) method when you are done to
* prevent memory leaks.
*
* @default false
*/
accessor autoDestroyDisabled: boolean;
/**
* Determines which telemetry elements to follow when the video layer is playing.
*
* @default "follow-both"
*/
accessor followingMode: VideoPlayerViewModel["followingMode"];
/**
* Indicates whether to display the video player's header information.
*
* @default false
*/
accessor hideHeader: boolean;
/**
* Icon which represents the component.
* Typically used when the component is controlled by another component (e.g. by the Expand component).
*
* @default "video-web"
* @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
*/
accessor icon: string | undefined;
/**
* Indicates whether to render the video player in inline mode.
* In inline mode, the component uses a compact control layout without a [VideoView](https://developers.arcgis.com/javascript/latest/references/core/views/VideoView/).
*
* @default false
* @since 5.0
*/
accessor inline: boolean;
/** The component's default label. */
accessor label: string | undefined;
/**
* The [VideoLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/VideoLayer/) to use as the data source for the video player.
*
* @default null
* @example
* ```js
* // Create a new Video Player with a VideoLayer
* videoPlayer.layer = videoLayer;
* ```
*/
accessor layer: VideoLayer | null | undefined;
/**
* Replace localized message strings with your own strings.
*
* _**Note**: Individual message keys may change between releases._
*/
accessor messageOverrides: {
beginning?: string | undefined;
color?: string | undefined;
end?: string | undefined;
errorLoadingLayer?: string | undefined;
follow?: string | undefined;
forward?: string | undefined;
frame?: string | undefined;
frameCenter?: string | undefined;
frameInfo?: string | undefined;
frameOutline?: string | undefined;
graphics?: string | undefined;
layers?: string | undefined;
loop?: string | undefined;
loopPlayback?: string | undefined;
mapOverlay?: string | undefined;
metadata?: string | undefined;
metadataDescription?: string | undefined;
metadataNotLoaded?: string | undefined;
missionInfo?: string | undefined;
none?: string | undefined;
operationalData?: string | undefined;
pause?: string | undefined;
platformInfo?: string | undefined;
play?: string | undefined;
playbackSpeed?: string | undefined;
quality?: string | undefined;
reverse?: string | undefined;
sensor?: string | undefined;
sensorPath?: string | undefined;
sensorTrail?: string | undefined;
settings?: string | undefined;
sightLine?: string | undefined;
speed?: string | undefined;
video?: string | undefined;
videoPlayer?: string | undefined;
};
/** @internal */
protected messages: {
beginning: string;
color: string;
end: string;
errorLoadingLayer: string;
follow: string;
forward: string;
frame: string;
frameCenter: string;
frameInfo: string;
frameOutline: string;
graphics: string;
layers: string;
loop: string;
loopPlayback: string;
mapOverlay: string;
metadata: string;
metadataDescription: string;
metadataNotLoaded: string;
missionInfo: string;
none: string;
operationalData: string;
pause: string;
platformInfo: string;
play: string;
playbackSpeed: string;
quality: string;
reverse: string;
sensor: string;
sensorPath: string;
sensorTrail: string;
settings: string;
sightLine: string;
speed: string;
video: string;
videoPlayer: string;
} & T9nMeta<{
beginning: string;
color: string;
end: string;
errorLoadingLayer: string;
follow: string;
forward: string;
frame: string;
frameCenter: string;
frameInfo: string;
frameOutline: string;
graphics: string;
layers: string;
loop: string;
loopPlayback: string;
mapOverlay: string;
metadata: string;
metadataDescription: string;
metadataNotLoaded: string;
missionInfo: string;
none: string;
operationalData: string;
pause: string;
platformInfo: string;
play: string;
playbackSpeed: string;
quality: string;
reverse: string;
sensor: string;
sensorPath: string;
sensorTrail: string;
settings: string;
sightLine: string;
speed: string;
video: string;
videoPlayer: string;
}>;
/**
* 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;
/**
* By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
*
* @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
*/
accessor referenceElement: ArcgisReferenceElement | string | undefined;
/**
* Indicates whether to display an action in the header that toggles between inline and the default fullscreen layout.
*
* @default false
* @since 5.0
*/
accessor showFullscreenToggle: boolean;
/** The current state of the component. */
get state(): "error" | VideoState;
/**
* The view associated with the component.
* > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-video-player component will be associated with a map or scene component rather than using the `view` property.
*
* @example
* // Set the video player view model's view to a map view.
* videoPlayerViewModel.view = mapView;
*/
accessor view: MapView | null | undefined;
/** Permanently destroy the component. */
destroy(): Promise<void>;
/** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state" | "layer"; }>;
/** Emitted when the component associated with a map or scene view is ready to be interacted with. */
readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
readonly arcgisVideoReady: import("@arcgis/lumina").TargetedEvent<this, void>;
readonly "@eventTypes": {
arcgisPropertyChange: ArcgisVideoPlayer["arcgisPropertyChange"]["detail"];
arcgisReady: ArcgisVideoPlayer["arcgisReady"]["detail"];
arcgisVideoReady: ArcgisVideoPlayer["arcgisVideoReady"]["detail"];
};
}