diff --git a/.gitignore b/.gitignore index ea28a8b5..56386412 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ out *.log* .yarn/install-state.gz yarn.lock +package-lock.json certification *.env test/ diff --git a/package-lock.json b/package-lock.json index 554ae89c..01b71fb8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@nethesis/nethesis-brands-svg-icons": "github:nethesis/Font-Awesome#ns-brands", "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light", "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid", - "@nethesis/phone-island": "^0.8.45", + "@nethesis/phone-island": "^0.10.2", "@tailwindcss/forms": "^0.5.7", "@types/lodash": "^4.14.202", "@types/node": "^18.19.9", @@ -5040,10 +5040,11 @@ } }, "node_modules/@nethesis/phone-island": { - "version": "0.8.45", - "resolved": "https://registry.npmjs.org/@nethesis/phone-island/-/phone-island-0.8.45.tgz", - "integrity": "sha512-csEOTOZpnyyBzViJ1CHdVp5tOwjmUNwZzbkGOKQdjW0QdtHrW2fdQ2RwMUtcrhj+pnPKNTGINO5o9FMt7+CXjA==", + "version": "0.10.2", + "resolved": "https://registry.npmjs.org/@nethesis/phone-island/-/phone-island-0.10.2.tgz", + "integrity": "sha512-6TGt+bDz5rNuVhzJHOGnWiUQ4osvspd4qZO5hLYefd9fRh6t/gzg7/4NVuzlSK4bHrE7uZEzgLykxYTWUQnnug==", "dev": true, + "license": "GPL-3.0-or-later", "dependencies": { "@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/react-fontawesome": "^0.2.0", diff --git a/package.json b/package.json index 2a73677b..e3e50723 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "@nethesis/nethesis-brands-svg-icons": "github:nethesis/Font-Awesome#ns-brands", "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light", "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid", - "@nethesis/phone-island": "^0.8.45", + "@nethesis/phone-island": "^0.10.2", "@tailwindcss/forms": "^0.5.7", "@types/lodash": "^4.14.202", "@types/node": "^18.19.9", diff --git a/src/main/classes/controllers/NetworkController.ts b/src/main/classes/controllers/NetworkController.ts index d06e5f48..f9750c45 100644 --- a/src/main/classes/controllers/NetworkController.ts +++ b/src/main/classes/controllers/NetworkController.ts @@ -8,7 +8,10 @@ export class NetworkController { async post(path: string, data: object | undefined, config: { headers: { Authorization?: string | undefined; 'Content-Type': string; }; } | undefined = { headers: { 'Content-Type': 'application/json' } }): Promise { try { - const response = await axios.post(path, data, config) + const response = await axios.post(path, data, { + timeout: 5000, + ...config + }) return response.data } catch (e: any) { @@ -19,7 +22,10 @@ export class NetworkController { } async get(path: string, config: { headers: { Authorization?: string | undefined; 'Content-Type': string } } | undefined = { headers: { 'Content-Type': 'application/json' } }): Promise { try { - const response = await axios.get(path, config) + const response = await axios.get(path, { + timeout: 5000, + ...config + }) return response.data } catch (e: any) { const err: AxiosError = e diff --git a/src/main/classes/windows/NethLinkWindow.ts b/src/main/classes/windows/NethLinkWindow.ts index fa866557..9eca1fb7 100644 --- a/src/main/classes/windows/NethLinkWindow.ts +++ b/src/main/classes/windows/NethLinkWindow.ts @@ -123,7 +123,7 @@ export class NethLinkWindow extends BaseWindow { super.buildWindow() this._window?.on('hide', this.toggleVisibility) this._window?.on('moved', () => { - this.saveBounds() + debouncer('onMoveNethLinkWindow', () => this.saveBounds(), 1000) }) this._window?.on('show', this.toggleVisibility) this._window?.on('closed', this.toggleVisibility) diff --git a/src/main/lib/ipcEvents.ts b/src/main/lib/ipcEvents.ts index d8f9f5df..1df8f0b4 100644 --- a/src/main/lib/ipcEvents.ts +++ b/src/main/lib/ipcEvents.ts @@ -104,7 +104,7 @@ export function registerIpcEvents() { if (!draggingWindows?.hasOwnProperty(window.title)) { const interval: number = setInterval(() => { updateWindowPosition(window) - }, 1000 / 60) as unknown as number; // => 60 frames per seconds + }, 1000 / 300) as unknown as number; // => 300 frames per seconds draggingWindows = { ...draggingWindows, [window.title]: { diff --git a/src/renderer/index.html b/src/renderer/index.html index 9e5de348..f4c2ab30 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -1,32 +1,21 @@ - - - - - - - - - - - - - - -
- - - + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index f289fafc..67c3821f 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -13,7 +13,7 @@ import { useRegisterStoreHook, useSharedState } from "@renderer/store"; import { PageContext, usePageCtx } from './contexts/pageContext' import { GIT_RELEASES_URL, IPC_EVENTS } from '@shared/constants' import { useNetwork } from '@shared/useNetwork' - +import './index.css' const RequestStateComponent = () => { const pageData = usePageCtx() @@ -66,7 +66,7 @@ const RequestStateComponent = () => { }, [account?.username, pageData?.page]) const loader = async () => { - Log.info('check i18n initialization') + Log.debug('check i18n initialization') let time = 0 //I wait for the language to load or 200 milliseconds while (time < 20 && !i18next.isInitialized) { @@ -119,10 +119,9 @@ const Layout = ({ theme, page }: { theme?: AvailableThemes, page?: PAGES }) => { const importStyle = async () => { // Importing CSS dynamically when the page is not 'PHONEISLAND' - if (page !== PAGES.PHONEISLAND) { - await import('./tailwind.css') + if (page === PAGES.PHONEISLAND) { + await import('@nethesis/phone-island/dist/index.css') } - await import('./index.css') setIsCSSLoaded(true); } @@ -142,7 +141,7 @@ const Layout = ({ theme, page }: { theme?: AvailableThemes, page?: PAGES }) => { export default function App() { useInitialize(() => { - Log.info('initialize i18n') + Log.debug('initialize i18n') loadI18n() }) return ( diff --git a/src/renderer/src/components/ElectronDraggableWindow.tsx b/src/renderer/src/components/ElectronDraggableWindow.tsx index 0eae0c2d..32a8a611 100644 --- a/src/renderer/src/components/ElectronDraggableWindow.tsx +++ b/src/renderer/src/components/ElectronDraggableWindow.tsx @@ -39,12 +39,10 @@ export const ElectronDraggableWindow = ({ children }) => { }; const handleMouseUp = (e: MouseEvent) => { - if (!mouseUpEvent.current) { - mouseDownEvent.current = null - window.electron.send(IPC_EVENTS.STOP_DRAG); - isDrag.current = false - mouseUpEvent.current = e - } + mouseDownEvent.current = null + window.electron.send(IPC_EVENTS.STOP_DRAG); + isDrag.current = false + mouseUpEvent.current = e }; useEffect(() => { @@ -81,7 +79,7 @@ export const ElectronDraggableWindow = ({ children }) => { return (
{children}
diff --git a/src/renderer/src/components/pageComponents/phoneIsland/phoneIslandContainer.tsx b/src/renderer/src/components/pageComponents/phoneIsland/phoneIslandContainer.tsx index 638cab76..37061fa1 100644 --- a/src/renderer/src/components/pageComponents/phoneIsland/phoneIslandContainer.tsx +++ b/src/renderer/src/components/pageComponents/phoneIsland/phoneIslandContainer.tsx @@ -1,14 +1,11 @@ import { PhoneIsland } from "@nethesis/phone-island" -import { eventDispatch } from "@renderer/hooks/eventDispatch" -import { useLoggedNethVoiceAPI } from "@renderer/hooks/useLoggedNethVoiceAPI" import { useSharedState } from "@renderer/store" -import { IPC_EVENTS, PHONE_ISLAND_EVENTS } from "@shared/constants" +import { IPC_EVENTS } from "@shared/constants" import { Log } from "@shared/utils/logger" import { useEffect, useMemo } from "react" -export const PhoneIslandContainer = ({ dataConfig, deviceInformationObject, isDataConfigCreated, i18nLoadPath }) => { +export const PhoneIslandContainer = ({ dataConfig, deviceInformationObject, isDataConfigCreated }) => { const [account] = useSharedState('account') - const { NethVoiceAPI } = useLoggedNethVoiceAPI() useEffect(() => { updateAccountInfo() @@ -17,18 +14,14 @@ export const PhoneIslandContainer = ({ dataConfig, deviceInformationObject, isDa const updateAccountInfo = async () => { if (deviceInformationObject) { Log.info('FORCE DEFAULT DEVICE TO NETHLINK') - //TODO: controlla - if(account?.data?.default_device?.type === 'webrtc') { + if (account?.data?.default_device?.type === 'webrtc') { window.electron.send(IPC_EVENTS.CHANGE_DEFAULT_DEVICE, deviceInformationObject) } - // await NethVoiceAPI.User.default_device(deviceInformationObject) - // eventDispatch(PHONE_ISLAND_EVENTS['phone-island-default-device-change'], { deviceInformationObject }) - } } const PhoneIslandComponent = useMemo(() => { - return dataConfig && isDataConfigCreated && + return dataConfig && isDataConfigCreated && }, [account?.username, dataConfig, isDataConfigCreated]) return PhoneIslandComponent diff --git a/src/renderer/src/hooks/usePhoneIslandEventListeners.ts b/src/renderer/src/hooks/usePhoneIslandEventListeners.ts index 43912b87..b529fe42 100644 --- a/src/renderer/src/hooks/usePhoneIslandEventListeners.ts +++ b/src/renderer/src/hooks/usePhoneIslandEventListeners.ts @@ -1,18 +1,30 @@ -import { IPC_EVENTS, PHONE_ISLAND_EVENTS, getPhoneIslandSize } from "@shared/constants" -import { PhoneIslandData, PhoneIslandSizes, PhoneIslandView } from "@shared/types" +import { + IPC_EVENTS, PHONE_ISLAND_EVENTS, +} from "@shared/constants" +import { + PhoneIslandData, + PhoneIslandSizes, +} from "@shared/types" import { Log } from "@shared/utils/logger" -import { useEffect, useState } from "react" +import { useState } from "react" import { t } from "i18next" import { sendNotification } from "@renderer/utils" import { useSharedState } from "@renderer/store" +const defaultSize: PhoneIslandSizes = { + sizes: { + width: '0px', + height: '0px' + } +} const defaultCall = { accepted: false, incoming: false, outgoing: false, transferring: false } + export const usePhoneIslandEventListener = () => { const [account] = useSharedState('account') const [connected, setConnected] = useSharedState('connection') @@ -27,7 +39,7 @@ export const usePhoneIslandEventListener = () => { isOpen: true, view: null }) - const [phoneIsalndSizes, setPhoneIslandSized] = useState(getPhoneIslandSize(phoneIslandData)) + const [phoneIsalndSizes, setPhoneIslandSizes] = useState(defaultSize) const eventHandler = (event: PHONE_ISLAND_EVENTS, callback?: (data?: any) => void | Promise) => ({ @@ -39,31 +51,20 @@ export const usePhoneIslandEventListener = () => { } }) - useEffect(() => { - const a = getPhoneIslandSize(phoneIslandData) - Log.info('state', phoneIslandData, a) - setPhoneIslandSized(() => ({ ...a })) - }, [phoneIslandData]) - return { state: phoneIslandData, phoneIsalndSizes, events: { + //SIZE CHANGE + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-size-changed"], (data) => { + setPhoneIslandSizes(() => ({ ...data })) + }), //CALLS ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-action-physical"], async (data) => { - //const res = await GET(data.urlCallObject.url) window.electron.send(IPC_EVENTS.START_CALL_BY_URL, data.urlCallObject.url) Log.info('phone-island-action-physical', data.urlCallObject.url) }), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-ringing"], () => { - setPhoneIslandData((p) => ({ - ...p, currentCall: { - ...p.currentCall, - incoming: true - }, - view: PhoneIslandView.CALL - })) - }), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-ringing"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-hold"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-held"]), @@ -82,15 +83,7 @@ export const usePhoneIslandEventListener = () => { }), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-answer"]), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-answered"], () => { - setPhoneIslandData((p) => ({ - ...p, currentCall: { - ...p.currentCall, - accepted: true - }, - view: PhoneIslandView.CALL - })) - }), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-answered"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-audio-input-switch"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-audio-input-switched"]), @@ -98,26 +91,9 @@ export const usePhoneIslandEventListener = () => { ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-audio-output-switched"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-start"]), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-started"], () => { - setPhoneIslandData((p) => ({ - ...p, - currentCall: { - ...p.currentCall, - outgoing: true - }, - view: PhoneIslandView.CALL - })) - }), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-started"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-end"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-ended"], () => { - setPhoneIslandData((p) => ({ - ...p, - currentCall: { - ...defaultCall - }, - view: null - })) - //generate lost calls window.electron.send(IPC_EVENTS.EMIT_CALL_END) }), @@ -125,19 +101,9 @@ export const usePhoneIslandEventListener = () => { ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-intruded"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-keypad-close"]), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-keypad-closed"], () => { - setPhoneIslandData((p) => ({ - ...p, - view: PhoneIslandView.CALL - })) - }), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-keypad-closed"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-keypad-open"]), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-keypad-opened"], () => { - setPhoneIslandData((p) => ({ - ...p, - view: PhoneIslandView.KEYPAD - })) - }), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-keypad-opened"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-keypad-send"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-keypad-sent"]), @@ -152,58 +118,24 @@ export const usePhoneIslandEventListener = () => { ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-park"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-parked"]), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfered"], () => { - setPhoneIslandData((p) => ({ - ...p, - currentCall: { - ...p.currentCall, - transferring: true - }, - view: PhoneIslandView.CALL - })) - }), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfered"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-cancel"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-canceled"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-close"]), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-closed"], () => { - setPhoneIslandData((p) => ({ - ...p, - currentCall: { - ...p.currentCall, - transferring: false - }, - view: PhoneIslandView.CALL - })) - }), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-failed"], () => { - setPhoneIslandData((p) => ({ - ...p, - currentCall: { - ...p.currentCall, - transferring: false - }, - view: PhoneIslandView.CALL - })) - }), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-closed"]), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-failed"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-open"]), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-opened"], () => { - setPhoneIslandData((p) => ({ - ...p, - currentCall: { - ...p.currentCall, - transferring: false - }, - view: PhoneIslandView.TRANSFER - })) - }), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-opened"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-successfully"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-successfully-popup-close"]), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-successfully-popup-open"], () => { - sendNotification( - t('Notification.call_transferred_title'), - t('Notification.call_transferred_body') - ) - }), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-successfully-popup-open"], + () => { + sendNotification( + t('Notification.call_transferred_title'), + t('Notification.call_transferred_body') + ) + } + ), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-switch"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-call-transfer-switched"]), @@ -224,20 +156,10 @@ export const usePhoneIslandEventListener = () => { ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-audio-player-started"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-compress"]), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-compressed"], () => { - setPhoneIslandData((p) => ({ - ...p, - isOpen: false - })) - }), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-compressed"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-expand"]), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-expanded"], () => { - setPhoneIslandData((p) => ({ - ...p, - isOpen: true - })) - }), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-expanded"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-conversations"]), @@ -266,12 +188,7 @@ export const usePhoneIslandEventListener = () => { }), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-recording-close"]), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-recording-closed"], () => { - setPhoneIslandData((p) => ({ - ...p, - view: PhoneIslandView.CALL - })) - }), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-recording-closed"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-recording-delete"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-recording-deleted"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-recording-open"]), @@ -288,54 +205,14 @@ export const usePhoneIslandEventListener = () => { ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-recording-stopped"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-server-disconnected"]), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-server-reloaded"], () => { - setPhoneIslandData((p) => ({ - ...p, - activeAlerts: { - ...p.activeAlerts, - ['server-disconnected']: false - } - })) - }), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-server-reloaded"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-socket-connected"], () => { setConnected(true) - setPhoneIslandData((p) => ({ - ...p, - activeAlerts: {}, - currentCall: { - ...defaultCall - }, - view: null - })) - }), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-socket-disconnected"], () => { - setPhoneIslandData((p) => ({ - ...p, - activeAlerts: { - ...p.activeAlerts, - ['socket-disconnected']: true - } - })) - }), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-socket-disconnected-popup-close"], () => { - setPhoneIslandData((p) => ({ - ...p, - activeAlerts: { - ...p.activeAlerts, - ['socket-disconnected']: false - }, - })) - }), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-socket-disconnected-popup-open"], () => { - setPhoneIslandData((p) => ({ - ...p, - activeAlerts: { - ...p.activeAlerts, - ['socket-disconnected']: true - } - })) }), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-socket-disconnected"]), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-socket-disconnected-popup-close"]), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-socket-disconnected-popup-open"]), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-socket-reconnected"], () => { window.electron.send(IPC_EVENTS.RECONNECT_SOCKET) }), @@ -356,16 +233,7 @@ export const usePhoneIslandEventListener = () => { window.api.logout() }), ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-webrtc-registered"]), - ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-all-alerts-removed"], () => { - setPhoneIslandData((p) => ({ - ...p, - activeAlerts: {}, - currentCall: { - ...defaultCall - }, - view: null - })) - }), + ...eventHandler(PHONE_ISLAND_EVENTS["phone-island-all-alerts-removed"]), } } } diff --git a/src/renderer/src/index.css b/src/renderer/src/index.css index 135ff4a6..95f01d4b 100644 --- a/src/renderer/src/index.css +++ b/src/renderer/src/index.css @@ -1,14 +1,45 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + html { + font-family: 'Poppins', system-ui, sans-serif; + @apply h-full; + } + + body { + @apply h-full overflow-hidden; + @apply select-none; + } +} + +#root { + @apply h-full; +} + +#__next { + @apply h-full; +} + #app-container { #phone-island-container { + .draggableAnchor, .pi-absolute, .pi-pointer-events-auto { transform: none !important; } + + + input::placeholder { + font-size: 14px; + opacity: 1; + } } - #phone-island-container [id^="headlessui-menu-items-"]{ + #phone-island-container [id^="headlessui-menu-items-"] { position: relative; margin-inline: 0; margin-block: 0; @@ -54,11 +85,4 @@ * { outline-color: transparent !important; -} -.pi-bg-green-400 { - background-color: rgb(74, 222, 128); -} - -.pi-text-green-500 { - color: rgb(34, 197, 94); -} +} \ No newline at end of file diff --git a/src/renderer/src/pages/PhoneIslandPage.tsx b/src/renderer/src/pages/PhoneIslandPage.tsx index fe5ef8ca..64575505 100644 --- a/src/renderer/src/pages/PhoneIslandPage.tsx +++ b/src/renderer/src/pages/PhoneIslandPage.tsx @@ -2,10 +2,10 @@ import { eventDispatch } from '@renderer/hooks/eventDispatch' import { getI18nLoadPath } from '@renderer/lib/i18n' import { useSharedState } from '@renderer/store' import { IPC_EVENTS, PHONE_ISLAND_EVENTS, } from '@shared/constants' -import { Extension, PhoneIslandData, PhoneIslandView, Size } from '@shared/types' +import { Extension, PhoneIslandSizes, sizeInformationType } from '@shared/types' import { Log } from '@shared/utils/logger' -import { debouncer, delay, isDev } from '@shared/utils/utils' -import { useState, useRef, useEffect } from 'react' +import { delay, isDev } from '@shared/utils/utils' +import { useState, useRef, useEffect, useMemo, useCallback } from 'react' import { ElectronDraggableWindow } from '@renderer/components/ElectronDraggableWindow' import { usePhoneIsland } from '@renderer/hooks/usePhoneIsland' import { PhoneIslandContainer } from '@renderer/components/pageComponents/phoneIsland/phoneIslandContainer' @@ -15,7 +15,7 @@ import { useLoggedNethVoiceAPI } from '@renderer/hooks/useLoggedNethVoiceAPI' export function PhoneIslandPage() { const [account] = useSharedState('account') const [dataConfig, setDataConfig] = useState(undefined) - const { state, phoneIsalndSizes, events } = usePhoneIslandEventListener() + const { phoneIsalndSizes, events } = usePhoneIslandEventListener() const { createDataConfig, dispatchAndWait } = usePhoneIsland() const { NethVoiceAPI } = useLoggedNethVoiceAPI() @@ -23,17 +23,14 @@ export function PhoneIslandPage() { const isDataConfigCreated = useRef(false) const loadPath = useRef(undefined) const phoneIslandContainer = useRef(null) + const innerPIContainer = useRef(null) const isOnLogout = useRef(false) const eventsRef = useRef<{ [x: string]: (...data: any[]) => void; }>(events) const attachedListener = useRef(false) - const lastSize = useRef() useEffect(() => { - debouncer('phoneisland-resize', () => { - Log.info('RESIZE') - resize(phoneIsalndSizes.size, state) - }, 50) - }, [phoneIsalndSizes, state]) + resize(phoneIsalndSizes) + }, [phoneIsalndSizes]) useInitialize(() => { Log.info('INITIALIZE PHONE ISLAND BASE EVENTS') @@ -73,17 +70,37 @@ export function PhoneIslandPage() { }) }) - const resize = (size: Size, state: PhoneIslandData) => { - if (!isOnLogout.current && (lastSize.current?.w !== size.w || lastSize.current?.h !== size.h)) { - lastSize.current = size - const { view } = state - Log.info(`RESIZE ${size.w}x${size.h} ${account?.username} ${view}`) - if (view === PhoneIslandView.KEYPAD || view === PhoneIslandView.TRANSFER || state.currentCall.transferring) { - phoneIslandContainer.current?.children[1].setAttribute('style', 'height: calc(100vh + 40px); position: relative;') - } else if (view === PhoneIslandView.CALL) { - phoneIslandContainer.current?.children[1].setAttribute('style', '') + const resize = (phoneIsalndSize: PhoneIslandSizes) => { + if (!isOnLogout.current) { + const { width, height, top, bottom, left, right } = phoneIsalndSize.sizes + const w = Number(width.replace('px', '')) + const h = Number(height.replace('px', '')) + const r = Number((right ?? '0px').replace('px', '')) + const t = Number((top ?? '0px').replace('px', '')) + const l = Number((left ?? '0px').replace('px', '')) + const b = Number((bottom ?? '0px').replace('px', '')) + const data = { + width, + height, + + bottom: bottom ?? '0px', + top: top ?? '0px', + right: right ?? '0px', + left: left ?? '0px', } - window.api.resizePhoneIsland(size) + phoneIslandContainer.current?.setAttribute('style', ` + width: calc(100vw + ${data.right} + ${data.left}); + height: calc(100vh + ${data.top} + ${data.bottom}); + `) + + innerPIContainer.current?.setAttribute('style', ` + margin-left: calc(${data.left} - ${data.right}); + `) //calc(${data.top} - ${data.bottom}) + + window.api.resizePhoneIsland({ + w: w + r + l, + h: h + t + b + }) } } @@ -140,15 +157,6 @@ export function PhoneIslandPage() {
-
- {account && } +
+ {account && }
diff --git a/src/renderer/src/tailwind.css b/src/renderer/src/tailwind.css deleted file mode 100644 index 6a5312cf..00000000 --- a/src/renderer/src/tailwind.css +++ /dev/null @@ -1,16 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - - -@layer base { - #root { - @apply h-full; - } - - html, - body { - @apply h-full; - @apply select-none; - } -} diff --git a/src/shared/constants.ts b/src/shared/constants.ts index 02ec0b91..ef8ef1bb 100644 --- a/src/shared/constants.ts +++ b/src/shared/constants.ts @@ -91,6 +91,7 @@ export enum IPC_EVENTS { export enum PHONE_ISLAND_EVENTS { // Listen Phone-Island Events: phone-island* + "phone-island-size-changed" = "phone-island-size-changed", 'phone-island-attach' = 'phone-island-attach', 'phone-island-detach' = 'phone-island-detach', 'phone-island-audio-input-change' = 'phone-island-audio-input-change', @@ -209,271 +210,3 @@ export enum PHONE_ISLAND_EVENTS { // Alerts 'phone-island-all-alerts-removed' = 'phone-island-all-alerts-removed' } - -const topbarHeight = 40 -const windowSpacing = { - w: 2, - h: 2 -} -const phoneIslandSizes = { - padding_expanded: 24, - alert_padding_expanded: 2, - padding_x_collapsed: 8, - padding_y_collapsed: 16, - border_radius_expanded: 20, - border_radius_collapsed: 99, - variants: { - // Call View - call: { - expanded: { - incoming: { - width: 418, - height: 96, - }, - outgoing: { - width: 418, - height: 96, - }, - accepted: { - width: 348, - height: 236, - actionsExpanded: { - width: 348, - height: 304, - }, - }, - listening: { - width: 348, - height: 168, - }, - transfer: { - width: 348, - height: 236 + topbarHeight, - actionsExpanded: { - width: 348, - height: 304 + topbarHeight, - }, - }, - }, - collapsed: { - width: 168, - height: 40, - transfer: { - width: 168, - height: 40 + topbarHeight, - }, - }, - }, - // Keypad View - keypad: { - expanded: { - width: 338, - height: 400 + topbarHeight, - }, - collapsed: { - width: 168, - height: 40, - }, - }, - // Transfer View - transfer: { - expanded: { - width: 408, - height: 410 + topbarHeight, - }, - collapsed: { - width: 168, - height: 40, - }, - }, - // Audio Player View - player: { - expanded: { - width: 374, - height: 236, - }, - collapsed: { - width: 168, - height: 40, - }, - }, - // Recorder View - recorder: { - expanded: { - width: 374, - height: 256, - }, - collapsed: { - width: 168, - height: 40, - }, - }, - // Physical Recorder View - physicalPhoneRecorder: { - expanded: { - width: 374, - height: 256, - }, - collapsed: { - width: 168, - height: 40, - }, - }, - // Alerts Section - alerts: { - width: 418, - height: 92, - }, - }, -} - -export function getPhoneIslandSize({ view, activeAlerts, isOpen, isListen, isActionExpanded, currentCall }: PhoneIslandData): PhoneIslandSizes { - const { accepted, transferring, incoming, outgoing } = currentCall - // Initial size - let size = { - width: 0, - height: 0, - } - const { variants, alert_padding_expanded, border_radius_collapsed, border_radius_expanded, padding_expanded, padding_x_collapsed, padding_y_collapsed } = phoneIslandSizes - if (view) { - switch (view) { - case 'call': - if (isOpen) { - if (accepted && transferring) { - if (isActionExpanded) { - size = { - width: variants.call.expanded.transfer.actionsExpanded.width, - height: variants.call.expanded.transfer.actionsExpanded.height, - } - } else { - size = { - width: variants.call.expanded.transfer.width, - height: variants.call.expanded.transfer.height, - } - } - } else if (accepted && isActionExpanded) { - size = { - width: variants.call.expanded.accepted.actionsExpanded.width, - height: variants.call.expanded.accepted.actionsExpanded.height, - } - } else if (accepted && !isListen) { - size = { - width: variants.call.expanded.accepted.width, - height: variants.call.expanded.accepted.height, - } - } else if (accepted && isListen) { - size = { - width: variants.call.expanded.listening.width, - height: variants.call.expanded.listening.height, - } - } else if (incoming) { - size = { - width: variants.call.expanded.incoming.width, - height: variants.call.expanded.incoming.height, - } - } else if (outgoing) { - size = { - width: variants.call.expanded.outgoing.width, - height: variants.call.expanded.outgoing.height, - } - } - } else { - if (accepted && transferring) { - size = { - width: variants.call.collapsed.transfer.width, - height: variants.call.collapsed.transfer.height, - } - } else { - size = { - width: variants.call.collapsed.width, - height: variants.call.collapsed.height, - } - } - } - break - case 'keypad': - if (isOpen) { - size = { - width: variants.keypad.expanded.width, - height: variants.keypad.expanded.height, - } - } else { - size = { - width: variants.transfer.collapsed.width, - height: variants.transfer.collapsed.height, - } - } - break - case 'transfer': - if (isOpen) { - size = { - width: variants.transfer.expanded.width, - height: variants.transfer.expanded.height, - } - } else { - size = { - width: variants.transfer.collapsed.width, - height: variants.transfer.collapsed.height, - } - } - break - case 'player': - if (isOpen) { - size = { - width: variants.player.expanded.width, - height: variants.player.expanded.height, - } - } else { - size = { - width: variants.player.collapsed.width, - height: variants.player.collapsed.height, - } - } - break - case 'recorder': - if (isOpen) { - size = { - width: variants.recorder.expanded.width, - height: variants.recorder.expanded.height, - } - } else { - size = { - width: variants.recorder.collapsed.width, - height: variants.recorder.collapsed.height, - } - } - break - case 'physicalPhoneRecorder': - if (isOpen) { - size = { - width: variants.physicalPhoneRecorder.expanded.width, - height: variants.physicalPhoneRecorder.expanded.height, - } - } else { - size = { - width: variants.physicalPhoneRecorder.collapsed.width, - height: variants.physicalPhoneRecorder.collapsed.height, - } - } - break - } - } - const isAlert = Object.values(activeAlerts).reduce((p, c) => c ? ++p : p, 0) > 0 - //add electron window padding - if (size.width) size.width += windowSpacing.w - if (size.height) size.height += windowSpacing.h - return { - size: { - w: size.width === 0 && isAlert ? variants.alerts.width : size.width, - h: - // If there is an alert and the island is open put the correct height - isAlert && isOpen - ? variants.alerts.height + (size.height === 0 ? alert_padding_expanded * 2 : alert_padding_expanded) - : size.height - }, - borderRadius: isOpen ? border_radius_expanded : border_radius_collapsed, - padding: isOpen - ? `${padding_expanded}px` - : `${padding_x_collapsed}px ${padding_y_collapsed}px`, - } -} diff --git a/src/shared/types.ts b/src/shared/types.ts index 77d46993..1ef053b4 100644 --- a/src/shared/types.ts +++ b/src/shared/types.ts @@ -470,11 +470,17 @@ export type PhoneIslandData = { outgoing: boolean } } +export type sizeInformationType = { + width: string, + height: string, + top?: string + bottom?: string + left?: string + right?: string +} export type PhoneIslandSizes = { - size: Size; - borderRadius: number; - padding: string; + sizes: sizeInformationType } export enum PhoneIslandView { diff --git a/src/shared/utils/logger.ts b/src/shared/utils/logger.ts index 7ada4992..f21db473 100644 --- a/src/shared/utils/logger.ts +++ b/src/shared/utils/logger.ts @@ -37,6 +37,10 @@ export class Log { Log.log(console.info, 'INFO', message, ...optionalParams) } + static debug(message?: any, ...optionalParams: any[]) { + Log.log(console.debug, 'DEBUG', message, ...optionalParams) + } + static warning(message?: any, ...optionalParams: any[]) { Log.log(console.warn, 'WARNING', message, ...optionalParams) } diff --git a/tailwind.config.js b/tailwind.config.js index 426a72d5..7654e387 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,7 +4,6 @@ export default { content: [ './src/renderer/index.html', './src/**/*.{js,jsx,ts,tsx}', - './node_modules/@nethesis/phone_island/**/*.{js,jsx,ts,tsx}' ], theme: { extend: { diff --git a/tsconfig.node.json b/tsconfig.node.json index db05660f..de4dc81a 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -11,6 +11,7 @@ "node_modules" ], "compilerOptions": { + "esModuleInterop": true, "noUnusedLocals": false, "noUnusedParameters": false, "noImplicitReturns": false, @@ -29,4 +30,4 @@ ], } } -} +} \ No newline at end of file