@nethesis/phone-island 0.7.38 → 0.7.39
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(),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:"
|
|
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:"99px"}},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 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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"}
|
|
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: '99px',\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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"}
|