reactdesk-core
Version:
A powerful React-based desktop environment library for creating Windows 11-like desktop interfaces with window management, taskbar, themes, and more
94 lines (81 loc) • 18.9 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),n=require("styled-components"),r=require("./index-DZwMQg-m.js"),o=require("./index-B8LTnm77.js"),i=require("./WindowActionIcons-Bm1GKve8.js"),s=require("./useTitlebarContextMenu-Bggb47Lr.js"),a=n(o.m.div)`
backdrop-filter: ${({theme:e})=>`blur(${e.sizes.taskbar.blur})`};
background-color: ${({theme:e})=>e.colors.taskbar.background};
border: ${({theme:e})=>`1px solid ${e.colors.taskbar.peekBorder}`};
border-bottom: 0;
border-radius: 6px;
bottom: ${o.WIN_TASKBAR_HEIGHT}px;
display: flex;
overflow: hidden;
place-content: center;
place-items: flex-start;
position: fixed;
z-index: 1000;
transform: ${({$offsetX:e})=>e?`translateX(${e}px)`:void 0};
${r.StyledTaskbarEntry}:hover & {
background-color: hsla(0, 0%, 25%, 85%);
&:active {
background-color: ${({theme:e})=>e.colors.taskbar.activeForeground};
}
}
img {
height: ${({theme:e})=>e.sizes.taskbar.entry.peekImage.height}px;
margin: ${({theme:e})=>e.sizes.taskbar.entry.peekImage.margin}px;
max-height: ${o.PEEK_MAX_WIDTH}px;
max-width: ${o.PEEK_MAX_WIDTH}px;
min-height: 80px;
min-width: 80px;
object-fit: contain;
}
button.close {
background-color: rgba(40, 40, 40, 0.1);
height: 24px;
position: absolute;
right: 0;
top: 0;
width: 24px;
svg {
fill: rgb(252, 246, 247);
width: 12px;
}
&:active {
background-color: rgb(139, 10, 20) !important;
}
&:hover {
background-color: rgb(194, 22, 36);
}
}
.controls {
display: flex;
place-content: center;
position: absolute;
top: ${({theme:e})=>e.sizes.taskbar.entry.peekImage.height+2*e.sizes.taskbar.entry.peekImage.margin}px;
width: 100%;
button {
background-color: rgb(70, 70, 70);
border: 1px solid rgb(46, 46, 46);
display: flex;
height: 27px;
place-content: center;
place-items: center;
width: 27px;
&:active {
background-color: rgb(61, 96, 153) !important;
border: 1px solid rgb(49, 77, 122) !important;
}
&:hover {
background-color: rgb(54, 101, 179);
border: 1px solid rgb(43, 81, 143);
}
svg {
fill: #fff;
height: 16px;
margin-left: 1px;
pointer-events: none;
user-select: none;
width: 16px;
}
}
}
`;const c=(()=>{let e=0;return()=>(e+=1,`u${`0000${(Math.random()*36**4|0).toString(36)}`.slice(-4)}${e}`)})();function l(e){const t=[];for(let n=0,r=e.length;n<r;n++)t.push(e[n]);return t}let u=null;function d(e={}){return u||(e.includeStyleProperties?(u=e.includeStyleProperties,u):(u=l(window.getComputedStyle(document.documentElement)),u))}function h(e,t){const n=(e.ownerDocument.defaultView||window).getComputedStyle(e).getPropertyValue(t);return n?parseFloat(n.replace("px","")):0}function f(e,t={}){return{width:t.width||function(e){const t=h(e,"border-left-width"),n=h(e,"border-right-width");return e.clientWidth+t+n}(e),height:t.height||function(e){const t=h(e,"border-top-width"),n=h(e,"border-bottom-width");return e.clientHeight+t+n}(e)}}const m=16384;function g(e){return new Promise((t,n)=>{const r=new Image;r.onload=()=>{r.decode().then(()=>{requestAnimationFrame(()=>t(r))})},r.onerror=n,r.crossOrigin="anonymous",r.decoding="async",r.src=e})}async function p(e,t,n){const r="http://www.w3.org/2000/svg",o=document.createElementNS(r,"svg"),i=document.createElementNS(r,"foreignObject");return o.setAttribute("width",`${t}`),o.setAttribute("height",`${n}`),o.setAttribute("viewBox",`0 0 ${t} ${n}`),i.setAttribute("width","100%"),i.setAttribute("height","100%"),i.setAttribute("x","0"),i.setAttribute("y","0"),i.setAttribute("externalResourcesRequired","true"),o.appendChild(i),i.appendChild(e),async function(e){return Promise.resolve().then(()=>(new XMLSerializer).serializeToString(e)).then(encodeURIComponent).then(e=>`data:image/svg+xml;charset=utf-8,${e}`)}(o)}const w=(e,t)=>{if(e instanceof t)return!0;const n=Object.getPrototypeOf(e);return null!==n&&(n.constructor.name===t.name||w(n,t))};function y(e,t,n,r){const o=`.${e}:${t}`,i=n.cssText?function(e){const t=e.getPropertyValue("content");return`${e.cssText} content: '${t.replace(/'|"/g,"")}';`}(n):function(e,t){return d(t).map(t=>`${t}: ${e.getPropertyValue(t)}${e.getPropertyPriority(t)?" !important":""};`).join(" ")}(n,r);return document.createTextNode(`${o}{${i}}`)}function b(e,t,n,r){const o=window.getComputedStyle(e,n),i=o.getPropertyValue("content");if(""===i||"none"===i)return;const s=c();try{t.className=`${t.className} ${s}`}catch(l){return}const a=document.createElement("style");a.appendChild(y(s,n,o,r)),t.appendChild(a)}const x="application/font-woff",E="image/jpeg",S={woff:x,woff2:x,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:E,jpeg:E,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml",webp:"image/webp"};function v(e){const t=function(e){const t=/\.([^./]*?)$/g.exec(e);return t?t[1]:""}(e).toLowerCase();return S[t]||""}function C(e){return-1!==e.search(/^(data:)/)}async function k(e,t,n){const r=await fetch(e,t);if(404===r.status)throw new Error(`Resource "${r.url}" not found`);const o=await r.blob();return new Promise((e,t)=>{const i=new FileReader;i.onerror=t,i.onloadend=()=>{try{e(n({res:r,result:i.result}))}catch(o){t(o)}},i.readAsDataURL(o)})}const $={};async function I(e,t,n){const r=function(e,t,n){let r=e.replace(/\?.*/,"");return n&&(r=e),/ttf|otf|eot|woff2?/i.test(r)&&(r=r.replace(/.*\//,"")),t?`[${t}]${r}`:r}(e,t,n.includeQueryParams);if(null!=$[r])return $[r];let o;n.cacheBust&&(e+=(/\?/.test(e)?"&":"?")+(new Date).getTime());try{const r=await k(e,n.fetchRequestInit,({res:e,result:n})=>(t||(t=e.headers.get("Content-Type")||""),function(e){return e.split(/,/)[1]}(n)));o=function(e,t){return`data:${t};base64,${e}`}(r,t)}catch(i){o=n.imagePlaceholder||"";let t=`Failed to fetch resource: ${e}`;i&&(t="string"==typeof i?i:i.message),t&&console.warn(t)}return $[r]=o,o}async function T(e,t){return w(e,HTMLCanvasElement)?async function(e){const t=e.toDataURL();return"data:,"===t?e.cloneNode(!1):g(t)}(e):w(e,HTMLVideoElement)?async function(e,t){if(e.currentSrc){const t=document.createElement("canvas"),n=t.getContext("2d");return t.width=e.clientWidth,t.height=e.clientHeight,null==n||n.drawImage(e,0,0,t.width,t.height),g(t.toDataURL())}const n=e.poster,r=v(n);return g(await I(n,r,t))}(e,t):w(e,HTMLIFrameElement)?async function(e,t){var n;try{if(null===(n=null==e?void 0:e.contentDocument)||void 0===n?void 0:n.body)return await P(e.contentDocument.body,t,!0)}catch(r){}return e.cloneNode(!1)}(e,t):e.cloneNode(R(e))}const N=e=>null!=e.tagName&&"SLOT"===e.tagName.toUpperCase(),R=e=>null!=e.tagName&&"SVG"===e.tagName.toUpperCase();function L(e,t,n){return w(t,Element)&&(function(e,t,n){const r=t.style;if(!r)return;const o=window.getComputedStyle(e);o.cssText?(r.cssText=o.cssText,r.transformOrigin=o.transformOrigin):d(n).forEach(n=>{let i=o.getPropertyValue(n);if("font-size"===n&&i.endsWith("px")){const e=Math.floor(parseFloat(i.substring(0,i.length-2)))-.1;i=`${e}px`}w(e,HTMLIFrameElement)&&"display"===n&&"inline"===i&&(i="block"),"d"===n&&t.getAttribute("d")&&(i=`path(${t.getAttribute("d")})`),r.setProperty(n,i,o.getPropertyPriority(n))})}(e,t,n),function(e,t,n){b(e,t,":before",n),b(e,t,":after",n)}(e,t,n),function(e,t){w(e,HTMLTextAreaElement)&&(t.innerHTML=e.value),w(e,HTMLInputElement)&&t.setAttribute("value",e.value)}(e,t),function(e,t){if(w(e,HTMLSelectElement)){const n=t,r=Array.from(n.children).find(t=>e.value===t.getAttribute("value"));r&&r.setAttribute("selected","")}}(e,t)),t}async function P(e,t,n){return n||!t.filter||t.filter(e)?Promise.resolve(e).then(e=>T(e,t)).then(n=>async function(e,t,n){var r,o;if(R(t))return t;let i=[];return i=N(e)&&e.assignedNodes?l(e.assignedNodes()):w(e,HTMLIFrameElement)&&(null===(r=e.contentDocument)||void 0===r?void 0:r.body)?l(e.contentDocument.body.childNodes):l((null!==(o=e.shadowRoot)&&void 0!==o?o:e).childNodes),0===i.length||w(e,HTMLVideoElement)||await i.reduce((e,r)=>e.then(()=>P(r,n)).then(e=>{e&&t.appendChild(e)}),Promise.resolve()),t}(e,n,t)).then(n=>L(e,n,t)).then(e=>async function(e,t){const n=e.querySelectorAll?e.querySelectorAll("use"):[];if(0===n.length)return e;const r={};for(let i=0;i<n.length;i++){const o=n[i].getAttribute("xlink:href");if(o){const n=e.querySelector(o),i=document.querySelector(o);n||!i||r[o]||(r[o]=await P(i,t,!0))}}const o=Object.values(r);if(o.length){const t="http://www.w3.org/1999/xhtml",n=document.createElementNS(t,"svg");n.setAttribute("xmlns",t),n.style.position="absolute",n.style.width="0",n.style.height="0",n.style.overflow="hidden",n.style.display="none";const r=document.createElementNS(t,"defs");n.appendChild(r);for(let e=0;e<o.length;e++)r.appendChild(o[e]);e.appendChild(n)}return e}(e,t)):null}const M=/url\((['"]?)([^'"]+?)\1\)/g,A=/url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g,D=/src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;async function H(e,t,n,r,o){try{const i=n?function(e,t){if(e.match(/^[a-z]+:\/\//i))return e;if(e.match(/^\/\//))return window.location.protocol+e;if(e.match(/^[a-z]+:/i))return e;const n=document.implementation.createHTMLDocument(),r=n.createElement("base"),o=n.createElement("a");return n.head.appendChild(r),n.body.appendChild(o),t&&(r.href=t),o.href=e,o.href}(t,n):t,s=v(t);let a;return o||(a=await I(i,s,r)),e.replace(function(e){const t=e.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1");return new RegExp(`(url\\(['"]?)(${t})(['"]?\\))`,"g")}(t),`$1${a}$3`)}catch(i){}return e}function j(e){return-1!==e.search(M)}async function O(e,t,n){if(!j(e))return e;const r=function(e,{preferredFontFormat:t}){return t?e.replace(D,e=>{for(;;){const[n,,r]=A.exec(e)||[];if(!r)return"";if(r===t)return`src: ${n};`}}):e}(e,n),o=function(e){const t=[];return e.replace(M,(e,n,r)=>(t.push(r),e)),t.filter(e=>!C(e))}(r);return o.reduce((e,r)=>e.then(e=>H(e,r,t,n)),Promise.resolve(r))}async function _(e,t,n){var r;const o=null===(r=t.style)||void 0===r?void 0:r.getPropertyValue(e);if(o){const r=await O(o,null,n);return t.style.setProperty(e,r,t.style.getPropertyPriority(e)),!0}return!1}async function W(e,t){w(e,Element)&&(await async function(e,t){await _("background",e,t)||await _("background-image",e,t),await _("mask",e,t)||await _("-webkit-mask",e,t)||await _("mask-image",e,t)||await _("-webkit-mask-image",e,t)}(e,t),await async function(e,t){const n=w(e,HTMLImageElement);if((!n||C(e.src))&&(!w(e,SVGImageElement)||C(e.href.baseVal)))return;const r=n?e.src:e.href.baseVal,o=await I(r,v(r),t);await new Promise((r,i)=>{e.onload=r,e.onerror=t.onImageErrorHandler?(...e)=>{try{r(t.onImageErrorHandler(...e))}catch(n){i(n)}}:i;const s=e;s.decode&&(s.decode=r),"lazy"===s.loading&&(s.loading="eager"),n?(e.srcset="",e.src=o):e.href.baseVal=o})}(e,t),await async function(e,t){const n=l(e.childNodes).map(e=>W(e,t));await Promise.all(n).then(()=>e)}(e,t))}const F={};async function q(e){let t=F[e];if(null!=t)return t;const n=await fetch(e);return t={url:e,cssText:await n.text()},F[e]=t,t}async function V(e,t){let n=e.cssText;const r=/url\(["']?([^"')]+)["']?\)/g,o=(n.match(/url\([^)]+\)/g)||[]).map(async o=>{let i=o.replace(r,"$1");return i.startsWith("https://")||(i=new URL(i,e.url).href),k(i,t.fetchRequestInit,({result:e})=>(n=n.replace(o,`url(${e})`),[o,e]))});return Promise.all(o).then(()=>n)}function z(e){if(null==e)return[];const t=[];let n=e.replace(/(\/\*[\s\S]*?\*\/)/gi,"");const r=new RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})","gi");for(;;){const e=r.exec(n);if(null===e)break;t.push(e[0])}n=n.replace(r,"");const o=/@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi,i=new RegExp("((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})","gi");for(;;){let e=o.exec(n);if(null===e){if(e=i.exec(n),null===e)break;o.lastIndex=i.lastIndex}else i.lastIndex=o.lastIndex;t.push(e[0])}return t}async function B(e,t){if(null==e.ownerDocument)throw new Error("Provided element is not within a Document");const n=l(e.ownerDocument.styleSheets),r=await async function(e,t){const n=[],r=[];return e.forEach(n=>{if("cssRules"in n)try{l(n.cssRules||[]).forEach((e,o)=>{if(e.type===CSSRule.IMPORT_RULE){let i=o+1;const s=q(e.href).then(e=>V(e,t)).then(e=>z(e).forEach(e=>{try{n.insertRule(e,e.startsWith("@import")?i+=1:n.cssRules.length)}catch(t){console.error("Error inserting rule from remote css",{rule:e,error:t})}})).catch(e=>{console.error("Error loading remote css",e.toString())});r.push(s)}})}catch(o){const i=e.find(e=>null==e.href)||document.styleSheets[0];null!=n.href&&r.push(q(n.href).then(e=>V(e,t)).then(e=>z(e).forEach(e=>{i.insertRule(e,i.cssRules.length)})).catch(e=>{console.error("Error loading remote stylesheet",e)})),console.error("Error inlining remote css file",o)}}),Promise.all(r).then(()=>(e.forEach(e=>{if("cssRules"in e)try{l(e.cssRules||[]).forEach(e=>{n.push(e)})}catch(t){console.error(`Error while reading CSS rules from ${e.href}`,t)}}),n))}(n,t);return function(e){return e.filter(e=>e.type===CSSRule.FONT_FACE_RULE).filter(e=>j(e.style.getPropertyValue("src")))}(r)}function U(e){return e.trim().replace(/["']/g,"")}async function X(e,t){const n=await B(e,t),r=function(e){const t=new Set;return function e(n){(n.style.fontFamily||getComputedStyle(n).fontFamily).split(",").forEach(e=>{t.add(U(e))}),Array.from(n.children).forEach(t=>{t instanceof HTMLElement&&e(t)})}(e),t}(e);return(await Promise.all(n.filter(e=>r.has(U(e.style.fontFamily))).map(e=>{const n=e.parentStyleSheet?e.parentStyleSheet.href:null;return O(e.cssText,n,t)}))).join("\n")}async function K(e,t={}){const{width:n,height:r}=f(e,t),o=await P(e,t,!0);await async function(e,t){const n=null!=t.fontEmbedCSS?t.fontEmbedCSS:t.skipFonts?null:await X(e,t);if(n){const t=document.createElement("style"),r=document.createTextNode(n);t.appendChild(r),e.firstChild?e.insertBefore(t,e.firstChild):e.appendChild(t)}}(o,t),await W(o,t),function(e,t){const{style:n}=e;t.backgroundColor&&(n.backgroundColor=t.backgroundColor),t.width&&(n.width=`${t.width}px`),t.height&&(n.height=`${t.height}px`);const r=t.style;null!=r&&Object.keys(r).forEach(e=>{n[e]=r[e]})}(o,t);return await p(o,n,r)}async function G(e,t={}){const{width:n,height:r}=f(e,t),o=await K(e,t),i=await g(o),s=document.createElement("canvas"),a=s.getContext("2d"),c=t.pixelRatio||function(){let e,t;try{t=process}catch(r){}const n=t&&t.env?t.env.devicePixelRatio:null;return n&&(e=parseInt(n,10),Number.isNaN(e)&&(e=1)),e||window.devicePixelRatio||1}(),l=t.canvasWidth||n,u=t.canvasHeight||r;return s.width=l*c,s.height=u*c,t.skipAutoScale||function(e){(e.width>m||e.height>m)&&(e.width>m&&e.height>m?e.width>e.height?(e.height*=m/e.width,e.width=m):(e.width*=m/e.height,e.height=m):e.width>m?(e.height*=m/e.width,e.width=m):(e.width*=m/e.height,e.height=m))}(s),s.style.width=`${l}`,s.style.height=`${u}`,t.backgroundColor&&(a.fillStyle=t.backgroundColor,a.fillRect(0,0,s.width,s.height)),a.drawImage(i,0,0,s.width,s.height),s}const Q=o.MILLISECONDS_IN_SECOND/10,Y=new Map,J=async e=>{const t="VIDEO"===e.tagName?{margin:"0",padding:"0"}:{};return G(e,{...e.clientWidth>o.PEEK_MAX_WIDTH&&{canvasHeight:Math.round(o.PEEK_MAX_WIDTH/e.clientWidth*e.clientHeight),canvasWidth:o.PEEK_MAX_WIDTH},filter:e=>!(e instanceof HTMLSourceElement),skipAutoScale:!0,style:{inset:"0",...t}})},Z=async(e,t,n,r,i)=>{if(!t.current)return;const s=()=>{setTimeout(()=>{window.requestAnimationFrame(()=>{Z(e,t,n,r,i)})},Q)};let a;try{a=await J(e)}catch{}a&&a.width>0&&a.height>0?o.isCanvasDrawn(a)?a.toBlob(e=>{if(!e)return;const t=URL.createObjectURL(e);r.current=t,Y.set(i,t),n(t),window.setTimeout(s,o.MILLISECONDS_IN_SECOND/10)},"image/webp"):window.setTimeout(s,o.MILLISECONDS_IN_SECOND/10):s()},ee=t.memo(()=>e.jsx("svg",{viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M8 29.328V2.672h2.672v26.656H8zM21.328 2.672H24v26.656h-2.672V2.672z"})})),te=t.memo(()=>e.jsx("svg",{viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M28 16 8 30V2z"})})),ne=t.memo(({id:r})=>{const{minimize:c,windows:{[r]:l}}=o.useContext$1(),{pause:u,paused:d,play:h,minimized:f=!1,title:m=r}=l||{},{setForegroundId:g,setPreviewID:p}=o.useContext(),{onClose:w}=s.useWindowActions(r),[y,b]=t.useState(0),x=(e=>{const{windows:{[e]:n}}=o.useContext$1(),{peekElement:r,componentWindow:i}=n||{},s=t.useRef(),[a,c]=t.useState(""),l=t.useRef(!0),u=t.useRef(""),d=t.useCallback(t=>{window.requestAnimationFrame(()=>Z(t,l,c,u,e)),l.current=!0},[e]),h=t.useCallback(async t=>{try{const n=await J(t);n&&n.width>0&&n.height>0&&o.isCanvasDrawn(n)&&n.toBlob(t=>{if(!t)return;const n=URL.createObjectURL(t);u.current=n,Y.set(e,n),c(n)},"image/webp")}catch{}},[e]);return t.useEffect(()=>{const t=r||i;if(Y.has(e)){c(Y.get(e));const n=window.setTimeout(()=>{!s.current&&t&&(s.current=window.setTimeout(()=>d(t),document.querySelector(".peekWindow")?0:o.MILLISECONDS_IN_SECOND/2))},2500);return()=>{clearTimeout(n),u.current&&Y.set(e,u.current)}}return!s.current&&t&&(h(t),s.current=window.setTimeout(()=>d(t),document.querySelector(".peekWindow")?0:o.MILLISECONDS_IN_SECOND/2)),()=>{s.current&&(clearTimeout(s.current),s.current=void 0),l.current=!1,u.current&&Y.set(e,u.current)}},[i,r,e,d,h]),a})(r),E=t.useMemo(()=>Boolean(h&&u&&d),[u,d,h]),S=((e=!1)=>{const{sizes:{taskbar:t}}=n.useTheme();let r=t.entry.peekImage.height+2*t.entry.peekImage.margin;return e&&(r+=t.entry.peekControlsHeight),{animate:"active",exit:"initial",initial:"initial",transition:{duration:o.TRANSITIONS_IN_SECONDS.WINDOW/3,ease:[.42,0,.58,1]},variants:{active:{height:r,opacity:1},initial:{height:0,opacity:0}}}})(E),v=t.useRef(null),[C,k]=t.useState(!1),$=t.useRef(!1);return t.useEffect(()=>{E&&d&&!$.current&&($.current=!0,k(d(k)))},[d,E]),t.useLayoutEffect(()=>{var e;if(x){const{left:t=0,right:n=0}=(null==(e=v.current)?void 0:e.getBoundingClientRect())||{},r=o.viewWidth();t<0?b(Math.abs(t)):n>r&&b(r-n)}},[x]),x?e.jsxs(a,{ref:v,$offsetX:y,className:"peekWindow",onClick:()=>{f&&c(r),p(!1),g(r)},...S,...o.FOCUSABLE_ELEMENT,children:[e.jsx("img",{alt:m,decoding:"async",loading:"eager",src:x,...o.HIGH_PRIORITY_ELEMENT}),e.jsx(o.Button,{className:"close",onClick:w,...o.label("Close"),children:e.jsx(i.CloseIcon,{})}),E&&e.jsxs("div",{className:"controls",children:[C&&e.jsx(o.Button,{onClick:e=>{o.haltEvent(e),null==h||h()},...o.label("Play"),...o.FOCUSABLE_ELEMENT,children:e.jsx(te,{})}),!C&&e.jsx(o.Button,{onClick:e=>{o.haltEvent(e),null==u||u()},...o.label("Pause"),...o.FOCUSABLE_ELEMENT,children:e.jsx(ee,{})})]})]}):null});exports.default=ne;
//# sourceMappingURL=PeekWindow-DuxVu9rR.js.map