UNPKG

@hakit/components

Version:
50 lines 3.26 kB
import { EntityName, FilterByDomain, CameraEntityExtended } from '@hakit/core'; import { ButtonBarProps, CardBaseProps } from '../..'; type OmitProperties = "onClick" | "children" | "active" | "as" | "title" | "ref" | "disableActiveState" | "features"; type Extendable = Omit<CardBaseProps<"div", FilterByDomain<EntityName, "camera">>, OmitProperties>; export interface CameraCardProps<E extends FilterByDomain<EntityName, "camera">> extends Extendable { /** the camera entity to display */ entity: E; /** override the camera name displayed in the card */ name?: string; /** hide the camera name @default false */ hideName?: boolean; /** the view to display the camera in, poster is an image that updated based on the * specified interval, live is a live stream if supported and motion is a motion jpeg * (automatically selected if live stream not supported) @default 'poster' */ view?: "poster" | "live" | "motion"; /** auto play the video stream */ autoPlay?: boolean; /** mute the video player @default true */ muted?: boolean; /** enable / disable the controls for the player @default false */ controls?: boolean; /** tells the video player to play inline @default true */ playsInline?: boolean; /** the refresh rate for the poster image when in poster view @default 10000 */ posterUpdateInterval?: number; /** sensors to render in the header of the card */ headerSensors?: ButtonBarProps["children"]; /** hide the footer of the card, this will hide all sensors @default false */ hideFooter?: boolean; /** hide the view controls @default false */ hideViewControls?: boolean; /** fired when the card is clicked, this will provide the camera with all extended data */ onClick?: (camera: CameraEntityExtended, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void; } /** * The CameraCard is a card to display a live stream, poster image that refreshes at a specified interval or a motion jpeg stream. * * By Default, it will load a poster image and refresh it at a specified interval, if you want to use the live stream you can set the view to live or motion. * * This supports HLS, WebRTC and MJPEG streams, the WebRTC implementation hasn't been tested so if you're using WebRTC and it's not working for you please create an [issue request](https://github.com/shannonhochkins/ha-component-kit/issues). * * It also supports additional entities to render on the card such is motion detection, vehicle detection if you have entities that have additional data you can display them in the card easily. * * This is one of the first components that i have NOT got a complete demo working, as you can imagine setting up a live stream, motion image and refreshable poster image is a difficult and time expensive task, so you'll have to try it out to explore it's wonders :) * * Note: If you want to just use the stream, you can also import CameraStream from @hakit/components to use the stream as a video player element. * */ export declare function CameraCard<E extends FilterByDomain<EntityName, "camera">>(props: CameraCardProps<E>): import("@emotion/react/jsx-runtime").JSX.Element; export {}; //# sourceMappingURL=index.d.ts.map