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

feat: Improve Video Activity Component Responsiveness and Styling

Browse source
This commit is contained in:
swve 2025-02-27 10:21:45 +01:00
parent 34da409f30
commit 9ddba29b00
1 changed files with 29 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,37 +15,41 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
}, [activity, org]) }, [activity, org])
return ( return (
<div> <div className="w-full max-w-full px-2 sm:px-4">
{activity && ( {activity && (
<> <>
{activity.activity_sub_type === 'SUBTYPE_VIDEO_HOSTED' && ( {activity.activity_sub_type === 'SUBTYPE_VIDEO_HOSTED' && (
<div className="m-8 bg-zinc-900 rounded-md mt-14"> <div className="my-3 md:my-5 w-full">
<video <div className="relative w-full aspect-video rounded-lg overflow-hidden ring-1 ring-gray-300/30 dark:ring-gray-600/30 sm:ring-gray-200/10 sm:dark:ring-gray-700/20 shadow-sm sm:shadow-none">
className="rounded-lg w-full h-[500px]" <video
controls className="w-full h-full object-cover"
src={getActivityMediaDirectory( controls
org?.org_uuid, src={getActivityMediaDirectory(
course?.course_uuid, org?.org_uuid,
activity.activity_uuid, course?.course_uuid,
activity.content?.filename, activity.activity_uuid,
'video' activity.content?.filename,
)} 'video'
></video> )}
></video>
</div>
</div> </div>
)} )}
{activity.activity_sub_type === 'SUBTYPE_VIDEO_YOUTUBE' && ( {activity.activity_sub_type === 'SUBTYPE_VIDEO_YOUTUBE' && (
<div> <div className="my-3 md:my-5 w-full">
<YouTube <div className="relative w-full aspect-video rounded-lg overflow-hidden ring-1 ring-gray-300/30 dark:ring-gray-600/30 sm:ring-gray-200/10 sm:dark:ring-gray-700/20 shadow-sm sm:shadow-none">
className="rounded-md overflow-hidden m-8 bg-zinc-900 mt-14" <YouTube
opts={{ className="w-full h-full"
width: '1300', opts={{
height: '500', width: '100%',
playerVars: { height: '100%',
autoplay: 0, playerVars: {
}, autoplay: 0,
}} },
videoId={videoId} }}
/> videoId={videoId}
/>
</div>
</div> </div>
)} )}
</> </>