@nethesis/phone-island 0.7.36 → 0.7.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../node_modules/tslib/tslib.es6.js"),t=require("react"),n=require("../styles/Island.styles.js");require("../node_modules/react-redux/es/index.js");var a=require("../node_modules/@fortawesome/react-fontawesome/index.es.js"),o=require("../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js");require("../node_modules/framer-motion/dist/framer-motion.js");var r=require("../lib/phone/call.js"),i=require("../utils/useLongPress.js"),l=require("../node_modules/react-moment/dist/index.js"),s=require("../utils/useLocalStorage.js"),u=require("./AudioBars.js"),d=require("../utils/getTranslate.js"),c=require("./Button.js"),m=require("../_virtual/framer-motion.js"),f=require("../node_modules/react-redux/es/hooks/useSelector.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=p(t),x=m.framerMotion.exports.motion(n.StyledDynamicIsland);m.framerMotion.exports.motion(n.StyledMusicIconBar);var h=m.framerMotion.exports.motion(n.StyledAlbumArtThumb);m.framerMotion.exports.motion(n.StyledMusicIcon);var v=m.framerMotion.exports.motion(n.StyledArtistDetails),y=0,E=0,w=function(p){var w=p.always,b=t.useState(!0),j=b[0],S=b[1],q=f.useSelector((function(e){return e.currentCall})),M=q.incoming,N=q.accepted,A=q.outgoing,I=q.displayName,B=q.number,C=q.startTime,P=f.useSelector((function(e){return e.player})).audio,_=m.framerMotion.exports.useDragControls(),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../node_modules/tslib/tslib.es6.js"),t=require("react"),n=require("../styles/Island.styles.js");require("../node_modules/react-redux/es/index.js");var a=require("../node_modules/@fortawesome/react-fontawesome/index.es.js"),o=require("../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js");require("../node_modules/framer-motion/dist/framer-motion.js");var r=require("../lib/phone/call.js"),i=require("../utils/useLongPress.js"),l=require("../node_modules/react-moment/dist/index.js"),s=require("../utils/useLocalStorage.js"),u=require("./AudioBars.js"),d=require("../utils/getTranslate.js"),c=require("./Button.js"),m=require("../_virtual/framer-motion.js"),f=require("../node_modules/react-redux/es/hooks/useSelector.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=p(t),x=m.framerMotion.exports.motion(n.StyledDynamicIsland);m.framerMotion.exports.motion(n.StyledMusicIconBar);var h=m.framerMotion.exports.motion(n.StyledAlbumArtThumb);m.framerMotion.exports.motion(n.StyledMusicIcon);var v=m.framerMotion.exports.motion(n.StyledArtistDetails),y=0,E=0,w=function(p){var w=p.always,b=t.useState(!0),j=b[0],S=b[1],q=f.useSelector((function(e){return e.currentCall})),M=q.incoming,N=q.accepted,A=q.outgoing,I=q.displayName,B=q.number,C=q.startTime,P=f.useSelector((function(e){return e.player})).audio,_=m.framerMotion.exports.useDragControls(),z=s.useLocalStorage("phone-island",null),D=z[0],F=z[1],R=t.useRef(null),L=t.useRef(null),T=t.useState(D&&D.position?D.position:null),H=T[0],O=T[1],V=t.useState(!1),k=V[0],W=V[1];function G(){return!A&&!N}var Y=i.useLongPress((function(){console.log("long press trigger")}),(function(){S(!j)}),k,(function(){W(!1)}),{shouldPreventDefault:!0,delay:250}),J={open:{width:"48px",height:"48px",borderRadius:"12px",margin:"0 auto"},closed:{width:"20px",height:"20px",borderRadius:"4px"}},K=t.useState(null),Q=K[0],U=K[1];return t.useEffect((function(){var e=null==P?void 0:P.addEventListener("play",(function(){navigator.userAgent.indexOf("Firefox")>-1?U(P.mozCaptureStream()):U(P.captureStream())}));return function(){null==P||P.removeEventListener("play",e)}}),[P]),g.default.createElement("div",{ref:L,className:"absolute min-w-full min-h-full left-0 top-0 overflow-hidden pointer-events-none flex items-center justify-center content-center phone-island-container z-1000"},(M||A||N||w)&&g.default.createElement(x,e.__assign({className:"font-sans absolute pointer-events-auto",incoming:M,accepted:N,outgoing:A,isOpen:j,animate:j&&(M||A)&&!N?"openIncoming":j&&N?"openAccepted":"closed",variants:{openIncoming:{width:"418px",height:"96px",borderRadius:"20px"},openAccepted:{width:"348px",height:"236px",borderRadius:"20px"},closed:{width:"156px",height:"36px",borderRadius:"999px"}},drag:!0,onPointerDown:function(e){_.start(e)},onDragStart:function(){W(!0)},dragTransition:{power:0},initial:{x:(null==H?void 0:H.x)||y,y:(null==H?void 0:H.y)||E},style:{padding:j?"24px":"8px 16px"},dragControls:_,dragConstraints:L,onDragEnd:function(){var e=d.getTranslateValues(R.current),t=e.x,n=e.y;t=function(e){var t=L.current.offsetWidth/2-R.current.offsetWidth/2;return e>0&&e>t?t:e<0&&e<-t?-t:e}(Math.round(t)),n=function(e){var t=L.current.offsetHeight/2-R.current.offsetHeight/2;return e>0&&e>t?t:e<0&&e<-t?-t:e}(Math.round(n)),F({position:{x:t,y:n}}),O({x:t,y:n})},ref:R},Y),g.default.createElement(n.StyledDynamicIslandTopContent,{isOpen:j,incoming:M,accepted:N,outgoing:A},g.default.createElement("div",{className:"relative w-12 h-12"},(M||A)&&g.default.createElement(m.framerMotion.exports.motion.div,{style:{animation:"ping 2s cubic-bezier(0, 0, 0.2, 1) infinite",borderRadius:"4px"},animate:j?"open":"closed",variants:J,className:"rounded-xl bg-white absolute opacity-60 -z-10 top-0 left-0 animate-ping h-12 w-12"}),g.default.createElement(h,{className:"z-10 h-12 w-12",animate:j?"open":"closed",variants:J,src:"https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"})),g.default.createElement("div",null,j&&g.default.createElement(v,{initial:{opacity:0},animate:{opacity:1}},g.default.createElement(n.StyledSongName,null,I&&I),g.default.createElement(n.StyledArtistName,null,N?g.default.createElement(l.default,{date:C,interval:1e3,format:"hh:mm:ss",trim:"mid",unix:!0,durationFromNow:!0}):g.default.createElement(g.default.Fragment,null,B&&B)))),N&&g.default.createElement(u.AudioBars,{audioStream:Q})),j&&g.default.createElement("div",{className:"grid gap-y-5"},N&&g.default.createElement("div",{className:"grid grid-cols-4 auto-cols-max gap-y-5 justify-items-center place-items-center justify-center"},g.default.createElement(c.Button,{variant:"default"},g.default.createElement(a.FontAwesomeIcon,{size:"xl",icon:o.faPause})),g.default.createElement(c.Button,{variant:"default"},g.default.createElement(a.FontAwesomeIcon,{size:"xl",icon:o.faMicrophone})),g.default.createElement(c.Button,{variant:"default"},g.default.createElement(a.FontAwesomeIcon,{size:"xl",icon:o.faRightLeft})),g.default.createElement(c.Button,{variant:"neutral"},g.default.createElement(a.FontAwesomeIcon,{size:"xl",icon:o.faChevronDown}))),g.default.createElement(m.framerMotion.exports.motion.div,{className:"grid ".concat(G()?"grid-cols-2":N?"grid-cols-1 justify-items-center":"grid-cols-1 justify-items-end"," gap-3.5"),animate:{opacity:1}},g.default.createElement(c.Button,{onClick:function(e){e.stopPropagation(),r.hangupCurrentCall()},variant:"red"},g.default.createElement(a.FontAwesomeIcon,{className:"rotate-135",size:"2x",icon:o.faPhone})),G()&&g.default.createElement(c.Button,{onClick:function(e){r.answerIncomingCall()},variant:"green"},g.default.createElement(a.FontAwesomeIcon,{size:"2x",icon:o.faPhone}))))),g.default.createElement("audio",{id:"audio",className:"hidden",autoPlay:!0}),g.default.createElement("video",{id:"localVideo",className:"hidden",muted:!0,autoPlay:!0}),g.default.createElement("video",{id:"remoteVideo",className:"hidden",autoPlay:!0}))};w.displayName="Island",exports.Island=w;
|
|
2
2
|
//# sourceMappingURL=Island.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Island.js","sources":["../../src/components/Island.tsx"],"sourcesContent":["// Copyright (C) 2022 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { useState, useRef, useEffect } from 'react'\nimport {\n StyledAlbumArtThumb,\n StyledArtistDetails,\n StyledArtistName,\n StyledDynamicIsland,\n StyledDynamicIslandTopContent,\n StyledMusicIcon,\n StyledMusicIconBar,\n StyledPlayBar,\n StyledPlayBarWrapper,\n StyledSongControls,\n StyledSongControlsWrappers,\n StyledSongName,\n} from '../styles/Island.styles'\nimport { useSelector } from 'react-redux'\nimport { RootState } from '../store'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n faBackward,\n faPause,\n faForward,\n faCompactDisc,\n faPhone,\n faMicrophone,\n faRightLeft,\n faChevronDown,\n faChevronUp,\n} from '@fortawesome/free-solid-svg-icons'\nimport { motion, useDragControls, useAnimation } from 'framer-motion/dist/framer-motion'\nimport { hangupCurrentCall, answerIncomingCall } from '../lib/phone/call'\nimport { useLongPress } from '../utils/useLongPress'\nimport Moment from 'react-moment'\nimport { useLocalStorage } from '../utils/useLocalStorage'\n\nimport { AudioBars } from './AudioBars'\n\nimport { getTranslateValues } from '../utils/getTranslate'\nimport { Button } from './Button'\n\nconst StyledDynamicIslandMotion = motion(StyledDynamicIsland)\nconst StyledMusicIconBarMotion = motion(StyledMusicIconBar)\nconst StyledMusicAlbumArtThumbMotion = motion(StyledAlbumArtThumb)\nconst StyledMusicIconMotion = motion(StyledMusicIcon)\nconst StyledArtistDetailsMotion = motion(StyledArtistDetails)\n\ninterface IslandProps {\n always?: boolean\n}\n\ninterface PositionTypes {\n x: number\n y: number\n}\n\ninterface PhoneIslandStorageTypes {\n position: PositionTypes\n}\n\nconst ISLAND_STARTING_POSITION = {\n x: 0,\n y: 0,\n}\n\nexport const Island = ({ always }: IslandProps) => {\n const [isOpen, setIsOpen] = useState(true)\n const { incoming, accepted, outgoing, displayName, number, startTime } = useSelector(\n // ADD ACCEPTED\n (state: RootState) => state.currentCall,\n )\n\n const { audio } = useSelector(\n // ADD ACCEPTED\n (state: RootState) => state.player,\n )\n const controls = useDragControls()\n\n const [phoneIslandStorage, setPhoneIslandStorage] =\n useLocalStorage<PhoneIslandStorageTypes | null>('phone-island', null)\n\n const islandRef = useRef<any>(null)\n\n const islandContainerRef = useRef<any>(null)\n\n const [position, setPosition] = useState<PositionTypes | null>(\n phoneIslandStorage && phoneIslandStorage.position ? phoneIslandStorage.position : null,\n )\n\n const [moved, setMoved] = useState<boolean>(false)\n\n function isAnswerVisible() {\n return !outgoing && !accepted\n }\n\n function startDrag(event) {\n controls.start(event)\n }\n\n function handleAnswer(event) {\n answerIncomingCall()\n }\n\n function handleHangup(event) {\n event.stopPropagation()\n hangupCurrentCall()\n }\n\n const onLongPress = () => {\n console.log('long press trigger')\n }\n\n const islandClick = () => {\n setIsOpen(!isOpen)\n }\n\n function innerXPosition(x) {\n // Get horizontal constraints\n const xConstraintPosition =\n islandContainerRef.current.offsetWidth / 2 - islandRef.current.offsetWidth / 2\n\n // Return the X position inside the constraints\n return x > 0 && x > xConstraintPosition\n ? xConstraintPosition\n : x < 0 && x < -xConstraintPosition\n ? -xConstraintPosition\n : x\n }\n\n function innerYPosition(y) {\n // Get vertical constraints\n const yConstraintPosition =\n islandContainerRef.current.offsetHeight / 2 - islandRef.current.offsetHeight / 2\n\n // Return the Y position inside the constraints\n return y > 0 && y > yConstraintPosition\n ? yConstraintPosition\n : y < 0 && y < -yConstraintPosition\n ? -yConstraintPosition\n : y\n }\n\n const onDragEnd = () => {\n // Get initial translation values\n let { x, y }: any = getTranslateValues(islandRef.current)\n\n // Round position\n x = innerXPosition(Math.round(x))\n y = innerYPosition(Math.round(y))\n\n // Save the new position to localstorage\n setPhoneIslandStorage({\n position: {\n x,\n y,\n },\n })\n // Set position to variable\n setPosition({\n x,\n y,\n })\n }\n\n function resetMoved() {\n setMoved(false)\n }\n\n function dragStarted() {\n setMoved(true)\n }\n\n const longPressEvent = useLongPress(onLongPress, islandClick, moved, resetMoved, {\n shouldPreventDefault: true,\n delay: 250,\n })\n\n const variants = {\n openIncoming: {\n width: '418px',\n height: '96px',\n borderRadius: '20px',\n },\n openAccepted: {\n width: '348px',\n height: '236px',\n borderRadius: '20px',\n },\n closed: {\n width: '156px',\n height: '36px',\n borderRadius: '999px',\n },\n }\n\n const iconVariants = {\n open: {\n width: '48px',\n height: '48px',\n borderRadius: '12px',\n margin: '0 auto',\n },\n closed: {\n width: '20px',\n height: '20px',\n borderRadius: '4px',\n },\n }\n\n const [audioStream, setAudioStream] = useState<MediaStream | null>(null)\n\n useEffect(() => {\n const audioStreamListener = audio?.addEventListener('play', () => {\n if (navigator.userAgent.indexOf('Firefox') > -1) {\n // @ts-ignore\n setAudioStream(audio.mozCaptureStream())\n } else {\n // @ts-ignore\n setAudioStream(audio.captureStream())\n }\n })\n\n return () => {\n // @ts-ignore\n audio?.removeEventListener('play', audioStreamListener)\n }\n }, [audio])\n\n return (\n <div\n ref={islandContainerRef}\n className='absolute min-w-full min-h-full left-0 top-0 overflow-hidden pointer-events-none flex items-center justify-center content-center phone-island-container'\n >\n {/* <div className='bg-black h-72 w-72 flex justify-center '>\n <AudioBars audioStream={audioStream} />\n </div> */}\n\n {(incoming || outgoing || accepted || always) && (\n <StyledDynamicIslandMotion\n className='font-sans absolute pointer-events-auto'\n incoming={incoming}\n accepted={accepted}\n outgoing={outgoing}\n isOpen={isOpen}\n animate={\n isOpen && (incoming || outgoing) && !accepted\n ? 'openIncoming'\n : isOpen && accepted\n ? 'openAccepted'\n : 'closed'\n }\n variants={variants}\n drag\n onPointerDown={startDrag}\n onDragStart={dragStarted}\n dragTransition={{\n power: 0,\n }}\n initial={{\n x: position?.x || ISLAND_STARTING_POSITION.x,\n y: position?.y || ISLAND_STARTING_POSITION.y,\n }}\n style={{\n padding: isOpen ? '24px' : '8px 16px',\n }}\n dragControls={controls}\n dragConstraints={islandContainerRef}\n onDragEnd={onDragEnd}\n ref={islandRef}\n {...longPressEvent}\n >\n <StyledDynamicIslandTopContent\n isOpen={isOpen}\n incoming={incoming}\n accepted={accepted}\n outgoing={outgoing}\n >\n <div className='relative w-12 h-12'>\n {(incoming || outgoing) && (\n <motion.div\n style={{\n animation: 'ping 2s cubic-bezier(0, 0, 0.2, 1) infinite',\n borderRadius: '4px',\n }}\n animate={isOpen ? 'open' : 'closed'}\n variants={iconVariants}\n className={`rounded-xl bg-white absolute opacity-60 -z-10 top-0 left-0 animate-ping h-12 w-12`}\n ></motion.div>\n )}\n <StyledMusicAlbumArtThumbMotion\n className='z-10 h-12 w-12'\n animate={isOpen ? 'open' : 'closed'}\n variants={iconVariants}\n src='https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80'\n />\n </div>\n <div>\n {isOpen && (\n <StyledArtistDetailsMotion initial={{ opacity: 0 }} animate={{ opacity: 1 }}>\n <StyledSongName>{displayName && displayName}</StyledSongName>\n <StyledArtistName>\n {accepted ? (\n <Moment\n date={startTime}\n interval={1000}\n format='hh:mm:ss'\n trim='mid'\n unix\n durationFromNow\n />\n ) : (\n <>{number && number}</>\n )}\n </StyledArtistName>\n </StyledArtistDetailsMotion>\n )}\n </div>\n {accepted && <AudioBars audioStream={audioStream} />}\n {/* <StyledMusicIconMotion animate={{ opacity: isOpen ? [0, 1] : 1 }}>\n <StyledMusicIconBarMotion\n initial={{ height: '0' }}\n animate={{ height: '100%' }}\n transition={{ duration: 1, delay: 0.5, repeat: Infinity }}\n />\n <StyledMusicIconBarMotion\n initial={{ height: '0' }}\n animate={{ height: '100%' }}\n transition={{ duration: 1, delay: 0.75, repeat: Infinity }}\n />\n <StyledMusicIconBarMotion\n initial={{ height: '0' }}\n animate={{ height: '75%' }}\n transition={{ duration: 1, delay: 0.3, repeat: Infinity }}\n />\n </StyledMusicIconMotion> */}\n </StyledDynamicIslandTopContent>\n {isOpen && (\n <div className='grid gap-y-5'>\n {/* <StyledPlayBarWrapper>\n <span>2:30</span>\n <StyledPlayBar />\n <span>-1:35</span>\n </StyledPlayBarWrapper>\n <StyledSongControlsWrappers>\n <StyledSongControls>\n <FontAwesomeIcon size='2x' icon={faBackward} />\n <FontAwesomeIcon size='3x' icon={faPause} />\n <FontAwesomeIcon size='2x' icon={faForward} />\n </StyledSongControls>\n <div>\n <FontAwesomeIcon size='2x' icon={faCompactDisc} />\n </div>\n </StyledSongControlsWrappers> */}\n {accepted && (\n <div className='grid grid-cols-4 auto-cols-max gap-y-5 justify-items-center place-items-center justify-center'>\n <Button variant='default'>\n <FontAwesomeIcon size='xl' icon={faPause} />\n </Button>\n <Button variant='default'>\n <FontAwesomeIcon size='xl' icon={faMicrophone} />\n </Button>\n <Button variant='default'>\n <FontAwesomeIcon size='xl' icon={faRightLeft} />\n </Button>\n <Button variant='neutral'>\n <FontAwesomeIcon size='xl' icon={faChevronDown} />\n </Button>\n </div>\n )}\n <motion.div\n className={`grid ${\n isAnswerVisible()\n ? 'grid-cols-2'\n : accepted\n ? 'grid-cols-1 justify-items-center'\n : 'grid-cols-1 justify-items-end'\n } gap-3.5`}\n animate={{ opacity: 1 }}\n >\n <Button onClick={handleHangup} variant='red'>\n <FontAwesomeIcon className='rotate-135' size='2x' icon={faPhone} />\n </Button>\n {isAnswerVisible() && (\n <Button onClick={handleAnswer} variant='green'>\n <FontAwesomeIcon size='2x' icon={faPhone} />\n </Button>\n )}\n </motion.div>\n </div>\n )}\n </StyledDynamicIslandMotion>\n )}\n <audio id='audio' className='hidden' autoPlay></audio>\n <video id='localVideo' className='hidden' muted={true} autoPlay></video>\n <video id='remoteVideo' className='hidden' autoPlay></video>\n </div>\n )\n}\n\nIsland.displayName = 'Island'\n"],"names":["StyledDynamicIslandMotion","motion","StyledDynamicIsland","framerMotion","exports","StyledMusicIconBar","StyledMusicAlbumArtThumbMotion","StyledAlbumArtThumb","StyledMusicIcon","StyledArtistDetailsMotion","StyledArtistDetails","ISLAND_STARTING_POSITION","Island","_a","always","_b","useState","isOpen","setIsOpen","_c","useSelector","state","currentCall","incoming","accepted","outgoing","displayName","number","startTime","audio","player","controls","useDragControls","_d","useLocalStorage","phoneIslandStorage","setPhoneIslandStorage","islandRef","useRef","islandContainerRef","_e","position","setPosition","_f","moved","setMoved","isAnswerVisible","longPressEvent","useLongPress","console","log","shouldPreventDefault","delay","iconVariants","open","width","height","borderRadius","margin","closed","_g","audioStream","setAudioStream","useEffect","audioStreamListener","addEventListener","navigator","userAgent","indexOf","mozCaptureStream","captureStream","removeEventListener","React","ref","className","__assign","animate","variants","openIncoming","openAccepted","drag","onPointerDown","event","start","onDragStart","dragTransition","power","initial","x","y","style","padding","dragControls","dragConstraints","onDragEnd","getTranslateValues","current","xConstraintPosition","offsetWidth","innerXPosition","Math","round","yConstraintPosition","offsetHeight","innerYPosition","createElement","StyledDynamicIslandTopContent","div","animation","src","opacity","StyledSongName","StyledArtistName","Moment","date","interval","format","trim","unix","durationFromNow","Fragment","AudioBars","Button","variant","FontAwesomeIcon","size","icon","faPause","faMicrophone","faRightLeft","faChevronDown","concat","onClick","stopPropagation","hangupCurrentCall","faPhone","answerIncomingCall","id","autoPlay","muted"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Island.js","sources":["../../src/components/Island.tsx"],"sourcesContent":["// Copyright (C) 2022 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { useState, useRef, useEffect } from 'react'\nimport {\n StyledAlbumArtThumb,\n StyledArtistDetails,\n StyledArtistName,\n StyledDynamicIsland,\n StyledDynamicIslandTopContent,\n StyledMusicIcon,\n StyledMusicIconBar,\n StyledPlayBar,\n StyledPlayBarWrapper,\n StyledSongControls,\n StyledSongControlsWrappers,\n StyledSongName,\n} from '../styles/Island.styles'\nimport { useSelector } from 'react-redux'\nimport { RootState } from '../store'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n faBackward,\n faPause,\n faForward,\n faCompactDisc,\n faPhone,\n faMicrophone,\n faRightLeft,\n faChevronDown,\n faChevronUp,\n} from '@fortawesome/free-solid-svg-icons'\nimport { motion, useDragControls, useAnimation } from 'framer-motion/dist/framer-motion'\nimport { hangupCurrentCall, answerIncomingCall } from '../lib/phone/call'\nimport { useLongPress } from '../utils/useLongPress'\nimport Moment from 'react-moment'\nimport { useLocalStorage } from '../utils/useLocalStorage'\n\nimport { AudioBars } from './AudioBars'\n\nimport { getTranslateValues } from '../utils/getTranslate'\nimport { Button } from './Button'\n\nconst StyledDynamicIslandMotion = motion(StyledDynamicIsland)\nconst StyledMusicIconBarMotion = motion(StyledMusicIconBar)\nconst StyledMusicAlbumArtThumbMotion = motion(StyledAlbumArtThumb)\nconst StyledMusicIconMotion = motion(StyledMusicIcon)\nconst StyledArtistDetailsMotion = motion(StyledArtistDetails)\n\ninterface IslandProps {\n always?: boolean\n}\n\ninterface PositionTypes {\n x: number\n y: number\n}\n\ninterface PhoneIslandStorageTypes {\n position: PositionTypes\n}\n\nconst ISLAND_STARTING_POSITION = {\n x: 0,\n y: 0,\n}\n\nexport const Island = ({ always }: IslandProps) => {\n const [isOpen, setIsOpen] = useState(true)\n const { incoming, accepted, outgoing, displayName, number, startTime } = useSelector(\n // ADD ACCEPTED\n (state: RootState) => state.currentCall,\n )\n\n const { audio } = useSelector(\n // ADD ACCEPTED\n (state: RootState) => state.player,\n )\n const controls = useDragControls()\n\n const [phoneIslandStorage, setPhoneIslandStorage] =\n useLocalStorage<PhoneIslandStorageTypes | null>('phone-island', null)\n\n const islandRef = useRef<any>(null)\n\n const islandContainerRef = useRef<any>(null)\n\n const [position, setPosition] = useState<PositionTypes | null>(\n phoneIslandStorage && phoneIslandStorage.position ? phoneIslandStorage.position : null,\n )\n\n const [moved, setMoved] = useState<boolean>(false)\n\n function isAnswerVisible() {\n return !outgoing && !accepted\n }\n\n function startDrag(event) {\n controls.start(event)\n }\n\n function handleAnswer(event) {\n answerIncomingCall()\n }\n\n function handleHangup(event) {\n event.stopPropagation()\n hangupCurrentCall()\n }\n\n const onLongPress = () => {\n console.log('long press trigger')\n }\n\n const islandClick = () => {\n setIsOpen(!isOpen)\n }\n\n function innerXPosition(x) {\n // Get horizontal constraints\n const xConstraintPosition =\n islandContainerRef.current.offsetWidth / 2 - islandRef.current.offsetWidth / 2\n\n // Return the X position inside the constraints\n return x > 0 && x > xConstraintPosition\n ? xConstraintPosition\n : x < 0 && x < -xConstraintPosition\n ? -xConstraintPosition\n : x\n }\n\n function innerYPosition(y) {\n // Get vertical constraints\n const yConstraintPosition =\n islandContainerRef.current.offsetHeight / 2 - islandRef.current.offsetHeight / 2\n\n // Return the Y position inside the constraints\n return y > 0 && y > yConstraintPosition\n ? yConstraintPosition\n : y < 0 && y < -yConstraintPosition\n ? -yConstraintPosition\n : y\n }\n\n const onDragEnd = () => {\n // Get initial translation values\n let { x, y }: any = getTranslateValues(islandRef.current)\n\n // Round position\n x = innerXPosition(Math.round(x))\n y = innerYPosition(Math.round(y))\n\n // Save the new position to localstorage\n setPhoneIslandStorage({\n position: {\n x,\n y,\n },\n })\n // Set position to variable\n setPosition({\n x,\n y,\n })\n }\n\n function resetMoved() {\n setMoved(false)\n }\n\n function dragStarted() {\n setMoved(true)\n }\n\n const longPressEvent = useLongPress(onLongPress, islandClick, moved, resetMoved, {\n shouldPreventDefault: true,\n delay: 250,\n })\n\n const variants = {\n openIncoming: {\n width: '418px',\n height: '96px',\n borderRadius: '20px',\n },\n openAccepted: {\n width: '348px',\n height: '236px',\n borderRadius: '20px',\n },\n closed: {\n width: '156px',\n height: '36px',\n borderRadius: '999px',\n },\n }\n\n const iconVariants = {\n open: {\n width: '48px',\n height: '48px',\n borderRadius: '12px',\n margin: '0 auto',\n },\n closed: {\n width: '20px',\n height: '20px',\n borderRadius: '4px',\n },\n }\n\n const [audioStream, setAudioStream] = useState<MediaStream | null>(null)\n\n useEffect(() => {\n const audioStreamListener = audio?.addEventListener('play', () => {\n if (navigator.userAgent.indexOf('Firefox') > -1) {\n // @ts-ignore\n setAudioStream(audio.mozCaptureStream())\n } else {\n // @ts-ignore\n setAudioStream(audio.captureStream())\n }\n })\n\n return () => {\n // @ts-ignore\n audio?.removeEventListener('play', audioStreamListener)\n }\n }, [audio])\n\n return (\n <div\n ref={islandContainerRef}\n className='absolute min-w-full min-h-full left-0 top-0 overflow-hidden pointer-events-none flex items-center justify-center content-center phone-island-container z-1000'\n >\n {/* <div className='bg-black h-72 w-72 flex justify-center '>\n <AudioBars audioStream={audioStream} />\n </div> */}\n\n {(incoming || outgoing || accepted || always) && (\n <StyledDynamicIslandMotion\n className='font-sans absolute pointer-events-auto'\n incoming={incoming}\n accepted={accepted}\n outgoing={outgoing}\n isOpen={isOpen}\n animate={\n isOpen && (incoming || outgoing) && !accepted\n ? 'openIncoming'\n : isOpen && accepted\n ? 'openAccepted'\n : 'closed'\n }\n variants={variants}\n drag\n onPointerDown={startDrag}\n onDragStart={dragStarted}\n dragTransition={{\n power: 0,\n }}\n initial={{\n x: position?.x || ISLAND_STARTING_POSITION.x,\n y: position?.y || ISLAND_STARTING_POSITION.y,\n }}\n style={{\n padding: isOpen ? '24px' : '8px 16px',\n }}\n dragControls={controls}\n dragConstraints={islandContainerRef}\n onDragEnd={onDragEnd}\n ref={islandRef}\n {...longPressEvent}\n >\n <StyledDynamicIslandTopContent\n isOpen={isOpen}\n incoming={incoming}\n accepted={accepted}\n outgoing={outgoing}\n >\n <div className='relative w-12 h-12'>\n {(incoming || outgoing) && (\n <motion.div\n style={{\n animation: 'ping 2s cubic-bezier(0, 0, 0.2, 1) infinite',\n borderRadius: '4px',\n }}\n animate={isOpen ? 'open' : 'closed'}\n variants={iconVariants}\n className={`rounded-xl bg-white absolute opacity-60 -z-10 top-0 left-0 animate-ping h-12 w-12`}\n ></motion.div>\n )}\n <StyledMusicAlbumArtThumbMotion\n className='z-10 h-12 w-12'\n animate={isOpen ? 'open' : 'closed'}\n variants={iconVariants}\n src='https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80'\n />\n </div>\n <div>\n {isOpen && (\n <StyledArtistDetailsMotion initial={{ opacity: 0 }} animate={{ opacity: 1 }}>\n <StyledSongName>{displayName && displayName}</StyledSongName>\n <StyledArtistName>\n {accepted ? (\n <Moment\n date={startTime}\n interval={1000}\n format='hh:mm:ss'\n trim='mid'\n unix\n durationFromNow\n />\n ) : (\n <>{number && number}</>\n )}\n </StyledArtistName>\n </StyledArtistDetailsMotion>\n )}\n </div>\n {accepted && <AudioBars audioStream={audioStream} />}\n {/* <StyledMusicIconMotion animate={{ opacity: isOpen ? [0, 1] : 1 }}>\n <StyledMusicIconBarMotion\n initial={{ height: '0' }}\n animate={{ height: '100%' }}\n transition={{ duration: 1, delay: 0.5, repeat: Infinity }}\n />\n <StyledMusicIconBarMotion\n initial={{ height: '0' }}\n animate={{ height: '100%' }}\n transition={{ duration: 1, delay: 0.75, repeat: Infinity }}\n />\n <StyledMusicIconBarMotion\n initial={{ height: '0' }}\n animate={{ height: '75%' }}\n transition={{ duration: 1, delay: 0.3, repeat: Infinity }}\n />\n </StyledMusicIconMotion> */}\n </StyledDynamicIslandTopContent>\n {isOpen && (\n <div className='grid gap-y-5'>\n {/* <StyledPlayBarWrapper>\n <span>2:30</span>\n <StyledPlayBar />\n <span>-1:35</span>\n </StyledPlayBarWrapper>\n <StyledSongControlsWrappers>\n <StyledSongControls>\n <FontAwesomeIcon size='2x' icon={faBackward} />\n <FontAwesomeIcon size='3x' icon={faPause} />\n <FontAwesomeIcon size='2x' icon={faForward} />\n </StyledSongControls>\n <div>\n <FontAwesomeIcon size='2x' icon={faCompactDisc} />\n </div>\n </StyledSongControlsWrappers> */}\n {accepted && (\n <div className='grid grid-cols-4 auto-cols-max gap-y-5 justify-items-center place-items-center justify-center'>\n <Button variant='default'>\n <FontAwesomeIcon size='xl' icon={faPause} />\n </Button>\n <Button variant='default'>\n <FontAwesomeIcon size='xl' icon={faMicrophone} />\n </Button>\n <Button variant='default'>\n <FontAwesomeIcon size='xl' icon={faRightLeft} />\n </Button>\n <Button variant='neutral'>\n <FontAwesomeIcon size='xl' icon={faChevronDown} />\n </Button>\n </div>\n )}\n <motion.div\n className={`grid ${\n isAnswerVisible()\n ? 'grid-cols-2'\n : accepted\n ? 'grid-cols-1 justify-items-center'\n : 'grid-cols-1 justify-items-end'\n } gap-3.5`}\n animate={{ opacity: 1 }}\n >\n <Button onClick={handleHangup} variant='red'>\n <FontAwesomeIcon className='rotate-135' size='2x' icon={faPhone} />\n </Button>\n {isAnswerVisible() && (\n <Button onClick={handleAnswer} variant='green'>\n <FontAwesomeIcon size='2x' icon={faPhone} />\n </Button>\n )}\n </motion.div>\n </div>\n )}\n </StyledDynamicIslandMotion>\n )}\n <audio id='audio' className='hidden' autoPlay></audio>\n <video id='localVideo' className='hidden' muted={true} autoPlay></video>\n <video id='remoteVideo' className='hidden' autoPlay></video>\n </div>\n )\n}\n\nIsland.displayName = 'Island'\n"],"names":["StyledDynamicIslandMotion","motion","StyledDynamicIsland","framerMotion","exports","StyledMusicIconBar","StyledMusicAlbumArtThumbMotion","StyledAlbumArtThumb","StyledMusicIcon","StyledArtistDetailsMotion","StyledArtistDetails","ISLAND_STARTING_POSITION","Island","_a","always","_b","useState","isOpen","setIsOpen","_c","useSelector","state","currentCall","incoming","accepted","outgoing","displayName","number","startTime","audio","player","controls","useDragControls","_d","useLocalStorage","phoneIslandStorage","setPhoneIslandStorage","islandRef","useRef","islandContainerRef","_e","position","setPosition","_f","moved","setMoved","isAnswerVisible","longPressEvent","useLongPress","console","log","shouldPreventDefault","delay","iconVariants","open","width","height","borderRadius","margin","closed","_g","audioStream","setAudioStream","useEffect","audioStreamListener","addEventListener","navigator","userAgent","indexOf","mozCaptureStream","captureStream","removeEventListener","React","ref","className","__assign","animate","variants","openIncoming","openAccepted","drag","onPointerDown","event","start","onDragStart","dragTransition","power","initial","x","y","style","padding","dragControls","dragConstraints","onDragEnd","getTranslateValues","current","xConstraintPosition","offsetWidth","innerXPosition","Math","round","yConstraintPosition","offsetHeight","innerYPosition","createElement","StyledDynamicIslandTopContent","div","animation","src","opacity","StyledSongName","StyledArtistName","Moment","date","interval","format","trim","unix","durationFromNow","Fragment","AudioBars","Button","variant","FontAwesomeIcon","size","icon","faPause","faMicrophone","faRightLeft","faChevronDown","concat","onClick","stopPropagation","hangupCurrentCall","faPhone","answerIncomingCall","id","autoPlay","muted"],"mappings":"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"}
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-0{top:0}.-z-10{z-index:-10}.z-10{z-index:10}.col-start-auto{grid-column-start:auto}.-mt-1\.5{margin-top:-.375rem}.-mt-1{margin-top:-.25rem}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-12{height:3rem}.h-1{height:.25rem}.h-72{height:18rem}.min-h-full{min-height:100%}.w-12{width:3rem}.w-1{width:.25rem}.w-72{width:18rem}.min-w-full{min-width:100%}.rotate-135{--tw-rotate:135deg}.rotate-135,.transform{-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@-webkit-keyframes ping{75%,to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@keyframes ping{75%,to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}.animate-ping{-webkit-animation:ping 1s cubic-bezier(0,0,.2,1) infinite;animation:ping 1s cubic-bezier(0,0,.2,1) infinite}.auto-cols-max{grid-auto-columns:-webkit-max-content;grid-auto-columns:max-content}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.place-items-center{place-items:center}.content-center{align-content:center}.items-center{align-items:center}.justify-center{justify-content:center}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.gap-0\.5{gap:.125rem}.gap-0{gap:0}.gap-3\.5{gap:.875rem}.gap-3{gap:.75rem}.gap-y-5{row-gap:1.25rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.rounded-md{border-radius:.375rem}.rounded{border-radius:.25rem}.border{border-width:1px}.border-transparent{border-color:transparent}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}.bg-emerald-600{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-sky-600{--tw-bg-opacity:1;background-color:rgb(2 132 199/var(--tw-bg-opacity))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-sm{font-size:.875rem;line-height:1.25rem}.font-medium{font-weight:500}.leading-4{line-height:1rem}.tracking-wide{letter-spacing:.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.opacity-60{opacity:.6}.filter{-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity))}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.hover\:bg-gray-500:hover{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.hover\:bg-sky-700:hover{--tw-bg-opacity:1;background-color:rgb(3 105 161/var(--tw-bg-opacity))}.focus\:z-20:focus{z-index:20}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity))}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(34 197 94/var(--tw-ring-opacity))}.focus\:ring-gray-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(75 85 99/var(--tw-ring-opacity))}.focus\:ring-sky-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(14 165 233/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-black:focus{--tw-ring-offset-color:#000}.focus\:ring-offset-white:focus{--tw-ring-offset-color:#fff}.disabled\:opacity-75:disabled{opacity:.75}
|
|
1
|
+
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-0{top:0}.z-1000{z-index:1000}.-z-10{z-index:-10}.z-10{z-index:10}.col-start-auto{grid-column-start:auto}.-mt-1\.5{margin-top:-.375rem}.-mt-1{margin-top:-.25rem}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-12{height:3rem}.h-1{height:.25rem}.h-72{height:18rem}.min-h-full{min-height:100%}.w-12{width:3rem}.w-1{width:.25rem}.w-72{width:18rem}.min-w-full{min-width:100%}.rotate-135{--tw-rotate:135deg}.rotate-135,.transform{-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@-webkit-keyframes ping{75%,to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@keyframes ping{75%,to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}.animate-ping{-webkit-animation:ping 1s cubic-bezier(0,0,.2,1) infinite;animation:ping 1s cubic-bezier(0,0,.2,1) infinite}.auto-cols-max{grid-auto-columns:-webkit-max-content;grid-auto-columns:max-content}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.place-items-center{place-items:center}.content-center{align-content:center}.items-center{align-items:center}.justify-center{justify-content:center}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.gap-0\.5{gap:.125rem}.gap-0{gap:0}.gap-3\.5{gap:.875rem}.gap-3{gap:.75rem}.gap-y-5{row-gap:1.25rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.rounded-md{border-radius:.375rem}.rounded{border-radius:.25rem}.border{border-width:1px}.border-transparent{border-color:transparent}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}.bg-emerald-600{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-sky-600{--tw-bg-opacity:1;background-color:rgb(2 132 199/var(--tw-bg-opacity))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-sm{font-size:.875rem;line-height:1.25rem}.font-medium{font-weight:500}.leading-4{line-height:1rem}.tracking-wide{letter-spacing:.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.opacity-60{opacity:.6}.filter{-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity))}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.hover\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.hover\:bg-gray-500:hover{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.hover\:bg-sky-700:hover{--tw-bg-opacity:1;background-color:rgb(3 105 161/var(--tw-bg-opacity))}.focus\:z-20:focus{z-index:20}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity))}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(34 197 94/var(--tw-ring-opacity))}.focus\:ring-gray-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(75 85 99/var(--tw-ring-opacity))}.focus\:ring-sky-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(14 165 233/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-black:focus{--tw-ring-offset-color:#000}.focus\:ring-offset-white:focus{--tw-ring-offset-color:#fff}.disabled\:opacity-75:disabled{opacity:.75}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const useEventListener: (eventName:
|
|
1
|
+
export declare const useEventListener: (eventName: string, handler: (data: any) => void, element?: Window & typeof globalThis) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEventListener.js","sources":["../../src/utils/useEventListener.ts"],"sourcesContent":["// Copyright (C) 2022 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport { useEffect, useRef } from 'react'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\n\n// Event listener hook\nexport const useEventListener = (eventName
|
|
1
|
+
{"version":3,"file":"useEventListener.js","sources":["../../src/utils/useEventListener.ts"],"sourcesContent":["// Copyright (C) 2022 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport { useEffect, useRef } from 'react'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\n\n// Event listener hook\nexport const useEventListener = (\n eventName: string,\n handler: (data: any) => void,\n element = window,\n) => {\n // Create a ref that stores handler\n const savedHandler = useRef<typeof handler>()\n // Update ref.current value if handler changes.\n // This allows our effect below to always get latest handler ...\n // ... without us needing to pass it in effect deps array ...\n // ... and potentially cause effect to re-run every render.\n useIsomorphicLayoutEffect(() => {\n savedHandler.current = handler\n }, [handler])\n useEffect(\n () => {\n // Make sure element supports addEventListener\n // On\n const isSupported = element && element.addEventListener\n if (!isSupported) return\n // Create event listener that calls handler function stored in ref\n // @ts-ignore\n const eventListener = (event) => savedHandler.current(event.detail)\n // Add event listener\n element.addEventListener(eventName, eventListener)\n // Remove event listener on cleanup\n return () => {\n element.removeEventListener(eventName, eventListener)\n }\n },\n [eventName, element], // Re-run if eventName or element changes\n )\n}\n"],"names":["eventName","handler","element","window","savedHandler","useRef","useIsomorphicLayoutEffect","current","useEffect","addEventListener","eventListener","event","detail","removeEventListener"],"mappings":"gKAOgC,SAC9BA,EACAC,EACAC,QAAA,IAAAA,IAAAA,EAAgBC,QAGhB,IAAMC,EAAeC,EAAAA,SAKrBC,EAAAA,2BAA0B,WACxBF,EAAaG,QAAUN,CACzB,GAAG,CAACA,IACJO,EAAAA,WACE,WAIE,GADoBN,GAAWA,EAAQO,iBACvC,CAGA,IAAMC,EAAgB,SAACC,GAAU,OAAAP,EAAaG,QAAQI,EAAMC,SAI5D,OAFAV,EAAQO,iBAAiBT,EAAWU,GAE7B,WACLR,EAAQW,oBAAoBb,EAAWU,EACzC,CATwB,CAU1B,GACA,CAACV,EAAWE,GAEhB"}
|