Feature/#183 create audio player

src/common/components/mock-components/front-rich-components/audio-player.tsx

@@ -0,0 +1,181 @@
+import { forwardRef } from 'react';
+import { Line, Rect, Path, Group } from 'react-konva';
+import { ShapeProps } from '../shape.model';
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { useGroupShapeProps } from '../mock-components.utils';
+
+const AudioPlayerShapeSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 280,
+  minHeight: 50,
+  maxWidth: -1,
+  maxHeight: 50,
+  defaultWidth: 280,
+  defaultHeight: 50,
+};
+const PROGRESSBAR_PROGRESS = 0.5;
+
+export const getAudioPlayerShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  AudioPlayerShapeSizeRestrictions;
+
+const shapeType: ShapeType = 'audioPlayer';
+
+export const AudioPlayerShape = forwardRef<any, ShapeProps>((props, ref) => {
+  const { x, y, width, height, id, onSelected, ...shapeProps } = props;
+
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    AudioPlayerShapeSizeRestrictions,
+    width,
+    height
+  );
+
+  const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+  // Ratios for the elements in relation to the component
+  const ratioX = width / restrictedWidth;
+  const ratioY = height / restrictedHeight;
+
+  // Margin between elements (can be adjusted)
+  const marginX = 20 * ratioX;
+  // Progress bar start and end positions
+  const progressBarStartX = 115 * ratioX + marginX;
+  const progressBarEndX = restrictedWidth - 47 * ratioX - marginX;
+  const progressBarFullWidth = progressBarEndX - progressBarStartX;
+
+  // Width and height of the progress bar
+  const progressBarWidth = progressBarFullWidth * PROGRESSBAR_PROGRESS;
+  const progressBarHeight = 5 * ratioY;
+
+  const backButtonPoints = [
+    26 * ratioX,
+    20 * ratioY,
+    21 * ratioX,
+    25 * ratioY,
+    26 * ratioX,
+    30 * ratioY,
+  ];
+
+  const playButtonPoints = [
+    63 * ratioX,
+    20 * ratioY,
+    72 * ratioX,
+    25 * ratioY,
+    63 * ratioX,
+    30 * ratioY,
+  ];
+
+  const forwardButtonPoints = [
+    100 * ratioX,
+    20 * ratioY,
+    105 * ratioX,
+    25 * ratioY,
+    100 * ratioX,
+    30 * ratioY,
+  ];
+
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    restrictedSize,
+    shapeType,
+    ref
+  );
+
+  const tapeRotation = 1;
+
+  return (
+    <Group {...commonGroupProps} {...shapeProps}>
+      <Rect
+        x={0}
+        y={0}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        rotation={tapeRotation}
+      />
+
+      {/* Back Button */}
+      <Line
+        points={backButtonPoints}
+        fill="black"
+        stroke="black"
+        strokeWidth={1}
+        closed={true}
+      />
+      <Line
+        points={[30 * ratioX, 20 * ratioY, 30 * ratioX, 30 * ratioY]}
+        stroke="black"
+        strokeWidth={1}
+      />
+
+      {/* Play Button */}
+      <Line
+        points={playButtonPoints}
+        fill="black"
+        stroke="black"
+        strokeWidth={1}
+        closed={true}
+      />
+
+      {/* Forward Button */}
+      <Line
+        points={forwardButtonPoints}
+        fill="black"
+        stroke="black"
+        strokeWidth={1}
+        closed={true}
+      />
+      <Line
+        points={[95 * ratioX, 20 * ratioY, 95 * ratioX, 30 * ratioY]}
+        stroke="black"
+        strokeWidth={1}
+      />
+
+      {/* Progress Bar */}
+      <Rect
+        x={progressBarStartX}
+        y={22.5 * ratioY}
+        width={progressBarFullWidth}
+        height={progressBarHeight}
+        stroke="black"
+        strokeWidth={1}
+      />
+      <Rect
+        x={progressBarStartX}
+        y={22.5 * ratioY}
+        width={progressBarWidth}
+        height={progressBarHeight}
+        fill="black"
+      />
+
+      {/* Volume Button */}
+      <Path
+        data={`
+            M${restrictedWidth - 47 * ratioX},${22.5 * ratioY}
+            L${restrictedWidth - 42 * ratioX},${22.5 * ratioY}
+            L${restrictedWidth - 37 * ratioX},${17.5 * ratioY}
+            L${restrictedWidth - 37 * ratioX},${32.5 * ratioY}
+            L${restrictedWidth - 42 * ratioX},${27.5 * ratioY}
+            L${restrictedWidth - 47 * ratioX},${27.5 * ratioY} Z
+          `}
+        fill="black"
+        stroke="black"
+        strokeWidth={1}
+      />
+      <Path
+        data={`
+            M${restrictedWidth - 32 * ratioX},${20 * ratioY}
+            Q${restrictedWidth - 27 * ratioX},${25 * ratioY},${restrictedWidth - 32 * ratioX},${30 * ratioY}
+          `}
+        stroke="black"
+        strokeWidth={1}
+      />
+      <Path
+        data={`
+            M${restrictedWidth - 25 * ratioX},${17.5 * ratioY}
+            Q${restrictedWidth - 18 * ratioX},${25 * ratioY},${restrictedWidth - 25 * ratioX},${32.5 * ratioY}
+          `}
+        stroke="black"
+        strokeWidth={1}
+      />
+    </Group>
+  );
+});

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

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

