feat: created new settings view (#77)

.storybook/preview.js

@@ -1,7 +1,39 @@
-// Copyright (C) 2024 Nethesis S.r.l.
+// Copyright (C) 2025 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import '../src/index.css'
+import i18next from 'i18next'
+import Backend from 'i18next-http-backend'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import { initReactI18next } from 'react-i18next'
+
+import translationIT from '../public/locales/it/translation.json'
+import translationEN from '../public/locales/en/translation.json'
+
+i18next
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      it: {
+        translation: translationIT,
+      },
+      en: {
+        translation: translationEN,
+      },
+    },
+    lng: 'it',
+    fallbackLng: ['en'],
+    load: 'languageOnly',
+    debug: true,
+    interpolation: {
+      escapeValue: false,
+    },
+    detection: {
+      order: ['navigator'],
+    },
+  })
 
 export const parameters = {
   layout: 'fullscreen',

docs/EVENTS.md

@@ -903,3 +903,47 @@ eventDispatch(`<event-name>`, `<data-object>`)
   ```json
   {}
   ```
+
+## Debug events
+
+- `phone-island-view-changed` Force to change phone-island view
+
+  ```json
+  {"viewType": "call"}
+  ```
+
+- `phone-island-call-status` Retrieve all informations about call
+
+  ```json
+  {}
+  ```
+
+- `phone-island-user-status` Retrieve all informations about main user
+
+  ```json
+  {}
+  ```
+
+- `phone-island-status` Retrieve all information about phone island
+
+  ```json
+  {}
+  ```
+
+- `phone-island-webrtc-status` Retrieve all information about webrtc
+
+  ```json
+  {}
+  ```
+
+- `phone-island-player-status` Retrieve all information about audio player
+
+  ```json
+  {}
+  ```
+
+- `phone-island-player-force-stop` Force to stop all audio
+
+  ```json
+  {}
+  ```

public/locales/en/translation.json

@@ -9,7 +9,9 @@
     "Close the call to stop recording": "Close the call to stop recording",
     "Search or type a contact": "Search or type a contact",
     "Enter a phone number": "Enter a phone number",
-    "Physical phone": "Physical phone"
+    "Physical phone": "Physical phone",
+    "Close": "Close",
+    "Back":"Back"
   },
   "Tooltip": {
     "Hangup": "Hangup",
@@ -36,14 +38,11 @@
     "Record": "Record",
     "Stop recording": "Stop recording",
     "Recording": "Recording",
-    "Interrupt recording": "Interrupt recording"
-  },
-  "DropdownContent": {
-    "Microphones": "MICROPHONES",
-    "Speakers": "SPEAKERS",
-    "Theme": "THEME",
-    "Dark": "Dark",
-    "Light": "Light"
+    "Interrupt recording": "Interrupt recording",
+    "Other actions": "Other actions",
+    "Conference": "Add participant for conference call",
+    "Go to settings": "Go to settings",
+    "Enable camera": "Enable camera"
   },
   "Call": {
     "In progress...": "In progress...",
@@ -71,5 +70,13 @@
     "Unknown audio or camera permissions.": "Microphone or Webcam is unavailable",
     "No microphone or camera permissions.": "You must accept borwser permissions.",
     "Call transferred successfully.": "The call is transferred successfully."
+  },
+  "Settings": {
+    "Theme": "Theme",
+    "Dark": "Dark",
+    "Light": "Light",
+    "Speakers": "Speakers",
+    "Microphones": "Microphones",
+    "Settings": "Settings"
   }
 }

public/locales/it/translation.json

@@ -9,7 +9,9 @@
     "Close the call to stop recording": "Chiudi la chiamata per fermare la registrazione",
     "Search or type a contact": "Cerca o digita un contatto",
     "Enter a phone number": "Inserisci un numero di telefono",
