@ -1,5 +1,5 @@
import React , { useEffect , useState } from "react" ; import React , { useEffect , useState } from "react" ;
import Compressor from 'compressorjs' import Compressor from "compressorjs" ;
import { import {
AddCoverImageButton , AddCoverImageButton ,
AddLogoIcon , AddLogoIcon ,
@ -13,7 +13,7 @@ import {
NewCrowdfundTitle , NewCrowdfundTitle ,
StyledButton , StyledButton ,
TimesIcon , TimesIcon ,
} from "./Upload-styles " ; } from "./PublishVideo-styles.tsx " ;
import { CircularProgress } from "@mui/material" ; import { CircularProgress } from "@mui/material" ;
import { import {
@ -45,12 +45,7 @@ import {
upsertVideos , upsertVideos ,
} from "../../state/features/videoSlice" ; } from "../../state/features/videoSlice" ;
import ImageUploader from "../common/ImageUploader" ; import ImageUploader from "../common/ImageUploader" ;
import { import { categories , subCategories } from "../../constants/Categories.ts" ;
QTUBE_PLAYLIST_BASE ,
QTUBE_VIDEO_BASE ,
categories ,
subCategories ,
} from "../../constants" ;
import { MultiplePublish } from "../common/MultiplePublish/MultiplePublish" ; import { MultiplePublish } from "../common/MultiplePublish/MultiplePublish" ;
import { import {
CrowdfundSubTitle , CrowdfundSubTitle ,
@ -59,18 +54,28 @@ import {
import { CardContentContainerComment } from "../common/Comments/Comments-styles" ; import { CardContentContainerComment } from "../common/Comments/Comments-styles" ;
import { TextEditor } from "../common/TextEditor/TextEditor" ; import { TextEditor } from "../common/TextEditor/TextEditor" ;
import { extractTextFromHTML } from "../common/TextEditor/utils" ; import { extractTextFromHTML } from "../common/TextEditor/utils" ;
import { FiltersCheckbox , FiltersRow , FiltersSubContainer } from "../../pages/Home/VideoList-styles" ; import {
FiltersCheckbox ,
FiltersRow ,
FiltersSubContainer ,
} from "../../pages/Home/VideoList-styles" ;
import { FrameExtractor } from "../common/FrameExtractor/FrameExtractor" ; import { FrameExtractor } from "../common/FrameExtractor/FrameExtractor" ;
import {
QTUBE_PLAYLIST_BASE ,
QTUBE_VIDEO_BASE ,
} from "../../constants/Identifiers.ts" ;
import { titleFormatter } from "../../constants/Misc.ts" ;
import { getFileName } from "../../utils/stringFunctions.ts" ;
export const toBase64 = ( file : File ) : Promise < string | ArrayBuffer | null > = > export const toBase64 = ( file : File ) : Promise < string | ArrayBuffer | null > = >
new Promise ( ( resolve , reject ) = > { new Promise ( ( resolve , reject ) = > {
const reader = new FileReader ( ) const reader = new FileReader ( ) ;
reader . readAsDataURL ( file ) reader . readAsDataURL ( file ) ;
reader . onload = ( ) = > resolve ( reader . result ) reader . onload = ( ) = > resolve ( reader . result ) ;
reader . onerror = ( error ) = > { reader . onerror = error = > {
reject ( error ) reject ( error ) ;
} } ;
} ) } ) ;
const uid = new ShortUniqueId ( ) ; const uid = new ShortUniqueId ( ) ;
const shortuid = new ShortUniqueId ( { length : 5 } ) ; const shortuid = new ShortUniqueId ( { length : 5 } ) ;
@ -90,7 +95,7 @@ interface VideoFile {
description : string ; description : string ;
coverImage? : string ; coverImage? : string ;
} }
export const Upload Video= ( { editId , editContent } : NewCrowdfundProps ) = > { export const Publish Video= ( { editId , editContent } : NewCrowdfundProps ) = > {
const theme = useTheme ( ) ; const theme = useTheme ( ) ;
const dispatch = useDispatch ( ) ; const dispatch = useDispatch ( ) ;
const [ isOpenMultiplePublish , setIsOpenMultiplePublish ] = useState ( false ) ; const [ isOpenMultiplePublish , setIsOpenMultiplePublish ] = useState ( false ) ;
@ -113,6 +118,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
useState < any > ( null ) ; useState < any > ( null ) ;
const [ searchResults , setSearchResults ] = useState ( [ ] ) ; const [ searchResults , setSearchResults ] = useState ( [ ] ) ;
const [ filterSearch , setFilterSearch ] = useState ( "" ) ; const [ filterSearch , setFilterSearch ] = useState ( "" ) ;
const [ titlesPrefix , setTitlesPrefix ] = useState ( "" ) ;
const [ playlistTitle , setPlaylistTitle ] = useState < string > ( "" ) ; const [ playlistTitle , setPlaylistTitle ] = useState < string > ( "" ) ;
const [ playlistDescription , setPlaylistDescription ] = useState < string > ( "" ) ; const [ playlistDescription , setPlaylistDescription ] = useState < string > ( "" ) ;
const [ selectedCategory , setSelectedCategory ] = useState < any > ( null ) ; const [ selectedCategory , setSelectedCategory ] = useState < any > ( null ) ;
@ -125,39 +131,37 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
const [ playlistSetting , setPlaylistSetting ] = useState < null | string > ( null ) ; const [ playlistSetting , setPlaylistSetting ] = useState < null | string > ( null ) ;
const [ publishes , setPublishes ] = useState < any [ ] > ( [ ] ) ; const [ publishes , setPublishes ] = useState < any [ ] > ( [ ] ) ;
const [ isCheckTitleByFile , setIsCheckTitleByFile ] = useState ( false ) const [ isCheckTitleByFile , setIsCheckTitleByFile ] = useState ( true ) ;
const [ isCheckSameCoverImage , setIsCheckSameCoverImage ] = useState ( false ) const [ isCheckSameCoverImage , setIsCheckSameCoverImage ] = useState ( true ) ;
const [ isCheckDescriptionIsTitle , setIsCheckDescriptionIsTitle ] = useState ( false ) const [ isCheckDescriptionIsTitle , setIsCheckDescriptionIsTitle ] =
const [ imageExtracts , setImageExtracts ] = useState < any > ( { } ) useState ( false ) ;
const [ imageExtracts , setImageExtracts ] = useState < any > ( { } ) ;
const { getRootProps , getInputProps } = useDropzone ( { const { getRootProps , getInputProps } = useDropzone ( {
accept : { accept : {
"video/*" : [ ] , "video/*" : [ ] ,
} , } ,
maxSize : 419430400 , // 400 MB in bytes
maxSize : 419430400 , // 400 MB in bytes
onDrop : ( acceptedFiles , rejectedFiles ) = > { onDrop : ( acceptedFiles , rejectedFiles ) = > {
const formatArray = acceptedFiles . map ( ( item ) = > { const formatArray = acceptedFiles . map ( item = > {
let filteredTitle = "" ;
let formatTitle = '' if ( isCheckTitleByFile ) {
if ( isCheckTitleByFile && item ? . name ) { const fileName = getFileName ( item ? . name || "" ) ;
const fileExtensionSplit = item ? . name ? . split ( "." ) ; filteredTitle = ( titlesPrefix + fileName ) . replace ( titleFormatter , "" ) ;
if ( fileExtensionSplit ? . length > 1 ) {
formatTitle = fileExtensionSplit [ 0 ]
}
formatTitle = ( formatTitle || "" ) . replace ( /[^a-zA-Z0-9\s-_!?]/g , "" ) ;
} }
return { return {
file : item , file : item ,
title : formatTitle , title : filteredTitle || "" ,
description : "" , description : "" ,
coverImage : "" , coverImage : "" ,
} ; } ;
} ) ; } ) ;
setFiles ( ( prev ) = > [ . . . prev , . . . formatArray ] ) ; setFiles ( prev = > [ . . . prev , . . . formatArray ] ) ;
let errorString = null ; let errorString = null ;
rejectedFiles . forEach ( ( { file , errors } ) = > { rejectedFiles . forEach ( ( { file , errors } ) = > {
errors . forEach ( ( error ) = > { errors . forEach ( error = > {
if ( error . code === "file-too-large" ) { if ( error . code === "file-too-large" ) {
errorString = "File must be under 400mb" ; errorString = "File must be under 400mb" ;
} }
@ -204,8 +208,10 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
if ( ! playlistCoverImage ) throw new Error ( "Please select cover image" ) ; if ( ! playlistCoverImage ) throw new Error ( "Please select cover image" ) ;
if ( ! selectedCategory ) throw new Error ( "Please select a category" ) ; if ( ! selectedCategory ) throw new Error ( "Please select a category" ) ;
} }
if ( files ? . length === 0 ) throw new Error ( "Please select at least one file" ) ; if ( files ? . length === 0 )
if ( isCheckSameCoverImage && ! coverImageForAll ) throw new Error ( "Please select cover image" ) ; throw new Error ( "Please select at least one file" ) ;
if ( isCheckSameCoverImage && ! coverImageForAll )
throw new Error ( "Please select cover image" ) ;
if ( ! userAddress ) throw new Error ( "Unable to locate user address" ) ; if ( ! userAddress ) throw new Error ( "Unable to locate user address" ) ;
let errorMsg = "" ; let errorMsg = "" ;
let name = "" ; let name = "" ;
@ -234,12 +240,16 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
let listOfPublishes = [ ] ; let listOfPublishes = [ ] ;
for ( let i = 0 ; i < files . length ; i ++ ) { for ( let i = 0 ; i < files . length ; i ++ ) {
const publish = files [ i ] const publish = files [ i ] ;
const title = publish . title ; const title = publish . title ;
const description = isCheckDescriptionIsTitle ? publish.title : publish.description ; const description = isCheckDescriptionIsTitle
? publish . title
: publish . description ;
const category = selectedCategoryVideos . id ; const category = selectedCategoryVideos . id ;
const subcategory = selectedSubCategoryVideos ? . id || "" ; const subcategory = selectedSubCategoryVideos ? . id || "" ;
const coverImage = isCheckSameCoverImage ? coverImageForAll : publish.coverImage ; const coverImage = isCheckSameCoverImage
? coverImageForAll
: publish . coverImage ;
const file = publish . file ; const file = publish . file ;
const sanitizeTitle = title const sanitizeTitle = title
. replace ( /[^a-zA-Z0-9\s-]/g , "" ) . replace ( /[^a-zA-Z0-9\s-]/g , "" )
@ -255,7 +265,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
: ` ${ QTUBE_VIDEO_BASE } ${ sanitizeTitle . slice ( 0 , 30 ) } _ ${ id } ` ; : ` ${ QTUBE_VIDEO_BASE } ${ sanitizeTitle . slice ( 0 , 30 ) } _ ${ id } ` ;
const code = shortuid ( ) ; const code = shortuid ( ) ;
const fullDescription = extractTextFromHTML ( description ) const fullDescription = extractTextFromHTML ( description ) ;
let fileExtension = "mp4" ; let fileExtension = "mp4" ;
const fileExtensionSplit = file ? . name ? . split ( "." ) ; const fileExtensionSplit = file ? . name ? . split ( "." ) ;
@ -292,15 +302,13 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
subcategory , subcategory ,
code , code ,
videoType : file?.type || "video/mp4" , videoType : file?.type || "video/mp4" ,
filename : ` ${ alphanumericString . trim ( ) } . ${ fileExtension } ` filename : ` ${ alphanumericString . trim ( ) } . ${ fileExtension } ` ,
} ; } ;
let metadescription = let metadescription =
` **category: ${ category } ;subcategory: ${ subcategory } ;code: ${ code } ** ` + ` **category: ${ category } ;subcategory: ${ subcategory } ;code: ${ code } ** ` +
fullDescription . slice ( 0 , 150 ) ; fullDescription . slice ( 0 , 150 ) ;
const crowdfundObjectToBase64 = await objectToBase64 ( videoObject ) ; const crowdfundObjectToBase64 = await objectToBase64 ( videoObject ) ;
// Description is obtained from raw data
// Description is obtained from raw data
const requestBodyJson : any = { const requestBodyJson : any = {
@ -335,7 +343,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
if ( isNewPlaylist ) { if ( isNewPlaylist ) {
const title = playlistTitle ; const title = playlistTitle ;
const description = playlistDescription ; const description = playlistDescription ;
const stringDescription = extractTextFromHTML ( description ) const stringDescription = extractTextFromHTML ( description ) ;
const category = selectedCategory . id ; const category = selectedCategory . id ;
const subcategory = selectedSubCategory ? . id || "" ; const subcategory = selectedSubCategory ? . id || "" ;
const coverImage = playlistCoverImage ; const coverImage = playlistCoverImage ;
@ -354,10 +362,10 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
const videos = listOfPublishes const videos = listOfPublishes
. filter ( . filter (
( item ) = > item = >
item . service === "DOCUMENT" && item . tag1 === QTUBE_VIDEO_BASE item . service === "DOCUMENT" && item . tag1 === QTUBE_VIDEO_BASE
) )
. map ( ( vid ) = > { . map ( vid = > {
return { return {
identifier : vid.identifier , identifier : vid.identifier ,
service : vid.service , service : vid.service ,
@ -378,7 +386,10 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
subcategory , subcategory ,
} ; } ;
const codes = videos . map ( ( item ) = > ` c: ${ item . code } ; ` ) . slice ( 0 , 10 ) . join ( "" ) ; const codes = videos
. map ( item = > ` c: ${ item . code } ; ` )
. slice ( 0 , 10 )
. join ( "" ) ;
let metadescription = let metadescription =
` **category: ${ category } ;subcategory: ${ subcategory } ; ${ codes } ** ` + ` **category: ${ category } ;subcategory: ${ subcategory } ; ${ codes } ** ` +
@ -413,10 +424,10 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
if ( responseData && ! responseData . error ) { if ( responseData && ! responseData . error ) {
const videos = listOfPublishes const videos = listOfPublishes
. filter ( . filter (
( item ) = > item = >
item . service === "DOCUMENT" && item . tag1 === QTUBE_VIDEO_BASE item . service === "DOCUMENT" && item . tag1 === QTUBE_VIDEO_BASE
) )
. map ( ( vid ) = > { . map ( vid = > {
return { return {
identifier : vid.identifier , identifier : vid.identifier ,
service : vid.service , service : vid.service ,
@ -431,7 +442,8 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
videos : videosInPlaylist , videos : videosInPlaylist ,
} ; } ;
const codes = videosInPlaylist const codes = videosInPlaylist
. map ( ( item ) = > ` c: ${ item . code } ; ` ) . slice ( 0 , 10 ) . map ( item = > ` c: ${ item . code } ; ` )
. slice ( 0 , 10 )
. join ( "" ) ; . join ( "" ) ;
let metadescription = let metadescription =
@ -485,10 +497,10 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
} }
const handleOnchange = ( index : number , type : string , value : string ) = > { const handleOnchange = ( index : number , type : string , value : string ) = > {
setFiles ( ( prev ) = > { setFiles ( prev = > {
let formattedValue = value ; let formattedValue = value ;
if ( type === "title" ) { if ( type === "title" ) {
formattedValue = value . replace ( /[^a-zA-Z0-9\s-_!?]/g , "" ) ; formattedValue = value . replace ( titleFormatter , "" ) ;
} }
const copyFiles = [ . . . prev ] ; const copyFiles = [ . . . prev ] ;
copyFiles [ index ] = { copyFiles [ index ] = {
@ -501,7 +513,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
const handleOptionCategoryChange = ( event : SelectChangeEvent < string > ) = > { const handleOptionCategoryChange = ( event : SelectChangeEvent < string > ) = > {
const optionId = event . target . value ; const optionId = event . target . value ;
const selectedOption = categories . find ( ( option ) = > option . id === + optionId ) ; const selectedOption = categories . find ( option = > option . id === + optionId ) ;
setSelectedCategory ( selectedOption || null ) ; setSelectedCategory ( selectedOption || null ) ;
} ; } ;
const handleOptionSubCategoryChange = ( const handleOptionSubCategoryChange = (
@ -510,7 +522,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
) = > { ) = > {
const optionId = event . target . value ; const optionId = event . target . value ;
const selectedOption = subcategories . find ( const selectedOption = subcategories . find (
( option ) = > option . id === + optionId option = > option . id === + optionId
) ; ) ;
setSelectedSubCategory ( selectedOption || null ) ; setSelectedSubCategory ( selectedOption || null ) ;
} ; } ;
@ -519,7 +531,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
event : SelectChangeEvent < string > event : SelectChangeEvent < string >
) = > { ) = > {
const optionId = event . target . value ; const optionId = event . target . value ;
const selectedOption = categories . find ( ( option ) = > option . id === + optionId ) ; const selectedOption = categories . find ( option = > option . id === + optionId ) ;
setSelectedCategoryVideos ( selectedOption || null ) ; setSelectedCategoryVideos ( selectedOption || null ) ;
} ; } ;
const handleOptionSubCategoryChangeVideos = ( const handleOptionSubCategoryChangeVideos = (
@ -528,20 +540,24 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
) = > { ) = > {
const optionId = event . target . value ; const optionId = event . target . value ;
const selectedOption = subcategories . find ( const selectedOption = subcategories . find (
( option ) = > option . id === + optionId option = > option . id === + optionId
) ; ) ;
setSelectedSubCategoryVideos ( selectedOption || null ) ; setSelectedSubCategoryVideos ( selectedOption || null ) ;
} ; } ;
const next = ( ) = > { const next = ( ) = > {
try { try {
if ( isCheckSameCoverImage && ! coverImageForAll ) throw new Error ( "Please select cover image" ) ; if ( isCheckSameCoverImage && ! coverImageForAll )
if ( files ? . length === 0 ) throw new Error ( "Please select at least one file" ) ; throw new Error ( "Please select cover image" ) ;
if ( files ? . length === 0 )
throw new Error ( "Please select at least one file" ) ;
if ( ! selectedCategoryVideos ) throw new Error ( "Please select a category" ) ; if ( ! selectedCategoryVideos ) throw new Error ( "Please select a category" ) ;
files . forEach ( ( file ) = > { files . forEach ( file = > {
if ( ! file . title ) throw new Error ( "Please enter a title" ) ; if ( ! file . title ) throw new Error ( "Please enter a title" ) ;
if ( ! isCheckTitleByFile && ! file . description ) throw new Error ( "Please enter a description" ) ; if ( ! isCheckTitleByFile && ! file . description )
if ( ! isCheckSameCoverImage && ! file . coverImage ) throw new Error ( "Please select cover image" ) ; throw new Error ( "Please enter a description" ) ;
if ( ! isCheckSameCoverImage && ! file . coverImage )
throw new Error ( "Please select cover image" ) ;
} ) ; } ) ;
setStep ( "playlist" ) ; setStep ( "playlist" ) ;
@ -555,48 +571,45 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
} }
} ; } ;
const onFramesExtracted = async ( imgs , index ) = > { const onFramesExtracted = async ( imgs , index ) = > {
try { try {
let imagesExtracts = [ ] let imagesExtracts = [ ] ;
for ( const img of imgs ) { for ( const img of imgs ) {
try { try {
let compressedFile let compressedFile ;
const image = img const image = img ;
await new Promise < void > ( ( resolve ) = > { await new Promise < void > ( resolve = > {
new Compressor ( image , { new Compressor ( image , {
quality : .8 , quality : 0 .8,
maxWidth : 750 , maxWidth : 750 ,
mimeType : 'image/webp' , mimeType : "image/webp" ,
success ( result ) { success ( result ) {
const file = new File ( [ result ] , 'name' , { const file = new File ( [ result ] , "name" , {
type : 'image/webp' type : "image/webp" ,
} ) } ) ;
compressedFile = file compressedFile = file ;
resolve ( ) resolve ( ) ;
} , } ,
error ( err ) { } error ( err ) { } ,
} ) } ) ;
} ) } ) ;
if ( ! compressedFile ) continue if ( ! compressedFile ) continue ;
const base64Img = await toBase64 ( compressedFile ) const base64Img = await toBase64 ( compressedFile ) ;
imagesExtracts . push ( base64Img ) imagesExtracts . push ( base64Img ) ;
} catch ( error ) { } catch ( error ) {
console . error ( error ) console . error ( error ) ;
} }
} }
setImageExtracts ( ( prev ) = > { setImageExtracts ( prev = > {
return { return {
. . . prev , . . . prev ,
[ index ] : imagesExtracts [ index ] : imagesExtracts ,
} } ;
} ) } ) ;
} catch ( error ) { } catch ( error ) { }
} ;
}
}
return ( return (
< > < >
@ -670,6 +683,17 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
/ > / >
< / FiltersRow > < / FiltersRow >
< / FiltersSubContainer > < / FiltersSubContainer >
< CustomInputField
name = "prefix"
label = "Titles Prefix"
variant = "filled"
value = { titlesPrefix }
onChange = { e = >
setTitlesPrefix ( e . target . value . replace ( titleFormatter , "" ) )
}
inputProps = { { maxLength : 180 } }
required
/ >
< Box < Box
{ . . . getRootProps ( ) } { . . . getRootProps ( ) }
sx = { { sx = { {
@ -703,7 +727,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
value = { selectedCategoryVideos ? . id || "" } value = { selectedCategoryVideos ? . id || "" }
onChange = { handleOptionCategoryChangeVideos } onChange = { handleOptionCategoryChangeVideos }
> >
{ categories . map ( ( option ) = > ( { categories . map ( option = > (
< MenuItem key = { option . id } value = { option . id } > < MenuItem key = { option . id } value = { option . id } >
{ option . name } { option . name }
< / MenuItem > < / MenuItem >
@ -722,7 +746,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
< OutlinedInput label = "Select a Sub-Category" / > < OutlinedInput label = "Select a Sub-Category" / >
} }
value = { selectedSubCategoryVideos ? . id || "" } value = { selectedSubCategoryVideos ? . id || "" }
onChange = { ( e ) = > onChange = { e = >
handleOptionSubCategoryChangeVideos ( handleOptionSubCategoryChangeVideos (
e , e ,
subCategories [ selectedCategoryVideos ? . id ] subCategories [ selectedCategoryVideos ? . id ]
@ -730,7 +754,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
} }
> >
{ subCategories [ selectedCategoryVideos . id ] . map ( { subCategories [ selectedCategoryVideos . id ] . map (
( option ) = > ( option = > (
< MenuItem key = { option . id } value = { option . id } > < MenuItem key = { option . id } value = { option . id } >
{ option . name } { option . name }
< / MenuItem > < / MenuItem >
@ -746,9 +770,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
< > < >
{ ! coverImageForAll ? ( { ! coverImageForAll ? (
< ImageUploader < ImageUploader
onPick = { ( img : string ) = > onPick = { ( img : string ) = > setCoverImageForAll ( img ) }
setCoverImageForAll ( img )
}
> >
< AddCoverImageButton variant = "contained" > < AddCoverImageButton variant = "contained" >
Add Cover Image Add Cover Image
@ -765,9 +787,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
< CoverImagePreview src = { coverImageForAll } alt = "logo" / > < CoverImagePreview src = { coverImageForAll } alt = "logo" / >
< TimesIcon < TimesIcon
color = { theme . palette . text . primary } color = { theme . palette . text . primary }
onClickFunc = { ( ) = > onClickFunc = { ( ) = > setCoverImageForAll ( null ) }
setCoverImageForAll ( null )
}
height = { "32" } height = { "32" }
width = { "32" } width = { "32" }
> < / TimesIcon > > < / TimesIcon >
@ -778,7 +798,10 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
{ files . map ( ( file , index ) = > { { files . map ( ( file , index ) = > {
return ( return (
< React.Fragment key = { index } > < React.Fragment key = { index } >
< FrameExtractor videoFile = { file . file } onFramesExtracted = { ( imgs ) = > onFramesExtracted ( imgs , index ) } / > < FrameExtractor
videoFile = { file . file }
onFramesExtracted = { imgs = > onFramesExtracted ( imgs , index ) }
/ >
< Typography > { file ? . file ? . name } < / Typography > < Typography > { file ? . file ? . name } < / Typography >
{ ! isCheckSameCoverImage && ( { ! isCheckSameCoverImage && (
< > < >
@ -800,7 +823,10 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
< / ImageUploader > < / ImageUploader >
) : ( ) : (
< LogoPreviewRow > < LogoPreviewRow >
< CoverImagePreview src = { file ? . coverImage } alt = "logo" / > < CoverImagePreview
src = { file ? . coverImage }
alt = "logo"
/ >
< TimesIcon < TimesIcon
color = { theme . palette . text . primary } color = { theme . palette . text . primary }
onClickFunc = { ( ) = > onClickFunc = { ( ) = >
@ -819,7 +845,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
label = "Title of video" label = "Title of video"
variant = "filled" variant = "filled"
value = { file . title } value = { file . title }
onChange = { ( e ) = > onChange = { e = >
handleOnchange ( index , "title" , e . target . value ) handleOnchange ( index , "title" , e . target . value )
} }
inputProps = { { maxLength : 180 } } inputProps = { { maxLength : 180 } }
@ -827,12 +853,19 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
/ > / >
{ ! isCheckDescriptionIsTitle && ( { ! isCheckDescriptionIsTitle && (
< > < >
< Typography sx = { { < Typography
fontSize : '18px' sx = { {
} } > Description of video < / Typography > fontSize : "18px" ,
< TextEditor inlineContent = { file ? . description } setInlineContent = { ( value ) = > { } }
handleOnchange ( index , "description" , value ) >
} } / > Description of video
< / Typography >
< TextEditor
inlineContent = { file ? . description }
setInlineContent = { value = > {
handleOnchange ( index , "description" , value ) ;
} }
/ >
< / > < / >
) } ) }
@ -962,7 +995,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
> >
< Input < Input
id = "standard-adornment-name" id = "standard-adornment-name"
onChange = { ( e ) = > { onChange = { e = > {
setFilterSearch ( e . target . value ) ; setFilterSearch ( e . target . value ) ;
} } } }
value = { filterSearch } value = { filterSearch }
@ -1072,11 +1105,11 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
label = "Title of playlist" label = "Title of playlist"
variant = "filled" variant = "filled"
value = { playlistTitle } value = { playlistTitle }
onChange = { ( e ) = > { onChange = { e = > {
const value = e . target . value ; const value = e . target . value ;
let formattedValue : string = value ; let formattedValue : string = value ;
formattedValue = value . replace ( /[^a-zA-Z0-9\s-_!?]/g , "" ) ; formattedValue = value . replace ( titleFormatter , "" ) ;
setPlaylistTitle ( formattedValue ) ; setPlaylistTitle ( formattedValue ) ;
} } } }
@ -1095,12 +1128,19 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
required required
/> */ } /> */ }
< Typography sx = { { < Typography
fontSize : '18px' sx = { {
} } > Description of playlist < / Typography > fontSize : "18px" ,
< TextEditor inlineContent = { playlistDescription } setInlineContent = { ( value ) = > { } }
setPlaylistDescription ( value ) >
} } / > Description of playlist
< / Typography >
< TextEditor
inlineContent = { playlistDescription }
setInlineContent = { value = > {
setPlaylistDescription ( value ) ;
} }
/ >
< FormControl fullWidth sx = { { marginBottom : 2 , marginTop : 2 } } > < FormControl fullWidth sx = { { marginBottom : 2 , marginTop : 2 } } >
< InputLabel id = "Category" > Select a Category < / InputLabel > < InputLabel id = "Category" > Select a Category < / InputLabel >
< Select < Select
@ -1109,7 +1149,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
value = { selectedCategory ? . id || "" } value = { selectedCategory ? . id || "" }
onChange = { handleOptionCategoryChange } onChange = { handleOptionCategoryChange }
> >
{ categories . map ( ( option ) = > ( { categories . map ( option = > (
< MenuItem key = { option . id } value = { option . id } > < MenuItem key = { option . id } value = { option . id } >
{ option . name } { option . name }
< / MenuItem > < / MenuItem >
@ -1125,14 +1165,14 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
labelId = "Sub-Category" labelId = "Sub-Category"
input = { < OutlinedInput label = "Select a Sub-Category" / > } input = { < OutlinedInput label = "Select a Sub-Category" / > }
value = { selectedSubCategory ? . id || "" } value = { selectedSubCategory ? . id || "" }
onChange = { ( e ) = > onChange = { e = >
handleOptionSubCategoryChange ( handleOptionSubCategoryChange (
e , e ,
subCategories [ selectedCategory ? . id ] subCategories [ selectedCategory ? . id ]
) )
} }
> >
{ subCategories [ selectedCategory . id ] . map ( ( option ) = > ( { subCategories [ selectedCategory . id ] . map ( option = > (
< MenuItem key = { option . id } value = { option . id } > < MenuItem key = { option . id } value = { option . id } >
{ option . name } { option . name }
< / MenuItem > < / MenuItem >
@ -1186,12 +1226,16 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
) : ( ) : (
< CrowdfundActionButton < CrowdfundActionButton
variant = "contained" variant = "contained"
disabled = { files ? . length !== Object . keys ( imageExtracts ) ? . length } disabled = {
files ? . length !== Object . keys ( imageExtracts ) ? . length
}
onClick = { ( ) = > { onClick = { ( ) = > {
next ( ) ; next ( ) ;
} } } }
> >
{ files ? . length !== Object . keys ( imageExtracts ) ? . length ? 'Generating image extracts' : '' } { files ? . length !== Object . keys ( imageExtracts ) ? . length
? "Generating image extracts"
: "" }
{ files ? . length !== Object . keys ( imageExtracts ) ? . length && ( { files ? . length !== Object . keys ( imageExtracts ) ? . length && (
< CircularProgress color = "secondary" size = { 14 } / > < CircularProgress color = "secondary" size = { 14 } / >
) } ) }
@ -1209,14 +1253,14 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
onSubmit = { ( ) = > { onSubmit = { ( ) = > {
setIsOpenMultiplePublish ( false ) ; setIsOpenMultiplePublish ( false ) ;
setIsOpen ( false ) ; setIsOpen ( false ) ;
setImageExtracts ( { } ) setImageExtracts ( { } ) ;
setFiles ( [ ] ) ; setFiles ( [ ] ) ;
setStep ( "videos" ) ; setStep ( "videos" ) ;
setPlaylistCoverImage ( null ) ; setPlaylistCoverImage ( null ) ;
setPlaylistTitle ( "" ) ; setPlaylistTitle ( "" ) ;
setPlaylistDescription ( "" ) ; setPlaylistDescription ( "" ) ;
setSelectedCategory ( null ) ; setSelectedCategory ( null ) ;
setCoverImageForAll ( null ) setCoverImageForAll ( null ) ;
setSelectedSubCategory ( null ) ; setSelectedSubCategory ( null ) ;
setSelectedCategoryVideos ( null ) ; setSelectedCategoryVideos ( null ) ;
setSelectedSubCategoryVideos ( null ) ; setSelectedSubCategoryVideos ( null ) ;
