reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minor fixes

Browse Source
This commit is contained in:
Ren Amamiya
2023-04-29 09:25:33 +07:00
parent a1385f87dc
commit be8b40c86d
10 changed files with 70 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/shared/preview/video.tsx
View File

@@ -1,8 +1,11 @@
import { MediaOutlet, MediaPlayer } from '@vidstack/react';
export default function VideoPreview({ url }: { url: string }) {
export default function VideoPreview({ url, size }: { url: string; size: string }) {
return (
<div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
<div
onClick={(e) => e.stopPropagation()}
className={`relative mt-2 flex flex-col overflow-hidden rounded-lg ${size === 'large' ? 'w-4/5' : 'w-2/3'}`}
>
<MediaPlayer src={url} poster="" controls>
<MediaOutlet />
</MediaPlayer>

7
src/shared/preview/youtube.tsx
View File

@@ -5,11 +5,14 @@ function getVideoId(url: string) {
return regex.exec(url)[3];
}
export default function YoutubePreview({ url }: { url: string }) {
export default function YoutubePreview({ url, size }: { url: string; size: string }) {
const id = getVideoId(url);
return (
<div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
<div
onClick={(e) => e.stopPropagation()}
className={`relative mt-2 flex flex-col overflow-hidden rounded-lg ${size === 'large' ? 'w-4/5' : 'w-2/3'}`}
>
<YouTube videoId={id} className="aspect-video xl:w-2/3" opts={{ width: '100%', height: '100%' }} />
</div>
);