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: change video activity modal UI

Browse source
This commit is contained in:
swve 2025-04-22 15:53:02 +02:00
parent ed8783d0ef
commit 3173e6b417
7 changed files with 221 additions and 214 deletions
Download patch file Download diff file Expand all files Collapse all files

41
apps/web/components/Objects/Activities/Video/Video.tsx
View file

@ -3,17 +3,42 @@ import YouTube from 'react-youtube'
import { getActivityMediaDirectory } from '@services/media/media'
import { useOrg } from '@components/Contexts/OrgContext'
function VideoActivity({ activity, course }: { activity: any; course: any }) {
interface VideoActivityProps {
activity: {
activity_sub_type: string
activity_uuid: string
content: {
filename?: string
uri?: string
}
}
course: {
course_uuid: string
}
}
function VideoActivity({ activity, course }: VideoActivityProps) {
const org = useOrg() as any
const [videoId, setVideoId] = React.useState('')
React.useEffect(() => {
if (activity && activity.content && activity.content.uri) {
var getYouTubeID = require('get-youtube-id');
if (activity?.content?.uri) {
var getYouTubeID = require('get-youtube-id')
setVideoId(getYouTubeID(activity.content.uri))
}
}, [activity, org])
const getVideoSrc = () => {
if (!activity.content?.filename) return ''
return getActivityMediaDirectory(
org?.org_uuid,
course?.course_uuid,
activity.activity_uuid,
activity.content.filename,
'video'
)
}
return (
<div className="w-full max-w-full px-2 sm:px-4">
{activity && (
@ -24,13 +49,7 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
<video
className="w-full h-full object-cover"
controls
src={getActivityMediaDirectory(
org?.org_uuid,
course?.course_uuid,
activity.activity_uuid,
activity.content?.filename,
'video'
)}
src={getVideoSrc()}
></video>
</div>
</div>
@ -44,7 +63,7 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
width: '100%',
height: '100%',
playerVars: {
autoplay: 0,
autoplay: 0
},
}}
videoId={videoId}