-    "Physical phone": "Telefono fisso"
+    "Physical phone": "Telefono fisso",
+    "Close": "Chiudi",
+    "Back":"Indietro"
   },
   "Tooltip": {
     "Hangup": "Chiudi",
@@ -36,14 +38,11 @@
     "Record": "Registra",
     "Stop recording": "Ferma registrazione",
     "Recording": "Registrando",
-    "Interrupt recording": "Interrompi registrazione"
-  },
-  "DropdownContent": {
-    "Microphones": "MICROFONI",
-    "Speakers": "ALTOPARLANTI",
-    "Theme": "TEMA",
-    "Dark": "Scuro",
-    "Light": "Chiaro"
+    "Interrupt recording": "Interrompi registrazione",
+    "Other actions": "Altre azioni",
+    "Conference": "Aggiungi partecipante per chiamata in conferenza",
+    "Go to settings": "Vai alle impostazioni",
+    "Enable camera": "Abilita video"
   },
   "Call": {
     "In progress...": "In corso...",
@@ -71,5 +70,13 @@
     "Unknown audio or camera permissions.": "Microfono o fotocamera non disponibili.",
     "No microphone or camera permissions.": "Devi accettare i permessi del browser.",
     "Call transferred successfully.": "La chiamata è stata trasferita con successo."
+  },
+  "Settings": {
+    "Theme": "Tema",
+    "Dark": "Scuro",
+    "Light": "Chiaro",
+    "Speakers": "Altoparlanti",
+    "Microphones": "Microfoni",
+    "Settings": "Impostazioni"
   }
 }

src/App.tsx

@@ -128,6 +128,11 @@ export const PhoneIsland: FC<PhoneIslandProps> = ({
     eventDispatch('phone-island-presence-changed', {})
   })
 
+  useEventListener('phone-island-view-changed', (data) => {
+    const viewType = data?.viewType
+    store.dispatch.island.setIslandView(viewType)
+  })
+
   const [firstRenderI18n, setFirstRenderI18n] = useState(true)
   const [firstAudioOutputInit, setFirstAudioOutputInit] = useState(true)
 
@@ -214,6 +219,36 @@ export const PhoneIsland: FC<PhoneIslandProps> = ({
     }
   })
 
