Merge pull request #686 from Lemoncode/feature/#214-Create-videoconference-widget

feature/#214 Create a videoconference widget

Author: brauliodiez

public/rich-components/videoconference.svg

@@ -14,3 +14,4 @@ export * from './appBar';
 export * from './buttonBar/buttonBar';
 export * from './tabsbar';
 export * from './audio-player';
+export * from './videoconference';

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

@@ -0,0 +1,243 @@
+import { Group, Rect, Circle, Line, Arc, Path } from 'react-konva';
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
+import { ShapeProps } from '../shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { useGroupShapeProps } from '../mock-components.utils';
+
+const videoconferenceShapeSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 200,
+  minHeight: 200,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 600,
+  defaultHeight: 400,
+};
+
+export const getVideoconferenceShapeSizeRestrictions =
+  (): ShapeSizeRestrictions => videoconferenceShapeSizeRestrictions;
+
+const shapeType: ShapeType = 'videoPlayer';
+
+export const VideoconferenceShape = forwardRef<any, ShapeProps>(
+  (props, ref) => {
+    const { x, y, width, height, id, onSelected, ...shapeProps } = props;
+    const restrictedSize = fitSizeToShapeSizeRestrictions(
+      videoconferenceShapeSizeRestrictions,
+      width,
+      height
+    );
+    const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+    const controlBarHeight = 40;
+
+    const [avatar1BodyArcRadius, setAvatar1BodyArcRadius] = useState(0);
+
+    useEffect(() => {
+      setAvatar1BodyArcRadius(() => {
+        const newRadius = Math.min(
+          restrictedWidth / 2,
+          (restrictedHeight - controlBarHeight - 20) / 2
+        );
+        return newRadius;
+      });
+    }, [restrictedWidth, restrictedHeight]);
+
+    const avatar2Width = useMemo(() => {
+      if (restrictedWidth * 0.2 >= restrictedHeight / 2) {
+        return restrictedHeight / 2;
+      }
+      return restrictedWidth * 0.2;
+    }, [restrictedWidth, restrictedHeight]);
+
+    const commonGroupProps = useGroupShapeProps(
+      props,
+      restrictedSize,
+      shapeType,
+      ref
+    );
+
+    return (
+      <Group {...commonGroupProps} {...shapeProps}>
+        {/* Avatar 1 */}
+        <Group>
+          <Rect
+            x={0}
+            y={0}
+            width={restrictedWidth}
+            height={restrictedHeight}
+            cornerRadius={10}
+            stroke="black"
+            strokeWidth={2}
+            fill="lightgray"
+          />
+          <Arc
+            x={restrictedWidth / 2}
+            y={restrictedHeight - controlBarHeight}
+            stroke="black"
+            strokeWidth={2}
+            innerRadius={0}
+            outerRadius={avatar1BodyArcRadius}
+            angle={180}
+            rotation={180}
+            fill="white"
+          />
+          <Circle
+            x={restrictedWidth / 2}
+            y={restrictedHeight - controlBarHeight - avatar1BodyArcRadius * 1.5}
+            width={avatar1BodyArcRadius}
+            height={avatar1BodyArcRadius}
+            stroke="black"
+            strokeWidth={2}
+            fill="white"
+          />
+        </Group>
+        {/* Avatar 2 */}
+        <Group
+          x={restrictedWidth - avatar2Width - 10}
+          y={restrictedHeight - controlBarHeight - avatar2Width}
+        >
+          <Rect
+            width={avatar2Width}
+            height={avatar2Width}
+            cornerRadius={[10, 10, 0, 0]}
+            stroke="black"
+            strokeWidth={2}
+            fill="darkgrey"
+          />
+          <Arc
+            x={avatar2Width - avatar2Width * 0.5}
+            y={avatar2Width}
+            stroke="black"
+            strokeWidth={2}
+            innerRadius={0}
+            outerRadius={avatar2Width * 0.35}
+            angle={180}
+            rotation={180}
+            fill="white"
+          />
+          <Circle
+            x={avatar2Width - avatar2Width * 0.5}
+            y={avatar2Width - avatar2Width * 0.55}
+            width={avatar2Width * 0.4}
+            height={avatar2Width * 0.4}
+            stroke="black"
+            strokeWidth={2}
+            fill="white"
+          />
+        </Group>
+        <Line
+          points={[
+            0,
+            restrictedHeight - controlBarHeight,
+            restrictedWidth,
+            restrictedHeight - controlBarHeight,
+          ]}
+          stroke="black"
+          strokeWidth={2}
+        />
+        {/* Control Bar */}
+        <Group>
+          <Rect
+            x={0}
+            y={restrictedHeight - controlBarHeight}
+            width={restrictedWidth}
+            height={controlBarHeight}
+            cornerRadius={0}
+          />
+          {/* hang up call button*/}
+          <Circle
+            x={restrictedWidth / 2 + 50}
+            y={restrictedHeight - controlBarHeight / 2}
+            width={30}
+            height={30}
+            fill="red"
+            stroke="black"
+            strokeWidth={2}
+          />
+          <Arc
+            x={restrictedWidth / 2 + 52}
+            y={restrictedHeight - controlBarHeight / 2}
+            stroke="black"
+            strokeWidth={2}
+            innerRadius={5}
+            outerRadius={6}
+            angle={180}
+            rotation={60}
+            fill="white"
+          />
+          {/* Camera Button*/}
+          <Circle
+            x={restrictedWidth / 2}
+            y={restrictedHeight - controlBarHeight / 2}
+            width={30}
+            height={30}
+            fill="darkgray"
+            stroke="black"
+            strokeWidth={2}
+          />
+          <Rect
+            x={restrictedWidth / 2 - 9}
+            y={restrictedHeight - controlBarHeight / 2 - 6}
+            width={18}
+            height={12}
+            stroke="black"
+            strokeWidth={2}
+          />
+          <Circle
+            x={restrictedWidth / 2}
+            y={restrictedHeight - controlBarHeight / 2}
+            width={5}
+            height={5}
+            fill="black"
+            stroke="black"
+            strokeWidth={2}
+          />
+          {/* Microphone Button*/}
+          <Circle
+            x={restrictedWidth / 2 - 50}
+            y={restrictedHeight - controlBarHeight / 2}
+            width={30}
+            height={30}
+            fill="darkgray"
+            stroke="black"
+            strokeWidth={2}
+          />
+          <Group
+            x={restrictedWidth / 2 - 62}
+            y={restrictedHeight - controlBarHeight + 9}
+          >
+            <Path
+              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"
+              stroke="black"
+              strokeWidth={2}
+              scaleX={1}
+              scaleY={1}
+            />
+            <Path
+              data="M5 10a7 7 0 0 0 14 0"
+              stroke="black"
+              strokeWidth={2}
+              scaleX={1}
+              scaleY={1}
+            />
+            <Path
+              data="M8 21l8 0"
+              stroke="black"
+              strokeWidth={2}
+              scaleX={1}
+              scaleY={1}
+            />
+            <Path
+              data="M12 17l0 4"
+              stroke="black"
+              strokeWidth={2}
+              scaleX={1}
+              scaleY={1}
+            />
+          </Group>
+        </Group>
+      </Group>
+    );
+  }
+);

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

