football2801
59f5e6e0eb
CI / test (push) Has been cancelled
User-reported gaps: - Settings section order: Account top, Theme middle, Design bottom, Install at end (was Install/Design/Theme/Account) - Settings sections wrapped in glass cards with backdrop blur so they read against the harbor backdrop (was flat text) - Desktop settings now 2-column grid; section cards pack in pairs - FrameCard cog button: was white-opaque, now dark glass with light icon so it sits cleanly on the v2 dark photo backdrop - Orientation picker active state: yellow border + yellow diagram tint (was theme primary which clashed with the dusks aesthetic) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 line
21 KiB
JavaScript
1 line
21 KiB
JavaScript
import{A as e,B as t,C as n,F as r,J as i,K as a,L as o,N as s,O as c,S as l,U as u,Y as d,_ as f,b as p,f as m,g as h,h as g,k as _,p as v,q as y,t as b,v as x,x as S,y as C,z as w}from"./_plugin-vue_export-helper-BNDVmFr7.js";import{a as T,i as E,s as D}from"./index-CToMjSpo.js";import{i as O,n as ee,r as k,t as A}from"./BaseBottomSheet-Bsol3Sat.js";import{t as j}from"./types-xv3fXrtW.js";import{t as M}from"./DevicePicker-BnLOaG74.js";var N={class:`crop-editor__top`},te={key:0,class:`crop-editor__label`},P={class:`crop-editor__orient`,role:`radiogroup`,"aria-label":`Crop orientation`},F=[`aria-checked`,`aria-label`,`onClick`],I={width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"aria-hidden":`true`},L={key:0,x:`2`,y:`6`,width:`20`,height:`12`,rx:`1.5`},R={key:1,x:`6`,y:`2`,width:`12`,height:`20`,rx:`1.5`},z={key:1,class:`crop-editor__mismatch`,role:`status`},ne={class:`crop-editor__actions`},B=b(n({__name:`CropEditor`,props:{src:{},orientation:{},model:{},deviceName:{},initialParams:{},initialOrientation:{}},emits:[`crop`],setup(n,{emit:i}){let a=n,o=i,c=[{value:`landscape`,label:`Landscape crop`},{value:`portrait`,label:`Portrait crop`}],f=u(a.initialOrientation??a.orientation),p=g(()=>{let{width:e,height:t}=j(a.model??`v1`,f.value);return{w:e,h:t}}),m=g(()=>p.value.w/p.value.h),b=g(()=>f.value!==a.orientation),T=u(),E=u(),D=null,O=null,k=0,A=u(0),M=u(0),B=u(1),V={x:0,y:0,w:0,h:0},H=1;function re(e){f.value!==e&&(f.value=e,A.value=0,M.value=0,B.value=1,U())}function U(){let e=E.value,t=T.value;if(!e||!t)return;let n=t.getBoundingClientRect(),r=n.height-80,i=n.width;e.width=i,e.height=r,D=e.getContext(`2d`);let a=i-48,o=r-48,s,c;a/o>m.value?(c=o,s=c*m.value):(s=a,c=s/m.value),V={x:(i-s)/2,y:(r-c)/2,w:s,h:c},O&&W()}function W(){O&&(H=Math.max(V.w/O.naturalWidth,V.h/O.naturalHeight),a.initialParams?G(a.initialParams):(B.value=1,A.value=0,M.value=0,q()))}function G(e){if(!O)return;let t=V.w/e.natW;B.value=t/H,A.value=t*(O.naturalWidth/2-e.natX-e.natW/2),M.value=t*(O.naturalHeight/2-e.natY-e.natH/2);let[n,r]=K(A.value,M.value);A.value=n,M.value=r,q()}function K(e,t){if(!O)return[e,t];let n=H*B.value,r=O.naturalWidth*n,i=O.naturalHeight*n,a=(r-V.w)/2,o=(i-V.h)/2;return[Math.max(-a,Math.min(a,e)),Math.max(-o,Math.min(o,t))]}function q(){if(!D||!O||!E.value)return;let{width:e,height:t}=E.value,n=H*B.value,r=O.naturalWidth*n,i=O.naturalHeight*n,a=V.x+V.w/2+A.value,o=V.y+V.h/2+M.value,s=a-r/2,c=o-i/2;D.clearRect(0,0,e,t),D.drawImage(O,s,c,r,i);let l=V.x+V.w,u=V.y+V.h;D.fillStyle=`rgba(0,0,0,0.6)`,D.fillRect(0,0,e,V.y),D.fillRect(0,u,e,t-u),D.fillRect(0,V.y,V.x,V.h),D.fillRect(l,V.y,e-l,V.h),D.strokeStyle=`#fff`,D.lineWidth=2,D.strokeRect(V.x,V.y,V.w,V.h),D.lineWidth=3,[[V.x,V.y,20,0,0,20],[V.x+V.w,V.y,-20,0,0,20],[V.x,V.y+V.h,20,0,0,-20],[V.x+V.w,V.y+V.h,-20,0,0,-20]].forEach(([e,t,n,r,i,a])=>{D.beginPath(),D.moveTo(e+n,t+r),D.lineTo(e,t),D.lineTo(e+i,t+a),D.stroke()})}let J=new Map,Y=0;function X(e){if(E.value?.setPointerCapture(e.pointerId),J.set(e.pointerId,{x:e.clientX,y:e.clientY}),J.size===2){let e=[...J.values()];Y=Math.hypot(e[1].x-e[0].x,e[1].y-e[0].y)}}function ie(e){if(!J.has(e.pointerId))return;let t=J.get(e.pointerId);if(J.set(e.pointerId,{x:e.clientX,y:e.clientY}),J.size===1){let n=e.clientX-t.x,r=e.clientY-t.y,[i,a]=K(A.value+n,M.value+r);A.value=i,M.value=a,Q();return}if(J.size===2){let e=[...J.values()],t=Math.hypot(e[1].x-e[0].x,e[1].y-e[0].y);if(Y>0){let e=t/Y;B.value=Math.max(1,B.value*e);let[n,r]=K(A.value,M.value);A.value=n,M.value=r,Q()}Y=t}}function Z(e){J.delete(e.pointerId),Y=0}function Q(){cancelAnimationFrame(k),k=requestAnimationFrame(q)}async function ae(){if(!O)return;let e=H*B.value,t=V.x+V.w/2+A.value,n=V.y+V.h/2+M.value,r=t-O.naturalWidth*e/2,i=n-O.naturalHeight*e/2,a=(V.x-r)/e,s=(V.y-i)/e,c=V.w/e,l=V.h/e,{w:u,h:d}=p.value,m=new OffscreenCanvas(u,d);m.getContext(`2d`).drawImage(O,a,s,c,l,0,0,u,d),o(`crop`,{blob:await m.convertToBlob({type:`image/jpeg`,quality:.92}),params:{natX:a,natY:s,natW:c,natH:l},orientation:f.value})}let oe=new ResizeObserver(U);return e(()=>{T.value&&oe.observe(T.value),U(),O=new Image,O.onload=()=>{U(),W()},O.src=a.src}),w(()=>a.src,e=>{O&&(O.onload=()=>W(),O.src=e)}),_(()=>{oe.disconnect(),cancelAnimationFrame(k)}),(e,i)=>(s(),C(`div`,{class:`crop-editor`,ref_key:`containerRef`,ref:T},[h(`canvas`,{ref_key:`canvasRef`,ref:E,class:`crop-editor__canvas`,onPointerdown:X,onPointermove:ie,onPointerup:Z,onPointercancel:Z},null,544),h(`div`,N,[n.deviceName?(s(),C(`div`,te,d(n.deviceName),1)):x(``,!0),h(`div`,P,[(s(),C(v,null,r(c,e=>h(`button`,{key:e.value,type:`button`,role:`radio`,"aria-checked":f.value===e.value,"aria-label":e.label,class:y([`crop-editor__orient-btn`,{"crop-editor__orient-btn--active":f.value===e.value}]),onClick:t=>re(e.value)},[(s(),C(`svg`,I,[e.value===`landscape`?(s(),C(`rect`,L)):(s(),C(`rect`,R))]))],10,F)),64))]),b.value?(s(),C(`div`,z,[i[0]||=h(`svg`,{width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2.5`,"aria-hidden":`true`},[h(`path`,{d:`M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z`}),h(`line`,{x1:`12`,y1:`9`,x2:`12`,y2:`13`}),h(`line`,{x1:`12`,y1:`17`,x2:`12.01`,y2:`17`})],-1),h(`span`,null,`Frame is set to `+d(n.orientation)+`. Use the tool above to recrop for the current frame orientation, or switch the frame in Settings to display this crop.`,1)])):x(``,!0)]),h(`div`,ne,[l(ee,{variant:`primary`,class:`crop-editor__use-btn`,onClick:ae},{default:t(()=>[...i[1]||=[S(` Use this crop `,-1)]]),_:1})])],512))}}),[[`__scopeId`,`data-v-f090bd2d`]]),V=[{id:`santa-hat`,label:`Santa hat`,url:`data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3e%3cpath%20d='M%208%2052%20L%2056%2052%20Q%2050%2030%2042%2012%20Q%2032%2022%2024%2032%20Q%2014%2042%208%2052%20Z'%20fill='%23cf2030'/%3e%3cpath%20d='M%2024%2032%20Q%2014%2042%208%2052%20Q%2018%2050%2028%2044%20Q%2026%2038%2024%2032%20Z'%20fill='%23a8141d'%20opacity='0.55'/%3e%3crect%20x='6'%20y='48'%20width='52'%20height='10'%20rx='5'%20fill='%23ffffff'/%3e%3cellipse%20cx='14'%20cy='53'%20rx='2.2'%20ry='1.6'%20fill='%23ececec'/%3e%3cellipse%20cx='28'%20cy='53'%20rx='2.2'%20ry='1.6'%20fill='%23ececec'/%3e%3cellipse%20cx='42'%20cy='53'%20rx='2.2'%20ry='1.6'%20fill='%23ececec'/%3e%3cellipse%20cx='52'%20cy='53'%20rx='2'%20ry='1.4'%20fill='%23ececec'/%3e%3ccircle%20cx='42'%20cy='12'%20r='7.5'%20fill='%23ffffff'/%3e%3ccircle%20cx='40'%20cy='10'%20r='2'%20fill='%23f4f4f4'%20opacity='0.6'/%3e%3c/svg%3e`}],H={class:`sticker-tray`},re={key:0,class:`sticker-tray__section`},U={class:`sticker-tray__row`},W=[`aria-label`,`onClick`],G={key:0,class:`sticker-tray__emoji`,"aria-hidden":`true`},K=[`src`],q={class:`sticker-tray__section`},J={class:`sticker-tray__row`},Y=[`aria-label`,`onClick`],X=[`src`,`alt`],ie={class:`sticker-tray__section`},Z=`pf.stickerTray.recents`,Q=12,ae=b(n({__name:`StickerTray`,props:{modelValue:{type:Boolean}},emits:[`update:modelValue`,`pick`],setup(n,{emit:i}){let o=i,c=u([]);e(()=>{c.value=l()});function l(){try{let e=localStorage.getItem(Z);return e?JSON.parse(e).map(e=>{if(e.kind===`image`&&e.imageAsset){let t=V.find(t=>t.id===e.imageAsset);return{...e,url:t?.url,label:t?.label??e.label}}return e}).filter(e=>e.kind===`emoji`?!!e.emoji:!!e.url):[]}catch{return[]}}function p(){try{localStorage.setItem(Z,JSON.stringify(c.value))}catch{}}function m(e){c.value=[e,...c.value.filter(t=>t.key!==e.key)].slice(0,Q),p()}function g(e){if(!e)return null;if(typeof Intl<`u`&&Intl.Segmenter){let t=[...new Intl.Segmenter(void 0,{granularity:`grapheme`}).segment(e)];return t[t.length-1]?.segment??null}return[...e].pop()??null}function _(e){let t=e.target,n=g(t.value);t.value=``,n&&(m({key:`emoji:${n}`,kind:`emoji`,label:n,emoji:n}),o(`pick`,{emoji:n}))}function y(e){m({key:`image:${e.id}`,kind:`image`,label:e.label,imageAsset:e.id,url:e.url}),o(`pick`,{imageAsset:e.id})}function b(e){m(e),e.kind===`emoji`&&e.emoji?o(`pick`,{emoji:e.emoji}):e.kind===`image`&&e.imageAsset&&o(`pick`,{imageAsset:e.imageAsset})}return(e,i)=>(s(),f(A,{"model-value":n.modelValue,label:`Add sticker`,"onUpdate:modelValue":i[0]||=t=>e.$emit(`update:modelValue`,t)},{default:t(()=>[h(`div`,H,[c.value.length?(s(),C(`section`,re,[i[1]||=h(`h3`,{class:`sticker-tray__heading`},`Recent`,-1),h(`div`,U,[(s(!0),C(v,null,r(c.value,e=>(s(),C(`button`,{key:e.key,type:`button`,class:`sticker-tray__chip`,"aria-label":e.label,onClick:t=>b(e)},[e.kind===`emoji`?(s(),C(`span`,G,d(e.emoji),1)):(s(),C(`img`,{key:1,src:e.url,alt:``,class:`sticker-tray__img`},null,8,K))],8,W))),128))])])):x(``,!0),h(`section`,q,[i[2]||=h(`h3`,{class:`sticker-tray__heading`},`Stickers`,-1),h(`div`,J,[(s(!0),C(v,null,r(a(V),e=>(s(),C(`button`,{key:e.id,type:`button`,class:`sticker-tray__chip`,"aria-label":e.label,onClick:t=>y(e)},[h(`img`,{src:e.url,alt:e.label,class:`sticker-tray__img`},null,8,X)],8,Y))),128))])]),h(`section`,ie,[i[3]||=h(`h3`,{class:`sticker-tray__heading`},`Any emoji`,-1),i[4]||=h(`p`,{class:`sticker-tray__hint`},`Tap the box, then pick from your keyboard's emoji button.`,-1),h(`input`,{type:`text`,class:`sticker-tray__emoji-input`,inputmode:`text`,autocomplete:`off`,autocorrect:`off`,autocapitalize:`off`,spellcheck:`false`,placeholder:`😀 🎉 🐶 …`,"aria-label":`Emoji input — use your keyboard's emoji button`,onInput:_},null,32)])])]),_:1},8,[`model-value`]))}}),[[`__scopeId`,`data-v-9a64b78a`]]),oe=[{id:`sea-snow`,category:`seasonal`,label:`Snowflake`,emoji:`❄️`},{id:`sea-sun`,category:`seasonal`,label:`Sun`,emoji:`☀️`},{id:`sea-leaves`,category:`seasonal`,label:`Autumn`,emoji:`🍂`},{id:`sea-blossom`,category:`seasonal`,label:`Blossom`,emoji:`🌸`},{id:`sea-snowman`,category:`seasonal`,label:`Snowman`,emoji:`⛄`},{id:`hol-tree`,category:`holidays`,label:`Tree`,emoji:`🎄`},{id:`hol-gift`,category:`holidays`,label:`Gift`,emoji:`🎁`},{id:`hol-heart`,category:`holidays`,label:`Heart`,emoji:`❤️`},{id:`hol-party`,category:`holidays`,label:`Party`,emoji:`🎉`},{id:`hol-cake`,category:`holidays`,label:`Cake`,emoji:`🎂`},{id:`fun-star`,category:`fun`,label:`Star`,emoji:`⭐`},{id:`fun-rainbow`,category:`fun`,label:`Rainbow`,emoji:`🌈`},{id:`fun-balloon`,category:`fun`,label:`Balloon`,emoji:`🎈`},{id:`fun-sparkle`,category:`fun`,label:`Sparkles`,emoji:`✨`},{id:`fun-fire`,category:`fun`,label:`Fire`,emoji:`🔥`},{id:`fam-house`,category:`family`,label:`Home`,emoji:`🏠`},{id:`fam-paw`,category:`family`,label:`Paw`,emoji:`🐾`},{id:`fam-camera`,category:`family`,label:`Camera`,emoji:`📷`},{id:`fam-plane`,category:`family`,label:`Airplane`,emoji:`✈️`},{id:`fam-music`,category:`family`,label:`Music`,emoji:`🎵`},{id:`nat-tree`,category:`nature`,label:`Tree`,emoji:`🌲`},{id:`nat-flower`,category:`nature`,label:`Flower`,emoji:`🌺`},{id:`nat-bee`,category:`nature`,label:`Bee`,emoji:`🐝`},{id:`nat-fly`,category:`nature`,label:`Butterfly`,emoji:`🦋`},{id:`nat-moon`,category:`nature`,label:`Moon`,emoji:`🌙`}],se={class:`sticker-canvas__bar`},ce=52,le=96,ue=b(n({__name:`StickerCanvas`,props:{croppedUrl:{},orientation:{},model:{},stickers:{}},emits:[`add-sticker`,`update-sticker`,`remove-sticker`,`done`],setup(n,{emit:a}){let d=n,y=a,b=u(),T=u(),E=u(),D=u(),O=u(!1),k=u(null),A=u(375),M=u(225),{width:N,height:te}=j(d.model??`v1`,d.orientation),P=N/te;function F(){if(!b.value)return;let{width:e,height:t}=b.value.getBoundingClientRect(),n=t-72;e/n>P?(M.value=n,A.value=n*P):(A.value=e,M.value=e/P),R()}let I=new ResizeObserver(F);e(()=>{b.value&&I.observe(b.value),F(),ge()}),_(()=>{I.disconnect(),_e(),K?.()}),w(()=>d.stickers,()=>{if(!k.value)return;let e=(D.value?.getNode())?.findOne(`#${k.value}`);e&&q(e)},{deep:!0});let L=u(null);function R(){let e=new Image;e.onload=()=>{L.value=e},e.src=d.croppedUrl}w(()=>d.croppedUrl,()=>R(),{immediate:!0});let z=u({});e(()=>{for(let e of V){let t=new Image;t.onload=()=>{z.value={...z.value,[e.id]:t}},t.src=e.url}});let ne=g(()=>({width:A.value,height:M.value})),B=g(()=>({image:L.value,x:0,y:0,width:A.value,height:M.value})),H={enabledAnchors:[`top-left`,`top-right`,`bottom-left`,`bottom-right`],rotateEnabled:!0,borderStroke:`rgba(255,255,255,0.8)`,anchorFill:`#fff`,anchorSize:18,keepRatio:!0,boundBoxFunc:(e,t)=>t};function re(e){return{id:e.id,text:W(e),fontSize:ce,fontFamily:`"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif`,x:e.x,y:e.y,scaleX:e.scale,scaleY:e.scale,rotation:e.rotation,draggable:!0,offsetX:ce/2,offsetY:ce/2}}function U(e){return{id:e.id,image:e.imageAsset?z.value[e.imageAsset]:null,x:e.x,y:e.y,width:le,height:le,scaleX:e.scale,scaleY:e.scale,rotation:e.rotation,draggable:!0,offsetX:le/2,offsetY:le/2}}function W(e){return e.emoji?e.emoji:oe.find(t=>t.id===e.type)?.emoji??`⭐`}let G=u(null),K=null;function q(e){let t=e.getClientRect(),n=t.x+t.width+4-14,r=t.y-4-14;n=Math.max(14,Math.min(A.value-14,n)),r=Math.max(14,Math.min(M.value-14,r)),G.value={x:n,y:r}}function J(e){K?.(),K=null;let t=(D.value?.getNode())?.findOne(`#${e}`);if(!t){G.value=null;return}q(t),t.on(`dragmove.handle transform.handle transformend.handle dragend.handle`,()=>q(t)),K=()=>t.off(`.handle`)}function Y(e,t){t.cancelBubble=!0,k.value=e,c(()=>{let t=(D.value?.getNode())?.findOne(`#${e}`),n=E.value?.getNode();t&&n&&n.nodes([t]),J(e)})}function X(e){e.target===e.target.getStage()&&(k.value=null,E.value?.getNode()?.nodes([]),K?.(),K=null,G.value=null)}function ie(){k.value&&(y(`remove-sticker`,k.value),k.value=null,E.value?.getNode()?.nodes([]),K?.(),K=null,G.value=null)}function Z(e,t){y(`update-sticker`,e,{x:t.target.x(),y:t.target.y()})}function Q(e,t){y(`update-sticker`,e,{x:t.target.x(),y:t.target.y(),scale:t.target.scaleX(),rotation:t.target.rotation()})}function ue(e){let t={id:`${e.imageAsset??e.emoji??`sticker`}-${Date.now()}`,type:e.imageAsset?`image`:`emoji`,emoji:e.emoji,imageAsset:e.imageAsset,x:A.value/2,y:M.value/2,scale:1,rotation:0};y(`add-sticker`,t),O.value=!1,c(()=>Y(t.id,{cancelBubble:!1}))}let $=0,de=1;function fe(e){let t=e[0].clientX-e[1].clientX,n=e[0].clientY-e[1].clientY;return Math.hypot(t,n)}function pe(e){e.touches.length!==2||!k.value||($=fe(e.touches),de=d.stickers.find(e=>e.id===k.value)?.scale??1)}function me(e){if(e.touches.length!==2||!k.value||$===0)return;e.preventDefault();let t=Math.max(.2,Math.min(6,de*(fe(e.touches)/$)));y(`update-sticker`,k.value,{scale:t})}function he(){$=0,de=1}function ge(){let e=b.value;e&&(e.addEventListener(`touchstart`,pe,{passive:!0}),e.addEventListener(`touchmove`,me,{passive:!1}),e.addEventListener(`touchend`,he,{passive:!0}))}function _e(){let e=b.value;e&&(e.removeEventListener(`touchstart`,pe),e.removeEventListener(`touchmove`,me),e.removeEventListener(`touchend`,he))}async function ve(){k.value=null,E.value?.getNode()?.nodes([]),await c();let e=T.value?.getNode();if(!e)return;let t=N/A.value,n=await e.toBlob({pixelRatio:t,mimeType:`image/jpeg`,quality:.92});n&&y(`done`,n)}return(e,a)=>{let c=o(`v-image`),u=o(`v-layer`),d=o(`v-text`),g=o(`v-transformer`),_=o(`v-stage`);return s(),C(`div`,{class:`sticker-canvas`,ref_key:`containerRef`,ref:b},[l(_,{ref_key:`stageRef`,ref:T,config:ne.value,onClick:X,onTap:X},{default:t(()=>[l(u,null,{default:t(()=>[l(c,{config:B.value},null,8,[`config`])]),_:1}),l(u,{ref_key:`stickerLayerRef`,ref:D},{default:t(()=>[(s(!0),C(v,null,r(n.stickers,e=>(s(),C(v,{key:e.id},[e.imageAsset?(s(),f(c,{key:0,config:U(e),onClick:t=>Y(e.id,t),onTap:t=>Y(e.id,t),onDragend:t=>Z(e.id,t),onTransformend:t=>Q(e.id,t)},null,8,[`config`,`onClick`,`onTap`,`onDragend`,`onTransformend`])):(s(),f(d,{key:1,config:re(e),onClick:t=>Y(e.id,t),onTap:t=>Y(e.id,t),onDragend:t=>Z(e.id,t),onTransformend:t=>Q(e.id,t)},null,8,[`config`,`onClick`,`onTap`,`onDragend`,`onTransformend`]))],64))),128)),l(g,{ref_key:`transformerRef`,ref:E,config:H},null,512)]),_:1},512)]),_:1},8,[`config`]),G.value?(s(),C(`button`,{key:0,class:`sticker-canvas__delete-handle`,type:`button`,"aria-label":`Remove sticker`,style:i({left:G.value.x+`px`,top:G.value.y+`px`}),onPointerdown:a[0]||=m(()=>{},[`stop`]),onClick:m(ie,[`stop`])},[...a[3]||=[p(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-v-23d2647e><polyline points="3 6 5 6 21 6" data-v-23d2647e></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" data-v-23d2647e></path><path d="M10 11v6" data-v-23d2647e></path><path d="M14 11v6" data-v-23d2647e></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" data-v-23d2647e></path></svg>`,1)]],36)):x(``,!0),h(`div`,se,[h(`button`,{class:`sticker-canvas__add-btn`,type:`button`,onClick:a[1]||=e=>O.value=!0},[...a[4]||=[h(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"aria-hidden":`true`},[h(`circle`,{cx:`12`,cy:`12`,r:`10`}),h(`line`,{x1:`12`,y1:`8`,x2:`12`,y2:`16`}),h(`line`,{x1:`8`,y1:`12`,x2:`16`,y2:`12`})],-1),S(` Add sticker `,-1)]]),l(ee,{variant:`primary`,class:`sticker-canvas__next-btn`,onClick:ve},{default:t(()=>[...a[5]||=[S(`Next`,-1)]]),_:1})]),l(ae,{modelValue:O.value,"onUpdate:modelValue":a[2]||=e=>O.value=e,onPick:ue},null,8,[`modelValue`])],512)}}}),[[`__scopeId`,`data-v-23d2647e`]]),$={class:`upload-view`},de={class:`upload-view__header`},fe=[`aria-label`],pe={key:0,width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2.5`,"aria-hidden":`true`},me={key:1,width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2.5`,"aria-hidden":`true`},he={class:`upload-view__step-label`},ge={key:2,class:`upload-view__done`},_e={class:`upload-view__done-title`},ve=b(n({__name:`UploadView`,setup(n){let r=D(),i=k(),o=O(),c=T(),p=E(),m=u(`crop`),_=u(!1),v=u(!1),y=null,b=g(()=>i.editingImageId!==null);e(async()=>{if(await o.fetchDevices(),!i.originalFile){r.replace(`/`);return}m.value=`crop`});let w=g(()=>i.contextDeviceId?o.devices.find(e=>e.id===i.contextDeviceId):o.devices[0]),A=g(()=>w.value?.model??`v1`),j=g(()=>w.value?.orientation??`landscape`),N=g(()=>i.cropOrientation??j.value),te=g(()=>w.value?.name),P=g(()=>m.value===`crop`?b.value?`Edit crop`:`Crop photo`:m.value===`stickers`?`Add stickers`:b.value?`Updated`:`Added`);function F({blob:e,params:t,orientation:n}){i.setCrop(e,t,n),m.value=`stickers`}function I(){i.croppedBlob&&(y=i.croppedBlob,b.value?z():v.value=!0)}function L(e){y=e,b.value?z():v.value=!0}function R(){if(m.value===`crop`){i.cleanup(),r.replace(`/library`);return}m.value===`stickers`&&(m.value=`crop`)}async function z(){if(y){_.value=!0;try{let e=new File([y],`photo.jpg`,{type:`image/jpeg`});if(b.value){await c.reprocessImage(i.editingImageId,e,{cropParams:i.cropParams??void 0,stickerState:i.stickers,cropOrientation:i.cropOrientation??void 0}),v.value=!1,m.value=`done`;return}let t=await c.uploadImage(e,{original:i.originalFile??void 0,cropParams:i.cropParams??void 0,stickerState:i.stickers,cropOrientation:i.cropOrientation??void 0});await Promise.all(i.selectedDeviceIds.map(e=>c.setApproval(t.id,e,!0))),v.value=!1,m.value=`done`}catch(e){p.show(e instanceof Error?e.message:`Upload failed`,`error`)}finally{_.value=!1}}}function ne(){i.cleanup(),r.replace(`/library`)}return(e,n)=>(s(),C(`div`,$,[h(`header`,de,[m.value===`done`?x(``,!0):(s(),C(`button`,{key:0,class:`upload-view__back`,type:`button`,"aria-label":m.value===`crop`?`Cancel`:`Back`,onClick:R},[m.value===`crop`?(s(),C(`svg`,pe,[...n[2]||=[h(`line`,{x1:`18`,y1:`6`,x2:`6`,y2:`18`},null,-1),h(`line`,{x1:`6`,y1:`6`,x2:`18`,y2:`18`},null,-1)]])):(s(),C(`svg`,me,[...n[3]||=[h(`polyline`,{points:`15 18 9 12 15 6`},null,-1)]]))],8,fe)),h(`span`,he,d(P.value),1),m.value===`stickers`?(s(),C(`button`,{key:1,class:`upload-view__skip`,type:`button`,onClick:I},`Skip`)):x(``,!0)]),m.value===`crop`&&a(i).originalUrl?(s(),f(B,{key:0,src:a(i).originalUrl,orientation:j.value,model:A.value,"device-name":te.value,"initial-params":a(i).cropParams,"initial-orientation":a(i).cropOrientation,class:`upload-view__stage`,onCrop:F},null,8,[`src`,`orientation`,`model`,`device-name`,`initial-params`,`initial-orientation`])):m.value===`stickers`&&a(i).croppedUrl?(s(),f(ue,{key:1,"cropped-url":a(i).croppedUrl,orientation:N.value,model:A.value,stickers:a(i).stickers,class:`upload-view__stage`,onAddSticker:a(i).addSticker,onUpdateSticker:a(i).updateSticker,onRemoveSticker:a(i).removeSticker,onDone:L},null,8,[`cropped-url`,`orientation`,`model`,`stickers`,`onAddSticker`,`onUpdateSticker`,`onRemoveSticker`])):m.value===`done`?(s(),C(`div`,ge,[n[5]||=h(`div`,{class:`upload-view__done-icon`,"aria-hidden":`true`},`🎉`,-1),h(`p`,_e,d(b.value?`Photo updated!`:`Photo added!`),1),n[6]||=h(`p`,{class:`upload-view__done-sub`},`It'll appear on your frame at the next update.`,-1),l(ee,{variant:`primary`,class:`upload-view__done-btn`,onClick:ne},{default:t(()=>[...n[4]||=[S(`Done`,-1)]]),_:1})])):x(``,!0),b.value?x(``,!0):(s(),f(M,{key:3,modelValue:v.value,"onUpdate:modelValue":n[0]||=e=>v.value=e,devices:a(o).devices,selected:a(i).selectedDeviceIds,uploading:_.value,"onUpdate:selected":n[1]||=e=>a(i).selectedDeviceIds=e,onConfirm:z},null,8,[`modelValue`,`devices`,`selected`,`uploading`]))]))}}),[[`__scopeId`,`data-v-83d73c7a`]]);export{ve as default}; |