Skip to content

Commit b85aab4

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #688 from Lemoncode/dev
videoconf an mins
2 parents cd30110 + eafd800 commit b85aab4

13 files changed

Lines changed: 317 additions & 7 deletions

File tree

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,12 @@ Team members participating in this project
141141
<a href="https://github.com/rojasadrian012">
142142
<kbd><img src="https://github.com/rojasadrian012.png" alt="Adrian Rojas" width="50" height="50" style="border-radius: 50%;"></kbd>
143143
</a>
144+
<a href="https://github.com/omarlm">
145+
<kbd><img src="https://github.com/omarlm.png" alt="Omar Lorenzo" width="50" height="50" style="border-radius: 50%;"></kbd>
146+
</a>
147+
<a href="https://github.com/marcosgiannini">
148+
<kbd><img src="https://github.com/marcosgiannini.png" alt="Marcos Giannini" width="50" height="50" style="border-radius: 50%;"></kbd>
149+
</a>
144150
<a href="https://github.com/IonutGabi">
145151
<kbd><img src="https://github.com/IonutGabi.png" alt="Gabi Birsan" width="50" height="50" style="border-radius: 50%;"></kbd>
146152
</a>

‎public/rich-components/videoconference.svg‎

Lines changed: 18 additions & 0 deletions
Loading

‎src/common/components/mock-components/front-components/combobox-shape.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { BASIC_SHAPE, DISABLED_COLOR_VALUES } from './shape.const';
88
import { useGroupShapeProps } from '../mock-components.utils';
99

1010
const comboBoxShapeRestrictions: ShapeSizeRestrictions = {
11-
minWidth: 100,
11+
minWidth: 85,
1212
minHeight: BASIC_SHAPE.DEFAULT_TEXT_HEIGHT,
1313
maxWidth: -1,
1414
maxHeight: BASIC_SHAPE.DEFAULT_TEXT_HEIGHT,

‎src/common/components/mock-components/front-components/input-shape.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useShapeProps } from '../../shapes/use-shape-props.hook';
88
import { useGroupShapeProps } from '../mock-components.utils';
99

