34 lines
20 KiB
JavaScript
34 lines
20 KiB
JavaScript
|
import{dw as t,dx as i,dy as e,dz as n,cK as o,dA as a,_ as s,n as r,b as l,t as c,a as d,dB as h,x as p,e as u,dC as f,r as _,dD as g,dE as m,dF as v,dG as b,dH as y,l as z,db as w}from"./card-e5d55e5b.js";
|
||
|
|
/**
|
||
|
|
* @license
|
||
|
|
* Copyright 2018 Google LLC
|
||
|
|
* SPDX-License-Identifier: BSD-3-Clause
|
||
|
|
*/const C={},x=t(class extends i{constructor(){super(...arguments),this.ot=C}render(t,i){return i()}update(t,[i,n]){if(Array.isArray(i)){if(Array.isArray(this.ot)&&this.ot.length===i.length&&i.every(((t,i)=>t===this.ot[i])))return e}else if(this.ot===i)return e;return this.ot=Array.isArray(i)?Array.from(i):i,this.render(i,n)}});class I{constructor(){this._options=null,this._viewportIntersecting=null,this._microphoneMuteTimer=new n,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,i){this._target?.index===t&&this._target?.selected===i||(this._target?.selected&&(await this._pauseTargetIfConfigured("unselected"),await this._muteTargetIfConfigured("unselected"),this._microphoneMuteTimer.stop()),this._target={selected:i,index:t},i?(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,i){this._initializeRoot()}_removeChildHandlers(){for(const[t,i]of this._eventListeners.entries())t.removeEventListener("frigate-card:media:loaded",i);this._eventListeners.clear()}initialize(t){this._root=t,this._initializeRoot(),document.addEventListener("visibilitychange",this._visibilityHandler),this._intersectionObserver.disconnect(),this._intersectionObserver.
|
||
|
|
<frigate-card-icon .hass=${this.hass} .icon=${t}></frigate-card-icon>
|
||
|
|
</ha-icon-button>`}return f(this._embedThumbnailTask,(t=>t?p`<img
|
||
|
|
src="${t}"
|
||
|
|
class="${u(i)}"
|
||
|
|
title="${this.label}"
|
||
|
|
aria-label="${this.label}"
|
||
|
|
/>`:p``),{inProgressFunc:()=>p`<div class=${u(i)}></div>`,errorFunc:t=>{this._thumbnailError=!0}})}static get styles(){return _("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:host {\n --frigate-card-next-prev-size: 48px;\n --frigate-card-next-prev-size-hover: calc(var(--frigate-card-next-prev-size) * 2);\n --frigate-card-left-position: 45px;\n --frigate-card-right-position: 45px;\n --mdc-icon-button-size: var(--frigate-card-next-prev-size);\n --mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);\n}\n\n.controls {\n position: absolute;\n z-index: 1;\n overflow: hidden;\n}\n\n.controls.left {\n left: var(--frigate-card-left-position);\n}\n\n.controls.right {\n right: var(--frigate-card-right-position);\n}\n\n.controls.icons {\n top: calc(50% - var(--frigate-card-next-prev-size) / 2);\n}\n\n.controls.thumbnails {\n border-radius: 50%;\n height: var(--frigate-card-next-prev-size);\n top: calc(50% - var(--frigate-card-next-prev-size) / 2);\n box-shadow: var(--frigate-card-css-box-shadow, 0px 0px 20px 5px black);\n transition: all 0.2s ease-out;\n opacity: 0.8;\n aspect-ratio: 1/1;\n}\n\n.controls.thumbnails:hover {\n opacity: 1 !important;\n height: var(--frigate-card-next-prev-size-hover);\n top: calc(50% - var(--frigate-card-next-prev-size-hover) / 2);\n}\n\n.controls.left.thumbnails:hover {\n left: calc(var(--frigate-card-left-position) - (var(--frigate-card-next-prev-size-hover) - var(--frigate-card-next-prev-size)) / 2);\n}\n\n.controls.right.thumbnails:hover {\n right: calc(var(--frigate-card-right-position) - (var(--frigate-card-next-prev-size-hover) - var(--frigate-card-next-prev-size)) / 2);\n}")}};s([r({attribute:!1})],P.prototype,"side",void 0),s([r({attribute:!1})],P.prototype,"hass",void 0),s([l()],P.prototype,"_controlConfig",void 0),s([r({attribute:!1})],P.prototype,"thumbnail",void 0),s([r({attribute:!1})],P.prototype,"icon",void 0),s([r({attribute:!0,type:Boolean})],P.prototype,"disabled",void 0),s([r()],P.prototype,"label",void 0),s([l()],P.prototype,"_thumbnailError",void 0),P=s([c("frigate-card-next-previous-control")],P);class E{constructor(t){this._config=null,this._hass=null,this._cameraManager=null,this._cameraID=null,this._host=t}setConfig(t){this._config=t??null,this._host.setAttribute("data-orientation",t?.orientation??"horizontal"),this._host.setAttribute("data-position",t?.position??"bottom-right"),this._host.setAttribute("style",Object.entries(t?.style??{}).map((([t,i])=>`${t}:${i}`)).join(";"))}getConfig(){return this._config}setCamera(t,i){this._cameraManager=t??null,this._cameraID=i??null}setForceVisibility(t){this._forceVisibility=t}handleAction(t,i){t.stopPropagation();const e=t.detail.action,n=g(e,i);n&&m(this._host,{action:n,...i&&{config:i}})}hasUsefulAction(){const t={pt:!0,z:!0,home:!0};if(!this._cameraID)return t;const i=this._cameraManager?.getCameraCapabilities(this._cameraID);if(!i||!i.hasPTZCapability())return t;const e=i.getPTZCapabilities();return{pt:!!(e?.up||e?.down||e?.left||e?.right),z:!!e?.zoomIn||!!e?.zoomOut,home:!!e?.presets?.length}}shouldDisplay(){return void 0!==this._forceVisibility?this._forceVisibility:"auto"===this._config?.mode?!!this._cameraID&&!!this._cameraManager?.getCameraCapabilities(this._cameraID)?.hasPTZCapability():"on"===this._config?.mode}getPTZActions(){const t=t=>({start_tap_action:v({ptzAction:t?.ptzAction,ptzPhase:"start",ptzPreset:t?.preset}),end_tap_action:v({ptzAction:t?.ptzAction,ptzPhase:"stop",ptzPreset:t?.preset})}),i={};return i.up=t({ptzAction:"up"}),i.down=t({ptzAction:"down"}),i.left=t({ptzAction:"left"}),i.right=t({ptzAction:"right"}),i.zoom_in=t({ptzAction:"zoom_in"}),i.zoom_out=t({ptzAction:"zoom_out"}),i.home={tap_action:v()},i}}let M=class extends d{constructor(){super(...arguments),this._controller=new E(this),this._actions=this._controller.getPTZActions(),this._ac
|
||
|
|
class=${u({[t]:!0,disabled:!e})}
|
||
|
|
.icon=${{icon:i}}
|
||
|
|
.actionHandler=${b({hasHold:y(e?.hold_action),hasDoubleClick:y(e?.double_tap_action)})}
|
||
|
|
.title=${z(`elements.ptz.${t}`)}
|
||
|
|
@action=${t=>this._controller.handleAction(t,e)}
|
||
|
|
></frigate-card-icon>`:p``,i=this._controller.getConfig();return p` <div class="ptz">
|
||
|
|
${!i?.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>`:""}
|
||
|
|
${!i?.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``}
|
||
|
|
${!i?.hide_home&&this._actionPresence?.home?p`<div class="ptz-home">
|
||
|
|
${t("home","mdi:home",this._actions.home)}
|
||
|
|
</div>`:p``}
|
||
|
|
</div>`}static get styles(){return _(":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 ***********/\nfrigate-card-icon {\n position: absolute;\n --mdc-icon-size: var(--frigate-card-ptz-icon-size);\n}\n\nfrigate-card-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}")}};function H(t){w(t,"live:error")}s([r({attribute:!1})],M.prototype,"config",void 0),s([r({attribute:!1})],M.prototype,"cameraManager",void 0),s([r({attribute:!1})],M.prototype,"cameraID",void 0),s([r({attribute:!1})],M.prototype,"forceVisibility",void 0),M=s([c("frigate-card-ptz")],M);const k=(t,i)=>{void 0!==i?.fit?t.style.setProperty("--frigate-card-media-layout-fit",i.fit):t.style.removeProperty("--frigate-card-media-layout-fit");for(const e of["x","y"])void 0!==i?.position?.[e]?t.style.setProperty(`--frigate-card-media-layout-position-${e}`,`${i.position[e]}%`):t.style.removeProperty(`--frigate-card-media-layout-position-${e}`);for(const e of["top","bottom","left","right"])void 0!==i?.view_box?.[e]?t.style.setProperty(`--frigate-card-media-layout-view-box-${e}`,`${i.view_box[e]}%`):t.style.removeProperty(`--frigate-card-media-layout-view-box-${e}`)},O=2,R=(t,i)=>{t._controlsHideTimer&&(t._controlsHideTimer.stop(),delete t._controlsHideTimer,delete t._controlsOriginalValue),t.controls=i},N=(t,i=1)=>{const e=t._controlsOriginalValue??t.controls;R(t,!1),t._controlsHideTimer??=new n,t._controlsOriginalValue=e;const o=()=>{R(t,e),t.removeEventListener("loadstart",o)};t.addEventList
|