forked from Qortal/q-blog
Add video cover images
This commit is contained in:
953
BlogIndividualPost.tsx
Normal file
953
BlogIndividualPost.tsx
Normal file
@@ -0,0 +1,953 @@
|
|||||||
|
import React, { useMemo, useRef, useState } from 'react'
|
||||||
|
import { useParams } from 'react-router-dom'
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Box,
|
||||||
|
Typography,
|
||||||
|
CardHeader,
|
||||||
|
Avatar,
|
||||||
|
useTheme,
|
||||||
|
Tooltip
|
||||||
|
} 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 ShareIcon from '@mui/icons-material/Share'
|
||||||
|
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,
|
||||||
|
removePrefix
|
||||||
|
} 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'
|
||||||
|
import { CopyToClipboard } from 'react-copy-to-clipboard'
|
||||||
|
import { setNotification } from '../../state/features/notificationsSlice'
|
||||||
|
import ContextMenuResource from '../../components/common/ContextMenu/ContextMenuResource'
|
||||||
|
|
||||||
|
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: postIdTemp, blog:blogTemp } = useParams()
|
||||||
|
|
||||||
|
const blog = React.useMemo(()=> {
|
||||||
|
if(postIdTemp && postIdTemp?.includes('-post-')){
|
||||||
|
const str = postIdTemp
|
||||||
|
const arr = str.split('-post-')
|
||||||
|
const str1 = arr[0]
|
||||||
|
const blogId = removePrefix(str1)
|
||||||
|
return blogId
|
||||||
|
} else {
|
||||||
|
return blogTemp
|
||||||
|
}
|
||||||
|
}, [postIdTemp])
|
||||||
|
|
||||||
|
const postId = React.useMemo(()=> {
|
||||||
|
if(postIdTemp && postIdTemp?.includes('-post-')){
|
||||||
|
const str = postIdTemp
|
||||||
|
const arr = str.split('-post-')
|
||||||
|
const str2 = arr[1]
|
||||||
|
return str2
|
||||||
|
} else {
|
||||||
|
return postIdTemp
|
||||||
|
}
|
||||||
|
}, [postIdTemp])
|
||||||
|
|
||||||
|
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>
|
||||||
|
<Tooltip title={`Copy post link`} arrow>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
cursor: 'pointer'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CopyToClipboard
|
||||||
|
text={`qortal://APP/Q-Blog/${user}/${blog}/${postId}`}
|
||||||
|
onCopy={() => {
|
||||||
|
dispatch(
|
||||||
|
setNotification({
|
||||||
|
msg: 'Copied to clipboard!',
|
||||||
|
alertType: 'success'
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ShareIcon />
|
||||||
|
</CopyToClipboard>
|
||||||
|
</Box>
|
||||||
|
</Tooltip>
|
||||||
|
<CommentSection postId={fullPostId} postName={user || ''} />
|
||||||
|
</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}
|
||||||
|
>
|
||||||
|
<ContextMenuResource
|
||||||
|
name={section.content.name}
|
||||||
|
service={section.content.service}
|
||||||
|
identifier={section.content.identifier}
|
||||||
|
link={`qortal://${section?.content?.service}/${section?.content?.name}/${section?.content?.identifier}`}
|
||||||
|
>
|
||||||
|
<VideoPlayer
|
||||||
|
name={section.content.name}
|
||||||
|
service={section.content.service}
|
||||||
|
identifier={section.content.identifier}
|
||||||
|
poster={section.content.poster}
|
||||||
|
setCount={handleCount}
|
||||||
|
user={user}
|
||||||
|
postId={fullPostId}
|
||||||
|
/>
|
||||||
|
</ContextMenuResource>
|
||||||
|
</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}
|
||||||
|
>
|
||||||
|
<ContextMenuResource
|
||||||
|
name={section.content.name}
|
||||||
|
service={section.content.service}
|
||||||
|
identifier={section.content.identifier}
|
||||||
|
link={`qortal://${section?.content?.service}/${section?.content?.name}/${section?.content?.identifier}`}
|
||||||
|
>
|
||||||
|
<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=""
|
||||||
|
/>
|
||||||
|
</ContextMenuResource>
|
||||||
|
</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}
|
||||||
|
>
|
||||||
|
<ContextMenuResource
|
||||||
|
name={section.content.name}
|
||||||
|
service={section.content.service}
|
||||||
|
identifier={section.content.identifier}
|
||||||
|
link={`qortal://${section?.content?.service}/${section?.content?.name}/${section?.content?.identifier}`}
|
||||||
|
>
|
||||||
|
<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=""
|
||||||
|
/>
|
||||||
|
</ContextMenuResource>
|
||||||
|
</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}
|
||||||
|
>
|
||||||
|
<ContextMenuResource
|
||||||
|
name={section.content.name}
|
||||||
|
service={section.content.service}
|
||||||
|
identifier={section.content.identifier}
|
||||||
|
link={`qortal://${section?.content?.service}/${section?.content?.name}/${section?.content?.identifier}`}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'relative',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<VideoPlayer
|
||||||
|
name={section.content.name}
|
||||||
|
service={section.content.service}
|
||||||
|
identifier={section.content.identifier}
|
||||||
|
poster={section.content.poster}
|
||||||
|
customStyle={{
|
||||||
|
height: '50vh'
|
||||||
|
}}
|
||||||
|
user={user}
|
||||||
|
postId={fullPostId}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</ContextMenuResource>
|
||||||
|
</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}
|
||||||
|
>
|
||||||
|
<ContextMenuResource
|
||||||
|
name={section.content.name}
|
||||||
|
service={section.content.service}
|
||||||
|
identifier={section.content.identifier}
|
||||||
|
link={`qortal://${section?.content?.service}/${section?.content?.name}/${section?.content?.identifier}`}
|
||||||
|
>
|
||||||
|
<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=""
|
||||||
|
/>
|
||||||
|
</ContextMenuResource>
|
||||||
|
</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}
|
||||||
|
>
|
||||||
|
<ContextMenuResource
|
||||||
|
name={section.content.name}
|
||||||
|
service={section.content.service}
|
||||||
|
identifier={section.content.identifier}
|
||||||
|
link={`qortal://${section?.content?.service}/${section?.content?.name}/${section?.content?.identifier}`}
|
||||||
|
>
|
||||||
|
<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=""
|
||||||
|
/>
|
||||||
|
</ContextMenuResource>
|
||||||
|
</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
|
||||||
|
}
|
||||||
1586
CreatePostBuilder.tsx
Normal file
1586
CreatePostBuilder.tsx
Normal file
File diff suppressed because it is too large
Load Diff
1565
CreatePostMinimal.tsx
Normal file
1565
CreatePostMinimal.tsx
Normal file
File diff suppressed because it is too large
Load Diff
832
VideoPlayer.tsx
Normal file
832
VideoPlayer.tsx
Normal file
@@ -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<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 [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<boolean>(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<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)
|
||||||
|
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<HTMLDivElement>) =>
|
||||||
|
{
|
||||||
|
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<HTMLDivElement>) =>
|
||||||
|
{
|
||||||
|
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 (
|
||||||
|
<VideoContainer
|
||||||
|
tabIndex={0}
|
||||||
|
onKeyUp={keyboardShortcutsUp}
|
||||||
|
onKeyDown={keyboardShortcutsDown}
|
||||||
|
style={{
|
||||||
|
padding: from === 'create' ? '8px' : 0
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* <Box
|
||||||
|
sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '-30px',
|
||||||
|
right: '-15px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CopyToClipboard
|
||||||
|
text={`qortal://${service}/${name}/${identifier}`}
|
||||||
|
onCopy={() => {
|
||||||
|
dispatch(
|
||||||
|
setNotification({
|
||||||
|
msg: 'Copied to clipboard!',
|
||||||
|
alertType: 'success'
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<LinkIcon
|
||||||
|
sx={{
|
||||||
|
fontSize: '14px',
|
||||||
|
cursor: 'pointer'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</CopyToClipboard>
|
||||||
|
</Box> */}
|
||||||
|
{isLoading && (
|
||||||
|
<Box
|
||||||
|
position="absolute"
|
||||||
|
top={0}
|
||||||
|
left={0}
|
||||||
|
right={0}
|
||||||
|
bottom={resourceStatus?.status === 'READY' ? '55px ' : 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: '15px',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{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...</>
|
||||||
|
)}
|
||||||
|
</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={poster ? 'transparent' : '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 ? '' : resourceStatus?.status === 'READY' ? src : ''}
|
||||||
|
poster={poster}
|
||||||
|
onTimeUpdate={updateProgress}
|
||||||
|
autoPlay={autoplay}
|
||||||
|
onClick={togglePlay}
|
||||||
|
onEnded={handleEnded}
|
||||||
|
// onLoadedMetadata={handleLoadedMetadata}
|
||||||
|
onCanPlay={handleCanPlay}
|
||||||
|
preload="metadata"
|
||||||
|
style={{
|
||||||
|
...customStyle
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ControlsContainer
|
||||||
|
style={{
|
||||||
|
bottom: from === 'create' ? '15px' : 0
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isMobileView && canPlay ? (
|
||||||
|
<>
|
||||||
|
<IconButton
|
||||||
|
sx={{
|
||||||
|
color: 'rgba(255, 255, 255, 0.7)'
|
||||||
|
}}
|
||||||
|
onClick={togglePlay}
|
||||||
|
>
|
||||||
|
{playing ? <Pause /> : <PlayArrow />}
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
sx={{
|
||||||
|
color: 'rgba(255, 255, 255, 0.7)',
|
||||||
|
marginLeft: '15px'
|
||||||
|
}}
|
||||||
|
onClick={reloadVideo}
|
||||||
|
>
|
||||||
|
<Refresh />
|
||||||
|
</IconButton>
|
||||||
|
<Slider
|
||||||
|
value={progress}
|
||||||
|
onChange={onProgressChange}
|
||||||
|
min={0}
|
||||||
|
max={videoRef.current?.duration || 100}
|
||||||
|
sx={{ flexGrow: 1, mx: 2 }}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
edge="end"
|
||||||
|
color="inherit"
|
||||||
|
aria-label="menu"
|
||||||
|
onClick={handleMenuOpen}
|
||||||
|
>
|
||||||
|
<MoreIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Menu
|
||||||
|
id="simple-menu"
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
keepMounted
|
||||||
|
open={Boolean(anchorEl)}
|
||||||
|
onClose={handleMenuClose}
|
||||||
|
PaperProps={{
|
||||||
|
style: {
|
||||||
|
width: '250px'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem>
|
||||||
|
<VolumeUp />
|
||||||
|
<Slider
|
||||||
|
value={volume}
|
||||||
|
onChange={onVolumeChange}
|
||||||
|
min={0}
|
||||||
|
max={1}
|
||||||
|
step={0.01}/>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem onClick={() => increaseSpeed()}>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
color: 'rgba(255, 255, 255, 0.7)',
|
||||||
|
fontSize: '14px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Speed: {playbackRate}x
|
||||||
|
</Typography>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem onClick={togglePictureInPicture}>
|
||||||
|
<PictureInPicture />
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem onClick={toggleFullscreen}>
|
||||||
|
<Fullscreen />
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
</>
|
||||||
|
) : canPlay ? (
|
||||||
|
<>
|
||||||
|
<IconButton
|
||||||
|
sx={{
|
||||||
|
color: 'rgba(255, 255, 255, 0.7)'
|
||||||
|
}}
|
||||||
|
onClick={togglePlay}
|
||||||
|
>
|
||||||
|
{playing ? <Pause /> : <PlayArrow />}
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
sx={{
|
||||||
|
color: 'rgba(255, 255, 255, 0.7)',
|
||||||
|
marginLeft: '15px'
|
||||||
|
}}
|
||||||
|
onClick={reloadVideo}
|
||||||
|
>
|
||||||
|
<Refresh />
|
||||||
|
</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>
|
||||||
|
<IconButton
|
||||||
|
sx={{
|
||||||
|
color: 'rgba(255, 255, 255, 0.7)',
|
||||||
|
marginRight: '10px'
|
||||||
|
}}
|
||||||
|
onClick={toggleMute}
|
||||||
|
>
|
||||||
|
{isMuted ? <VolumeOff/>:<VolumeUp/>}
|
||||||
|
</IconButton>
|
||||||
|
<Slider
|
||||||
|
value={volume}
|
||||||
|
onChange={onVolumeChange}
|
||||||
|
min={0}
|
||||||
|
max={1}
|
||||||
|
step={0.01}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
sx={{
|
||||||
|
color: 'rgba(255, 255, 255, 0.7)',
|
||||||
|
fontSize: '14px',
|
||||||
|
marginLeft: '5px'
|
||||||
|
}}
|
||||||
|
onClick={(e) => increaseSpeed()}
|
||||||
|
>
|
||||||
|
Speed: {playbackRate}x
|
||||||
|
</IconButton>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</ControlsContainer>
|
||||||
|
{debug ? <span>{consoleLog}</span>: <></>}
|
||||||
|
</VideoContainer>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user