-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #350 from AppQuality/develop
refactor new feat media attachments
- Loading branch information
Showing
13 changed files
with
428 additions
and
596 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { useToast, Notification } from "../../notifications"; | ||
| import { CommentMedia } from "../_types"; | ||
| import { v4 as uuidv4 } from "uuid"; | ||
|
|
||
| export const acceptedMediaTypes = /^(image|video)\//; | ||
|
|
||
| export function useMedia() { | ||
| const { addToast } = useToast(); | ||
| function getValidMedia(data: FileList): File[] { | ||
| const wrongFiles = Array.from(data).filter( | ||
| (file) => !acceptedMediaTypes.test(file.type) | ||
| ); | ||
| if (wrongFiles.length) { | ||
| addToast( | ||
| ({ close }) => ( | ||
| <Notification | ||
| onClose={close} | ||
| type="error" | ||
| message={ | ||
| wrongFiles.length === 1 | ||
| ? `${wrongFiles[0].name} not supported, please upload video or image only` | ||
| : "Some attachments are not supported, please upload video or image only" | ||
| } | ||
| isPrimary | ||
| /> | ||
| ), | ||
| { placement: "top" } | ||
| ); | ||
| } | ||
| return Array.from(data).filter((file) => | ||
| acceptedMediaTypes.test(file.type) | ||
| ); | ||
| } | ||
|
|
||
| function getMedia(data: FileList) { | ||
| return getValidMedia(data).map((file) => { | ||
| return Object.assign(file, { | ||
| url: URL.createObjectURL(file), | ||
| isLoadingMedia: true, | ||
| id: uuidv4(), | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| return { getMedia }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import { Lightbox } from "../../lightbox"; | ||
| import { Slider } from "../../slider"; | ||
| import { CommentMedia } from "../_types"; | ||
| import { Player } from "../../player"; | ||
|
|
||
| interface MediaLightBoxProps { | ||
| isOpen: boolean; | ||
| header: React.ReactNode; | ||
| onClose: () => void; | ||
| slideChange: (index: number) => void; | ||
| selectedImageIndex: number; | ||
| thumbnails: CommentMedia[]; | ||
| videoRefs: React.MutableRefObject<Array<HTMLVideoElement | null>>; | ||
| details?: React.ReactNode; | ||
| }; | ||
|
|
||
| const MediaLightBox = ({header, onClose, slideChange, selectedImageIndex, thumbnails, videoRefs, isOpen, details}: MediaLightBoxProps) => { | ||
| if (!isOpen) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <Lightbox onClose={onClose}> | ||
| <Lightbox.Header>{header}</Lightbox.Header> | ||
| <Lightbox.Body> | ||
| <Lightbox.Body.Main style={{ flex: details ? 2 : 3 }}> | ||
| <Slider | ||
| prevArrow={<Slider.PrevButton isBright />} | ||
| nextArrow={<Slider.NextButton isBright />} | ||
| onSlideChange={slideChange} | ||
| initialSlide={selectedImageIndex} | ||
| > | ||
| {thumbnails.map((item) => ( | ||
| <Slider.Slide key={item.id}> | ||
| {item.type.includes("image") && ( | ||
| <img | ||
| src={item.url} | ||
| alt={`media ${item.name}`} | ||
| style={{ maxHeight: "100%", height: "auto" }} | ||
| /> | ||
| )} | ||
| {item.type.includes("video") && item.url && ( | ||
| <Player | ||
| ref={(ref) => { | ||
| videoRefs.current.push(ref); | ||
| }} | ||
| url={item.url} | ||
| /> | ||
| )} | ||
| </Slider.Slide> | ||
| ))} | ||
| </Slider> | ||
| </Lightbox.Body.Main> | ||
| {details && ( | ||
| <Lightbox.Body.Details style={{ flex: 1 }}> | ||
| {details} | ||
| </Lightbox.Body.Details> | ||
| )} | ||
| </Lightbox.Body> | ||
| <Lightbox.Close aria-label="Close modal" /> | ||
| </Lightbox> | ||
| ); | ||
| } | ||
|
|
||
| export default MediaLightBox; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.