@@ -70,6 +70,7 @@ export type ShapeType =
   | 'slider'
   | 'link'
   | 'cilinder'
+  | 'videoconference'
   | 'richtext';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
@@ -131,6 +132,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   slider: 'Slider',
   richtext: 'Rich Text',
   cilinder: 'Cilinder',
+  videoconference: 'Videoconference',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';

src/core/model/index.ts

@@ -59,6 +59,7 @@ import {
   getTabsBarShapeSizeRestrictions,
   getVerticalMenuShapeSizeRestrictions,
   getVideoPlayerShapeSizeRestrictions,
+  getVideoconferenceShapeSizeRestrictions,
   // other imports
 } from '@/common/components/mock-components/front-rich-components';
 import {
@@ -142,6 +143,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   slider: getSliderShapeSizeRestrictions,
   audioPlayer: getAudioPlayerShapeSizeRestrictions,
   cilinder: getCilinderShapeSizeRestrictions,
+  videoconference: getVideoconferenceShapeSizeRestrictions,
 };
 
 export default shapeSizeMap;

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

@@ -41,6 +41,7 @@ import {
   renderModal,
   renderButtonBar,
   renderTabsBar,
+  renderVideoconference,
 } from './simple-rich-components';
 import {
   renderDiamond,
@@ -188,6 +189,8 @@ export const renderShapeComponent = (
       return renderSlider(shape, shapeRenderedProps);
     case 'cilinder':
       return renderCilinder(shape, shapeRenderedProps);
+    case 'videoconference':
+      return renderVideoconference(shape, shapeRenderedProps);
     default:
       return renderNotFound(shape, shapeRenderedProps);
   }

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

@@ -14,3 +14,4 @@ export * from './appBar.renderer';
 export * from './button-bar.renderer';
 export * from './tabsbar.renderer';
 export * from './audio-player.renderer';
+export * from './videoconference.renderer';

src/pods/canvas/shape-renderer/simple-rich-components/index.ts

@@ -0,0 +1,30 @@
+import { VideoconferenceShape } from '@/common/components/mock-components/front-rich-components';
+import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
+
+export const renderVideoconference = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <VideoconferenceShape
+      id={shape.id}
+      key={shape.id}
+      ref={shapeRefs.current[shape.id]}
+      x={shape.x}
+      y={shape.y}
+      name="shape"
+      width={shape.width}
+      height={shape.height}
+      draggable
+      typeOfTransformer={shape.typeOfTransformer}
+      onSelected={handleSelected}
+      onDragEnd={handleDragEnd(shape.id)}
+      onTransform={handleTransform}
+      onTransformEnd={handleTransform}
+    />
+  );
+};

src/pods/canvas/shape-renderer/simple-rich-components/videoconference.renderer.tsx

@@ -20,4 +20,8 @@ export const mockRichComponentsCollection: ItemInfo[] = [
   { thumbnailSrc: '/rich-components/tabsbar.svg', type: 'tabsBar' },
   { thumbnailSrc: '/rich-components/vertical-menu.svg', type: 'vertical-menu' },
   { thumbnailSrc: '/rich-components/videoPlayer.svg', type: 'videoPlayer' },
+  {
+    thumbnailSrc: '/rich-components/videoconference.svg',
+    type: 'videoconference',
+  },
 ];