| 1 |
- import{i as e}from"./chunk-aKtaBQYM.js";import{O as t,S as n,T as r,a as i,t as a,w as o}from"./client-D5sDHQfN.js";import{n as s}from"./QueryClientProvider-RTEea2Mk.js";import{t as c}from"./useQuery-CGtzNsic.js";import{t as l}from"./box-ZYqEOjzw.js";import{t as ee}from"./timer-BXcgshKM.js";import{c as u,o as d}from"./date-G9KUauqz.js";import{$n as f,Kt as p,Ln as m,Qn as h,_n as g,kn as _,rn as te}from"./index-nsyp3RII.js";import{t as v}from"./printerModel-DrNvERGQ.js";import{a as y,n as b,o as x,s as S,t as C}from"./OverlayFrame-DOAWAnJu.js";var w=e(t(),1),T=o();function E(e,t){let[n,r]=(0,w.useState)(null);return(0,w.useLayoutEffect)(()=>{let n=e.current;if(!t||!n)return;let i=()=>{let e=n.clientWidth,t=n.clientHeight;e>0&&t>0&&r(n=>n&&n.width===e&&n.height===t?n:{width:e,height:t})};if(i(),typeof ResizeObserver>`u`)return window.addEventListener(`resize`,i),()=>window.removeEventListener(`resize`,i);let a=new ResizeObserver(i);return a.observe(n),()=>a.disconnect()},[e,t]),t?n:null}function D(e){let[t,n]=(0,w.useState)(()=>window.matchMedia(`(orientation: portrait)`).matches);return(0,w.useEffect)(()=>{if(e)return;let t=window.matchMedia(`(orientation: portrait)`),r=e=>n(e.matches);return n(t.matches),t.addEventListener(`change`,r),()=>t.removeEventListener(`change`,r)},[e]),e??(t?`portrait`:`landscape`)}function O(e){let{t}=r(),n=1-(e.backgroundTransparency??0)/100,i={"--overlay-background-alpha":n,"--overlay-identity-alpha":n*.9,"--overlay-panel-alpha":n*.88};(0,w.useLayoutEffect)(()=>{if(n===1)return;let e=document.body.style.backgroundColor;return document.body.style.backgroundColor=`transparent`,()=>{document.body.style.backgroundColor=e}},[n]);let a=D(e.layout),{camera:o,name:s,model:c,filename:l,status:u,state:d,progress:f,layers:p,remaining:h,eta:_,temperatures:v}=e,y=x(e.progressBackground),b=l||u||f!=null||p||h||_||v.length>0,S=o?.rotation??0,C=Math.abs(S%180)===90,O=(0,w.useRef)(null),k=E(O,C&&o!=null),A=[{key:`layers`,icon:(0,T.jsx)(g,{}),label:t(`streamOverlay.layer`),value:p},{key:`remaining`,icon:(0,T.jsx)(ee,{}),label:t(`streamOverlay.remaining`),value:h},{key:`eta`,icon:(0,T.jsx)(m,{}),label:t(`streamOverlay.eta`),value:_}].filter(e=>e.value!=null);return(0,T.jsxs)(`div`,{className:`updated-overlay`,"data-size":e.size,"data-layout":a,"data-state":d,style:i,children:[(0,T.jsxs)(`header`,{className:`updated-overlay__header`,children:[(s||c)&&(0,T.jsxs)(`div`,{className:`updated-overlay__identity`,children:[(0,T.jsx)(te,{"aria-hidden":`true`}),(0,T.jsxs)(`div`,{children:[s&&(0,T.jsx)(`strong`,{children:s}),c&&(0,T.jsx)(`span`,{children:c})]})]}),(0,T.jsxs)(`div`,{className:`updated-overlay__logo flex flex-col items-end`,children:[e.customLogo,(0,T.jsx)(`a`,{href:`https://github.com/maziggy/bambuddy`,target:`_blank`,rel:`noopener noreferrer`,children:(0,T.jsx)(`img`,{src:`/img/bambuddy_logo_powered_by.png`,alt:`Bambuddy`})})]})]}),o&&(0,T.jsx)(`div`,{className:`updated-overlay__camera`,ref:O,children:(0,T.jsx)(`img`,{ref:o.imgRef,src:o.url,alt:t(`streamOverlay.cameraStream`),style:{transform:`translate(-50%, -50%) rotate(${S}deg)`,...C&&k?{width:k.height,height:k.width}:{}},onError:o.onError})}),b&&(0,T.jsxs)(`section`,{className:`updated-overlay__panel`,children:[(l||u)&&(0,T.jsxs)(`div`,{className:`updated-overlay__summary`,children:[l&&(0,T.jsx)(`h1`,{children:l}),u&&(0,T.jsxs)(`div`,{className:`updated-overlay__status`,children:[(0,T.jsx)(`span`,{"aria-hidden":`true`}),u]})]}),f!=null&&(0,T.jsxs)(`div`,{className:`updated-overlay__progress`,children:[(0,T.jsx)(`span`,{style:y,children:t(`streamOverlay.progress`)}),(0,T.jsx)(`div`,{role:`progressbar`,"aria-label":t(`streamOverlay.progress`),"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":f,children:(0,T.jsx)(`div`,{style:{width:`${f}%`,background:e.progressBackground}})}),(0,T.jsxs)(`strong`,{style:y,children:[Math.round(f),`%`]})]}),(A.length>0||v.length>0)&&(0,T.jsxs)(`div`,{className:`updated-overlay__readings`,children:[A.length>0&&(0,T.jsx)(`div`,{className:`updated-overlay__stats`,children:A.map(e=>(0,T.jsxs)(`div`,{className:`updated-overlay__reading`,children:[e.icon,(0,T.jsxs)(`div`,{children:[(0,T.jsx)(`span`,{children:e.label}),(0,T.jsx)(`strong`,{children:e.value})]})]},e.key))}),v.length>0&&(0,T.jsx)(`div`,{className:`updated-overlay__temperatures`,children:v.map(e=>(0,T.jsxs)(`div`,{className:`updated-overlay__reading`,children:[e.icon,(0,T.jsxs)(`div`,{children:[(0,T.jsx)(`span`,{children:e.label}),(0,T.jsxs)(`strong`,{children:[Math.round(e.current),`°C`,e.target!=null&&e.target>0&&Math.round(e.target)!==Math.round(e.current)&&(0,T.jsxs)(`small`,{children:[` / `,Math.round(e.target),`°C`]})]})]})]},e.key))})]})]})]})}var k=6e4,A=3e3,j=200;function ne(e){let[t,n]=(0,w.useState)(Date.now),[r,i]=(0,w.useState)(!1),a=(0,w.useRef)(null),o=(0,w.useRef)(null),s=(0,w.useCallback)(()=>{a.current?.removeAttribute(`src`),i(!0)},[]),c=(0,w.useCallback)(()=>{o.current!==null&&(clearTimeout(o.current),o.current=null),i(!1),n(e=>e+1)},[]);return(0,w.useEffect)(()=>{if(!e)return;let t=setTimeout(s,k-j),n=setTimeout(c,k);return()=>{clearTimeout(t),clearTimeout(n),o.current!==null&&(clearTimeout(o.current),o.current=null),i(!1)}},[e,t,c,s]),{imageKey:t,closing:r,imgRef:a,handleStreamError:(0,w.useCallback)(t=>{!e||o.current!==null||t&&!t.currentTarget.getAttribute(`src`)||(s(),o.current=setTimeout(c,A))},[e,c,s])}}function re(e,t,n){if(!e)return``;if(!t)return e;let r=t.match(/plate_(\d+)\.gcode/);return r&&parseInt(r[1],10)>1?`${e} — ${n(`printers.plateNumber`,`Plate {{number}}`,{number:r[1]})}`:e}function ie(e){let t=e.get(`show`)?.split(`,`)||[`progress`,`layers`,`eta`,`filename`,`status`],n=parseInt(e.get(`fps`)||`15`,10),r=Math.min(Math.max(isNaN(n)?15:n,1),30),i=e.get(`camera`),a=i!==`false`&&i!==`0`,o=Number(e.get(`backgroundTransparency`)),s=Number.isFinite(o)?Math.min(100,Math.max(0,o)):0,c=e.get(`layout`);return{layout:c===`portrait`||c===`landscape`?c:null,backgroundTransparency:s,size:e.get(`size`)||`medium`,fps:r,updatedArtwork:e.get(`artwork`)===`2`,showCamera:a,showProgress:t.includes(`progress`),showLayers:t.includes(`layers`),showEta:t.includes(`eta`),showFilename:t.includes(`filename`),showStatus:t.includes(`status`),showPrinter:t.includes(`printer`),showModel:t.includes(`model`),showNozzle:t.includes(`nozzle`),showBed:t.includes(`bed`),showChamber:t.includes(`chamber`)}}function ae(e,t){if(e.stg_cur_name)return e.stg_cur_name;switch(e.state){case`RUNNING`:return t(`streamOverlay.status.printing`);case`PAUSE`:return t(`streamOverlay.status.paused`);case`FINISH`:return t(`streamOverlay.status.finished`);case`FAILED`:return t(`streamOverlay.status.failed`);case`IDLE`:return t(`streamOverlay.status.idle`);default:return e.state||t(`streamOverlay.status.unknown`)}}function M(e,t){let n=e[t];return typeof n==`number`?n:null}function oe({icon:e,label:t,current:n,target:r,sizes:i}){let a=r!=null&&r>0&&Math.round(r)!==Math.round(n);return(0,T.jsxs)(`div`,{className:`flex items-center ${i.gap} text-white/70`,children:[e,(0,T.jsxs)(`span`,{className:`classic-overlay__text ${i.text}`,children:[(0,T.jsx)(`span`,{className:`mr-1`,children:t}),(0,T.jsxs)(`span`,{className:`text-white`,children:[Math.round(n),`°C`]}),a&&(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(`span`,{className:`mx-1`,children:`/`}),(0,T.jsxs)(`span`,{children:[Math.round(r),`°C`]})]})]})]})}function se(e){switch(e){case`small`:return{container:`p-3`,text:`text-sm`,textLarge:`text-lg`,progressHeight:`h-2`,icon:`w-3 h-3`,gap:`gap-2`,logoHeight:`h-12`};case`large`:return{container:`p-6`,text:`text-xl`,textLarge:`text-3xl`,progressHeight:`h-4`,icon:`w-6 h-6`,gap:`gap-4`,logoHeight:`h-24`};default:return{container:`p-4`,text:`text-base`,textLarge:`text-xl`,progressHeight:`h-3`,icon:`w-4 h-4`,gap:`gap-3`,logoHeight:`h-16`}}}function N(){let{printerId:e}=h(),[t]=f(),{t:o}=r(),E=s(),D=parseInt(e||`0`,10),k=(0,w.useMemo)(()=>ie(t),[t]),A=se(k.size),j=t.get(`token`),N=j!=null&&j!==``,P=S(t.get(`logo`)===`1`,j),F=y(t.get(`progressFrom`),t.get(`progressTo`)),I=x(F),L=P?(0,T.jsx)(`img`,{src:P,alt:o(`streamOverlay.branding.logo`),className:`mb-2 object-contain`,style:{maxHeight:k.layout?b[k.layout].height*.14:`14vh`,maxWidth:k.layout?b[k.layout].width*.2:`20vw`}}):null,{data:R}=c({queryKey:[`overlayStatus`,D,j],queryFn:()=>i.getOverlayStatus(D,j??void 0),enabled:D>0&&N,refetchInterval:2e3}),{data:z}=c({queryKey:[`printer`,D],queryFn:()=>i.getPrinter(D),enabled:D>0&&!N}),{data:ce}=c({queryKey:[`printerStatus`,D],queryFn:()=>i.getPrinterStatus(D),enabled:D>0&&!N,refetchInterval:2e3}),{data:le}=c({queryKey:[`settings`],queryFn:i.getSettings,enabled:!N}),B=(0,w.useMemo)(()=>N?R&&{name:R.name,model:R.model,camera_rotation:R.camera_rotation}:z,[N,R,z]),V=[k.showPrinter?B?.name:null,k.showModel?v(B?.model??null):null].filter(Boolean).join(` · `),H=N?R:ce,{imageKey:U,closing:W,imgRef:G,handleStreamError:K}=ne(D>0&&k.showCamera&&H!=null),ue=(N?R?.time_format:le?.time_format)||`system`;if((0,w.useEffect)(()=>{if(!D||N)return;let e=null,t=!1;return(async()=>{let n;try{n=(await i.getWebSocketToken()).token}catch(e){let t=e instanceof a?e.status:0;if(t===401||t===403)return}if(t)return;let r=window.location.protocol===`https:`?`wss:`:`ws:`,o=n?`?token=${encodeURIComponent(n)}`:``,s=`${r}//${window.location.host}/api/v1/ws${o}`;e=new WebSocket(s),e.onmessage=e=>{try{let t=JSON.parse(e.data);t.type===`printer_status`&&t.printer_id===D&&E.setQueryData([`printerStatus`,D],e=>e?{...e,...t.data}:t.data)}catch{}},e.onerror=()=>{}})(),()=>{t=!0,e&&e.close()}},[D,N,E]),(0,w.useEffect)(()=>(document.title=B?`${B.name} - ${o(`streamOverlay.title`)}`:o(`streamOverlay.title`),()=>{document.title=`Bambuddy`}),[B,o]),!D)return(0,T.jsx)(`div`,{className:`min-h-screen bg-black flex items-center justify-center`,children:(0,T.jsx)(`p`,{className:`text-white`,children:o(`streamOverlay.invalidPrinterId`)})});if(!H)return(0,T.jsx)(`div`,{className:`min-h-screen bg-black flex items-center justify-center`,children:(0,T.jsx)(`p`,{className:`text-gray-400`,children:o(`common.loading`)})});let q=H.connected&&(H.state===`RUNNING`||H.state===`PAUSE`),J=H.progress||0,Y=H.temperatures??{},X=[];if(k.showNozzle){let e=M(Y,`nozzle`),t=M(Y,`nozzle_2`);e!=null&&X.push({key:`nozzle`,icon:(0,T.jsx)(_,{className:`classic-overlay__icon ${A.icon}`}),label:o(`printers.heaterHistory.nozzle`,`Nozzle`),current:e,target:M(Y,`nozzle_target`)}),t!=null&&X.push({key:`nozzle_2`,icon:(0,T.jsx)(_,{className:`classic-overlay__icon ${A.icon}`}),label:o(`printers.heaterHistory.nozzle2`,`Nozzle 2`),current:t,target:M(Y,`nozzle_2_target`)})}if(k.showBed){let e=M(Y,`bed`);e!=null&&X.push({key:`bed`,icon:(0,T.jsx)(p,{className:`classic-overlay__icon ${A.icon}`}),label:o(`printers.heaterHistory.bed`,`Bed`),current:e,target:M(Y,`bed_target`)})}if(k.showChamber){let e=M(Y,`chamber`);e!=null&&X.push({key:`chamber`,icon:(0,T.jsx)(l,{className:`classic-overlay__icon ${A.icon}`}),label:o(`printers.heaterHistory.chamber`,`Chamber`),current:e,target:M(Y,`chamber_target`)})}let de=`/api/v1/printers/${D}/camera/stream?fps=${k.fps}&t=${U}`,Z=N&&j?`${de}&token=${encodeURIComponent(j)}`:n(de);if(k.updatedArtwork){let e=H.connected&&q,t=H.remaining_time,n=e&&k.showEta&&t!=null&&t>0,r=(0,T.jsx)(O,{layout:k.layout??void 0,backgroundTransparency:k.backgroundTransparency,customLogo:L,progressBackground:F,size:k.size,camera:k.showCamera?{url:W?void 0:Z,rotation:B?.camera_rotation??0,onError:K,imgRef:G}:null,name:k.showPrinter?B?.name??null:null,model:k.showModel&&v(B?.model??null)||null,filename:k.showFilename&&H.current_print?re(H.current_print.replace(/\.gcode\.3mf$|\.3mf$|\.gcode$/i,``),H.gcode_file,o):null,status:k.showStatus?H.connected?ae(H,o):o(`streamOverlay.printerOffline`):null,state:H.connected?H.state:null,progress:e&&k.showProgress?Math.min(100,Math.max(0,Number.isFinite(J)?J:0)):null,layers:e&&k.showLayers&&H.layer_num!=null&&H.total_layers!=null&&H.total_layers>0?`${H.layer_num} / ${H.total_layers}`:null,remaining:n?d(t*60):null,eta:n?u(t,ue,o):null,temperatures:H.connected?X:[]});return k.layout?(0,T.jsx)(C,{layout:k.layout,children:r}):r}let Q=k.layout?b[k.layout]:null,$=B?.camera_rotation??0,fe=Math.abs($%180)===90,pe=(0,T.jsxs)(`div`,{className:`classic-overlay min-h-screen bg-black relative overflow-hidden`,"data-layout":k.layout??void 0,"data-size":k.size,children:[k.showCamera&&(0,T.jsx)(`img`,{ref:G,src:W?void 0:Z,alt:o(`streamOverlay.cameraStream`),className:`absolute inset-0 w-full h-full object-contain`,style:Q?{left:`50%`,top:`50%`,maxWidth:`none`,width:fe?Q.height:Q.width,height:fe?Q.width:Q.height,transform:`translate(-50%, -50%) rotate(${$}deg)`}:$?{transform:`rotate(${$}deg)`}:void 0,onError:K},U),(0,T.jsxs)(`div`,{className:`absolute top-4 right-4 z-10 flex flex-col items-end`,children:[L,(0,T.jsx)(`a`,{href:`https://github.com/maziggy/bambuddy`,target:`_blank`,rel:`noopener noreferrer`,children:(0,T.jsx)(`img`,{src:`/img/bambuddy_logo_dark_transparent.png`,alt:`Bambuddy`,className:`classic-overlay__logo ${A.logoHeight} object-contain drop-shadow-lg hover:scale-105 transition-transform`})})]}),(0,T.jsx)(`div`,{className:`absolute bottom-0 left-0 right-0 z-10 bg-gradient-to-t from-black/80 via-black/60 to-transparent`,children:(0,T.jsxs)(`div`,{className:`classic-overlay__panel ${A.container}`,children:[V&&(0,T.jsxs)(`div`,{className:`flex items-center ${A.gap} mb-2`,children:[(0,T.jsx)(te,{className:`classic-overlay__icon ${A.icon} shrink-0 text-white/70`}),(0,T.jsx)(`span`,{className:`classic-overlay__text ${A.text} min-w-0 truncate text-white font-medium`,children:V})]}),k.showFilename&&H.current_print&&(0,T.jsx)(`div`,{className:`classic-overlay__filename ${A.textLarge} text-white font-semibold mb-2 truncate drop-shadow-md`,children:re(H.current_print.replace(/\.gcode\.3mf$|\.3mf$|\.gcode$/i,``),H.gcode_file,o)}),k.showStatus&&(0,T.jsx)(`div`,{className:`classic-overlay__text ${A.text} text-white/70 mb-2`,children:H.connected?ae(H,o):o(`streamOverlay.printerOffline`)}),k.showProgress&&q&&(0,T.jsxs)(`div`,{className:`mb-3`,children:[(0,T.jsxs)(`div`,{className:`flex items-center justify-between mb-1 classic-overlay__text ${A.text}`,children:[(0,T.jsx)(`span`,{className:`text-white/70`,style:I,children:o(`streamOverlay.progress`)}),(0,T.jsxs)(`span`,{className:`text-white font-bold`,style:I,children:[Math.round(J),`%`]})]}),(0,T.jsx)(`div`,{className:`w-full bg-white/20 rounded-full ${A.progressHeight}`,children:(0,T.jsx)(`div`,{className:`bg-bambu-green ${A.progressHeight} rounded-full transition-all duration-500`,style:{width:`${J}%`,background:F}})})]}),q&&(k.showLayers||k.showEta)&&(0,T.jsxs)(`div`,{className:`flex items-center ${A.gap} flex-wrap`,children:[k.showLayers&&H.layer_num!=null&&H.total_layers!=null&&H.total_layers>0&&(0,T.jsxs)(`div`,{className:`flex items-center ${A.gap} text-white/70`,children:[(0,T.jsx)(g,{className:`classic-overlay__icon ${A.icon}`}),(0,T.jsxs)(`span`,{className:`classic-overlay__text ${A.text}`,children:[(0,T.jsx)(`span`,{className:`text-white`,children:H.layer_num}),(0,T.jsx)(`span`,{className:`mx-1`,children:`/`}),(0,T.jsx)(`span`,{children:H.total_layers})]})]}),k.showEta&&H.remaining_time!=null&&H.remaining_time>0&&(0,T.jsxs)(T.Fragment,{children:[(0,T.jsxs)(`div`,{className:`flex items-center ${A.gap} text-white/70`,children:[(0,T.jsx)(ee,{className:`classic-overlay__icon ${A.icon}`}),(0,T.jsx)(`span`,{className:`classic-overlay__text ${A.text} text-white`,children:d(H.remaining_time*60)})]}),(0,T.jsxs)(`div`,{className:`flex items-center ${A.gap} text-white/70`,children:[(0,T.jsx)(m,{className:`classic-overlay__icon ${A.icon}`}),(0,T.jsxs)(`span`,{className:`classic-overlay__text ${A.text} text-white`,children:[o(`streamOverlay.eta`),` `,u(H.remaining_time,ue,o)]})]})]})]}),X.length>0&&H.connected&&(0,T.jsx)(`div`,{className:`flex items-center ${A.gap} flex-wrap mt-2`,children:X.map(e=>(0,T.jsx)(oe,{icon:e.icon,label:e.label,current:e.current,target:e.target,sizes:A},e.key))})]})})]});return k.layout?(0,T.jsx)(C,{layout:k.layout,children:pe}):pe}export{N as StreamOverlayPage};
|