npm - @nethesis/phone-island - Versions diffs - 1.1.3 → 1.1.5-dev.1 - Mend

@nethesis/phone-island 1.1.3 → 1.1.5-dev.1

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.

Files changed (463) hide show

package/dist/components/PhysicalRecorderView/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/PhysicalRecorderView/index.tsx"],"sourcesContent":["// Copyright (C) 2024 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { type FC, useRef, useEffect } from 'react'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { Dispatch, RootState, store } from '../../store'\nimport { useTranslation } from 'react-i18next'\nimport Hangup from '../Hangup'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faCircle } from '@fortawesome/free-solid-svg-icons'\nimport { useEventListener, eventDispatch } from '../../utils'\nimport { startAnnouncementRecording } from '../../services/offhour'\nimport { dispatchPhysicalRecordingSave } from '../../events'\nimport PhysicalRecordingTimer from './PhysicalRecordingTimer'\n\nexport const PhysicalRecorderView: FC<PhysicalRecorderViewProps> = () => {\n const { isOpen } = useSelector((state: RootState) => state.island)\n const { recording } = useSelector((state: RootState) => ({\n recording: state.physicalRecorder.recording,\n }))\n\n const { username } = store.getState().currentUser\n const visibleContainerRef = useRef<HTMLDivElement>(null)\n\n // Initialize state dispatch\n const dispatch = useDispatch<Dispatch>()\n\n // Handle view close and reset state\n useEffect(() => {\n // Set visible container reference to recorder state\n dispatch.recorder.setVisibleContainerRef(visibleContainerRef)\n\n return () => {\n dispatch.recorder.reset()\n }\n }, [])\n\n const { t } = useTranslation()\n\n async function handleStart() {\n // Update the recorder state\n dispatch.physicalRecorder.setRecording(true)\n // Call the api to start the recording call\n const data: { tempFilename: string } \| null = await startAnnouncementRecording()\n // Set the returned temp file name to the store\n if (data.tempFilename) dispatch.physicalRecorder.setTempFilename(data.tempFilename)\n eventDispatch('phone-island-recording-started', {})\n }\n\n // Save recording inside store and make api request\n useEventListener('phone-island-physical-recording-open', () => {\n handleStart()\n })\n\n const { recordingTempVariable } = store.getState().physicalRecorder\n // recording true and conversation not empty recording is started\n // recording true and conversation empty recording is stopped\n useEventListener('phone-island-conversations', (data: { [key: string]: any }) => {\n const keys = Object.keys(data)\n\n keys.forEach((key) => {\n if (key === username) {\n let conversations = data[key]?.conversations\n\n if (conversations) {\n const conversationKeys = Object.keys(conversations)\n if (\n conversationKeys.length > 0 &&\n conversations[conversationKeys[0]].counterpartName === 'REC'\n ) {\n // Set the start time of recording\n dispatch.physicalRecorder.setStartTime(`${Date.now() / 1000}`)\n let firstConversationKey = conversationKeys[0]\n let userRecordingData = conversations[firstConversationKey]\n if (userRecordingData) {\n if (userRecordingData.chSource) {\n let recordingCallInformation = {\n conversationId: userRecordingData.id,\n endpointId: userRecordingData.chSource.callerNum,\n }\n dispatch.physicalRecorder.setCallRecordingInformations({\n recordingCallInformation,\n })\n }\n }\n }\n if (conversationKeys.length === 0 && recording && !recordingTempVariable) {\n // close physical recording phone island view\n dispatchPhysicalRecordingSave()\n dispatch.island.setIslandView(null)\n dispatch.physicalRecorder.setRecording(false)\n }\n }\n }\n })\n })\n\n return (\n <>\n {isOpen ? (\n <div className=''>\n {recordingTempVariable && (\n <div className='pi-flex pi-w-full pi-justify-center pi-items-center pi-pt-4 pi-pb-9'>\n <div className='pi-font-medium pi-text-4xl pi-w-fit pi-h-fit dark:pi-text-white'>\n <PhysicalRecordingTimer />\n </div>\n </div>\n )}\n <div className='pi-flex pi-w-full pi-justify-center pi-items-center'>\n {recordingTempVariable ? (\n <div className='pi-sans pi-text-sm pi-w-fit pi-h-fit dark:pi-text-white'>\n {t('Common.Close the call to stop recording')}\n </div>\n ) : (\n <div className='pi-mt-12 pi-font-regular pi-text-lg pi-w-fit pi-h-fit dark:pi-text-white'>\n {t('Common.Answer phone to start recording')}\n </div>\n )}\n </div>\n <div className='pi-grid pi-pt-2 pi-mt-8'>\n <div className='pi-grid pi-justify-items-center'>\n <Hangup description={t('Tooltip.Interrupt recording')} isPhysicalRecording />\n </div>\n </div>\n </div>\n ) : (\n <div className='pi-flex pi-justify-between pi-items-center'>\n <div className='pi-font-medium pi-text-base'>{t('Common.Recording')}</div>\n <div\n className={`${\n !isOpen ? 'pi-h-6 pi-w-6' : 'pi-h-12 pi-w-12'\n } pi-flex pi-justify-center pi-items-center`}\n >\n <div\n className={`${\n !isOpen ? 'pi-h-4 pi-w-4 pi-rounded-full' : 'pi-h-8'\n } pi-w-fit pi-flex pi-justify-center pi-items-center pi-gap-1 pi-overflow-hidden`}\n >\n <span\n className={`${\n !isOpen ? 'pi-h-6 pi-w-6' : 'pi-w-8 pi-h-8'\n } pi-animate-ping pi-absolute pi-inline-flex pi-rounded-full pi-bg-red-400 pi-opacity-75 `}\n ></span>\n <FontAwesomeIcon\n className='pi-w-4 pi-h-6 pi-rotate-45 pi-text-red-500'\n icon={faCircle}\n ></FontAwesomeIcon>\n </div>\n </div>\n </div>\n )}\n </>\n )\n}\n\nexport interface PhysicalRecorderViewProps {}\n"],"names":["isOpen","useSelector","state","island","recording","physicalRecorder","username","store","getState","currentUser","visibleContainerRef","useRef","dispatch","useDispatch","useEffect","recorder","setVisibleContainerRef","reset","t","useTranslation","useEventListener","setRecording","startAnnouncementRecording","data","_a","sent","tempFilename","setTempFilename","eventDispatch","handleStart","recordingTempVariable","Object","keys","forEach","key","conversations","conversationKeys","length","counterpartName","setStartTime","concat","Date","now","userRecordingData","chSource","recordingCallInformation","conversationId","id","endpointId","callerNum","setCallRecordingInformations","dispatchPhysicalRecordingSave","setIslandView","React","createElement","Fragment","className","PhysicalRecordingTimer","Hangup","description","isPhysicalRecording","FontAwesomeIcon","icon","faCircle"],"mappings":"~~qiDAemE~~,WACzD,IAAAA,EAAWC,cAAY,SAACC,GAAqB,OAAAA,EAAMC,gBACnDC,EAAcH,EAAAA,YAAY,SAACC,GAAqB,MAAC,CACvDE,UAAWF,EAAMG,iBAAiBD,UADoB,GAErDA,UAEKE,EAAaC,EAAKA,MAACC,WAAWC,YAAWH,SAC3CI,EAAsBC,SAAuB,MAG7CC,EAAWC,EAAAA,cAGjBC,EAAAA,UAAU,WAIR,OAFAF,EAASG,SAASC,uBAAuBN,GAElC,WACLE,EAASG,SAASE,OACpB,CACD,EAAE,IAEK,IAAAC,EAAMC,qBAadC,EAAgBA,iBAAC,uCAAwC,YAXzD,wHAIgD,OAF9CR,EAASP,iBAAiBgB,cAAa,GAEO,CAAA,EAAMC,8CAA9CC,EAAwCC,EAAkCC,QAEvEC,cAAcd,EAASP,iBAAiBsB,gBAAgBJ,EAAKG,cACtEE,gBAAc,iCAAkC,CAAA,WACjD,CAICC,EACF,GAEQ,IAAAC,EAA0BvB,EAAKA,MAACC,WAAWH,iBAAgByB,sBA2CnE,OAxCAV,mBAAiB,6BAA8B,SAACG,GACjCQ,OAAOC,KAAKT,GAEpBU,QAAQ,SAACC,SACZ,GAAIA,IAAQ5B,EAAU,CACpB,IAAI6B,EAA2B,QAAXX,EAAAD,EAAKW,UAAM,IAAAV,OAAA,EAAAA,EAAAW,cAE/B,GAAIA,EAAe,CACjB,IAAMC,EAAmBL,OAAOC,KAAKG,GACrC,GACEC,EAAiBC,OAAS,GAC6B,QAAvDF,EAAcC,EAAiB,IAAIE,gBACnC,CAEA1B,EAASP,iBAAiBkC,aAAa,GAAGC,OAAAC,KAAKC,MAAQ,MACvD,IACIC,EAAoBR,EADGC,EAAiB,IAE5C,GAAIO,GACEA,EAAkBC,SAAU,CAC9B,IAAIC,EAA2B,CAC7BC,eAAgBH,EAAkBI,GAClCC,WAAYL,EAAkBC,SAASK,WAEzCrC,EAASP,iBAAiB6C,6BAA6B,CACrDL,yBAAwBA,GAE3B,CAEJ,CAC+B,IAA5BT,EAAiBC,QAAgBjC,IAAc0B,IAEjDqB,EAAAA,gCACAvC,EAAST,OAAOiD,cAAc,MAC9BxC,EAASP,iBAAiBgB,cAAa,GAE1C,CACF,CACH,EACF,GAGEgC,UACGC,cAAAD,EAAA,QAAAE,SAAA,KAAAvD,EACCqD,EAAAA,QAAAC,cAAA,MAAA,CAAKE,UAAU,IACZ1B,GACCuB,EAAK,QAAAC,cAAA,MAAA,CAAAE,UAAU,uEACbH,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,mEACbH,EAAAA,QAAAC,cAACG,EAAAA,QAAsB,QAI7BJ,EAAAA,QAAAC,cAAA,MAAA,CAAKE,UAAU,uDACZ1B,EACCuB,+BAAKG,UAAU,2DACZtC,EAAE,4CAGLmC,+BAAKG,UAAU,4EACZtC,EAAE,4CAITmC,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,2BACbH,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,mCACbH,EAAC,QAAAC,cAAAI,WAAOC,YAAazC,EAAE,+BAAgC0C,qBAAmB,OAKhFP,EAAA,QAAAC,cAAA,MAAA,CAAKE,UAAU,8CACbH,UAAKC,cAAA,MAAA,CAAAE,UAAU,+BAA+BtC,EAAE,qBAChDmC,EAAAA,QAAAC,cAAA,MAAA,CACEE,UAAW,GACThB,OAACxC,EAA2B,kBAAlB,gBACgC,+CAE5CqD,EAAAA,QAAAC,cAAA,MAAA,CACEE,UAAW,GACThB,OAACxC,EAA2C,SAAlC,gCACqE,oFAEjFqD,EAAAA,QAAAC,cAAA,OAAA,CACEE,UAAW,GACThB,OAACxC,EAA2B,gBAAlB,8GAGdqD,EAAAA,QAAAC,cAACO,kBACC,CAAAL,UAAU,6CACVM,KAAMC,gBAQtB"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/PhysicalRecorderView/index.tsx"],"sourcesContent":["// Copyright (C) 2024 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { type FC, useRef, useEffect } from 'react'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { Dispatch, RootState, store } from '../../store'\nimport { useTranslation } from 'react-i18next'\nimport Hangup from '../Hangup'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faCircle } from '@fortawesome/free-solid-svg-icons'\nimport { useEventListener, eventDispatch } from '../../utils'\nimport { startAnnouncementRecording } from '../../services/offhour'\nimport { dispatchPhysicalRecordingSave } from '../../events'\nimport PhysicalRecordingTimer from './PhysicalRecordingTimer'\n\nexport const PhysicalRecorderView: FC<PhysicalRecorderViewProps> = () => {\n const { isOpen } = useSelector((state: RootState) => state.island)\n const { recording } = useSelector((state: RootState) => ({\n recording: state.physicalRecorder.recording,\n }))\n\n const { username } = store.getState().currentUser\n const visibleContainerRef = useRef<HTMLDivElement>(null)\n\n // Initialize state dispatch\n const dispatch = useDispatch<Dispatch>()\n\n // Handle view close and reset state\n useEffect(() => {\n // Set visible container reference to recorder state\n dispatch.recorder.setVisibleContainerRef(visibleContainerRef)\n\n return () => {\n dispatch.recorder.reset()\n }\n }, [])\n\n const { t } = useTranslation()\n\n async function handleStart() {\n // Update the recorder state\n dispatch.physicalRecorder.setRecording(true)\n // Call the api to start the recording call\n const data: { tempFilename: string } \| null = await startAnnouncementRecording()\n // Set the returned temp file name to the store\n if (data.tempFilename) dispatch.physicalRecorder.setTempFilename(data.tempFilename)\n eventDispatch('phone-island-recording-started', {})\n }\n\n // Save recording inside store and make api request\n useEventListener('phone-island-physical-recording-open', () => {\n handleStart()\n })\n\n const { recordingTempVariable } = store.getState().physicalRecorder\n // recording true and conversation not empty recording is started\n // recording true and conversation empty recording is stopped\n useEventListener('phone-island-conversations', (data: { [key: string]: any }) => {\n const keys = Object.keys(data)\n\n keys.forEach((key) => {\n if (key === username) {\n let conversations = data[key]?.conversations\n\n if (conversations) {\n const conversationKeys = Object.keys(conversations)\n if (\n conversationKeys.length > 0 &&\n conversations[conversationKeys[0]].counterpartName === 'REC'\n ) {\n // Set the start time of recording\n dispatch.physicalRecorder.setStartTime(`${Date.now() / 1000}`)\n let firstConversationKey = conversationKeys[0]\n let userRecordingData = conversations[firstConversationKey]\n if (userRecordingData) {\n if (userRecordingData.chSource) {\n let recordingCallInformation = {\n conversationId: userRecordingData.id,\n endpointId: userRecordingData.chSource.callerNum,\n }\n dispatch.physicalRecorder.setCallRecordingInformations({\n recordingCallInformation,\n })\n }\n }\n }\n if (conversationKeys.length === 0 && recording && !recordingTempVariable) {\n // close physical recording phone island view\n dispatchPhysicalRecordingSave()\n dispatch.island.setIslandView(null)\n dispatch.physicalRecorder.setRecording(false)\n }\n }\n }\n })\n })\n\n return (\n <>\n {isOpen ? (\n <div className=''>\n {recordingTempVariable && (\n <div className='pi-flex pi-w-full pi-justify-center pi-items-center pi-pt-4 pi-pb-9'>\n <div className='pi-font-medium pi-text-4xl pi-w-fit pi-h-fit dark:pi-text-white'>\n <PhysicalRecordingTimer />\n </div>\n </div>\n )}\n <div className='pi-flex pi-w-full pi-justify-center pi-items-center'>\n {recordingTempVariable ? (\n <div className='pi-sans pi-text-sm pi-w-fit pi-h-fit dark:pi-text-white'>\n {t('Common.Close the call to stop recording')}\n </div>\n ) : (\n <div className='pi-mt-12 pi-font-regular pi-text-lg pi-w-fit pi-h-fit dark:pi-text-white'>\n {t('Common.Answer phone to start recording')}\n </div>\n )}\n </div>\n <div className='pi-grid pi-pt-2 pi-mt-8'>\n <div className='pi-grid pi-justify-items-center'>\n <Hangup description={t('Tooltip.Interrupt recording')} isPhysicalRecording />\n </div>\n </div>\n </div>\n ) : (\n <div className='pi-flex pi-justify-between pi-items-center'>\n <div className='pi-font-medium pi-text-base'>{t('Common.Recording')}</div>\n <div\n className={`${\n !isOpen ? 'pi-h-6 pi-w-6' : 'pi-h-12 pi-w-12'\n } pi-flex pi-justify-center pi-items-center`}\n >\n <div\n className={`${\n !isOpen ? 'pi-h-4 pi-w-4 pi-rounded-full' : 'pi-h-8'\n } pi-w-fit pi-flex pi-justify-center pi-items-center pi-gap-1 pi-overflow-hidden`}\n >\n <span\n className={`${\n !isOpen ? 'pi-h-6 pi-w-6' : 'pi-w-8 pi-h-8'\n } pi-animate-ping pi-absolute pi-inline-flex pi-rounded-full pi-bg-red-400 pi-opacity-75 `}\n ></span>\n <FontAwesomeIcon\n className='pi-w-4 pi-h-6 pi-rotate-45 pi-text-red-500'\n icon={faCircle}\n ></FontAwesomeIcon>\n </div>\n </div>\n </div>\n )}\n </>\n )\n}\n\nexport interface PhysicalRecorderViewProps {}\n"],"names":["isOpen","useSelector","state","island","recording","physicalRecorder","username","store","getState","currentUser","visibleContainerRef","useRef","dispatch","useDispatch","useEffect","recorder","setVisibleContainerRef","reset","t","useTranslation","useEventListener","setRecording","startAnnouncementRecording","data","_a","sent","tempFilename","setTempFilename","eventDispatch","handleStart","recordingTempVariable","Object","keys","forEach","key","conversations","conversationKeys","length","counterpartName","setStartTime","concat","Date","now","userRecordingData","chSource","recordingCallInformation","conversationId","id","endpointId","callerNum","setCallRecordingInformations","dispatchPhysicalRecordingSave","setIslandView","React","createElement","Fragment","className","PhysicalRecordingTimer","Hangup","description","isPhysicalRecording","FontAwesomeIcon","icon","faCircle"],"mappings":"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"}

