quickblox-react-ui-kit 0.2.8 → 0.3.0-beta.1

package/src/Presentation/Views/Dialog/Message/MessageAttachment/AudioAttachment/AudioAttachment.scss

@@ -0,0 +1,31 @@
+.audio-body{
+  padding: 5px;
+  border-radius: 4px;
+  width: var(--max-width-audio-message);
+}
+
+.audio-controls {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  gap: 5px;
+}
+
+.equalizer,
+.equalizer * {
+  box-sizing: border-box;
+}
+.equalizer {
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+  align-items: flex-end;
+  justify-content: flex-start;
+  position: relative;
+}
+.rectangle-equalizer {
+  background: var(--main-elements, #636d78);
+  flex-shrink: 0;
+  width: 2px;
+  position: relative;
+}

package/src/Presentation/Views/Dialog/Message/MessageAttachment/AudioAttachment/AudioAttachment.tsx

@@ -0,0 +1,155 @@
+import React, { useEffect, useRef, useState } from 'react';
+import './AudioAttachment.scss';
+import { FileEntity } from '../../../../../../Domain/entity/FileEntity';
+import ImagePlay from '../../../../../components/UI/svgs/Icons/Toggle/ImagePlay';
+import Pause from '../../../../../components/UI/svgs/Icons/Toggle/Pause';
+
+type AudioAttachmentComponentProps = {
+  audioFile: FileEntity;
+};
+// eslint-disable-next-line react/function-component-definition
+const AudioAttachment: React.FC<AudioAttachmentComponentProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  audioFile,
+}: AudioAttachmentComponentProps) => {
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [secondsElapsed, setSecondsElapsed] = useState<number>(0);
+
+  const handleAudioEnd = () => {
+    setIsPlaying(false);
+  };
+
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    const audio = audioRef.current;
+
+    if (audio) {
+      audio.addEventListener('ended', handleAudioEnd);
+
+      return () => {
+        audio.removeEventListener('ended', handleAudioEnd);
+      };
+    }
+  }, []);
+
+  useEffect(() => {
+    let intervalId: NodeJS.Timeout;
+
+    if (isPlaying) {
+      intervalId = setInterval(() => {
+        setSecondsElapsed((prevSeconds) => prevSeconds + 1);
+      }, 100);
+    }
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [isPlaying]);
+
+  const playPauseHandler = () => {
+    const audio = audioRef.current as HTMLAudioElement;
+
+    if (audio) {
+      if (isPlaying) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        audio.pause();
+      } else {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        audio.play();
+      }
+
+      setIsPlaying(!isPlaying);
+    } else {
+      console.error('Audio element not found');
+    }
+  };
+
+  const generateUniqueNumbers = (
+    inputString: string,
+    count: number,
+  ): number[] => {
+    const uniqueNumbers: number[] = [];
+
+    for (let i = 0; i < count; i += 1) {
+      uniqueNumbers.push(Math.abs((inputString.charCodeAt(i) % 11) + 2));
+    }
+
+    return uniqueNumbers;
+  };
+
+  const renderEqualizer = (uid: string) => {
+    const divElements: JSX.Element[] = [];
+
+    const nums = generateUniqueNumbers(uid, 30);
+
+    for (let i = 0; i < 30; i += 1) {
+      const divStyle = {
+        height: `${nums[i]}px`,
+      };
+
+      divElements.push(
+        <div className="rectangle-equalizer" key={i} style={divStyle} />,
+      );
+    }
+
+    return divElements;
+  };
+
+  const renderRandomEqualizer = () => {
+    const divElements: JSX.Element[] = [];
+
+    for (let i = 0; i < 30; i += 1) {
+      const randomHeight = Math.floor(Math.random() * 12) + 1;
+
+      const divStyle = {
+        height: `${randomHeight}px`,
+      };
+
+      divElements.push(
+        <div className="rectangle-equalizer" key={i} style={divStyle} />,
+      );
+    }
+
+    return divElements;
+  };
+
+  return (
+    <div>
+      <audio
+        ref={audioRef}
+        className="audio-body"
+        controls
+        preload="auto"
+        style={{ display: 'none' }}
+      >
+        <source src={audioFile.url} type={audioFile?.type?.toString()} />
+        <source src={audioFile.url} type="audio/mpeg" />
+        <source src={audioFile.url} type="audio/ogg" />
+        Your browser does not support the audio element.
+      </audio>
+      <div className="audio-controls">
+        <div onClick={playPauseHandler}>
+          {/* eslint-disable-next-line react/button-has-type */}
+          {isPlaying ? (
+            <Pause width="24px" height="24px" color="var(--main-elements)" />
+          ) : (
+            <ImagePlay
+              width="24px"
+              height="24px"
+              color="var(--main-elements)"
+            />
+          )}
+        </div>
+        {isPlaying ? (
+          <div className="equalizer">{renderRandomEqualizer()}</div>
+        ) : (
+          <div className="equalizer">{renderEqualizer(audioFile.uid)}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AudioAttachment;

package/src/Presentation/Views/Dialog/Message/MessageAttachment/DefaultAttachment/DefaultAttachment.scss

@@ -0,0 +1,76 @@
+.default-attachment-component-container,
+.default-attachment-component-container * {
+  box-sizing: border-box;
+}
+.default-attachment-component-container {
+  // background: var(--incoming-background, #e4e6e8);
+  border-radius: 22px 22px 22px 0px;
+  padding: 8px 16px 8px 1px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+
+  &--file-wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+    flex-shrink: 0;
+    position: relative;
+
+    &--placeholder {
+      flex-shrink: 0;
+      width: 32px;
+      height: 32px;
+      position: static;
+
+      &__bg {
+        background: var(--field-border, #90979f);
+        border-radius: 8px;
+        width: 32px;
+        height: 32px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+      }
+
+      &__icon {
+        border-radius: 4px;
+        padding: 4px;
+        display: flex;
+        flex-direction: row;
+        gap: 0px;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        left: 4px;
+        top: 4px;
+      }
+    }
+
+    &--file-d {
+      color: var(--secondary-elements, #202f3e);
+      text-align: left;
+      font: 400 14px/20px "Roboto", sans-serif;
+      position: relative;
+    }
+  }
+}
+
+
+
+.media-text-document {
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+

package/src/Presentation/Views/Dialog/Message/MessageAttachment/DefaultAttachment/DefaultAttachment.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import './DefaultAttachment.scss';
+import TextDocument from '../../../../../components/UI/svgs/Icons/Media/TextDocument';
+
+function trimFileName(fileName: string) {
+  if (fileName.length > 10) {
+    return `${fileName.substring(0, 9)}... .${fileName.slice(
+      (Math.max(0, fileName.lastIndexOf('.')) || Infinity) + 1,
+    )}`;
+  }
+
+  return fileName;
+}
+
+type DefaultAttachmentComponentProps = {
+  fileName: string;
+  fileUrl: string;
+};
+// eslint-disable-next-line react/function-component-definition
+const DefaultAttachment: React.FC<DefaultAttachmentComponentProps> = ({
+  fileName,
+  fileUrl,
+}: DefaultAttachmentComponentProps) => {
+  return (
+    <div>
+      <div className="default-attachment-component-container">
+        <div className="default-attachment-component-container--file-wrapper">
+          <div className="default-attachment-component-container--file-wrapper--placeholder">
+            <div className="default-attachment-component-container--file-wrapper--placeholder__bg" />
+            <div className="default-attachment-component-container--file-wrapper--placeholder__icon">
+              <a href={fileUrl} target="_blank" download rel="noreferrer">
+                <TextDocument
+                  width="16"
+                  height="16"
+                  applyZoom
+                  color="var(--incoming-background)"
+                />
+              </a>
+            </div>
+          </div>
+          <div className="default-attachment-component-container--file-wrapper__file-d">
+            {trimFileName(fileName)}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DefaultAttachment;

package/src/Presentation/Views/Dialog/Message/MessageAttachment/ImageAttachment/ImageAttachment.scss

@@ -0,0 +1,14 @@
+.message-attachment-image-body{
+  max-width: var(--max-width-image-message);
+  max-height: 160px;
+  padding: 0;
+  border-radius: 4px;
+}
+
+.message-attachment-image {
+  display: flex;
+  justify-content: center;
+  flex-flow: row;
+  max-width: var(--max-width-image-message);
+  max-height: 160px;
+}

package/src/Presentation/Views/Dialog/Message/MessageAttachment/ImageAttachment/ImageAttachment.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect } from 'react';
+import './ImageAttachment.scss';
+import { FileEntity } from '../../../../../../Domain/entity/FileEntity';
+import { Creator } from '../../../../../../Data/Creator';
+
+type ImageAttachmentComponentProps = {
+  imageFile: FileEntity;
+};
+// eslint-disable-next-line react/function-component-definition
+const ImageAttachment: React.FC<ImageAttachmentComponentProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  imageFile,
+}: ImageAttachmentComponentProps) => {
+  const [imageUrl, setImageUrl] = React.useState('');
+
+  async function getFileForPreview() {
+    if (imageFile.url && imageFile.url.length > 0) {
+      let fileUrl: string = imageFile.url;
+      const { blobFile } = await Creator.createBlobFromUrl(fileUrl);
+
+      fileUrl = blobFile ? URL.createObjectURL(blobFile) : fileUrl || '';
+      setImageUrl(fileUrl);
+    }
+  }
+
+  useEffect(() => {
+    getFileForPreview();
+
+    return () => {
+      if (imageUrl) {
+        URL.revokeObjectURL(imageUrl);
+      }
+    };
+  }, []);
+
+  return (
+    <div className="message-attachment-image">
+      <a href={imageUrl} download="file" target="_blank" rel="noreferrer">
+        <img
+          className="message-attachment-image-body"
+          key={imageFile.id}
+          src={imageUrl}
+          alt={imageFile.name || 'attached image'}
+        />
+      </a>
+    </div>
+  );
+};
+
+export default ImageAttachment;

package/src/Presentation/Views/Dialog/Message/MessageAttachment/MessageAttachment.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import ChatMessageAttachmentEntity from '../../../../../Domain/entity/ChatMessageAttachmentEntity';
+import DefaultAttachment from './DefaultAttachment/DefaultAttachment';
+import { FileType } from '../../../../../Domain/entity/FileTypes';
+import VideoAttachment from './VideoAttachment/VideoAttachment';
+import ImagePlay from '../../../../components/UI/svgs/Icons/Toggle/ImagePlay';
+import AudioAttachment from './AudioAttachment/AudioAttachment';
+import AudioFile from '../../../../components/UI/svgs/Icons/Media/AudioFile';
+import ImageAttachment from './ImageAttachment/ImageAttachment';
+import ImageEmpty from '../../../../components/UI/svgs/Icons/Media/ImageEmpty';
+import ImageFile from '../../../../components/UI/svgs/Icons/Media/ImageFile';
+import UiKitTheme from '../../../../themes/UiKitTheme';
+
+type AttachmentProps = {
+  attachment: ChatMessageAttachmentEntity;
+};
+
+type AttachmentContentComponentProps = AttachmentProps & {
+  theme?: UiKitTheme;
+};
+
+function renderAttachment({ attachment }: AttachmentProps) {
+  if (attachment.type.toString().includes(FileType.video)) {
+    return attachment.file ? (
+      <VideoAttachment videoFile={attachment.file} />
+    ) : (
+      <ImagePlay />
+    );
+  }
+  if (attachment.type.toString().includes(FileType.audio)) {
+    return attachment.file ? (
+      <AudioAttachment audioFile={attachment.file} />
+    ) : (
+      <AudioFile />
+    );
+  }
+  if (attachment.type.toString().includes(FileType.image)) {
+    return attachment.file ? (
+      <ImageAttachment imageFile={attachment.file} />
+    ) : (
+      <ImageEmpty />
+    );
+  }
+  if (attachment.type.toString().includes(FileType.text)) {
+    return attachment.file ? (
+      // <div>TEXT</div>
+      <DefaultAttachment
+        fileName={attachment.file?.name || ''}
+        fileUrl={attachment.file?.url || ''}
+      />
+    ) : (
+      <ImageFile width="24" height="24" applyZoom />
+    );
+  }
+
+  return (
+    <DefaultAttachment
+      fileName={attachment.file?.name || ''}
+      fileUrl={attachment.file?.url || ''}
+    />
+  );
+}
+function MessageAttachment({
+  attachment,
+  theme,
+}: AttachmentContentComponentProps) {
+  const contentPlaceHolder = renderAttachment({ attachment });
+
+  let contentResult: JSX.Element = (
+    <div className="message-view-container--message-content-wrapper">
+      {contentPlaceHolder}
+    </div>
+  );
+
+  if (attachment.type === FileType.text) {
+    contentResult = (
+      <div className="message-view-container--file-message-content-wrapper">
+        <div
+          style={theme ? { backgroundColor: theme.caption() } : {}}
+          className="message-view-container__file-message-icon"
+        >
+          {contentPlaceHolder}
+        </div>
+        <div>{attachment.name || 'file'}</div>
+      </div>
+    );
+  }
+
+  return contentResult;
+}
+
+export default MessageAttachment;

package/src/Presentation/Views/Dialog/Message/MessageAttachment/VideoAttachment/VideoAttachment.scss

@@ -0,0 +1,18 @@
+.message-attachment-video-body{
+  max-height: 130px;
+  max-width: var(--max-width-audio-message);
+  width: var(--max-width-audio-message);
+  padding: 0;
+  border-radius: 4px;
+}
+
+.message-attachment-video {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: column;
+  //max-width: 300px;
+  max-width: var(--max-width-audio-message);
+  width: var(--max-width-audio-message);
+  max-height: 160px;
+}

package/src/Presentation/Views/Dialog/Message/MessageAttachment/VideoAttachment/VideoAttachment.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from 'react';
+import './VideoAttachment.scss';
+import { FileEntity } from '../../../../../../Domain/entity/FileEntity';
+import { Creator } from '../../../../../../Data/Creator';
+
+type VideoAttachmentComponentProps = {
+  videoFile: FileEntity;
+};
+// eslint-disable-next-line react/function-component-definition
+const VideoAttachment: React.FC<VideoAttachmentComponentProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  videoFile,
+}: VideoAttachmentComponentProps) => {
+  const [videoUrl, setVideoUrl] = React.useState('');
+
+  async function getFileForPreview() {
+    if (videoFile.url && videoFile.url.length > 0) {
+      let fileUrl: string = videoFile.url;
+      const { blobFile } = await Creator.createBlobFromUrl(fileUrl);
+
+      fileUrl = blobFile ? URL.createObjectURL(blobFile) : fileUrl || '';
+      setVideoUrl(fileUrl);
+    }
+  }
+
+  useEffect(() => {
+    getFileForPreview();
+
+    return () => {
+      if (videoUrl) {
+        URL.revokeObjectURL(videoUrl);
+      }
+    };
+  }, []);
+
+  return (
+    <div>
+      <div className="message-attachment-video">
+        <video
+          className="message-attachment-video-body"
+          controls
+          key={videoFile.id}
+          playsInline
+          src={videoUrl}
+        >
+          <a href={videoUrl} download>
+            Download
+          </a>
+        </video>
+      </div>
+      <a href={videoUrl} download>
+        Download
+      </a>
+    </div>
+  );
+};
+
+export default VideoAttachment;

package/src/Presentation/Views/Dialog/Message/MessageContextMenu/MessageContextMenu.scss

@@ -0,0 +1,10 @@
+.message-context-menu {
+  // padding: 0px 0px 16px 0px;
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}

package/src/Presentation/Views/Dialog/Message/MessageContextMenu/MessageContextMenu.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import './MessageContextMenu.scss';
+import ContextMenu from '../../ContextMenu/ContextMenu';
+import EditDots from '../../../../components/UI/svgs/Icons/Actions/EditDots';
+import UiKitTheme from '../../../../themes/UiKitTheme';
+import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
+import { FunctionTypeMessageEntityToVoid } from '../../../../../CommonTypes/BaseViewModel';
+import { MenuItem } from '../../AIWidgets/AIWidgetActions/AIWidgetActions';
+
+interface MessageContextMenuProps {
+  theme?: UiKitTheme;
+  message: MessageEntity;
+  onReply: FunctionTypeMessageEntityToVoid;
+  onForward: FunctionTypeMessageEntityToVoid;
+  enableForwarding: boolean;
+  enableReplying: boolean;
+}
+
+export default function MessageContextMenu(props: MessageContextMenuProps) {
+  const {
+    theme,
+    message,
+    onReply,
+    onForward,
+    enableForwarding,
+    enableReplying,
+  } = props;
+  const menuItems: MenuItem[] = [];
+
+  if (enableReplying) {
+    menuItems.push({
+      title: 'Reply',
+      action: () => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        if (onReply) onReply(message);
+      },
+    });
+  }
+  if (enableForwarding) {
+    menuItems.push({
+      title: 'Forward',
+      action: () => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        if (onForward) onForward(message);
+      },
+    });
+  }
+
+  return (
+    <div className="message-context-menu">
+      <ContextMenu
+        widgetToRender={
+          <EditDots
+            color={theme ? theme.secondaryText() : 'var(--secondary-text)'}
+          />
+        }
+        items={menuItems}
+      />
+    </div>
+  );
+}