Skip to content

Commit d6f1080

Browse files
jesse-wintonjesse-winton
committed
handle image and videos
1 parent df29ab0 commit d6f1080

File tree

2 files changed

+92
-63
lines changed

2 files changed

+92
-63
lines changed

‎packages/frosted-ui/.storybook/stories/components/lightbox.stories.tsx

+63-59
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,76 @@
1-
import type { Meta, StoryObj } from '@storybook/react';
2-
import React from 'react';
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import React from "react";
33

4-
import { Flex, Lightbox } from '../../../src/components';
4+
import { Flex, Lightbox } from "../../../src/components";
55

66
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
77
const meta = {
8-
title: 'Components/Lightbox',
9-
component: Lightbox.Content,
10-
parameters: {
11-
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
12-
layout: 'centered',
13-
},
14-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
15-
tags: ['autodocs'],
8+
title: "Components/Lightbox",
9+
component: Lightbox.Content,
10+
parameters: {
11+
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
12+
layout: "centered",
13+
},
14+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
15+
tags: ["autodocs"],
1616
} satisfies Meta<typeof Lightbox.Content>;
1717

1818
export default meta;
1919
type Story = StoryObj<typeof meta>;
2020

2121
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
2222
export const Default: Story = {
23-
render: ({ children, ...args }) => (
24-
<Lightbox.Root>
25-
<Flex gap="3">
26-
<Lightbox.Trigger>
27-
<img
28-
src="https://img-v2-prod.whop.com/hBOMqb1G4YIzR0jw7qnF0_IkXBoAOh78ybHZt_mKrT8/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzAxMmY0ZDBkLWY1M2UtNGJhZS1iOTNhLWI3YTVhODhjMjA1Yy5wbmc"
29-
alt="placeholder"
30-
/>
31-
</Lightbox.Trigger>
32-
<Lightbox.Trigger>
33-
<img
34-
src="https://img-v2-prod.whop.com/7nS_TeQmzSCCznok6NSF4dsz-UivsmFcSIejHh_diFU/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzM1YmRkZjAwLTgzNDMtNDE4Yy1hYzYzLWZkY2VmYWU2YzBhYS5wbmc"
35-
alt="placeholder"
36-
/>
37-
</Lightbox.Trigger>
38-
</Flex>
39-
<Lightbox.Content {...args}>
40-
<Lightbox.Items>
41-
<img
42-
src="https://img-v2-prod.whop.com/hBOMqb1G4YIzR0jw7qnF0_IkXBoAOh78ybHZt_mKrT8/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzAxMmY0ZDBkLWY1M2UtNGJhZS1iOTNhLWI3YTVhODhjMjA1Yy5wbmc"
43-
alt="placeholder"
44-
/>
45-
<img
46-
src="https://img-v2-prod.whop.com/7nS_TeQmzSCCznok6NSF4dsz-UivsmFcSIejHh_diFU/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzM1YmRkZjAwLTgzNDMtNDE4Yy1hYzYzLWZkY2VmYWU2YzBhYS5wbmc"
47-
alt="placeholder"
48-
/>
49-
<img
50-
src="https://img-v2-prod.whop.com/45RrSIKml_7SfjaM5Zpr-MJ7RXHYATXoARw2Y3mi3eo/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3X2FjY2I4MTFmLTJhNzgtNDJiZS1iNzQ1LTM0Yjk3MTNhN2Q5NS5wbmc"
51-
alt="placeholder"
52-
/>
53-
<img
54-
src="https://img-v2-prod.whop.com/45RrSIKml_7SfjaM5Zpr-MJ7RXHYATXoARw2Y3mi3eo/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3X2FjY2I4MTFmLTJhNzgtNDJiZS1iNzQ1LTM0Yjk3MTNhN2Q5NS5wbmc"
55-
alt="placeholder"
56-
/>
57-
<img
58-
src="https://img-v2-prod.whop.com/k74M-g4J5gH-h3RrhCbNXmDw6JIIO6l2Mn_Sd0HIDvs/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzFmMTU1NWNhLTRkM2EtNGVlOS04NWU1LTAzOGQxYzE2ZmU2Zi5wbmc"
59-
alt="placeholder"
60-
/>
61-
<img
62-
src="https://img-v2-prod.whop.com/3QrIa6Leu4aOOcM6VwT0Op0ozR4ef-ZGOd7kDx61WfA/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzliOWI1YWQ4LTcyMjUtNDM3OC1iYTQ1LTI0Y2FhNTE3YTQ4OS5wbmc"
63-
alt="placeholder"
64-
/>
65-
<img src="https://placehold.co/720x1280" alt="placeholder" />
66-
</Lightbox.Items>
23+
render: ({ children, ...args }) => (
24+
<Lightbox.Root>
25+
<Flex gap="3">
26+
<Lightbox.Trigger>
27+
<img
28+
src="https://img-v2-prod.whop.com/hBOMqb1G4YIzR0jw7qnF0_IkXBoAOh78ybHZt_mKrT8/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzAxMmY0ZDBkLWY1M2UtNGJhZS1iOTNhLWI3YTVhODhjMjA1Yy5wbmc"
29+
alt="placeholder"
30+
/>
31+
</Lightbox.Trigger>
32+
<Lightbox.Trigger>
33+
<img
34+
src="https://img-v2-prod.whop.com/7nS_TeQmzSCCznok6NSF4dsz-UivsmFcSIejHh_diFU/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzM1YmRkZjAwLTgzNDMtNDE4Yy1hYzYzLWZkY2VmYWU2YzBhYS5wbmc"
35+
alt="placeholder"
36+
/>
37+
</Lightbox.Trigger>
38+
</Flex>
39+
<Lightbox.Content {...args}>
40+
<Lightbox.Items>
41+
<Lightbox.Image
42+
src="https://img-v2-prod.whop.com/hBOMqb1G4YIzR0jw7qnF0_IkXBoAOh78ybHZt_mKrT8/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzAxMmY0ZDBkLWY1M2UtNGJhZS1iOTNhLWI3YTVhODhjMjA1Yy5wbmc"
43+
alt="placeholder"
44+
/>
6745

68-
<Lightbox.Thumbs />
69-
</Lightbox.Content>
70-
</Lightbox.Root>
71-
),
46+
<Lightbox.Image
47+
src="https://img-v2-prod.whop.com/7nS_TeQmzSCCznok6NSF4dsz-UivsmFcSIejHh_diFU/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzM1YmRkZjAwLTgzNDMtNDE4Yy1hYzYzLWZkY2VmYWU2YzBhYS5wbmc"
48+
alt="placeholder"
49+
/>
50+
<Lightbox.Image
51+
src="https://img-v2-prod.whop.com/45RrSIKml_7SfjaM5Zpr-MJ7RXHYATXoARw2Y3mi3eo/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3X2FjY2I4MTFmLTJhNzgtNDJiZS1iNzQ1LTM0Yjk3MTNhN2Q5NS5wbmc"
52+
alt="placeholder"
53+
/>
54+
<Lightbox.Image
55+
src="https://img-v2-prod.whop.com/45RrSIKml_7SfjaM5Zpr-MJ7RXHYATXoARw2Y3mi3eo/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3X2FjY2I4MTFmLTJhNzgtNDJiZS1iNzQ1LTM0Yjk3MTNhN2Q5NS5wbmc"
56+
alt="placeholder"
57+
/>
58+
<Lightbox.Image
59+
src="https://img-v2-prod.whop.com/k74M-g4J5gH-h3RrhCbNXmDw6JIIO6l2Mn_Sd0HIDvs/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzFmMTU1NWNhLTRkM2EtNGVlOS04NWU1LTAzOGQxYzE2ZmU2Zi5wbmc"
60+
alt="placeholder"
61+
/>
62+
<Lightbox.Image
63+
src="https://img-v2-prod.whop.com/3QrIa6Leu4aOOcM6VwT0Op0ozR4ef-ZGOd7kDx61WfA/rs:fit:1280:720/el:1/dpr:2/aHR0cHM6Ly9hc3NldHMud2hvcC5jb20vdXBsb2Fkcy8yMDI0LTExLTEyL3VzZXJfMjMzNDg3XzliOWI1YWQ4LTcyMjUtNDM3OC1iYTQ1LTI0Y2FhNTE3YTQ4OS5wbmc"
64+
alt="placeholder"
65+
/>
66+
<Lightbox.Video
67+
src="https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c0/Big_Buck_Bunny_4K.webm/Big_Buck_Bunny_4K.webm.1080p.vp9.webm"
68+
poster="https://placehold.co/1920x1080"
69+
/>
70+
</Lightbox.Items>
71+
72+
<Lightbox.Thumbs />
73+
</Lightbox.Content>
74+
</Lightbox.Root>
75+
),
7276
};

