react-dev-companion/dist/react-dev-companion.cjs.js

A fun dev companion for React Devs

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),h=require("react");function g(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const s=g(h),v=s.createContext(void 0);function T({children:e}){const[n,t]=s.useState(()=>{const o=localStorage.getItem("@dev-companion/active-time");return o?JSON.parse(o):0}),r=o=>{t(o),localStorage.setItem("@dev-companion/active-time",JSON.stringify(o))},c=()=>{t(0),localStorage.setItem("@dev-companion/active-time",JSON.stringify(0))};return i.jsx(v.Provider,{value:{activeTime:n,updateActiveTime:r,resetActiveTime:c},children:e})}const b=()=>{const e=s.useContext(v);if(!e)throw new Error("useAppContext must be used within an AppProvider");return e},x=3e5,y=3e5;function k(){const{activeTime:e,updateActiveTime:n,resetActiveTime:t}=b(),r=s.useRef(null),c=s.useRef(null),o=s.useRef(null),l=s.useCallback(()=>{o.current!==null&&clearTimeout(o.current),o.current=setTimeout(()=>{t()},y)},[t]);return s.useEffect(()=>{const a=()=>{r.current===null&&(r.current=setInterval(()=>{n(e+1e3)},1e3))},m=()=>{r.current!==null&&clearInterval(r.current),r.current=null};document.hidden?c.current=Date.now():a();const f=()=>{if(document.hidden){m(),c.current=Date.now();return}if(c.current!==null){const u=Date.now()-c.current;c.current=null,u>x?t():n(e+u)}a()},p=()=>{l(),r.current||a()};return document.addEventListener("visibilitychange",f),d.forEach(u=>document.addEventListener(u,p)),()=>{m(),document.removeEventListener("visibilitychange",f),d.forEach(u=>document.removeEventListener(u,p))}},[n,e,l,t]),{activeTime:e}}const d=["mousemove","keydown","scroll","click","scroll"];function w(e){const n=Math.floor(e/1e3),t=Math.floor(n/60),r=n%60,c=t>0?`${t} min`:"",o=`${r} sec`;return c?`${c} ${o}`:o}function A({direction:e="bottom-right",resetOnClick:n=!1}){const{activeTime:t}=k(),{resetActiveTime:r}=b(),c=w(t),o=t<5e3;return i.jsxs("div",{className:`fixed flex flex-col 
      ${e==="top-left"?"top-8 left-6":""} 
      ${e==="top-right"?"top-8 right-6":""}
      ${e==="bottom-left"?"bottom-8 left-6":""}
      ${e==="bottom-right"?"bottom-8 right-6":""}
      `,children:[i.jsx("button",{...n&&{onClick:r},className:"p-2 rounded-full size-fit button peer cursor-pointer z-10 text-white bg-black ",children:i.jsx("video",{className:"size-10",autoPlay:!0,muted:!0,playsInline:!0,loop:!o,children:i.jsx("source",{src:o?"https://raw.githubusercontent.com/khxif/react-dev-companion/main/src/assets/cat-wakeup.mp4":"https://raw.githubusercontent.com/khxif/react-dev-companion/main/src/assets/cat-walk.mp4",type:"video/mp4"})},o?"wakeup":"walk")}),i.jsx("span",{className:`w-28 px-2 py-1 rounded-md absolute text-center mb-0.5
       text-xs hidden peer-hover:block bottom-full text-gray-200 bg-black
        ${e==="top-left"?"-left-5":""}
        ${e==="top-right"?"-right-6":""}
        ${e==="bottom-left"?"-left-5":""}
        ${e==="bottom-right"?"-right-6":""}
       `,children:c})]})}function j({...e}){const[n,t]=s.useState(!1);return s.useEffect(()=>{t(!0)},[]),!n||process.env.NODE_ENV!=="development"?null:i.jsx(T,{children:i.jsx(A,{...e})})}exports.Companion=j;