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

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

@ -15,13 +15,14 @@ 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">
<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">
<video <video
className="rounded-lg w-full h-[500px]" className="w-full h-full object-cover"
controls controls
src={getActivityMediaDirectory( src={getActivityMediaDirectory(
org?.org_uuid, org?.org_uuid,
@ -32,14 +33,16 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
)} )}
></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">
<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">
<YouTube <YouTube
className="rounded-md overflow-hidden m-8 bg-zinc-900 mt-14" className="w-full h-full"
opts={{ opts={{
width: '1300', width: '100%',
height: '500', height: '100%',
playerVars: { playerVars: {
autoplay: 0, autoplay: 0,
}, },
@ -47,6 +50,7 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
videoId={videoId} videoId={videoId}
/> />
</div> </div>
</div>
)} )}
</> </>
)} )}