rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor/fix: lift file select logic into its own component block

Browse source
This commit is contained in:
Chris Holland 2024-10-12 13:55:13 -07:00
parent eedc5ab329
commit 69468d34c8
No known key found for this signature in database
GPG key ID: 68B0A864B1B0A0D2
4 changed files with 124 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

56
apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
View file

@ -1,14 +1,14 @@
import { NodeViewWrapper } from '@tiptap/react'
import { Loader, Video } from 'lucide-react'
import { Video } from 'lucide-react'
import React, { useEffect } from 'react'
import styled from 'styled-components'
import { uploadNewVideoFile } from '../../../../../services/blocks/Video/video'
import { getActivityBlockMediaDirectory } from '@services/media/media'
import { UploadIcon } from '@radix-ui/react-icons'
import { useOrg } from '@components/Contexts/OrgContext'
import { useCourse } from '@components/Contexts/CourseContext'
import { useEditorProvider } from '@components/Contexts/Editor/EditorContext'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import { FileUploadBlock, FileUploadBlockButton, FileUploadBlockInput } from '../../FileUploadBlock'
function VideoBlockComponents(props: any) {
const org = useOrg() as any
@ -46,41 +46,15 @@ function VideoBlockComponents(props: any) {
useEffect(() => { }, [course, org])
console.log(blockObject)
return (
<NodeViewWrapper className="block-video">
{!blockObject && (
<BlockVideoWrapper
className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2"
contentEditable={isEditable}
>
{isLoading ? (
<Loader
className="animate-spin animate-pulse text-gray-200"
size={50}
/>
) : (
<>
<div>
<Video className="text-gray-200" size={50} />
</div>
<input
className="p-3 rounded-lg file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 hover:file:cursor-pointer file:bg-gray-200 cursor-pointer file:text-gray-500"
onChange={handleVideoChange}
type="file"
name=""
id=""
/>
<button
className="p-2 px-3 bg-gray-200 rounded-lg text-gray-500 hover:bg-gray-300 transition space-x-2 items-center flex"
onClick={handleSubmit}
>
<UploadIcon></UploadIcon>
<p>Submit</p>
</button>
</>
)}
</BlockVideoWrapper>
)}
<NodeViewWrapper className="block-video">
<FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Video}>
<FileUploadBlockInput onChange={handleVideoChange} accept="video/*" />
<FileUploadBlockButton onClick={handleSubmit} disabled={!video}/>
</FileUploadBlock>
{blockObject && (
<BlockVideo>
<video
@ -100,16 +74,6 @@ function VideoBlockComponents(props: any) {
</NodeViewWrapper>
)
}
const BlockVideoWrapper = styled.div`
border: ${(props) =>
props.contentEditable ? '2px dashed #713f1117' : 'none'};
// center
align-items: center;
justify-content: center;
text-align: center;
font-size: 14px;
`
const BlockVideo = styled.div`
display: flex;