@nethesis/phone-island 0.7.32 → 0.7.33

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"),a=require("../styles/Island.styles.js");require("../node_modules/react-redux/es/index.js");var n=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(a.StyledDynamicIsland);m.framerMotion.exports.motion(a.StyledMusicIconBar);var v=m.framerMotion.exports.motion(a.StyledAlbumArtThumb);m.framerMotion.exports.motion(a.StyledMusicIcon);var h=m.framerMotion.exports.motion(a.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,I=q.outgoing,A=q.displayName,P=q.number,B=q.startTime,_=f.useSelector((function(e){return e.player})).audio,C=m.framerMotion.exports.useDragControls(),D=s.useLocalStorage("phone-island",null),z=D[0],F=D[1],R=t.useRef(null),L=t.useRef(null),T=t.useState(z&&z.position?z.position:null),H=T[0],V=T[1],k=t.useState(!1),O=k[0],W=k[1];function G(){return!I&&!N}var Y=i.useLongPress((function(){console.log("long press trigger")}),(function(){S(!j)}),O,(function(){W(!1)}),{shouldPreventDefault:!0,delay:250}),J=t.useState({}),K=J[0],Q=J[1];t.useEffect((function(){Q({open:{width:"".concat(N?300:370,"px"),height:"auto",borderRadius:"20px"},closed:{width:"96px",height:"12px",borderRadius:"99px"}})}),[N]);var U={open:{width:"48px",height:"48px",borderRadius:"12px",margin:"0 auto"},closed:{width:"12px",height:"12px",borderRadius:"4px"}},X=t.useState(null),Z=X[0],$=X[1];return t.useEffect((function(){return null==_?void 0:_.addEventListener("play",(function(e){console.log("audio.captureStream()"),$(_.captureStream())}))}),[_]),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"},(M||I||N||w)&&g.default.createElement(x,e.__assign({className:"font-sans absolute pointer-events-auto",incoming:M,isOpen:j,openedIslandPadding:24,animate:j?"open":"closed",variants:K,accepted:N,outgoing:I,drag:!0,onPointerDown:function(e){C.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},dragControls:C,dragConstraints:L,onDragEnd:function(){var e=d.getTranslateValues(R.current),t=e.x,a=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)),a=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(a)),F({position:{x:t,y:a}}),V({x:t,y:a})},ref:R},Y),g.default.createElement(a.StyledDynamicIslandTopContent,{isOpen:j},g.default.createElement("div",{className:"relative w-12 h-12"},M&&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:U,className:"rounded-xl bg-white absolute opacity-60 -z-10 top-0 left-0 animate-ping h-12 w-12"}),g.default.createElement(v,{className:"z-10 h-12 w-12",animate:j?"open":"closed",variants:U,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(h,{initial:{opacity:0},animate:{opacity:1}},g.default.createElement(a.StyledSongName,null,A&&A),g.default.createElement(a.StyledArtistName,null,N?g.default.createElement(l.default,{date:B,interval:1e3,format:"hh:mm:ss",trim:"mid",unix:!0,durationFromNow:!0}):g.default.createElement(g.default.Fragment,null,P&&P)))),N&&g.default.createElement(u.AudioBars,{audioStream:Z})),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(n.FontAwesomeIcon,{size:"xl",icon:o.faPause})),g.default.createElement(c.Button,{variant:"default"},g.default.createElement(n.FontAwesomeIcon,{size:"xl",icon:o.faMicrophone})),g.default.createElement(c.Button,{variant:"default"},g.default.createElement(n.FontAwesomeIcon,{size:"xl",icon:o.faRightLeft})),g.default.createElement(c.Button,{variant:"neutral"},g.default.createElement(n.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(n.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(n.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;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../node_modules/tslib/tslib.es6.js"),t=require("react"),a=require("../styles/Island.styles.js");require("../node_modules/react-redux/es/index.js");var n=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(a.StyledDynamicIsland);m.framerMotion.exports.motion(a.StyledMusicIconBar);var v=m.framerMotion.exports.motion(a.StyledAlbumArtThumb);m.framerMotion.exports.motion(a.StyledMusicIcon);var h=m.framerMotion.exports.motion(a.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,I=q.outgoing,A=q.displayName,P=q.number,B=q.startTime,_=f.useSelector((function(e){return e.player})).audio,C=m.framerMotion.exports.useDragControls(),D=s.useLocalStorage("phone-island",null),z=D[0],F=D[1],R=t.useRef(null),L=t.useRef(null),T=t.useState(z&&z.position?z.position:null),H=T[0],V=T[1],k=t.useState(!1),O=k[0],W=k[1];function G(){return!I&&!N}var Y=i.useLongPress((function(){console.log("long press trigger")}),(function(){S(!j)}),O,(function(){W(!1)}),{shouldPreventDefault:!0,delay:250}),J=t.useState({}),K=J[0],Q=J[1];t.useEffect((function(){Q({open:{width:"".concat(N&&"300px"),height:"auto",borderRadius:"20px"},closed:{width:"96px",height:"12px",borderRadius:"99px"}})}),[N]);var U={open:{width:"48px",height:"48px",borderRadius:"12px",margin:"0 auto"},closed:{width:"12px",height:"12px",borderRadius:"4px"}},X=t.useState(null),Z=X[0],$=X[1];return t.useEffect((function(){return null==_?void 0:_.addEventListener("play",(function(e){console.log("audio.captureStream()"),$(_.captureStream())}))}),[_]),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"},(M||I||N||w)&&g.default.createElement(x,e.__assign({className:"font-sans absolute pointer-events-auto",incoming:M,isOpen:j,openedIslandPadding:24,animate:j?"open":"closed",variants:K,accepted:N,outgoing:I,drag:!0,onPointerDown:function(e){C.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},dragControls:C,dragConstraints:L,onDragEnd:function(){var e=d.getTranslateValues(R.current),t=e.x,a=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)),a=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(a)),F({position:{x:t,y:a}}),V({x:t,y:a})},ref:R},Y),g.default.createElement(a.StyledDynamicIslandTopContent,{isOpen:j},g.default.createElement("div",{className:"relative w-12 h-12"},M&&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:U,className:"rounded-xl bg-white absolute opacity-60 -z-10 top-0 left-0 animate-ping h-12 w-12"}),g.default.createElement(v,{className:"z-10 h-12 w-12",animate:j?"open":"closed",variants:U,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(h,{initial:{opacity:0},animate:{opacity:1}},g.default.createElement(a.StyledSongName,null,A&&A),g.default.createElement(a.StyledArtistName,null,N?g.default.createElement(l.default,{date:B,interval:1e3,format:"hh:mm:ss",trim:"mid",unix:!0,durationFromNow:!0}):g.default.createElement(g.default.Fragment,null,P&&P)))),N&&g.default.createElement(u.AudioBars,{audioStream:Z})),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(n.FontAwesomeIcon,{size:"xl",icon:o.faPause})),g.default.createElement(c.Button,{variant:"default"},g.default.createElement(n.FontAwesomeIcon,{size:"xl",icon:o.faMicrophone})),g.default.createElement(c.Button,{variant:"default"},g.default.createElement(n.FontAwesomeIcon,{size:"xl",icon:o.faRightLeft})),g.default.createElement(c.Button,{variant:"neutral"},g.default.createElement(n.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(n.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(n.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 OPENED_ISLAND_PADDING = 24\nconst OPENED_ISLAND_WIDTH = 300\nconst INCOMING_ISLAND_WITH = 370\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, setVariant] = useState<any>({})\n\n useEffect(() => {\n setVariant({\n open: {\n width: `${accepted ? OPENED_ISLAND_WIDTH : INCOMING_ISLAND_WITH}px`,\n height: 'auto',\n borderRadius: '20px',\n },\n closed: {\n width: '96px',\n height: '12px',\n borderRadius: '99px',\n },\n })\n }, [accepted])\n\n const iconVariants = {\n open: {\n width: '48px',\n height: '48px',\n borderRadius: '12px',\n margin: '0 auto',\n },\n closed: {\n width: '12px',\n height: '12px',\n borderRadius: '4px',\n },\n }\n\n const [audioStream, setAudioStream] = useState<MediaStream | null>(null)\n\n useEffect(() => {\n const audioStreamListener = audio?.addEventListener('play', (event) => {\n // @ts-ignore\n console.log('audio.captureStream()')\n // @ts-ignore\n setAudioStream(audio.captureStream())\n })\n\n return audioStreamListener\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'\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 isOpen={isOpen}\n openedIslandPadding={OPENED_ISLAND_PADDING}\n animate={isOpen ? 'open' : 'closed'}\n variants={variants}\n accepted={accepted}\n outgoing={outgoing}\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 dragControls={controls}\n dragConstraints={islandContainerRef}\n onDragEnd={onDragEnd}\n ref={islandRef}\n {...longPressEvent}\n >\n <StyledDynamicIslandTopContent isOpen={isOpen}>\n <div className='relative w-12 h-12'>\n {incoming && (\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","_g","variants","setVariant","useEffect","open","width","concat","height","borderRadius","closed","iconVariants","margin","_h","audioStream","setAudioStream","addEventListener","event","captureStream","React","ref","className","createElement","openedIslandPadding","animate","drag","onPointerDown","start","onDragStart","dragTransition","power","initial","x","y","dragControls","dragConstraints","onDragEnd","getTranslateValues","current","xConstraintPosition","offsetWidth","innerXPosition","Math","round","yConstraintPosition","offsetHeight","innerYPosition","StyledDynamicIslandTopContent","div","style","animation","src","opacity","StyledSongName","StyledArtistName","Moment","date","interval","format","trim","unix","durationFromNow","Fragment","AudioBars","Button","variant","FontAwesomeIcon","size","icon","faPause","faMicrophone","faRightLeft","faChevronDown","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 OPENED_ISLAND_PADDING = 24\nconst OPENED_ISLAND_WIDTH = 300\nconst INCOMING_ISLAND_WITH = 418\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, setVariant] = useState<any>({})\n\n useEffect(() => {\n setVariant({\n open: {\n width: `${accepted && OPENED_ISLAND_WIDTH + 'px'}`,\n height: 'auto',\n borderRadius: '20px',\n },\n closed: {\n width: '96px',\n height: '12px',\n borderRadius: '99px',\n },\n })\n }, [accepted])\n\n const iconVariants = {\n open: {\n width: '48px',\n height: '48px',\n borderRadius: '12px',\n margin: '0 auto',\n },\n closed: {\n width: '12px',\n height: '12px',\n borderRadius: '4px',\n },\n }\n\n const [audioStream, setAudioStream] = useState<MediaStream | null>(null)\n\n useEffect(() => {\n const audioStreamListener = audio?.addEventListener('play', (event) => {\n // @ts-ignore\n console.log('audio.captureStream()')\n // @ts-ignore\n setAudioStream(audio.captureStream())\n })\n\n return audioStreamListener\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'\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 isOpen={isOpen}\n openedIslandPadding={OPENED_ISLAND_PADDING}\n animate={isOpen ? 'open' : 'closed'}\n variants={variants}\n accepted={accepted}\n outgoing={outgoing}\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 dragControls={controls}\n dragConstraints={islandContainerRef}\n onDragEnd={onDragEnd}\n ref={islandRef}\n {...longPressEvent}\n >\n <StyledDynamicIslandTopContent isOpen={isOpen}>\n <div className='relative w-12 h-12'>\n {incoming && (\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","_g","variants","setVariant","useEffect","open","width","concat","OPENED_ISLAND_WIDTH","height","borderRadius","closed","iconVariants","margin","_h","audioStream","setAudioStream","addEventListener","event","captureStream","React","ref","className","createElement","openedIslandPadding","animate","drag","onPointerDown","start","onDragStart","dragTransition","power","initial","x","y","dragControls","dragConstraints","onDragEnd","getTranslateValues","current","xConstraintPosition","offsetWidth","innerXPosition","Math","round","yConstraintPosition","offsetHeight","innerYPosition","StyledDynamicIslandTopContent","div","style","animation","src","opacity","StyledSongName","StyledArtistName","Moment","date","interval","format","trim","unix","durationFromNow","Fragment","AudioBars","Button","variant","FontAwesomeIcon","size","icon","faPause","faMicrophone","faRightLeft","faChevronDown","onClick","stopPropagation","hangupCurrentCall","faPhone","answerIncomingCall","id","autoPlay","muted"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n,e,t,r,i,a,o,d,p,l,s,c,g,f,m=require("../node_modules/tslib/tslib.es6.js"),u=require("../node_modules/styled-components/dist/styled-components.browser.esm.js"),x=u.default.div(t||(t=m.__makeTemplateObject(["\n align-items: ",";\n position: absolute;\n border-radius: 99px;\n background-color: #000;\n color: #fff;\n padding: ",";\n font-size: 0.75rem;\n display: grid;\n cursor: pointer;\n ","\n"],["\n align-items: ",";\n position: absolute;\n border-radius: 99px;\n background-color: #000;\n color: #fff;\n padding: ",";\n font-size: 0.75rem;\n display: grid;\n cursor: pointer;\n ","\n"])),(function(n){return n.isOpen?"flex-start":"center"}),(function(n){var e=n.isOpen,t=n.openedIslandPadding;return e?"".concat(t,"px"):"8px 16px"}),(function(t){var r=t.isOpen,i=t.accepted,a=t.incoming,o=t.outgoing;return r&&i?u.css(n||(n=m.__makeTemplateObject(["\n grid-template-rows: 72px 1fr;\n "],["\n grid-template-rows: 72px 1fr;\n "]))):r&&(a||o)&&u.css(e||(e=m.__makeTemplateObject(["\n grid-template-columns: 256px 114px;\n "],["\n grid-template-columns: 256px 114px;\n "])))})),b=u.default.div(r||(r=m.__makeTemplateObject(["\n display: grid;\n grid-template-columns: ",";\n grid-gap: 16px;\n align-items: ",";\n justify-content: center;\n width: 100%;\n"],["\n display: grid;\n grid-template-columns: ",";\n grid-gap: 16px;\n align-items: ",";\n justify-content: center;\n width: 100%;\n"])),(function(n){return n.isOpen?"52px 1fr 48px":"12px 1fr 12px"}),(function(n){return n.isOpen?"flex-start":"center"})),h=u.default.div(i||(i=m.__makeTemplateObject(["\n width: 12px;\n height: 12px;\n display: grid;\n justify-content: center;\n align-items: center;\n grid-template-columns: repeat(3, 1fr);\n gap: 3px;\n"],["\n width: 12px;\n height: 12px;\n display: grid;\n justify-content: center;\n align-items: center;\n grid-template-columns: repeat(3, 1fr);\n gap: 3px;\n"]))),y=u.default.div(a||(a=m.__makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 2px;\n background: linear-gradient(0deg, rgba(255, 0, 255, 1) 0%, rgba(255, 0, 255, 0.75) 100%);\n"],["\n width: 100%;\n height: 100%;\n border-radius: 2px;\n background: linear-gradient(0deg, rgba(255, 0, 255, 1) 0%, rgba(255, 0, 255, 0.75) 100%);\n"]))),_=u.default.img(o||(o=m.__makeTemplateObject(["\n border-radius: 4px;\n object-fit: cover;\n"],["\n border-radius: 4px;\n object-fit: cover;\n"]))),j=u.default.div(d||(d=m.__makeTemplateObject(["\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n align-items: center;\n justify-content: center;\n grid-template-rows: repeat(2, 1fr);\n"],["\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n align-items: center;\n justify-content: center;\n grid-template-rows: repeat(2, 1fr);\n"]))),w=u.default.div(p||(p=m.__makeTemplateObject(["\n font-size: 1rem;\n font-weight: 200;\n color: #fff;\n letter-spacing: 0.5px;\n"],["\n font-size: 1rem;\n font-weight: 200;\n color: #fff;\n letter-spacing: 0.5px;\n"]))),k=u.default.div(l||(l=m.__makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n color: #fff;\n"],["\n font-size: 1rem;\n font-weight: 700;\n color: #fff;\n"])));u.default.div(s||(s=m.__makeTemplateObject(["\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-gap: 16px;\n align-items: center;\n justify-content: center;\n width: 100%;\n color: #fff;\n font-size: 0.75rem;\n"],["\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-gap: 16px;\n align-items: center;\n justify-content: center;\n width: 100%;\n color: #fff;\n font-size: 0.75rem;\n"]))),u.default.div(c||(c=m.__makeTemplateObject(["\n width: 100%;\n height: 8px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 99px;\n position: relative;\n &:after {\n content: '';\n width: 70%;\n height: 100%;\n background-color: #fff;\n border-radius: 99px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n }\n"],["\n width: 100%;\n height: 8px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 99px;\n position: relative;\n &:after {\n content: '';\n width: 70%;\n height: 100%;\n background-color: #fff;\n border-radius: 99px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n }\n"]))),u.default.div(g||(g=m.__makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 16px;\n align-items: center;\n &:last-child {\n text-align: right;\n }\n"],["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 16px;\n align-items: center;\n &:last-child {\n text-align: right;\n }\n"]))),u.default.div(f||(f=m.__makeTemplateObject(["\n display: grid;\n grid-gap: 32px;\n align-items: center;\n justify-content: center;\n width: 100%;\n color: #fff;\n grid-template-columns: 32px auto 32px;\n"],["\n display: grid;\n grid-gap: 32px;\n align-items: center;\n justify-content: center;\n width: 100%;\n color: #fff;\n grid-template-columns: 32px auto 32px;\n"]))),exports.StyledAlbumArtThumb=_,exports.StyledArtistDetails=j,exports.StyledArtistName=w,exports.StyledDynamicIsland=x,exports.StyledDynamicIslandTopContent=b,exports.StyledMusicIcon=h,exports.StyledMusicIconBar=y,exports.StyledSongName=k;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n,e,t,r,i,a,o,d,p,l,s,c,g,f,m=require("../node_modules/tslib/tslib.es6.js"),u=require("../node_modules/styled-components/dist/styled-components.browser.esm.js"),x=u.default.div(t||(t=m.__makeTemplateObject(["\n align-items: ",";\n position: absolute;\n border-radius: 99px;\n background-color: #000;\n color: #fff;\n padding: ",";\n font-size: 0.75rem;\n display: grid;\n cursor: pointer;\n ","\n"],["\n align-items: ",";\n position: absolute;\n border-radius: 99px;\n background-color: #000;\n color: #fff;\n padding: ",";\n font-size: 0.75rem;\n display: grid;\n cursor: pointer;\n ","\n"])),(function(n){return n.isOpen?"flex-start":"center"}),(function(n){var e=n.isOpen,t=n.openedIslandPadding;return e?"".concat(t,"px"):"8px 16px"}),(function(t){var r=t.isOpen,i=t.accepted,a=t.incoming,o=t.outgoing;return r&&i?u.css(n||(n=m.__makeTemplateObject(["\n grid-template-rows: 72px 1fr;\n "],["\n grid-template-rows: 72px 1fr;\n "]))):r&&(a||o)&&u.css(e||(e=m.__makeTemplateObject(["\n grid-template-columns: 256px 114px;\n "],["\n grid-template-columns: 256px 114px;\n "])))})),b=u.default.div(r||(r=m.__makeTemplateObject(["\n display: grid;\n grid-template-columns: ",";\n grid-gap: 16px;\n align-items: ",";\n justify-content: center;\n width: 100%;\n"],["\n display: grid;\n grid-template-columns: ",";\n grid-gap: 16px;\n align-items: ",";\n justify-content: center;\n width: 100%;\n"])),(function(n){return n.isOpen?"52px 1fr":"12px 1fr 12px"}),(function(n){return n.isOpen?"flex-start":"center"})),h=u.default.div(i||(i=m.__makeTemplateObject(["\n width: 12px;\n height: 12px;\n display: grid;\n justify-content: center;\n align-items: center;\n grid-template-columns: repeat(3, 1fr);\n gap: 3px;\n"],["\n width: 12px;\n height: 12px;\n display: grid;\n justify-content: center;\n align-items: center;\n grid-template-columns: repeat(3, 1fr);\n gap: 3px;\n"]))),y=u.default.div(a||(a=m.__makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 2px;\n background: linear-gradient(0deg, rgba(255, 0, 255, 1) 0%, rgba(255, 0, 255, 0.75) 100%);\n"],["\n width: 100%;\n height: 100%;\n border-radius: 2px;\n background: linear-gradient(0deg, rgba(255, 0, 255, 1) 0%, rgba(255, 0, 255, 0.75) 100%);\n"]))),_=u.default.img(o||(o=m.__makeTemplateObject(["\n border-radius: 4px;\n object-fit: cover;\n"],["\n border-radius: 4px;\n object-fit: cover;\n"]))),j=u.default.div(d||(d=m.__makeTemplateObject(["\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n align-items: center;\n justify-content: center;\n grid-template-rows: repeat(2, 1fr);\n"],["\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n align-items: center;\n justify-content: center;\n grid-template-rows: repeat(2, 1fr);\n"]))),w=u.default.div(p||(p=m.__makeTemplateObject(["\n font-size: 1rem;\n font-weight: 200;\n color: #fff;\n letter-spacing: 0.5px;\n"],["\n font-size: 1rem;\n font-weight: 200;\n color: #fff;\n letter-spacing: 0.5px;\n"]))),k=u.default.div(l||(l=m.__makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n color: #fff;\n"],["\n font-size: 1rem;\n font-weight: 700;\n color: #fff;\n"])));u.default.div(s||(s=m.__makeTemplateObject(["\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-gap: 16px;\n align-items: center;\n justify-content: center;\n width: 100%;\n color: #fff;\n font-size: 0.75rem;\n"],["\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-gap: 16px;\n align-items: center;\n justify-content: center;\n width: 100%;\n color: #fff;\n font-size: 0.75rem;\n"]))),u.default.div(c||(c=m.__makeTemplateObject(["\n width: 100%;\n height: 8px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 99px;\n position: relative;\n &:after {\n content: '';\n width: 70%;\n height: 100%;\n background-color: #fff;\n border-radius: 99px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n }\n"],["\n width: 100%;\n height: 8px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 99px;\n position: relative;\n &:after {\n content: '';\n width: 70%;\n height: 100%;\n background-color: #fff;\n border-radius: 99px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n }\n"]))),u.default.div(g||(g=m.__makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 16px;\n align-items: center;\n &:last-child {\n text-align: right;\n }\n"],["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 16px;\n align-items: center;\n &:last-child {\n text-align: right;\n }\n"]))),u.default.div(f||(f=m.__makeTemplateObject(["\n display: grid;\n grid-gap: 32px;\n align-items: center;\n justify-content: center;\n width: 100%;\n color: #fff;\n grid-template-columns: 32px auto 32px;\n"],["\n display: grid;\n grid-gap: 32px;\n align-items: center;\n justify-content: center;\n width: 100%;\n color: #fff;\n grid-template-columns: 32px auto 32px;\n"]))),exports.StyledAlbumArtThumb=_,exports.StyledArtistDetails=j,exports.StyledArtistName=w,exports.StyledDynamicIsland=x,exports.StyledDynamicIslandTopContent=b,exports.StyledMusicIcon=h,exports.StyledMusicIconBar=y,exports.StyledSongName=k;
2
2
  //# sourceMappingURL=Island.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Island.styles.js","sources":["../../src/styles/Island.styles.ts"],"sourcesContent":["// Copyright (C) 2022 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport styled, { css } from 'styled-components'\n\ninterface StyledDynamicIslandProps {\n isOpen: boolean\n incoming: boolean\n openedIslandPadding: number\n accepted: boolean\n outgoing: boolean\n}\n\nexport const StyledDynamicIsland = styled.div<StyledDynamicIslandProps>`\n align-items: ${({ isOpen }) => (isOpen ? 'flex-start' : 'center')};\n position: absolute;\n border-radius: 99px;\n background-color: #000;\n color: #fff;\n padding: ${({ isOpen, openedIslandPadding }) =>\n isOpen ? `${openedIslandPadding}px` : '8px 16px'};\n font-size: 0.75rem;\n display: grid;\n cursor: pointer;\n ${({ isOpen, accepted, incoming, outgoing }) =>\n isOpen && accepted\n ? css`\n grid-template-rows: 72px 1fr;\n `\n : isOpen &&\n (incoming || outgoing) &&\n css`\n grid-template-columns: 256px 114px;\n `}\n`\ninterface StyledDynamicIslandTopContentProps {\n isOpen: boolean\n}\n\nexport const StyledDynamicIslandTopContent = styled.div<StyledDynamicIslandTopContentProps>`\n display: grid;\n grid-template-columns: ${({ isOpen }) => (isOpen ? '52px 1fr 48px' : '12px 1fr 12px')};\n grid-gap: 16px;\n align-items: ${({ isOpen }) => (isOpen ? 'flex-start' : 'center')};\n justify-content: center;\n width: 100%;\n`\n\nexport const StyledMusicIcon = styled.div`\n width: 12px;\n height: 12px;\n display: grid;\n justify-content: center;\n align-items: center;\n grid-template-columns: repeat(3, 1fr);\n gap: 3px;\n`\n\nexport const StyledMusicIconBar = styled.div`\n width: 100%;\n height: 100%;\n border-radius: 2px;\n background: linear-gradient(0deg, rgba(255, 0, 255, 1) 0%, rgba(255, 0, 255, 0.75) 100%);\n`\n\nexport const StyledAlbumArtThumb = styled.img`\n border-radius: 4px;\n object-fit: cover;\n`\n\nexport const StyledArtistDetails = styled.div`\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n align-items: center;\n justify-content: center;\n grid-template-rows: repeat(2, 1fr);\n`\nexport const StyledArtistName = styled.div`\n font-size: 1rem;\n font-weight: 200;\n color: #fff;\n letter-spacing: 0.5px;\n`\n\nexport const StyledSongName = styled.div`\n font-size: 1rem;\n font-weight: 700;\n color: #fff;\n`\n\nexport const StyledPlayBarWrapper = styled.div`\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-gap: 16px;\n align-items: center;\n justify-content: center;\n width: 100%;\n color: #fff;\n font-size: 0.75rem;\n`\nexport const StyledPlayBar = styled.div`\n width: 100%;\n height: 8px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 99px;\n position: relative;\n &:after {\n content: '';\n width: 70%;\n height: 100%;\n background-color: #fff;\n border-radius: 99px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n }\n`\n\nexport const StyledSongControlsWrappers = styled.div`\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 16px;\n align-items: center;\n &:last-child {\n text-align: right;\n }\n`\nexport const StyledSongControls = styled.div`\n display: grid;\n grid-gap: 32px;\n align-items: center;\n justify-content: center;\n width: 100%;\n color: #fff;\n grid-template-columns: 32px auto 32px;\n`\n"],"names":["StyledDynamicIsland","styled","div","templateObject_3","__makeTemplateObject","_a","isOpen","openedIslandPadding","concat","accepted","incoming","outgoing","css","templateObject_1","templateObject_2","StyledDynamicIslandTopContent","templateObject_4","StyledMusicIcon","templateObject_5","StyledMusicIconBar","templateObject_6","StyledAlbumArtThumb","img","templateObject_7","StyledArtistDetails","templateObject_8","StyledArtistName","templateObject_9","StyledSongName","templateObject_10","templateObject_11","templateObject_12","templateObject_13","templateObject_14"],"mappings":"yOAaaA,EAAsBC,EAAAA,QAAOC,IAAGC,IAAAA,EAAAC,uBAAA,CAAA,oBAAA,2GAAA,qEAAA,MAAA,CAA0B,oBACJ,2GAMf,qEAa3C,SAnBQ,SAACC,GAAe,OAAPA,EAAAC,OAAiB,aAAe,QAAzB,IAKpB,SAACD,OAAEC,EAAMD,EAAAC,OAAEC,EAAmBF,EAAAE,oBACvC,OAAAD,EAAS,GAAAE,OAAGD,EAAuB,MAAG,UAAtC,IAIA,SAACF,OAAEC,EAAMD,EAAAC,OAAEG,EAAQJ,EAAAI,SAAEC,EAAQL,EAAAK,SAAEC,EAAQN,EAAAM,SACvC,OAAAL,GAAUG,EACNG,MAAGC,IAAAA,EAAAT,uBAAA,CAAA,uDAAA,CAAA,0DAGHE,IACCI,GAAYC,IACbC,EAAGA,IAAAE,IAAAA,EAAAV,uBAAA,CAAA,6DAAA,CAAA,+DANP,IAcSW,EAAgCd,EAAM,QAACC,IAAuCc,IAAAA,EAAAZ,EAAAA,qBAAA,CAAA,gDAAA,wCAAA,mDAAA,CAAA,gDAEJ,wCAEpB,sDAFxC,SAACC,GAAe,OAAPA,EAAAC,OAAiB,gBAAkB,eAA5B,IAE1B,SAACD,GAAe,OAAPA,EAAAC,OAAiB,aAAe,QAAzB,IAKpBW,EAAkBhB,EAAM,QAACC,IAAGgB,IAAAA,EAAAd,uBAAA,CAAA,oKAAA,CAAA,uKAU5Be,EAAqBlB,EAAM,QAACC,IAAGkB,IAAAA,EAAAhB,uBAAA,CAAA,2JAAA,CAAA,8JAO/BiB,EAAsBpB,EAAM,QAACqB,IAAGC,IAAAA,EAAAnB,uBAAA,CAAA,mDAAA,CAAA,sDAKhCoB,EAAsBvB,EAAM,QAACC,IAAGuB,IAAAA,EAAArB,uBAAA,CAAA,oKAAA,CAAA,uKAQhCsB,EAAmBzB,EAAM,QAACC,IAAGyB,IAAAA,EAAAvB,uBAAA,CAAA,yFAAA,CAAA,4FAO7BwB,EAAiB3B,EAAM,QAACC,IAAG2B,IAAAA,EAAAzB,uBAAA,CAAA,+DAAA,CAAA,kEAMJH,EAAAA,QAAOC,IAAG4B,IAAAA,EAAA1B,EAAAA,qBAAA,CAAA,+LAAA,CAAA,kMAUjBH,EAAAA,QAAOC,IAAG6B,IAAAA,EAAA3B,EAAAA,qBAAA,CAAA,wUAAA,CAAA,2UAmBGH,EAAAA,QAAOC,IAAG8B,IAAAA,EAAA5B,EAAAA,qBAAA,CAAA,4JAAA,CAAA,+JASlBH,EAAAA,QAAOC,IAAG+B,IAAAA,EAAA7B,EAAAA,qBAAA,CAAA,yKAAA,CAAA"}
1
+ {"version":3,"file":"Island.styles.js","sources":["../../src/styles/Island.styles.ts"],"sourcesContent":["// Copyright (C) 2022 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport styled, { css } from 'styled-components'\n\ninterface StyledDynamicIslandProps {\n isOpen: boolean\n incoming: boolean\n openedIslandPadding: number\n accepted: boolean\n outgoing: boolean\n}\n\nexport const StyledDynamicIsland = styled.div<StyledDynamicIslandProps>`\n align-items: ${({ isOpen }) => (isOpen ? 'flex-start' : 'center')};\n position: absolute;\n border-radius: 99px;\n background-color: #000;\n color: #fff;\n padding: ${({ isOpen, openedIslandPadding }) =>\n isOpen ? `${openedIslandPadding}px` : '8px 16px'};\n font-size: 0.75rem;\n display: grid;\n cursor: pointer;\n ${({ isOpen, accepted, incoming, outgoing }) =>\n isOpen && accepted\n ? css`\n grid-template-rows: 72px 1fr;\n `\n : isOpen &&\n (incoming || outgoing) &&\n css`\n grid-template-columns: 256px 114px;\n `}\n`\ninterface StyledDynamicIslandTopContentProps {\n isOpen: boolean\n}\n\nexport const StyledDynamicIslandTopContent = styled.div<StyledDynamicIslandTopContentProps>`\n display: grid;\n grid-template-columns: ${({ isOpen }) => (isOpen ? '52px 1fr' : '12px 1fr 12px')};\n grid-gap: 16px;\n align-items: ${({ isOpen }) => (isOpen ? 'flex-start' : 'center')};\n justify-content: center;\n width: 100%;\n`\n\nexport const StyledMusicIcon = styled.div`\n width: 12px;\n height: 12px;\n display: grid;\n justify-content: center;\n align-items: center;\n grid-template-columns: repeat(3, 1fr);\n gap: 3px;\n`\n\nexport const StyledMusicIconBar = styled.div`\n width: 100%;\n height: 100%;\n border-radius: 2px;\n background: linear-gradient(0deg, rgba(255, 0, 255, 1) 0%, rgba(255, 0, 255, 0.75) 100%);\n`\n\nexport const StyledAlbumArtThumb = styled.img`\n border-radius: 4px;\n object-fit: cover;\n`\n\nexport const StyledArtistDetails = styled.div`\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n align-items: center;\n justify-content: center;\n grid-template-rows: repeat(2, 1fr);\n`\nexport const StyledArtistName = styled.div`\n font-size: 1rem;\n font-weight: 200;\n color: #fff;\n letter-spacing: 0.5px;\n`\n\nexport const StyledSongName = styled.div`\n font-size: 1rem;\n font-weight: 700;\n color: #fff;\n`\n\nexport const StyledPlayBarWrapper = styled.div`\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-gap: 16px;\n align-items: center;\n justify-content: center;\n width: 100%;\n color: #fff;\n font-size: 0.75rem;\n`\nexport const StyledPlayBar = styled.div`\n width: 100%;\n height: 8px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 99px;\n position: relative;\n &:after {\n content: '';\n width: 70%;\n height: 100%;\n background-color: #fff;\n border-radius: 99px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n }\n`\n\nexport const StyledSongControlsWrappers = styled.div`\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 16px;\n align-items: center;\n &:last-child {\n text-align: right;\n }\n`\nexport const StyledSongControls = styled.div`\n display: grid;\n grid-gap: 32px;\n align-items: center;\n justify-content: center;\n width: 100%;\n color: #fff;\n grid-template-columns: 32px auto 32px;\n`\n"],"names":["StyledDynamicIsland","styled","div","templateObject_3","__makeTemplateObject","_a","isOpen","openedIslandPadding","concat","accepted","incoming","outgoing","css","templateObject_1","templateObject_2","StyledDynamicIslandTopContent","templateObject_4","StyledMusicIcon","templateObject_5","StyledMusicIconBar","templateObject_6","StyledAlbumArtThumb","img","templateObject_7","StyledArtistDetails","templateObject_8","StyledArtistName","templateObject_9","StyledSongName","templateObject_10","templateObject_11","templateObject_12","templateObject_13","templateObject_14"],"mappings":"yOAaaA,EAAsBC,EAAAA,QAAOC,IAAGC,IAAAA,EAAAC,uBAAA,CAAA,oBAAA,2GAAA,qEAAA,MAAA,CAA0B,oBACJ,2GAMf,qEAa3C,SAnBQ,SAACC,GAAe,OAAPA,EAAAC,OAAiB,aAAe,QAAzB,IAKpB,SAACD,OAAEC,EAAMD,EAAAC,OAAEC,EAAmBF,EAAAE,oBACvC,OAAAD,EAAS,GAAAE,OAAGD,EAAuB,MAAG,UAAtC,IAIA,SAACF,OAAEC,EAAMD,EAAAC,OAAEG,EAAQJ,EAAAI,SAAEC,EAAQL,EAAAK,SAAEC,EAAQN,EAAAM,SACvC,OAAAL,GAAUG,EACNG,MAAGC,IAAAA,EAAAT,uBAAA,CAAA,uDAAA,CAAA,0DAGHE,IACCI,GAAYC,IACbC,EAAGA,IAAAE,IAAAA,EAAAV,uBAAA,CAAA,6DAAA,CAAA,+DANP,IAcSW,EAAgCd,EAAM,QAACC,IAAuCc,IAAAA,EAAAZ,EAAAA,qBAAA,CAAA,gDAAA,wCAAA,mDAAA,CAAA,gDAET,wCAEf,sDAFxC,SAACC,GAAe,OAAPA,EAAAC,OAAiB,WAAa,eAAvB,IAE1B,SAACD,GAAe,OAAPA,EAAAC,OAAiB,aAAe,QAAzB,IAKpBW,EAAkBhB,EAAM,QAACC,IAAGgB,IAAAA,EAAAd,uBAAA,CAAA,oKAAA,CAAA,uKAU5Be,EAAqBlB,EAAM,QAACC,IAAGkB,IAAAA,EAAAhB,uBAAA,CAAA,2JAAA,CAAA,8JAO/BiB,EAAsBpB,EAAM,QAACqB,IAAGC,IAAAA,EAAAnB,uBAAA,CAAA,mDAAA,CAAA,sDAKhCoB,EAAsBvB,EAAM,QAACC,IAAGuB,IAAAA,EAAArB,uBAAA,CAAA,oKAAA,CAAA,uKAQhCsB,EAAmBzB,EAAM,QAACC,IAAGyB,IAAAA,EAAAvB,uBAAA,CAAA,yFAAA,CAAA,4FAO7BwB,EAAiB3B,EAAM,QAACC,IAAG2B,IAAAA,EAAAzB,uBAAA,CAAA,+DAAA,CAAA,kEAMJH,EAAAA,QAAOC,IAAG4B,IAAAA,EAAA1B,EAAAA,qBAAA,CAAA,+LAAA,CAAA,kMAUjBH,EAAAA,QAAOC,IAAG6B,IAAAA,EAAA3B,EAAAA,qBAAA,CAAA,wUAAA,CAAA,2UAmBGH,EAAAA,QAAOC,IAAG8B,IAAAA,EAAA5B,EAAAA,qBAAA,CAAA,4JAAA,CAAA,+JASlBH,EAAAA,QAAOC,IAAG+B,IAAAA,EAAA7B,EAAAA,qBAAA,CAAA,yKAAA,CAAA"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@nethesis/phone-island",
3
3
  "author": "Nethesis",
4
- "version": "0.7.32",
4
+ "version": "0.7.33",
5
5
  "description": "NethVoice CTI Phone Island",
6
6
  "keywords": [
7
7
  "nethserver",