isometrik-chat 0.1.0

package/src/utils/media.js

@@ -0,0 +1,79 @@
+import { css } from "styled-components";
+
+export const mobilesmall = (inner) => css`
+  @media (max-width: 20rem) {
+    ${inner};
+  }
+`;
+
+export const mobilemedium = (inner) => css`
+  @media (max-width: 30rem) {
+    ${inner};
+  }
+`;
+
+export const gridLayoutXS = (inner) => css`
+  @media (max-width: 767px) {
+    ${inner};
+  }
+`;
+
+export const mobile = (inner) => css`
+  @media (max-width: 48rem) {
+    ${inner};
+  }
+`;
+
+export const tablet = (inner) => css`
+  @media (max-width: 64rem) {
+    ${inner};
+  }
+`;
+
+export const laptopLarge = (inner) => css`
+  @media (min-width: 1092px) {
+    ${inner};
+  }
+`;
+
+export const tabletOnly = (inner) => css`
+  @media (min-width: 48rem) and (max-width: 64rem) {
+    ${inner};
+  }
+`;
+
+export const desktopsmall = (inner) => css`
+  @media (max-width: 89rem) {
+    ${inner};
+  }
+`;
+
+export const gridLayoutMD = (inner) => css`
+  @media (max-width: 1199px) {
+    ${inner};
+  }
+`;
+
+export const gridLayoutSM = (inner) => css`
+  @media (max-width: 1023px) {
+    ${inner};
+  }
+`;
+
+export const gridLayoutSMPlus = (inner) => css`
+  @media (min-width: 1024px) {
+    ${inner};
+  }
+`;
+
+export const wrapperLimit = (inner) => css`
+  @media (min-width: 1816px) {
+    ${inner};
+  }
+`;
+
+export const ipadSM = (inner) => css`
+  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
+    ${inner};
+  }
+`;

package/src/view/component/BlockedContactSlide.js

@@ -0,0 +1,134 @@
+import React, { useState } from "react";
+import { useEffect } from "react";
+import styled from "styled-components";
+import CustomModal from "../../components/CustomModal";
+import ImageComponent from "../../components/ImageComponent";
+import ModalDialog from "../../components/Modal/ModalDialog";
+import { USER_UNBLOCKED } from "../../lib/constant";
+import { getUserConversationDetails, postUnblockUser } from "../../lib/helpers";
+import client from "../../utils/chatSdk";
+import { CLOSE_ICON } from "../../utils/global";
+
+const BlockContactList = styled.div`
+  display: flex;
+  align-items: center;
+  height: 4.4rem;
+  position: relative;
+  width: 100%;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--chat_hover);
+  }
+`;
+
+const BlockedUser = styled.div`
+  padding-right: 30px;
+  height: 72px;
+  border-bottom: 1px solid var(--border_color);
+  display: flex;
+  flex-basis: auto;
+  // flex-direction: column;
+  flex-grow: 1;
+  justify-content: space-between;
+  align-items: center;
+  min-width: 0;
+  color: var(--black);
+`;
+
+const BlockedContactImage = styled.div`
+  padding: 0px 15px 0px 13px;
+
+  .user-image {
+    height: 49px;
+    width: 49px;
+    border-radius: 50%;
+  }
+`;
+
+const UnBlockedData = styled.div`
+display: flex;
+justify-content: center;
+position: absolute;
+top: 50%;
+height: 100%;
+width: 100%;
+color:var(--black);
+  }
+`;
+
+function BlockedContactSlide(props) {
+  const { theme,conversationId,setUserConversationDetail, setToastStatus} = props;
+  const [blockedList, setBlockedList] = useState([]);
+  const [unBlockUser , setUnBlockUser] = useState({unblock:false, data:{}});
+ 
+  const blockApi = ()=>{
+      client.user.getUserBlock().then((res) => {
+        setBlockedList(res?.users); 
+      }).catch((error)=>{
+        console.log("error", error);
+        setBlockedList([]); 
+      }) 
+  }
+  const UnBlockHandler = (data)=>{
+    setUnBlockUser({unblock:true, data:data});
+  }
+  useEffect(() => {
+   blockApi();
+  }, []);
+
+  const handleOnCloseModal = ()=>{
+  setUnBlockUser({...unBlockUser,unblock:false, data:{}});  
+  }
+
+  const handleUnblockUser = async ()=>{
+    const res = await  postUnblockUser(unBlockUser?.data?.userId );
+    setToastStatus({open: true, variant:"success", message: res.msg}); 
+   if(res.msg===USER_UNBLOCKED){
+    setUnBlockUser({...unBlockUser,unblock:false, data:{}});
+    blockApi();
+    const response = await getUserConversationDetails(conversationId);
+    setUserConversationDetail(response);
+
+   }
+  }
+  
+  return (
+    <>
+    <div style={{ marginTop: "109px" }}>
+      {blockedList && blockedList.length >0 ? (
+        blockedList?.map((data,index) => {
+          return (
+            <BlockContactList key={index}>
+              <BlockedContactImage>
+                <ImageComponent
+                  src={data?.userProfileImageUrl}
+                  className="user-image"
+                  alt={data?.userName}
+                />
+              </BlockedContactImage>
+
+              <BlockedUser>
+                {data?.userName}
+                <ImageComponent
+                  src={CLOSE_ICON}
+                  alt={data?.userName}
+                  style={{ height: "12px", width: "12px" }}
+                  className={theme ? "darkicons" : "lighticons"} onClick={()=>UnBlockHandler(data)}
+                />
+              </BlockedUser>
+            </BlockContactList>
+          );
+        })
+      ) : (
+        <UnBlockedData className="">No Blocked Contacts Found</UnBlockedData>
+      )}
+
+    </div>
+    <CustomModal  open={unBlockUser?.unblock}>
+      <ModalDialog userData={unBlockUser?.data} handleOnCloseModal={handleOnCloseModal} handleUnblockUser={handleUnblockUser} />
+    </CustomModal>
+ </>
+  );
+}
+
+export default BlockedContactSlide;

