(null)
+
+ const checkNewComments = useCallback(async () => {
+ try {
+ const offset = listComments.length
+ const url = `/arbitrary/resources/search?mode=ALL&service=BLOG_COMMENT&query=qcomment_v1_qblog_${postId.slice(
+ -12
+ )}&limit=20&includemetadata=false&offset=${offset}&reverse=false&excludeblocked=true`
+ const response = await fetch(url, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ })
+ const responseData = await response.json()
+ setNewMessages(responseData.length)
+ } catch (error) {}
+ }, [listComments, postId])
+
+ const checkNewMessagesFunc = useCallback(() => {
+ let isCalling = false
+ interval.current = setInterval(async () => {
+ if (isCalling) return
+ isCalling = true
+ const res = await checkNewComments()
+ isCalling = false
+ }, 15000)
+ }, [checkNewComments])
+
+ useEffect(() => {
+ checkNewMessagesFunc()
+
+ return () => {
+ if (interval?.current) {
+ clearInterval(interval.current)
+ }
+ }
+ }, [checkNewMessagesFunc])
+
+ return (
+ <>
+
+ setIsOpen((prev) => !prev)}
+ >
+ Comments
+
+ {listComments?.length > 0 && (
+
+ {listComments.length < 10 ? listComments.length : '9+'}
+
+ )}
+
+
+ {}}
+ ModalProps={{
+ keepMounted: true // Better performance on mobile
+ }}
+ sx={{
+ '& .MuiPaper-root': {
+ width: '400px'
+ }
+ }}
+ >
+
+
+
+ {newMessages > 0 && (
+
+ )}
+
+ setIsOpen(false)}
+ />
+
+
+
+
+ {structuredCommentList.map((comment: any) => {
+ return (
+
+ )
+ })}
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/common/ContextMenu/ContextMenuResource.tsx b/src/components/common/ContextMenu/ContextMenuResource.tsx
new file mode 100644
index 0000000..af935f8
--- /dev/null
+++ b/src/components/common/ContextMenu/ContextMenuResource.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { useDispatch } from 'react-redux'
+import { setNotification } from '../../../state/features/notificationsSlice'
+import { Box } from '@mui/material'
+
+export default function ContextMenuResource({
+ children,
+ name,
+ service,
+ identifier,
+ link
+}: any) {
+ const [contextMenu, setContextMenu] = React.useState<{
+ mouseX: number
+ mouseY: number
+ } | null>(null)
+ const dispatch = useDispatch()
+ const handleContextMenu = (event: React.MouseEvent) => {
+ event.preventDefault()
+ setContextMenu(
+ contextMenu === null
+ ? {
+ mouseX: event.clientX + 2,
+ mouseY: event.clientY - 6
+ }
+ : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
+ // Other native context menus might behave different.
+ // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
+ null
+ )
+ }
+
+ const handleClose = () => {
+ setContextMenu(null)
+ }
+
+ return (
+
+ {children}
+
+
+ )
+}
diff --git a/src/components/common/CustomIcon.tsx b/src/components/common/CustomIcon.tsx
new file mode 100644
index 0000000..ae9ddd5
--- /dev/null
+++ b/src/components/common/CustomIcon.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+import { styled } from '@mui/system'
+
+const CustomSvgIcon: React.FC = styled(SvgIcon)(({ theme }) => ({
+ cursor: 'pointer',
+ color: '#5f6368',
+ transition: 'all 0.2s',
+ '&:hover': {
+ transform: 'scale(1.1)'
+ }
+})) as unknown as React.FC
+
+export const CustomIcon: React.FC = (props) => {
+ return
+}
diff --git a/src/components/common/DownloadTaskManager.tsx b/src/components/common/DownloadTaskManager.tsx
new file mode 100644
index 0000000..afc00a8
--- /dev/null
+++ b/src/components/common/DownloadTaskManager.tsx
@@ -0,0 +1,289 @@
+import React, { useState, useEffect } from 'react'
+import {
+ Accordion,
+ AccordionDetails,
+ AccordionSummary,
+ Box,
+ LinearProgress,
+ List,
+ ListItem,
+ ListItemIcon,
+ Typography,
+ useTheme
+} from '@mui/material'
+import { Movie, ArrowDropDown } from '@mui/icons-material'
+import { SxProps } from '@mui/system'
+import { Theme } from '@mui/material/styles'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { removePrefix } from '../../utils/blogIdformats'
+import { useLocation, useNavigate } from 'react-router-dom'
+import AudiotrackIcon from '@mui/icons-material/Audiotrack'
+import {
+ setCurrAudio,
+ setShowingAudioPlayer
+} from '../../state/features/globalSlice'
+import { MAIL_ATTACHMENT_SERVICE_TYPE } from '../../constants/mail'
+
+type DownloadItem = {
+ id: string
+ name: string
+ progress: number
+}
+
+export const DownloadTaskManager: React.FC = () => {
+ const { downloads } = useSelector((state: RootState) => state.global)
+ const dispatch = useDispatch()
+ const location = useLocation()
+ const isMailRoute = location.pathname === '/mail'
+ const theme = useTheme()
+ const [visible, setVisible] = useState(false)
+ const [hidden, setHidden] = useState(true)
+ const navigate = useNavigate()
+ const containerStyles: SxProps = {
+ position: 'fixed',
+ top: '50px',
+ right: 0,
+ zIndex: 1000,
+ maxHeight: '80%',
+ overflowY: 'auto',
+ backgroundColor: 'background.paper',
+ boxShadow: 2,
+ display: 'block'
+ }
+
+ useEffect(() => {
+ // Simulate downloads for demo purposes
+
+ if (visible) {
+ setTimeout(() => {
+ setHidden(true)
+ setVisible(false)
+ }, 3000)
+ }
+ }, [visible])
+
+ const toggleVisibility = () => {
+ setVisible(true)
+ setHidden(false)
+ }
+
+ useEffect(() => {
+ if (Object.keys(downloads).length === 0) return
+ setVisible(true)
+ setHidden(false)
+ }, [downloads])
+
+ if (isMailRoute) return null
+ if (
+ !downloads ||
+ Object.keys(downloads).filter(
+ (item) => downloads[item].service !== MAIL_ATTACHMENT_SERVICE_TYPE
+ ).length === 0
+ )
+ return null
+
+ return (
+
+
+ }
+ aria-controls="panel1a-content"
+ id="panel1a-header"
+ sx={{
+ minHeight: 'unset',
+ height: '36px',
+ backgroundColor: theme.palette.primary.light,
+ '&.MuiAccordionSummary-content': {
+ padding: 0,
+ margin: 0
+ },
+ '&.Mui-expanded': {
+ minHeight: 'unset',
+ height: '36px'
+ }
+ }}
+ >
+
+ Downloads
+
+
+
+
+ {Object.keys(downloads)
+ .filter(
+ (item) =>
+ downloads[item].service !== MAIL_ATTACHMENT_SERVICE_TYPE
+ )
+ .map((download: any) => {
+ const downloadObj = downloads[download]
+ const progress = downloads[download]?.status?.percentLoaded || 0
+ const status = downloads[download]?.status?.status
+ const service = downloads[download]?.service
+ return (
+ {
+ if (service === 'AUDIO' && downloadObj?.identifier) {
+ dispatch(setCurrAudio(downloadObj?.identifier))
+ dispatch(setShowingAudioPlayer(true))
+ return
+ }
+
+ const str = downloadObj?.blogPost?.postId
+ if (!str) return
+ const arr = str.split('-post-')
+ const str1 = arr[0]
+ const str2 = arr[1]
+ const blogId = removePrefix(str1)
+ navigate(
+ `/${downloadObj?.blogPost.user}/${blogId}/${str2}`
+ )
+ }}
+ >
+
+
+ {service === 'AUDIO' && (
+
+ )}
+ {service === 'VIDEO' && (
+
+ )}
+
+
+
+
+
+
+ {`${progress?.toFixed(0)}%`}{' '}
+ {status && status === 'REFETCHING' && '- refetching'}
+ {status && status === 'DOWNLOADED' && '- building'}
+
+
+
+ {downloadObj?.identifier}
+
+
+ )
+ })}
+
+
+
+
+ {/* {}} aria-label="toggle download manager">
+
+ */}
+ {/*
+
+ {Object.keys(downloads).map((download: any) => {
+ const downloadObj = downloads[download]
+ const progress = downloads[download]?.status?.percentLoaded || 0
+ return (
+
+
+
+
+
+
+
+
+
+ {`${progress}%`}
+
+
+
+
+ )
+ })}
+
+ */}
+
+ )
+}
diff --git a/src/components/common/DraggableResizableGrid.tsx b/src/components/common/DraggableResizableGrid.tsx
new file mode 100644
index 0000000..871fec7
--- /dev/null
+++ b/src/components/common/DraggableResizableGrid.tsx
@@ -0,0 +1,55 @@
+// DraggableResizableGrid.tsx
+import React from 'react'
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+import GridLayout, { Layout } from 'react-grid-layout'
+
+import './DraggableResizableGrid.css' // Add your custom CSS for the grid layout
+
+interface GridItem {
+ id: string
+ content: React.ReactNode
+}
+
+interface DraggableResizableGridProps {
+ items: GridItem[]
+ cols?: number
+ rowHeight?: number
+ onLayoutChange?: (layout: Layout[]) => void
+}
+
+const DraggableResizableGrid: React.FC = ({
+ items,
+ cols = 12,
+ rowHeight = 30,
+ onLayoutChange
+}) => {
+ const layout = items.map((item, index) => ({
+ i: item.id,
+ x: index % cols,
+ y: Math.floor(index / cols),
+ w: 4,
+ h: 4
+ }))
+
+ return (
+
+
+ {items.map((item) => (
+
+ {item.content}
+
+ ))}
+
+
+ )
+}
+
+export default DraggableResizableGrid
diff --git a/src/components/common/ErrorBoundary.tsx b/src/components/common/ErrorBoundary.tsx
new file mode 100644
index 0000000..58b3185
--- /dev/null
+++ b/src/components/common/ErrorBoundary.tsx
@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react'
+
+interface ErrorBoundaryProps {
+ children: ReactNode
+ fallback: ReactNode
+}
+
+interface ErrorBoundaryState {
+ hasError: boolean
+}
+
+class ErrorBoundary extends React.Component<
+ ErrorBoundaryProps,
+ ErrorBoundaryState
+> {
+ state: ErrorBoundaryState = {
+ hasError: false
+ }
+
+ static getDerivedStateFromError(_: Error): ErrorBoundaryState {
+ return { hasError: true }
+ }
+
+ componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+ // You can log the error and errorInfo here, for example, to an error reporting service.
+ console.error('Error caught in ErrorBoundary:', error, errorInfo)
+ }
+
+ render(): React.ReactNode {
+ if (this.state.hasError) return this.props.fallback
+
+ return this.props.children
+ }
+}
+
+export default ErrorBoundary
diff --git a/src/components/common/FilePanel.tsx b/src/components/common/FilePanel.tsx
new file mode 100644
index 0000000..f08b313
--- /dev/null
+++ b/src/components/common/FilePanel.tsx
@@ -0,0 +1,257 @@
+import React, { useState, useEffect } from 'react'
+import { styled, Box } from '@mui/system'
+import {
+ Drawer,
+ List,
+ ListItem,
+ ListItemText,
+ Typography,
+ ButtonBase,
+ Button,
+ Tooltip
+} from '@mui/material'
+import VideoCallIcon from '@mui/icons-material/VideoCall'
+import VideoModal from './VideoPublishModal'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import AttachFileIcon from '@mui/icons-material/AttachFile'
+import { AudioModal } from './AudioPublishModal'
+import AudioFileIcon from '@mui/icons-material/AudioFile'
+import { GenericModal } from './GenericPublishModal'
+interface VideoPanelProps {
+ onSelect: (video: Video) => void
+ height?: string
+ width?: string
+}
+
+interface VideoApiResponse {
+ videos: Video[]
+}
+
+const Panel = styled('div')`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ padding-bottom: 10px;
+ height: 100%;
+ overflow: hidden;
+
+ &::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: #888;
+ border-radius: 4px;
+ }
+
+ &::-webkit-scrollbar-thumb:hover {
+ background-color: #555;
+ }
+`
+
+const PublishButton = styled(Button)`
+ /* position: absolute;
+ bottom: 20px;
+ left: 0;
+ right: 0;
+ margin: auto; */
+ max-width: 80%;
+`
+
+export const FilePanel: React.FC = ({
+ onSelect,
+ height,
+ width
+}) => {
+ const [isOpen, setIsOpen] = useState(false)
+ const [videos, setVideos] = useState([])
+ const [isOpenVideoModal, setIsOpenVideoModal] = useState(false)
+ const { user } = useSelector((state: RootState) => state.auth)
+ const [editVideoIdentifier, setEditVideoIdentifier] = useState<
+ string | null | undefined
+ >()
+ const fetchVideos = React.useCallback(async (): Promise => {
+ if (!user?.name) return []
+
+ let res = []
+ try {
+ // res = await qortalRequest({
+ // action: 'LIST_QDN_RESOURCES',
+ // service: 'FILE',
+ // name: user.name,
+ // includeMetadata: true,
+ // limit: 100,
+ // offset: 0,
+ // reverse: true
+ // })
+
+ const res2 = await fetch(
+ `/arbitrary/resources?&service=FILE&name=${user.name}&includemetadata=true&limit=100&offset=0&reverse=true`
+ )
+ const resData = await res2.json()
+ if (Array.isArray(resData)) {
+ res = resData
+ }
+ } catch (error) {}
+
+ // Replace this URL with the actual API endpoint
+
+ return res
+ }, [user])
+ useEffect(() => {
+ fetchVideos().then((fetchedVideos) => setVideos(fetchedVideos))
+ }, [])
+
+ const handleToggle = () => {
+ setIsOpen(!isOpen)
+ }
+
+ const handleClick = (video: Video) => {
+ onSelect(video)
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ Select File
+
+
+ List of Files in QDN under your name (FILE service)
+
+
+
+
+ {videos.map((video) => (
+
+ handleClick(video)}
+ sx={{ width: '100%' }}
+ >
+
+
+
+
+ ))}
+
+
+ {
+ setEditVideoIdentifier(null)
+ setIsOpenVideoModal(true)
+ }}
+ >
+ Publish new file
+
+
+
+
+ {
+ setIsOpenVideoModal(false)
+ setEditVideoIdentifier(null)
+ }}
+ open={isOpenVideoModal}
+ onPublish={(value) => {
+ fetchVideos().then((fetchedVideos) => setVideos(fetchedVideos))
+ setIsOpenVideoModal(false)
+ }}
+ editVideoIdentifier={editVideoIdentifier}
+ />
+
+ )
+}
+
+// Add this to your 'types.ts' file
+export interface Video {
+ name: string
+ service: string
+ identifier: string
+ metadata: {
+ title: string
+ description: string
+ tags: string[]
+ category: string
+ categoryName: string
+ }
+ size: number
+ created: number
+ updated: number
+}
diff --git a/src/components/common/GenericPublishModal.tsx b/src/components/common/GenericPublishModal.tsx
new file mode 100644
index 0000000..91df14e
--- /dev/null
+++ b/src/components/common/GenericPublishModal.tsx
@@ -0,0 +1,317 @@
+import React, { useState } from 'react'
+import {
+ Box,
+ Button,
+ Modal,
+ TextField,
+ Typography,
+ Select,
+ MenuItem,
+ FormControl,
+ InputLabel,
+ SelectChangeEvent,
+ OutlinedInput,
+ Chip,
+ IconButton
+} from '@mui/material'
+import { styled } from '@mui/system'
+import { useDropzone } from 'react-dropzone'
+import { toBase64 } from '../../utils/toBase64'
+import AddIcon from '@mui/icons-material/Add'
+import CloseIcon from '@mui/icons-material/Close'
+import { usePublishGeneric } from './PublishGeneric'
+import { useDispatch } from 'react-redux'
+import { setNotification } from '../../state/features/notificationsSlice'
+
+const StyledModal = styled(Modal)(({ theme }) => ({
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center'
+}))
+
+const ChipContainer = styled(Box)({
+ display: 'flex',
+ flexWrap: 'wrap',
+ '& > *': {
+ margin: '4px'
+ }
+})
+
+const ModalContent = styled(Box)(({ theme }) => ({
+ backgroundColor: theme.palette.background.paper,
+ padding: theme.spacing(4),
+ borderRadius: theme.spacing(1),
+ width: '40%',
+ '&:focus': {
+ outline: 'none'
+ }
+}))
+
+interface GenericModalProps {
+ open: boolean
+ onClose: () => void
+ onPublish: (value: any) => void
+ acceptedFileType?: string
+ acceptedFileTypes?: string[]
+ service: string
+ identifierPrefix: string
+ editVideoIdentifier?: string | null | undefined
+}
+
+interface SelectOption {
+ id: string
+ name: string
+}
+const maxSize = 500 * 1024 * 1024
+
+export const GenericModal: React.FC = ({
+ open,
+ onClose,
+ onPublish,
+ acceptedFileType,
+ acceptedFileTypes,
+ service,
+ identifierPrefix,
+ editVideoIdentifier
+}) => {
+ const [file, setFile] = useState(null)
+ const [title, setTitle] = useState('')
+ const [description, setDescription] = useState('')
+ const [selectedOption, setSelectedOption] = useState(
+ null
+ )
+ const [inputValue, setInputValue] = useState('')
+ const [chips, setChips] = useState([])
+
+ const [options, setOptions] = useState([])
+ const [tags, setTags] = useState([])
+ const { publishGeneric } = usePublishGeneric()
+ const dispatch = useDispatch()
+
+ let acceptedFile = {}
+ if (acceptedFileType) {
+ acceptedFile = {
+ [acceptedFileType]: []
+ }
+ }
+ const { getRootProps, getInputProps } = useDropzone({
+ ...acceptedFile,
+ maxFiles: 1,
+ maxSize,
+ onDrop: (acceptedFiles) => {
+ setFile(acceptedFiles[0])
+ },
+ onDropRejected: (rejectedFiles) => {
+ dispatch(
+ setNotification({
+ msg: 'Your file is over the 500mb limit.',
+ alertType: 'error'
+ })
+ )
+ }
+ })
+
+ const handleTitleChange = (event: React.ChangeEvent) => {
+ setTitle(event.target.value)
+ }
+
+ const handleDescriptionChange = (
+ event: React.ChangeEvent
+ ) => {
+ setDescription(event.target.value)
+ }
+
+ const handleOptionChange = (event: SelectChangeEvent) => {
+ const optionId = event.target.value
+ const selectedOption = options.find((option) => option.id === optionId)
+ setSelectedOption(selectedOption || null)
+ }
+
+ const handleChipDelete = (index: number) => {
+ const newChips = [...chips]
+ newChips.splice(index, 1)
+ setChips(newChips)
+ }
+
+ const handleSubmit = async () => {
+ const missingFields = []
+
+ if (!title) missingFields.push('title')
+ if (!file) missingFields.push('file')
+ if (missingFields.length > 0) {
+ const missingFieldsString = missingFields.join(', ')
+ const errMsg = `Missing: ${missingFieldsString}`
+
+ return
+ }
+ if (!file) return
+
+ const formattedTags: { [key: string]: string } = {}
+ chips.forEach((tag, i) => {
+ formattedTags[`tag${i + 1}`] = tag
+ })
+
+ try {
+ const base64 = await toBase64(file)
+ if (typeof base64 !== 'string') return
+ const base64String = base64.split(',')[1]
+ const fileExtension = file?.name?.split('.')?.pop()
+ const fileTitle = title?.replace(/ /g, '_')?.slice(0, 20)
+ const filename = `${fileTitle}.${fileExtension}`
+ const res = await publishGeneric({
+ editVideoIdentifier,
+ service,
+ identifierPrefix,
+ title,
+ description,
+ // base64: base64String,
+ file,
+ filename: filename,
+ category: selectedOption?.id || '',
+ ...formattedTags
+ })
+ onPublish(res)
+ setFile(null)
+ setTitle('')
+ setDescription('')
+ onClose()
+ } catch (error) {}
+ }
+
+ const handleInputChange = (event: any) => {
+ setInputValue(event.target.value)
+ }
+
+ const handleInputKeyDown = (event: any) => {
+ if (event.key === 'Enter' && inputValue !== '') {
+ if (chips.length < 5) {
+ setChips([...chips, inputValue])
+ setInputValue('')
+ } else {
+ event.preventDefault()
+ }
+ }
+ }
+
+ const addChip = () => {
+ if (chips.length < 5) {
+ setChips([...chips, inputValue])
+ setInputValue('')
+ }
+ }
+
+ const getListCategories = React.useCallback(async () => {
+ try {
+ const url = `/arbitrary/categories`
+ const response = await fetch(url, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ })
+ const responseData = await response.json()
+ setOptions(responseData)
+ } catch (error) {}
+ }, [])
+
+ React.useEffect(() => {
+ getListCategories()
+ }, [getListCategories])
+
+ return (
+
+
+ {editVideoIdentifier && (
+
+ You are editing: {editVideoIdentifier}
+
+ )}
+
+ Upload {service}
+
+
+
+
+ {file
+ ? file.name
+ : 'Drag and drop a file here or click to select a file'}
+
+
+
+
+ {options.length > 0 && (
+
+ Select a Category
+ }
+ value={selectedOption?.id || ''}
+ onChange={handleOptionChange}
+ >
+ {options.map((option) => (
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {chips.map((chip, index) => (
+ handleChipDelete(index)}
+ deleteIcon={}
+ />
+ ))}
+
+
+
+
+
+ )
+}
diff --git a/src/components/common/ImageUploader.tsx b/src/components/common/ImageUploader.tsx
new file mode 100644
index 0000000..0cac393
--- /dev/null
+++ b/src/components/common/ImageUploader.tsx
@@ -0,0 +1,89 @@
+import React, { useCallback } from 'react'
+import { Box, Button, TextField, Typography, Modal } from '@mui/material'
+import {
+ useDropzone,
+ DropzoneRootProps,
+ DropzoneInputProps
+} from 'react-dropzone'
+import Compressor from 'compressorjs'
+
+const toBase64 = (file: File): Promise =>
+ new Promise((resolve, reject) => {
+ const reader = new FileReader()
+ reader.readAsDataURL(file)
+ reader.onload = () => resolve(reader.result)
+ reader.onerror = (error) => {
+ reject(error)
+ }
+ })
+
+interface ImageUploaderProps {
+ children: React.ReactNode
+ onPick: (base64Img: string) => void
+}
+
+const ImageUploader: React.FC = ({ children, onPick }) => {
+ const onDrop = useCallback(
+ async (acceptedFiles: File[]) => {
+ if (acceptedFiles.length > 1) {
+ return
+ }
+ let compressedFile: File | undefined
+
+ try {
+ const image = acceptedFiles[0]
+ await new Promise((resolve) => {
+ new Compressor(image, {
+ quality: 0.6,
+ maxWidth: 1200,
+ mimeType: 'image/webp',
+ success(result) {
+ const file = new File([result], 'name', {
+ type: 'image/webp'
+ })
+ compressedFile = file
+ resolve()
+ },
+ error(err) {}
+ })
+ })
+ if (!compressedFile) return
+ const base64Img = await toBase64(compressedFile)
+
+ onPick(base64Img as string)
+ } catch (error) {
+ console.error(error)
+ }
+ },
+ [onPick]
+ )
+
+ const {
+ getRootProps,
+ getInputProps,
+ isDragActive
+ }: {
+ getRootProps: () => DropzoneRootProps
+ getInputProps: () => DropzoneInputProps
+ isDragActive: boolean
+ } = useDropzone({
+ onDrop,
+ accept: {
+ 'image/*': []
+ }
+ })
+
+ return (
+
+
+ {children}
+
+ )
+}
+
+export default ImageUploader
diff --git a/src/components/common/LazyLoad.tsx b/src/components/common/LazyLoad.tsx
new file mode 100644
index 0000000..6369d0d
--- /dev/null
+++ b/src/components/common/LazyLoad.tsx
@@ -0,0 +1,47 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useInView } from 'react-intersection-observer'
+import CircularProgress from '@mui/material/CircularProgress'
+
+interface Props {
+ onLoadMore: () => Promise
+}
+
+const LazyLoad: React.FC = ({ onLoadMore }) => {
+ const [isFetching, setIsFetching] = useState(false)
+
+ const firstLoad = useRef(false)
+ const [ref, inView] = useInView({
+ threshold: 0.7
+ })
+
+ useEffect(() => {
+ if (inView) {
+ setIsFetching(true)
+ onLoadMore().finally(() => {
+ setIsFetching(false)
+ firstLoad.current = true
+ })
+ }
+ }, [inView])
+
+ return (
+
+ )
+}
+
+export default LazyLoad
diff --git a/src/components/common/Notification/Notification.tsx b/src/components/common/Notification/Notification.tsx
new file mode 100644
index 0000000..501f081
--- /dev/null
+++ b/src/components/common/Notification/Notification.tsx
@@ -0,0 +1,86 @@
+import { useDispatch, useSelector } from 'react-redux'
+import { toast, ToastContainer, Zoom, Slide } from 'react-toastify'
+import { removeNotification } from '../../../state/features/notificationsSlice'
+import 'react-toastify/dist/ReactToastify.css'
+import { RootState } from '../../../state/store'
+
+const Notification = () => {
+ const dispatch = useDispatch()
+
+ const { alertTypes } = useSelector((state: RootState) => state.notifications)
+
+ if (alertTypes.alertError) {
+ toast.error(`❌ ${alertTypes?.alertError}`, {
+ position: 'bottom-right',
+ autoClose: 4000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ icon: false
+ })
+ dispatch(removeNotification())
+ }
+ if (alertTypes.alertSuccess) {
+ toast.success(`✔️ ${alertTypes?.alertSuccess}`, {
+ position: 'bottom-right',
+ autoClose: 4000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ icon: false
+ })
+ dispatch(removeNotification())
+ }
+ if (alertTypes.alertInfo) {
+ toast.info(`${alertTypes?.alertInfo}`, {
+ position: 'top-right',
+ autoClose: 1300,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ theme: 'light'
+ })
+ dispatch(removeNotification())
+ }
+
+ if (alertTypes.alertInfo) {
+ return (
+
+ )
+ }
+
+ return (
+
+ )
+}
+
+export default Notification
diff --git a/src/components/common/PageLoader.tsx b/src/components/common/PageLoader.tsx
new file mode 100644
index 0000000..e8e5740
--- /dev/null
+++ b/src/components/common/PageLoader.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import CircularProgress from '@mui/material/CircularProgress';
+import Box from '@mui/system/Box';
+import { useTheme } from '@mui/material'
+
+interface PageLoaderProps {
+ size?: number
+ thickness?: number
+}
+
+const PageLoader: React.FC = ({
+ size = 40,
+ thickness = 5
+}) => {
+ const theme = useTheme()
+
+ return (
+
+
+
+ )
+}
+
+export default PageLoader;
diff --git a/src/components/common/Portal.tsx b/src/components/common/Portal.tsx
new file mode 100644
index 0000000..1e0cb26
--- /dev/null
+++ b/src/components/common/Portal.tsx
@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+interface PortalProps {
+ children: React.ReactNode
+}
+
+const Portal: React.FC = ({ children }) => {
+ const [mounted, setMounted] = useState(false)
+
+ useEffect(() => {
+ setMounted(true)
+
+ return () => setMounted(false)
+ }, [])
+
+ return mounted
+ ? createPortal(
+ children,
+ document.querySelector('#modal-root') as HTMLElement
+ )
+ : null
+}
+
+export default Portal
diff --git a/src/components/common/PostPublishModal.tsx b/src/components/common/PostPublishModal.tsx
new file mode 100644
index 0000000..6f65741
--- /dev/null
+++ b/src/components/common/PostPublishModal.tsx
@@ -0,0 +1,281 @@
+import React, { useState } from 'react'
+import {
+ Box,
+ Button,
+ Modal,
+ TextField,
+ Typography,
+ Select,
+ MenuItem,
+ FormControl,
+ InputLabel,
+ SelectChangeEvent,
+ OutlinedInput,
+ Chip,
+ IconButton
+} from '@mui/material'
+import { styled } from '@mui/system'
+import { useDropzone } from 'react-dropzone'
+import { usePublishVideo } from './PublishVideo'
+import { toBase64 } from '../../utils/toBase64'
+import AddIcon from '@mui/icons-material/Add'
+import CloseIcon from '@mui/icons-material/Close'
+const StyledModal = styled(Modal)(({ theme }) => ({
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center'
+}))
+
+const ChipContainer = styled(Box)({
+ display: 'flex',
+ flexWrap: 'wrap',
+ '& > *': {
+ margin: '4px'
+ }
+})
+
+const ModalContent = styled(Box)(({ theme }) => ({
+ backgroundColor: theme.palette.background.paper,
+ padding: theme.spacing(4),
+ borderRadius: theme.spacing(1),
+ width: '40%',
+ '&:focus': {
+ outline: 'none'
+ }
+}))
+
+interface PostModalProps {
+ open: boolean
+ onClose: () => void
+ onPublish: (value: any) => Promise
+ post: any
+ mode?: string
+ metadata?: any
+}
+
+interface SelectOption {
+ id: string
+ name: string
+}
+
+const PostPublishModal: React.FC = ({
+ open,
+ onClose,
+ onPublish,
+ post,
+ mode,
+ metadata
+}) => {
+ const [file, setFile] = useState(null)
+ const [title, setTitle] = useState('')
+ const [description, setDescription] = useState('')
+ const [selectedOption, setSelectedOption] = useState(
+ null
+ )
+ const [inputValue, setInputValue] = useState('')
+ const [chips, setChips] = useState([])
+
+ const [options, setOptions] = useState([])
+ const [tags, setTags] = useState([])
+ const { publishVideo } = usePublishVideo()
+ const { getRootProps, getInputProps } = useDropzone({
+ accept: {
+ 'video/*': []
+ },
+ maxFiles: 1,
+ onDrop: (acceptedFiles) => {
+ setFile(acceptedFiles[0])
+ }
+ })
+
+ React.useEffect(() => {
+ if (post.title) {
+ setTitle(post.title)
+ }
+ // if (post.description) {
+ // setDescription(post.description)
+ // }
+ }, [post])
+
+ React.useEffect(() => {
+ if (mode === 'edit' && metadata) {
+ if (metadata.description) {
+ setDescription(metadata.description)
+ }
+
+ const findCategory = options.find(
+ (option) => option.id === metadata?.category
+ )
+ if (findCategory) {
+ setSelectedOption(findCategory)
+ }
+
+ if (!metadata?.tags || !Array.isArray(metadata?.tags)) return
+
+ setChips(metadata.tags.slice(0, -2))
+ }
+ }, [mode, metadata, options])
+
+ const handleTitleChange = (event: React.ChangeEvent) => {
+ setTitle(event.target.value)
+ }
+
+ const handleDescriptionChange = (
+ event: React.ChangeEvent
+ ) => {
+ setDescription(event.target.value)
+ }
+
+ const handleOptionChange = (event: SelectChangeEvent) => {
+ const optionId = event.target.value
+ const selectedOption = options.find((option) => option.id === optionId)
+ setSelectedOption(selectedOption || null)
+ }
+
+ const handleChipDelete = (index: number) => {
+ const newChips = [...chips]
+ newChips.splice(index, 1)
+ setChips(newChips)
+ }
+
+ const handleSubmit = async () => {
+ const formattedTags: { [key: string]: string } = {}
+ chips.forEach((tag, i) => {
+ formattedTags[`tag${i + 1}`] = tag
+ })
+
+ try {
+ await onPublish({
+ title,
+ description,
+ tags: chips,
+ category: selectedOption?.id || ''
+ })
+ setFile(null)
+ setTitle('')
+ setDescription('')
+ onClose()
+ } catch (error) {}
+ }
+
+ const handleInputChange = (event: any) => {
+ setInputValue(event.target.value)
+ }
+
+
+ const handleInputKeyDown = (event: any) => {
+ if (event.key === 'Enter' && inputValue !== '') {
+ if (chips.length < 5) {
+ setChips([...chips, inputValue])
+ setInputValue('')
+ } else {
+ event.preventDefault()
+ }
+ }
+ }
+
+ const addChip = () => {
+ if (chips.length < 3) {
+ setChips([...chips, inputValue])
+ setInputValue('')
+ }
+ }
+
+ const getListCategories = React.useCallback(async () => {
+ try {
+ const url = `/arbitrary/categories`
+ const response = await fetch(url, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ })
+ const responseData = await response.json()
+ setOptions(responseData)
+ } catch (error) {}
+ }, [])
+
+ React.useEffect(() => {
+ getListCategories()
+ }, [getListCategories])
+
+ return (
+
+
+
+ Upload Blog Post
+
+
+
+
+ {options.length > 0 && (
+
+ Select a Category
+ }
+ value={selectedOption?.id || ''}
+ onChange={handleOptionChange}
+ >
+ {options.map((option) => (
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {chips.map((chip, index) => (
+ handleChipDelete(index)}
+ deleteIcon={}
+ />
+ ))}
+
+
+
+
+
+ )
+}
+
+export default PostPublishModal
diff --git a/src/components/common/PublishAudio.tsx b/src/components/common/PublishAudio.tsx
new file mode 100644
index 0000000..d9e6952
--- /dev/null
+++ b/src/components/common/PublishAudio.tsx
@@ -0,0 +1,111 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { setNotification } from '../../state/features/notificationsSlice'
+import { RootState } from '../../state/store'
+import ShortUniqueId from 'short-unique-id'
+
+const uid = new ShortUniqueId()
+
+interface IPublishVideo {
+ title: string
+ description: string
+ base64: string
+ category: string
+ editVideoIdentifier?: string | null | undefined
+
+}
+
+export const usePublishAudio = () => {
+ const { user } = useSelector((state: RootState) => state.auth)
+ const dispatch = useDispatch()
+ const publishAudio = async ({
+ editVideoIdentifier,
+ title,
+ description,
+ base64,
+ category,
+ ...rest
+ }: IPublishVideo) => {
+ let address
+ let name
+ let errorMsg = ''
+
+ address = user?.address
+ name = user?.name || ''
+
+ const missingFields = []
+ if (!address) {
+ errorMsg = "Cannot post: your address isn't available"
+ }
+ if (!name) {
+ errorMsg = 'Cannot post without a name'
+ }
+ if (!title) missingFields.push('title')
+ if (missingFields.length > 0) {
+ const missingFieldsString = missingFields.join(', ')
+ const errMsg = `Missing: ${missingFieldsString}`
+ errorMsg = errMsg
+ }
+
+ if (errorMsg) {
+ dispatch(
+ setNotification({
+ msg: errorMsg,
+ alertType: 'error'
+ })
+ )
+ throw new Error(errorMsg)
+ }
+
+ try {
+ const id = uid()
+
+ let identifier = `qaudio_qblog_${id}`
+ if(editVideoIdentifier){
+ identifier = editVideoIdentifier
+ }
+ const resourceResponse = await qortalRequest({
+ action: 'PUBLISH_QDN_RESOURCE',
+ name: name,
+ service: 'AUDIO',
+ data64: base64,
+ title: title,
+ description: description,
+ category: category,
+ ...rest,
+ identifier: identifier
+ })
+ dispatch(
+ setNotification({
+ msg: 'Audio successfully published',
+ alertType: 'success'
+ })
+ )
+ return resourceResponse
+ } catch (error: any) {
+ let notificationObj = null
+ if (typeof error === 'string') {
+ notificationObj = {
+ msg: error || 'Failed to publish audio',
+ alertType: 'error'
+ }
+ } else if (typeof error?.error === 'string') {
+ notificationObj = {
+ msg: error?.error || 'Failed to publish audio',
+ alertType: 'error'
+ }
+ } else {
+ notificationObj = {
+ msg: error?.message || error?.message || 'Failed to publish audio',
+ alertType: 'error'
+ }
+ }
+ if (!notificationObj) return
+ dispatch(setNotification(notificationObj))
+
+ }
+ }
+ return {
+ publishAudio
+ }
+}
diff --git a/src/components/common/PublishGeneric.tsx b/src/components/common/PublishGeneric.tsx
new file mode 100644
index 0000000..c744a8d
--- /dev/null
+++ b/src/components/common/PublishGeneric.tsx
@@ -0,0 +1,120 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { setNotification } from '../../state/features/notificationsSlice'
+import { RootState } from '../../state/store'
+import ShortUniqueId from 'short-unique-id'
+
+const uid = new ShortUniqueId()
+
+interface IPublishGeneric {
+ title: string
+ description: string
+ base64?: string
+ file?: File
+ category: string
+ service: string
+ identifierPrefix: string
+ filename: string
+ editVideoIdentifier?: string | null | undefined
+}
+
+export const usePublishGeneric = () => {
+ const { user } = useSelector((state: RootState) => state.auth)
+ const dispatch = useDispatch()
+ const publishGeneric = async ({
+ editVideoIdentifier,
+ service,
+ identifierPrefix,
+ filename,
+ title,
+ description,
+ base64,
+ file,
+ category,
+ ...rest
+ }: IPublishGeneric) => {
+ let address
+ let name
+ let errorMsg = ''
+
+ address = user?.address
+ name = user?.name || ''
+
+ const missingFields = []
+ if (!address) {
+ errorMsg = "Cannot post: your address isn't available"
+ }
+ if (!name) {
+ errorMsg = 'Cannot post without a name'
+ }
+ if (!title) missingFields.push('title')
+ if (missingFields.length > 0) {
+ const missingFieldsString = missingFields.join(', ')
+ const errMsg = `Missing: ${missingFieldsString}`
+ errorMsg = errMsg
+ }
+
+ if (errorMsg) {
+ dispatch(
+ setNotification({
+ msg: errorMsg,
+ alertType: 'error'
+ })
+ )
+ throw new Error(errorMsg)
+ }
+
+ try {
+ const id = uid()
+
+ let identifier = `${identifierPrefix}_${id}`
+ if (editVideoIdentifier) {
+ identifier = editVideoIdentifier
+ }
+
+ const resourceResponse = await qortalRequest({
+ action: 'PUBLISH_QDN_RESOURCE',
+ name: name,
+ service: service,
+ file,
+ title: title,
+ description: description,
+ category: category,
+ filename,
+ ...rest,
+ identifier: identifier
+ })
+ dispatch(
+ setNotification({
+ msg: `${service} successfully published`,
+ alertType: 'success'
+ })
+ )
+ return resourceResponse
+ } catch (error: any) {
+ let notificationObj = null
+ if (typeof error === 'string') {
+ notificationObj = {
+ msg: error || `Failed to publish ${service}`,
+ alertType: 'error'
+ }
+ } else if (typeof error?.error === 'string') {
+ notificationObj = {
+ msg: error?.error || `Failed to publish ${service}`,
+ alertType: 'error'
+ }
+ } else {
+ notificationObj = {
+ msg:
+ error?.message || error?.message || `Failed to publish ${service}`,
+ alertType: 'error'
+ }
+ }
+ if (!notificationObj) return
+ dispatch(setNotification(notificationObj))
+ }
+ }
+ return {
+ publishGeneric
+ }
+}
diff --git a/src/components/common/PublishVideo.tsx b/src/components/common/PublishVideo.tsx
new file mode 100644
index 0000000..4042994
--- /dev/null
+++ b/src/components/common/PublishVideo.tsx
@@ -0,0 +1,112 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { setNotification } from '../../state/features/notificationsSlice'
+import { RootState } from '../../state/store'
+import ShortUniqueId from 'short-unique-id'
+
+const uid = new ShortUniqueId()
+
+interface IPublishVideo {
+ title: string
+ description: string
+ base64?: string
+ category: string
+ editVideoIdentifier?: string | null | undefined
+ file?: File
+}
+
+export const usePublishVideo = () => {
+ const { user } = useSelector((state: RootState) => state.auth)
+ const dispatch = useDispatch()
+ const publishVideo = async ({
+ file,
+ editVideoIdentifier,
+ title,
+ description,
+ base64,
+ category,
+ ...rest
+ }: IPublishVideo) => {
+ let address
+ let name
+ let errorMsg = ''
+
+ address = user?.address
+ name = user?.name || ''
+
+ const missingFields = []
+ if (!address) {
+ errorMsg = "Cannot post: your address isn't available"
+ }
+ if (!name) {
+ errorMsg = 'Cannot post without a name'
+ }
+ if (!title) missingFields.push('title')
+ if (missingFields.length > 0) {
+ const missingFieldsString = missingFields.join(', ')
+ const errMsg = `Missing: ${missingFieldsString}`
+ errorMsg = errMsg
+ }
+
+ if (errorMsg) {
+ dispatch(
+ setNotification({
+ msg: errorMsg,
+ alertType: 'error'
+ })
+ )
+ throw new Error(errorMsg)
+ }
+
+ try {
+ const id = uid()
+
+ let identifier = `qvideo_qblog_${id}`
+ if (editVideoIdentifier) {
+ identifier = editVideoIdentifier
+ }
+ const resourceResponse = await qortalRequest({
+ action: 'PUBLISH_QDN_RESOURCE',
+ name: name,
+ service: 'VIDEO',
+ // data64: base64,
+ file: file,
+ title: title,
+ description: description,
+ category: category,
+ ...rest,
+ identifier: identifier
+ })
+ dispatch(
+ setNotification({
+ msg: 'Video successfully published',
+ alertType: 'success'
+ })
+ )
+ return resourceResponse
+ } catch (error: any) {
+ let notificationObj = null
+ if (typeof error === 'string') {
+ notificationObj = {
+ msg: error || 'Failed to publish video',
+ alertType: 'error'
+ }
+ } else if (typeof error?.error === 'string') {
+ notificationObj = {
+ msg: error?.error || 'Failed to publish video',
+ alertType: 'error'
+ }
+ } else {
+ notificationObj = {
+ msg: error?.message || 'Failed to publish video',
+ alertType: 'error'
+ }
+ }
+ if (!notificationObj) return
+ dispatch(setNotification(notificationObj))
+ }
+ }
+ return {
+ publishVideo
+ }
+}
diff --git a/src/components/common/ResponsiveImage.tsx b/src/components/common/ResponsiveImage.tsx
new file mode 100644
index 0000000..d903dce
--- /dev/null
+++ b/src/components/common/ResponsiveImage.tsx
@@ -0,0 +1,124 @@
+import React, { useState, useEffect, CSSProperties } from 'react'
+import Skeleton from '@mui/material/Skeleton'
+import { Box } from '@mui/material'
+
+interface ResponsiveImageProps {
+ src: string
+ dimensions: string
+ alt?: string
+ className?: string
+ style?: CSSProperties
+}
+
+const ResponsiveImage: React.FC = ({
+ src,
+ dimensions,
+ alt,
+ className,
+ style
+}) => {
+ const [loading, setLoading] = useState(true)
+ const matchResult = dimensions?.match(/v1\.(\d+(\.\d+)?)x(\d+)/)
+
+ const width = matchResult ? parseFloat(matchResult[1]) : 1 // Default width value
+ const height = matchResult ? parseInt(matchResult[3], 10) : 1 // Default height value
+
+ const aspectRatio = (height / width) * 100
+
+ useEffect(() => {
+ if (dimensions === 'v1.0x0') {
+ setLoading(false)
+ return
+ }
+ }, [dimensions])
+
+ if (dimensions === 'v1.0x0' || !dimensions) {
+ return null
+ }
+
+ const imageStyle: CSSProperties = {
+ width: '100%',
+ height: '100%',
+ objectFit: 'cover'
+ }
+
+ const wrapperStyle: CSSProperties = {
+ position: 'relative',
+ paddingBottom: `${aspectRatio}%`,
+ overflow: 'hidden',
+ ...style
+ }
+
+ return (
+
+ {/* ![]()
setLoading(false)}
+ src={src}
+ style={{
+ width: '100%',
+ height: 'auto',
+ borderRadius: '8px'
+ }}
+ /> */}
+ {loading && (
+
+ )}
+
+ ![]()
setLoading(false)}
+ src={src}
+ style={{
+ width: '100%',
+ height: 'auto',
+ borderRadius: '8px',
+ visibility: loading ? 'hidden' : 'visible',
+ position: loading ? 'absolute' : 'unset'
+ }}
+ />
+
+ )
+
+ return (
+
+ {loading ? (
+
+ ) : (
+
+ )}
+
+ {videos.map((video) => (
+
+ handleClick(video)}
+ sx={{ width: '100%' }}
+ >
+
+
+
+
+ {
+ dispatch(
+ setNotification({
+ msg: 'Copied to clipboard!',
+ alertType: 'success'
+ })
+ )
+ }}
+ >
+
+
+
+
+ ))}
+
+
+ {
+ setEditVideoIdentifier(null)
+ setIsOpenVideoModal(true)
+ }}
+ >
+ Publish new video
+
+
+
+
+ {
+ setIsOpenVideoModal(false)
+ setEditVideoIdentifier(null)
+ }}
+ open={isOpenVideoModal}
+ onPublish={(value) => {
+ fetchVideos().then((fetchedVideos) => setVideos(fetchedVideos))
+ setIsOpenVideoModal(false)
+ }}
+ editVideoIdentifier={editVideoIdentifier}
+ />
+
+ )
+}
+
+// Add this to your 'types.ts' file
+export interface Video {
+ name: string
+ service: string
+ identifier: string
+ metadata: {
+ title: string
+ description: string
+ tags: string[]
+ category: string
+ categoryName: string
+ }
+ size: number
+ created: number
+ updated: number
+}
diff --git a/src/components/common/VideoPlayer.tsx b/src/components/common/VideoPlayer.tsx
new file mode 100644
index 0000000..64bf633
--- /dev/null
+++ b/src/components/common/VideoPlayer.tsx
@@ -0,0 +1,832 @@
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
+import ReactDOM from 'react-dom'
+import { Box, IconButton, Slider } from '@mui/material'
+import { CircularProgress, Typography } from '@mui/material'
+import { Key } from 'ts-key-enum'
+import {
+ PlayArrow,
+ Pause,
+ VolumeUp,
+ Fullscreen,
+ PictureInPicture, VolumeOff
+} from '@mui/icons-material'
+import { styled } from '@mui/system'
+import { MyContext } from '../../wrappers/DownloadWrapper'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import { Refresh } from '@mui/icons-material'
+
+import { Menu, MenuItem } from '@mui/material'
+import { MoreVert as MoreIcon } from '@mui/icons-material'
+const VideoContainer = styled(Box)`
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ margin: 0px;
+ padding: 0px;
+`
+
+const VideoElement = styled('video')`
+ width: 100%;
+ height: auto;
+ background: rgb(33, 33, 33);
+`
+
+const ControlsContainer = styled(Box)`
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 8px;
+ background-color: rgba(0, 0, 0, 0.6);
+`
+
+interface VideoPlayerProps {
+ src?: string
+ poster?: string
+ name?: string
+ identifier?: string
+ service?: string
+ autoplay?: boolean
+ from?: string | null
+ setCount?: () => void
+ customStyle?: any
+ user?: string
+ postId?: string
+}
+
+export const VideoPlayer: React.FC = ({
+ poster,
+ name,
+ identifier,
+ service,
+ autoplay = true,
+ from = null,
+ setCount,
+ customStyle = {},
+ user = '',
+ postId = ''
+ }) => {
+ const videoRef = useRef(null)
+ const [playing, setPlaying] = useState(false)
+ const [volume, setVolume] = useState(1)
+ const [mutedVolume, setMutedVolume] = useState(1)
+ const [isMuted, setIsMuted] = useState(false)
+ const [progress, setProgress] = useState(0)
+ const [isLoading, setIsLoading] = useState(false)
+ const [canPlay, setCanPlay] = useState(false)
+ const [startPlay, setStartPlay] = useState(false)
+ const [isMobileView, setIsMobileView] = useState(false)
+ const [playbackRate, setPlaybackRate] = useState(1)
+ const [anchorEl, setAnchorEl] = useState(null)
+ const [consoleLog, setConsoleLog] = useState('Console Log Here')
+ const [debug, setDebug] = useState(false)
+
+ const reDownload = useRef(false)
+ const { downloads } = useSelector((state: RootState) => state.global)
+ const download = useMemo(() => {
+ if (!downloads || !identifier) return {}
+ const findDownload = downloads[identifier]
+
+ if (!findDownload) return {}
+ return findDownload
+ }, [downloads, identifier])
+
+ const src = useMemo(() => {
+ return download?.url || ''
+ }, [download?.url])
+ const resourceStatus = useMemo(() => {
+ return download?.status || {}
+ }, [download])
+
+ const minSpeed = 0.25;
+ const maxSpeed = 4.0;
+ const speedChange = 0.25;
+
+ const updatePlaybackRate = (newSpeed: number) => {
+ if(videoRef.current) {
+ if(newSpeed > maxSpeed || newSpeed < minSpeed)
+ newSpeed = minSpeed
+ videoRef.current.playbackRate = newSpeed
+ setPlaybackRate(newSpeed)
+ }
+ }
+
+ const increaseSpeed = (wrapOverflow = true) => {
+ const changedSpeed = playbackRate + speedChange
+ let newSpeed = wrapOverflow ? changedSpeed: Math.min(changedSpeed, maxSpeed)
+
+
+ if (videoRef.current) {
+ updatePlaybackRate(newSpeed);
+ }
+ }
+
+ const decreaseSpeed = () => {
+ if (videoRef.current) {
+ updatePlaybackRate(playbackRate - speedChange);
+ }
+ }
+
+
+ const toggleRef = useRef(null)
+ const { downloadVideo } = useContext(MyContext)
+ const togglePlay = async () => {
+ if (!videoRef.current) return
+ setStartPlay(true)
+ if (!src) {
+ const el = document.getElementById('videoWrapper')
+ if (el) {
+ el?.parentElement?.removeChild(el)
+ }
+ ReactDOM.flushSync(() => {
+ setIsLoading(true)
+ })
+ getSrc()
+ }
+ if (playing) {
+ videoRef.current.pause()
+ } else {
+ videoRef.current.play()
+ }
+ setPlaying(!playing)
+ }
+
+ const onVolumeChange = (_: any, value: number | number[]) => {
+ if (!videoRef.current) return
+ videoRef.current.volume = value as number
+ setVolume(value as number)
+ setIsMuted(false)
+ }
+
+ const onProgressChange = (_: any, value: number | number[]) => {
+ if (!videoRef.current) return
+ videoRef.current.currentTime = value as number
+ setProgress(value as number)
+ if (!playing) {
+ videoRef.current.play()
+ setPlaying(true)
+ }
+ }
+
+ const handleEnded = () => {
+ setPlaying(false)
+ }
+
+ const updateProgress = () => {
+ if (!videoRef.current) return
+ setProgress(videoRef.current.currentTime)
+ }
+
+ const [isFullscreen, setIsFullscreen] = useState(false)
+
+ const enterFullscreen = () => {
+ if (!videoRef.current) return
+ if (videoRef.current.requestFullscreen) {
+ videoRef.current.requestFullscreen()
+ }
+ }
+
+ const exitFullscreen = () => {
+ if (document.exitFullscreen) {
+ document.exitFullscreen()
+ }
+ }
+
+ const toggleFullscreen = () => {
+ isFullscreen ? exitFullscreen(): enterFullscreen()
+ }
+ const togglePictureInPicture = async () => {
+ if (!videoRef.current) return
+ if (document.pictureInPictureElement === videoRef.current) {
+ await document.exitPictureInPicture()
+ } else {
+ await videoRef.current.requestPictureInPicture()
+ }
+ }
+
+ useEffect(() => {
+ const handleFullscreenChange = () => {
+ setIsFullscreen(!!document.fullscreenElement)
+ }
+
+ document.addEventListener('fullscreenchange', handleFullscreenChange)
+ return () => {
+ document.removeEventListener('fullscreenchange', handleFullscreenChange)
+ }
+ }, [])
+
+ const handleLoadedMetadata = () => {
+ setIsLoading(false)
+ }
+
+ const handleCanPlay = () => {
+ if (setCount) {
+ setCount()
+ }
+ setIsLoading(false)
+ setCanPlay(true)
+ }
+
+ const getSrc = React.useCallback(async () => {
+ if (!name || !identifier || !service || !postId || !user) return
+ try {
+ downloadVideo({
+ name,
+ service,
+ identifier,
+ blogPost: {
+ postId,
+ user
+ }
+ })
+ } catch (error) {}
+ }, [identifier, name, service])
+
+ useEffect(() => {
+ const videoElement = videoRef.current
+
+ const handleLeavePictureInPicture = async (event: any) => {
+ const target = event?.target
+ if (target) {
+ target.pause()
+ if (setPlaying) {
+ setPlaying(false)
+ }
+ }
+ }
+
+ if (videoElement) {
+ videoElement.addEventListener(
+ 'leavepictureinpicture',
+ handleLeavePictureInPicture
+ )
+ }
+
+ return () => {
+ if (videoElement) {
+ videoElement.removeEventListener(
+ 'leavepictureinpicture',
+ handleLeavePictureInPicture
+ )
+ }
+ }
+ }, [])
+
+ useEffect(() => {
+ const videoElement = videoRef.current
+
+ const minimizeVideo = async () => {
+ if (!videoElement) return
+ const handleClose = () => {
+ if (videoElement && videoElement.parentElement) {
+ const el = document.getElementById('videoWrapper')
+ if (el) {
+ el?.parentElement?.removeChild(el)
+ }
+ }
+ }
+ const createCloseButton = (): HTMLButtonElement => {
+ const closeButton = document.createElement('button')
+ closeButton.textContent = 'X'
+ closeButton.style.position = 'absolute'
+ closeButton.style.top = '0'
+ closeButton.style.right = '0'
+ closeButton.style.backgroundColor = 'rgba(255, 255, 255, 0.7)'
+ closeButton.style.border = 'none'
+ closeButton.style.fontWeight = 'bold'
+ closeButton.style.fontSize = '1.2rem'
+ closeButton.style.cursor = 'pointer'
+ closeButton.style.padding = '2px 8px'
+ closeButton.style.borderRadius = '0 0 0 4px'
+
+ closeButton.addEventListener('click', handleClose)
+
+ return closeButton
+ }
+ const buttonClose = createCloseButton()
+ const videoWrapper = document.createElement('div')
+ videoWrapper.id = 'videoWrapper'
+ videoWrapper.style.position = 'fixed'
+ videoWrapper.style.zIndex = '900000009'
+ videoWrapper.style.bottom = '0px'
+ videoWrapper.style.right = '0px'
+
+ videoElement.parentElement?.insertBefore(videoWrapper, videoElement)
+ videoWrapper.appendChild(videoElement)
+
+ videoWrapper.appendChild(buttonClose)
+ videoElement.controls = true
+ videoElement.style.height = 'auto'
+ videoElement.style.width = '300px'
+
+ document.body.appendChild(videoWrapper)
+ }
+
+ return () => {
+ if (videoElement) {
+ if (videoElement && !videoElement.paused && !videoElement.ended) {
+ minimizeVideo()
+ }
+ }
+ }
+ }, [])
+
+ function formatTime(seconds: number): string {
+ seconds = Math.floor(seconds)
+ let minutes: number | string = Math.floor(seconds / 60)
+ let hours: number | string = Math.floor(minutes / 60)
+
+ let remainingSeconds: number | string = seconds % 60
+ let remainingMinutes: number | string = minutes % 60
+
+ if (remainingSeconds < 10) {
+ remainingSeconds = '0' + remainingSeconds
+ }
+
+ if (remainingMinutes < 10) {
+ remainingMinutes = '0' + remainingMinutes
+ }
+
+ if(hours === 0){
+ hours = ''
+ }
+ else
+ {
+ hours = hours + ':'
+ }
+
+ return hours + remainingMinutes + ':' + remainingSeconds
+ }
+
+ const reloadVideo = () => {
+ if (!videoRef.current) return
+ const currentTime = videoRef.current.currentTime
+ videoRef.current.src = src
+ videoRef.current.load()
+ videoRef.current.currentTime = currentTime
+ if (playing) {
+ videoRef.current.play()
+ }
+ }
+
+ useEffect(() => {
+ if (
+ resourceStatus?.status === 'DOWNLOADED' &&
+ reDownload?.current === false
+ ) {
+ getSrc()
+ reDownload.current = true
+ }
+ }, [getSrc, resourceStatus])
+
+ const handleMenuOpen = (event: any) => {
+ setAnchorEl(event.currentTarget)
+ }
+
+ const handleMenuClose = () => {
+ setAnchorEl(null)
+ }
+
+ useEffect(() => {
+ const videoWidth = videoRef?.current?.offsetWidth
+ if (videoWidth && videoWidth <= 600) {
+ setIsMobileView(true)
+ }
+ }, [canPlay])
+
+ const getDownloadProgress = (current: number, total: number) => {
+ const progress = current /total * 100;
+ return Number.isNaN(progress) ? '': progress.toFixed(0)+'%'
+ }
+ const mute = () => {
+ setIsMuted(true)
+ setMutedVolume(volume)
+ setVolume(0)
+ if(videoRef.current) videoRef.current.volume = 0
+ }
+ const unMute = () => {
+ setIsMuted(false)
+ setVolume(mutedVolume)
+ if(videoRef.current) videoRef.current.volume = mutedVolume
+ }
+
+ const toggleMute = () => {
+ isMuted ? unMute() : mute();
+ }
+
+const changeVolume = (volumeChange: number) =>
+{
+ if(videoRef.current){
+ const minVolume = 0;
+ const maxVolume = 1;
+
+
+ let newVolume = volumeChange + volume
+
+ newVolume = Math.max(newVolume, minVolume)
+ newVolume = Math.min(newVolume, maxVolume)
+
+setIsMuted(false)
+ setMutedVolume(newVolume)
+ videoRef.current.volume = newVolume
+ setVolume(newVolume);
+ }
+
+}
+ const setProgressRelative = (secondsChange: number) => {
+ if(videoRef.current){
+ const currentTime = videoRef.current?.currentTime
+ const minTime = 0
+ const maxTime = videoRef.current?.duration || 100
+
+ let newTime = currentTime + secondsChange;
+ newTime = Math.max(newTime, minTime)
+ newTime = Math.min(newTime, maxTime)
+ videoRef.current.currentTime = newTime;
+ setProgress(newTime);
+ }
+ }
+
+ const setProgressAbsolute = (videoPercent: number) => {
+ if(videoRef.current){
+ videoPercent = Math.min(videoPercent, 100)
+ videoPercent = Math.max(videoPercent, 0)
+ const finalTime = videoRef.current?.duration*videoPercent / 100
+ videoRef.current.currentTime = finalTime
+ setProgress(finalTime);
+ }
+ }
+
+
+ const keyboardShortcutsDown = (e: React.KeyboardEvent) =>
+ {
+ e.preventDefault()
+ //setConsoleLog(`Alt: ${e.altKey} Shift: ${e.shiftKey} Control: ${e.ctrlKey} Key: ${e.key}`)
+
+ switch(e.key) {
+ case Key.Add: increaseSpeed(false); break;
+ case '+': increaseSpeed(false); break;
+ case '>': increaseSpeed(false); break;
+
+ case Key.Subtract: decreaseSpeed(); break;
+ case '-': decreaseSpeed(); break;
+ case '<': decreaseSpeed(); break;
+
+ case Key.ArrowLeft: {
+ if(e.shiftKey) setProgressRelative(-300);
+ else if(e.ctrlKey) setProgressRelative(-60);
+ else if(e.altKey) setProgressRelative(-10);
+ else setProgressRelative(-5);
+ } break;
+
+ case Key.ArrowRight: {
+ if(e.shiftKey) setProgressRelative(300);
+ else if(e.ctrlKey) setProgressRelative(60);
+ else if(e.altKey) setProgressRelative(10);
+ else setProgressRelative(5);
+ } break;
+
+ case Key.ArrowDown: changeVolume(-0.05) ; break;
+ case Key.ArrowUp: changeVolume(0.05) ; break;
+ }
+ }
+
+ const keyboardShortcutsUp = (e: React.KeyboardEvent) =>
+ {
+ e.preventDefault()
+ //setConsoleLog(`Alt: ${e.altKey} Shift: ${e.shiftKey} Control: ${e.ctrlKey} Key: ${e.key}`)
+
+ switch(e.key) {
+ case ' ': togglePlay(); break;
+ case 'm': toggleMute(); break;
+
+ case 'f': enterFullscreen(); break;
+ case Key.Escape: exitFullscreen(); break;
+
+ case '0': setProgressAbsolute(0); break;
+ case '1': setProgressAbsolute(10); break;
+ case '2': setProgressAbsolute(20); break;
+ case '3': setProgressAbsolute(30); break;
+ case '4': setProgressAbsolute(40); break;
+ case '5': setProgressAbsolute(50); break;
+ case '6': setProgressAbsolute(60); break;
+ case '7': setProgressAbsolute(70); break;
+ case '8': setProgressAbsolute(80); break;
+ case '9': setProgressAbsolute(90); break;
+ }
+ }
+
+
+ return (
+
+ {/*
+ {
+ dispatch(
+ setNotification({
+ msg: 'Copied to clipboard!',
+ alertType: 'success'
+ })
+ )
+ }}
+ >
+
+
+ */}
+ {isLoading && (
+
+
+ {resourceStatus && (
+
+ {resourceStatus?.status === 'REFETCHING' ? (
+ <>
+ <>
+ {getDownloadProgress(resourceStatus?.localChunkCount,resourceStatus?.totalChunkCount)}
+
+
+ <> Refetching in 25 seconds
+
+ ) : resourceStatus?.status === 'DOWNLOADED' ? (
+ <>Download Completed: building video...
+ ) : resourceStatus?.status !== 'READY' ? (
+ <>
+ {getDownloadProgress(resourceStatus?.localChunkCount,resourceStatus?.totalChunkCount)}
+
+
+ ) : (
+ <>Download Completed: fetching video...
+ )}
+
+ )}
+
+ )}
+ {((!src && !isLoading) || !startPlay) && (
+ {
+ if (from === 'create') return
+
+ togglePlay()
+ }}
+ sx={{
+ cursor: 'pointer'
+ }}
+ >
+
+
+ )}
+
+
+
+
+ {isMobileView && canPlay ? (
+ <>
+
+ {playing ? : }
+
+
+
+
+
+
+
+
+
+
+ ) : canPlay ? (
+ <>
+
+ {playing ? : }
+
+
+
+
+
+
+ {progress && videoRef.current?.duration && formatTime(progress)}/
+ {progress &&
+ videoRef.current?.duration &&
+ formatTime(videoRef.current?.duration)}
+
+
+ {isMuted ? :}
+
+
+ increaseSpeed()}
+ >
+ Speed: {playbackRate}x
+
+
+
+
+
+
+
+
+
+ ) : null}
+
+ {debug ? {consoleLog}: <>}
+
+ )
+}
diff --git a/src/components/common/VideoPublishModal.tsx b/src/components/common/VideoPublishModal.tsx
new file mode 100644
index 0000000..b7b10f6
--- /dev/null
+++ b/src/components/common/VideoPublishModal.tsx
@@ -0,0 +1,287 @@
+import React, { useState } from 'react'
+import {
+ Box,
+ Button,
+ Modal,
+ TextField,
+ Typography,
+ Select,
+ MenuItem,
+ FormControl,
+ InputLabel,
+ SelectChangeEvent,
+ OutlinedInput,
+ Chip,
+ IconButton
+} from '@mui/material'
+import { styled } from '@mui/system'
+import { useDropzone } from 'react-dropzone'
+import { usePublishVideo } from './PublishVideo'
+import { toBase64 } from '../../utils/toBase64'
+import AddIcon from '@mui/icons-material/Add'
+import CloseIcon from '@mui/icons-material/Close'
+const StyledModal = styled(Modal)(({ theme }) => ({
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center'
+}))
+
+const ChipContainer = styled(Box)({
+ display: 'flex',
+ flexWrap: 'wrap',
+ '& > *': {
+ margin: '4px'
+ }
+})
+
+const ModalContent = styled(Box)(({ theme }) => ({
+ backgroundColor: theme.palette.background.paper,
+ padding: theme.spacing(4),
+ borderRadius: theme.spacing(1),
+ width: '40%',
+ '&:focus': {
+ outline: 'none'
+ }
+}))
+
+interface VideoModalProps {
+ open: boolean
+ onClose: () => void
+ onPublish: (value: any) => void
+ editVideoIdentifier?: string | null | undefined
+}
+
+interface SelectOption {
+ id: string
+ name: string
+}
+
+const VideoModal: React.FC = ({
+ open,
+ onClose,
+ onPublish,
+ editVideoIdentifier
+}) => {
+ const [file, setFile] = useState(null)
+ const [title, setTitle] = useState('')
+ const [description, setDescription] = useState('')
+ const [selectedOption, setSelectedOption] = useState(
+ null
+ )
+ const [inputValue, setInputValue] = useState('')
+ const [chips, setChips] = useState([])
+
+ const [options, setOptions] = useState([])
+ const [tags, setTags] = useState([])
+ const { publishVideo } = usePublishVideo()
+ const { getRootProps, getInputProps } = useDropzone({
+ accept: {
+ 'video/*': []
+ },
+ maxFiles: 1,
+ onDrop: (acceptedFiles) => {
+ setFile(acceptedFiles[0])
+ }
+ })
+
+ const handleTitleChange = (event: React.ChangeEvent) => {
+ setTitle(event.target.value)
+ }
+
+ const handleDescriptionChange = (
+ event: React.ChangeEvent
+ ) => {
+ setDescription(event.target.value)
+ }
+
+ const handleOptionChange = (event: SelectChangeEvent) => {
+ const optionId = event.target.value
+ const selectedOption = options.find((option) => option.id === optionId)
+ setSelectedOption(selectedOption || null)
+ }
+
+ const handleChipDelete = (index: number) => {
+ const newChips = [...chips]
+ newChips.splice(index, 1)
+ setChips(newChips)
+ }
+
+ const handleSubmit = async () => {
+ const missingFields = []
+
+ if (!title) missingFields.push('title')
+ if (!file) missingFields.push('file')
+ if (missingFields.length > 0) {
+ const missingFieldsString = missingFields.join(', ')
+ const errMsg = `Missing: ${missingFieldsString}`
+
+ return
+ }
+ if (!file) return
+
+ const formattedTags: { [key: string]: string } = {}
+ chips.forEach((tag, i) => {
+ formattedTags[`tag${i + 1}`] = tag
+ })
+
+ try {
+ // const base64 = await toBase64(file)
+ // if (typeof base64 !== 'string') return
+ // const base64String = base64.split(',')[1]
+ // if (!file) return
+
+ const res = await publishVideo({
+ file: file,
+ editVideoIdentifier,
+ title,
+ description,
+ category: selectedOption?.id || '',
+ ...formattedTags
+ })
+ onPublish(res)
+ setFile(null)
+ setTitle('')
+ setDescription('')
+ onClose()
+ } catch (error) {}
+ }
+
+ const handleInputChange = (event: any) => {
+ setInputValue(event.target.value)
+ }
+
+ const handleInputKeyDown = (event: any) => {
+ if (event.key === 'Enter' && inputValue !== '') {
+ if (chips.length < 5) {
+ setChips([...chips, inputValue])
+ setInputValue('')
+ } else {
+ event.preventDefault()
+ }
+ }
+ }
+
+ const addChip = () => {
+ if (chips.length < 5) {
+ setChips([...chips, inputValue])
+ setInputValue('')
+ }
+ }
+
+ const getListCategories = React.useCallback(async () => {
+ try {
+ const url = `/arbitrary/categories`
+ const response = await fetch(url, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ })
+ const responseData = await response.json()
+ setOptions(responseData)
+ } catch (error) {}
+ }, [])
+
+ React.useEffect(() => {
+ getListCategories()
+ }, [getListCategories])
+
+ return (
+
+
+ {editVideoIdentifier && (
+
+ You are editing: {editVideoIdentifier}
+
+ )}
+
+ Upload Video
+
+
+
+
+ {file
+ ? file.name
+ : 'Drag and drop a video file here or click to select a file'}
+
+
+
+
+ {options.length > 0 && (
+
+ Select a Category
+ }
+ value={selectedOption?.id || ''}
+ onChange={handleOptionChange}
+ >
+ {options.map((option) => (
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {chips.map((chip, index) => (
+ handleChipDelete(index)}
+ deleteIcon={}
+ />
+ ))}
+
+
+
+
+
+ )
+}
+
+export default VideoModal
diff --git a/src/components/editor/BlogEditor.css b/src/components/editor/BlogEditor.css
new file mode 100644
index 0000000..0a3e0e8
--- /dev/null
+++ b/src/components/editor/BlogEditor.css
@@ -0,0 +1,78 @@
+/* src/components/BlogEditor.css */
+.blog-editor {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 1rem;
+ line-height: 1.5;
+ font-size: 18px;
+ max-height: 50vh;
+ overflow-y: auto;
+ min-height: 200px;
+ z-index: 500;
+ }
+
+ .toolbar {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 1rem;
+ }
+
+
+
+ .toolbar-button:focus {
+ outline: none;
+ }
+
+ .code-block {
+ background-color: #2c2b31;
+ color: rgb(238, 234, 234);
+ border-radius: 3px;
+ padding: 10px;
+ margin: 10px 0;
+ font-family: 'Courier New', Courier, monospace;
+ white-space: pre-wrap;
+ overflow-x: auto;
+ max-width: 100%;
+ font-size: 14px;
+ }
+
+ .paragraph {
+ font-size: 20px;
+ margin: 0px;
+ }
+
+ .paragraph-mail {
+ font-size: 16px;
+ margin: 0px;
+ }
+
+ .toolbar-button {
+ background-color: white;
+ border: 1px solid gray;
+ border-radius: 5px;
+ margin-right: 5px;
+ cursor: pointer;
+ outline: none;
+ height: 32px;
+ width: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .toolbar-button.active {
+ background-color: lightgray;
+ }
+
+ .h2 {
+ font-size: 25px
+ }
+
+ .h2 {
+ font-size: 22px
+ }
+
+ .align-center {
+ text-align: center;
+ }
+
diff --git a/src/components/editor/BlogEditor.tsx b/src/components/editor/BlogEditor.tsx
new file mode 100644
index 0000000..0da146c
--- /dev/null
+++ b/src/components/editor/BlogEditor.tsx
@@ -0,0 +1,574 @@
+// src/components/BlogEditor.tsx
+// @ts-nocheck
+
+import React, { useMemo, useState, useCallback } from 'react';
+import { createEditor, Descendant, Editor, Transforms, Range } from 'slate'
+import SvgIcon from '@material-ui/core/SvgIcon'
+import {
+ Slate,
+ Editable,
+ withReact,
+ RenderElementProps,
+ RenderLeafProps,
+ useSlate
+} from 'slate-react'
+import { styled } from '@mui/system'
+import { CustomElement, CustomText, FormatMark } from './customTypes'
+import './BlogEditor.css'
+import { Modal, Box, TextField, Button } from '@mui/material'
+
+import { AlignCenterSVG } from '../../assets/svgs/AlignCenterSVG'
+import { BoldSVG } from '../../assets/svgs/BoldSVG'
+import { ItalicSVG } from '../../assets/svgs/ItalicSVG'
+import { UnderlineSVG } from '../../assets/svgs/UnderlineSVG'
+import { H2SVG } from '../../assets/svgs/H2SVG'
+import { H3SVG } from '../../assets/svgs/H3SVG'
+import { AlignLeftSVG } from '../../assets/svgs/AlignLeftSVG'
+import { AlignRightSVG } from '../../assets/svgs/AlignRightSVG'
+import { CodeBlockSVG } from '../../assets/svgs/CodeBlockSVG'
+import { LinkSVG } from '../../assets/svgs/LinkSVG'
+
+const initialValue: Descendant[] = [
+ {
+ type: 'paragraph',
+ children: [{ text: 'Start writing your blog post...' }]
+ }
+]
+
+interface MyComponentProps {
+ addPostSection?: (value: any) => void
+ editPostSection?: (value: any, section: any) => void
+ defaultValue?: any
+ section?: any
+ value: any
+ setValue: (value: any) => void
+ editorKey?: number
+ mode?: string
+}
+
+const ModalBox = styled(Box)(({ theme }) => ({
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ backgroundColor: theme.palette.background.paper,
+ boxShadow: theme.shadows[5],
+ padding: theme.spacing(2, 4, 3),
+ gap: '15px',
+ borderRadius: '5px',
+ alignItems: 'center',
+ display: 'flex',
+ flex: 0
+}))
+
+const BlogEditor: React.FC = ({
+ addPostSection,
+ editPostSection,
+ defaultValue,
+ section,
+ value,
+ setValue,
+ editorKey,
+ mode
+}) => {
+ const editor = useMemo(() => withReact(createEditor()), [])
+
+ // const [value, setValue] = useState(defaultValue || initialValue);
+ const isTextAlignmentActive = (editor: Editor, alignment: string) => {
+ const [match] = Editor.nodes(editor, {
+ match: (n) => {
+ return n?.textAlign === alignment?.replace(/^align-/, '')
+ }
+ })
+ return !!match
+ }
+
+ const toggleTextAlignment = (editor: Editor, alignment: string) => {
+ const isActive = isTextAlignmentActive(editor, alignment)
+ Transforms.setNodes(
+ editor,
+ { style: { textAlign: isActive ? 'inherit' : alignment } },
+ { match: (n) => Editor.isBlock(editor, n) }
+ )
+ }
+
+ const toggleMark = (editor: Editor, format: FormatMark) => {
+ if (
+ format === 'align-left' ||
+ format === 'align-center' ||
+ format === 'align-right'
+ ) {
+ toggleTextAlignment(editor, format)
+ } else {
+ const isActive = Editor?.marks(editor)?.[format] === true
+ if (isActive) {
+ Editor?.removeMark(editor, format)
+ } else {
+ Editor?.addMark(editor, format, true)
+ }
+ }
+ }
+
+ const newValue = useMemo(() => [...(value || initialValue)], [value])
+
+ const types = ['paragraph', 'heading-2', 'heading-3']
+
+ const setTextAlignment = (editor, alignment) => {
+ const isActive = isTextAlignmentActive(editor, alignment)
+ const alignmentType = ''
+ Transforms?.setNodes(
+ editor,
+ {
+ textAlign: isActive ? null : alignment
+ },
+ {
+ match: (n) =>
+ n.type === 'heading-2' ||
+ n.type === 'heading-3' ||
+ n.type === 'paragraph'
+ }
+ )
+ }
+
+ const ToolbarButton: React.FC<{
+ format: FormatMark | string
+ label: string
+ editor: Editor
+ children: React.ReactNode
+ }> = ({ format, label, editor, children }) => {
+ useSlate()
+
+ let onClick = () => {
+ if (format === 'heading-2' || format === 'heading-3') {
+ toggleBlock(editor, format)
+ } else if (
+ format === 'bold' ||
+ format === 'italic' ||
+ format === 'underline' ||
+ format === ''
+ ) {
+ toggleMark(editor, format)
+ } else if (
+ format === 'align-left' ||
+ format === 'align-center' ||
+ format === 'align-right'
+ ) {
+ setTextAlignment(editor, format?.replace(/^align-/, ''))
+ }
+ }
+
+ let isActive = false
+
+ try {
+ if (
+ format === 'align-left' ||
+ format === 'align-center' ||
+ format === 'align-right'
+ ) {
+ isActive = isTextAlignmentActive(editor, format)
+ } else if (format === 'heading-2' || format === 'heading-3') {
+ isActive = isBlockActive(editor, format)
+ } else if (
+ format === 'bold' ||
+ format === 'italic' ||
+ format === 'underline' ||
+ format === ''
+ ) {
+ isActive = Editor?.marks(editor)?.[format] === true
+ }
+ } catch (error) {}
+
+ return (
+
+ )
+ }
+
+ const ToolbarButtonCodeBlock: React.FC<{
+ format: FormatMark | string
+ label: string
+ editor: Editor
+ children: React.ReactNode
+ }> = ({ format, label, editor, children }) => {
+ const editor2 = useSlate()
+
+ let onClick = () => {
+ if (format === 'code-block') {
+ toggleBlock(editor, 'code-block')
+ }
+ }
+ let isActive = false
+ try {
+ if (format === 'code-block') {
+ isActive = isBlockActive(editor, format)
+ }
+ } catch (error) {}
+
+ return (
+
+ )
+ }
+
+ const ToolbarButtonAlign: React.FC<{
+ format: string
+ label: string
+ editor: Editor
+ }> = ({ format, label, editor }) => {
+ const isActive =
+ Editor?.nodes(editor, {
+ match: (n) => n?.align === format
+ })?.length > 0
+
+ return (
+
+ )
+ }
+
+ const ToolbarButtonCodeLink: React.FC<{
+ format: FormatMark | string
+ label: string
+ editor: Editor
+ children: React.ReactNode
+ }> = ({ format, label, editor, children }) => {
+ useSlate()
+
+ let isActive = false
+ try {
+ if (format === 'link') {
+ isActive = !!Editor?.marks(editor)?.link
+ }
+ } catch (error) {}
+
+ return (
+
+ )
+ }
+
+ // Create a toggleBlock function and an isBlockActive function to handle block elements
+ const toggleBlock = (editor: Editor, format: string) => {
+ const isActive = isBlockActive(editor, format)
+ Transforms?.unwrapNodes(editor, {
+ match: (n) => Editor?.isBlock(editor, n),
+ split: true
+ })
+
+ if (isActive) {
+ Transforms?.setNodes(editor, { type: 'paragraph' })
+ } else {
+ Transforms?.setNodes(editor, { type: format })
+ }
+ }
+
+ const isBlockActive = (editor: Editor, format: string) => {
+ const [match] = Editor?.nodes(editor, {
+ match: (n) => n?.type === format
+ })
+ return !!match
+ }
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === 'Enter' && isBlockActive(editor, 'code-block')) {
+ event.preventDefault()
+ editor?.insertText('\n')
+ }
+
+ if (event.key === 'ArrowDown' && isBlockActive(editor, 'code-block')) {
+ event.preventDefault()
+ Transforms?.insertNodes(editor, {
+ type: 'paragraph',
+ children: [{ text: '' }]
+ })
+ }
+ }
+
+ const handleChange = (newValue: Descendant[]) => {
+ setValue(newValue)
+ }
+
+ const toggleLink = (editor: Editor, url: string) => {
+ const { selection } = editor
+
+ if (selection && !Range.isCollapsed(selection)) {
+ const isLink = Editor?.marks(editor)?.link === true
+ const isInsideLink = isLinkActive(editor)
+
+ if (isLink) {
+ Editor?.removeMark(editor, 'link')
+ } else if (url) {
+ Editor?.addMark(editor, 'link', url)
+ }
+ }
+ }
+
+ const [open, setOpen] = useState(false)
+
+ const initialValue = 'qortal://'
+ const [inputValue, setInputValue] = useState(initialValue)
+
+ const handleChangeLink = (event) => {
+ const newValue = event?.target?.value
+ if (newValue?.startsWith(initialValue)) {
+ setInputValue(newValue)
+ }
+ }
+ const isLinkActive = (editor: Editor) => {
+ const [link] = Editor?.nodes(editor, {
+ match: (n) => n?.type === 'link'
+ })
+ return !!link
+ }
+ const handleSaveClick = () => {
+ const marks = Editor?.marks(editor)
+ const isLink = marks?.link === true
+
+ if (isLink) {
+ Editor?.removeMark(editor, 'link')
+ return // Return early to skip the rest of the function
+ }
+ toggleLink(editor, inputValue)
+ setOpen(false)
+ }
+
+ const onClose = () => {
+ setOpen(false)
+ }
+
+ const handlePaste = (event: React.ClipboardEvent) => {
+ event.preventDefault()
+ const text = event?.clipboardData?.getData('text/plain')
+ const isCodeBlock = isBlockActive(editor, 'code-block')
+
+ if (isCodeBlock) {
+ const lines = text?.split('\n')
+ const fragment: Descendant[] = [
+ {
+ type: 'code-block',
+ children: lines?.map((line) => ({
+ type: 'code-line',
+ children: [{ text: line }]
+ }))
+ }
+ ]
+
+ Transforms?.insertFragment(editor, fragment)
+ } else if (text) {
+ const fragment = text?.split('\n').map((line) => ({
+ type: 'paragraph',
+ children: [{ text: line }]
+ }))
+
+ Transforms?.insertFragment(editor, fragment)
+ }
+ }
+
+ return (
+
+ handleChange(newValue)}
+ key={editorKey || 1}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{children}
+ case 'heading-2':
+ return (
+
+ {children}
+
+ )
+ case 'heading-3':
+ return (
+
+ {children}
+
+ )
+ case 'code-block':
+ return (
+
+ {children}
+
+ )
+ case 'code-line':
+ return {children}
+ case 'link':
+ return (
+
+ {children}
+
+ )
+ default:
+ return (
+
+ {children}
+
+ )
+ }
+}
+
+
+export const renderLeaf = ({ attributes, children, leaf }: RenderLeafProps) => {
+ let el = children
+
+ if (leaf.bold) {
+ el = {el}
+ }
+
+ if (leaf.italic) {
+ el = {el}
+ }
+
+ if (leaf.underline) {
+ el = {el}
+ }
+
+ if (leaf.link) {
+ el = (
+
+ {el}
+
+ )
+ }
+
+ return {el}
+}
\ No newline at end of file
diff --git a/src/components/editor/ReadOnlySlate.tsx b/src/components/editor/ReadOnlySlate.tsx
new file mode 100644
index 0000000..cd2616c
--- /dev/null
+++ b/src/components/editor/ReadOnlySlate.tsx
@@ -0,0 +1,25 @@
+import React, { useMemo } from 'react';
+import { createEditor, Descendant, Editor } from 'slate';
+import { withReact, Slate, Editable, RenderElementProps, RenderLeafProps } from 'slate-react';
+import { renderElement, renderLeaf } from './BlogEditor';
+
+interface ReadOnlySlateProps {
+ content: any
+ mode?: string
+}
+const ReadOnlySlate: React.FC = ({ content, mode }) => {
+ const editor = useMemo(() => withReact(createEditor()), [])
+ const value = useMemo(() => content, [content])
+
+ return (
+ {}}>
+ renderElement({ ...props, mode })}
+ renderLeaf={renderLeaf}
+ />
+
+ )
+}
+
+export default ReadOnlySlate;
\ No newline at end of file
diff --git a/src/components/editor/customTypes.ts b/src/components/editor/customTypes.ts
new file mode 100644
index 0000000..46142fb
--- /dev/null
+++ b/src/components/editor/customTypes.ts
@@ -0,0 +1,47 @@
+// src/customTypes.ts
+import { BaseEditor } from 'slate';
+import { ReactEditor } from 'slate-react';
+
+export type CustomText = {
+ text: string
+ bold?: boolean
+ italic?: boolean
+ underline?: boolean
+ code?: boolean
+}
+
+export type HeadingElement = {
+ type: 'heading'
+ children: CustomText[]
+}
+
+export type BlockQuoteElement = {
+ type: 'block-quote'
+ children: CustomText[]
+}
+
+export type ParagraphElement = {
+ type: 'paragraph'
+ children: CustomText[]
+}
+
+export type CodeBlockElement = {
+ type: 'code-block'
+ children: CustomText[]
+}
+
+export type CustomElement =
+ | HeadingElement
+ | BlockQuoteElement
+ | ParagraphElement
+ | CodeBlockElement
+
+export type FormatMark = 'bold' | 'italic' | 'underline' | 'code'
+
+declare module 'slate' {
+ interface CustomTypes {
+ Editor: BaseEditor & ReactEditor;
+ Element: CustomElement;
+ Text: CustomText;
+ }
+}
diff --git a/src/components/layout/Navbar/Navbar-styles.ts b/src/components/layout/Navbar/Navbar-styles.ts
new file mode 100644
index 0000000..7bff108
--- /dev/null
+++ b/src/components/layout/Navbar/Navbar-styles.ts
@@ -0,0 +1,112 @@
+import { AppBar, Button, Toolbar, Typography, Box } from '@mui/material'
+import { styled } from '@mui/system'
+
+export const QblogLogoContainer = styled('img')({
+ width: 'auto',
+ height: 'auto',
+ userSelect: 'none',
+ objectFit: 'contain',
+ cursor: 'pointer'
+})
+
+export const CustomAppBar = styled(AppBar)(({ theme }) => ({
+ backgroundColor: theme.palette.mode === "light" ? theme.palette.background.default : "#19191b",
+ [theme.breakpoints.only('xs')]: {
+ gap: '15px',
+ },
+}))
+
+export const CustomToolbar = styled(Toolbar)({
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center'
+})
+
+export const CustomTitle = styled(Typography)({
+ fontWeight: 600,
+ color: '#000000'
+})
+
+export const StyledButton = styled(Button)(({ theme }) => ({
+ fontWeight: 600,
+ color: theme.palette.text.primary
+}))
+
+export const CreateBlogButton = styled(Button)(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ padding: '8px 15px',
+ borderRadius: "40px",
+ gap: '4px',
+ backgroundColor: theme.palette.secondary.main,
+ color: '#fff',
+ fontFamily: "Arial",
+ transition: "all 0.3s ease-in-out",
+ boxShadow: "none",
+ "&:hover": {
+ cursor: "pointer",
+ boxShadow: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;",
+ backgroundColor: theme.palette.secondary.main,
+ filter: "brightness(1.1)",
+ }
+}))
+
+export const AuthenticateButton = styled(Button)({
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ padding: '8px 15px',
+ borderRadius: "40px",
+ gap: '4px',
+ backgroundColor: "#4ACE91",
+ color: '#fff',
+ fontFamily: "Arial",
+ transition: "all 0.3s ease-in-out",
+ boxShadow: "none",
+ "&:hover": {
+ cursor: "pointer",
+ boxShadow: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;",
+ backgroundColor: "#4ACE91",
+ filter: "brightness(1.1)",
+ }
+})
+
+export const AvatarContainer = styled(Box)({
+ display: 'flex',
+ alignItems: 'center',
+ "&:hover": {
+ cursor: "pointer",
+ "& #expand-icon": {
+ transition: "all 0.3s ease-in-out",
+ filter: "brightness(0.7)",
+ }
+ },
+});
+
+export const DropdownContainer = styled(Box)(({ theme }) => ({
+ display: "flex",
+ alignItems: "center",
+ gap: "5px",
+ backgroundColor: theme.palette.primary.main,
+ padding: "10px 15px",
+ transition: "all 0.4s ease-in-out",
+ "&:hover": {
+ cursor: "pointer",
+ filter: "brightness(0.95)"
+ }
+}));
+
+export const DropdownText = styled(Typography)(({ theme }) => ({
+ fontFamily: "Arial",
+ fontSize: "16px",
+ color: theme.palette.text.primary,
+ userSelect: "none"
+}));
+
+export const NavbarName = styled(Typography)(({ theme }) => ({
+ fontFamily: "Arial",
+ fontSize: "18px",
+ color: theme.palette.text.primary,
+ margin: "0 10px",
+}));
\ No newline at end of file
diff --git a/src/components/layout/Navbar/Navbar.tsx b/src/components/layout/Navbar/Navbar.tsx
new file mode 100644
index 0000000..e595aa8
--- /dev/null
+++ b/src/components/layout/Navbar/Navbar.tsx
@@ -0,0 +1,490 @@
+import React, { useMemo, useRef, useState } from 'react'
+import {
+ Typography,
+ Box,
+ Popover,
+ useTheme,
+ Button,
+ Input,
+ List,
+ ListItem,
+ ListItemText
+} from '@mui/material'
+import AccountCircle from '@mui/icons-material/AccountCircle'
+import AddBoxIcon from '@mui/icons-material/AddBox'
+import Badge from '@mui/material/Badge'
+import NotificationsIcon from '@mui/icons-material/Notifications'
+import ExitToAppIcon from '@mui/icons-material/ExitToApp'
+import { useNavigate } from 'react-router-dom'
+import { togglePublishBlogModal } from '../../../state/features/globalSlice'
+import { useDispatch, useSelector } from 'react-redux'
+import AutoStoriesIcon from '@mui/icons-material/AutoStories'
+import { RootState } from '../../../state/store'
+import { UserNavbar } from '../../common/UserNavbar/UserNavbar'
+import { removePrefix } from '../../../utils/blogIdformats'
+import { useLocation } from 'react-router-dom'
+import BookmarkIcon from '@mui/icons-material/Bookmark'
+import SubscriptionsIcon from '@mui/icons-material/Subscriptions'
+import { BlockedNamesModal } from '../../common/BlockedNamesModal/BlockedNamesModal'
+import SearchIcon from '@mui/icons-material/Search'
+import EmailIcon from '@mui/icons-material/Email'
+import localforage from 'localforage'
+const notification = localforage.createInstance({
+ name: 'notification'
+})
+
+import BackspaceIcon from '@mui/icons-material/Backspace'
+import {
+ AvatarContainer,
+ CreateBlogButton,
+ CustomAppBar,
+ CustomToolbar,
+ DropdownContainer,
+ DropdownText,
+ QblogLogoContainer,
+ StyledButton,
+ AuthenticateButton,
+ NavbarName
+} from './Navbar-styles'
+import { AccountCircleSVG } from '../../../assets/svgs/AccountCircleSVG'
+import QblogLogo from '../../../assets/img/qBlogLogo.png'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import PersonOffIcon from '@mui/icons-material/PersonOff'
+import { NewWindowSVG } from '../../../assets/svgs/NewWindowSVG'
+import {
+ addFilteredPosts,
+ setFilterValue,
+ setIsFiltering
+} from '../../../state/features/blogSlice'
+import { Item } from '../../common/Comments/CommentEditor'
+import { formatDate } from '../../../utils/time'
+interface Props {
+ isAuthenticated: boolean
+ hasBlog: boolean
+ userName: string | null
+ userAvatar: string
+ blog: any
+ authenticate: () => void
+ hasAttemptedToFetchBlogInitial: boolean
+}
+
+function useQuery() {
+ return new URLSearchParams(useLocation().search)
+}
+
+const NavBar: React.FC = ({
+ isAuthenticated,
+ hasBlog,
+ userName,
+ userAvatar,
+ blog,
+ authenticate,
+ hasAttemptedToFetchBlogInitial
+}) => {
+ const navigate = useNavigate()
+ const dispatch = useDispatch()
+ const theme = useTheme()
+ const query = useQuery()
+ const { visitingBlog } = useSelector((state: RootState) => state.global)
+ const notifications = useSelector(
+ (state: RootState) => state.global.notifications
+ )
+ const notificationCreatorComment = useSelector(
+ (state: RootState) => state.global.notificationCreatorComment
+ )
+
+ const fullNotifications = useMemo(() => {
+ return [...notificationCreatorComment, ...notifications].sort(
+ (a, b) => b.created - a.created
+ )
+ }, [notificationCreatorComment, notifications])
+ const location = useLocation()
+ const [anchorEl, setAnchorEl] = React.useState(null)
+ const [anchorElNotification, setAnchorElNotification] =
+ React.useState(null)
+ const [isOpenModal, setIsOpenModal] = React.useState(false)
+ const [searchVal, setSearchVal] = useState('')
+ const searchValRef = useRef('')
+ const inputRef = useRef(null)
+ const stripBlogId = removePrefix(visitingBlog?.blogId || '')
+ if (visitingBlog?.navbarConfig && location?.pathname?.includes(stripBlogId)) {
+ return (
+
+ )
+ }
+
+ const handleClick = (event: React.MouseEvent) => {
+ const target = event.currentTarget as unknown as HTMLButtonElement | null
+ setAnchorEl(target)
+ }
+ const openNotificationPopover = (event: any) => {
+ const target = event.currentTarget as unknown as HTMLButtonElement | null
+ setAnchorElNotification(target)
+ }
+ const closeNotificationPopover = () => {
+ setAnchorElNotification(null)
+ }
+
+ const handleClose = () => {
+ setAnchorEl(null)
+ }
+ const onClose = () => {
+ setIsOpenModal(false)
+ }
+ const open = Boolean(anchorEl)
+ const id = open ? 'simple-popover' : undefined
+ const openPopover = Boolean(anchorElNotification)
+ const idNotification = openPopover ? 'simple-popover-notification' : undefined
+
+ return (
+
+
+ {
+ navigate(`/`)
+ dispatch(setIsFiltering(false))
+ dispatch(setFilterValue(''))
+ dispatch(addFilteredPosts([]))
+ searchValRef.current = ''
+ if (!inputRef.current) return
+ inputRef.current.value = ''
+ }}
+ />
+
+ {
+ searchValRef.current = e.target.value
+ }}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter' || event.keyCode === 13) {
+ if (!searchValRef.current) {
+ dispatch(setIsFiltering(false))
+ dispatch(setFilterValue(''))
+ dispatch(addFilteredPosts([]))
+ searchValRef.current = ''
+ if (!inputRef.current) return
+ inputRef.current.value = ''
+ return
+ }
+ navigate('/')
+ dispatch(setIsFiltering(true))
+ dispatch(addFilteredPosts([]))
+ dispatch(setFilterValue(searchValRef.current))
+ }
+ }}
+ placeholder="Filter by name"
+ sx={{
+ '&&:before': {
+ borderBottom: 'none'
+ },
+ '&&:after': {
+ borderBottom: 'none'
+ },
+ '&&:hover:before': {
+ borderBottom: 'none'
+ },
+ '&&.Mui-focused:before': {
+ borderBottom: 'none'
+ },
+ '&&.Mui-focused': {
+ outline: 'none'
+ },
+ fontSize: '18px'
+ }}
+ />
+
+ {
+ if (!searchValRef.current) {
+ dispatch(setIsFiltering(false))
+ dispatch(setFilterValue(''))
+ dispatch(addFilteredPosts([]))
+ searchValRef.current = ''
+ if (!inputRef.current) return
+ inputRef.current.value = ''
+ return
+ }
+ navigate('/')
+ dispatch(setIsFiltering(true))
+ dispatch(addFilteredPosts([]))
+ dispatch(setFilterValue(searchValRef.current))
+ }}
+ />
+ {
+ dispatch(setIsFiltering(false))
+ dispatch(setFilterValue(''))
+ dispatch(addFilteredPosts([]))
+ searchValRef.current = ''
+ if (!inputRef.current) return
+ inputRef.current.value = ''
+ }}
+ />
+
+
+ {/* Add isAuthenticated && before username and wrap StyledButton in this condition*/}
+ {!isAuthenticated && (
+
+
+ Authenticate
+
+ )}
+
+
+
+
+
+
+ {fullNotifications.map((notification: any, index: number) => (
+ {
+ const str = notification.postId
+ const arr = str.split('-post-')
+ const str1 = arr[0]
+ const str2 = arr[1]
+ const blogId = removePrefix(str1)
+ navigate(
+ `/${notification.postName}/${blogId}/${str2}?comment=${notification.identifier}`
+ )
+ }}
+ >
+