34 lines
25 KiB
JavaScript
34 lines
25 KiB
JavaScript
|
import{cL as t,cM as a,dC as n,dD as i,cP as o,dE as e,_ as r,n as s,b as c,t as d,a as l,dF as h,x as p,e as m,dG as u,r as g,dH as _,dI as f,dJ as v,dK as b,dL as y,l as z}from"./card-09c4bade.js";
|
||
|
|
/**
|
||
|
|
* @license
|
||
|
|
* Copyright 2018 Google LLC
|
||
|
|
* SPDX-License-Identifier: BSD-3-Clause
|
||
|
|
*/const w={},C=t(class extends a{constructor(){super(...arguments),this.ot=w}render(t,a){return a()}update(t,[a,i]){if(Array.isArray(a)){if(Array.isArray(this.ot)&&this.ot.length===a.length&&a.every(((t,a)=>t===this.ot[a])))return n}else if(this.ot===a)return n;return this.ot=Array.isArray(a)?Array.from(a):a,this.render(a,i)}});class x{constructor(){this._options=null,this._viewportIntersecting=null,this._microphoneMuteTimer=new i,this._root=null,this._eventListeners=new Map,this._children=[],this._target=null,this._mutationObserver=new MutationObserver(this._mutationHandler.bind(this)),this._intersectionObserver=new IntersectionObserver(this._intersectionHandler.bind(this)),this._mediaLoadedHandler=async t=>{this._target?.index===t&&(await this._unmuteTargetIfConfigured(this._target.selected?"selected":"visible"),await this._playTargetIfConfigured(this._target.selected?"selected":"visible"))},this._visibilityHandler=async()=>{await this._changeVisibility("visible"===document.visibilityState)},this._changeVisibility=async t=>{t?(await this._unmuteTargetIfConfigured("visible"),await this._playTargetIfConfigured("visible")):(await this._pauseAllIfConfigured("hidden"),await this._muteAllIfConfigured("hidden"))},this._microphoneChangeHandler=async t=>{"unmuted"===t?await this._unmuteTargetIfConfigured("microphone"):"muted"===t&&this._options?.autoMuteConditions?.includes("microphone")&&this._microphoneMuteTimer.start(this._options.microphoneMuteSeconds??60,(async()=>{await this._muteTargetIfConfigured("microphone")}))}}setOptions(t){this._options=t,this._options?.microphoneManager&&(this._options.microphoneManager.removeListener(this._microphoneChangeHandler),this._options.microphoneManager.addListener(this._microphoneChangeHandler))}hasRoot(){return!!this._root}destroy(){this._viewportIntersecting=null,this._microphoneMuteTimer.stop(),this._root=null,this._removeChildHandlers(),this._children=[],this._target=null,this._mutationObserver.disconnect(),this._intersectionObserver.disconnect(),this._options?.microphoneManager?.removeListener(this._microphoneChangeHandler),document.removeEventListener("visibilitychange",this._visibilityHandler)}async setTarget(t,a){this._target?.index===t&&this._target?.selected===a||(this._target?.selected&&(await this._pauseTargetIfConfigured("unselected"),await this._muteTargetIfConfigured("unselected"),this._microphoneMuteTimer.stop()),this._target={selected:a,index:t},a?(await this._unmuteTargetIfConfigured("selected"),await this._playTargetIfConfigured("selected")):(await this._unmuteTargetIfConfigured("visible"),await this._playTargetIfConfigured("visible")))}unsetTarget(){this._target=null}async _playTargetIfConfigured(t){null!==this._target&&this._options?.autoPlayConditions?.includes(t)&&await this._play(this._target.index)}async _play(t){await(this._children[t]?.play())}async _unmuteTargetIfConfigured(t){null!==this._target&&this._options?.autoUnmuteConditions?.includes(t)&&await this._unmute(this._target.index)}async _unmute(t){await(this._children[t]?.unmute())}async _pauseAllIfConfigured(t){if(this._options?.autoPauseConditions?.includes(t))for(const t of this._children.keys())await this._pause(t)}async _pauseTargetIfConfigured(t){null!==this._target&&this._options?.autoPauseConditions?.includes(t)&&await this._pause(this._target.index)}async _pause(t){await(this._children[t]?.pause())}async _muteAllIfConfigured(t){if(this._options?.autoMuteConditions?.includes(t))for(const t of this._children.keys())await this._mute(t)}async _muteTargetIfConfigured(t){null!==this._target&&this._options?.autoMuteConditions?.includes(t)&&await this._mute(this._target.index)}async _mute(t){await(this._children[t]?.mute())}_mutationHandler(t,a){this._initializeRoot()}_removeChildHandlers(){for(const[t,a]of this._eventListeners.entries())t.removeEventListener("frigate-card:media:loaded",a);this._eventListeners.clear()}initialize(t){this._root=t,this._initializeRoot(),document.addEventListener("visibilitychange",this._visibilityHandler),this._intersectionObserver.disconnect(),this._intersectionObserver.
|
||
|
|
<ha-icon icon=${t}></ha-icon>
|
||
|
|
</ha-icon-button>`}return u(this,this._embedThumbnailTask,(t=>t?p`<img
|
||
|
|
src="${t}"
|
||
|
|
class="${m(a)}"
|
||
|
|
title="${this.label}"
|
||
|
|
aria-label="${this.label}"
|
||
|
|
/>`:p``),{inProgressFunc:()=>p`<div class=${m(a)}></div>`})}static get styles(){return g("ha-icon-button.button {\n color: var(--secondary-color, white);\n background-color: rgba(0, 0, 0, 0.6);\n border-radius: 50%;\n padding: 0px;\n margin: 3px;\n --ha-icon-display: block;\n /* Buttons can always be clicked */\n pointer-events: auto;\n opacity: 0.9;\n}\n\n@keyframes pulse {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.6;\n }\n 100% {\n opacity: 1;\n }\n}\nha-icon[data-domain=alert][data-state=on],\nha-icon[data-domain=automation][data-state=on],\nha-icon[data-domain=binary_sensor][data-state=on],\nha-icon[data-domain=calendar][data-state=on],\nha-icon[data-domain=camera][data-state=streaming],\nha-icon[data-domain=cover][data-state=open],\nha-icon[data-domain=fan][data-state=on],\nha-icon[data-domain=humidifier][data-state=on],\nha-icon[data-domain=light][data-state=on],\nha-icon[data-domain=input_boolean][data-state=on],\nha-icon[data-domain=lock][data-state=unlocked],\nha-icon[data-domain=media_player][data-state=on],\nha-icon[data-domain=media_player][data-state=paused],\nha-icon[data-domain=media_player][data-state=playing],\nha-icon[data-domain=script][data-state=on],\nha-icon[data-domain=sun][data-state=above_horizon],\nha-icon[data-domain=switch][data-state=on],\nha-icon[data-domain=timer][data-state=active],\nha-icon[data-domain=vacuum][data-state=cleaning],\nha-icon[data-domain=group][data-state=on],\nha-icon[data-domain=group][data-state=home],\nha-icon[data-domain=group][data-state=open],\nha-icon[data-domain=group][data-state=locked],\nha-icon[data-domain=group][data-state=problem] {\n color: var(--paper-item-icon-active-color, #fdd835);\n}\n\nha-icon[data-domain=climate][data-state=cooling] {\n color: var(--cool-color, var(--state-climate-cool-color));\n}\n\nha-icon[data-domain=climate][data-state=heating] {\n color: var(--heat-color, var(--state-climate-heat-color));\n}\n\nha-icon[data-domain=climate][data-state=drying] {\n color: var(--dry-color, var(--state-climate-dry-color));\n}\n\nha-icon[data-domain=alarm_control_panel] {\n color: var(--alarm-color-armed, var(--label-badge-red));\n}\n\nha-icon[data-domain=alarm_control_panel][data-state=disarmed] {\n color: var(--alarm-color-disarmed, var(--label-badge-green));\n}\n\nha-icon[data-domain=alarm_control_panel][data-state=pending],\nha-icon[data-domain=alarm_control_panel][data-state=arming] {\n color: var(--alarm-color-pending, var(--label-badge-yellow));\n animation: pulse 1s infinite;\n}\n\nha-icon[data-domain=alarm_control_panel][data-state=triggered] {\n color: var(--alarm-color-triggered, var(--label-badge-red));\n animation: pulse 1s infinite;\n}\n\nha-icon[data-domain=plant][data-state=problem],\nha-icon[data-domain=zwave][data-state=dead] {\n color: var(--state-icon-error-color);\n}\n\n/* Color the icon if unavailable */\nha-icon[data-state=unavailable] {\n color: var(--state-unavailable-color);\n}\n\nha-icon-button[data-domain=alert][data-state=on],\nha-icon-button[data-domain=automation][data-state=on],\nha-icon-button[data-domain=binary_sensor][data-state=on],\nha-icon-button[data-domain=calendar][data-state=on],\nha-icon-button[data-domain=camera][data-state=streaming],\nha-icon-button[data-domain=cover][data-state=open],\nha-icon-button[data-domain=fan][data-state=on],\nha-icon-button[data-domain=humidifier][data-state=on],\nha-icon-button[data-domain=light][data-state=on],\nha-icon-button[data-domain=input_boolean][data-state=on],\nha-icon-button[data-domain=lock][data-state=unlocked],\nha-icon-button[data-domain=media_player][data-state=on],\nha-icon-button[data-domain=media_player][data-state=paused],\nha-icon-button[data-domain=media_player][data-state=playing],\nha-icon-button[data-domain=script][data-state=on],\nha-icon-button[data-domain=sun][data-state=above_horizon],\nha-icon-button[data-domain=switch][data-state=on],\nha-icon-button[data-domain=timer][data-state=active],\nha-icon-button[data-domain=vacuum][data-state=cleaning],\nha-icon-button[data-domain=group][data-state=on],\nha
|
||
|
|
class=${m({[t]:!0,disabled:!n})}
|
||
|
|
icon=${a}
|
||
|
|
.actionHandler=${b({hasHold:y(n?.hold_action),hasDoubleClick:y(n?.double_tap_action)})}
|
||
|
|
.title=${z(`elements.ptz.${t}`)}
|
||
|
|
@action=${t=>this._controller.handleAction(t,n)}
|
||
|
|
></ha-icon>`:p``,a=this._controller.getConfig();return p` <div class="ptz">
|
||
|
|
${!a?.hide_pan_tilt&&this._actionPresence?.pt?p`<div class="ptz-move">
|
||
|
|
${t("right","mdi:arrow-right",this._actions.right)}
|
||
|
|
${t("left","mdi:arrow-left",this._actions.left)}
|
||
|
|
${t("up","mdi:arrow-up",this._actions.up)}
|
||
|
|
${t("down","mdi:arrow-down",this._actions.down)}
|
||
|
|
</div>`:""}
|
||
|
|
${!a?.hide_zoom&&this._actionPresence?.z?p` <div class="ptz-zoom">
|
||
|
|
${t("zoom_in","mdi:plus",this._actions.zoom_in)}
|
||
|
|
${t("zoom_out","mdi:minus",this._actions.zoom_out)}
|
||
|
|
</div>`:p``}
|
||
|
|
${!a?.hide_home&&this._actionPresence?.home?p`<div class="ptz-home">
|
||
|
|
${t("home","mdi:home",this._actions.home)}
|
||
|
|
</div>`:p``}
|
||
|
|
</div>`}static get styles(){return g(":host {\n position: absolute;\n width: fit-content;\n height: fit-content;\n --frigate-card-ptz-icon-size: 24px;\n}\n\n:host([data-position$=-left]) {\n left: 5%;\n}\n\n:host([data-position$=-right]) {\n right: 5%;\n}\n\n:host([data-position^=top-]) {\n top: 5%;\n}\n\n:host([data-position^=bottom-]) {\n bottom: 5%;\n}\n\n/*****************\n * Main Containers\n *****************/\n.ptz {\n display: flex;\n gap: 10px;\n color: var(--light-primary-color);\n opacity: 0.4;\n transition: opacity 0.3s ease-in-out;\n}\n\n:host([data-orientation=vertical]) .ptz {\n flex-direction: column;\n}\n\n:host([data-orientation=horizontal]) .ptz {\n flex-direction: row;\n}\n\n.ptz:hover {\n opacity: 1;\n}\n\n:host([data-orientation=vertical]) .ptz div {\n width: calc(var(--frigate-card-ptz-icon-size) * 3);\n}\n\n:host([data-orientation=horizontal]) .ptz div {\n height: calc(var(--frigate-card-ptz-icon-size) * 3);\n}\n\n.ptz-move,\n.ptz-zoom,\n.ptz-home {\n position: relative;\n background-color: rgba(0, 0, 0, 0.3);\n}\n\n.ptz-move {\n height: calc(var(--frigate-card-ptz-icon-size) * 3);\n width: calc(var(--frigate-card-ptz-icon-size) * 3);\n border-radius: 50%;\n}\n\n:host([data-orientation=horizontal]) .ptz .ptz-zoom,\n:host([data-orientation=horizontal]) .ptz .ptz-home {\n width: calc(var(--frigate-card-ptz-icon-size) * 1.5);\n}\n\n:host([data-orientation=vertical]) .ptz .ptz-zoom,\n:host([data-orientation=vertical]) .ptz .ptz-home {\n height: calc(var(--frigate-card-ptz-icon-size) * 1.5);\n}\n\n.ptz-zoom,\n.ptz-home {\n border-radius: var(--ha-card-border-radius, 4px);\n}\n\n/***********\n * PTZ Icons\n ***********/\nha-icon {\n position: absolute;\n --mdc-icon-size: var(--frigate-card-ptz-icon-size);\n}\n\nha-icon:not(.disabled) {\n cursor: pointer;\n}\n\n.disabled {\n color: var(--disabled-text-color);\n}\n\n.up {\n top: 5px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.down {\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.left {\n left: 5px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.right {\n right: 5px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n:host([data-orientation=vertical]) .zoom_in {\n right: 5px;\n top: 50%;\n}\n\n:host([data-orientation=vertical]) .zoom_out {\n left: 5px;\n top: 50%;\n}\n\n:host([data-orientation=horizontal]) .zoom_in {\n left: 50%;\n top: 5px;\n}\n\n:host([data-orientation=horizontal]) .zoom_out {\n left: 50%;\n bottom: 5px;\n}\n\n:host([data-orientation=vertical]) .zoom_in,\n:host([data-orientation=vertical]) .zoom_out {\n transform: translateY(-50%);\n}\n\n:host([data-orientation=horizontal]) .zoom_in,\n:host([data-orientation=horizontal]) .zoom_out {\n transform: translateX(-50%);\n}\n\n.home {\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n}")}};r([s({attribute:!1})],k.prototype,"config",void 0),r([s({attribute:!1})],k.prototype,"cameraManager",void 0),r([s({attribute:!1})],k.prototype,"cameraID",void 0),r([s({attribute:!1})],k.prototype,"forceVisibility",void 0),k=r([d("frigate-card-ptz")],k);const M=(t,a)=>{void 0!==a?.fit?t.style.setProperty("--frigate-card-media-layout-fit",a.fit):t.style.removeProperty("--frigate-card-media-layout-fit");for(const n of["x","y"])void 0!==a?.position?.[n]?t.style.setProperty(`--frigate-card-media-layout-position-${n}`,`${a.position[n]}%`):t.style.removeProperty(`--frigate-card-media-layout-position-${n}`);for(const n of["top","bottom","left","right"])void 0!==a?.view_box?.[n]?t.style.setProperty(`--frigate-card-media-layout-view-box-${n}`,`${a.view_box[n]}%`):t.style.removeProperty(`--frigate-card-media-layout-view-box-${n}`)},E=2,H=(t,a)=>{t._controlsHideTimer&&(t._controlsHideTimer.stop(),delete t._controlsHideTimer,delete t._controlsOriginalValue),t.controls=a},O=(t,a=1)=>{const n=t._controlsOriginalValue??t.controls;H(t,!1),t._controlsHideTimer??=new i,t._controlsOriginalValue=n;const o=()=>{H(t,n),t.removeEventListener("loadstart",o)};t.addEventListener("loadstart",o),t._controlsHideTimer.start(a,(()
|