Skip to content

B
BoxDialer
Commit 01b0ebfd authored by Muhammadali's avatar Muhammadali
Browse files
Options

update-

parent 7b1d3bf6
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 730 additions and 298 deletions
src/components/MiniTable/index.jsx 0 → 100644
View file @ 01b0ebfd
import React from 'react'
import TableBlock from "./style"
// id, title, inputTag, type: 'row' || 'column'
const MiniTable = ({
data,
gap = '5px'
}) => {
return (<TableBlock gap={gap}>
{data?.map(({id, title, inputTag, type, child, gap}) => (
<TableBlock.Row id={id} gap={gap}>
<TableBlock.RowInset blockType={type}>
<p className={'title'}>{title}</p>
<div className={'inputArea'}>{inputTag}</div>
</TableBlock.RowInset>
{
child && <div className={'child'}>{child}</div>
}
</TableBlock.Row>
))}
</TableBlock>)
}
export default MiniTable
src/components/MiniTable/style.js 0 → 100644
View file @ 01b0ebfd
import styled from 'styled-components'
const TableBlock = styled.div`
display: flex;
flex-direction: column;
gap: ${({gap}) => gap ? gap : '3px'};
width: 100%;
`
TableBlock.Row = styled.div`
width: 100%;
border-bottom: 1px solid #333;
display: flex;
flex-direction: column;
gap: ${({gap})=> gap ? gap : '3px'};
.child{
width: 100%;
}
`
TableBlock.RowInset = styled.div`
${({blockType}) => blockType === 'row' ? {
display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '5px'
} : {
display: 'flex', flexDirection: 'column'
}}
.title {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: initial;
margin: 0;
padding: 0;
}
.inputArea {
display: flex;
justify-content: center;
margin: 0;
padding: 0;
box-sizing: border-box;
}
`
export default TableBlock
src/components/Modal/index.jsx
View file @ 01b0ebfd
......@@ -24,6 +24,7 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
const [transferModel, setTransferModel] = useState(true);
const [numpadModal, setNumpadModal] = useState(false);
console.log('callType_modal: ', callType)
useEffect(() => {
setModalHidden(hidden);
......
src/components/ModalPhoneNumpad/index.jsx
View file @ 01b0ebfd
This diff is collapsed.
src/components/ModalPhoneNumpad/style.js
View file @ 01b0ebfd
......@@ -5,12 +5,11 @@ import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
const ModalPhoneNumpadStyle = styled.div`
box-shadow: 0px 0px 20px #00000047;
box-shadow: 0 0 20px #00000047;
background-color: #a6bdf438;
backdrop-filter: blur(10px);
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
width: 230px;
position: fixed;
......@@ -27,6 +26,14 @@ const ModalPhoneNumpadStyle = styled.div`
grid-template-rows: 40px 1fr;
grid-gap: 15px;
cursor: default;
.settingIcon{
position: absolute;
font-size: 11px;
cursor: pointer;
top: 4px;
right: 6px;
color: #00000030;
}
`;
ModalPhoneNumpadStyle.InputArea = styled.div`
position: relative;
......
src/components/setting/index.jsx 0 → 100644
View file @ 01b0ebfd
import React, {useEffect, useState} from 'react'
import SettingMainStyle from './style'
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import FormatPaintIcon from '@mui/icons-material/FormatPaint';
import BuildIcon from '@mui/icons-material/Build';
import FixComponent from "../settingComponents/fixComponent"
const SettingComponent = ({
settingHidden, variant, position
}) => {
const [settingPage, setSettingPage] = useState(0)
var elem = document.getElementById('data');
const allData = [
{
id: 0,
title: 'Test-2',
icon: <BuildIcon className={'leftIcons'} />,
content: <SettingMainStyle.RightSelectInfoOneBlock><FixComponent /></SettingMainStyle.RightSelectInfoOneBlock>
},
{
id: 1,
title: 'Test-1',
icon: <FormatPaintIcon className={'leftIcons'} />,
content: <SettingMainStyle.RightSelectInfoOneBlock>2</SettingMainStyle.RightSelectInfoOneBlock>
},
{
id: 2,
title: 'Test-3',
icon: <CheckBoxOutlineBlankIcon className={'leftIcons'} />,
content: <SettingMainStyle.RightSelectInfoOneBlock>3</SettingMainStyle.RightSelectInfoOneBlock>
},
{
id: 3,
title: 'Test-4',
icon: <CheckBoxOutlineBlankIcon className={'leftIcons'} />,
content: <SettingMainStyle.RightSelectInfoOneBlock>4</SettingMainStyle.RightSelectInfoOneBlock>
},
]
const changeSettingPageCountFunc = (count) => {
setSettingPage(count)
}
console.log('elem: ', elem)
useEffect(() => {
if(elem){
elem.scrollTo({top: elem.scrollHeight / allData.length * settingPage,behavior: 'smooth'})
}
}, [settingPage]);
return (<SettingMainStyle
hiddenValue={!settingHidden}
// hiddenValue={false}
variant={variant}
position={position}
>
<SettingMainStyle.LeftMenu>
{
allData.map(({id, title, icon})=> <div id={id} className={`menuItem ${settingPage === id && 'active'}`} onClick={()=> changeSettingPageCountFunc(id)}>
{icon}
<div className={'backgroundFilter'}></div>
</div>)
}
</SettingMainStyle.LeftMenu>
<SettingMainStyle.RightSelectInfo id={'data'}>
{
allData.map(({content, id})=> content)
}
</SettingMainStyle.RightSelectInfo>
</SettingMainStyle>)
}
export default SettingComponent
src/components/setting/style.js 0 → 100644
View file @ 01b0ebfd
import styled from 'styled-components'
import {boxDialerWidjetPosition} from "../../lib/boxDialerWidjetPosition"
const SettingMainStyle = styled.div`
box-shadow: 0 0 20px #00000047;
background-color: #a6bdf438;
border-radius: 20px;
margin: 0;
box-sizing: border-box;
width: 230px;
height: 300px;
position: fixed;
padding: 3px;
transition: 0.2s !important;
z-index: 9999;
backdrop-filter: blur(10px);
${({ hiddenValue, position, variant }) =>
hiddenValue
? boxDialerWidjetPosition[variant][position].numpad.hidden
: boxDialerWidjetPosition[variant][position].numpad.seen}
bottom: 400px;
display: grid;
grid-template-columns: 40px 1fr;
grid-gap: 2px;
`
SettingMainStyle.LeftMenu = styled.div`
display: flex;
flex-direction: column;
gap: 5px;
padding: 10px 0;
box-sizing: border-box;
.menuItem {
height: 34px;
width: 34px;
border: 1px solid #9c9c9c80;
padding: 2px;
font-size: 14px;
border-top-left-radius: 10px;
border-top-right-radius: 3px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.leftIcons {
color: #00000080;
}
.backgroundFilter {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background: #0000004d;
z-index: 1;
border-top-left-radius: 9px;
border-top-right-radius: 2px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 2px;
}
.active {
//.leftIcons{
// color: #fff;
//}
.backgroundFilter {
width: 100%;
animation: .2s ease-in both running backFilter;
}
}
@keyframes backFilter {
from{
height: 0;
}
to{
height: 100%;
}
}
height: 100%;
`
SettingMainStyle.RightSelectInfo = styled.div`
box-sizing: border-box;
overflow-x: scroll;
overflow-y: hidden;
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
justify-content: center;
padding: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 10px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 10px;
::-webkit-scrollbar {
height: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #fff0;
width: 0;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #abaaaa;
border-radius: 10px;
width: 0;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
width: 0;
}
`
SettingMainStyle.RightSelectInfoOneBlock = styled.div`
height: 285px;
background: #ccc;
border-top-left-radius: 3px;
border-top-right-radius: 10px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 10px;
overflow-y: scroll;
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #fff0;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #abaaaa;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
`
export default SettingMainStyle
src/components/settingComponents/fixComponent/index.jsx 0 → 100644
View file @ 01b0ebfd
import React from 'react'
import Block from "./style"
import Switch from '@mui/material/Switch';
import MiniTable from "../../MiniTable"
import {useColorConfig} from "../../../storage/globalColorConfig"
import Slider from '@mui/material/Slider';
const FixComponent = () => {
const useColorConfigStore = useColorConfig((store) => store)
console.log('useColorConfig client: ', useColorConfigStore.state.autoAnswer)
const marks = [
{
value: 1,
label: '1s',
},
{
value: 40,
label: '3s',
},
{
value: 100,
label: '6s',
}
];
const tableData = [{
id: '1',
title: 'Auto answer',
type: 'row',
child: useColorConfigStore.state.autoAnswer && <div style={{padding: '0 20px 0 5px'}}>
<Slider
aria-label="Restricted values"
defaultValue={40}
step={null}
value={useColorConfigStore.state.autoAnswerSecond}
marks={marks}
onChange={(e)=> useColorConfigStore.setColor({name: 'autoAnswerSecond', value: e.target.value})}
/>
</div>,
inputTag: <Switch
size={'small'}
checked={useColorConfigStore.state.autoAnswer}
onChange={(e) => {
return useColorConfigStore.setColor({name: 'autoAnswer', value: e.target.checked})
}}
/>,
}]
return (<Block>
{/*<p>Text</p>*/}
{/*<Switch size={'small'} defaultChecked />*/}
<MiniTable data={tableData}/>
</Block>)
}
export default FixComponent
src/components/settingComponents/fixComponent/style.js 0 → 100644
View file @ 01b0ebfd
import styled from 'styled-components'
const Block = styled.div`
margin: 5px;
`
export default Block
src/lib/boxDIaler.js
View file @ 01b0ebfd
......@@ -59,6 +59,9 @@ export class BoxDialer {
player;
strmTrack;
isRestarting;
globalHistoryData
constructor() {
this.played = false;
document.body.addEventListener('click', () => {
......@@ -423,6 +426,7 @@ export class BoxDialer {
});
this.ua.on('connecting', (e) => {
console.log('%c connecting: ', 'font-size: 22px; color: yellow;', e);
});
this.ua.on('registrationExpiring', (e) => {
console.log(
......@@ -466,7 +470,7 @@ export class BoxDialer {
funcName: 'modalState',
funcParam: {
bool: true,
callType: 'connected',
callType: 'incoming',
},
});
......@@ -530,7 +534,7 @@ export class BoxDialer {
);
// this handler will be called for incoming calls too
console.log(
'%c incoming confirme',
'%c incoming confirmed',
'font-size: 22px; color: yellow;',
);
this.onSipStateChange.innerCallerModal({
......@@ -540,7 +544,11 @@ export class BoxDialer {
});
this.startInnerTimer();
this.setGuiPhoneState({
stateCode: 'connected',
funcName: 'modalState',
funcParam: {
bool: true,
callType: 'connected',
},
});
});
this.callSession.on('ended', () => {
......@@ -866,7 +874,7 @@ export class BoxDialer {
answerButtonClick() {
this.onSoundType({ type: 'ring', bool: false });
this.callSession.answer(this.options);
this.callSession?.answer(this.options);
this.callSession.connection.addEventListener('addstream', (event) => {
this.remoteAudio.srcObject = event.stream;
this.remoteAudio.play();
......
src/lib/controlRenderBX.jsx
View file @ 01b0ebfd
/** @format */
import React, { useEffect, useState } from 'react';
import Root from '../root';
import {useColorConfig} from "../storage/globalColorConfig"
const ControlRenderBX = () => {
const useColorConfigStore = useColorConfig((store)=> store)
const [wsphonedata, setWsphonedata] = useState({});
useEffect(() => {
setWsphonedata(window.alovoice_wsphone);
useColorConfigStore.getColors()
if (!window.alovoice_wsphone) {
setWsphonedata({
iscloud: true,
......@@ -30,6 +33,7 @@ const ControlRenderBX = () => {
],
});
}
// getHistoryColor
}, []);
console.log('window_alovoice_wsphone: ', window.alovoice_wsphone);
return (
......
src/lib/globalColors.js 0 → 100644
View file @ 01b0ebfd
const getLocalColor = () => {
const res = window.localStorage.getItem('boxdialer-style')
return JSON.parse(res) || {}
}
const globalColors = {
test: '#ff0000',
...getLocalColor(),
}
export {globalColors}
src/root/index.jsx
View file @ 01b0ebfd
......@@ -9,18 +9,21 @@ import BxMiniWidjetUi from '../components/BxMiniWidjetUi';
import SecondNotifSip from '../components/SecondNotifSip';
import InnerCaller from '../components/InnerCaller';
import {useConfigHoldMute} from "../storage"
import SettingComponent from "../components/setting"
import {useColorConfig} from "../storage/globalColorConfig"
// import { contextModalEventProperty } from '../context/modalEventProperty';
const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
const boxDialer = window.BoxDialer;
// // context
// const { callEvents, setCallEvents } = useContext(contextModalEventProperty);
const useColorConfigStore = useColorConfig((store) => store)
const configHoldMute = useConfigHoldMute((state) => state)
const [phoneModal, setPhoneModal] = useState(false);
const [dynamicValue, setDynamicValue] = useState('pending');
const [modalState, setModalState] = useState(false);
const [settingHidden, setSettingHidden] = useState(false);
const [secondLine, setSecondLine] = useState(false);
// const [secondLine, setSecondLine] = useState(false);
const [innerTimer, setInnerTimer] = useState(null);
const [innerCallerModal, setInnerCallerModal] = useState({
bool: false,
......@@ -38,13 +41,13 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
useEffect(() => {
boxDialer.globalHistoryData = useColorConfigStore.state
if (wsphonedata && wsphonedata?.number) {
boxDialer.setSipStateChangeCallback(setDynamicValue, 'dynamicValue');
boxDialer.setSipStateChangeCallback(setModalState, 'modalState');
boxDialer.setSipStateChangeCallback(setSecondLine, 'secondLine');
boxDialer.setSipStateChangeCallback(setPhoneModal, 'phoneModal');
boxDialer.setSipStateChangeCallback(setInnerTimer, 'innerTimer');
// // context
boxDialer.setSipStateChangeCallback(configHoldMute.setState, 'setCallEvents');
boxDialer.setSipStateChangeCallback(
setInnerCallerModal,
......@@ -86,6 +89,35 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
setWsphonedata(result);
};
useEffect(()=> {
console.log('auto_answer running: ', modalState.callType === 'incoming' && modalState.bool)
if(modalState.callType === 'incoming' && modalState.bool){
let second
if(useColorConfigStore.state?.autoAnswer) {
switch (useColorConfigStore.state?.autoAnswerSecond) {
case 1:
second = 1000
break
case 40:
second = 3000
break
case 100:
second = 6000
break
default:
second = 0
}
console.log('auto_answer second: ', second)
setTimeout(() => {
console.log('auto_answer run boxDialer.answerButtonClick()')
boxDialer.answerButtonClick()
}, second)
}
}
}, [modalState.callType, modalState.bool, useColorConfigStore.state?.autoAnswer, useColorConfigStore.state?.autoAnswerSecond])
const selectWidjetType = (type) => {
switch (type) {
case 'bxmini':
......@@ -141,13 +173,19 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
}
};
console.log('wsphonedata_variant: ', !wsphonedata?.number, !wsphonedata?.position, !wsphonedata?.number && !wsphonedata?.position)
if (!wsphonedata?.number && !wsphonedata?.position) return;
return (
<>
{selectWidjetType(wsphonedata.variant)}
<SettingComponent
settingHidden={settingHidden && phoneModal ? true : false}
variant={wsphonedata.variant || 'defaultWidjet'}
position={wsphonedata.position || 'bottomLeft'}
/>
<ModalPhoneNumpad
setSettingHidden={setSettingHidden}
settingHidden={settingHidden}
modalState={modalState}
phoneModal={phoneModal}
reasons={wsphonedata?.reasons}
......@@ -160,12 +198,20 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
extnums={wsphonedata.extnums}
/>
{/*
incoming
outgoing
connectingIncoming
connectingOutgoing
connected
*/}
<Modal
className='tailwindGlobalCss'
hidden={modalState.bool}
// hidden={true}
callType={modalState.callType}
// callType={'connected'}
// hidden={true}
// callType={'incoming'}
hangupButton={hangupButton}
phoneNumber={
modalState.callType === 'outcoming'
......@@ -176,9 +222,7 @@ const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
<InnerCaller
hidden={innerCallerModal.bool}
// hidden={true}
type={innerCallerModal.type}
// type={'connectingIncoming'}
from={innerCallerModal.from}
innerTimer={innerTimer}
/>
......
src/storage/globalColorConfig.js 0 → 100644
View file @ 01b0ebfd
/** @format */
import {create} from 'zustand';
export const useColorConfig = create((set, get) => ({
state: {},
getColors: () => {
const res = localStorage.getItem('boxdialer-style')
if (!!res) {
let jsonRes = JSON.parse(res)
set(() => ({state: jsonRes}))
}
},
setColor: ({name, value}) => {
const state = get()
if (!!name) {
set((state) => ({
state: {
...state.state,
[name]: value
}
}))
state.saveToHistory()
}
},
saveToHistory: () => {
const state = get()
localStorage.setItem('boxdialer-style', JSON.stringify(state.state))
}
}));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023