StreamOverlayPage-BxAJ-hoc.js 16 KB

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