package/src/view/component/Carousle/UpperMenuBar.js

@@ -0,0 +1,106 @@
+import React from "react";
+import { CROSS_CAROUSEL, DOWNLOAD_CAROUSEL, EMOJI_FACE_CAROUSEL, FORWARD_CAROUSEL, GO_TO_MESSAGE_CAROUSEL, MENU_CAROUSEL, STAR_CAROUSEL } from "../../../utils/global";
+import ImageComponent from "../../../components/ImageComponent";
+import { getTimeWithMeridian } from "../../../lib/helpers";
+import { saveAs } from 'file-saver';
+
+const imagesData = [
+    // {
+    //     index: 0,
+    //     name: 'GO_TO_MESSAGE_CAROUSEL',
+    //     src: GO_TO_MESSAGE_CAROUSEL
+    // },
+    // {
+    //     index: 1,
+    //     name: 'STAR_CAROUSEL',
+    //     src: STAR_CAROUSEL
+    // },
+    // {
+    //     index: 2,
+    //     name: 'EMOJI_FACE_CAROUSEL',
+    //     src: EMOJI_FACE_CAROUSEL
+    // },
+    // {
+    //     index: 3,
+    //     name: 'FORWARD_CAROUSEL',
+    //     src: FORWARD_CAROUSEL
+    // },
+    {
+        index: 4,
+        name: 'DOWNLOAD_CAROUSEL',
+        src: DOWNLOAD_CAROUSEL
+    },
+    // {
+    //     index: 5,
+    //     name: 'MENU_CAROUSEL',
+    //     src: MENU_CAROUSEL
+    // },
+    {
+        index: 6,
+        name: 'CROSS_CAROUSEL',
+        src: CROSS_CAROUSEL
+    }
+]
+
+const UpperMenuBar = (props) => {
+    const { scrolledPositionRef, chatMedia } = props;
+    const index = scrolledPositionRef.current;
+    const dataToShow = chatMedia[index];
+    const UpperMenuBarClicked = (data) => {
+        switch (data.index) {
+            case 4:
+                // {
+                // const mediaDownload = dataToShow?.attachments?.[0]; // Replace with your media URL
+                // // window.location.href = fileUrl;
+                // const content = mediaDownload.mediaUrl; // Replace with your media content
+                // const file = new FileReader(content);
+                // const blob = new Blob([content], { type: 'text/plain' });
+                // const fileUrl = URL.createObjectURL(blob);
+
+                // const link = document.createElement('a');
+                // link.href = fileUrl;
+                // link.download = mediaDownload.name; // Replace with your desired file name
+                // document.body.appendChild(link);
+                // link.click();
+                // document.body.removeChild(link);
+
+                // URL.revokeObjectURL(fileUrl);
+                // }
+                saveAs(chatMedia[index]?.attachments?.[0]?.mediaUrl, chatMedia[index]?.body);
+                break;
+            case 6:
+                document.getElementsByTagName('dialog')[0].close();
+                break;
+            default:
+                console.log(data.index);
+        }
+    };
+
+    return <div className="d-flex justify-content-between">
+        <div className="d-flex">
+            <ImageComponent src={dataToShow?.senderProfileImageUrl} height={40} width={40} style={{ borderRadius: '50%' }} />
+            <div className='chat_headerInfo'>
+                <p>
+                    {dataToShow?.senderName}
+                </p>
+                <p>
+                    {getTimeWithMeridian(new Date(dataToShow?.sentAt))}
+                </p>
+            </div>
+        </div>
+        <div className="pt-2">
+            {
+                imagesData.map((image, index) => (
+                    <span className="m-3 pointer" onClick={() => UpperMenuBarClicked(image)}>
+                        <ImageComponent
+                            src={image.src}
+                            alt={image.name}
+                        />
+                    </span>
+                ))
+            }
+        </div>
+    </div>
+};
+
+export default UpperMenuBar;