+  useEventListener('phone-island-call-status', () => {
+    const callInformation = store.getState().currentCall
+    console.log('Call status debug informations: ', callInformation)
+  })
+
+  useEventListener('phone-island-user-status', () => {
+    const userInformation = store.getState().currentUser
+    console.log('User status debug informations: ', userInformation)
+  })
+
+  useEventListener('phone-island-status', () => {
+    const phoneIslandInformation = store.getState().island
+    console.log('Phone island status debug informations: ', phoneIslandInformation)
+  })
+
+  useEventListener('phone-island-webrtc-status', () => {
+    const webrtcInformation = store.getState().webrtc
+    console.log('Webrtc status debug informations: ', webrtcInformation)
+  })
+
+  useEventListener('phone-island-player-status', () => {
+    const playerInformation = store.getState().player
+    console.log('Player status debug informations: ', playerInformation)
+  })
+
+  useEventListener('phone-island-player-force-stop', () => {
+    store.dispatch.player.reset()
+    console.log('Audio player is interrupted')
+  })
+
   return (
     <>
       <Provider store={store}>

src/components/AudioPlayerView/index.tsx

@@ -69,9 +69,9 @@ export const KeypadView: FC<KeypadViewTypes> = () => {
               data-tooltip-content={audioPlayerPlaying ? `${t('Tooltip.Pause')}` : `${t('Tooltip.Play')}`}
             >
               {audioPlayerPlaying ? (
-                <FontAwesomeIcon icon={faPause} size='xl' />
+                <FontAwesomeIcon icon={faPause} className='pi-h-6 pi-w-6' />
               ) : (
-                <FontAwesomeIcon icon={faPlay} size='xl' />
+                <FontAwesomeIcon icon={faPlay} className='pi-h-6 pi-w-6' />
               )}
             </Button>
           </div>

src/components/Button.tsx

@@ -6,7 +6,14 @@ import { classNames } from '../utils'
 
 interface ButtonProps extends ComponentPropsWithRef<'button'> {
   children: ReactNode
-  variant: 'red' | 'green' | 'default' | 'neutral' | 'transparent'
+  variant:
+    | 'red'
+    | 'green'
+    | 'default'
+    | 'neutral'
+    | 'transparent'
+    | 'transparentSideView'
+    | 'transparentSettings'
   active?: boolean
 }
 
@@ -18,16 +25,21 @@ export const Button: FC<ButtonProps> = ({
   ...props
 }) => {
   const classes = {
-    base: 'pi-flex pi-font-light pi-content-center pi-items-center pi-justify-center pi-tracking-wide pi-duration-200 pi-transform pi-outline-none focus:pi-ring-2 focus:pi-z-20 focus:pi-ring-offset-2 disabled:pi-opacity-75 pi-border pi-border-transparent focus:pi-ring-offset-white dark:focus:pi-ring-offset-black pi-rounded-full pi-text-sm pi-leading-4 pi-h-12 pi-w-12 pi-col-start-auto pi-transition-color pi-shrink-0',
+    base: 'pi-flex pi-font-light pi-content-center pi-items-center pi-justify-center pi-tracking-wide pi-duration-200 pi-transform pi-outline-none focus:pi-ring-2 focus:pi-z-20 focus:pi-ring-offset-2 disabled:pi-opacity-75 pi-border pi-border-transparent focus:pi-ring-offset-white dark:focus:pi-ring-offset-black pi-text-sm pi-leading-4 pi-col-start-auto pi-transition-color pi-shrink-0',
     variant: {
-      red: 'dark:pi-bg-red-500 pi-bg-red-700 hover:pi-bg-red-700 dark:hover:pi-bg-red-300 focus:pi-ring-emerald-500 dark:focus:ring-emerald-300 pi-text-white dark:pi-text-gray-950',
-      green: 'pi-bg-green-700 dark:pi-bg-green-500 hover:pi-bg-green-600 dark:hover:pi-bg-green-300 focus:pi-ring-green-500 focus:dark:pi-ring-200 pi-text-white dark:pi-text-gray-950',
+      red: 'dark:pi-bg-red-500 pi-bg-red-700 hover:pi-bg-red-700 dark:hover:pi-bg-red-300 focus:pi-ring-emerald-500 dark:focus:ring-emerald-300 pi-text-white dark:pi-text-gray-950 pi-h-12 pi-w-12 pi-rounded-full',
+      green:
+        'pi-bg-green-700 dark:pi-bg-green-500 hover:pi-bg-green-600 dark:hover:pi-bg-green-300 focus:pi-ring-green-500 focus:dark:pi-ring-200 pi-text-white dark:pi-text-gray-950 pi-h-12 pi-w-12 pi-rounded-full',
       default:
-        'hover:pi-bg-gray-500 dark:hover:pi-bg-gray-50 focus:pi-ring-emerald-500 dark:focus:pi-ring-emerald-300 pi-text-white dark:pi-text-gray-950',
+        'hover:pi-bg-gray-500 dark:hover:pi-bg-gray-50 focus:pi-ring-emerald-500 dark:focus:pi-ring-emerald-300 pi-text-white dark:pi-text-gray-950 pi-h-12 pi-w-12 pi-rounded-full',
       neutral:
-        'pi-bg-transparent enabled:hover:pi-bg-gray-500 enabled:hover:pi-border-gray-500 pi-border pi-border-gray-700 focus:pi-ring-0',
+        'pi-bg-transparent enabled:hover:pi-bg-gray-500 enabled:hover:pi-border-gray-500 pi-border pi-border-gray-700 focus:pi-ring-0 pi-h-12 pi-w-12 pi-rounded-full',
       transparent:
-        'pi-bg-transparent dark:enabled:hover:pi-bg-gray-600/30 enabled:hover:pi-bg-gray-200/70 focus:pi-ring-offset-gray-200 dark:focus:pi-ring-gray-500 dark:focus:pi-ring-gray-500 focus:pi-ring-gray-400 dark:pi-text-white',
+        'pi-bg-transparent dark:enabled:hover:pi-bg-gray-600/30 enabled:hover:pi-bg-gray-200/70 focus:pi-ring-offset-gray-200 dark:focus:pi-ring-gray-500 dark:focus:pi-ring-gray-500 focus:pi-ring-gray-400 dark:pi-text-white pi-h-12 pi-w-12 pi-rounded-full',
+      transparentSideView:
+        'pi-bg-transparent dark:enabled:hover:pi-bg-gray-600 enabled:hover:pi-bg-gray-600 focus:pi-ring-offset-gray-200 dark:focus:pi-ring-gray-500 dark:focus:pi-ring-gray-500 focus:pi-ring-gray-400 dark:pi-text-white pi-h-8 pi-w-8 pi-rounded',
+      transparentSettings:
+        'pi-bg-transparent dark:hover:pi-bg-gray-600 hover:pi-bg-gray-300 focus:pi-ring-offset-gray-200 dark:focus:pi-ring-gray-500 dark:focus:pi-ring-gray-500 focus:pi-ring-gray-400 dark:pi-text-white pi-h-8 pi-w-8 pi-rounded',
     },
     background: {
       base: {