‎packages/frosted-ui/src/components/lightbox.tsx

+29-4
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,28 @@ const LightboxItems: React.FC<LightboxItemsProps> = ({
242242
);
243243
};
244244

245+
type LightboxImageProps = React.ComponentPropsWithoutRef<"img">;
246+
247+
const LightboxImage: React.FC<LightboxImageProps> = (props) => {
248+
return <img {...props} />;
249+
};
250+
251+
type LightboxVideoProps = React.ComponentPropsWithoutRef<"video">;
252+
253+
const LightboxVideo: React.FC<LightboxVideoProps> = ({
254+
controls = true,
255+
...props
256+
}) => {
257+
const { activeItemIndex } = useLightbox();
258+
const videoRef = React.useRef<HTMLVideoElement>(null);
259+
260+
if (!videoRef.current?.parentNode?.querySelector(".fui-LightboxActiveItem")) {
261+
videoRef.current?.pause();
262+
}
263+
264+
return <video controls={controls} {...props} ref={videoRef} />;
265+
};
266+
245267
type LightboxPrevElement = React.ElementRef<typeof Button>;
246268
interface LightboxPrevButtonProps
247269
extends Omit<React.ComponentPropsWithoutRef<typeof Button>, "children"> {
@@ -339,6 +361,8 @@ const LightboxThumbs: React.FC<LightboxThumbsProps> = ({
339361
{...props}
340362
>
341363
{items.map((item, index) => {
364+
const isVideo = item.type === LightboxVideo;
365+
const imgSrc: string = isVideo ? item.props.poster : item.props.src;
342366
return (
343367
<button
344368
onClick={() => setActiveItemIndex(index)}
@@ -348,10 +372,7 @@ const LightboxThumbs: React.FC<LightboxThumbsProps> = ({
348372
"fui-LightboxActiveThumb": activeItemIndex === index,
349373
})}
350374
>
351-
{React.cloneElement(item, {
352-
className: "fui-LightboxThumbImage",
353-
style: {},
354-
})}
375+
<img src={imgSrc} alt="" className="fui-LightboxThumbImage" />
355376
</button>
356377
);
357378
})}
@@ -393,6 +414,8 @@ export {
393414
LightboxRoot as Root,
394415
LightboxThumbs as Thumbs,
395416
LightboxTrigger as Trigger,
417+
LightboxImage as Image,
418+
LightboxVideo as Video,
396419
};
397420

398421
export type {
@@ -401,4 +424,6 @@ export type {
401424
LightboxRootProps as RootProps,
402425
LightboxThumbsProps as ThumbsProps,
403426
LightboxTriggerProps as TriggerProps,
427+
LightboxImageProps as ImageProps,
428+
LightboxVideoProps as VideoProps,
404429
};

0 commit comments

Comments
 (0)