src/core/model/index.ts

@@ -29,6 +29,7 @@ export type ShapeType =
   | 'rectangle'
   | 'postit'
   | 'videoPlayer'
+  | 'audioPlayer'
   | 'diamond'
   | 'icon'
   | 'line'
@@ -86,6 +87,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   radiobutton: 'Radio Button',
   rectangle: 'Rectangle',
   videoPlayer: 'Video Player',
+  audioPlayer: 'Audio Player',
   diamond: 'Diamond',
   line: 'Line',
   accordion: 'Accordion',

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

@@ -42,6 +42,7 @@ import {
 import {
   getAccordionShapeSizeRestrictions,
   getAppBarShapeSizeRestrictions,
+  getAudioPlayerShapeSizeRestrictions,
   getBarChartShapeSizeRestrictions,
   getBreadcrumbShapeSizeRestrictions,
   getButtonBarShapeSizeRestrictions,
@@ -130,6 +131,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   buttonBar: getButtonBarShapeSizeRestrictions,
   tooltip: getTooltipShapeSizeRestrictions,
   slider: getSliderShapeSizeRestrictions,
+  audioPlayer: getAudioPlayerShapeSizeRestrictions,
 };
 
 export default shapeSizeMap;

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

@@ -37,6 +37,7 @@ import {
   renderLineChart,
   renderVerticalMenuShape,
   renderTable,
+  renderAudioPlayer,
   renderModal,
   renderButtonBar,
   renderTabsBar,
@@ -106,6 +107,8 @@ export const renderShapeComponent = (
       return renderPostit(shape, shapeRenderedProps);
     case 'videoPlayer':
       return renderVideoPlayer(shape, shapeRenderedProps);
+    case 'audioPlayer':
+      return renderAudioPlayer(shape, shapeRenderedProps);
     case 'pie':
       return renderPieChart(shape, shapeRenderedProps);
     case 'map':

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

@@ -0,0 +1,30 @@
+import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
+import { AudioPlayerShape } from '@/common/components/mock-components/front-rich-components/audio-player';
+
+export const renderAudioPlayer = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <AudioPlayerShape
+      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/index.ts

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

src/pods/galleries/rich-components-gallery/rich-components-gallery-data/index.ts

@@ -1,6 +1,8 @@
 import { ItemInfo } from '@/common/components/gallery/components/model';
 
 export const mockRichComponentsCollection: ItemInfo[] = [
+  { thumbnailSrc: '/rich-components/videoPlayer.svg', type: 'videoPlayer' },
+  { thumbnailSrc: '/rich-components/audioPlayer.svg', type: 'audioPlayer' },
   { thumbnailSrc: '/rich-components/table.svg', type: 'table' },
   { thumbnailSrc: '/rich-components/accordion.svg', type: 'accordion' },
   {