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