package/dist/components/RecorderView/Actions.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/tslib/tslib.es6.js"),t=require("react"),r=require("../Button.js"),i=require("../../node_modules/@fortawesome/react-fontawesome/dist/index.js"),o=require("../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js"),n=require("../../services/offhour.js");require("../../node_modules/react-redux/es/index.js");var s=require("../../lib/phone/call.js"),a=require("../../utils/customHooks/useEventListener.js"),l=require("../../utils/genericFunctions/eventDispatch.js");require("../../store/index.js");var c=require("../../events/RecorderEvents.js");require("../../node_modules/@babel/runtime/helpers/defineProperty.js"),require("../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),require("../../node_modules/@babel/runtime/helpers/typeof.js"),require("../../node_modules/html-parse-stringify/dist/html-parse-stringify.js"),require("../../node_modules/react-i18next/dist/es/context.js");var d=require("../../node_modules/react-i18next/dist/es/useTranslation.js");require("../../node_modules/@babel/runtime/helpers/slicedToArray.js");var u=require("../CustomThemedTooltip.js"),p=require("../../node_modules/@nethesis/nethesis-solid-svg-icons/index.mjs.js"),m=require("../../node_modules/react-redux/es/utils/shallowEqual.js");require("../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js"),require("../../node_modules/react-redux/node_modules/react-is/index.js");var f=require("../../node_modules/react-redux/es/hooks/useDispatch.js"),g=require("../../node_modules/react-redux/es/hooks/useSelector.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=h(t);exports.Actions=function(){var h=f.useDispatch(),w=g.useSelector(function(e){return{incoming:e.recorder.incoming,waiting:e.recorder.waiting,recording:e.recorder.recording,recorded:e.recorder.recorded,playing:e.recorder.playing}},m.default),j=w.incoming,x=w.waiting,q=w.recording,E=w.recorded,y=w.playing;function _(){return e.__awaiter(this,void 0,void 0,function(){var t;return e.__generator(this,function(e){switch(e.label){case 0:return h.recorder.setRecording(!0),h.recorder.setWaiting(!0),[4,n.startAnnouncementRecording()];case 1:return(t=e.sent()).tempFilename&&h.recorder.setTempFilename(t.tempFilename),h.recorder.setStartTime("".concat(Date.now()/1e3)),l.eventDispatch("phone-island-recording-started",{}),[2]}})})}function T(){h.recorder.setWaiting(!0),s.hangupCurrentCall(),h.recorder.setRecorded(!0),l.eventDispatch("phone-island-recording-stopped",{})}function b(){y&&(h.player.pauseAudioPlayer(),h.recorder.setPlaying(!1),h.recorder.setPaused(!0)),c.dispatchRecordingSave(),h.island.setIslandView(null)}a.useEventListener("phone-island-recording-start",function(e){_()}),a.useEventListener("phone-island-recording-stop",function(e){T()}),a.useEventListener("phone-island-recording-save",function(e){b()}),t.useEffect(function(){q||h.recorder.setWaiting(!1)},[q]),t.useEffect(function(){j&&(s.answerIncomingCall(),h.recorder.setIncoming(!1),h.recorder.setWaiting(!1))},[j]);var C=d.useTranslation().t;return v.default.createElement("div",{className:"pi-flex pi-items-center pi-justify-between pi-px-6 pi-py-2 pi-gap-0 pi-w-full pi-mt-auto"},v.default.createElement(r.Button,{variant:"transparent",disabled:!0,className:"pi-w-6 pi-h-6 pi-flex pi-items-center pi-justify-center pi-flex-none"},v.default.createElement(i.FontAwesomeIcon,{icon:o.faDownLeftAndUpRightToCenter,className:"pi-w-6 pi-h-6"})),v.default.createElement("div",{className:"pi-flex pi-items-center pi-justify-center pi-flex-grow"},q&&v.default.createElement(r.Button,{onClick:T,variant:"default",className:"pi-rounded-full pi-w-14 pi-h-14 pi-flex pi-items-center pi-justify-center","data-tooltip-id":"tooltip-stop-recorder-view","data-tooltip-content":C("Tooltip.Stop")||""},x?v.default.createElement(i.FontAwesomeIcon,{icon:o.faCircleNotch,className:"fa-spin pi-loader",size:"lg"}):v.default.createElement(i.FontAwesomeIcon,{icon:o.faStop,size:"xl"})),E&&!q&&v.default.createElement(r.Button,{onClick:b,variant:"default",className:"pi-rounded-full pi-w-14 pi-h-14 pi-flex pi-items-center pi-justify-center","data-tooltip-id":"tooltip-confirm-record-view","data-tooltip-content":C("Tooltip.Confirm")||""},v.default.createElement(i.FontAwesomeIcon,{icon:o.faFloppyDisk,className:"pi-h-6 pi-w-6"})),!q&&!E&&v.default.createElement(r.Button,{onClick:_,variant:"default",className:"pi-rounded-full pi-w-14 pi-h-14 pi-flex pi-items-center pi-justify-center","data-tooltip-id":"tooltip-start-recording-recorder-view","data-tooltip-content":C("Tooltip.Start recording")||""},x?v.default.createElement(i.FontAwesomeIcon,{icon:o.faCircleNotch,className:"fa-spin pi-loader",size:"lg"}):v.default.createElement(i.FontAwesomeIcon,{icon:p.faRecord,className:"pi-h-6 pi-w-6"}))),v.default.createElement("div",{onClick:function(){return h.island.setIslandView("settings")},"data-tooltip-id":"tooltip-settings-view-recorder","data-tooltip-content":C("Tooltip.Go to settings")||"",className:"pi-flex pi-items-center pi-justify-center pi-cursor-pointer pi-text-gray-700 dark:pi-text-gray-200 pi-w-6 pi-h-6 pi-flex-none"},v.default.createElement(i.FontAwesomeIcon,{icon:o.faGear,className:"pi-h-6 pi-w-6"})),v.default.createElement(u.CustomThemedTooltip,{id:"tooltip-start-recording-recorder-view",place:"top"}),v.default.createElement(u.CustomThemedTooltip,{id:"tooltip-stop-recorder-view",place:"top"}),v.default.createElement(u.CustomThemedTooltip,{id:"tooltip-confirm-record-view",place:"top"}),v.default.createElement(u.CustomThemedTooltip,{id:"tooltip-settings-view-recorder",place:"top"}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/tslib/tslib.es6.js"),t=require("react"),i=require("../Button.js"),r=require("../../node_modules/@fortawesome/react-fontawesome/dist/index.js"),o=require("../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js"),n=require("../../services/offhour.js");require("../../node_modules/react-redux/es/index.js");var s=require("../../lib/phone/call.js"),a=require("../../utils/customHooks/useEventListener.js"),c=require("../../utils/genericFunctions/eventDispatch.js");require("../../store/index.js");var l=require("../../events/RecorderEvents.js");require("../../node_modules/i18next/dist/esm/i18next.js"),require("../../node_modules/react-i18next/dist/es/context.js");var d=require("../../node_modules/react-i18next/dist/es/useTranslation.js"),u=require("../CustomThemedTooltip.js"),p=require("../../node_modules/@nethesis/nethesis-solid-svg-icons/index.mjs.js"),m=require("../../node_modules/react-redux/es/utils/shallowEqual.js");require("../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js"),require("../../node_modules/react-redux/node_modules/react-is/index.js");var f=require("../../node_modules/react-redux/es/hooks/useDispatch.js"),g=require("../../node_modules/react-redux/es/hooks/useSelector.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=h(t);exports.Actions=function(){var h=f.useDispatch(),w=g.useSelector(function(e){return{incoming:e.recorder.incoming,waiting:e.recorder.waiting,recording:e.recorder.recording,recorded:e.recorder.recorded,playing:e.recorder.playing}},m.default),j=w.incoming,x=w.waiting,E=w.recording,q=w.recorded,_=w.playing;function y(){return e.__awaiter(this,void 0,void 0,function(){var t;return e.__generator(this,function(e){switch(e.label){case 0:return h.recorder.setRecording(!0),h.recorder.setWaiting(!0),[4,n.startAnnouncementRecording()];case 1:return(t=e.sent()).tempFilename&&h.recorder.setTempFilename(t.tempFilename),h.recorder.setStartTime("".concat(Date.now()/1e3)),c.eventDispatch("phone-island-recording-started",{}),[2]}})})}function T(){h.recorder.setWaiting(!0),s.hangupCurrentCall(),h.recorder.setRecorded(!0),c.eventDispatch("phone-island-recording-stopped",{})}function C(){_&&(h.player.pauseAudioPlayer(),h.recorder.setPlaying(!1),h.recorder.setPaused(!0)),l.dispatchRecordingSave(),h.island.setIslandView(null)}a.useEventListener("phone-island-recording-start",function(e){y()}),a.useEventListener("phone-island-recording-stop",function(e){T()}),a.useEventListener("phone-island-recording-save",function(e){C()}),t.useEffect(function(){E||h.recorder.setWaiting(!1)},[E]),t.useEffect(function(){j&&(s.answerIncomingCall(),h.recorder.setIncoming(!1),h.recorder.setWaiting(!1))},[j]);var N=d.useTranslation().t;return v.default.createElement("div",{className:"pi-flex pi-items-center pi-justify-between pi-px-6 pi-py-2 pi-gap-0 pi-w-full pi-mt-auto"},v.default.createElement(i.Button,{variant:"transparent",disabled:!0,className:"pi-w-6 pi-h-6 pi-flex pi-items-center pi-justify-center pi-flex-none"},v.default.createElement(r.FontAwesomeIcon,{icon:o.faDownLeftAndUpRightToCenter,className:"pi-w-6 pi-h-6"})),v.default.createElement("div",{className:"pi-flex pi-items-center pi-justify-center pi-flex-grow"},E&&v.default.createElement(i.Button,{onClick:T,variant:"default",className:"pi-rounded-full pi-w-14 pi-h-14 pi-flex pi-items-center pi-justify-center","data-tooltip-id":"tooltip-stop-recorder-view","data-tooltip-content":N("Tooltip.Stop")||""},x?v.default.createElement(r.FontAwesomeIcon,{icon:o.faCircleNotch,className:"fa-spin pi-loader",size:"lg"}):v.default.createElement(r.FontAwesomeIcon,{icon:o.faStop,size:"xl"})),q&&!E&&v.default.createElement(i.Button,{onClick:C,variant:"default",className:"pi-rounded-full pi-w-14 pi-h-14 pi-flex pi-items-center pi-justify-center","data-tooltip-id":"tooltip-confirm-record-view","data-tooltip-content":N("Tooltip.Confirm")||""},v.default.createElement(r.FontAwesomeIcon,{icon:o.faFloppyDisk,className:"pi-h-6 pi-w-6"})),!E&&!q&&v.default.createElement(i.Button,{onClick:y,variant:"default",className:"pi-rounded-full pi-w-14 pi-h-14 pi-flex pi-items-center pi-justify-center","data-tooltip-id":"tooltip-start-recording-recorder-view","data-tooltip-content":N("Tooltip.Start recording")||""},x?v.default.createElement(r.FontAwesomeIcon,{icon:o.faCircleNotch,className:"fa-spin pi-loader",size:"lg"}):v.default.createElement(r.FontAwesomeIcon,{icon:p.faRecord,className:"pi-h-6 pi-w-6"}))),v.default.createElement("div",{onClick:function(){return h.island.setIslandView("settings")},"data-tooltip-id":"tooltip-settings-view-recorder","data-tooltip-content":N("Tooltip.Go to settings")||"",className:"pi-flex pi-items-center pi-justify-center pi-cursor-pointer pi-text-gray-700 dark:pi-text-gray-200 pi-w-6 pi-h-6 pi-flex-none"},v.default.createElement(r.FontAwesomeIcon,{icon:o.faGear,className:"pi-h-6 pi-w-6"})),v.default.createElement(u.CustomThemedTooltip,{id:"tooltip-start-recording-recorder-view",place:"top"}),v.default.createElement(u.CustomThemedTooltip,{id:"tooltip-stop-recorder-view",place:"top"}),v.default.createElement(u.CustomThemedTooltip,{id:"tooltip-confirm-record-view",place:"top"}),v.default.createElement(u.CustomThemedTooltip,{id:"tooltip-settings-view-recorder",place:"top"}))};
 //# sourceMappingURL=Actions.js.map

package/dist/components/RecorderView/Actions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Actions.js","sources":["../../../src/components/RecorderView/Actions.tsx"],"sourcesContent":["//\n// Copyright (C) 2024 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n//\n\nimport React, { type FC, useEffect } from 'react'\nimport { Button } from '../Button'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n faStop,\n faCircleNotch,\n faGear,\n faDownLeftAndUpRightToCenter,\n faFloppyDisk,\n} from '@fortawesome/free-solid-svg-icons'\nimport { startAnnouncementRecording } from '../../services/offhour'\nimport { useDispatch, useSelector, shallowEqual } from 'react-redux'\nimport { Dispatch, RootState } from '../../store'\nimport { hangupCurrentCall, answerIncomingCall } from '../../lib/phone/call'\nimport { dispatchRecordingSave } from '../../events'\nimport { useTranslation } from 'react-i18next'\nimport { useEventListener, eventDispatch } from '../../utils'\nimport { CustomThemedTooltip } from '../CustomThemedTooltip'\nimport { faRecord } from '@nethesis/nethesis-solid-svg-icons'\n\nexport const Actions: FC<{}> = () => {\n const dispatch = useDispatch<Dispatch>()\n const { incoming, waiting, recording, recorded, playing } = useSelector(\n (state: RootState) => ({\n incoming: state.recorder.incoming,\n waiting: state.recorder.waiting,\n recording: state.recorder.recording,\n recorded: state.recorder.recorded,\n playing: state.recorder.playing,\n }),\n shallowEqual,\n )\n\n async function handleStart() {\n // Update the recorder state\n dispatch.recorder.setRecording(true)\n dispatch.recorder.setWaiting(true)\n // Call the api to start the recording call\n const data: { tempFilename: string } \| null = await startAnnouncementRecording()\n // Set the returned temp file name to the store\n if (data.tempFilename) dispatch.recorder.setTempFilename(data.tempFilename)\n // Set the start time of recording\n dispatch.recorder.setStartTime(`${Date.now() / 1000}`)\n eventDispatch('phone-island-recording-started', {})\n }\n useEventListener('phone-island-recording-start', (data: {}) => {\n handleStart()\n })\n\n function handleStop() {\n // Set waiting to true\n dispatch.recorder.setWaiting(true)\n // Call the function to hangup the current call used for recording\n hangupCurrentCall()\n dispatch.recorder.setRecorded(true)\n eventDispatch('phone-island-recording-stopped', {})\n }\n useEventListener('phone-island-recording-stop', (data: {}) => {\n handleStop()\n })\n\n function handleSaveRecording() {\n // check if the audio is playing and pause it\n if (playing) {\n dispatch.player.pauseAudioPlayer()\n dispatch.recorder.setPlaying(false)\n dispatch.recorder.setPaused(true)\n }\n // Dispatch the reconrding save event\n dispatchRecordingSave()\n // Close the Island\n dispatch.island.setIslandView(null)\n }\n useEventListener('phone-island-recording-save', (data: {}) => {\n handleSaveRecording()\n })\n\n useEffect(() => {\n if (!recording) {\n dispatch.recorder.setWaiting(false)\n }\n }, [recording])\n\n useEffect(() => {\n if (incoming) {\n // Answer the incoming call for recording\n answerIncomingCall()\n // Reset incoming to recorder state\n dispatch.recorder.setIncoming(false)\n dispatch.recorder.setWaiting(false)\n }\n }, [incoming])\n\n const { t } = useTranslation()\n\n return (\n <div\n className={`pi-flex pi-items-center pi-justify-between pi-px-6 pi-py-2 pi-gap-0 pi-w-full pi-mt-auto`}\n >\n <Button\n variant='transparent'\n disabled\n className='pi-w-6 pi-h-6 pi-flex pi-items-center pi-justify-center pi-flex-none'\n >\n <FontAwesomeIcon icon={faDownLeftAndUpRightToCenter} className='pi-w-6 pi-h-6' />\n </Button>\n\n <div className='pi-flex pi-items-center pi-justify-center pi-flex-grow'>\n {recording && (\n <Button\n onClick={handleStop}\n variant='default'\n className='pi-rounded-full pi-w-14 pi-h-14 pi-flex pi-items-center pi-justify-center'\n data-tooltip-id='tooltip-stop-recorder-view'\n data-tooltip-content={t('Tooltip.Stop') \|\| ''}\n >\n {waiting ? (\n <FontAwesomeIcon icon={faCircleNotch} className='fa-spin pi-loader' size='lg' />\n ) : (\n <FontAwesomeIcon icon={faStop} size='xl' />\n )}\n </Button>\n )}\n {recorded && !recording && (\n <Button\n onClick={handleSaveRecording}\n variant='default'\n className='pi-rounded-full pi-w-14 pi-h-14 pi-flex pi-items-center pi-justify-center'\n data-tooltip-id='tooltip-confirm-record-view'\n data-tooltip-content={t('Tooltip.Confirm') \|\| ''}\n >\n <FontAwesomeIcon icon={faFloppyDisk} className='pi-h-6 pi-w-6' />\n </Button>\n )}\n {!recording && !recorded && (\n <Button\n onClick={handleStart}\n variant='default'\n className='pi-rounded-full pi-w-14 pi-h-14 pi-flex pi-items-center pi-justify-center'\n data-tooltip-id='tooltip-start-recording-recorder-view'\n data-tooltip-content={t('Tooltip.Start recording') \|\| ''}\n >\n {waiting ? (\n <FontAwesomeIcon icon={faCircleNotch} className='fa-spin pi-loader' size='lg' />\n ) : (\n <FontAwesomeIcon icon={faRecord} className='pi-h-6 pi-w-6' />\n )}\n </Button>\n )}\n </div>\n\n <div\n onClick={() => dispatch.island.setIslandView('settings')}\n data-tooltip-id='tooltip-settings-view-recorder'\n data-tooltip-content={t('Tooltip.Go to settings') \|\| ''}\n className='pi-flex pi-items-center pi-justify-center pi-cursor-pointer pi-text-gray-700 dark:pi-text-gray-200 pi-w-6 pi-h-6 pi-flex-none'\n >\n <FontAwesomeIcon icon={faGear} className={`pi-h-6 pi-w-6`} />\n </div>\n\n {/* Buttons tooltips */}\n <CustomThemedTooltip id='tooltip-start-recording-recorder-view' place='top' />\n <CustomThemedTooltip id='tooltip-stop-recorder-view' place='top' />\n <CustomThemedTooltip id='tooltip-confirm-record-view' place='top' />\n <CustomThemedTooltip id='tooltip-settings-view-recorder' place='top' />\n </div>\n )\n}\n"],"names":["dispatch","useDispatch","_a","useSelector","state","incoming","recorder","waiting","recording","recorded","playing","shallowEqual","handleStart","setRecording","setWaiting","startAnnouncementRecording","data","sent","tempFilename","setTempFilename","setStartTime","concat","Date","now","eventDispatch","handleStop","hangupCurrentCall","setRecorded","handleSaveRecording","player","pauseAudioPlayer","setPlaying","setPaused","dispatchRecordingSave","island","setIslandView","useEventListener","useEffect","answerIncomingCall","setIncoming","t","useTranslation","React","createElement","className","Button","variant","disabled","FontAwesomeIcon","icon","faDownLeftAndUpRightToCenter","onClick","faCircleNotch","size","faStop","faFloppyDisk","faRecord","faGear","CustomThemedTooltip","id","place"],"mappings":"~~utDAyB~~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"}
1	+ {"version":3,"file":"Actions.js","sources":["../../../src/components/RecorderView/Actions.tsx"],"sourcesContent":["//\n// Copyright (C) 2024 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n//\n\nimport React, { type FC, useEffect } from 'react'\nimport { Button } from '../Button'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n faStop,\n faCircleNotch,\n faGear,\n faDownLeftAndUpRightToCenter,\n faFloppyDisk,\n} from '@fortawesome/free-solid-svg-icons'\nimport { startAnnouncementRecording } from '../../services/offhour'\nimport { useDispatch, useSelector, shallowEqual } from 'react-redux'\nimport { Dispatch, RootState } from '../../store'\nimport { hangupCurrentCall, answerIncomingCall } from '../../lib/phone/call'\nimport { dispatchRecordingSave } from '../../events'\nimport { useTranslation } from 'react-i18next'\nimport { useEventListener, eventDispatch } from '../../utils'\nimport { CustomThemedTooltip } from '../CustomThemedTooltip'\nimport { faRecord } from '@nethesis/nethesis-solid-svg-icons'\n\nexport const Actions: FC<{}> = () => {\n const dispatch = useDispatch<Dispatch>()\n const { incoming, waiting, recording, recorded, playing } = useSelector(\n (state: RootState) => ({\n incoming: state.recorder.incoming,\n waiting: state.recorder.waiting,\n recording: state.recorder.recording,\n recorded: state.recorder.recorded,\n playing: state.recorder.playing,\n }),\n shallowEqual,\n )\n\n async function handleStart() {\n // Update the recorder state\n dispatch.recorder.setRecording(true)\n dispatch.recorder.setWaiting(true)\n // Call the api to start the recording call\n const data: { tempFilename: string } \| null = await startAnnouncementRecording()\n // Set the returned temp file name to the store\n if (data.tempFilename) dispatch.recorder.setTempFilename(data.tempFilename)\n // Set the start time of recording\n dispatch.recorder.setStartTime(`${Date.now() / 1000}`)\n eventDispatch('phone-island-recording-started', {})\n }\n useEventListener('phone-island-recording-start', (data: {}) => {\n handleStart()\n })\n\n function handleStop() {\n // Set waiting to true\n dispatch.recorder.setWaiting(true)\n // Call the function to hangup the current call used for recording\n hangupCurrentCall()\n dispatch.recorder.setRecorded(true)\n eventDispatch('phone-island-recording-stopped', {})\n }\n useEventListener('phone-island-recording-stop', (data: {}) => {\n handleStop()\n })\n\n function handleSaveRecording() {\n // check if the audio is playing and pause it\n if (playing) {\n dispatch.player.pauseAudioPlayer()\n dispatch.recorder.setPlaying(false)\n dispatch.recorder.setPaused(true)\n }\n // Dispatch the reconrding save event\n dispatchRecordingSave()\n // Close the Island\n dispatch.island.setIslandView(null)\n }\n useEventListener('phone-island-recording-save', (data: {}) => {\n handleSaveRecording()\n })\n\n useEffect(() => {\n if (!recording) {\n dispatch.recorder.setWaiting(false)\n }\n }, [recording])\n\n useEffect(() => {\n if (incoming) {\n // Answer the incoming call for recording\n answerIncomingCall()\n // Reset incoming to recorder state\n dispatch.recorder.setIncoming(false)\n dispatch.recorder.setWaiting(false)\n }\n }, [incoming])\n\n const { t } = useTranslation()\n\n return (\n <div\n className={`pi-flex pi-items-center pi-justify-between pi-px-6 pi-py-2 pi-gap-0 pi-w-full pi-mt-auto`}\n >\n <Button\n variant='transparent'\n disabled\n className='pi-w-6 pi-h-6 pi-flex pi-items-center pi-justify-center pi-flex-none'\n >\n <FontAwesomeIcon icon={faDownLeftAndUpRightToCenter} className='pi-w-6 pi-h-6' />\n </Button>\n\n <div className='pi-flex pi-items-center pi-justify-center pi-flex-grow'>\n {recording && (\n <Button\n onClick={handleStop}\n variant='default'\n className='pi-rounded-full pi-w-14 pi-h-14 pi-flex pi-items-center pi-justify-center'\n data-tooltip-id='tooltip-stop-recorder-view'\n data-tooltip-content={t('Tooltip.Stop') \|\| ''}\n >\n {waiting ? (\n <FontAwesomeIcon icon={faCircleNotch} className='fa-spin pi-loader' size='lg' />\n ) : (\n <FontAwesomeIcon icon={faStop} size='xl' />\n )}\n </Button>\n )}\n {recorded && !recording && (\n <Button\n onClick={handleSaveRecording}\n variant='default'\n className='pi-rounded-full pi-w-14 pi-h-14 pi-flex pi-items-center pi-justify-center'\n data-tooltip-id='tooltip-confirm-record-view'\n data-tooltip-content={t('Tooltip.Confirm') \|\| ''}\n >\n <FontAwesomeIcon icon={faFloppyDisk} className='pi-h-6 pi-w-6' />\n </Button>\n )}\n {!recording && !recorded && (\n <Button\n onClick={handleStart}\n variant='default'\n className='pi-rounded-full pi-w-14 pi-h-14 pi-flex pi-items-center pi-justify-center'\n data-tooltip-id='tooltip-start-recording-recorder-view'\n data-tooltip-content={t('Tooltip.Start recording') \|\| ''}\n >\n {waiting ? (\n <FontAwesomeIcon icon={faCircleNotch} className='fa-spin pi-loader' size='lg' />\n ) : (\n <FontAwesomeIcon icon={faRecord} className='pi-h-6 pi-w-6' />\n )}\n </Button>\n )}\n </div>\n\n <div\n onClick={() => dispatch.island.setIslandView('settings')}\n data-tooltip-id='tooltip-settings-view-recorder'\n data-tooltip-content={t('Tooltip.Go to settings') \|\| ''}\n className='pi-flex pi-items-center pi-justify-center pi-cursor-pointer pi-text-gray-700 dark:pi-text-gray-200 pi-w-6 pi-h-6 pi-flex-none'\n >\n <FontAwesomeIcon icon={faGear} className={`pi-h-6 pi-w-6`} />\n </div>\n\n {/* Buttons tooltips */}\n <CustomThemedTooltip id='tooltip-start-recording-recorder-view' place='top' />\n <CustomThemedTooltip id='tooltip-stop-recorder-view' place='top' />\n <CustomThemedTooltip id='tooltip-confirm-record-view' place='top' />\n <CustomThemedTooltip id='tooltip-settings-view-recorder' place='top' />\n </div>\n )\n}\n"],"names":["dispatch","useDispatch","_a","useSelector","state","incoming","recorder","waiting","recording","recorded","playing","shallowEqual","handleStart","setRecording","setWaiting","startAnnouncementRecording","data","sent","tempFilename","setTempFilename","setStartTime","concat","Date","now","eventDispatch","handleStop","hangupCurrentCall","setRecorded","handleSaveRecording","player","pauseAudioPlayer","setPlaying","setPaused","dispatchRecordingSave","island","setIslandView","useEventListener","useEffect","answerIncomingCall","setIncoming","t","useTranslation","React","createElement","className","Button","variant","disabled","FontAwesomeIcon","icon","faDownLeftAndUpRightToCenter","onClick","faCircleNotch","size","faStop","faFloppyDisk","faRecord","faGear","CustomThemedTooltip","id","place"],"mappings":"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"}

package/dist/components/RecorderView/BarsGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BarsGroup.js","sources":["../../../src/components/RecorderView/BarsGroup.tsx"],"sourcesContent":["// Copyright (C) 2024 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { type FC, useEffect, useRef, useCallback, useState } from 'react'\nimport { Bar } from './Bar'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { Dispatch, RootState } from '../../store'\n\n// The number in percent of the width of the group bars\n// ...by which the leftward transaction occurs\n// ...so it defines the speed of the animation\nconst BARS_ANIMATION_SPEED: number = 0.4\n// The number of bars to be shown for for every group\n// ...it defines the lenght of every group\nconst BARS_COUNT: number = 55\n// A value that rapresents the window size in samples\n// ...that is used when performing a fast fourier transform\n// ...to get frequency domain data\n// ...a higher number result in more details in frequency and fewer in amplitude\nconst AUDIO_FFT_VALUE: number = 32\n\nfunction getTranslateXPercent(element: HTMLDivElement) {\n const transformValue = element.style.transform\n const translateXMatch = transformValue.match(/translateX\$([-0-9.]+)%\$/)\n if (translateXMatch && translateXMatch[1]) {\n return parseFloat(translateXMatch[1])\n }\n return 0\n}\n\nexport const BarsGroup: FC<BarsGroupProps> = ({ index, startAnimation, audioStream }) => {\n const barsContainerRef = useRef<HTMLDivElement>(null)\n const animationRequestRef = useRef<number>(0)\n const lastTranslateRef = useRef<number>(0)\n const visibleContainerRef = useSelector((state: RootState) => state.recorder.visibleContainerRef)\n const dispatch = useDispatch<Dispatch>()\n const analyser = useRef<AnalyserNode \| null>(null)\n const [showBars, setShowBars] = useState<boolean>()\n\n // The animation of the bars groups\n const barsGroupAnimation = useCallback(() => {\n if (barsContainerRef.current) {\n // Retrieve the last translate value\n const lastTranslateValue = lastTranslateRef.current\n ? lastTranslateRef.current\n : getTranslateXPercent(barsContainerRef.current)\n // Calculate the new translate value\n const newTranslateValue = lastTranslateValue - BARS_ANIMATION_SPEED\n const finalTranslateValue = newTranslateValue <= -100 ? 100 : newTranslateValue\n barsContainerRef.current.style.transform = `translateX(${finalTranslateValue}%)`\n // Update the translate ref value\n lastTranslateRef.current = finalTranslateValue\n }\n animationRequestRef.current = requestAnimationFrame(barsGroupAnimation)\n }, [lastTranslateRef])\n\n function retrieveFrequency() {\n const frequencyData = analyser.current && new Uint8Array(analyser.current.frequencyBinCount)\n frequencyData && analyser.current?.getByteFrequencyData(frequencyData)\n const values = (frequencyData && Object.values(frequencyData)) \|\| []\n // Save the higher frequency to recorder state\n // ...using a number from 0 to 1\n dispatch.recorder.setFrequency(values[0] / 255)\n requestAnimationFrame(retrieveFrequency)\n }\n\n // Retrieve frequency\n useEffect(() => {\n if (audioStream) {\n const context = new AudioContext()\n analyser.current = context.createAnalyser()\n analyser.current.fftSize = AUDIO_FFT_VALUE\n // Connect the source to the analyser\n const source = audioStream && context.createMediaStreamSource(audioStream)\n // Connect the audio source to the analyser\n source.connect(analyser.current)\n // Request the animation to perform\n requestAnimationFrame(retrieveFrequency)\n }\n }, [audioStream])\n\n // Manage animation start\n useEffect(() => {\n if (startAnimation) {\n animationRequestRef.current = requestAnimationFrame(barsGroupAnimation)\n }\n return () => {\n animationRequestRef.current && cancelAnimationFrame(animationRequestRef.current)\n }\n }, [startAnimation])\n\n useEffect(() => {\n if (barsContainerRef?.current) {\n setShowBars(true)\n }\n }, [])\n\n return (\n <div\n id={`${index}`}\n style={{\n transform: `translateX(${100 * index}%)`,\n }}\n className='pi-absolute pi-flex pi-w-fit pi-h-6 pi-gap-1 pi-items-center pi-px-0.5'\n ref={barsContainerRef}\n >\n {/* Create a custom number of bars */}\n {showBars && (\n <>\n {Array.from(Array(BARS_COUNT).keys()).map((_, i) => (\n <Bar key={i} visibleContainer={visibleContainerRef?.current \|\| null} />\n ))}\n </>\n )}\n </div>\n )\n}\n\ninterface BarsGroupProps {\n index: number\n startAnimation: boolean\n audioStream: MediaStream \| null\n}\n"],"names":["_a","index","startAnimation","audioStream","barsContainerRef","useRef","animationRequestRef","lastTranslateRef","visibleContainerRef","useSelector","state","recorder","dispatch","useDispatch","analyser","_b","useState","showBars","setShowBars","barsGroupAnimation","useCallback","current","newTranslateValue","element","translateXMatch","style","transform","match","parseFloat","finalTranslateValue","concat","requestAnimationFrame","retrieveFrequency","frequencyData","Uint8Array","frequencyBinCount","getByteFrequencyData","values","Object","setFrequency","useEffect","context","AudioContext","createAnalyser","fftSize","createMediaStreamSource","connect","cancelAnimationFrame","React","id","className","ref","createElement","Fragment","Array","from","keys","map","_","i","Bar","key","visibleContainer"],"mappings":"wZA8B6C,SAACA,GAAE,IAAAC,UAAOC,EAAcF,EAAAE,eAAEC,EAAWH,EAAAG,YAC1EC,EAAmBC,SAAuB,MAC1CC,EAAsBD,SAAe,GACrCE,EAAmBF,SAAe,GAClCG,EAAsBC,cAAY,SAACC,GAAqB,OAAAA,EAAMC,SAASH,mBAAf,GACxDI,EAAWC,EAAAA,cACXC,EAAWT,SAA4B,MACvCU,EAA0BC,aAAzBC,EAAQF,EAAA,GAAEG,EAAWH,EAAA,GAGtBI,EAAqBC,EAAAA,YAAY,WACrC,GAAIhB,EAAiBiB,QAAS,CAE5B,IAIMC,GAJqBf,EAAiBc,QACxCd,EAAiBc,SAvBGE,EAwBCnB,EAAiBiB,SAtBxCG,EADiBD,EAAQE,MAAMC,UACEC,MAAM,+BACtBH,EAAgB,GAC9BI,WAAWJ,EAAgB,IAE7B,IAhB4B,GAqCzBK,EAAsBP,IAAsB,IAAM,IAAMA,EAC9DlB,EAAiBiB,QAAQI,MAAMC,UAAY,cAAAI,OAAcD,EAAmB,MAE5EtB,EAAiBc,QAAUQ,CAC5B,CA/BL,IAA8BN,EAEtBC,EA8BJlB,EAAoBe,QAAUU,sBAAsBZ,EACtD,EAAG,CAACZ,IAEJ,SAASyB,UACDC,EAAgBnB,EAASO,SAAW,IAAIa,WAAWpB,EAASO,QAAQc,mBAC1EF,IAAmC,QAAlBjC,EAAAc,EAASO,eAAS,IAAArB,GAAAA,EAAAoC,qBAAqBH,IACxD,IAAMI,EAAUJ,GAAiBK,OAAOD,OAAOJ,IAAmB,GAGlErB,EAASD,SAAS4B,aAAaF,EAAO,GAAK,KAC3CN,sBAAsBC,EACvB,CAiCD,OA9BAQ,EAAAA,UAAU,WACR,GAAIrC,EAAa,CACf,IAAMsC,EAAU,IAAIC,aACpB5B,EAASO,QAAUoB,EAAQE,iBAC3B7B,EAASO,QAAQuB,QApDS,IAsDXzC,GAAesC,EAAQI,wBAAwB1C,IAEvD2C,QAAQhC,EAASO,SAExBU,sBAAsBC,EACvB,CACH,EAAG,CAAC7B,IAGJqC,EAAAA,UAAU,WAIR,OAHItC,IACFI,EAAoBe,QAAUU,sBAAsBZ,IAE/C,WACLb,EAAoBe,SAAW0B,qBAAqBzC,EAAoBe,QAC1E,CACF,EAAG,CAACnB,IAEJsC,EAAAA,UAAU,YACJpC,~~eAAAA~~,EAAkBiB,UACpBH,GAAY,EAEf,EAAE,IAGD8B,+BACEC,GAAI,UAAGhD,GACPwB,MAAO,CACLC,UAAW,cAAAI,OAAc,IAAM7B,EAAS,OAE1CiD,UAAU,yEACVC,IAAK/C,GAGJa,GACC+B,EAAAA,QAAAI,cAAAJ,UAAAK,SAAA,KACGC,MAAMC,KAAKD,MA/FK,IA+FaE,QAAQC,IAAI,SAACC,EAAGC,GAAM,OAClDX,EAAA,QAAAI,cAACQ,EAAAA,IAAG,CAACC,IAAKF,EAAGG,kBAAkBtD,aAAA,EAAAA,EAAqBa,UAAW,MADb,IAO9D"}
1	+ {"version":3,"file":"BarsGroup.js","sources":["../../../src/components/RecorderView/BarsGroup.tsx"],"sourcesContent":["// Copyright (C) 2024 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { type FC, useEffect, useRef, useCallback, useState } from 'react'\nimport { Bar } from './Bar'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { Dispatch, RootState } from '../../store'\n\n// The number in percent of the width of the group bars\n// ...by which the leftward transaction occurs\n// ...so it defines the speed of the animation\nconst BARS_ANIMATION_SPEED: number = 0.4\n// The number of bars to be shown for for every group\n// ...it defines the lenght of every group\nconst BARS_COUNT: number = 55\n// A value that rapresents the window size in samples\n// ...that is used when performing a fast fourier transform\n// ...to get frequency domain data\n// ...a higher number result in more details in frequency and fewer in amplitude\nconst AUDIO_FFT_VALUE: number = 32\n\nfunction getTranslateXPercent(element: HTMLDivElement) {\n const transformValue = element.style.transform\n const translateXMatch = transformValue.match(/translateX\$([-0-9.]+)%\$/)\n if (translateXMatch && translateXMatch[1]) {\n return parseFloat(translateXMatch[1])\n }\n return 0\n}\n\nexport const BarsGroup: FC<BarsGroupProps> = ({ index, startAnimation, audioStream }) => {\n const barsContainerRef = useRef<HTMLDivElement>(null)\n const animationRequestRef = useRef<number>(0)\n const lastTranslateRef = useRef<number>(0)\n const visibleContainerRef = useSelector((state: RootState) => state.recorder.visibleContainerRef)\n const dispatch = useDispatch<Dispatch>()\n const analyser = useRef<AnalyserNode \| null>(null)\n const [showBars, setShowBars] = useState<boolean>()\n\n // The animation of the bars groups\n const barsGroupAnimation = useCallback(() => {\n if (barsContainerRef.current) {\n // Retrieve the last translate value\n const lastTranslateValue = lastTranslateRef.current\n ? lastTranslateRef.current\n : getTranslateXPercent(barsContainerRef.current)\n // Calculate the new translate value\n const newTranslateValue = lastTranslateValue - BARS_ANIMATION_SPEED\n const finalTranslateValue = newTranslateValue <= -100 ? 100 : newTranslateValue\n barsContainerRef.current.style.transform = `translateX(${finalTranslateValue}%)`\n // Update the translate ref value\n lastTranslateRef.current = finalTranslateValue\n }\n animationRequestRef.current = requestAnimationFrame(barsGroupAnimation)\n }, [lastTranslateRef])\n\n function retrieveFrequency() {\n const frequencyData = analyser.current && new Uint8Array(analyser.current.frequencyBinCount)\n frequencyData && analyser.current?.getByteFrequencyData(frequencyData)\n const values = (frequencyData && Object.values(frequencyData)) \|\| []\n // Save the higher frequency to recorder state\n // ...using a number from 0 to 1\n dispatch.recorder.setFrequency(values[0] / 255)\n requestAnimationFrame(retrieveFrequency)\n }\n\n // Retrieve frequency\n useEffect(() => {\n if (audioStream) {\n const context = new AudioContext()\n analyser.current = context.createAnalyser()\n analyser.current.fftSize = AUDIO_FFT_VALUE\n // Connect the source to the analyser\n const source = audioStream && context.createMediaStreamSource(audioStream)\n // Connect the audio source to the analyser\n source.connect(analyser.current)\n // Request the animation to perform\n requestAnimationFrame(retrieveFrequency)\n }\n }, [audioStream])\n\n // Manage animation start\n useEffect(() => {\n if (startAnimation) {\n animationRequestRef.current = requestAnimationFrame(barsGroupAnimation)\n }\n return () => {\n animationRequestRef.current && cancelAnimationFrame(animationRequestRef.current)\n }\n }, [startAnimation])\n\n useEffect(() => {\n if (barsContainerRef?.current) {\n setShowBars(true)\n }\n }, [])\n\n return (\n <div\n id={`${index}`}\n style={{\n transform: `translateX(${100 * index}%)`,\n }}\n className='pi-absolute pi-flex pi-w-fit pi-h-6 pi-gap-1 pi-items-center pi-px-0.5'\n ref={barsContainerRef}\n >\n {/* Create a custom number of bars */}\n {showBars && (\n <>\n {Array.from(Array(BARS_COUNT).keys()).map((_, i) => (\n <Bar key={i} visibleContainer={visibleContainerRef?.current \|\| null} />\n ))}\n </>\n )}\n </div>\n )\n}\n\ninterface BarsGroupProps {\n index: number\n startAnimation: boolean\n audioStream: MediaStream \| null\n}\n"],"names":["_a","index","startAnimation","audioStream","barsContainerRef","useRef","animationRequestRef","lastTranslateRef","visibleContainerRef","useSelector","state","recorder","dispatch","useDispatch","analyser","_b","useState","showBars","setShowBars","barsGroupAnimation","useCallback","current","newTranslateValue","element","translateXMatch","style","transform","match","parseFloat","finalTranslateValue","concat","requestAnimationFrame","retrieveFrequency","frequencyData","Uint8Array","frequencyBinCount","getByteFrequencyData","values","Object","setFrequency","useEffect","context","AudioContext","createAnalyser","fftSize","createMediaStreamSource","connect","cancelAnimationFrame","React","id","className","ref","createElement","Fragment","Array","from","keys","map","_","i","Bar","key","visibleContainer"],"mappings":"wZA8B6C,SAACA,GAAE,IAAAC,UAAOC,EAAcF,EAAAE,eAAEC,EAAWH,EAAAG,YAC1EC,EAAmBC,SAAuB,MAC1CC,EAAsBD,SAAe,GACrCE,EAAmBF,SAAe,GAClCG,EAAsBC,cAAY,SAACC,GAAqB,OAAAA,EAAMC,SAASH,mBAAf,GACxDI,EAAWC,EAAAA,cACXC,EAAWT,SAA4B,MACvCU,EAA0BC,aAAzBC,EAAQF,EAAA,GAAEG,EAAWH,EAAA,GAGtBI,EAAqBC,EAAAA,YAAY,WACrC,GAAIhB,EAAiBiB,QAAS,CAE5B,IAIMC,GAJqBf,EAAiBc,QACxCd,EAAiBc,SAvBGE,EAwBCnB,EAAiBiB,SAtBxCG,EADiBD,EAAQE,MAAMC,UACEC,MAAM,+BACtBH,EAAgB,GAC9BI,WAAWJ,EAAgB,IAE7B,IAhB4B,GAqCzBK,EAAsBP,IAAsB,IAAM,IAAMA,EAC9DlB,EAAiBiB,QAAQI,MAAMC,UAAY,cAAAI,OAAcD,EAAmB,MAE5EtB,EAAiBc,QAAUQ,CAC5B,CA/BL,IAA8BN,EAEtBC,EA8BJlB,EAAoBe,QAAUU,sBAAsBZ,EACtD,EAAG,CAACZ,IAEJ,SAASyB,UACDC,EAAgBnB,EAASO,SAAW,IAAIa,WAAWpB,EAASO,QAAQc,mBAC1EF,IAAmC,QAAlBjC,EAAAc,EAASO,eAAS,IAAArB,GAAAA,EAAAoC,qBAAqBH,IACxD,IAAMI,EAAUJ,GAAiBK,OAAOD,OAAOJ,IAAmB,GAGlErB,EAASD,SAAS4B,aAAaF,EAAO,GAAK,KAC3CN,sBAAsBC,EACvB,CAiCD,OA9BAQ,EAAAA,UAAU,WACR,GAAIrC,EAAa,CACf,IAAMsC,EAAU,IAAIC,aACpB5B,EAASO,QAAUoB,EAAQE,iBAC3B7B,EAASO,QAAQuB,QApDS,IAsDXzC,GAAesC,EAAQI,wBAAwB1C,IAEvD2C,QAAQhC,EAASO,SAExBU,sBAAsBC,EACvB,CACH,EAAG,CAAC7B,IAGJqC,EAAAA,UAAU,WAIR,OAHItC,IACFI,EAAoBe,QAAUU,sBAAsBZ,IAE/C,WACLb,EAAoBe,SAAW0B,qBAAqBzC,EAAoBe,QAC1E,CACF,EAAG,CAACnB,IAEJsC,EAAAA,UAAU,YACJpC,aAAgB,EAAhBA,EAAkBiB,UACpBH,GAAY,EAEf,EAAE,IAGD8B,+BACEC,GAAI,UAAGhD,GACPwB,MAAO,CACLC,UAAW,cAAAI,OAAc,IAAM7B,EAAS,OAE1CiD,UAAU,yEACVC,IAAK/C,GAGJa,GACC+B,EAAAA,QAAAI,cAAAJ,UAAAK,SAAA,KACGC,MAAMC,KAAKD,MA/FK,IA+FaE,QAAQC,IAAI,SAACC,EAAGC,GAAM,OAClDX,EAAA,QAAAI,cAACQ,EAAAA,IAAG,CAACC,IAAKF,EAAGG,kBAAkBtD,aAAA,EAAAA,EAAqBa,UAAW,MADb,IAO9D"}

package/dist/components/RecorderView/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/tslib/tslib.es6.js"),t=require("react");require("../../node_modules/react-redux/es/index.js");var r=require("./Actions.js"),i=require("./BarsGroup.js"),a=require("../AudioPlayerView/Progress.js"),n=require("../../lib/phone/audio.js"),s=require("../../node_modules/webm-duration-fix/lib/index.js"),l=require("./Timer.js");require("../../node_modules/@babel/runtime/helpers/defineProperty.js"),require("../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),require("../../node_modules/@babel/runtime/helpers/typeof.js"),require("../../node_modules/html-parse-stringify/dist/html-parse-stringify.js"),require("../../node_modules/react-i18next/dist/es/context.js");var o=require("../../node_modules/react-i18next/dist/es/useTranslation.js");require("../../node_modules/@babel/runtime/helpers/slicedToArray.js");var u=require("../Button.js"),d=require("../../node_modules/@fortawesome/react-fontawesome/dist/index.js"),c=require("../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js"),f=require("../../node_modules/react-redux/es/hooks/useSelector.js"),m=require("../../node_modules/react-redux/es/hooks/useDispatch.js"),p=require("../../node_modules/react-redux/es/utils/shallowEqual.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=x(t),w="audio/webm";exports.RecorderView=function(){var x=f.useSelector(function(e){return e.island}).isOpen,b=f.useSelector(function(e){return e.player}).audioPlayerPlaying,h=t.useRef(null),g=t.useRef(null),j=t.useRef([]),y=m.useDispatch(),E=f.useSelector(function(e){return e.webrtc.localAudioStream}),q=f.useSelector(function(e){return{recording:e.recorder.recording,recorded:e.recorder.recorded,waiting:e.recorder.waiting}},p.default),_=q.recording,N=q.recorded,A=q.waiting;function P(e){j.current.push(e.data)}function k(){return e.__awaiter(this,void 0,void 0,function(){var t,r;return e.__generator(this,function(e){switch(e.label){case 0:return[4,s.default(new Blob(j.current,{type:w}))];case 1:return t=e.sent(),r=URL.createObjectURL(t),n.updateAudioPlayerSource(r),[2]}})})}t.useEffect(function(){(null==E?void 0:E.active)&&_&&(g.current=new MediaRecorder(E,{mimeType:w}),g.current.ondataavailable=P,g.current.onstop=k,g.current.start())},[null==E?void 0:E.active,_]),t.useEffect(function(){var e;N&&(j.current=[],null===(e=g.current)||void 0===e||e.stop())},[N]),t.useEffect(function(){return y.recorder.setVisibleContainerRef(h),function(){y.recorder.reset()}},[]);var S=o.useTranslation().t;return v.default.createElement(v.default.Fragment,null,x?v.default.createElement(v.default.Fragment,null," ",v.default.createElement("div",{className:"pi-flex pi-items-center pi-justify-between pi-text-gray-900 dark:pi-text-gray-50"},v.default.createElement("h1",{className:"pi-text-lg pi-font-medium pi-leading-7"},S("Common.Record message")),v.default.createElement(u.Button,{onClick:function(){return b&&y.player.stopAudioPlayer(),void y.island.resetPlayerClose()},variant:"transparentSettings","data-tooltip-id":"tooltip-close-settings","data-tooltip-content":S("Common.Close")||""},v.default.createElement(d.FontAwesomeIcon,{icon:c.faXmark,className:"pi-w-5 pi-h-5"}))),v.default.createElement("div",{className:"pi-pt-4"},v.default.createElement("div",{className:"".concat(!_||A||b?"pi-mb-3":""," pi-flex pi-w-full pi-justify-center pi-items-center")},v.default.createElement("div",{className:"pi-font-medium pi-text-4xl pi-w-fit pi-h-fit dark:pi-text-white"},v.default.createElement(l.default,null))),v.default.createElement("div",{className:"pi-relative pi-w-full pi-justify-center pi-overflow-hidden pi-flex pi-items-center",ref:h},N?v.default.createElement(a.Progress,null):_&&!A?v.default.createElement("div",{className:"pi-flex pi-items-center pi-justify-between pi-w-full pi-pb-3 pi-overflow-hidden"},v.default.createElement(u.Button,{variant:"transparent",disabled:!0,className:"pi-flex pi-flex-none"},v.default.createElement(d.FontAwesomeIcon,{icon:c.faPlay,className:"pi-h-4 pi-w-4 pi-text-gray-700 dark:pi-text-gray-200"})),v.default.createElement("div",{className:"pi-relative pi-overflow-hidden pi-flex pi-flex-grow pi-justify-center pi-h-4"},Array.from({length:2}).map(function(e,t){return v.default.createElement(i.BarsGroup,{key:t,index:t,startAnimation:_,audioStream:E})})),v.default.createElement(u.Button,{variant:"transparent",disabled:!0,className:"pi-flex pi-flex-none"},v.default.createElement(d.FontAwesomeIcon,{icon:c.faTrash,className:"pi-h-4 pi-w-4 pi-text-gray-700 dark:pi-text-gray-200"}))):_&&A?v.default.createElement("div",{className:"pi-sans pi-text-sm pi-w-fit pi-h-fit dark:pi-text-white pi-pb-7"},S("Common.Start recording message after")):v.default.createElement("div",{className:"pi-sans pi-text-sm pi-w-fit pi-h-fit dark:pi-text-white pi-pb-7"},S("Common.Start recording message before")))),v.default.createElement(r.Actions,null)):v.default.createElement("div",{className:"pi-font-medium pi-text-base"},"Recorder"))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/tslib/tslib.es6.js"),t=require("react");require("../../node_modules/react-redux/es/index.js");var r=require("./Actions.js"),i=require("./BarsGroup.js"),a=require("../AudioPlayerView/Progress.js"),n=require("../../lib/phone/audio.js"),s=require("../../node_modules/webm-duration-fix/lib/index.js"),l=require("./Timer.js");require("../../node_modules/i18next/dist/esm/i18next.js"),require("../../node_modules/react-i18next/dist/es/context.js");var o=require("../../node_modules/react-i18next/dist/es/useTranslation.js"),u=require("../Button.js"),d=require("../../node_modules/@fortawesome/react-fontawesome/dist/index.js"),c=require("../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js"),f=require("../../node_modules/react-redux/es/hooks/useSelector.js"),m=require("../../node_modules/react-redux/es/hooks/useDispatch.js"),p=require("../../node_modules/react-redux/es/utils/shallowEqual.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=x(t),w="audio/webm";exports.RecorderView=function(){var x=f.useSelector(function(e){return e.island}).isOpen,g=f.useSelector(function(e){return e.player}).audioPlayerPlaying,E=t.useRef(null),h=t.useRef(null),j=t.useRef([]),y=m.useDispatch(),b=f.useSelector(function(e){return e.webrtc.localAudioStream}),q=f.useSelector(function(e){return{recording:e.recorder.recording,recorded:e.recorder.recorded,waiting:e.recorder.waiting}},p.default),_=q.recording,N=q.recorded,k=q.waiting;function A(e){j.current.push(e.data)}function S(){return e.__awaiter(this,void 0,void 0,function(){var t,r;return e.__generator(this,function(e){switch(e.label){case 0:return[4,s.default(new Blob(j.current,{type:w}))];case 1:return t=e.sent(),r=URL.createObjectURL(t),n.updateAudioPlayerSource(r),[2]}})})}t.useEffect(function(){(null==b?void 0:b.active)&&_&&(h.current=new MediaRecorder(b,{mimeType:w}),h.current.ondataavailable=A,h.current.onstop=S,h.current.start())},[null==b?void 0:b.active,_]),t.useEffect(function(){var e;N&&(j.current=[],null===(e=h.current)||void 0===e||e.stop())},[N]),t.useEffect(function(){return y.recorder.setVisibleContainerRef(E),function(){y.recorder.reset()}},[]);var P=o.useTranslation().t;return v.default.createElement(v.default.Fragment,null,x?v.default.createElement(v.default.Fragment,null," ",v.default.createElement("div",{className:"pi-flex pi-items-center pi-justify-between pi-text-gray-900 dark:pi-text-gray-50"},v.default.createElement("h1",{className:"pi-text-lg pi-font-medium pi-leading-7"},P("Common.Record message")),v.default.createElement(u.Button,{onClick:function(){return g&&y.player.stopAudioPlayer(),void y.island.resetPlayerClose()},variant:"transparentSettings","data-tooltip-id":"tooltip-close-settings","data-tooltip-content":P("Common.Close")||""},v.default.createElement(d.FontAwesomeIcon,{icon:c.faXmark,className:"pi-w-5 pi-h-5"}))),v.default.createElement("div",{className:"pi-pt-4"},v.default.createElement("div",{className:"".concat(!_||k||g?"pi-mb-3":""," pi-flex pi-w-full pi-justify-center pi-items-center")},v.default.createElement("div",{className:"pi-font-medium pi-text-4xl pi-w-fit pi-h-fit dark:pi-text-white"},v.default.createElement(l.default,null))),v.default.createElement("div",{className:"pi-relative pi-w-full pi-justify-center pi-overflow-hidden pi-flex pi-items-center",ref:E},N?v.default.createElement(a.Progress,null):_&&!k?v.default.createElement("div",{className:"pi-flex pi-items-center pi-justify-between pi-w-full pi-pb-3 pi-overflow-hidden"},v.default.createElement(u.Button,{variant:"transparent",disabled:!0,className:"pi-flex pi-flex-none"},v.default.createElement(d.FontAwesomeIcon,{icon:c.faPlay,className:"pi-h-4 pi-w-4 pi-text-gray-700 dark:pi-text-gray-200"})),v.default.createElement("div",{className:"pi-relative pi-overflow-hidden pi-flex pi-flex-grow pi-justify-center pi-h-4"},Array.from({length:2}).map(function(e,t){return v.default.createElement(i.BarsGroup,{key:t,index:t,startAnimation:_,audioStream:b})})),v.default.createElement(u.Button,{variant:"transparent",disabled:!0,className:"pi-flex pi-flex-none"},v.default.createElement(d.FontAwesomeIcon,{icon:c.faTrash,className:"pi-h-4 pi-w-4 pi-text-gray-700 dark:pi-text-gray-200"}))):_&&k?v.default.createElement("div",{className:"pi-sans pi-text-sm pi-w-fit pi-h-fit dark:pi-text-white pi-pb-7"},P("Common.Start recording message after")):v.default.createElement("div",{className:"pi-sans pi-text-sm pi-w-fit pi-h-fit dark:pi-text-white pi-pb-7"},P("Common.Start recording message before")))),v.default.createElement(r.Actions,null)):v.default.createElement("div",{className:"pi-font-medium pi-text-base"},"Recorder"))};
 //# sourceMappingURL=index.js.map

package/dist/components/RecorderView/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/RecorderView/index.tsx"],"sourcesContent":["// Copyright (C) 2024 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { type FC, useRef, useEffect } from 'react'\nimport { useDispatch, useSelector, shallowEqual } from 'react-redux'\nimport { Dispatch, RootState } from '../../store'\nimport { Actions } from './Actions'\nimport { BarsGroup } from './BarsGroup'\nimport Progress from '../AudioPlayerView/Progress'\nimport { updateAudioPlayerSource } from '../../lib/phone/audio'\nimport fixWebmDuration from 'webm-duration-fix'\nimport Timer from './Timer'\nimport { useTranslation } from 'react-i18next'\nimport { Button } from '../Button'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faTrash, faXmark, faPlay } from '@fortawesome/free-solid-svg-icons'\n\n// The number of groups to be created\n// ...the minimun to have this effect is 2\nconst BAR_GROUPS_COUNT = 2\n\n// The mime type of the recorded audio\nconst MIME_TYPE = 'audio/webm'\n\nexport const RecorderView: FC<RecorderViewProps> = () => {\n const { isOpen } = useSelector((state: RootState) => state.island)\n const { audioPlayerPlaying } = useSelector((state: RootState) => state.player)\n const visibleContainerRef = useRef<HTMLDivElement>(null)\n const recorderRef = useRef<MediaRecorder \| null>(null)\n const mediaChunks = useRef<BlobPart[]>([])\n\n // Initialize state dispatch\n const dispatch = useDispatch<Dispatch>()\n\n // Retrieve the local audio stream from webrtc state\n const localAudioStream = useSelector((state: RootState) => state.webrtc.localAudioStream)\n\n // Retrieve the local audio stream from recorder state\n const { recording, recorded, waiting } = useSelector(\n (state: RootState) => ({\n recording: state.recorder.recording,\n recorded: state.recorder.recorded,\n waiting: state.recorder.waiting,\n }),\n shallowEqual,\n )\n\n function handleRecordedMedia(event: BlobEvent) {\n mediaChunks.current.push(event.data)\n }\n\n async function handleRecordingStopped() {\n const blob = await fixWebmDuration(new Blob(mediaChunks.current, { type: MIME_TYPE }))\n const audioURL = URL.createObjectURL(blob)\n // The next function is async\n updateAudioPlayerSource(audioURL)\n }\n\n // Handle and manage audio recording start\n useEffect(() => {\n // @ts-ignore\n if (localAudioStream?.active && recording) {\n recorderRef.current = new MediaRecorder(localAudioStream, {\n mimeType: MIME_TYPE,\n })\n recorderRef.current.ondataavailable = handleRecordedMedia\n recorderRef.current.onstop = handleRecordingStopped\n // Start the media recording\n recorderRef.current.start()\n }\n // @ts-ignore\n }, [localAudioStream?.active, recording])\n\n // Handle and manage audio recorded\n useEffect(() => {\n if (recorded) {\n mediaChunks.current = []\n recorderRef.current?.stop()\n }\n }, [recorded])\n\n // Handle view close and reset state\n useEffect(() => {\n // Set visible container reference to recorder state\n dispatch.recorder.setVisibleContainerRef(visibleContainerRef)\n\n return () => {\n dispatch.recorder.reset()\n }\n }, [])\n\n const { t } = useTranslation()\n\n function playerClose() {\n if (audioPlayerPlaying) {\n dispatch.player.stopAudioPlayer()\n }\n dispatch.island.resetPlayerClose()\n }\n\n return (\n <>\n {isOpen ? (\n <>\n {' '}\n <div className='pi-flex pi-items-center pi-justify-between pi-text-gray-900 dark:pi-text-gray-50'>\n <h1 className='pi-text-lg pi-font-medium pi-leading-7'>{t('Common.Record message')}</h1>\n <Button\n onClick={() => playerClose()}\n variant='transparentSettings'\n data-tooltip-id='tooltip-close-settings'\n data-tooltip-content={t('Common.Close') \|\| ''}\n >\n <FontAwesomeIcon icon={faXmark} className='pi-w-5 pi-h-5' />\n </Button>\n </div>\n <div className='pi-pt-4'>\n <div\n className={`${\n !recording \|\| waiting \|\| audioPlayerPlaying ? 'pi-mb-3' : ''\n } pi-flex pi-w-full pi-justify-center pi-items-center`}\n >\n <div className='pi-font-medium pi-text-4xl pi-w-fit pi-h-fit dark:pi-text-white'>\n <Timer />\n </div>\n </div>\n {/* Bars animation section /}\n <div\n className={`pi-relative pi-w-full pi-justify-center pi-overflow-hidden pi-flex pi-items-center`}\n ref={visibleContainerRef}\n >\n {recorded ? (\n <Progress />\n ) : recording && !waiting ? (\n <div className='pi-flex pi-items-center pi-justify-between pi-w-full pi-pb-3 pi-overflow-hidden'>\n {/ Play button (disabled) on left /}\n <Button variant='transparent' disabled className='pi-flex pi-flex-none'>\n <FontAwesomeIcon\n icon={faPlay}\n className='pi-h-4 pi-w-4 pi-text-gray-700 dark:pi-text-gray-200'\n />\n </Button>\n\n {/ Audio visualization in the middle /}\n <div className='pi-relative pi-overflow-hidden pi-flex pi-flex-grow pi-justify-center pi-h-4'>\n {/ Create a custom numbers of bars groups /}\n {Array.from({ length: BAR_GROUPS_COUNT }).map((_, i) => (\n <BarsGroup\n key={i}\n index={i}\n startAnimation={recording}\n audioStream={localAudioStream}\n />\n ))}\n </div>\n\n {/ Trash button (disabled) on right /}\n <Button variant='transparent' disabled className='pi-flex pi-flex-none'>\n <FontAwesomeIcon\n icon={faTrash}\n className='pi-h-4 pi-w-4 pi-text-gray-700 dark:pi-text-gray-200'\n />\n </Button>\n </div>\n ) : recording && waiting ? (\n <div className='pi-sans pi-text-sm pi-w-fit pi-h-fit dark:pi-text-white pi-pb-7'>\n {t('Common.Start recording message after')}\n </div>\n ) : (\n <div className='pi-sans pi-text-sm pi-w-fit pi-h-fit dark:pi-text-white pi-pb-7'>\n {t('Common.Start recording message before')}\n </div>\n )}\n </div>\n </div>\n {/ Actions section */}\n <Actions />\n </>\n ) : (\n <div className='pi-font-medium pi-text-base'>Recorder</div>\n )}\n </>\n )\n}\n\nexport interface RecorderViewProps {}\n"],"names":["MIME_TYPE","isOpen","useSelector","state","island","audioPlayerPlaying","player","visibleContainerRef","useRef","recorderRef","mediaChunks","dispatch","useDispatch","localAudioStream","webrtc","_a","recording","recorder","recorded","waiting","shallowEqual","handleRecordedMedia","event","current","push","data","handleRecordingStopped","fixWebmDuration","Blob","type","blob","sent","audioURL","URL","createObjectURL","updateAudioPlayerSource","useEffect","active","MediaRecorder","mimeType","ondataavailable","onstop","start","stop","setVisibleContainerRef","reset","t","useTranslation","React","createElement","Fragment","className","Button","onClick","stopAudioPlayer","resetPlayerClose","variant","FontAwesomeIcon","icon","faXmark","concat","Timer","ref","Progress","disabled","faPlay","Array","from","length","map","_","i","BarsGroup","key","index","startAnimation","audioStream","faTrash","Actions"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/RecorderView/index.tsx"],"sourcesContent":["// Copyright (C) 2024 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { type FC, useRef, useEffect } from 'react'\nimport { useDispatch, useSelector, shallowEqual } from 'react-redux'\nimport { Dispatch, RootState } from '../../store'\nimport { Actions } from './Actions'\nimport { BarsGroup } from './BarsGroup'\nimport Progress from '../AudioPlayerView/Progress'\nimport { updateAudioPlayerSource } from '../../lib/phone/audio'\nimport fixWebmDuration from 'webm-duration-fix'\nimport Timer from './Timer'\nimport { useTranslation } from 'react-i18next'\nimport { Button } from '../Button'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faTrash, faXmark, faPlay } from '@fortawesome/free-solid-svg-icons'\n\n// The number of groups to be created\n// ...the minimun to have this effect is 2\nconst BAR_GROUPS_COUNT = 2\n\n// The mime type of the recorded audio\nconst MIME_TYPE = 'audio/webm'\n\nexport const RecorderView: FC<RecorderViewProps> = () => {\n const { isOpen } = useSelector((state: RootState) => state.island)\n const { audioPlayerPlaying } = useSelector((state: RootState) => state.player)\n const visibleContainerRef = useRef<HTMLDivElement>(null)\n const recorderRef = useRef<MediaRecorder \| null>(null)\n const mediaChunks = useRef<BlobPart[]>([])\n\n // Initialize state dispatch\n const dispatch = useDispatch<Dispatch>()\n\n // Retrieve the local audio stream from webrtc state\n const localAudioStream = useSelector((state: RootState) => state.webrtc.localAudioStream)\n\n // Retrieve the local audio stream from recorder state\n const { recording, recorded, waiting } = useSelector(\n (state: RootState) => ({\n recording: state.recorder.recording,\n recorded: state.recorder.recorded,\n waiting: state.recorder.waiting,\n }),\n shallowEqual,\n )\n\n function handleRecordedMedia(event: BlobEvent) {\n mediaChunks.current.push(event.data)\n }\n\n async function handleRecordingStopped() {\n const blob = await fixWebmDuration(new Blob(mediaChunks.current, { type: MIME_TYPE }))\n const audioURL = URL.createObjectURL(blob)\n // The next function is async\n updateAudioPlayerSource(audioURL)\n }\n\n // Handle and manage audio recording start\n useEffect(() => {\n // @ts-ignore\n if (localAudioStream?.active && recording) {\n recorderRef.current = new MediaRecorder(localAudioStream, {\n mimeType: MIME_TYPE,\n })\n recorderRef.current.ondataavailable = handleRecordedMedia\n recorderRef.current.onstop = handleRecordingStopped\n // Start the media recording\n recorderRef.current.start()\n }\n // @ts-ignore\n }, [localAudioStream?.active, recording])\n\n // Handle and manage audio recorded\n useEffect(() => {\n if (recorded) {\n mediaChunks.current = []\n recorderRef.current?.stop()\n }\n }, [recorded])\n\n // Handle view close and reset state\n useEffect(() => {\n // Set visible container reference to recorder state\n dispatch.recorder.setVisibleContainerRef(visibleContainerRef)\n\n return () => {\n dispatch.recorder.reset()\n }\n }, [])\n\n const { t } = useTranslation()\n\n function playerClose() {\n if (audioPlayerPlaying) {\n dispatch.player.stopAudioPlayer()\n }\n dispatch.island.resetPlayerClose()\n }\n\n return (\n <>\n {isOpen ? (\n <>\n {' '}\n <div className='pi-flex pi-items-center pi-justify-between pi-text-gray-900 dark:pi-text-gray-50'>\n <h1 className='pi-text-lg pi-font-medium pi-leading-7'>{t('Common.Record message')}</h1>\n <Button\n onClick={() => playerClose()}\n variant='transparentSettings'\n data-tooltip-id='tooltip-close-settings'\n data-tooltip-content={t('Common.Close') \|\| ''}\n >\n <FontAwesomeIcon icon={faXmark} className='pi-w-5 pi-h-5' />\n </Button>\n </div>\n <div className='pi-pt-4'>\n <div\n className={`${\n !recording \|\| waiting \|\| audioPlayerPlaying ? 'pi-mb-3' : ''\n } pi-flex pi-w-full pi-justify-center pi-items-center`}\n >\n <div className='pi-font-medium pi-text-4xl pi-w-fit pi-h-fit dark:pi-text-white'>\n <Timer />\n </div>\n </div>\n {/* Bars animation section /}\n <div\n className={`pi-relative pi-w-full pi-justify-center pi-overflow-hidden pi-flex pi-items-center`}\n ref={visibleContainerRef}\n >\n {recorded ? (\n <Progress />\n ) : recording && !waiting ? (\n <div className='pi-flex pi-items-center pi-justify-between pi-w-full pi-pb-3 pi-overflow-hidden'>\n {/ Play button (disabled) on left /}\n <Button variant='transparent' disabled className='pi-flex pi-flex-none'>\n <FontAwesomeIcon\n icon={faPlay}\n className='pi-h-4 pi-w-4 pi-text-gray-700 dark:pi-text-gray-200'\n />\n </Button>\n\n {/ Audio visualization in the middle /}\n <div className='pi-relative pi-overflow-hidden pi-flex pi-flex-grow pi-justify-center pi-h-4'>\n {/ Create a custom numbers of bars groups /}\n {Array.from({ length: BAR_GROUPS_COUNT }).map((_, i) => (\n <BarsGroup\n key={i}\n index={i}\n startAnimation={recording}\n audioStream={localAudioStream}\n />\n ))}\n </div>\n\n {/ Trash button (disabled) on right /}\n <Button variant='transparent' disabled className='pi-flex pi-flex-none'>\n <FontAwesomeIcon\n icon={faTrash}\n className='pi-h-4 pi-w-4 pi-text-gray-700 dark:pi-text-gray-200'\n />\n </Button>\n </div>\n ) : recording && waiting ? (\n <div className='pi-sans pi-text-sm pi-w-fit pi-h-fit dark:pi-text-white pi-pb-7'>\n {t('Common.Start recording message after')}\n </div>\n ) : (\n <div className='pi-sans pi-text-sm pi-w-fit pi-h-fit dark:pi-text-white pi-pb-7'>\n {t('Common.Start recording message before')}\n </div>\n )}\n </div>\n </div>\n {/ Actions section */}\n <Actions />\n </>\n ) : (\n <div className='pi-font-medium pi-text-base'>Recorder</div>\n )}\n </>\n )\n}\n\nexport interface RecorderViewProps {}\n"],"names":["MIME_TYPE","isOpen","useSelector","state","island","audioPlayerPlaying","player","visibleContainerRef","useRef","recorderRef","mediaChunks","dispatch","useDispatch","localAudioStream","webrtc","_a","recording","recorder","recorded","waiting","shallowEqual","handleRecordedMedia","event","current","push","data","handleRecordingStopped","fixWebmDuration","Blob","type","blob","sent","audioURL","URL","createObjectURL","updateAudioPlayerSource","useEffect","active","MediaRecorder","mimeType","ondataavailable","onstop","start","stop","setVisibleContainerRef","reset","t","useTranslation","React","createElement","Fragment","className","Button","onClick","stopAudioPlayer","resetPlayerClose","variant","FontAwesomeIcon","icon","faXmark","concat","Timer","ref","Progress","disabled","faPlay","Array","from","length","map","_","i","BarsGroup","key","index","startAnimation","audioStream","faTrash","Actions"],"mappings":"kkCAsBMA,EAAY,kCAEiC,WACzC,IAAAC,EAAWC,cAAY,SAACC,GAAqB,OAAAA,EAAMC,gBACnDC,EAAuBH,cAAY,SAACC,GAAqB,OAAAA,EAAMG,4BACjEC,EAAsBC,SAAuB,MAC7CC,EAAcD,SAA6B,MAC3CE,EAAcF,SAAmB,IAGjCG,EAAWC,EAAAA,cAGXC,EAAmBX,cAAY,SAACC,GAAqB,OAAAA,EAAMW,OAAOD,gBAAb,GAGrDE,EAAmCb,EAAAA,YACvC,SAACC,GAAqB,MAAC,CACrBa,UAAWb,EAAMc,SAASD,UAC1BE,SAAUf,EAAMc,SAASC,SACzBC,QAAShB,EAAMc,SAASE,UAE1BC,EAAAA,SANMJ,EAASD,EAAAC,UAAEE,EAAQH,EAAAG,SAAEC,YAS7B,SAASE,EAAoBC,GAC3BZ,EAAYa,QAAQC,KAAKF,EAAMG,KAChC,CAED,SAAeC,mHACA,KAAA,EAAA,MAAA,CAAA,EAAMC,EAAAA,QAAgB,IAAIC,KAAKlB,EAAYa,QAAS,CAAEM,KAAM7B,oBAAnE8B,EAAOf,EAAyEgB,OAChFC,EAAWC,IAAIC,gBAAgBJ,GAErCK,EAAuBA,wBAACH,WACzB,CAGDI,EAAAA,UAAU,YAEJvB,aAAgB,EAAhBA,EAAkBwB,SAAUrB,IAC9BP,EAAYc,QAAU,IAAIe,cAAczB,EAAkB,CACxD0B,SAAUvC,IAEZS,EAAYc,QAAQiB,gBAAkBnB,EACtCZ,EAAYc,QAAQkB,OAASf,EAE7BjB,EAAYc,QAAQmB,QAGvB,EAAE,CAAC7B,aAAgB,EAAhBA,EAAkBwB,OAAQrB,IAG9BoB,EAAAA,UAAU,iBACJlB,IACFR,EAAYa,QAAU,GACD,QAArBR,EAAAN,EAAYc,eAAS,IAAAR,GAAAA,EAAA4B,OAEzB,EAAG,CAACzB,IAGJkB,EAAAA,UAAU,WAIR,OAFAzB,EAASM,SAAS2B,uBAAuBrC,GAElC,WACLI,EAASM,SAAS4B,OACpB,CACD,EAAE,IAEK,IAAAC,EAAMC,qBASd,OACEC,UACGC,cAAAD,EAAA,QAAAE,SAAA,KAAAjD,EACC+C,UAAAC,cAAAD,EAAA,QAAAE,SAAA,KACG,IACDF,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,oFACbH,UAAIC,cAAA,KAAA,CAAAE,UAAU,0CAA0CL,EAAE,0BAC1DE,EAAC,QAAAC,cAAAG,UACCC,QAAS,WAAM,OAdrBhD,GACFM,EAASL,OAAOgD,uBAElB3C,EAASP,OAAOmD,kBAWsB,EAC5BC,QAAQ,wCACQ,yBAAwB,uBAClBV,EAAE,iBAAmB,IAE3CE,UAACC,cAAAQ,EAAAA,gBAAgB,CAAAC,KAAMC,EAAAA,QAASR,UAAU,oBAG9CH,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,WACbH,EAAAA,QAAAC,cAAA,MAAA,CACEE,UAAW,GAAAS,QACR5C,GAAaG,GAAWd,EAAqB,UAAY,GACN,yDAEtD2C,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,mEACbH,EAAAA,QAACC,cAAAY,UAAQ,QAIbb,UAAAC,cAAA,MAAA,CACEE,UAAW,qFACXW,IAAKvD,GAEJW,EACC8B,UAACC,cAAAc,EAAAA,SAAW,MACV/C,IAAcG,EAChB6B,UAAKC,cAAA,MAAA,CAAAE,UAAU,mFAEbH,UAACC,cAAAG,EAAMA,OAAC,CAAAI,QAAQ,cAAcQ,UAAQ,EAACb,UAAU,wBAC/CH,UAACC,cAAAQ,EAAAA,gBACC,CAAAC,KAAMO,EAAAA,OACNd,UAAU,0DAKdH,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,gFAEZe,MAAMC,KAAK,CAAEC,OA/HT,IA+HqCC,IAAI,SAACC,EAAGC,GAAM,OACtDvB,EAAAA,QAACC,cAAAuB,EAAAA,WACCC,IAAKF,EACLG,MAAOH,EACPI,eAAgB3D,EAChB4D,YAAa/D,GAEhB,IAIHmC,UAACC,cAAAG,EAAMA,OAAC,CAAAI,QAAQ,cAAcQ,UAAQ,EAACb,UAAU,wBAC/CH,EAAC,QAAAC,cAAAQ,EAAeA,iBACdC,KAAMmB,EAAAA,QACN1B,UAAU,2DAIdnC,GAAaG,EACf6B,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,mEACZL,EAAE,yCAGLE,EAAAA,6BAAKG,UAAU,mEACZL,EAAE,4CAMXE,EAAAA,QAAAC,cAAC6B,EAAAA,QAAU,OAGb9B,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,+BAA6B,YAIpD"}

package/dist/components/SettingsView/AudioView.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");require("../../node_modules/react-redux/es/index.js");var t=require("../../store/index.js"),r=require("../../node_modules/@fortawesome/react-fontawesome/dist/index.js"),i=require("../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js"),s=require("../../utils/customHooks/useEventListener.js"),o=require("../../utils/genericFunctions/eventDispatch.js"),l=require("../../utils/genericFunctions/localStorage.js");require("../../node_modules/tslib/tslib.es6.js");var a=require("./SettingsHeader.js");require("../../node_modules/@babel/runtime/helpers/defineProperty.js"),require("../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),require("../../node_modules/@babel/runtime/helpers/typeof.js"),require("../../node_modules/html-parse-stringify/dist/html-parse-stringify.js"),require("../../node_modules/react-i18next/dist/es/context.js");var u=require("../../node_modules/react-i18next/dist/es/useTranslation.js");require("../../node_modules/@babel/runtime/helpers/slicedToArray.js");var n=require("../../lib/devices/devices.js"),d=require("../../node_modules/react-redux/es/hooks/useSelector.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=c(e);exports.default=function(){var c=d.useSelector(function(e){return e.player.remoteAudio}),m=u.useTranslation().t,f=t.store.select.mediaDevices.audioOutputDevices(t.store.getState()),v=e.useState(n.getCurrentAudioOutputDeviceId()||null),b=v[0],h=v[1],g=function(e){h(e),null==c||c.current.setSinkId(e).then(function(){console.info("Audio output device switch success!"),l.setJSONItem("phone-island-audio-output-device",{deviceId:e}),o.eventDispatch("phone-island-call-audio-output-switched",{})}).catch(function(e){console.error("Audio output device switch error:",e)})};s.useEventListener("phone-island-call-audio-output-switch",function(e){g(e.deviceId)});var x=e.useState(null),y=x[0],j=x[1];return p.default.createElement("div",{className:"pi-flex pi-flex-col pi-w-full"},p.default.createElement(a.SettingsHeader,{title:m("Settings.Speakers"),tooltipPrefix:"audio"}),p.default.createElement("div",{className:"pi-flex pi-flex-col pi-mt-2 pi-space-y-1 pi-max-h-48 pi-overflow-y-auto pi-scrollbar-thin pi-scrollbar-thumb-gray-400 pi-dark:scrollbar-thumb-gray-400 pi-scrollbar-thumb-rounded-full pi-scrollbar-thumb-opacity-50 dark:pi-scrollbar-track-gray-900 pi-scrollbar-track-gray-200 pi-dark:scrollbar-track-gray-900 pi-scrollbar-track-rounded-full pi-scrollbar-track-opacity-25"},f.map(function(e,t){return p.default.createElement("div",{key:t,className:"pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md pi-cursor-pointer",onClick:function(){return g(null==e?void 0:e.deviceId)},onMouseEnter:function(){return j(null==e?void 0:e.deviceId)},onMouseLeave:function(){return j(null)}},p.default.createElement("div",{className:"pi-flex pi-items-center"},p.default.createElement(r.FontAwesomeIcon,{icon:i.faVolumeHigh,className:"pi-mr-2 pi-w-5 pi-h-5"}),p.default.createElement("span",null,(null==e?void 0:e.label)||"Input device ".concat(t+1))),p.default.createElement("div",{className:"pi-flex pi-items-center"},b===(null==e?void 0:e.deviceId)&&p.default.createElement(r.FontAwesomeIcon,{icon:i.faCheck,className:"".concat(y===(null==e?void 0:e.deviceId)?"pi-text-gray-700 dark:pi-text-gray-200":"pi-text-emerald-700 dark:pi-text-emerald-500"," pi-w-5 pi-h-5")})))})))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");require("../../node_modules/react-redux/es/index.js");var t=require("../../store/index.js"),i=require("../../node_modules/@fortawesome/react-fontawesome/dist/index.js"),r=require("../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js"),a=require("../../utils/customHooks/useEventListener.js"),o=require("../../utils/genericFunctions/eventDispatch.js"),s=require("../../utils/genericFunctions/localStorage.js");require("../../node_modules/tslib/tslib.es6.js");var l=require("./SettingsHeader.js");require("../../node_modules/i18next/dist/esm/i18next.js"),require("../../node_modules/react-i18next/dist/es/context.js");var n=require("../../node_modules/react-i18next/dist/es/useTranslation.js"),u=require("../../lib/devices/devices.js"),c=require("../../node_modules/react-redux/es/hooks/useSelector.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(e);exports.default=function(){var d=c.useSelector(function(e){return e.player.remoteAudio}),m=n.useTranslation().t,f=t.store.select.mediaDevices.audioOutputDevices(t.store.getState()),v=e.useState(u.getCurrentAudioOutputDeviceId()||null),x=v[0],g=v[1],b=function(e){g(e),null==d||d.current.setSinkId(e).then(function(){console.info("Audio output device switch success!"),s.setJSONItem("phone-island-audio-output-device",{deviceId:e}),o.eventDispatch("phone-island-call-audio-output-switched",{})}).catch(function(e){console.error("Audio output device switch error:",e)})};a.useEventListener("phone-island-call-audio-output-switch",function(e){b(e.deviceId)});var h=e.useState(null),y=h[0],k=h[1];return p.default.createElement("div",{className:"pi-flex pi-flex-col pi-w-full"},p.default.createElement(l.SettingsHeader,{title:m("Settings.Speakers"),tooltipPrefix:"audio"}),p.default.createElement("div",{className:"pi-flex pi-flex-col pi-mt-2 pi-space-y-1 pi-max-h-48 pi-overflow-y-auto pi-scrollbar-thin pi-scrollbar-thumb-gray-400 pi-dark:scrollbar-thumb-gray-400 pi-scrollbar-thumb-rounded-full pi-scrollbar-thumb-opacity-50 dark:pi-scrollbar-track-gray-900 pi-scrollbar-track-gray-200 pi-dark:scrollbar-track-gray-900 pi-scrollbar-track-rounded-full pi-scrollbar-track-opacity-25"},f.map(function(e,t){return p.default.createElement("div",{key:t,className:"pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md pi-cursor-pointer",onClick:function(){return b(null==e?void 0:e.deviceId)},onMouseEnter:function(){return k(null==e?void 0:e.deviceId)},onMouseLeave:function(){return k(null)}},p.default.createElement("div",{className:"pi-flex pi-items-center"},p.default.createElement(i.FontAwesomeIcon,{icon:r.faVolumeHigh,className:"pi-mr-2 pi-w-5 pi-h-5"}),p.default.createElement("span",null,(null==e?void 0:e.label)||"Input device ".concat(t+1))),p.default.createElement("div",{className:"pi-flex pi-items-center"},x===(null==e?void 0:e.deviceId)&&p.default.createElement(i.FontAwesomeIcon,{icon:r.faCheck,className:"".concat(y===(null==e?void 0:e.deviceId)?"pi-text-gray-700 dark:pi-text-gray-200":"pi-text-emerald-700 dark:pi-text-emerald-500"," pi-w-5 pi-h-5")})))})))};
 //# sourceMappingURL=AudioView.js.map

package/dist/components/SettingsView/AudioView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AudioView.js","sources":["../../../src/components/SettingsView/AudioView.tsx"],"sourcesContent":["// Copyright (C) 2025 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { useState } from 'react'\nimport { useSelector } from 'react-redux'\nimport { RootState, store } from '../../store'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faCheck, faVolumeHigh } from '@fortawesome/free-solid-svg-icons'\nimport { eventDispatch, setJSONItem, useEventListener } from '../../utils'\nimport { SettingsHeader } from './SettingsHeader'\nimport { useTranslation } from 'react-i18next'\nimport { getCurrentAudioOutputDeviceId } from '../../lib/devices/devices'\n\nconst AudioView = () => {\n const remoteAudioElement: any = useSelector((state: RootState) => state.player.remoteAudio)\n\n const { t } = useTranslation()\n const audioOutputDevices = store.select.mediaDevices.audioOutputDevices(store.getState())\n const [selectedAudioOutput, setSelectedAudioOutput] = useState<string \| null>(\n getCurrentAudioOutputDeviceId() \|\| null,\n )\n const handleClickAudioOutput = (audioOutputDevice: string) => {\n setSelectedAudioOutput(audioOutputDevice)\n\n remoteAudioElement?.current\n .setSinkId(audioOutputDevice)\n .then(function () {\n console.info('Audio output device switch success!')\n // set device to localstorage\n setJSONItem('phone-island-audio-output-device', { deviceId: audioOutputDevice })\n\n // dispatch event\n eventDispatch('phone-island-call-audio-output-switched', {})\n })\n .catch(function (err) {\n console.error('Audio output device switch error:', err)\n })\n }\n useEventListener('phone-island-call-audio-output-switch', (data: DeviceInputOutputTypes) => {\n handleClickAudioOutput(data.deviceId)\n })\n\n const [hoveredDevice, setHoveredDevice] = useState<string \| null>(null)\n\n return (\n <div className='pi-flex pi-flex-col pi-w-full'>\n {/* Title /}\n <SettingsHeader title={t('Settings.Speakers')} tooltipPrefix='audio' />\n {/ Audio List */}\n <div className='pi-flex pi-flex-col pi-mt-2 pi-space-y-1 pi-max-h-48 pi-overflow-y-auto pi-scrollbar-thin pi-scrollbar-thumb-gray-400 pi-dark:scrollbar-thumb-gray-400 pi-scrollbar-thumb-rounded-full pi-scrollbar-thumb-opacity-50 dark:pi-scrollbar-track-gray-900 pi-scrollbar-track-gray-200 pi-dark:scrollbar-track-gray-900 pi-scrollbar-track-rounded-full pi-scrollbar-track-opacity-25'>\n {audioOutputDevices.map((audioDevice, index) => (\n <div\n key={index}\n className='pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md pi-cursor-pointer'\n onClick={() => handleClickAudioOutput(audioDevice?.deviceId)}\n onMouseEnter={() => setHoveredDevice(audioDevice?.deviceId)}\n onMouseLeave={() => setHoveredDevice(null)}\n >\n <div className='pi-flex pi-items-center'>\n <FontAwesomeIcon icon={faVolumeHigh} className='pi-mr-2 pi-w-5 pi-h-5' />\n <span>{audioDevice?.label \|\| `Input device ${index + 1}`}</span>\n </div>\n <div className='pi-flex pi-items-center'>\n {selectedAudioOutput === audioDevice?.deviceId && (\n <FontAwesomeIcon\n icon={faCheck}\n className={`${\n hoveredDevice === audioDevice?.deviceId\n ? 'pi-text-gray-700 dark:pi-text-gray-200'\n : 'pi-text-emerald-700 dark:pi-text-emerald-500'\n } pi-w-5 pi-h-5`}\n />\n )}\n </div>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\ninterface DeviceInputOutputTypes {\n deviceId: string\n}\n\nexport default AudioView\n"],"names":["remoteAudioElement","useSelector","state","player","remoteAudio","t","useTranslation","audioOutputDevices","store","select","mediaDevices","getState","_a","useState","getCurrentAudioOutputDeviceId","selectedAudioOutput","setSelectedAudioOutput","handleClickAudioOutput","audioOutputDevice","current","setSinkId","then","console","info","setJSONItem","deviceId","eventDispatch","catch","err","error","useEventListener","data","_b","hoveredDevice","setHoveredDevice","React","createElement","className","SettingsHeader","title","tooltipPrefix","map","audioDevice","index","key","onClick","onMouseEnter","onMouseLeave","FontAwesomeIcon","icon","faVolumeHigh","label","faCheck","concat"],"mappings":"~~myCAakB~~,WAChB,IAAMA,EAA0BC,cAAY,SAACC,GAAqB,OAAAA,EAAMC,OAAOC,WAAb,GAE1DC,EAAMC,qBACRC,EAAqBC,EAAKA,MAACC,OAAOC,aAAaH,mBAAmBC,EAAKA,MAACG,YACxEC,EAAgDC,EAAQA,SAC5DC,mCAAmC,MAD9BC,EAAmBH,EAAA,GAAEI,OAGtBC,EAAyB,SAACC,GAC9BF,EAAuBE,GAEvBlB,SAAAA,EAAoBmB,QACjBC,UAAUF,GACVG,KAAK,WACJC,QAAQC,KAAK,uCAEbC,EAAAA,YAAY,mCAAoC,CAAEC,SAAUP,IAG5DQ,gBAAc,0CAA2C,CAAA,EAC3D,GACCC,MAAM,SAAUC,GACfN,QAAQO,MAAM,oCAAqCD,EACrD,EACJ,EACAE,mBAAiB,wCAAyC,SAACC,GACzDd,EAAuBc,EAAKN,SAC9B,GAEM,IAAAO,EAAoCnB,EAAAA,SAAwB,MAA3DoB,EAAaD,EAAA,GAAEE,EAAgBF,EAAA,GAEtC,OACEG,EAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,iCAEbF,UAAAC,cAACE,EAAcA,eAAA,CAACC,MAAOlC,EAAE,qBAAsBmC,cAAc,UAE7DL,EAAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,oXACZ9B,EAAmBkC,IAAI,SAACC,EAAaC,GAAU,OAC9CR,EAAAA,QACEC,cAAA,MAAA,CAAAQ,IAAKD,EACLN,UAAU,8PACVQ,QAAS,WAAM,OAAA5B,EAAuByB,aAAA,EAAAA,EAAajB,SAAS,EAC5DqB,aAAc,WAAM,OAAAZ,EAAiBQ,aAAW,EAAXA,EAAajB,SAA9B,EACpBsB,aAAc,WAAM,OAAAb,EAAiB,QAErCC,EAAAA,QAAKC,cAAA,MAAA,CAAAC,UAAU,2BACbF,EAAC,QAAAC,cAAAY,mBAAgBC,KAAMC,eAAcb,UAAU,0BAC/CF,EAAA,QAAAC,cAAA,OAAA,MAAOM,eAAAA,EAAaS,QAAS,uBAAgBR,EAAQ,KAEvDR,EAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,2BACZtB,KAAwB2B,eAAAA,EAAajB,WACpCU,EAAAA,QAAAC,cAACY,EAAAA,gBAAe,CACdC,KAAMG,EAAOA,QACbf,UAAW,GACTgB,OAAApB,KAAkBS,aAAW,EAAXA,EAAajB,UAC3B,yCACA,+CACU,qBAKzB,IAIT"}
1	+ {"version":3,"file":"AudioView.js","sources":["../../../src/components/SettingsView/AudioView.tsx"],"sourcesContent":["// Copyright (C) 2025 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { useState } from 'react'\nimport { useSelector } from 'react-redux'\nimport { RootState, store } from '../../store'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faCheck, faVolumeHigh } from '@fortawesome/free-solid-svg-icons'\nimport { eventDispatch, setJSONItem, useEventListener } from '../../utils'\nimport { SettingsHeader } from './SettingsHeader'\nimport { useTranslation } from 'react-i18next'\nimport { getCurrentAudioOutputDeviceId } from '../../lib/devices/devices'\n\nconst AudioView = () => {\n const remoteAudioElement: any = useSelector((state: RootState) => state.player.remoteAudio)\n\n const { t } = useTranslation()\n const audioOutputDevices = store.select.mediaDevices.audioOutputDevices(store.getState())\n const [selectedAudioOutput, setSelectedAudioOutput] = useState<string \| null>(\n getCurrentAudioOutputDeviceId() \|\| null,\n )\n const handleClickAudioOutput = (audioOutputDevice: string) => {\n setSelectedAudioOutput(audioOutputDevice)\n\n remoteAudioElement?.current\n .setSinkId(audioOutputDevice)\n .then(function () {\n console.info('Audio output device switch success!')\n // set device to localstorage\n setJSONItem('phone-island-audio-output-device', { deviceId: audioOutputDevice })\n\n // dispatch event\n eventDispatch('phone-island-call-audio-output-switched', {})\n })\n .catch(function (err) {\n console.error('Audio output device switch error:', err)\n })\n }\n useEventListener('phone-island-call-audio-output-switch', (data: DeviceInputOutputTypes) => {\n handleClickAudioOutput(data.deviceId)\n })\n\n const [hoveredDevice, setHoveredDevice] = useState<string \| null>(null)\n\n return (\n <div className='pi-flex pi-flex-col pi-w-full'>\n {/* Title /}\n <SettingsHeader title={t('Settings.Speakers')} tooltipPrefix='audio' />\n {/ Audio List */}\n <div className='pi-flex pi-flex-col pi-mt-2 pi-space-y-1 pi-max-h-48 pi-overflow-y-auto pi-scrollbar-thin pi-scrollbar-thumb-gray-400 pi-dark:scrollbar-thumb-gray-400 pi-scrollbar-thumb-rounded-full pi-scrollbar-thumb-opacity-50 dark:pi-scrollbar-track-gray-900 pi-scrollbar-track-gray-200 pi-dark:scrollbar-track-gray-900 pi-scrollbar-track-rounded-full pi-scrollbar-track-opacity-25'>\n {audioOutputDevices.map((audioDevice, index) => (\n <div\n key={index}\n className='pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md pi-cursor-pointer'\n onClick={() => handleClickAudioOutput(audioDevice?.deviceId)}\n onMouseEnter={() => setHoveredDevice(audioDevice?.deviceId)}\n onMouseLeave={() => setHoveredDevice(null)}\n >\n <div className='pi-flex pi-items-center'>\n <FontAwesomeIcon icon={faVolumeHigh} className='pi-mr-2 pi-w-5 pi-h-5' />\n <span>{audioDevice?.label \|\| `Input device ${index + 1}`}</span>\n </div>\n <div className='pi-flex pi-items-center'>\n {selectedAudioOutput === audioDevice?.deviceId && (\n <FontAwesomeIcon\n icon={faCheck}\n className={`${\n hoveredDevice === audioDevice?.deviceId\n ? 'pi-text-gray-700 dark:pi-text-gray-200'\n : 'pi-text-emerald-700 dark:pi-text-emerald-500'\n } pi-w-5 pi-h-5`}\n />\n )}\n </div>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\ninterface DeviceInputOutputTypes {\n deviceId: string\n}\n\nexport default AudioView\n"],"names":["remoteAudioElement","useSelector","state","player","remoteAudio","t","useTranslation","audioOutputDevices","store","select","mediaDevices","getState","_a","useState","getCurrentAudioOutputDeviceId","selectedAudioOutput","setSelectedAudioOutput","handleClickAudioOutput","audioOutputDevice","current","setSinkId","then","console","info","setJSONItem","deviceId","eventDispatch","catch","err","error","useEventListener","data","_b","hoveredDevice","setHoveredDevice","React","createElement","className","SettingsHeader","title","tooltipPrefix","map","audioDevice","index","key","onClick","onMouseEnter","onMouseLeave","FontAwesomeIcon","icon","faVolumeHigh","label","faCheck","concat"],"mappings":"6+BAakB,WAChB,IAAMA,EAA0BC,cAAY,SAACC,GAAqB,OAAAA,EAAMC,OAAOC,WAAb,GAE1DC,EAAMC,qBACRC,EAAqBC,EAAKA,MAACC,OAAOC,aAAaH,mBAAmBC,EAAKA,MAACG,YACxEC,EAAgDC,EAAQA,SAC5DC,mCAAmC,MAD9BC,EAAmBH,EAAA,GAAEI,OAGtBC,EAAyB,SAACC,GAC9BF,EAAuBE,GAEvBlB,SAAAA,EAAoBmB,QACjBC,UAAUF,GACVG,KAAK,WACJC,QAAQC,KAAK,uCAEbC,EAAAA,YAAY,mCAAoC,CAAEC,SAAUP,IAG5DQ,gBAAc,0CAA2C,CAAA,EAC3D,GACCC,MAAM,SAAUC,GACfN,QAAQO,MAAM,oCAAqCD,EACrD,EACJ,EACAE,mBAAiB,wCAAyC,SAACC,GACzDd,EAAuBc,EAAKN,SAC9B,GAEM,IAAAO,EAAoCnB,EAAAA,SAAwB,MAA3DoB,EAAaD,EAAA,GAAEE,EAAgBF,EAAA,GAEtC,OACEG,EAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,iCAEbF,UAAAC,cAACE,EAAcA,eAAA,CAACC,MAAOlC,EAAE,qBAAsBmC,cAAc,UAE7DL,EAAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,oXACZ9B,EAAmBkC,IAAI,SAACC,EAAaC,GAAU,OAC9CR,EAAAA,QACEC,cAAA,MAAA,CAAAQ,IAAKD,EACLN,UAAU,8PACVQ,QAAS,WAAM,OAAA5B,EAAuByB,aAAA,EAAAA,EAAajB,SAAS,EAC5DqB,aAAc,WAAM,OAAAZ,EAAiBQ,aAAW,EAAXA,EAAajB,SAA9B,EACpBsB,aAAc,WAAM,OAAAb,EAAiB,QAErCC,EAAAA,QAAKC,cAAA,MAAA,CAAAC,UAAU,2BACbF,EAAC,QAAAC,cAAAY,mBAAgBC,KAAMC,eAAcb,UAAU,0BAC/CF,EAAA,QAAAC,cAAA,OAAA,MAAOM,eAAAA,EAAaS,QAAS,uBAAgBR,EAAQ,KAEvDR,EAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,2BACZtB,KAAwB2B,eAAAA,EAAajB,WACpCU,EAAAA,QAAAC,cAACY,EAAAA,gBAAe,CACdC,KAAMG,EAAOA,QACbf,UAAW,GACTgB,OAAApB,KAAkBS,aAAW,EAAXA,EAAajB,UAC3B,yCACA,+CACU,qBAKzB,IAIT"}

package/dist/components/SettingsView/MicrophoneView.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");require("../../node_modules/react-redux/es/index.js");var t=require("../../store/index.js"),i=require("../../node_modules/@fortawesome/react-fontawesome/dist/index.js"),r=require("../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js"),s=require("../../utils/customHooks/useEventListener.js"),a=require("../../utils/genericFunctions/eventDispatch.js"),n=require("../../utils/genericFunctions/localStorage.js");require("../../node_modules/tslib/tslib.es6.js");var o=require("./SettingsHeader.js");require("../../node_modules/@babel/runtime/helpers/defineProperty.js"),require("../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),require("../../node_modules/@babel/runtime/helpers/typeof.js"),require("../../node_modules/html-parse-stringify/dist/html-parse-stringify.js"),require("../../node_modules/react-i18next/dist/es/context.js");var l=require("../../node_modules/react-i18next/dist/es/useTranslation.js");require("../../node_modules/@babel/runtime/helpers/slicedToArray.js");var u=require("../../lib/devices/devices.js"),c=require("../../node_modules/react-redux/es/hooks/useSelector.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(e);exports.default=function(){var d=c.useSelector(function(e){return e.webrtc}).sipcall,m=l.useTranslation().t,f=e.useState(u.getCurrentAudioInputDeviceId()||null),v=f[0],b=f[1],h=t.store.select.mediaDevices.audioInputDevices(t.store.getState()),g=function(e){b(e),d.webrtcStuff.myStream?null==d||d.replaceTracks({tracks:[{type:"audio",mid:"0",capture:{deviceId:{exact:e}}}],success:function(){console.info("Audio input device switch success!"),n.setJSONItem("phone-island-audio-input-device",{deviceId:e}),a.eventDispatch("phone-island-call-audio-input-switched",{})},error:function(e){console.error("Audio input device switch error:",e)}}):(n.setJSONItem("phone-island-audio-input-device",{deviceId:e}),a.eventDispatch("phone-island-call-audio-input-switched",{}))};s.useEventListener("phone-island-call-audio-input-switch",function(e){g(e.deviceId)});var x=e.useState(null),y=x[0],j=x[1];return p.default.createElement("div",{className:"pi-flex pi-flex-col pi-w-full"},p.default.createElement(o.SettingsHeader,{title:m("Settings.Microphones"),tooltipPrefix:"microphone"}),p.default.createElement("div",{className:"pi-flex pi-flex-col pi-mt-2 pi-space-y-1 pi-max-h-48 pi-overflow-y-auto pi-scrollbar-thin pi-scrollbar-thumb-gray-400 pi-dark:scrollbar-thumb-gray-400 pi-scrollbar-thumb-rounded-full pi-scrollbar-thumb-opacity-50 dark:pi-scrollbar-track-gray-900 pi-scrollbar-track-gray-200 pi-dark:scrollbar-track-gray-900 pi-scrollbar-track-rounded-full pi-scrollbar-track-opacity-25"},h.map(function(e,t){return p.default.createElement("div",{key:t,className:"pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md pi-cursor-pointer",onClick:function(){return g(null==e?void 0:e.deviceId)},onMouseEnter:function(){return j(null==e?void 0:e.deviceId)},onMouseLeave:function(){return j(null)}},p.default.createElement("div",{className:"pi-flex pi-items-center"},p.default.createElement(i.FontAwesomeIcon,{icon:r.faMicrophone,className:"pi-mr-2 pi-w-5 pi-h-5"}),p.default.createElement("span",null,(null==e?void 0:e.label)||"Input device ".concat(t+1))),p.default.createElement("div",{className:"pi-flex pi-items-center"},v===(null==e?void 0:e.deviceId)&&p.default.createElement(i.FontAwesomeIcon,{icon:r.faCheck,className:"".concat(y===(null==e?void 0:e.deviceId)?"pi-text-gray-700 dark:pi-text-gray-200":"pi-text-emerald-700 dark:pi-text-emerald-500"," pi-w-5 pi-h-5")})))})))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");require("../../node_modules/react-redux/es/index.js");var t=require("../../store/index.js"),i=require("../../node_modules/@fortawesome/react-fontawesome/dist/index.js"),r=require("../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js"),a=require("../../utils/customHooks/useEventListener.js"),n=require("../../utils/genericFunctions/eventDispatch.js"),s=require("../../utils/genericFunctions/localStorage.js");require("../../node_modules/tslib/tslib.es6.js");var o=require("./SettingsHeader.js");require("../../node_modules/i18next/dist/esm/i18next.js"),require("../../node_modules/react-i18next/dist/es/context.js");var l=require("../../node_modules/react-i18next/dist/es/useTranslation.js"),c=require("../../lib/devices/devices.js"),u=require("../../node_modules/react-redux/es/hooks/useSelector.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(e);exports.default=function(){var d=u.useSelector(function(e){return e.webrtc}).sipcall,m=l.useTranslation().t,f=e.useState(c.getCurrentAudioInputDeviceId()||null),v=f[0],x=f[1],b=t.store.select.mediaDevices.audioInputDevices(t.store.getState()),h=function(e){x(e),d.webrtcStuff.myStream?null==d||d.replaceTracks({tracks:[{type:"audio",mid:"0",capture:{deviceId:{exact:e}}}],success:function(){console.info("Audio input device switch success!"),s.setJSONItem("phone-island-audio-input-device",{deviceId:e}),n.eventDispatch("phone-island-call-audio-input-switched",{})},error:function(e){console.error("Audio input device switch error:",e)}}):(s.setJSONItem("phone-island-audio-input-device",{deviceId:e}),n.eventDispatch("phone-island-call-audio-input-switched",{}))};a.useEventListener("phone-island-call-audio-input-switch",function(e){h(e.deviceId)});var g=e.useState(null),y=g[0],k=g[1];return p.default.createElement("div",{className:"pi-flex pi-flex-col pi-w-full"},p.default.createElement(o.SettingsHeader,{title:m("Settings.Microphones"),tooltipPrefix:"microphone"}),p.default.createElement("div",{className:"pi-flex pi-flex-col pi-mt-2 pi-space-y-1 pi-max-h-48 pi-overflow-y-auto pi-scrollbar-thin pi-scrollbar-thumb-gray-400 pi-dark:scrollbar-thumb-gray-400 pi-scrollbar-thumb-rounded-full pi-scrollbar-thumb-opacity-50 dark:pi-scrollbar-track-gray-900 pi-scrollbar-track-gray-200 pi-dark:scrollbar-track-gray-900 pi-scrollbar-track-rounded-full pi-scrollbar-track-opacity-25"},b.map(function(e,t){return p.default.createElement("div",{key:t,className:"pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md pi-cursor-pointer",onClick:function(){return h(null==e?void 0:e.deviceId)},onMouseEnter:function(){return k(null==e?void 0:e.deviceId)},onMouseLeave:function(){return k(null)}},p.default.createElement("div",{className:"pi-flex pi-items-center"},p.default.createElement(i.FontAwesomeIcon,{icon:r.faMicrophone,className:"pi-mr-2 pi-w-5 pi-h-5"}),p.default.createElement("span",null,(null==e?void 0:e.label)||"Input device ".concat(t+1))),p.default.createElement("div",{className:"pi-flex pi-items-center"},v===(null==e?void 0:e.deviceId)&&p.default.createElement(i.FontAwesomeIcon,{icon:r.faCheck,className:"".concat(y===(null==e?void 0:e.deviceId)?"pi-text-gray-700 dark:pi-text-gray-200":"pi-text-emerald-700 dark:pi-text-emerald-500"," pi-w-5 pi-h-5")})))})))};
 //# sourceMappingURL=MicrophoneView.js.map

package/dist/components/SettingsView/MicrophoneView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MicrophoneView.js","sources":["../../../src/components/SettingsView/MicrophoneView.tsx"],"sourcesContent":["// Copyright (C) 2024 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { useState } from 'react'\nimport { useSelector } from 'react-redux'\nimport { RootState, store } from '../../store'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faCheck, faMicrophone } from '@fortawesome/free-solid-svg-icons'\nimport { eventDispatch, setJSONItem, useEventListener } from '../../utils'\nimport { SettingsHeader } from './SettingsHeader'\nimport { useTranslation } from 'react-i18next'\nimport { getCurrentAudioInputDeviceId } from '../../lib/devices/devices'\n\nconst MicrophoneView = () => {\n const { sipcall }: any = useSelector((state: RootState) => state.webrtc)\n const { t } = useTranslation()\n\n const [selectedAudioInput, setSelectedAudioInput] = useState<string \| null>(\n getCurrentAudioInputDeviceId() \|\| null,\n )\n const audioInputDevices = store.select.mediaDevices.audioInputDevices(store.getState())\n\n const handleClickAudioInput = (audioInputDevice: string) => {\n setSelectedAudioInput(audioInputDevice)\n\n if (sipcall.webrtcStuff.myStream) {\n sipcall?.replaceTracks({\n tracks: [\n {\n type: 'audio',\n mid: '0',\n capture: { deviceId: { exact: audioInputDevice } },\n },\n ],\n success: function () {\n console.info('Audio input device switch success!')\n setJSONItem('phone-island-audio-input-device', { deviceId: audioInputDevice })\n eventDispatch('phone-island-call-audio-input-switched', {})\n },\n error: function (err) {\n console.error('Audio input device switch error:', err)\n },\n })\n } else {\n setJSONItem('phone-island-audio-input-device', { deviceId: audioInputDevice })\n eventDispatch('phone-island-call-audio-input-switched', {})\n }\n }\n\n useEventListener('phone-island-call-audio-input-switch', (data: DeviceInputOutputTypes) => {\n handleClickAudioInput(data.deviceId)\n })\n\n const [hoveredDevice, setHoveredDevice] = useState<string \| null>(null)\n\n return (\n <div className='pi-flex pi-flex-col pi-w-full'>\n {/* Title /}\n <SettingsHeader title={t('Settings.Microphones')} tooltipPrefix='microphone' />\n\n {/ Microphone List */}\n <div className='pi-flex pi-flex-col pi-mt-2 pi-space-y-1 pi-max-h-48 pi-overflow-y-auto pi-scrollbar-thin pi-scrollbar-thumb-gray-400 pi-dark:scrollbar-thumb-gray-400 pi-scrollbar-thumb-rounded-full pi-scrollbar-thumb-opacity-50 dark:pi-scrollbar-track-gray-900 pi-scrollbar-track-gray-200 pi-dark:scrollbar-track-gray-900 pi-scrollbar-track-rounded-full pi-scrollbar-track-opacity-25'>\n {audioInputDevices.map((audioDevice, index) => (\n <div\n key={index}\n className='pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md pi-cursor-pointer'\n onClick={() => handleClickAudioInput(audioDevice?.deviceId)}\n onMouseEnter={() => setHoveredDevice(audioDevice?.deviceId)}\n onMouseLeave={() => setHoveredDevice(null)}\n >\n <div className='pi-flex pi-items-center'>\n <FontAwesomeIcon icon={faMicrophone} className='pi-mr-2 pi-w-5 pi-h-5' />\n <span>{audioDevice?.label \|\| `Input device ${index + 1}`}</span>\n </div>\n <div className='pi-flex pi-items-center'>\n {selectedAudioInput === audioDevice?.deviceId && (\n <FontAwesomeIcon\n icon={faCheck}\n className={`${\n hoveredDevice === audioDevice?.deviceId\n ? 'pi-text-gray-700 dark:pi-text-gray-200'\n : 'pi-text-emerald-700 dark:pi-text-emerald-500'\n } pi-w-5 pi-h-5`}\n />\n )}\n </div>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\ninterface DeviceInputOutputTypes {\n deviceId: string\n}\n\nexport default MicrophoneView\n"],"names":["sipcall","useSelector","state","webrtc","t","useTranslation","_a","useState","getCurrentAudioInputDeviceId","selectedAudioInput","setSelectedAudioInput","audioInputDevices","store","select","mediaDevices","getState","handleClickAudioInput","audioInputDevice","webrtcStuff","myStream","replaceTracks","tracks","type","mid","capture","deviceId","exact","success","console","info","setJSONItem","eventDispatch","error","err","useEventListener","data","_b","hoveredDevice","setHoveredDevice","React","createElement","className","SettingsHeader","title","tooltipPrefix","map","audioDevice","index","key","onClick","onMouseEnter","onMouseLeave","FontAwesomeIcon","icon","faMicrophone","label","faCheck","concat"],"mappings":"~~myCAauB~~,WACb,IAAAA,EAAiBC,cAAY,SAACC,GAAqB,OAAAA,EAAMC,iBACzDC,EAAMC,qBAERC,EAA8CC,EAAQA,SAC1DC,kCAAkC,MAD7BC,EAAkBH,EAAA,GAAEI,OAGrBC,EAAoBC,EAAKA,MAACC,OAAOC,aAAaH,kBAAkBC,EAAKA,MAACG,YAEtEC,EAAwB,SAACC,GAC7BP,EAAsBO,GAElBjB,EAAQkB,YAAYC,SACtBnB,SAAAA,EAASoB,cAAc,CACrBC,OAAQ,CACN,CACEC,KAAM,QACNC,IAAK,IACLC,QAAS,CAAEC,SAAU,CAAEC,MAAOT,MAGlCU,QAAS,WACPC,QAAQC,KAAK,sCACbC,EAAAA,YAAY,kCAAmC,CAAEL,SAAUR,IAC3Dc,gBAAc,yCAA0C,CAAA,EACzD,EACDC,MAAO,SAAUC,GACfL,QAAQI,MAAM,mCAAoCC,EACnD,KAGHH,EAAAA,YAAY,kCAAmC,CAAEL,SAAUR,IAC3Dc,gBAAc,yCAA0C,CAAA,GAE5D,EAEAG,mBAAiB,uCAAwC,SAACC,GACxDnB,EAAsBmB,EAAKV,SAC7B,GAEM,IAAAW,EAAoC7B,EAAAA,SAAwB,MAA3D8B,EAAaD,EAAA,GAAEE,EAAgBF,EAAA,GAEtC,OACEG,EAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,iCAEbF,UAAAC,cAACE,EAAcA,eAAA,CAACC,MAAOvC,EAAE,wBAAyBwC,cAAc,eAGhEL,EAAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,oXACZ9B,EAAkBkC,IAAI,SAACC,EAAaC,GAAU,OAC7CR,EAAAA,QACEC,cAAA,MAAA,CAAAQ,IAAKD,EACLN,UAAU,8PACVQ,QAAS,WAAM,OAAAjC,EAAsB8B,aAAA,EAAAA,EAAarB,SAAS,EAC3DyB,aAAc,WAAM,OAAAZ,EAAiBQ,aAAW,EAAXA,EAAarB,SAA9B,EACpB0B,aAAc,WAAM,OAAAb,EAAiB,QAErCC,EAAAA,QAAKC,cAAA,MAAA,CAAAC,UAAU,2BACbF,EAAC,QAAAC,cAAAY,mBAAgBC,KAAMC,eAAcb,UAAU,0BAC/CF,EAAA,QAAAC,cAAA,OAAA,MAAOM,eAAAA,EAAaS,QAAS,uBAAgBR,EAAQ,KAEvDR,EAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,2BACZhC,KAAuBqC,eAAAA,EAAarB,WACnCc,EAAAA,QAAAC,cAACY,EAAAA,gBAAe,CACdC,KAAMG,EAAOA,QACbf,UAAW,GACTgB,OAAApB,KAAkBS,aAAW,EAAXA,EAAarB,UAC3B,yCACA,+CACU,qBAKzB,IAIT"}
1	+ {"version":3,"file":"MicrophoneView.js","sources":["../../../src/components/SettingsView/MicrophoneView.tsx"],"sourcesContent":["// Copyright (C) 2024 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { useState } from 'react'\nimport { useSelector } from 'react-redux'\nimport { RootState, store } from '../../store'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faCheck, faMicrophone } from '@fortawesome/free-solid-svg-icons'\nimport { eventDispatch, setJSONItem, useEventListener } from '../../utils'\nimport { SettingsHeader } from './SettingsHeader'\nimport { useTranslation } from 'react-i18next'\nimport { getCurrentAudioInputDeviceId } from '../../lib/devices/devices'\n\nconst MicrophoneView = () => {\n const { sipcall }: any = useSelector((state: RootState) => state.webrtc)\n const { t } = useTranslation()\n\n const [selectedAudioInput, setSelectedAudioInput] = useState<string \| null>(\n getCurrentAudioInputDeviceId() \|\| null,\n )\n const audioInputDevices = store.select.mediaDevices.audioInputDevices(store.getState())\n\n const handleClickAudioInput = (audioInputDevice: string) => {\n setSelectedAudioInput(audioInputDevice)\n\n if (sipcall.webrtcStuff.myStream) {\n sipcall?.replaceTracks({\n tracks: [\n {\n type: 'audio',\n mid: '0',\n capture: { deviceId: { exact: audioInputDevice } },\n },\n ],\n success: function () {\n console.info('Audio input device switch success!')\n setJSONItem('phone-island-audio-input-device', { deviceId: audioInputDevice })\n eventDispatch('phone-island-call-audio-input-switched', {})\n },\n error: function (err) {\n console.error('Audio input device switch error:', err)\n },\n })\n } else {\n setJSONItem('phone-island-audio-input-device', { deviceId: audioInputDevice })\n eventDispatch('phone-island-call-audio-input-switched', {})\n }\n }\n\n useEventListener('phone-island-call-audio-input-switch', (data: DeviceInputOutputTypes) => {\n handleClickAudioInput(data.deviceId)\n })\n\n const [hoveredDevice, setHoveredDevice] = useState<string \| null>(null)\n\n return (\n <div className='pi-flex pi-flex-col pi-w-full'>\n {/* Title /}\n <SettingsHeader title={t('Settings.Microphones')} tooltipPrefix='microphone' />\n\n {/ Microphone List */}\n <div className='pi-flex pi-flex-col pi-mt-2 pi-space-y-1 pi-max-h-48 pi-overflow-y-auto pi-scrollbar-thin pi-scrollbar-thumb-gray-400 pi-dark:scrollbar-thumb-gray-400 pi-scrollbar-thumb-rounded-full pi-scrollbar-thumb-opacity-50 dark:pi-scrollbar-track-gray-900 pi-scrollbar-track-gray-200 pi-dark:scrollbar-track-gray-900 pi-scrollbar-track-rounded-full pi-scrollbar-track-opacity-25'>\n {audioInputDevices.map((audioDevice, index) => (\n <div\n key={index}\n className='pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md pi-cursor-pointer'\n onClick={() => handleClickAudioInput(audioDevice?.deviceId)}\n onMouseEnter={() => setHoveredDevice(audioDevice?.deviceId)}\n onMouseLeave={() => setHoveredDevice(null)}\n >\n <div className='pi-flex pi-items-center'>\n <FontAwesomeIcon icon={faMicrophone} className='pi-mr-2 pi-w-5 pi-h-5' />\n <span>{audioDevice?.label \|\| `Input device ${index + 1}`}</span>\n </div>\n <div className='pi-flex pi-items-center'>\n {selectedAudioInput === audioDevice?.deviceId && (\n <FontAwesomeIcon\n icon={faCheck}\n className={`${\n hoveredDevice === audioDevice?.deviceId\n ? 'pi-text-gray-700 dark:pi-text-gray-200'\n : 'pi-text-emerald-700 dark:pi-text-emerald-500'\n } pi-w-5 pi-h-5`}\n />\n )}\n </div>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\ninterface DeviceInputOutputTypes {\n deviceId: string\n}\n\nexport default MicrophoneView\n"],"names":["sipcall","useSelector","state","webrtc","t","useTranslation","_a","useState","getCurrentAudioInputDeviceId","selectedAudioInput","setSelectedAudioInput","audioInputDevices","store","select","mediaDevices","getState","handleClickAudioInput","audioInputDevice","webrtcStuff","myStream","replaceTracks","tracks","type","mid","capture","deviceId","exact","success","console","info","setJSONItem","eventDispatch","error","err","useEventListener","data","_b","hoveredDevice","setHoveredDevice","React","createElement","className","SettingsHeader","title","tooltipPrefix","map","audioDevice","index","key","onClick","onMouseEnter","onMouseLeave","FontAwesomeIcon","icon","faMicrophone","label","faCheck","concat"],"mappings":"6+BAauB,WACb,IAAAA,EAAiBC,cAAY,SAACC,GAAqB,OAAAA,EAAMC,iBACzDC,EAAMC,qBAERC,EAA8CC,EAAQA,SAC1DC,kCAAkC,MAD7BC,EAAkBH,EAAA,GAAEI,OAGrBC,EAAoBC,EAAKA,MAACC,OAAOC,aAAaH,kBAAkBC,EAAKA,MAACG,YAEtEC,EAAwB,SAACC,GAC7BP,EAAsBO,GAElBjB,EAAQkB,YAAYC,SACtBnB,SAAAA,EAASoB,cAAc,CACrBC,OAAQ,CACN,CACEC,KAAM,QACNC,IAAK,IACLC,QAAS,CAAEC,SAAU,CAAEC,MAAOT,MAGlCU,QAAS,WACPC,QAAQC,KAAK,sCACbC,EAAAA,YAAY,kCAAmC,CAAEL,SAAUR,IAC3Dc,gBAAc,yCAA0C,CAAA,EACzD,EACDC,MAAO,SAAUC,GACfL,QAAQI,MAAM,mCAAoCC,EACnD,KAGHH,EAAAA,YAAY,kCAAmC,CAAEL,SAAUR,IAC3Dc,gBAAc,yCAA0C,CAAA,GAE5D,EAEAG,mBAAiB,uCAAwC,SAACC,GACxDnB,EAAsBmB,EAAKV,SAC7B,GAEM,IAAAW,EAAoC7B,EAAAA,SAAwB,MAA3D8B,EAAaD,EAAA,GAAEE,EAAgBF,EAAA,GAEtC,OACEG,EAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,iCAEbF,UAAAC,cAACE,EAAcA,eAAA,CAACC,MAAOvC,EAAE,wBAAyBwC,cAAc,eAGhEL,EAAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,oXACZ9B,EAAkBkC,IAAI,SAACC,EAAaC,GAAU,OAC7CR,EAAAA,QACEC,cAAA,MAAA,CAAAQ,IAAKD,EACLN,UAAU,8PACVQ,QAAS,WAAM,OAAAjC,EAAsB8B,aAAA,EAAAA,EAAarB,SAAS,EAC3DyB,aAAc,WAAM,OAAAZ,EAAiBQ,aAAW,EAAXA,EAAarB,SAA9B,EACpB0B,aAAc,WAAM,OAAAb,EAAiB,QAErCC,EAAAA,QAAKC,cAAA,MAAA,CAAAC,UAAU,2BACbF,EAAC,QAAAC,cAAAY,mBAAgBC,KAAMC,eAAcb,UAAU,0BAC/CF,EAAA,QAAAC,cAAA,OAAA,MAAOM,eAAAA,EAAaS,QAAS,uBAAgBR,EAAQ,KAEvDR,EAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,2BACZhC,KAAuBqC,eAAAA,EAAarB,WACnCc,EAAAA,QAAAC,cAACY,EAAAA,gBAAe,CACdC,KAAMG,EAAOA,QACbf,UAAW,GACTgB,OAAApB,KAAkBS,aAAW,EAAXA,EAAarB,UAC3B,yCACA,+CACU,qBAKzB,IAIT"}

package/dist/components/SettingsView/SettingsHeader.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");require("../../node_modules/react-redux/es/index.js");var t=require("../../node_modules/@fortawesome/react-fontawesome/dist/index.js"),i=require("../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js"),o=require("../Button.js"),r=require("../CustomThemedTooltip.js");require("../../node_modules/@babel/runtime/helpers/defineProperty.js"),require("../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),require("../../node_modules/@babel/runtime/helpers/typeof.js"),require("../../node_modules/html-parse-stringify/dist/html-parse-stringify.js"),require("../../node_modules/react-i18next/dist/es/context.js");var s=require("../../node_modules/react-i18next/dist/es/useTranslation.js");require("../../node_modules/@babel/runtime/helpers/slicedToArray.js");var a=require("../../node_modules/react-redux/es/hooks/useDispatch.js"),n=require("../../node_modules/react-redux/es/hooks/useSelector.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(e);exports.SettingsHeader=function(e){var l=e.title,u=e.tooltipPrefix,c=a.useDispatch(),m=s.useTranslation().t,p=n.useSelector(function(e){return e.island}).previousView;return d.default.createElement(d.default.Fragment,null,d.default.createElement("div",{className:"pi-flex pi-items-center pi-justify-between"},d.default.createElement("div",{className:"pi-flex pi-items-center pi-gap-2 pi-text-gray-900 dark:pi-text-gray-50"},d.default.createElement(o.Button,{onClick:function(){return c.island.setSettingsView("main")},variant:"transparentSettings","data-tooltip-id":"tooltip-back-".concat(u,"-settings"),"data-tooltip-content":m("Common.Back")||""},d.default.createElement(t.FontAwesomeIcon,{icon:i.faAngleLeft,className:"pi-w-5 pi-h-5"})),d.default.createElement("h1",{className:"pi-text-lg pi-font-medium pi-leading-7"},l)),d.default.createElement(o.Button,{onClick:function(){return c.island.setSettingsView("main"),void c.island.setIslandView("".concat(p||"call"))},variant:"transparentSettings","data-tooltip-id":"tooltip-close-".concat(u,"-settings"),"data-tooltip-content":m("Common.Close")||""},d.default.createElement(t.FontAwesomeIcon,{icon:i.faXmark,className:"pi-w-5 pi-h-5"}))),d.default.createElement("div",{className:"pi-border-t pi-border-gray-300 dark:pi-border-gray-600 pi-mt-1"}),d.default.createElement(r.CustomThemedTooltip,{id:"tooltip-back-".concat(u,"-settings"),place:"bottom"}),d.default.createElement(r.CustomThemedTooltip,{id:"tooltip-close-".concat(u,"-settings"),place:"bottom"}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");require("../../node_modules/react-redux/es/index.js");var t=require("../../node_modules/@fortawesome/react-fontawesome/dist/index.js"),i=require("../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js"),o=require("../Button.js"),a=require("../CustomThemedTooltip.js");require("../../node_modules/i18next/dist/esm/i18next.js"),require("../../node_modules/react-i18next/dist/es/context.js");var n=require("../../node_modules/react-i18next/dist/es/useTranslation.js"),s=require("../../node_modules/react-redux/es/hooks/useDispatch.js"),r=require("../../node_modules/react-redux/es/hooks/useSelector.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(e);exports.SettingsHeader=function(e){var l=e.title,c=e.tooltipPrefix,u=s.useDispatch(),m=n.useTranslation().t,p=r.useSelector(function(e){return e.island}).previousView;return d.default.createElement(d.default.Fragment,null,d.default.createElement("div",{className:"pi-flex pi-items-center pi-justify-between"},d.default.createElement("div",{className:"pi-flex pi-items-center pi-gap-2 pi-text-gray-900 dark:pi-text-gray-50"},d.default.createElement(o.Button,{onClick:function(){return u.island.setSettingsView("main")},variant:"transparentSettings","data-tooltip-id":"tooltip-back-".concat(c,"-settings"),"data-tooltip-content":m("Common.Back")||""},d.default.createElement(t.FontAwesomeIcon,{icon:i.faAngleLeft,className:"pi-w-5 pi-h-5"})),d.default.createElement("h1",{className:"pi-text-lg pi-font-medium pi-leading-7"},l)),d.default.createElement(o.Button,{onClick:function(){return u.island.setSettingsView("main"),void u.island.setIslandView("".concat(p||"call"))},variant:"transparentSettings","data-tooltip-id":"tooltip-close-".concat(c,"-settings"),"data-tooltip-content":m("Common.Close")||""},d.default.createElement(t.FontAwesomeIcon,{icon:i.faXmark,className:"pi-w-5 pi-h-5"}))),d.default.createElement("div",{className:"pi-border-t pi-border-gray-300 dark:pi-border-gray-600 pi-mt-1"}),d.default.createElement(a.CustomThemedTooltip,{id:"tooltip-back-".concat(c,"-settings"),place:"bottom"}),d.default.createElement(a.CustomThemedTooltip,{id:"tooltip-close-".concat(c,"-settings"),place:"bottom"}))};
 //# sourceMappingURL=SettingsHeader.js.map

package/dist/components/SettingsView/SettingsHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SettingsHeader.js","sources":["../../../src/components/SettingsView/SettingsHeader.tsx"],"sourcesContent":["import React from 'react'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faAngleLeft, faXmark } from '@fortawesome/free-solid-svg-icons'\nimport { Button } from '../Button'\nimport { Dispatch, RootState } from '../../store'\nimport { CustomThemedTooltip } from '../CustomThemedTooltip'\nimport { useTranslation } from 'react-i18next'\n\ninterface SettingsHeaderProps {\n title: string\n tooltipPrefix: string\n}\n\nexport const SettingsHeader: React.FC<SettingsHeaderProps> = ({ title, tooltipPrefix }) => {\n const dispatch = useDispatch<Dispatch>()\n const { t } = useTranslation()\n const { previousView } = useSelector((state: RootState) => state.island)\n\n const closeSettings = () => {\n // Reset settings view to main\n dispatch.island.setSettingsView('main')\n // Go to previous view (e.g. 'call' or 'video')\n dispatch.island.setIslandView(`${previousView \|\| 'call'}`)\n }\n\n return (\n <>\n <div className='pi-flex pi-items-center pi-justify-between'>\n <div className='pi-flex pi-items-center pi-gap-2 pi-text-gray-900 dark:pi-text-gray-50'>\n <Button\n onClick={() => dispatch.island.setSettingsView('main')}\n variant='transparentSettings'\n data-tooltip-id={`tooltip-back-${tooltipPrefix}-settings`}\n data-tooltip-content={t('Common.Back') \|\| ''}\n >\n <FontAwesomeIcon icon={faAngleLeft} className='pi-w-5 pi-h-5' />\n </Button>\n <h1 className='pi-text-lg pi-font-medium pi-leading-7'>{title}</h1>\n </div>\n <Button\n onClick={() => closeSettings()}\n variant='transparentSettings'\n data-tooltip-id={`tooltip-close-${tooltipPrefix}-settings`}\n data-tooltip-content={t('Common.Close') \|\| ''}\n >\n <FontAwesomeIcon icon={faXmark} className='pi-w-5 pi-h-5' />\n </Button>\n </div>\n {/* Divider */}\n <div className='pi-border-t pi-border-gray-300 dark:pi-border-gray-600 pi-mt-1' />\n <CustomThemedTooltip id={`tooltip-back-${tooltipPrefix}-settings`} place='bottom' />\n <CustomThemedTooltip id={`tooltip-close-${tooltipPrefix}-settings`} place='bottom' />\n </>\n )\n}\n"],"names":["_a","title","tooltipPrefix","dispatch","useDispatch","t","useTranslation","previousView","useSelector","state","island","React","createElement","Fragment","className","Button","onClick","setSettingsView","variant","concat","FontAwesomeIcon","icon","faAngleLeft","setIslandView","faXmark","CustomThemedTooltip","id","place"],"mappings":"~~+lCAc6D~~,SAACA,OAAEC,EAAKD,EAAAC,MAAEC,EAAaF,EAAAE,cAC5EC,EAAWC,EAAAA,cACTC,EAAMC,qBACNC,EAAiBC,cAAY,SAACC,GAAqB,OAAAA,EAAMC,sBASjE,OACEC,UAAAC,cAAAD,EAAA,QAAAE,SAAA,KACEF,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,8CACbH,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,0EACbH,EAAAA,QAAAC,cAACG,SAAM,CACLC,QAAS,WAAM,OAAAb,EAASO,OAAOO,gBAAgB,OAAO,EACtDC,QAAQ,sBAAqB,kBACZ,gBAAgBC,OAAAjB,EAAwB,aAAA,uBACnCG,EAAE,gBAAkB,IAE1CM,UAACC,cAAAQ,EAAAA,gBAAgB,CAAAC,KAAMC,EAAAA,YAAaR,UAAU,mBAEhDH,EAAA,QAAAC,cAAA,KAAA,CAAIE,UAAU,0CAA0Cb,IAE1DU,UAACC,cAAAG,EAAMA,OACL,CAAAC,QAAS,WAAM,OApBrBb,EAASO,OAAOO,gBAAgB,aAEhCd,EAASO,OAAOa,cAAc,GAAGJ,OAAAZ,GAAgB,QAkBb,EAC9BW,QAAQ,sBAAqB,kBACZ,iBAAiBC,OAAAjB,EAAwB,aAAA,uBACpCG,EAAE,iBAAmB,IAE3CM,UAACC,cAAAQ,EAAAA,gBAAgB,CAAAC,KAAMG,EAAAA,QAASV,UAAU,oBAI9CH,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,mEACfH,EAAAA,QAACC,cAAAa,sBAAoB,CAAAC,GAAI,gBAAAP,OAAgBjB,EAAa,aAAayB,MAAM,WACzEhB,EAAAA,QAAAC,cAACa,EAAAA,oBAAmB,CAACC,GAAI,wBAAiBxB,EAAa,aAAayB,MAAM,WAGhF"}
1	+ {"version":3,"file":"SettingsHeader.js","sources":["../../../src/components/SettingsView/SettingsHeader.tsx"],"sourcesContent":["import React from 'react'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faAngleLeft, faXmark } from '@fortawesome/free-solid-svg-icons'\nimport { Button } from '../Button'\nimport { Dispatch, RootState } from '../../store'\nimport { CustomThemedTooltip } from '../CustomThemedTooltip'\nimport { useTranslation } from 'react-i18next'\n\ninterface SettingsHeaderProps {\n title: string\n tooltipPrefix: string\n}\n\nexport const SettingsHeader: React.FC<SettingsHeaderProps> = ({ title, tooltipPrefix }) => {\n const dispatch = useDispatch<Dispatch>()\n const { t } = useTranslation()\n const { previousView } = useSelector((state: RootState) => state.island)\n\n const closeSettings = () => {\n // Reset settings view to main\n dispatch.island.setSettingsView('main')\n // Go to previous view (e.g. 'call' or 'video')\n dispatch.island.setIslandView(`${previousView \|\| 'call'}`)\n }\n\n return (\n <>\n <div className='pi-flex pi-items-center pi-justify-between'>\n <div className='pi-flex pi-items-center pi-gap-2 pi-text-gray-900 dark:pi-text-gray-50'>\n <Button\n onClick={() => dispatch.island.setSettingsView('main')}\n variant='transparentSettings'\n data-tooltip-id={`tooltip-back-${tooltipPrefix}-settings`}\n data-tooltip-content={t('Common.Back') \|\| ''}\n >\n <FontAwesomeIcon icon={faAngleLeft} className='pi-w-5 pi-h-5' />\n </Button>\n <h1 className='pi-text-lg pi-font-medium pi-leading-7'>{title}</h1>\n </div>\n <Button\n onClick={() => closeSettings()}\n variant='transparentSettings'\n data-tooltip-id={`tooltip-close-${tooltipPrefix}-settings`}\n data-tooltip-content={t('Common.Close') \|\| ''}\n >\n <FontAwesomeIcon icon={faXmark} className='pi-w-5 pi-h-5' />\n </Button>\n </div>\n {/* Divider */}\n <div className='pi-border-t pi-border-gray-300 dark:pi-border-gray-600 pi-mt-1' />\n <CustomThemedTooltip id={`tooltip-back-${tooltipPrefix}-settings`} place='bottom' />\n <CustomThemedTooltip id={`tooltip-close-${tooltipPrefix}-settings`} place='bottom' />\n </>\n )\n}\n"],"names":["_a","title","tooltipPrefix","dispatch","useDispatch","t","useTranslation","previousView","useSelector","state","island","React","createElement","Fragment","className","Button","onClick","setSettingsView","variant","concat","FontAwesomeIcon","icon","faAngleLeft","setIslandView","faXmark","CustomThemedTooltip","id","place"],"mappings":"yyBAc6D,SAACA,OAAEC,EAAKD,EAAAC,MAAEC,EAAaF,EAAAE,cAC5EC,EAAWC,EAAAA,cACTC,EAAMC,qBACNC,EAAiBC,cAAY,SAACC,GAAqB,OAAAA,EAAMC,sBASjE,OACEC,UAAAC,cAAAD,EAAA,QAAAE,SAAA,KACEF,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,8CACbH,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,0EACbH,EAAAA,QAAAC,cAACG,SAAM,CACLC,QAAS,WAAM,OAAAb,EAASO,OAAOO,gBAAgB,OAAO,EACtDC,QAAQ,sBAAqB,kBACZ,gBAAgBC,OAAAjB,EAAwB,aAAA,uBACnCG,EAAE,gBAAkB,IAE1CM,UAACC,cAAAQ,EAAAA,gBAAgB,CAAAC,KAAMC,EAAAA,YAAaR,UAAU,mBAEhDH,EAAA,QAAAC,cAAA,KAAA,CAAIE,UAAU,0CAA0Cb,IAE1DU,UAACC,cAAAG,EAAMA,OACL,CAAAC,QAAS,WAAM,OApBrBb,EAASO,OAAOO,gBAAgB,aAEhCd,EAASO,OAAOa,cAAc,GAAGJ,OAAAZ,GAAgB,QAkBb,EAC9BW,QAAQ,sBAAqB,kBACZ,iBAAiBC,OAAAjB,EAAwB,aAAA,uBACpCG,EAAE,iBAAmB,IAE3CM,UAACC,cAAAQ,EAAAA,gBAAgB,CAAAC,KAAMG,EAAAA,QAASV,UAAU,oBAI9CH,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,mEACfH,EAAAA,QAACC,cAAAa,sBAAoB,CAAAC,GAAI,gBAAAP,OAAgBjB,EAAa,aAAayB,MAAM,WACzEhB,EAAAA,QAAAC,cAACa,EAAAA,oBAAmB,CAACC,GAAI,wBAAiBxB,EAAa,aAAayB,MAAM,WAGhF"}

package/dist/components/SettingsView/ThemeView.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");require("../../node_modules/react-redux/es/index.js");var t=require("../../node_modules/@fortawesome/react-fontawesome/dist/index.js"),r=require("../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js"),i=require("../../utils/genericFunctions/eventDispatch.js");require("../../node_modules/tslib/tslib.es6.js"),require("../../store/index.js");var s=require("./SettingsHeader.js");require("../../node_modules/@babel/runtime/helpers/defineProperty.js"),require("../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),require("../../node_modules/@babel/runtime/helpers/typeof.js"),require("../../node_modules/html-parse-stringify/dist/html-parse-stringify.js"),require("../../node_modules/react-i18next/dist/es/context.js");var a=require("../../node_modules/react-i18next/dist/es/useTranslation.js");require("../../node_modules/@babel/runtime/helpers/slicedToArray.js");var n=require("../../node_modules/react-redux/es/hooks/useSelector.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e);exports.default=function(){var o=a.useTranslation().t,u=n.useSelector(function(e){return e.darkTheme}).theme,d=e.useState(null),p=d[0],c=d[1];return l.default.createElement("div",{className:"pi-flex pi-flex-col pi-w-full"},l.default.createElement(s.SettingsHeader,{title:o("Settings.Theme"),tooltipPrefix:"theme"}),l.default.createElement("div",{className:"pi-flex pi-flex-col pi-mt-2 pi-space-y-1"},[{id:"dark",icon:r.faMoon,label:"Settings.Dark"},{id:"light",icon:r.faSun,label:"Settings.Light"}].map(function(e){var s=e.id,a=e.icon,n=e.label;return l.default.createElement("div",{key:s,className:"pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md",onClick:function(){return e=s,void i.eventDispatch("phone-island-theme-change",{selectedTheme:e});var e},onMouseEnter:function(){return c(s)},onMouseLeave:function(){return c(null)},"data-stop-propagation":!0},l.default.createElement(t.FontAwesomeIcon,{icon:a,className:"pi-mr-2 pi-w-5 pi-h-5"}),l.default.createElement("div",{className:"pi-ml-1 pi-flex-grow"},o(n)),u===s&&l.default.createElement(t.FontAwesomeIcon,{size:"lg",icon:r.faCheck,className:"".concat(p===s?"pi-text-gray-700 dark:pi-text-gray-200":"pi-text-emerald-700 dark:pi-text-emerald-500"," pi-w-5 pi-h-5")}))})))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");require("../../node_modules/react-redux/es/index.js");var t=require("../../node_modules/@fortawesome/react-fontawesome/dist/index.js"),i=require("../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js"),r=require("../../utils/genericFunctions/eventDispatch.js");require("../../node_modules/tslib/tslib.es6.js"),require("../../store/index.js");var a=require("./SettingsHeader.js");require("../../node_modules/i18next/dist/esm/i18next.js"),require("../../node_modules/react-i18next/dist/es/context.js");var n=require("../../node_modules/react-i18next/dist/es/useTranslation.js"),s=require("../../node_modules/react-redux/es/hooks/useSelector.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e);exports.default=function(){var o=n.useTranslation().t,d=s.useSelector(function(e){return e.darkTheme}).theme,u=e.useState(null),c=u[0],p=u[1];return l.default.createElement("div",{className:"pi-flex pi-flex-col pi-w-full"},l.default.createElement(a.SettingsHeader,{title:o("Settings.Theme"),tooltipPrefix:"theme"}),l.default.createElement("div",{className:"pi-flex pi-flex-col pi-mt-2 pi-space-y-1"},[{id:"dark",icon:i.faMoon,label:"Settings.Dark"},{id:"light",icon:i.faSun,label:"Settings.Light"}].map(function(e){var a=e.id,n=e.icon,s=e.label;return l.default.createElement("div",{key:a,className:"pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md",onClick:function(){return e=a,void r.eventDispatch("phone-island-theme-change",{selectedTheme:e});var e},onMouseEnter:function(){return p(a)},onMouseLeave:function(){return p(null)},"data-stop-propagation":!0},l.default.createElement(t.FontAwesomeIcon,{icon:n,className:"pi-mr-2 pi-w-5 pi-h-5"}),l.default.createElement("div",{className:"pi-ml-1 pi-flex-grow"},o(s)),d===a&&l.default.createElement(t.FontAwesomeIcon,{size:"lg",icon:i.faCheck,className:"".concat(c===a?"pi-text-gray-700 dark:pi-text-gray-200":"pi-text-emerald-700 dark:pi-text-emerald-500"," pi-w-5 pi-h-5")}))})))};
 //# sourceMappingURL=ThemeView.js.map

package/dist/components/SettingsView/ThemeView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThemeView.js","sources":["../../../src/components/SettingsView/ThemeView.tsx"],"sourcesContent":["// Copyright (C) 2025 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { useState } from 'react'\nimport { useSelector } from 'react-redux'\nimport { RootState } from '../../store'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faCheck, faMoon, faSun } from '@fortawesome/free-solid-svg-icons'\nimport { eventDispatch } from '../../utils'\nimport { SettingsHeader } from './SettingsHeader'\nimport { useTranslation } from 'react-i18next'\n\nconst ThemeView = () => {\n const handleSelectTheme = (clickedTheme: string) => {\n eventDispatch('phone-island-theme-change', { selectedTheme: clickedTheme })\n }\n const { t } = useTranslation()\n\n const { theme } = useSelector((state: RootState) => state.darkTheme)\n const [hoveredDevice, setHoveredDevice] = useState<string \| null>(null)\n\n return (\n <div className='pi-flex pi-flex-col pi-w-full'>\n {/* Title /}\n <SettingsHeader title={t('Settings.Theme')} tooltipPrefix='theme' />\n {/ Theme List */}\n <div className='pi-flex pi-flex-col pi-mt-2 pi-space-y-1'>\n {[\n { id: 'dark', icon: faMoon, label: 'Settings.Dark' },\n { id: 'light', icon: faSun, label: 'Settings.Light' },\n ].map(({ id, icon, label }) => (\n <div\n key={id}\n className='pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md'\n onClick={() => handleSelectTheme(id)}\n onMouseEnter={() => setHoveredDevice(id)}\n onMouseLeave={() => setHoveredDevice(null)}\n data-stop-propagation={true}\n >\n <FontAwesomeIcon icon={icon} className='pi-mr-2 pi-w-5 pi-h-5' />\n <div className='pi-ml-1 pi-flex-grow'>{t(label)}</div>\n {theme === id && (\n <FontAwesomeIcon\n size='lg'\n icon={faCheck}\n className={`${\n hoveredDevice === id\n ? 'pi-text-gray-700 dark:pi-text-gray-200'\n : 'pi-text-emerald-700 dark:pi-text-emerald-500'\n } pi-w-5 pi-h-5`}\n />\n )}\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ThemeView\n"],"names":["t","useTranslation","theme","useSelector","state","darkTheme","_a","useState","hoveredDevice","setHoveredDevice","React","createElement","className","SettingsHeader","title","tooltipPrefix","id","icon","faMoon","label","faSun","map","key","onClick","clickedTheme","eventDispatch","selectedTheme","onMouseEnter","onMouseLeave","FontAwesomeIcon","size","faCheck","concat"],"mappings":"~~ooCAYkB~~,WAChB,IAGQA,EAAMC,qBAENC,EAAUC,cAAY,SAACC,GAAqB,OAAAA,EAAMC,kBACpDC,EAAoCC,EAAAA,SAAwB,MAA3DC,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAEtC,OACEI,EAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,iCAEbF,UAAAC,cAACE,EAAcA,eAAA,CAACC,MAAOd,EAAE,kBAAmBe,cAAc,UAE1DL,EAAAA,QAAKC,cAAA,MAAA,CAAAC,UAAU,4CACZ,CACC,CAAEI,GAAI,OAAQC,KAAMC,EAAAA,OAAQC,MAAO,iBACnC,CAAEH,GAAI,QAASC,KAAMG,EAAAA,MAAOD,MAAO,mBACnCE,IAAI,SAACf,GAAE,IAAAU,OAAIC,EAAIX,EAAAW,KAAEE,EAAKb,EAAAa,MAAO,OAC7BT,EACE,QAAAC,cAAA,MAAA,CAAAW,IAAKN,EACLJ,UAAU,4OACVW,QAAS,WAAM,OArBEC,EAqBgBR,OApBzCS,EAAAA,cAAc,4BAA6B,CAAEC,cAAeF,IADpC,IAACA,GAsBjBG,aAAc,WAAM,OAAAlB,EAAiBO,EAAG,EACxCY,aAAc,WAAM,OAAAnB,EAAiB,KAAjB,2BACG,GAEvBC,EAAC,QAAAC,cAAAkB,mBAAgBZ,KAAMA,EAAML,UAAU,0BACvCF,UAAKC,cAAA,MAAA,CAAAC,UAAU,wBAAwBZ,EAAEmB,IACxCjB,IAAUc,GACTN,EAAAA,sBAACmB,EAAAA,gBAAe,CACdC,KAAK,KACLb,KAAMc,EAAOA,QACbnB,UAAW,GACToB,OAAAxB,IAAkBQ,EACd,yCACA,+CAA8C,oBAK3D,IAIT"}
1	+ {"version":3,"file":"ThemeView.js","sources":["../../../src/components/SettingsView/ThemeView.tsx"],"sourcesContent":["// Copyright (C) 2025 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { useState } from 'react'\nimport { useSelector } from 'react-redux'\nimport { RootState } from '../../store'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faCheck, faMoon, faSun } from '@fortawesome/free-solid-svg-icons'\nimport { eventDispatch } from '../../utils'\nimport { SettingsHeader } from './SettingsHeader'\nimport { useTranslation } from 'react-i18next'\n\nconst ThemeView = () => {\n const handleSelectTheme = (clickedTheme: string) => {\n eventDispatch('phone-island-theme-change', { selectedTheme: clickedTheme })\n }\n const { t } = useTranslation()\n\n const { theme } = useSelector((state: RootState) => state.darkTheme)\n const [hoveredDevice, setHoveredDevice] = useState<string \| null>(null)\n\n return (\n <div className='pi-flex pi-flex-col pi-w-full'>\n {/* Title /}\n <SettingsHeader title={t('Settings.Theme')} tooltipPrefix='theme' />\n {/ Theme List */}\n <div className='pi-flex pi-flex-col pi-mt-2 pi-space-y-1'>\n {[\n { id: 'dark', icon: faMoon, label: 'Settings.Dark' },\n { id: 'light', icon: faSun, label: 'Settings.Light' },\n ].map(({ id, icon, label }) => (\n <div\n key={id}\n className='pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md'\n onClick={() => handleSelectTheme(id)}\n onMouseEnter={() => setHoveredDevice(id)}\n onMouseLeave={() => setHoveredDevice(null)}\n data-stop-propagation={true}\n >\n <FontAwesomeIcon icon={icon} className='pi-mr-2 pi-w-5 pi-h-5' />\n <div className='pi-ml-1 pi-flex-grow'>{t(label)}</div>\n {theme === id && (\n <FontAwesomeIcon\n size='lg'\n icon={faCheck}\n className={`${\n hoveredDevice === id\n ? 'pi-text-gray-700 dark:pi-text-gray-200'\n : 'pi-text-emerald-700 dark:pi-text-emerald-500'\n } pi-w-5 pi-h-5`}\n />\n )}\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ThemeView\n"],"names":["t","useTranslation","theme","useSelector","state","darkTheme","_a","useState","hoveredDevice","setHoveredDevice","React","createElement","className","SettingsHeader","title","tooltipPrefix","id","icon","faMoon","label","faSun","map","key","onClick","clickedTheme","eventDispatch","selectedTheme","onMouseEnter","onMouseLeave","FontAwesomeIcon","size","faCheck","concat"],"mappings":"80BAYkB,WAChB,IAGQA,EAAMC,qBAENC,EAAUC,cAAY,SAACC,GAAqB,OAAAA,EAAMC,kBACpDC,EAAoCC,EAAAA,SAAwB,MAA3DC,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAEtC,OACEI,EAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,iCAEbF,UAAAC,cAACE,EAAcA,eAAA,CAACC,MAAOd,EAAE,kBAAmBe,cAAc,UAE1DL,EAAAA,QAAKC,cAAA,MAAA,CAAAC,UAAU,4CACZ,CACC,CAAEI,GAAI,OAAQC,KAAMC,EAAAA,OAAQC,MAAO,iBACnC,CAAEH,GAAI,QAASC,KAAMG,EAAAA,MAAOD,MAAO,mBACnCE,IAAI,SAACf,GAAE,IAAAU,OAAIC,EAAIX,EAAAW,KAAEE,EAAKb,EAAAa,MAAO,OAC7BT,EACE,QAAAC,cAAA,MAAA,CAAAW,IAAKN,EACLJ,UAAU,4OACVW,QAAS,WAAM,OArBEC,EAqBgBR,OApBzCS,EAAAA,cAAc,4BAA6B,CAAEC,cAAeF,IADpC,IAACA,GAsBjBG,aAAc,WAAM,OAAAlB,EAAiBO,EAAG,EACxCY,aAAc,WAAM,OAAAnB,EAAiB,KAAjB,2BACG,GAEvBC,EAAC,QAAAC,cAAAkB,mBAAgBZ,KAAMA,EAAML,UAAU,0BACvCF,UAAKC,cAAA,MAAA,CAAAC,UAAU,wBAAwBZ,EAAEmB,IACxCjB,IAAUc,GACTN,EAAAA,sBAACmB,EAAAA,gBAAe,CACdC,KAAK,KACLb,KAAMc,EAAOA,QACbnB,UAAW,GACToB,OAAAxB,IAAkBQ,EACd,yCACA,+CAA8C,oBAK3D,IAIT"}

package/dist/components/SettingsView/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");require("../../node_modules/react-redux/es/index.js");var t=require("../../node_modules/@fortawesome/react-fontawesome/dist/index.js"),i=require("../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js"),r=require("../Button.js"),n=require("./MicrophoneView.js"),a=require("./AudioView.js"),l=require("./ThemeView.js"),s=require("../CustomThemedTooltip.js");require("../../node_modules/@babel/runtime/helpers/defineProperty.js"),require("../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),require("../../node_modules/@babel/runtime/helpers/typeof.js"),require("../../node_modules/html-parse-stringify/dist/html-parse-stringify.js"),require("../../node_modules/react-i18next/dist/es/context.js");var o=require("../../node_modules/react-i18next/dist/es/useTranslation.js");require("../../node_modules/@babel/runtime/helpers/slicedToArray.js");var u=require("./VideoInputView.js"),d=require("../../node_modules/react-redux/es/hooks/useSelector.js"),c=require("../../node_modules/react-redux/es/hooks/useDispatch.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=p(e);exports.MicrophoneView=n.default,exports.AudioView=a.default,exports.ThemeView=l.default,exports.VideoInputView=u.default,exports.SettingsView=function(){var e=d.useSelector(function(e){return e.island}),p=e.settingsView,f=e.previousView,g=o.useTranslation().t,h=c.useDispatch(),w=function(e){var r=e.icon,n=e.label,a=e.onClick;return m.default.createElement("button",{onClick:a,className:"pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md"},m.default.createElement("div",{className:"pi-flex pi-items-center pi-gap-3"},m.default.createElement(t.FontAwesomeIcon,{icon:r,className:"pi-w-5 pi-h-5"}),m.default.createElement("span",null,n)),m.default.createElement(t.FontAwesomeIcon,{icon:i.faAngleRight,className:"pi-w-5 pi-h-5"}))},x=m.default.createElement("div",{className:"pi-flex pi-flex-col pi-w-full"},m.default.createElement("div",{className:"pi-flex pi-items-center pi-justify-between pi-text-gray-900 dark:pi-text-gray-50"},m.default.createElement("h1",{className:"pi-text-lg pi-font-medium pi-leading-7"},g("Settings.Settings")),m.default.createElement(r.Button,{onClick:function(){return h.island.setIslandView("".concat(f||"call"))},variant:"transparentSettings","data-tooltip-id":"tooltip-close-settings","data-tooltip-content":g("Common.Close")||""},m.default.createElement(t.FontAwesomeIcon,{icon:i.faXmark,className:"pi-w-5 pi-h-5"}))),m.default.createElement("div",{className:"pi-border-t pi-border-gray-300 dark:pi-border-gray-600 pi-mt-1"}),m.default.createElement("div",{className:"pi-flex pi-flex-col pi-mt-2"},m.default.createElement(w,{icon:i.faMicrophone,label:g("Settings.Microphones"),onClick:function(){return h.island.setSettingsView("microphone")}}),m.default.createElement(w,{icon:i.faVolumeHigh,label:g("Settings.Speakers"),onClick:function(){return h.island.setSettingsView("audioInput")}}),m.default.createElement(w,{icon:i.faVideo,label:g("Settings.Cameras"),onClick:function(){return h.island.setSettingsView("videoInput")}}),m.default.createElement(w,{icon:i.faPalette,label:g("Settings.Theme"),onClick:function(){return h.island.setSettingsView("theme")}})));return m.default.createElement(m.default.Fragment,null,function(){switch(p){case"main":default:return x;case"microphone":return m.default.createElement(n.default,null);case"audioInput":return m.default.createElement(a.default,null);case"videoInput":return m.default.createElement(u.default,null);case"theme":return m.default.createElement(l.default,null)}}(),m.default.createElement(s.CustomThemedTooltip,{id:"tooltip-close-settings",place:"bottom"}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");require("../../node_modules/react-redux/es/index.js");var t=require("../../node_modules/@fortawesome/react-fontawesome/dist/index.js"),i=require("../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js"),n=require("../Button.js"),a=require("./MicrophoneView.js"),r=require("./AudioView.js"),l=require("./ThemeView.js"),o=require("../CustomThemedTooltip.js");require("../../node_modules/i18next/dist/esm/i18next.js"),require("../../node_modules/react-i18next/dist/es/context.js");var s=require("../../node_modules/react-i18next/dist/es/useTranslation.js"),u=require("./VideoInputView.js"),d=require("../../node_modules/react-redux/es/hooks/useSelector.js"),c=require("../../node_modules/react-redux/es/hooks/useDispatch.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=p(e);exports.MicrophoneView=a.default,exports.AudioView=r.default,exports.ThemeView=l.default,exports.VideoInputView=u.default,exports.SettingsView=function(){var e=d.useSelector(function(e){return e.island}),p=e.settingsView,f=e.previousView,g=s.useTranslation().t,x=c.useDispatch(),w=function(e){var n=e.icon,a=e.label,r=e.onClick;return m.default.createElement("button",{onClick:r,className:"pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md"},m.default.createElement("div",{className:"pi-flex pi-items-center pi-gap-3"},m.default.createElement(t.FontAwesomeIcon,{icon:n,className:"pi-w-5 pi-h-5"}),m.default.createElement("span",null,a)),m.default.createElement(t.FontAwesomeIcon,{icon:i.faAngleRight,className:"pi-w-5 pi-h-5"}))},h=m.default.createElement("div",{className:"pi-flex pi-flex-col pi-w-full"},m.default.createElement("div",{className:"pi-flex pi-items-center pi-justify-between pi-text-gray-900 dark:pi-text-gray-50"},m.default.createElement("h1",{className:"pi-text-lg pi-font-medium pi-leading-7"},g("Settings.Settings")),m.default.createElement(n.Button,{onClick:function(){return x.island.setIslandView("".concat(f||"call"))},variant:"transparentSettings","data-tooltip-id":"tooltip-close-settings","data-tooltip-content":g("Common.Close")||""},m.default.createElement(t.FontAwesomeIcon,{icon:i.faXmark,className:"pi-w-5 pi-h-5"}))),m.default.createElement("div",{className:"pi-border-t pi-border-gray-300 dark:pi-border-gray-600 pi-mt-1"}),m.default.createElement("div",{className:"pi-flex pi-flex-col pi-mt-2"},m.default.createElement(w,{icon:i.faMicrophone,label:g("Settings.Microphones"),onClick:function(){return x.island.setSettingsView("microphone")}}),m.default.createElement(w,{icon:i.faVolumeHigh,label:g("Settings.Speakers"),onClick:function(){return x.island.setSettingsView("audioInput")}}),m.default.createElement(w,{icon:i.faVideo,label:g("Settings.Cameras"),onClick:function(){return x.island.setSettingsView("videoInput")}}),m.default.createElement(w,{icon:i.faPalette,label:g("Settings.Theme"),onClick:function(){return x.island.setSettingsView("theme")}})));return m.default.createElement(m.default.Fragment,null,function(){switch(p){case"main":default:return h;case"microphone":return m.default.createElement(a.default,null);case"audioInput":return m.default.createElement(r.default,null);case"videoInput":return m.default.createElement(u.default,null);case"theme":return m.default.createElement(l.default,null)}}(),m.default.createElement(o.CustomThemedTooltip,{id:"tooltip-close-settings",place:"bottom"}))};
 //# sourceMappingURL=index.js.map

package/dist/components/SettingsView/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/SettingsView/index.tsx"],"sourcesContent":["// Copyright (C) 2024 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { type FC } from 'react'\nimport { useSelector, useDispatch } from 'react-redux'\nimport { RootState, Dispatch } from '../../store'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n faAngleRight,\n faMicrophone,\n faPalette,\n faVideo,\n faVolumeHigh,\n faXmark,\n} from '@fortawesome/free-solid-svg-icons'\nimport { Button } from '../Button'\nimport MicrophoneView from './MicrophoneView'\nimport AudioView from './AudioView'\nimport ThemeView from './ThemeView'\nimport { CustomThemedTooltip } from '../CustomThemedTooltip'\nimport { useTranslation } from 'react-i18next'\nimport VideoInputView from './VideoInputView'\n\nexport const SettingsView: FC<SettingsViewProps> = () => {\n const { settingsView, previousView } = useSelector((state: RootState) => state.island)\n const { t } = useTranslation()\n const dispatch = useDispatch<Dispatch>()\n\n const SettingsMenuItem = ({ icon, label, onClick }) => (\n <button\n onClick={onClick}\n className='pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md'\n >\n <div className='pi-flex pi-items-center pi-gap-3'>\n <FontAwesomeIcon icon={icon} className='pi-w-5 pi-h-5' />\n <span>{label}</span>\n </div>\n <FontAwesomeIcon icon={faAngleRight} className='pi-w-5 pi-h-5' />\n </button>\n )\n\n // main settings view\n const MainSettings = (\n <div className='pi-flex pi-flex-col pi-w-full'>\n {/* Header /}\n <div className='pi-flex pi-items-center pi-justify-between pi-text-gray-900 dark:pi-text-gray-50'>\n <h1 className='pi-text-lg pi-font-medium pi-leading-7'>{t('Settings.Settings')}</h1>\n <Button\n onClick={() => dispatch.island.setIslandView(`${previousView \|\| 'call'}`)}\n variant='transparentSettings'\n data-tooltip-id='tooltip-close-settings'\n data-tooltip-content={t('Common.Close') \|\| ''}\n >\n <FontAwesomeIcon icon={faXmark} className='pi-w-5 pi-h-5' />\n </Button>\n </div>\n\n {/ Divider /}\n <div className='pi-border-t pi-border-gray-300 dark:pi-border-gray-600 pi-mt-1' />\n\n {/ Menu Items */}\n <div className='pi-flex pi-flex-col pi-mt-2'>\n <SettingsMenuItem\n icon={faMicrophone}\n label={t('Settings.Microphones')}\n onClick={() => dispatch.island.setSettingsView('microphone')}\n />\n <SettingsMenuItem\n icon={faVolumeHigh}\n label={t('Settings.Speakers')}\n onClick={() => dispatch.island.setSettingsView('audioInput')}\n />\n <SettingsMenuItem\n icon={faVideo}\n label={t('Settings.Cameras')}\n onClick={() => dispatch.island.setSettingsView('videoInput')}\n />\n <SettingsMenuItem\n icon={faPalette}\n label={t('Settings.Theme')}\n onClick={() => dispatch.island.setSettingsView('theme')}\n />\n </div>\n </div>\n )\n\n return (\n <>\n {(() => {\n switch (settingsView) {\n case 'main':\n return MainSettings\n case 'microphone':\n return <MicrophoneView />\n case 'audioInput':\n return <AudioView />\n case 'videoInput':\n return <VideoInputView />\n case 'theme':\n return <ThemeView />\n default:\n return MainSettings\n }\n })()}\n <CustomThemedTooltip id='tooltip-close-settings' place='bottom' />\n </>\n )\n}\n\nexport interface SettingsViewProps {}\n\nexport { default as AudioView } from './AudioView'\nexport { default as MicrophoneView } from './MicrophoneView'\nexport { default as ThemeView } from './ThemeView'\nexport { default as VideoInputView } from './VideoInputView'\n"],"names":["_a","useSelector","state","island","settingsView","previousView","t","useTranslation","dispatch","useDispatch","SettingsMenuItem","icon","label","onClick","React","className","createElement","FontAwesomeIcon","faAngleRight","MainSettings","Button","setIslandView","concat","variant","faXmark","faMicrophone","setSettingsView","faVolumeHigh","faVideo","faPalette","Fragment","MicrophoneView","AudioView","VideoInputView","ThemeView","CustomThemedTooltip","id","place"],"mappings":"~~i1CAuBmD~~,WAC3C,IAAAA,EAAiCC,EAAAA,YAAY,SAACC,GAAqB,OAAAA,EAAMC,MAAM,GAA7EC,iBAAcC,iBACdC,EAAMC,qBACRC,EAAWC,EAAAA,cAEXC,EAAmB,SAACV,GAAE,IAAAW,SAAMC,EAAKZ,EAAAY,MAAEC,EAAOb,EAAAa,QAAO,OACrDC,EAAAA,gCACED,QAASA,EACTE,UAAU,6OAEVD,EAAAA,QAAKE,cAAA,MAAA,CAAAD,UAAU,oCACbD,EAAC,QAAAE,cAAAC,mBAAgBN,KAAMA,EAAMI,UAAU,kBACvCD,EAAAA,QAAOE,cAAA,OAAA,KAAAJ,IAETE,UAACE,cAAAC,EAAAA,gBAAgB,CAAAN,KAAMO,EAAAA,aAAcH,UAAU,kBATI,EAcjDI,EACJL,EAAAA,QAAKE,cAAA,MAAA,CAAAD,UAAU,iCAEbD,EAAAA,QAAKE,cAAA,MAAA,CAAAD,UAAU,oFACbD,UAAIE,cAAA,KAAA,CAAAD,UAAU,0CAA0CT,EAAE,sBAC1DQ,EAAAA,QAAAE,cAACI,SAAM,CACLP,QAAS,WAAM,OAAAL,EAASL,OAAOkB,cAAc,GAAAC,OAAGjB,GAAgB,QAAjD,EACfkB,QAAQ,sBAAqB,kBACb,yBAAwB,uBAClBjB,EAAE,iBAAmB,IAE3CQ,UAACE,cAAAC,EAAAA,gBAAgB,CAAAN,KAAMa,EAAAA,QAAST,UAAU,oBAK9CD,EAAAA,QAAKE,cAAA,MAAA,CAAAD,UAAU,mEAGfD,EAAAA,QAAKE,cAAA,MAAA,CAAAD,UAAU,+BACbD,EAAC,QAAAE,cAAAN,EACC,CAAAC,KAAMc,eACNb,MAAON,EAAE,wBACTO,QAAS,WAAM,OAAAL,EAASL,OAAOuB,gBAAgB,aAAhC,IAEjBZ,EAAC,QAAAE,cAAAN,EACC,CAAAC,KAAMgB,eACNf,MAAON,EAAE,qBACTO,QAAS,WAAM,OAAAL,EAASL,OAAOuB,gBAAgB,aAAhC,IAEjBZ,EAAC,QAAAE,cAAAN,EACC,CAAAC,KAAMiB,UACNhB,MAAON,EAAE,oBACTO,QAAS,WAAM,OAAAL,EAASL,OAAOuB,gBAAgB,aAAhC,IAEjBZ,UAAAE,cAACN,EAAgB,CACfC,KAAMkB,EAAAA,UACNjB,MAAON,EAAE,kBACTO,QAAS,WAAM,OAAAL,EAASL,OAAOuB,gBAAgB,QAAQ,MAM/D,OACEZ,UAAAE,cAAAF,EAAA,QAAAgB,SAAA,KACG,WACC,OAAQ1B,GACN,IAAK,OAUL,QACE,OAAOe,EATT,IAAK,aACH,OAAOL,UAAAE,cAACe,EAAc,QAAA,MACxB,IAAK,aACH,OAAOjB,UAAAE,cAACgB,EAAS,QAAA,MACnB,IAAK,aACH,OAAOlB,UAAAE,cAACiB,EAAc,QAAA,MACxB,IAAK,QACH,OAAOnB,UAAAE,cAACkB,EAAS,QAAA,MAItB,CAfA,GAgBDpB,UAAAE,cAACmB,EAAAA,oBAAmB,CAACC,GAAG,yBAAyBC,MAAM,WAG7D"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/SettingsView/index.tsx"],"sourcesContent":["// Copyright (C) 2024 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { type FC } from 'react'\nimport { useSelector, useDispatch } from 'react-redux'\nimport { RootState, Dispatch } from '../../store'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n faAngleRight,\n faMicrophone,\n faPalette,\n faVideo,\n faVolumeHigh,\n faXmark,\n} from '@fortawesome/free-solid-svg-icons'\nimport { Button } from '../Button'\nimport MicrophoneView from './MicrophoneView'\nimport AudioView from './AudioView'\nimport ThemeView from './ThemeView'\nimport { CustomThemedTooltip } from '../CustomThemedTooltip'\nimport { useTranslation } from 'react-i18next'\nimport VideoInputView from './VideoInputView'\n\nexport const SettingsView: FC<SettingsViewProps> = () => {\n const { settingsView, previousView } = useSelector((state: RootState) => state.island)\n const { t } = useTranslation()\n const dispatch = useDispatch<Dispatch>()\n\n const SettingsMenuItem = ({ icon, label, onClick }) => (\n <button\n onClick={onClick}\n className='pi-flex pi-items-center pi-justify-between pi-px-4 pi-py-3 pi-text-base pi-font-normal pi-leading-6 dark:pi-text-gray-200 pi-text-gray-700 hover:pi-bg-gray-200 dark:hover:pi-bg-gray-700 dark:pi-bg-gray-950 pi-bg-gray-50 pi-rounded-md'\n >\n <div className='pi-flex pi-items-center pi-gap-3'>\n <FontAwesomeIcon icon={icon} className='pi-w-5 pi-h-5' />\n <span>{label}</span>\n </div>\n <FontAwesomeIcon icon={faAngleRight} className='pi-w-5 pi-h-5' />\n </button>\n )\n\n // main settings view\n const MainSettings = (\n <div className='pi-flex pi-flex-col pi-w-full'>\n {/* Header /}\n <div className='pi-flex pi-items-center pi-justify-between pi-text-gray-900 dark:pi-text-gray-50'>\n <h1 className='pi-text-lg pi-font-medium pi-leading-7'>{t('Settings.Settings')}</h1>\n <Button\n onClick={() => dispatch.island.setIslandView(`${previousView \|\| 'call'}`)}\n variant='transparentSettings'\n data-tooltip-id='tooltip-close-settings'\n data-tooltip-content={t('Common.Close') \|\| ''}\n >\n <FontAwesomeIcon icon={faXmark} className='pi-w-5 pi-h-5' />\n </Button>\n </div>\n\n {/ Divider /}\n <div className='pi-border-t pi-border-gray-300 dark:pi-border-gray-600 pi-mt-1' />\n\n {/ Menu Items */}\n <div className='pi-flex pi-flex-col pi-mt-2'>\n <SettingsMenuItem\n icon={faMicrophone}\n label={t('Settings.Microphones')}\n onClick={() => dispatch.island.setSettingsView('microphone')}\n />\n <SettingsMenuItem\n icon={faVolumeHigh}\n label={t('Settings.Speakers')}\n onClick={() => dispatch.island.setSettingsView('audioInput')}\n />\n <SettingsMenuItem\n icon={faVideo}\n label={t('Settings.Cameras')}\n onClick={() => dispatch.island.setSettingsView('videoInput')}\n />\n <SettingsMenuItem\n icon={faPalette}\n label={t('Settings.Theme')}\n onClick={() => dispatch.island.setSettingsView('theme')}\n />\n </div>\n </div>\n )\n\n return (\n <>\n {(() => {\n switch (settingsView) {\n case 'main':\n return MainSettings\n case 'microphone':\n return <MicrophoneView />\n case 'audioInput':\n return <AudioView />\n case 'videoInput':\n return <VideoInputView />\n case 'theme':\n return <ThemeView />\n default:\n return MainSettings\n }\n })()}\n <CustomThemedTooltip id='tooltip-close-settings' place='bottom' />\n </>\n )\n}\n\nexport interface SettingsViewProps {}\n\nexport { default as AudioView } from './AudioView'\nexport { default as MicrophoneView } from './MicrophoneView'\nexport { default as ThemeView } from './ThemeView'\nexport { default as VideoInputView } from './VideoInputView'\n"],"names":["_a","useSelector","state","island","settingsView","previousView","t","useTranslation","dispatch","useDispatch","SettingsMenuItem","icon","label","onClick","React","className","createElement","FontAwesomeIcon","faAngleRight","MainSettings","Button","setIslandView","concat","variant","faXmark","faMicrophone","setSettingsView","faVolumeHigh","faVideo","faPalette","Fragment","MicrophoneView","AudioView","VideoInputView","ThemeView","CustomThemedTooltip","id","place"],"mappings":"2hCAuBmD,WAC3C,IAAAA,EAAiCC,EAAAA,YAAY,SAACC,GAAqB,OAAAA,EAAMC,MAAM,GAA7EC,iBAAcC,iBACdC,EAAMC,qBACRC,EAAWC,EAAAA,cAEXC,EAAmB,SAACV,GAAE,IAAAW,SAAMC,EAAKZ,EAAAY,MAAEC,EAAOb,EAAAa,QAAO,OACrDC,EAAAA,gCACED,QAASA,EACTE,UAAU,6OAEVD,EAAAA,QAAKE,cAAA,MAAA,CAAAD,UAAU,oCACbD,EAAC,QAAAE,cAAAC,mBAAgBN,KAAMA,EAAMI,UAAU,kBACvCD,EAAAA,QAAOE,cAAA,OAAA,KAAAJ,IAETE,UAACE,cAAAC,EAAAA,gBAAgB,CAAAN,KAAMO,EAAAA,aAAcH,UAAU,kBATI,EAcjDI,EACJL,EAAAA,QAAKE,cAAA,MAAA,CAAAD,UAAU,iCAEbD,EAAAA,QAAKE,cAAA,MAAA,CAAAD,UAAU,oFACbD,UAAIE,cAAA,KAAA,CAAAD,UAAU,0CAA0CT,EAAE,sBAC1DQ,EAAAA,QAAAE,cAACI,SAAM,CACLP,QAAS,WAAM,OAAAL,EAASL,OAAOkB,cAAc,GAAAC,OAAGjB,GAAgB,QAAjD,EACfkB,QAAQ,sBAAqB,kBACb,yBAAwB,uBAClBjB,EAAE,iBAAmB,IAE3CQ,UAACE,cAAAC,EAAAA,gBAAgB,CAAAN,KAAMa,EAAAA,QAAST,UAAU,oBAK9CD,EAAAA,QAAKE,cAAA,MAAA,CAAAD,UAAU,mEAGfD,EAAAA,QAAKE,cAAA,MAAA,CAAAD,UAAU,+BACbD,EAAC,QAAAE,cAAAN,EACC,CAAAC,KAAMc,eACNb,MAAON,EAAE,wBACTO,QAAS,WAAM,OAAAL,EAASL,OAAOuB,gBAAgB,aAAhC,IAEjBZ,EAAC,QAAAE,cAAAN,EACC,CAAAC,KAAMgB,eACNf,MAAON,EAAE,qBACTO,QAAS,WAAM,OAAAL,EAASL,OAAOuB,gBAAgB,aAAhC,IAEjBZ,EAAC,QAAAE,cAAAN,EACC,CAAAC,KAAMiB,UACNhB,MAAON,EAAE,oBACTO,QAAS,WAAM,OAAAL,EAASL,OAAOuB,gBAAgB,aAAhC,IAEjBZ,UAAAE,cAACN,EAAgB,CACfC,KAAMkB,EAAAA,UACNjB,MAAON,EAAE,kBACTO,QAAS,WAAM,OAAAL,EAASL,OAAOuB,gBAAgB,QAAQ,MAM/D,OACEZ,UAAAE,cAAAF,EAAA,QAAAgB,SAAA,KACG,WACC,OAAQ1B,GACN,IAAK,OAUL,QACE,OAAOe,EATT,IAAK,aACH,OAAOL,UAAAE,cAACe,EAAc,QAAA,MACxB,IAAK,aACH,OAAOjB,UAAAE,cAACgB,EAAS,QAAA,MACnB,IAAK,aACH,OAAOlB,UAAAE,cAACiB,EAAc,QAAA,MACxB,IAAK,QACH,OAAOnB,UAAAE,cAACkB,EAAS,QAAA,MAItB,CAfA,GAgBDpB,UAAAE,cAACmB,EAAAA,oBAAmB,CAACC,GAAG,yBAAyBC,MAAM,WAG7D"}