1010
const inputShapeRestrictions: ShapeSizeRestrictions = {
11-
minWidth: 60,
11+
minWidth: 38,
1212
minHeight: 38,
1313
maxWidth: -1,
1414
maxHeight: 38,

‎src/common/components/mock-components/front-components/textarea-shape.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import { useShapeProps } from '../../shapes/use-shape-props.hook';
88
import { useGroupShapeProps } from '../mock-components.utils';
99

1010
const textAreaShapeRestrictions: ShapeSizeRestrictions = {
11-
minWidth: 80,
12-
minHeight: 70,
11+
minWidth: 70,
12+
minHeight: 44,
1313
maxWidth: -1,
14-
maxHeight: 500,
15-
defaultWidth: 190,
16-
defaultHeight: 100,
14+
maxHeight: 120,
15+
defaultWidth: 200,
16+
defaultHeight: 55,
1717
};
1818

1919
export const getTextAreaSizeRestrictions = (): ShapeSizeRestrictions =>

‎src/common/components/mock-components/front-rich-components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@ export * from './appBar';
1414
export * from './buttonBar/buttonBar';
1515
export * from './tabsbar';
1616
export * from './audio-player';
17+
export * from './videoconference';

‎src/common/components/mock-components/front-rich-components/videoconference.tsx‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
import { Group, Rect, Circle, Line, Arc, Path } from 'react-konva';
2+
import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
3+
import { forwardRef, useEffect, useMemo, useState } from 'react';
4+
import { ShapeProps } from '../shape.model';
5+
import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
6+
import { useGroupShapeProps } from '../mock-components.utils';
7+
8+
const videoconferenceShapeSizeRestrictions: ShapeSizeRestrictions = {
9+
minWidth: 200,
10+
minHeight: 200,
11+
maxWidth: -1,
12+
maxHeight: -1,
13+
defaultWidth: 600,
14+
defaultHeight: 400,
15+
};
16+
17+
export const getVideoconferenceShapeSizeRestrictions =
18+
(): ShapeSizeRestrictions => videoconferenceShapeSizeRestrictions;
19+
20+
const shapeType: ShapeType = 'videoPlayer';
21+
22+
export const VideoconferenceShape = forwardRef<any, ShapeProps>(
23+
(props, ref) => {
24+
const { x, y, width, height, id, onSelected, ...shapeProps } = props;
25+
const restrictedSize = fitSizeToShapeSizeRestrictions(
26+
videoconferenceShapeSizeRestrictions,
27+
width,
28+
height
29+
);
30+
const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
31+
32+
const controlBarHeight = 40;
33+
34+
const [avatar1BodyArcRadius, setAvatar1BodyArcRadius] = useState(0);
35+
36+
useEffect(() => {
37+
setAvatar1BodyArcRadius(() => {
38+
const newRadius = Math.min(
39+
restrictedWidth / 2,
40+
(restrictedHeight - controlBarHeight - 20) / 2
41+
);
42+
return newRadius;
43+
});
44+
}, [restrictedWidth, restrictedHeight]);
45+
46+
const avatar2Width = useMemo(() => {
47+
if (restrictedWidth * 0.2 >= restrictedHeight / 2) {
48+
return restrictedHeight / 2;
49+
}
50+
return restrictedWidth * 0.2;
51+
}, [restrictedWidth, restrictedHeight]);
52+
53+
const commonGroupProps = useGroupShapeProps(
54+
props,
55+
restrictedSize,
56+
shapeType,
57+
ref
58+
);
59+
60+
return (
61+
<Group {...commonGroupProps} {...shapeProps}>
62+
{/* Avatar 1 */}
63+
<Group>
64+
<Rect
65+
x={0}
66+
y={0}
67+
width={restrictedWidth}
68+
height={restrictedHeight}
69+
cornerRadius={10}
70+
stroke="black"
71+
strokeWidth={2}
72+
fill="lightgray"
73+
/>
74+
<Arc
75+
x={restrictedWidth / 2}
76+
y={restrictedHeight - controlBarHeight}
77+
stroke="black"
78+
strokeWidth={2}
79+
innerRadius={0}
80+
outerRadius={avatar1BodyArcRadius}
81+
angle={180}
82+
rotation={180}
83+
fill="white"
84+
/>
85+
<Circle
86+
x={restrictedWidth / 2}
87+
y={restrictedHeight - controlBarHeight - avatar1BodyArcRadius * 1.5}
88+
width={avatar1BodyArcRadius}
89+
height={avatar1BodyArcRadius}
90+
stroke="black"
91+
strokeWidth={2}
92+
fill="white"
93+
/>
94+
</Group>
95+
{/* Avatar 2 */}
96+
<Group
97+
x={restrictedWidth - avatar2Width - 10}
98+
y={restrictedHeight - controlBarHeight - avatar2Width}
99+
>
100+
<Rect
101+
width={avatar2Width}
102+
height={avatar2Width}
103+
cornerRadius={[10, 10, 0, 0]}
104+
stroke="black"
105+
strokeWidth={2}
106+
fill="darkgrey"
107+
/>
108+
<Arc
109+
x={avatar2Width - avatar2Width * 0.5}
110+
y={avatar2Width}
111+
stroke="black"
112+
strokeWidth={2}
113+
innerRadius={0}
114+
outerRadius={avatar2Width * 0.35}
115+
angle={180}
116+
rotation={180}
117+
fill="white"
118+
/>
119+
<Circle
120+
x={avatar2Width - avatar2Width * 0.5}
121+
y={avatar2Width - avatar2Width * 0.55}
122+
width={avatar2Width * 0.4}
123+
height={avatar2Width * 0.4}
124+
stroke="black"
125+
strokeWidth={2}
126+
fill="white"
127+
/>
128+
</Group>
129+
<Line
130+
points={[
131+
0,
132+
restrictedHeight - controlBarHeight,
133+
restrictedWidth,
134+
restrictedHeight - controlBarHeight,
135+
]}
136+
stroke="black"
137+
strokeWidth={2}
138+
/>
139+
{/* Control Bar */}
140+
<Group>
141+
<Rect
142+
x={0}
143+
y={restrictedHeight - controlBarHeight}
144+
width={restrictedWidth}
145+
height={controlBarHeight}
146+
cornerRadius={0}
147+
/>
148+
{/* hang up call button*/}
149+
<Circle
150+
x={restrictedWidth / 2 + 50}
151+
y={restrictedHeight - controlBarHeight / 2}
152+
width={30}
153+
height={30}
154+
fill="red"
155+
stroke="black"
156+
strokeWidth={2}
157+
/>
158+
<Arc
159+
x={restrictedWidth / 2 + 52}
160+
y={restrictedHeight - controlBarHeight / 2}
161+
stroke="black"
162+
strokeWidth={2}
163+
innerRadius={5}
164+
outerRadius={6}
165+
angle={180}
166+
rotation={60}
167+
fill="white"
168+
/>
169+
{/* Camera Button*/}
170+
<Circle
171+
x={restrictedWidth / 2}
172+
y={restrictedHeight - controlBarHeight / 2}
173+
width={30}
174+
height={30}
175+
fill="darkgray"
176+
stroke="black"
177+
strokeWidth={2}
178+
/>
179+
<Rect
180+
x={restrictedWidth / 2 - 9}
181+
y={restrictedHeight - controlBarHeight / 2 - 6}
182+
width={18}
183+
height={12}
184+
stroke="black"
185+
strokeWidth={2}
186+
/>
187+
<Circle
188+
x={restrictedWidth / 2}
189+
y={restrictedHeight - controlBarHeight / 2}
190+
width={5}
191+
height={5}
192+
fill="black"
193+
stroke="black"
194+
strokeWidth={2}
195+
/>
196+
{/* Microphone Button*/}
197+
<Circle
198+
x={restrictedWidth / 2 - 50}
199+
y={restrictedHeight - controlBarHeight / 2}
200+
width={30}
201+
height={30}
202+
fill="darkgray"
203+
stroke="black"
204+
strokeWidth={2}
205+
/>
206+
<Group
207+
x={restrictedWidth / 2 - 62}
208+
y={restrictedHeight - controlBarHeight + 9}
209+
>
210+
<Path
211+
data="M9 2m0 3a3 3 0 0 1 3 -3h0a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3h0a3 3 0 0 1 -3 -3z"
212+
stroke="black"
213+
strokeWidth={2}
214+
scaleX={1}
215+
scaleY={1}
216+
/>
217+
<Path
218+
data="M5 10a7 7 0 0 0 14 0"
219+
stroke="black"
220+
strokeWidth={2}
221+
scaleX={1}
222+
scaleY={1}
223+
/>
224+
<Path
225+
data="M8 21l8 0"
226+
stroke="black"
227+
strokeWidth={2}
228+
scaleX={1}
229+
scaleY={1}
230+
/>
231+
<Path
232+
data="M12 17l0 4"
233+
stroke="black"
234+
strokeWidth={2}
235+
scaleX={1}
236+
scaleY={1}
237+
/>
238+
</Group>
239+
</Group>
240+
</Group>
241+
);
242+
}
243+
);

‎src/core/model/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export type ShapeType =
7070
| 'slider'
7171
| 'link'
7272
| 'cilinder'
73+
| 'videoconference'
7374
| 'richtext';
7475

7576
export const ShapeDisplayName: Record<ShapeType, string> = {
@@ -131,6 +132,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
131132
slider: 'Slider',
132133
richtext: 'Rich Text',
133134
cilinder: 'Cilinder',
135+
videoconference: 'Videoconference',
134136
};
135137

136138
export type EditType = 'input' | 'textarea' | 'imageupload';

‎src/pods/canvas/model/shape-size.mapper.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ import {
5959
getTabsBarShapeSizeRestrictions,
6060
getVerticalMenuShapeSizeRestrictions,
6161
getVideoPlayerShapeSizeRestrictions,
62+
getVideoconferenceShapeSizeRestrictions,
6263
// other imports
6364
} from '@/common/components/mock-components/front-rich-components';
6465
import {
@@ -142,6 +143,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
142143
slider: getSliderShapeSizeRestrictions,
143144
audioPlayer: getAudioPlayerShapeSizeRestrictions,
144145
cilinder: getCilinderShapeSizeRestrictions,
146+
videoconference: getVideoconferenceShapeSizeRestrictions,
145147
};
146148

147149
export default shapeSizeMap;

‎src/pods/canvas/shape-renderer/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import {
4141
renderModal,
4242
renderButtonBar,
4343
renderTabsBar,
44+
renderVideoconference,
4445
} from './simple-rich-components';
4546
import {
4647
renderDiamond,
@@ -188,6 +189,8 @@ export const renderShapeComponent = (
188189
return renderSlider(shape, shapeRenderedProps);
189190
case 'cilinder':
190191
return renderCilinder(shape, shapeRenderedProps);
192+
case 'videoconference':
193+
return renderVideoconference(shape, shapeRenderedProps);
191194
default:
192195
return renderNotFound(shape, shapeRenderedProps);
193196
}

0 commit comments

Comments
 (0)