@ -1,26 +1,45 @@
import DownloadIcon from "@mui/icons-material/Download" ;
import { Avatar , Box , Typography , useTheme } from "@mui/material" ;
import React , { import React , {
useState , useCallback ,
useEffect ,
useMemo , useMemo ,
useRef , useRef ,
useEffect , useState ,
useCallback ,
} from "react" ; } from "react" ;
import { useDispatch , useSelector } from "react-redux" ; import { useDispatch , useSelector } from "react-redux" ;
import { useNavigate , useParams } from "react-router-dom" ; import { useNavigate , useParams } from "react-router-dom" ;
import ResponsiveImage from "../../../components/ResponsiveImage.tsx" ; import DeletedVideo from "../../../assets/img/DeletedVideo.jpg" ;
import { setIsLoadingGlobal } from "../../../state/features/globalSlice.ts" ; import { CommentSection } from "../../../components/common/Comments/CommentSection.tsx" ;
import { Avatar , Box , Typography , useTheme } from "@mui/material" ; import { FollowButton } from "../../../components/common/ContentButtons/FollowButton.tsx" ;
import { LikeAndDislike } from "../../../components/common/ContentButtons/LikeAndDislike.tsx" ;
import { SubscribeButton } from "../../../components/common/ContentButtons/SubscribeButton.tsx" ;
import { SuperLike } from "../../../components/common/ContentButtons/SuperLike.tsx" ;
import FileElement from "../../../components/common/FileElement.tsx" ;
import { SuperLikesSection } from "../../../components/common/SuperLikesList/SuperLikesSection.tsx" ;
import { DisplayHtml } from "../../../components/common/TextEditor/DisplayHtml.tsx" ;
import { import {
refType , refType ,
VideoPlayer , VideoPlayer ,
} from "../../../components/common/VideoPlayer/VideoPlayer.tsx" ; } from "../../../components/common/VideoPlayer/VideoPlayer.tsx" ;
import { RootState } from "../../../state/store.ts" ; import {
QTUBE_VIDEO_BASE ,
SUPER_LIKE_BASE ,
} from "../../../constants/Identifiers.ts" ;
import {
minPriceSuperlike ,
titleFormatterOnSave ,
} from "../../../constants/Misc.ts" ;
import { useFetchSuperLikes } from "../../../hooks/useFetchSuperLikes.tsx" ;
import { setIsLoadingGlobal } from "../../../state/features/globalSlice.ts" ;
import { addToHashMap } from "../../../state/features/videoSlice.ts" ; import { addToHashMap } from "../../../state/features/videoSlice.ts" ;
import AttachFileIcon from "@mui/icons-material/AttachFile" ; import { RootState } from "../../../state/store.ts" ;
import DownloadIcon from "@mui/icons-material/Download" ; import { formatDate } from "../../../utils/time.ts" ;
import DeletedVideo from "../../../assets/img/DeletedVideo.jpg" ; import {
extractSigValue ,
import mockImg from "../../../test/mockimg.jpg" ; getPaymentInfo ,
isTimestampWithinRange ,
} from "./VideoContent-functions.ts" ;
import { import {
AuthorTextComment , AuthorTextComment ,
FileAttachmentContainer , FileAttachmentContainer ,
@ -29,98 +48,10 @@ import {
StyledCardColComment , StyledCardColComment ,
StyledCardHeaderComment , StyledCardHeaderComment ,
VideoDescription , VideoDescription ,
VideoPlayer Container , VideoContent Container ,
VideoTitle , VideoTitle ,
VideoPlayerContainer ,
} from "./VideoContent-styles.tsx" ; } from "./VideoContent-styles.tsx" ;
import { setUserAvatarHash } from "../../../state/features/globalSlice.ts" ;
import {
formatDate ,
formatDateSeconds ,
formatTimestampSeconds ,
} from "../../../utils/time.ts" ;
import { NavbarName } from "../../../components/layout/Navbar/Navbar-styles.tsx" ;
import { CommentSection } from "../../../components/common/Comments/CommentSection.tsx" ;
import {
CrowdfundSubTitle ,
CrowdfundSubTitleRow ,
} from "../../../components/Publish/PublishVideo/PublishVideo-styles.tsx" ;
import { Playlists } from "../../../components/Playlists/Playlists.tsx" ;
import { DisplayHtml } from "../../../components/common/TextEditor/DisplayHtml.tsx" ;
import FileElement from "../../../components/common/FileElement.tsx" ;
import { SuperLike } from "../../../components/common/ContentButtons/SuperLike.tsx" ;
import { CommentContainer } from "../../../components/common/Comments/Comments-styles.tsx" ;
import { Comment } from "../../../components/common/Comments/Comment.tsx" ;
import { SuperLikesSection } from "../../../components/common/SuperLikesList/SuperLikesSection.tsx" ;
import { useFetchSuperLikes } from "../../../hooks/useFetchSuperLikes.tsx" ;
import {
FOR_SUPER_LIKE ,
QTUBE_VIDEO_BASE ,
SUPER_LIKE_BASE ,
} from "../../../constants/Identifiers.ts" ;
import {
minPriceSuperlike ,
titleFormatterOnSave ,
} from "../../../constants/Misc.ts" ;
import { SubscribeButton } from "../../../components/common/ContentButtons/SubscribeButton.tsx" ;
import { FollowButton } from "../../../components/common/ContentButtons/FollowButton.tsx" ;
import { LikeAndDislike } from "../../../components/common/ContentButtons/LikeAndDislike.tsx" ;
export function isTimestampWithinRange ( resTimestamp , resCreated ) {
// Calculate the absolute difference in milliseconds
const difference = Math . abs ( resTimestamp - resCreated ) ;
// 2 minutes in milliseconds
const twoMinutesInMilliseconds = 3 * 60 * 1000 ;
// Check if the difference is within 2 minutes
return difference <= twoMinutesInMilliseconds ;
}
export function extractSigValue ( metadescription ) {
// Function to extract the substring within double asterisks
function extractSubstring ( str ) {
const match = str . match ( /\*\*(.*?)\*\*/ ) ;
return match ? match [ 1 ] : null ;
}
// Function to extract the 'sig' value
function extractSig ( str ) {
const regex = /sig:(.*?)(;|$)/ ;
const match = str . match ( regex ) ;
return match ? match [ 1 ] : null ;
}
// Extracting the relevant substring
const relevantSubstring = extractSubstring ( metadescription ) ;
if ( relevantSubstring ) {
// Extracting the 'sig' value
return extractSig ( relevantSubstring ) ;
} else {
return null ;
}
}
export const getPaymentInfo = async ( signature : string ) = > {
try {
const url = ` /transactions/signature/ ${ signature } ` ;
const response = await fetch ( url , {
method : "GET" ,
headers : {
"Content-Type" : "application/json" ,
} ,
} ) ;
// Coin payment info must be added to responseData so we can display it to the user
const responseData = await response . json ( ) ;
if ( responseData && ! responseData . error ) {
return responseData ;
} else {
throw new Error ( "unable to get payment" ) ;
}
} catch ( error ) {
throw new Error ( "unable to get payment" ) ;
}
} ;
export const VideoContent = ( ) = > { export const VideoContent = ( ) = > {
const { name : channelName , id } = useParams ( ) ; const { name : channelName , id } = useParams ( ) ;
@ -130,6 +61,7 @@ export const VideoContent = () => {
useState < boolean > ( false ) ; useState < boolean > ( false ) ;
const [ superlikeList , setSuperlikelist ] = useState < any [ ] > ( [ ] ) ; const [ superlikeList , setSuperlikelist ] = useState < any [ ] > ( [ ] ) ;
const [ loadingSuperLikes , setLoadingSuperLikes ] = useState < boolean > ( false ) ; const [ loadingSuperLikes , setLoadingSuperLikes ] = useState < boolean > ( false ) ;
const { addSuperlikeRawDataGetToList } = useFetchSuperLikes ( ) ; const { addSuperlikeRawDataGetToList } = useFetchSuperLikes ( ) ;
const containerRef = useRef < refType > ( null ) ; const containerRef = useRef < refType > ( null ) ;
@ -149,6 +81,8 @@ export const VideoContent = () => {
const [ descriptionHeight , setDescriptionHeight ] = useState < null | number > ( const [ descriptionHeight , setDescriptionHeight ] = useState < null | number > (
null null
) ; ) ;
const [ videoData , setVideoData ] = useState < any > ( null ) ;
const [ isVideoLoaded , setIsVideoLoaded ] = useState < boolean > ( false ) ;
const userAvatarHash = useSelector ( const userAvatarHash = useSelector (
( state : RootState ) = > state . global . userAvatarHash ( state : RootState ) = > state . global . userAvatarHash
@ -183,8 +117,6 @@ export const VideoContent = () => {
const navigate = useNavigate ( ) ; const navigate = useNavigate ( ) ;
const theme = useTheme ( ) ; const theme = useTheme ( ) ;
const [ videoData , setVideoData ] = useState < any > ( null ) ;
const saveAsFilename = useMemo ( ( ) = > { const saveAsFilename = useMemo ( ( ) = > {
// nb. we prefer to construct the local filename to use for
// nb. we prefer to construct the local filename to use for
// saving, from the video "title" when possible
// saving, from the video "title" when possible
@ -224,6 +156,7 @@ export const VideoContent = () => {
videoReference ? . name && videoReference ? . name &&
videoReference ? . service videoReference ? . service
) { ) {
setIsVideoLoaded ( true ) ;
return videoReference ; return videoReference ;
} else { } else {
return null ; return null ;
@ -302,13 +235,12 @@ export const VideoContent = () => {
} }
} , [ id , channelName ] ) ; } , [ id , channelName ] ) ;
const descriptionThreshold = 200 ;
useEffect ( ( ) = > { useEffect ( ( ) = > {
if ( contentRef . current ) { if ( contentRef . current ) {
const height = contentRef . current . offsetHeight ; const height = contentRef . current . offsetHeight ;
if ( height > 100 ) { if ( height > descriptionThreshold )
// Assuming 100px is your threshold
setDescriptionHeight ( descriptionThreshold ) ;
setDescriptionHeight ( 100 ) ;
}
} }
} , [ videoData ] ) ; } , [ videoData ] ) ;
@ -382,35 +314,42 @@ export const VideoContent = () => {
) ; ) ;
const focusVideo = ( e : React.MouseEvent < HTMLDivElement > ) = > { const focusVideo = ( e : React.MouseEvent < HTMLDivElement > ) = > {
const focusRef = containerRef . current ? . getContainerRef ( ) ? . current ; console . log ( "in focusVideo" ) ;
const isCorrectTarget = e . currentTarget == e . target ; const target = e . target as Element ;
if ( focusRef && isCorrectTarget ) {
const textTagNames = [ "TEXTAREA" , "P" , "H[1-6]" , "STRONG" , "svg" , "A" ] ;
const noText =
textTagNames . findIndex ( s = > {
return target ? . tagName . match ( s ) ;
} ) < 0 ;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const clickOnEmptySpace = ! target ? . onclick && noText ;
console . log ( "tagName is: " , target ? . tagName ) ;
// clicking on link in superlikes bar shows deleted video when loading
if ( target == e . currentTarget || clickOnEmptySpace ) {
console . log ( "in correctTarget" ) ;
const focusRef = containerRef . current ? . getContainerRef ( ) ? . current ;
focusRef . focus ( { preventScroll : true } ) ; focusRef . focus ( { preventScroll : true } ) ;
} }
} ; } ;
return ( return (
< Box < >
sx = { { < Box
display : "flex" ,
alignItems : "center" ,
flexDirection : "column" ,
padding : "0px 10px" ,
} }
onClick = { focusVideo }
>
< VideoPlayerContainer
sx = { { sx = { {
width : "55vw" , display : "flex" ,
aspectRatio : "16/9" , marginLeft : "5%" ,
flexDirection : "column" ,
padding : "0px 10px" ,
} } } }
onClick = { focusVideo }
> >
{ videoReference ? ( { videoReference ? (
< Box < VideoPlayerContainer >
sx = { {
aspectRatio : "16/9" ,
} }
>
< VideoPlayer < VideoPlayer
name = { videoReference ? . name } name = { videoReference ? . name }
service = { videoReference ? . service } service = { videoReference ? . service }
@ -424,46 +363,35 @@ export const VideoContent = () => {
video : { aspectRatio : "16 / 9" } , video : { aspectRatio : "16 / 9" } ,
} } } }
/ > / >
< / Box > < / VideoPlayerContainer >
) : isVideoLoaded ? (
< img
src = { DeletedVideo }
width = { "70%" }
height = { "37%" }
style = { { marginLeft : "5%" } }
/ >
) : ( ) : (
< img src = { DeletedVideo } width = { "100%" } height = { "100%" } / > < Box sx = { { width : "55vw" , aspectRatio : "16/9" } } > < / Box >
) } ) }
< Box < VideoContentContainer >
sx = { { < Box
width : "100%" , sx = { {
display : "grid" , width : "80%" ,
gridTemplateColumns : "1fr 1fr" , display : "grid" ,
marginTop : "15px" , gridTemplateColumns : "1fr 1fr" ,
} } marginTop : "15px" ,
> } }
< Box > >
< StyledCardHeaderComment < Box >
sx = { { < StyledCardHeaderComment
"& .MuiCardHeader-content" : {
overflow : "hidden" ,
} ,
} }
>
< Box
sx = { { sx = { {
cursor : "pointer" , "& .MuiCardHeader-content" : {
} } overflow : "hidden" ,
onClick = { ( ) = > { } ,
navigate ( ` /channel/ ${ channelName } ` ) ;
} } } }
> >
< Avatar < Box
src = { ` /arbitrary/THUMBNAIL/ ${ channelName } /qortal_avatar ` }
alt = { ` ${ channelName } 's avatar ` }
/ >
< / Box >
< StyledCardColComment >
< AuthorTextComment
color = {
theme . palette . mode === "light"
? theme . palette . text . secondary
: "#d6e8ff"
}
sx = { { sx = { {
cursor : "pointer" , cursor : "pointer" ,
} } } }
@ -471,196 +399,223 @@ export const VideoContent = () => {
navigate ( ` /channel/ ${ channelName } ` ) ; navigate ( ` /channel/ ${ channelName } ` ) ;
} } } }
> >
{ channelName } < Avatar
{ channelName !== userName && ( src = { ` /arbitrary/THUMBNAIL/ ${ channelName } /qortal_avatar ` }
< > alt = { ` ${ channelName } 's avatar ` }
< SubscribeButton / >
subscriberName = { channelName } < / Box >
sx = { { marginLeft : "20px" } } < StyledCardColComment >
/ > < AuthorTextComment
< FollowButton color = {
followerName = { channelName } theme . palette . mode === "light"
sx = { { marginLeft : "20px" } } ? theme . palette . text . secondary
/ > : "#d6e8ff"
< / > }
) } sx = { {
< / AuthorTextComment > cursor : "pointer" ,
< / StyledCardColComment > } }
< / StyledCardHeaderComment > onClick = { ( ) = > {
navigate ( ` /channel/ ${ channelName } ` ) ;
} }
>
{ channelName }
{ channelName !== userName && (
< >
< SubscribeButton
subscriberName = { channelName }
sx = { { marginLeft : "20px" } }
/ >
< FollowButton
followerName = { channelName }
sx = { { marginLeft : "20px" } }
/ >
< / >
) }
< / AuthorTextComment >
< / StyledCardColComment >
< / StyledCardHeaderComment >
< / Box >
< Box
sx = { {
display : "flex" ,
flexDirection : "row" ,
} }
>
{ videoData && (
< >
< LikeAndDislike
name = { videoData ? . user }
identifier = { videoData ? . id }
/ >
< SuperLike
numberOfSuperlikes = { numberOfSuperlikes }
totalAmount = { calculateAmountSuperlike }
name = { videoData ? . user }
service = { videoData ? . service }
identifier = { videoData ? . id }
onSuccess = { val = > {
setSuperlikelist ( prev = > [ val , . . . prev ] ) ;
} }
/ >
< / >
) }
{ videoData ? . filename && (
< FileAttachmentContainer >
< FileAttachmentFont > Save to Disk < / FileAttachmentFont >
< FileElement
fileInfo = { {
. . . videoReference ,
filename : saveAsFilename ,
mimeType : videoData?.videoType || '"video/mp4' ,
} }
title = {
videoData ? . filename || videoData ? . title ? . slice ( 0 , 20 )
}
customStyles = { {
display : "flex" ,
alignItems : "center" ,
justifyContent : "flex-end" ,
} }
>
< DownloadIcon / >
< / FileElement >
< / FileAttachmentContainer >
) }
< / Box >
< / Box > < / Box >
< Box < Box
sx = { { sx = { {
display : "flex" , display : "flex" ,
flexDirection : "row" , justifyContent : "space-between" ,
alignItems : "center" ,
width : "100%" ,
marginTop : "20px" ,
gap : "10px" ,
} } } }
> >
{ videoData && ( < VideoTitle
< > variant = "h1"
< LikeAndDislike color = "textPrimary"
name = { videoData ? . user }
identifier = { videoData ? . id }
/ >
< SuperLike
numberOfSuperlikes = { numberOfSuperlikes }
totalAmount = { calculateAmountSuperlike }
name = { videoData ? . user }
service = { videoData ? . service }
identifier = { videoData ? . id }
onSuccess = { val = > {
setSuperlikelist ( prev = > [ val , . . . prev ] ) ;
} }
/ >
< / >
) }
< FileAttachmentContainer >
< FileAttachmentFont > Save to Disk < / FileAttachmentFont >
< FileElement
fileInfo = { {
. . . videoReference ,
filename : saveAsFilename ,
mimeType : videoData?.videoType || '"video/mp4' ,
} }
title = { videoData ? . filename || videoData ? . title ? . slice ( 0 , 20 ) }
customStyles = { {
display : "flex" ,
alignItems : "center" ,
justifyContent : "flex-end" ,
} }
>
< DownloadIcon / >
< / FileElement >
< / FileAttachmentContainer >
< / Box >
< / Box >
< Box
sx = { {
display : "flex" ,
justifyContent : "space-between" ,
alignItems : "center" ,
width : "100%" ,
marginTop : "20px" ,
gap : "10px" ,
} }
>
< VideoTitle
variant = "h1"
color = "textPrimary"
sx = { {
textAlign : "start" ,
} }
>
{ videoData ? . title }
< / VideoTitle >
< / Box >
{ videoData ? . created && (
< Typography
variant = "h6"
sx = { {
fontSize : "16px" ,
} }
color = { theme . palette . text . primary }
>
{ formatDate ( videoData . created ) }
< / Typography >
) }
< Spacer height = "30px" / >
< Box
sx = { {
background : "#333333" ,
borderRadius : "5px" ,
padding : "5px" ,
width : "100%" ,
cursor : ! descriptionHeight
? "default"
: isExpandedDescription
? "default"
: "pointer" ,
position : "relative" ,
} }
className = {
! descriptionHeight ? "" : isExpandedDescription ? "" : "hover-click"
}
>
{ descriptionHeight && ! isExpandedDescription && (
< Box
sx = { { sx = { {
position : "absolute" , textAlign : "start" ,
top : "0px" ,
right : "0px" ,
left : "0px" ,
bottom : "0px" ,
cursor : "pointer" ,
} }
onClick = { ( ) = > {
if ( isExpandedDescription ) return ;
setIsExpandedDescription ( true ) ;
} } } }
/ > >
) } { videoData ? . title }
< Box < / VideoTitle >
ref = { contentRef }
sx = { {
height : ! descriptionHeight
? "auto"
: isExpandedDescription
? "auto"
: "100px" ,
overflow : "hidden" ,
} }
>
{ videoData ? . htmlDescription ? (
< DisplayHtml html = { videoData ? . htmlDescription } / >
) : (
< VideoDescription
variant = "body1"
color = "textPrimary"
sx = { {
cursor : "default" ,
} }
>
{ videoData ? . fullDescription }
< / VideoDescription >
) }
< / Box > < / Box >
{ descriptionHeight && (
{ videoData ? . created && (
< Typography < Typography
onClick = { ( ) = > { variant = "h6"
setIsExpandedDescription ( prev = > ! prev ) ;
} }
sx = { { sx = { {
fontWeight : "bold" ,
fontSize : "16px" , fontSize : "16px" ,
cursor : "pointer" ,
paddingLeft : "15px" ,
paddingTop : "15px" ,
} } } }
color = { theme . palette . text . primary }
> >
{ isExpandedDescription ? "Show less" : "...more" } { formatDate ( videoData . created ) }
< / Typography > < / Typography >
) } ) }
< / Box >
< / VideoPlayerContainer >
< SuperLikesSection
/* eslint-disable-next-line @typescript-eslint/no-empty-function */
getMore = { ( ) = > { } }
loadingSuperLikes = { loadingSuperLikes }
superlikes = { superlikeList }
postId = { id || "" }
postName = { channelName || "" }
/ >
< Box < Spacer height = "30px" / >
sx = { { { videoData ? . fullDescription && (
display : "flex" , < Box
gap : "20px" , sx = { {
width : "100%" , background : "#333333" ,
maxWidth : "1200px" , borderRadius : "5px" ,
} } padding : "5px" ,
> width : "70%" ,
< CommentSection postId = { id || "" } postName = { channelName || "" } / > cursor : ! descriptionHeight
? "default"
: isExpandedDescription
? "default"
: "pointer" ,
position : "relative" ,
marginBottom : "30px" ,
} }
className = {
! descriptionHeight
? ""
: isExpandedDescription
? ""
: "hover-click"
}
>
{ descriptionHeight && ! isExpandedDescription && (
< Box
sx = { {
position : "absolute" ,
top : "0px" ,
right : "0px" ,
left : "0px" ,
bottom : "0px" ,
cursor : "pointer" ,
} }
onClick = { ( ) = > {
if ( isExpandedDescription ) return ;
setIsExpandedDescription ( true ) ;
} }
/ >
) }
< Box
ref = { contentRef }
sx = { {
height : ! descriptionHeight
? "auto"
: isExpandedDescription
? "auto"
: "200px" ,
overflow : "hidden" ,
} }
>
{ videoData ? . htmlDescription ? (
< DisplayHtml html = { videoData ? . htmlDescription } / >
) : (
< VideoDescription
variant = "body1"
color = "textPrimary"
sx = { {
cursor : "default" ,
} }
>
{ videoData ? . fullDescription }
< / VideoDescription >
) }
< / Box >
{ descriptionHeight >= descriptionThreshold && (
< Typography
onClick = { ( ) = > {
setIsExpandedDescription ( prev = > ! prev ) ;
} }
sx = { {
fontWeight : "bold" ,
fontSize : "16px" ,
cursor : "pointer" ,
paddingLeft : "15px" ,
paddingTop : "15px" ,
} }
>
{ isExpandedDescription ? "Show less" : "...more" }
< / Typography >
) }
< / Box >
) }
{ id && channelName && (
< >
< SuperLikesSection
/* eslint-disable-next-line @typescript-eslint/no-empty-function */
getMore = { ( ) = > { } }
loadingSuperLikes = { loadingSuperLikes }
superlikes = { superlikeList }
postId = { id || "" }
postName = { channelName || "" }
/ >
< CommentSection postId = { id || "" } postName = { channelName || "" } / >
< / >
) }
< / VideoContentContainer >
< / Box > < / Box >
< / Box > < / >
) ; ) ;
} ; } ;
