mirror of
https://github.com/Qortal/q-mail.git
synced 2025-02-11 17:55:56 +00:00
remove files
This commit is contained in:
parent
ddedcc5c75
commit
8a6f803c12
7
src/assets/svgs/IconTypes.ts
Normal file
7
src/assets/svgs/IconTypes.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export interface IconTypes {
|
||||
color?: string;
|
||||
height: string;
|
||||
width: string;
|
||||
className?: string;
|
||||
onClickFunc?: (e?: any) => void;
|
||||
}
|
||||
@ -1,218 +0,0 @@
|
||||
import * as React from 'react'
|
||||
import { styled, useTheme } from '@mui/material/styles'
|
||||
import Box from '@mui/material/Box'
|
||||
import Typography from '@mui/material/Typography'
|
||||
|
||||
import AudiotrackIcon from '@mui/icons-material/Audiotrack'
|
||||
import { MyContext } from '../wrappers/DownloadWrapper'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { RootState } from '../state/store'
|
||||
import { CircularProgress } from '@mui/material'
|
||||
import {
|
||||
setCurrAudio,
|
||||
setShowingAudioPlayer
|
||||
} from '../state/features/globalSlice'
|
||||
|
||||
const Widget = styled('div')(({ theme }) => ({
|
||||
padding: 16,
|
||||
borderRadius: 16,
|
||||
maxWidth: '100%',
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
// backgroundColor:
|
||||
// theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.4)',
|
||||
backdropFilter: 'blur(40px)',
|
||||
background: 'skyblue',
|
||||
transition: '0.2s all',
|
||||
'&:hover': {
|
||||
opacity: 0.75
|
||||
}
|
||||
}))
|
||||
|
||||
const CoverImage = styled('div')({
|
||||
width: 100,
|
||||
height: 100,
|
||||
objectFit: 'cover',
|
||||
overflow: 'hidden',
|
||||
flexShrink: 0,
|
||||
borderRadius: 8,
|
||||
backgroundColor: 'rgba(0,0,0,0.08)',
|
||||
'& > img': {
|
||||
width: '100%'
|
||||
}
|
||||
})
|
||||
|
||||
const TinyText = styled(Typography)({
|
||||
fontSize: '0.75rem',
|
||||
opacity: 0.38,
|
||||
fontWeight: 500,
|
||||
letterSpacing: 0.2
|
||||
})
|
||||
|
||||
interface IAudioElement {
|
||||
onClick: () => void
|
||||
title: string
|
||||
description: string
|
||||
author: string
|
||||
audioInfo?: any
|
||||
postId?: string
|
||||
user?: string
|
||||
}
|
||||
|
||||
export default function AudioElement({
|
||||
onClick,
|
||||
title,
|
||||
description,
|
||||
author,
|
||||
audioInfo,
|
||||
postId,
|
||||
user
|
||||
}: IAudioElement) {
|
||||
const { downloadVideo } = React.useContext(MyContext)
|
||||
const [isLoading, setIsLoading] = React.useState<boolean>(false)
|
||||
const { downloads } = useSelector((state: RootState) => state.global)
|
||||
const dispatch = useDispatch()
|
||||
const download = React.useMemo(() => {
|
||||
if (!downloads || !audioInfo?.identifier) return {}
|
||||
const findDownload = downloads[audioInfo?.identifier]
|
||||
|
||||
if (!findDownload) return {}
|
||||
return findDownload
|
||||
}, [downloads, audioInfo])
|
||||
|
||||
const resourceStatus = React.useMemo(() => {
|
||||
return download?.status || {}
|
||||
}, [download])
|
||||
const handlePlay = () => {
|
||||
if (!postId) return
|
||||
const { name, service, identifier } = audioInfo
|
||||
|
||||
if (download && resourceStatus?.status === 'READY') {
|
||||
dispatch(setShowingAudioPlayer(true))
|
||||
dispatch(setCurrAudio(identifier))
|
||||
return
|
||||
}
|
||||
setIsLoading(true)
|
||||
downloadVideo({
|
||||
name,
|
||||
service,
|
||||
identifier,
|
||||
blogPost: {
|
||||
postId,
|
||||
user,
|
||||
audioTitle: title,
|
||||
audioDescription: description,
|
||||
audioAuthor: author
|
||||
}
|
||||
})
|
||||
dispatch(setCurrAudio(identifier))
|
||||
dispatch(setShowingAudioPlayer(true))
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (resourceStatus?.status === 'READY') {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [resourceStatus])
|
||||
return (
|
||||
<Box
|
||||
onClick={handlePlay}
|
||||
sx={{
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
<Widget>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<CoverImage>
|
||||
<AudiotrackIcon
|
||||
sx={{
|
||||
width: '90%',
|
||||
height: 'auto'
|
||||
}}
|
||||
/>
|
||||
</CoverImage>
|
||||
<Box sx={{ ml: 1.5, minWidth: 0 }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
fontWeight={500}
|
||||
>
|
||||
{author}
|
||||
</Typography>
|
||||
<Typography noWrap>
|
||||
<b>{title}</b>
|
||||
</Typography>
|
||||
<Typography noWrap letterSpacing={-0.25}>
|
||||
{description}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
{((resourceStatus.status && resourceStatus?.status !== 'READY') ||
|
||||
isLoading) && (
|
||||
<Box
|
||||
position="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
bottom={0}
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
zIndex={4999}
|
||||
bgcolor="rgba(0, 0, 0, 0.6)"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '10px',
|
||||
padding: '16px',
|
||||
borderRadius: '16px'
|
||||
}}
|
||||
>
|
||||
<CircularProgress color="secondary" />
|
||||
{resourceStatus && (
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
component="div"
|
||||
sx={{
|
||||
color: 'white',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
>
|
||||
{resourceStatus?.status === 'REFETCHING' ? (
|
||||
<>
|
||||
<>
|
||||
{(
|
||||
(resourceStatus?.localChunkCount /
|
||||
resourceStatus?.totalChunkCount) *
|
||||
100
|
||||
)?.toFixed(0)}
|
||||
%
|
||||
</>
|
||||
|
||||
<> Refetching in 2 minutes</>
|
||||
</>
|
||||
) : resourceStatus?.status === 'DOWNLOADED' ? (
|
||||
<>Download Completed: building audio...</>
|
||||
) : resourceStatus?.status !== 'READY' ? (
|
||||
<>
|
||||
{(
|
||||
(resourceStatus?.localChunkCount /
|
||||
resourceStatus?.totalChunkCount) *
|
||||
100
|
||||
)?.toFixed(0)}
|
||||
%
|
||||
</>
|
||||
) : (
|
||||
<>Download Completed: fetching audio...</>
|
||||
)}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Widget>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
export function convertQortalLinks(inputHtml) {
|
||||
export function convertQortalLinks(inputHtml:string) {
|
||||
// Regular expression to match 'qortal://...' URLs.
|
||||
// This will stop at the first whitespace, comma, or HTML tag
|
||||
var regex = /(qortal:\/\/[^\s,<]+)/g;
|
||||
|
||||
@ -1,492 +0,0 @@
|
||||
import React, { useContext, useMemo, useRef, useState } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { Box, IconButton, Slider } from '@mui/material'
|
||||
import { CircularProgress, Typography } from '@mui/material'
|
||||
|
||||
import {
|
||||
PlayArrow,
|
||||
Pause,
|
||||
VolumeUp,
|
||||
Fullscreen,
|
||||
PictureInPicture
|
||||
} from '@mui/icons-material'
|
||||
import { styled } from '@mui/system'
|
||||
import { MyContext } from '../../wrappers/DownloadWrapper'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { RootState } from '../../state/store'
|
||||
|
||||
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<VideoPlayerProps> = ({
|
||||
poster,
|
||||
name,
|
||||
identifier,
|
||||
service,
|
||||
autoplay = true,
|
||||
from = null,
|
||||
setCount,
|
||||
customStyle = {},
|
||||
user = '',
|
||||
postId = ''
|
||||
}) => {
|
||||
const videoRef = useRef<HTMLVideoElement | null>(null)
|
||||
const [playing, setPlaying] = useState(false)
|
||||
const [volume, setVolume] = useState(1)
|
||||
const [progress, setProgress] = useState(0)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [startPlay, setStartPlay] = useState(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 toggleRef = useRef<any>(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)
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
if (!isFullscreen) {
|
||||
enterFullscreen()
|
||||
} else {
|
||||
exitFullscreen()
|
||||
}
|
||||
}
|
||||
const togglePictureInPicture = async () => {
|
||||
if (!videoRef.current) return
|
||||
if (document.pictureInPictureElement === videoRef.current) {
|
||||
await document.exitPictureInPicture()
|
||||
} else {
|
||||
await videoRef.current.requestPictureInPicture()
|
||||
}
|
||||
}
|
||||
|
||||
React.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)
|
||||
}
|
||||
|
||||
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])
|
||||
|
||||
React.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
|
||||
)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
React.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 remainingSeconds: number | string = seconds % 60
|
||||
|
||||
if (minutes < 10) {
|
||||
minutes = '0' + minutes
|
||||
}
|
||||
if (remainingSeconds < 10) {
|
||||
remainingSeconds = '0' + remainingSeconds
|
||||
}
|
||||
|
||||
return minutes + ':' + remainingSeconds
|
||||
}
|
||||
|
||||
return (
|
||||
<VideoContainer
|
||||
style={{
|
||||
padding: from === 'create' ? '8px' : 0
|
||||
}}
|
||||
>
|
||||
{isLoading && (
|
||||
<Box
|
||||
position="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
bottom={0}
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
zIndex={4999}
|
||||
bgcolor="rgba(0, 0, 0, 0.6)"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '10px'
|
||||
}}
|
||||
>
|
||||
<CircularProgress color="secondary" />
|
||||
{resourceStatus && (
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
component="div"
|
||||
sx={{
|
||||
color: 'white',
|
||||
fontSize: '18px'
|
||||
}}
|
||||
>
|
||||
{resourceStatus?.status === 'REFETCHING' ? (
|
||||
<>
|
||||
<>
|
||||
{(
|
||||
(resourceStatus?.localChunkCount /
|
||||
resourceStatus?.totalChunkCount) *
|
||||
100
|
||||
)?.toFixed(0)}
|
||||
%
|
||||
</>
|
||||
|
||||
<> Refetching in 2 minutes</>
|
||||
</>
|
||||
) : resourceStatus?.status === 'DOWNLOADED' ? (
|
||||
<>Download Completed: building video...</>
|
||||
) : resourceStatus?.status !== 'READY' ? (
|
||||
<>
|
||||
{(
|
||||
(resourceStatus?.localChunkCount /
|
||||
resourceStatus?.totalChunkCount) *
|
||||
100
|
||||
)?.toFixed(0)}
|
||||
%
|
||||
</>
|
||||
) : (
|
||||
<>Download Completed: fetching video...</>
|
||||
)}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
{((!src && !isLoading) || !startPlay) && (
|
||||
<Box
|
||||
position="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
bottom={0}
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
zIndex={500}
|
||||
bgcolor="rgba(0, 0, 0, 0.6)"
|
||||
onClick={() => {
|
||||
if (from === 'create') return
|
||||
|
||||
togglePlay()
|
||||
}}
|
||||
sx={{
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
<PlayArrow
|
||||
sx={{
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
color: 'white'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<VideoElement
|
||||
ref={videoRef}
|
||||
src={!startPlay ? '' : src}
|
||||
poster={poster}
|
||||
onTimeUpdate={updateProgress}
|
||||
autoPlay={autoplay}
|
||||
onEnded={handleEnded}
|
||||
// onLoadedMetadata={handleLoadedMetadata}
|
||||
onCanPlay={handleCanPlay}
|
||||
preload="metadata"
|
||||
style={{
|
||||
...customStyle
|
||||
}}
|
||||
/>
|
||||
<ControlsContainer
|
||||
style={{
|
||||
bottom: from === 'create' ? '15px' : 0
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
sx={{
|
||||
color: 'rgba(255, 255, 255, 0.7)'
|
||||
}}
|
||||
onClick={togglePlay}
|
||||
>
|
||||
{playing ? <Pause /> : <PlayArrow />}
|
||||
</IconButton>
|
||||
<Slider
|
||||
value={progress}
|
||||
onChange={onProgressChange}
|
||||
min={0}
|
||||
max={videoRef.current?.duration || 100}
|
||||
sx={{ flexGrow: 1, mx: 2 }}
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '14px',
|
||||
marginRight: '5px',
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
visibility:
|
||||
!videoRef.current?.duration || !progress ? 'hidden' : 'visible'
|
||||
}}
|
||||
>
|
||||
{progress && videoRef.current?.duration && formatTime(progress)}/
|
||||
{progress &&
|
||||
videoRef.current?.duration &&
|
||||
formatTime(videoRef.current?.duration)}
|
||||
</Typography>
|
||||
<VolumeUp />
|
||||
<Slider
|
||||
value={volume}
|
||||
onChange={onVolumeChange}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
/>
|
||||
<IconButton
|
||||
sx={{
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
marginLeft: '15px'
|
||||
}}
|
||||
ref={toggleRef}
|
||||
onClick={togglePictureInPicture}
|
||||
>
|
||||
<PictureInPicture />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
sx={{
|
||||
color: 'rgba(255, 255, 255, 0.7)'
|
||||
}}
|
||||
onClick={toggleFullscreen}
|
||||
>
|
||||
<Fullscreen />
|
||||
</IconButton>
|
||||
</ControlsContainer>
|
||||
</VideoContainer>
|
||||
)
|
||||
}
|
||||
@ -1,855 +0,0 @@
|
||||
import React, { useMemo, useRef, useState } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import {
|
||||
Button,
|
||||
Box,
|
||||
Typography,
|
||||
CardHeader,
|
||||
Avatar,
|
||||
useTheme
|
||||
} from '@mui/material'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { styled } from '@mui/system'
|
||||
import AudiotrackIcon from '@mui/icons-material/Audiotrack'
|
||||
import ReadOnlySlate from '../../components/editor/ReadOnlySlate'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { RootState } from '../../state/store'
|
||||
import { checkStructure } from '../../utils/checkStructure'
|
||||
import { BlogContent } from '../../interfaces/interfaces'
|
||||
import {
|
||||
setAudio,
|
||||
setCurrAudio,
|
||||
setIsLoadingGlobal,
|
||||
setVisitingBlog
|
||||
} from '../../state/features/globalSlice'
|
||||
import { VideoPlayer } from '../../components/common/VideoPlayer'
|
||||
import { AudioPlayer, IPlaylist } from '../../components/common/AudioPlayer'
|
||||
import { Responsive, WidthProvider } from 'react-grid-layout'
|
||||
import '/node_modules/react-grid-layout/css/styles.css'
|
||||
import '/node_modules/react-resizable/css/styles.css'
|
||||
import DynamicHeightItem from '../../components/DynamicHeightItem'
|
||||
import {
|
||||
addPrefix,
|
||||
buildIdentifierFromCreateTitleIdAndId
|
||||
} from '../../utils/blogIdformats'
|
||||
import { DynamicHeightItemMinimal } from '../../components/DynamicHeightItemMinimal'
|
||||
import { ReusableModal } from '../../components/modals/ReusableModal'
|
||||
import AudioElement from '../../components/AudioElement'
|
||||
import ErrorBoundary from '../../components/common/ErrorBoundary'
|
||||
import { CommentSection } from '../../components/common/Comments/CommentSection'
|
||||
import { Tipping } from '../../components/common/Tipping/Tipping'
|
||||
import FileElement from '../../components/FileElement'
|
||||
const ResponsiveGridLayout = WidthProvider(Responsive)
|
||||
const initialMinHeight = 2 // Define an initial minimum height for grid items
|
||||
|
||||
const md = [
|
||||
{ i: 'a', x: 0, y: 0, w: 4, h: initialMinHeight },
|
||||
{ i: 'b', x: 6, y: 0, w: 4, h: initialMinHeight }
|
||||
]
|
||||
const sm = [
|
||||
{ i: 'a', x: 0, y: 0, w: 6, h: initialMinHeight },
|
||||
{ i: 'b', x: 6, y: 0, w: 6, h: initialMinHeight }
|
||||
]
|
||||
const xs = [
|
||||
{ i: 'a', x: 0, y: 0, w: 6, h: initialMinHeight },
|
||||
{ i: 'b', x: 6, y: 0, w: 6, h: initialMinHeight }
|
||||
]
|
||||
|
||||
interface ILayoutGeneralSettings {
|
||||
padding: number
|
||||
blogPostType: string
|
||||
}
|
||||
export const BlogIndividualPost = () => {
|
||||
const { user, postId, blog } = useParams()
|
||||
const blogFull = React.useMemo(() => {
|
||||
if (!blog) return ''
|
||||
return addPrefix(blog)
|
||||
}, [blog])
|
||||
const { user: userState } = useSelector((state: RootState) => state.auth)
|
||||
const { audios, audioPostId } = useSelector(
|
||||
(state: RootState) => state.global
|
||||
)
|
||||
|
||||
const [avatarUrl, setAvatarUrl] = React.useState<string>('')
|
||||
const dispatch = useDispatch()
|
||||
const navigate = useNavigate()
|
||||
const theme = useTheme()
|
||||
// const [currAudio, setCurrAudio] = React.useState<number | null>(null)
|
||||
const [layouts, setLayouts] = React.useState<any>({ md, sm, xs })
|
||||
const [count, setCount] = React.useState<number>(1)
|
||||
const [layoutGeneralSettings, setLayoutGeneralSettings] =
|
||||
React.useState<ILayoutGeneralSettings | null>(null)
|
||||
const [currentBreakpoint, setCurrentBreakpoint] = React.useState<any>()
|
||||
const handleLayoutChange = (layout: any, layoutss: any) => {
|
||||
// const redoLayouts = setAutoHeight(layoutss)
|
||||
setLayouts(layoutss)
|
||||
// saveLayoutsToLocalStorage(layoutss)
|
||||
}
|
||||
const [blogContent, setBlogContent] = React.useState<BlogContent | null>(null)
|
||||
const [isOpenSwitchPlaylistModal, setisOpenSwitchPlaylistModal] =
|
||||
useState<boolean>(false)
|
||||
const tempSaveAudio = useRef<any>(null)
|
||||
const saveAudio = React.useRef<any>(null)
|
||||
|
||||
const fullPostId = useMemo(() => {
|
||||
if (!blog || !postId) return ''
|
||||
dispatch(setIsLoadingGlobal(true))
|
||||
const formBlogId = addPrefix(blog)
|
||||
const formPostId = buildIdentifierFromCreateTitleIdAndId(formBlogId, postId)
|
||||
return formPostId
|
||||
}, [blog, postId])
|
||||
const getBlogPost = React.useCallback(async () => {
|
||||
try {
|
||||
if (!blog || !postId) return
|
||||
dispatch(setIsLoadingGlobal(true))
|
||||
const formBlogId = addPrefix(blog)
|
||||
const formPostId = buildIdentifierFromCreateTitleIdAndId(
|
||||
formBlogId,
|
||||
postId
|
||||
)
|
||||
const url = `/arbitrary/BLOG_POST/${user}/${formPostId}`
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
const responseData = await response.json()
|
||||
|
||||
if (checkStructure(responseData)) {
|
||||
setBlogContent(responseData)
|
||||
if (responseData?.layouts) {
|
||||
setLayouts(responseData?.layouts)
|
||||
}
|
||||
if (responseData?.layoutGeneralSettings) {
|
||||
setLayoutGeneralSettings(responseData.layoutGeneralSettings)
|
||||
}
|
||||
const filteredAudios = (responseData?.postContent || []).filter(
|
||||
(content: any) => content?.type === 'audio'
|
||||
)
|
||||
|
||||
const transformAudios = filteredAudios?.map((fa: any) => {
|
||||
return {
|
||||
...(fa?.content || {}),
|
||||
id: fa?.id
|
||||
}
|
||||
})
|
||||
|
||||
if (!audios && transformAudios.length > 0) {
|
||||
saveAudio.current = { audios: transformAudios, postId: formPostId }
|
||||
dispatch(setAudio({ audios: transformAudios, postId: formPostId }))
|
||||
} else if (
|
||||
formPostId === audioPostId &&
|
||||
audios?.length !== transformAudios.length
|
||||
) {
|
||||
tempSaveAudio.current = {
|
||||
message:
|
||||
"This post's audio playlist has updated. Would you like to switch?"
|
||||
}
|
||||
setisOpenSwitchPlaylistModal(true)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
} finally {
|
||||
dispatch(setIsLoadingGlobal(false))
|
||||
}
|
||||
}, [user, postId, blog])
|
||||
React.useEffect(() => {
|
||||
getBlogPost()
|
||||
}, [postId])
|
||||
|
||||
const switchPlayList = () => {
|
||||
const filteredAudios = (blogContent?.postContent || []).filter(
|
||||
(content) => content?.type === 'audio'
|
||||
)
|
||||
|
||||
const formatAudios = filteredAudios.map((fa) => {
|
||||
return {
|
||||
...(fa?.content || {}),
|
||||
id: fa?.id
|
||||
}
|
||||
})
|
||||
if (!blog || !postId) return
|
||||
const formBlogId = addPrefix(blog)
|
||||
const formPostId = buildIdentifierFromCreateTitleIdAndId(formBlogId, postId)
|
||||
dispatch(setAudio({ audios: formatAudios, postId: formPostId }))
|
||||
if (tempSaveAudio?.current?.currentSelection) {
|
||||
const findIndex = (formatAudios || []).findIndex(
|
||||
(item) =>
|
||||
item?.identifier ===
|
||||
tempSaveAudio?.current?.currentSelection?.content?.identifier
|
||||
)
|
||||
if (findIndex >= 0) {
|
||||
dispatch(setCurrAudio(findIndex))
|
||||
}
|
||||
}
|
||||
setisOpenSwitchPlaylistModal(false)
|
||||
}
|
||||
|
||||
const getAvatar = React.useCallback(async () => {
|
||||
try {
|
||||
let url = await qortalRequest({
|
||||
action: 'GET_QDN_RESOURCE_URL',
|
||||
name: user,
|
||||
service: 'THUMBNAIL',
|
||||
identifier: 'qortal_avatar'
|
||||
})
|
||||
|
||||
setAvatarUrl(url)
|
||||
} catch (error) {}
|
||||
}, [user])
|
||||
React.useEffect(() => {
|
||||
getAvatar()
|
||||
}, [])
|
||||
|
||||
const onBreakpointChange = React.useCallback((newBreakpoint: any) => {
|
||||
setCurrentBreakpoint(newBreakpoint)
|
||||
}, [])
|
||||
|
||||
const onResizeStop = React.useCallback((layout: any, layoutItem: any) => {
|
||||
// Update the layout state with the new position and size of the component
|
||||
setCount((prev) => prev + 1)
|
||||
}, [])
|
||||
|
||||
// const audios = React.useMemo<IPlaylist[]>(() => {
|
||||
// const filteredAudios = (blogContent?.postContent || []).filter(
|
||||
// (content) => content.type === 'audio'
|
||||
// )
|
||||
|
||||
// return filteredAudios.map((fa) => {
|
||||
// return {
|
||||
// ...fa.content,
|
||||
// id: fa.id
|
||||
// }
|
||||
// })
|
||||
// }, [blogContent])
|
||||
|
||||
const handleResize = () => {
|
||||
setCount((prev) => prev + 1)
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
window.addEventListener('resize', handleResize)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleCount = React.useCallback(() => {
|
||||
// Update the layout state with the new position and size of the component
|
||||
setCount((prev) => prev + 1)
|
||||
}, [])
|
||||
|
||||
const getBlog = React.useCallback(async () => {
|
||||
let name = user
|
||||
if (!name) return
|
||||
if (!blogFull) return
|
||||
try {
|
||||
const urlBlog = `/arbitrary/BLOG/${name}/${blogFull}`
|
||||
const response = await fetch(urlBlog, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
const responseData = await response.json()
|
||||
dispatch(setVisitingBlog({ ...responseData, name }))
|
||||
} catch (error) {}
|
||||
}, [user, blogFull])
|
||||
|
||||
React.useEffect(() => {
|
||||
getBlog()
|
||||
}, [user, blogFull])
|
||||
|
||||
if (!blogContent) return null
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: '1400px',
|
||||
// margin: '15px',
|
||||
width: '95%',
|
||||
paddingBottom: '50px'
|
||||
}}
|
||||
>
|
||||
{user === userState?.name && (
|
||||
<Button
|
||||
sx={{ backgroundColor: theme.palette.secondary.main }}
|
||||
onClick={() => {
|
||||
navigate(`/${user}/${blog}/${postId}/edit`)
|
||||
}}
|
||||
>
|
||||
Edit Post
|
||||
</Button>
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1
|
||||
}}
|
||||
>
|
||||
<CardHeader
|
||||
onClick={() => {
|
||||
navigate(`/${user}/${blog}`)
|
||||
}}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
'& .MuiCardHeader-content': {
|
||||
overflow: 'hidden'
|
||||
},
|
||||
padding: '10px 0px'
|
||||
}}
|
||||
avatar={<Avatar src={avatarUrl} alt={`${user}'s avatar`} />}
|
||||
subheader={
|
||||
<Typography
|
||||
sx={{ fontFamily: 'Cairo', fontSize: '25px' }}
|
||||
color={theme.palette.text.primary}
|
||||
>{` ${user}`}</Typography>
|
||||
}
|
||||
/>
|
||||
{user && (
|
||||
<Tipping
|
||||
name={user || ''}
|
||||
onSubmit={() => {
|
||||
// setNameTip('')
|
||||
}}
|
||||
onClose={() => {
|
||||
// setNameTip('')
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h1"
|
||||
color="textPrimary"
|
||||
sx={{
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
{blogContent?.title}
|
||||
</Typography>
|
||||
<CommentSection postId={fullPostId} />
|
||||
</Box>
|
||||
|
||||
{(layoutGeneralSettings?.blogPostType === 'builder' ||
|
||||
!layoutGeneralSettings?.blogPostType) && (
|
||||
<Content
|
||||
layouts={layouts}
|
||||
blogContent={blogContent}
|
||||
onResizeStop={onResizeStop}
|
||||
onBreakpointChange={onBreakpointChange}
|
||||
handleLayoutChange={handleLayoutChange}
|
||||
>
|
||||
{blogContent?.postContent?.map((section: any) => {
|
||||
if (section?.type === 'editor') {
|
||||
return (
|
||||
<div key={section?.id} className="grid-item-view">
|
||||
<ErrorBoundary
|
||||
fallback={
|
||||
<Typography>
|
||||
Error loading content: Invalid Data
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
<DynamicHeightItem
|
||||
layouts={layouts}
|
||||
setLayouts={setLayouts}
|
||||
i={section.id}
|
||||
breakpoint={currentBreakpoint}
|
||||
count={count}
|
||||
padding={layoutGeneralSettings?.padding}
|
||||
>
|
||||
<ReadOnlySlate content={section.content} />
|
||||
</DynamicHeightItem>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (section?.type === 'image') {
|
||||
return (
|
||||
<div key={section?.id} className="grid-item-view">
|
||||
<ErrorBoundary
|
||||
fallback={
|
||||
<Typography>
|
||||
Error loading content: Invalid Data
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
<DynamicHeightItem
|
||||
layouts={layouts}
|
||||
setLayouts={setLayouts}
|
||||
i={section.id}
|
||||
breakpoint={currentBreakpoint}
|
||||
count={count}
|
||||
padding={layoutGeneralSettings?.padding}
|
||||
>
|
||||
<img
|
||||
src={section.content.image}
|
||||
className="post-image"
|
||||
/>
|
||||
</DynamicHeightItem>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (section?.type === 'video') {
|
||||
return (
|
||||
<div key={section?.id} className="grid-item-view">
|
||||
<ErrorBoundary
|
||||
fallback={
|
||||
<Typography>
|
||||
Error loading content: Invalid Data
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
<DynamicHeightItem
|
||||
layouts={layouts}
|
||||
setLayouts={setLayouts}
|
||||
i={section.id}
|
||||
breakpoint={currentBreakpoint}
|
||||
count={count}
|
||||
padding={layoutGeneralSettings?.padding}
|
||||
>
|
||||
<VideoPlayer
|
||||
name={section.content.name}
|
||||
service={section.content.service}
|
||||
identifier={section.content.identifier}
|
||||
setCount={handleCount}
|
||||
user={user}
|
||||
postId={fullPostId}
|
||||
/>
|
||||
</DynamicHeightItem>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (section?.type === 'audio') {
|
||||
return (
|
||||
<div key={section?.id} className="grid-item-view">
|
||||
<ErrorBoundary
|
||||
fallback={
|
||||
<Typography>
|
||||
Error loading content: Invalid Data
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
<DynamicHeightItem
|
||||
layouts={layouts}
|
||||
setLayouts={setLayouts}
|
||||
i={section.id}
|
||||
breakpoint={currentBreakpoint}
|
||||
count={count}
|
||||
padding={layoutGeneralSettings?.padding}
|
||||
>
|
||||
<AudioElement
|
||||
key={section.id}
|
||||
audioInfo={section.content}
|
||||
postId={fullPostId}
|
||||
user={user ? user : ''}
|
||||
onClick={() => {
|
||||
if (!blog || !postId) return
|
||||
|
||||
const formBlogId = addPrefix(blog)
|
||||
const formPostId =
|
||||
buildIdentifierFromCreateTitleIdAndId(
|
||||
formBlogId,
|
||||
postId
|
||||
)
|
||||
if (audioPostId && formPostId !== audioPostId) {
|
||||
tempSaveAudio.current = {
|
||||
...(tempSaveAudio.current || {}),
|
||||
currentSelection: section,
|
||||
message:
|
||||
'You are current on a playlist. Would you like to switch?'
|
||||
}
|
||||
setisOpenSwitchPlaylistModal(true)
|
||||
} else {
|
||||
if (!audios && saveAudio?.current) {
|
||||
const findIndex = (
|
||||
saveAudio?.current?.audios || []
|
||||
).findIndex(
|
||||
(item: any) =>
|
||||
item.identifier ===
|
||||
section.content.identifier
|
||||
)
|
||||
dispatch(setAudio(saveAudio?.current))
|
||||
dispatch(setCurrAudio(findIndex))
|
||||
return
|
||||
}
|
||||
|
||||
const findIndex = (audios || []).findIndex(
|
||||
(item) =>
|
||||
item.identifier === section.content.identifier
|
||||
)
|
||||
if (findIndex >= 0) {
|
||||
dispatch(setCurrAudio(findIndex))
|
||||
}
|
||||
}
|
||||
}}
|
||||
title={section.content?.title}
|
||||
description={section.content?.description}
|
||||
author=""
|
||||
/>
|
||||
</DynamicHeightItem>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (section?.type === 'file') {
|
||||
return (
|
||||
<div key={section?.id} className="grid-item">
|
||||
<ErrorBoundary
|
||||
fallback={
|
||||
<Typography>
|
||||
Error loading content: Invalid Data
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
<DynamicHeightItemMinimal
|
||||
layouts={layouts}
|
||||
setLayouts={setLayouts}
|
||||
i={section.id}
|
||||
breakpoint={currentBreakpoint}
|
||||
count={count}
|
||||
padding={0}
|
||||
>
|
||||
<FileElement
|
||||
key={section.id}
|
||||
fileInfo={section.content}
|
||||
postId={fullPostId}
|
||||
user={user ? user : ''}
|
||||
title={section.content?.title}
|
||||
description={section.content?.description}
|
||||
mimeType={section.content?.mimeType}
|
||||
author=""
|
||||
/>
|
||||
</DynamicHeightItemMinimal>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</Content>
|
||||
)}
|
||||
{layoutGeneralSettings?.blogPostType === 'minimal' && (
|
||||
<>
|
||||
{layouts?.rows?.map((row: any, rowIndex: number) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginTop: '25px',
|
||||
gap: 2
|
||||
}}
|
||||
>
|
||||
{row?.ids?.map((elementId: string) => {
|
||||
const section: any = blogContent?.postContent?.find(
|
||||
(el) => el?.id === elementId
|
||||
)
|
||||
if (!section) return null
|
||||
if (section?.type === 'editor') {
|
||||
return (
|
||||
<div
|
||||
key={section?.id}
|
||||
className="grid-item"
|
||||
style={{
|
||||
maxWidth: '800px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<ErrorBoundary
|
||||
fallback={
|
||||
<Typography>
|
||||
Error loading content: Invalid Data
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
<DynamicHeightItemMinimal
|
||||
layouts={layouts}
|
||||
setLayouts={setLayouts}
|
||||
i={section.id}
|
||||
breakpoint={currentBreakpoint}
|
||||
count={count}
|
||||
padding={0}
|
||||
>
|
||||
<ReadOnlySlate
|
||||
key={section.id}
|
||||
content={section.content}
|
||||
/>
|
||||
</DynamicHeightItemMinimal>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (section?.type === 'image') {
|
||||
return (
|
||||
<div key={section.id} className="grid-item">
|
||||
<ErrorBoundary
|
||||
fallback={
|
||||
<Typography>
|
||||
Error loading content: Invalid Data
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
<DynamicHeightItemMinimal
|
||||
layouts={layouts}
|
||||
setLayouts={setLayouts}
|
||||
i={section.id}
|
||||
breakpoint={currentBreakpoint}
|
||||
count={count}
|
||||
type="image"
|
||||
padding={0}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={section.content.image}
|
||||
className="post-image"
|
||||
style={{
|
||||
objectFit: 'contain',
|
||||
maxHeight: '50vh'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</DynamicHeightItemMinimal>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (section?.type === 'video') {
|
||||
return (
|
||||
<div key={section?.id} className="grid-item">
|
||||
<ErrorBoundary
|
||||
fallback={
|
||||
<Typography>
|
||||
Error loading content: Invalid Data
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
<DynamicHeightItemMinimal
|
||||
layouts={layouts}
|
||||
setLayouts={setLayouts}
|
||||
i={section.id}
|
||||
breakpoint={currentBreakpoint}
|
||||
count={count}
|
||||
padding={0}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}}
|
||||
>
|
||||
<VideoPlayer
|
||||
name={section.content.name}
|
||||
service={section.content.service}
|
||||
identifier={section.content.identifier}
|
||||
customStyle={{
|
||||
height: '50vh'
|
||||
}}
|
||||
user={user}
|
||||
postId={fullPostId}
|
||||
/>
|
||||
</Box>
|
||||
</DynamicHeightItemMinimal>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (section?.type === 'audio') {
|
||||
return (
|
||||
<div key={section?.id} className="grid-item">
|
||||
<ErrorBoundary
|
||||
fallback={
|
||||
<Typography>
|
||||
Error loading content: Invalid Data
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
<DynamicHeightItemMinimal
|
||||
layouts={layouts}
|
||||
setLayouts={setLayouts}
|
||||
i={section.id}
|
||||
breakpoint={currentBreakpoint}
|
||||
count={count}
|
||||
padding={0}
|
||||
>
|
||||
<AudioElement
|
||||
key={section.id}
|
||||
audioInfo={section.content}
|
||||
postId={fullPostId}
|
||||
user={user ? user : ''}
|
||||
onClick={() => {
|
||||
if (!blog || !postId) return
|
||||
const formBlogId = addPrefix(blog)
|
||||
const formPostId =
|
||||
buildIdentifierFromCreateTitleIdAndId(
|
||||
formBlogId,
|
||||
postId
|
||||
)
|
||||
if (formPostId !== audioPostId) {
|
||||
tempSaveAudio.current = {
|
||||
...(tempSaveAudio.current || {}),
|
||||
currentSelection: section,
|
||||
message:
|
||||
'You are current on a playlist. Would you like to switch?'
|
||||
}
|
||||
setisOpenSwitchPlaylistModal(true)
|
||||
} else {
|
||||
const findIndex = (audios || []).findIndex(
|
||||
(item) =>
|
||||
item.identifier ===
|
||||
section.content.identifier
|
||||
)
|
||||
if (findIndex >= 0) {
|
||||
dispatch(setCurrAudio(findIndex))
|
||||
}
|
||||
}
|
||||
}}
|
||||
title={section.content?.title}
|
||||
description={section.content?.description}
|
||||
author=""
|
||||
/>
|
||||
</DynamicHeightItemMinimal>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (section?.type === 'file') {
|
||||
return (
|
||||
<div key={section?.id} className="grid-item">
|
||||
<ErrorBoundary
|
||||
fallback={
|
||||
<Typography>
|
||||
Error loading content: Invalid Data
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
<DynamicHeightItemMinimal
|
||||
layouts={layouts}
|
||||
setLayouts={setLayouts}
|
||||
i={section.id}
|
||||
breakpoint={currentBreakpoint}
|
||||
count={count}
|
||||
padding={0}
|
||||
>
|
||||
<FileElement
|
||||
key={section.id}
|
||||
fileInfo={section.content}
|
||||
postId={fullPostId}
|
||||
user={user ? user : ''}
|
||||
title={section.content?.title}
|
||||
description={section.content?.description}
|
||||
mimeType={section.content?.mimeType}
|
||||
author=""
|
||||
/>
|
||||
</DynamicHeightItemMinimal>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
<ReusableModal open={isOpenSwitchPlaylistModal}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1
|
||||
}}
|
||||
>
|
||||
<Typography>
|
||||
{tempSaveAudio?.current?.message
|
||||
? tempSaveAudio?.current?.message
|
||||
: 'You are current on a playlist. Would you like to switch?'}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => setisOpenSwitchPlaylistModal(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="contained" onClick={switchPlayList}>
|
||||
Switch
|
||||
</Button>
|
||||
</ReusableModal>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
const Content = ({
|
||||
children,
|
||||
layouts,
|
||||
blogContent,
|
||||
onResizeStop,
|
||||
onBreakpointChange,
|
||||
handleLayoutChange
|
||||
}: any) => {
|
||||
if (layouts && blogContent?.layouts) {
|
||||
return (
|
||||
<ErrorBoundary
|
||||
fallback={
|
||||
<Typography>Error loading content: Invalid Layout</Typography>
|
||||
}
|
||||
>
|
||||
<ResponsiveGridLayout
|
||||
layouts={layouts}
|
||||
breakpoints={{ md: 996, sm: 768, xs: 480 }}
|
||||
cols={{ md: 4, sm: 3, xs: 1 }}
|
||||
measureBeforeMount={false}
|
||||
onLayoutChange={handleLayoutChange}
|
||||
autoSize={true}
|
||||
compactType={null}
|
||||
isBounded={true}
|
||||
resizeHandles={['se', 'sw', 'ne', 'nw']}
|
||||
rowHeight={25}
|
||||
onResizeStop={onResizeStop}
|
||||
onBreakpointChange={onBreakpointChange}
|
||||
isDraggable={false}
|
||||
isResizable={false}
|
||||
margin={[0, 0]}
|
||||
>
|
||||
{children}
|
||||
</ResponsiveGridLayout>
|
||||
</ErrorBoundary>
|
||||
)
|
||||
}
|
||||
return children
|
||||
}
|
||||
@ -1,194 +0,0 @@
|
||||
import { Box, Button, Typography } from '@mui/material'
|
||||
import React, { useMemo, useState } from 'react'
|
||||
import { ReusableModal } from '../../components/modals/ReusableModal'
|
||||
import { CreatePostBuilder } from './CreatePostBuilder'
|
||||
import { CreatePostMinimal } from './CreatePostMinimal'
|
||||
import HandymanRoundedIcon from '@mui/icons-material/HandymanRounded'
|
||||
import HourglassFullRoundedIcon from '@mui/icons-material/HourglassFullRounded'
|
||||
import { display } from '@mui/system'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { setIsLoadingGlobal } from '../../state/features/globalSlice'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { checkStructure } from '../../utils/checkStructure'
|
||||
import { RootState } from '../../state/store'
|
||||
import {
|
||||
addPrefix,
|
||||
buildIdentifierFromCreateTitleIdAndId
|
||||
} from '../../utils/blogIdformats'
|
||||
import { Tipping } from '../../components/common/Tipping/Tipping'
|
||||
type EditorType = 'minimal' | 'builder'
|
||||
interface CreatePostProps {
|
||||
mode?: string
|
||||
}
|
||||
export const CreatePost = ({ mode }: CreatePostProps) => {
|
||||
const { user: username, postId, blog } = useParams()
|
||||
const fullPostId = useMemo(() => {
|
||||
if (!blog || !postId || mode !== 'edit') return ''
|
||||
const formBlogId = addPrefix(blog)
|
||||
const formPostId = buildIdentifierFromCreateTitleIdAndId(formBlogId, postId)
|
||||
return formPostId
|
||||
}, [blog, postId, mode])
|
||||
const { user } = useSelector((state: RootState) => state.auth)
|
||||
|
||||
const [toggleEditorType, setToggleEditorType] = useState<EditorType | null>(
|
||||
null
|
||||
)
|
||||
const [blogContentForEdit, setBlogContentForEdit] = useState<any>(null)
|
||||
const [blogMetadataForEdit, setBlogMetadataForEdit] = useState<any>(null)
|
||||
const [editType, setEditType] = useState<EditorType | null>(null)
|
||||
const [isOpen, setIsOpen] = useState<boolean>(false)
|
||||
const dispatch = useDispatch()
|
||||
React.useEffect(() => {
|
||||
if (!toggleEditorType && mode !== 'edit') {
|
||||
setIsOpen(true)
|
||||
}
|
||||
}, [setIsOpen, toggleEditorType])
|
||||
|
||||
const switchType = () => {
|
||||
setIsOpen(true)
|
||||
}
|
||||
|
||||
const getBlogPost = React.useCallback(async () => {
|
||||
try {
|
||||
dispatch(setIsLoadingGlobal(true))
|
||||
const url = `/arbitrary/BLOG_POST/${username}/${fullPostId}`
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
const responseData = await response.json()
|
||||
if (checkStructure(responseData)) {
|
||||
// setNewPostContent(responseData.postContent)
|
||||
// setTitle(responseData?.title || '')
|
||||
// setBlogInfo(responseData)
|
||||
const blogType = responseData?.layoutGeneralSettings?.blogPostType
|
||||
|
||||
if (blogType) {
|
||||
setEditType(blogType)
|
||||
setBlogContentForEdit(responseData)
|
||||
}
|
||||
//TODO - NAME SHOULD BE EXACT
|
||||
// const url2 = `/arbitrary/resources/search?mode=ALL&service=BLOG_POST&identifier=${fullPostId}&exactMatchNames=${username}&limit=1&includemetadata=true`
|
||||
const url2 = `/arbitrary/resources?service=BLOG_POST&identifier=${fullPostId}&name=${username}&limit=1&includemetadata=true`
|
||||
|
||||
const responseBlogs = await fetch(url2, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
const dataMetadata = await responseBlogs.json()
|
||||
if (dataMetadata && dataMetadata.length > 0) {
|
||||
setBlogMetadataForEdit(dataMetadata[0])
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
} finally {
|
||||
dispatch(setIsLoadingGlobal(false))
|
||||
}
|
||||
}, [username, fullPostId])
|
||||
React.useEffect(() => {
|
||||
if (mode === 'edit') {
|
||||
getBlogPost()
|
||||
}
|
||||
}, [mode])
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* {toggleEditorType === 'minimal' && (
|
||||
<Button onClick={() => switchType()}>Switch to Builder</Button>
|
||||
)}
|
||||
{toggleEditorType === 'builder' && (
|
||||
<Button onClick={() => switchType()}>Switch to Minimal</Button>
|
||||
)} */}
|
||||
{isOpen && (
|
||||
<ReusableModal
|
||||
open={isOpen}
|
||||
customStyles={{
|
||||
maxWidth: '500px'
|
||||
}}
|
||||
>
|
||||
{toggleEditorType && (
|
||||
<Typography>
|
||||
Switching editor type will delete your current progress
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: 2
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
onClick={() => {
|
||||
setToggleEditorType('minimal')
|
||||
setIsOpen(false)
|
||||
}}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '20px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
<Typography>Minimal Editor</Typography>
|
||||
<HourglassFullRoundedIcon />
|
||||
</Box>
|
||||
<Box
|
||||
onClick={() => {
|
||||
setToggleEditorType('builder')
|
||||
setIsOpen(false)
|
||||
}}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '20px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
<Typography>Builder Editor</Typography>
|
||||
<HandymanRoundedIcon />
|
||||
</Box>
|
||||
</Box>
|
||||
<Button onClick={() => setIsOpen(false)}>Close</Button>
|
||||
</ReusableModal>
|
||||
)}
|
||||
|
||||
{toggleEditorType === 'minimal' && (
|
||||
<CreatePostMinimal switchType={switchType} />
|
||||
)}
|
||||
{toggleEditorType === 'builder' && (
|
||||
<CreatePostBuilder switchType={switchType} />
|
||||
)}
|
||||
{mode === 'edit' && editType === 'minimal' && (
|
||||
<CreatePostMinimal
|
||||
blogContentForEdit={blogContentForEdit}
|
||||
postIdForEdit={fullPostId}
|
||||
blogMetadataForEdit={blogMetadataForEdit}
|
||||
/>
|
||||
)}
|
||||
{mode === 'edit' && editType === 'builder' && (
|
||||
<CreatePostBuilder
|
||||
blogContentForEdit={blogContentForEdit}
|
||||
postIdForEdit={fullPostId}
|
||||
blogMetadataForEdit={blogMetadataForEdit}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user