package/src/view/component/Carousle/index.js

@@ -0,0 +1,204 @@
+import React, { useEffect } from 'react'
+import { LEFT_ARROW_CAROUSEL } from '../../../utils/global';
+
+const SliderCarousal = (props) => {
+    const {
+        assets,  // mandatory
+        selectedMediaIndex,
+        scrolledPositionRef
+    } = props;
+
+    const ImageContainerRef = React.useRef(null);
+    const thumbnailSlider = React.useRef(null);
+
+    useEffect(() => {
+        const ImageContainer = ImageContainerRef.current;
+        if (ImageContainer) ImageContainer.style.transform = `translateX(-${(selectedMediaIndex) * 100}%)`;
+        scrolledPositionRef.current = selectedMediaIndex;
+        handleSelectedThumbnail(scrolledPositionRef.current);
+    }, [selectedMediaIndex]);
+
+    const handleOnClickThumbnail = (index) => {
+        const ImageContainer = ImageContainerRef.current;
+        if (ImageContainer) ImageContainer.style.transform = `translateX(-${(index) * 100}%)`;
+        scrolledPositionRef.current = index;
+        handleSelectedThumbnail(scrolledPositionRef.current);
+    }
+
+    const prevSlide = () => {
+        const ImageContainer = ImageContainerRef.current;
+        if (!assets.length) return;
+        if (!scrolledPositionRef.current) {
+            ImageContainer.style.transform = `translateX(-${(assets.length - 1) * 100}%)`;
+            scrolledPositionRef.current = assets.length - 1;
+            handleSelectedThumbnail(assets.length - 1);
+            return;
+        }
+        if (ImageContainer) ImageContainer.style.transform = `translateX(-${(scrolledPositionRef.current - 1) * 100}%)`;
+        scrolledPositionRef.current -= 1;
+        handleSelectedThumbnail(scrolledPositionRef.current);
+    }
+
+    const nextSlide = () => {
+        const ImageContainer = ImageContainerRef.current;
+        if (!assets.length) return;
+        if ((scrolledPositionRef.current + 1) >= assets?.length) {
+            ImageContainer.style.transform = `translateX(0%)`;
+            scrolledPositionRef.current = 0;
+            handleSelectedThumbnail(0);
+            return;
+        }
+        if (ImageContainer) ImageContainer.style.transform = `translateX(-${(scrolledPositionRef.current + 1) * 100}%)`;
+        scrolledPositionRef.current += 1;
+        handleSelectedThumbnail(scrolledPositionRef.current);
+    }
+
+    const handleSelectedThumbnail = (selectedIndex) => {
+        const thumbnails = document.querySelectorAll('div.thumbnail');
+
+        Array.from(thumbnails).forEach((ele, idx) => {
+            thumbnails[idx]?.classList.remove('activeThumbnail');
+        })
+        thumbnails[selectedIndex]?.classList.add('activeThumbnail');
+    }
+
+    return (
+        <>
+            <div className='outerContainer position-relative col-12 p-0'>
+                <div>
+                    <button className={`left_navigation_arrow absolute ${scrolledPositionRef.current === 0 && 'disable_UI'}`} onClick={() => prevSlide()}> <img src={LEFT_ARROW_CAROUSEL} /> </button>
+                    <button className={`right_navigation_arrow absolute ${scrolledPositionRef.current === assets.length - 1 && 'disable_UI'}`} onClick={() => nextSlide()}> <img src={LEFT_ARROW_CAROUSEL} /> </button>
+                </div>
+                <div className='mainSlider position-relative d-flex w-100 mb-5' ref={ImageContainerRef} >
+                    {assets?.map((imgData, idx) => (
+                        <div className='currImg position-relative h-auto' key={idx}>
+                            {
+                                imgData?.extension === 'mp4'
+                                    ? <video controls style={{ objectFit: 'contain', width: '100%', height: '100%' }}>
+                                        <source src={imgData.mediaUrl} type="video/mp4" />
+                                    </video>
+                                    : <img src={imgData.mediaUrl} style={{ objectFit: 'contain', width: '100%', height: '100%' }} />
+                            }
+                        </div>
+                    ))}
+                </div>
+                <div className='thumbnailSlider' ref={thumbnailSlider}>
+                    {assets?.map((data, idx) => (
+                        <div onClick={() => handleOnClickThumbnail(idx)} key={data.id} className={`${idx === 0 ? "activeThumbnail" : ""} thumbnail position-relative`}>
+                            {
+                                data?.extension === 'mp4'
+                                    ? <video controls style={{ objectFit: 'contain', width: '100%', height: '100%' }}>
+                                        <source src={data.mediaUrl} type="video/mp4" />
+                                    </video>
+                                    : <img alt={data?.title} src={data.mediaUrl} width={100} height={70} style={{ objectFit: 'contain' }} />
+                            }
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <style jsx>
+                {`
+                .outerContainer {
+                    margin: auto;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    transition: visibility .3s,opacity .3s cubic-bezier(.1,.82,.25,1);
+                    width: 100%;
+                    overflow-x: hidden;
+                }
+                .mainSlider {
+                    transition: all 450ms ease-in-out 0ms;
+                }
+                .currImg {
+                    min-width: 100%;
+                    height: 100%;
+                    min-height: 485px;
+                    max-height: 485px;
+                    object-fit: cover;
+                    object-position: center;
+                    border-radius: 12px;
+                    overflow: hidden;
+                    cursor: pointer;
+                }
+                :global(.currImg img) {
+                    background: transparent;
+                }
+                .thumbnailSlider {
+                    display: flex;
+                    width: 100%;
+                    cursor: pointer;
+                    transition: all 450ms ease-in-out 0ms;
+                    overflow-x: auto;
+                }
+                .thumbnail {
+                    box-sizing: border-box;
+                    margin-right: 6px;
+                    max-height: 70px;
+                    min-height: 70px;
+                    min-width: 100px;
+                    max-width: 100px;
+                    border-radius: 6px;
+                    overflow: hidden;
+                }
+                .activeThumbnail {
+                    border: 2px solid #fff;
+                    border-radius: 6px;
+                    padding: 2px;
+                }
+                ::-webkit-scrollbar {
+                    height: 0px;
+                }
+                .left_navigation_arrow, .right_navigation_arrow {
+                    z-index: 1;
+                    background: transparent;
+                    border-radius: 50%;
+                    top: 45%;
+                    transform: translateY(-50%);
+                    cursor: pointer;
+                    outline: none;
+                    border: none;
+                }
+                .left_navigation_arrow:active img {
+                    filter: contrast(10%);
+                }
+                .right_navigation_arrow:active img{
+                    filter: contrast(10%);
+                }
+
+                .left_navigation_arrow {
+                    left: 15px;
+                }
+
+                .right_navigation_arrow {
+                    transform: rotate(180deg);
+                    right: 15px;
+                }
+                @media(max-width: 576px) {
+                    .currImg {
+                    min-height: 260px;
+                    max-height: 260px;
+                    }
+                    .thumbnail {
+                    max-height: 62.8px;
+                    min-height: 62.8px;
+                    min-width: 62.8px;
+                    max-width: 62.8px;
+                    }
+                    .left_navigation_arrow > img, .right_navigation_arrow > img {
+                    width: 40px;
+                    }
+                    .left_navigation_arrow {
+                        top: 35%;
+                    }
+                    
+                    .right_navigation_arrow {
+                    top: 29%;
+                    }
+                }
+            `}
+            </style>
+        </>
+    );
+};
+export default SliderCarousal;