feat(video): create Video component

[kaseyvee]

Changes

• create video component
• refactor controls to work with video

Screenshots/Videos

Designs

Desktop

Mobile

Storybook

Light mode

Default

With captions

With poster

Error

Mobile

Dark mode

Default

Mobile

Videos

Desktop Fullscreen https://github.com/rustic-ai/ui-components/assets/111031789/e0ad61a1-f119-4c3e-adb9-068c3fe5f0f7

Desktop Picture-in-picture https://github.com/rustic-ai/ui-components/assets/111031789/2f22fe6d-90b7-4c4e-b7e4-a2109d7f5c26

Mobile Fullscreen https://github.com/rustic-ai/ui-components/assets/111031789/36a9f7fd-4652-4d72-be52-a6e4e32f56b8

[lyjeileen]

Could you hide the control bar when the mouse has not moved for a few seconds?

[kaseyvee]

I'm thinking we should split the controls file into 3 - mediaIcons component, common(controls common to audio and video) and videocontrols. what do you think ?

@Shiti This would make it easier to maintain. Will still have to think about how the controls in the settings menu will work.

[Laurendragonscale]

We should consider adding a lot more contrast behind the video controls. Maybe even a solid colour like this:

[lyjeileen]

Hi! I found a bug in the mobile version. Here are the steps to reproduce it:

• Click play button (It switched to the full screen mode)
• Click the full screen toggle (It switched back to the small screen)
• Click play button again => Nothing happened
• Click play button again (It switched to the full screen mode)

[lyjeileen]

Should the video folder be in the media folder?

[kaseyvee]

Hi! I found a bug in the mobile version. Here are the steps to reproduce it:

• Click play button (It switched to the full screen mode)
• Click the full screen toggle (It switched back to the small screen)
• Click play button again => Nothing happened
• Click play button again (It switched to the full screen mode)

@lyjeileen Addressed. Initially spoke with @RenataDzotova about making this immediately go to fullscreen on mobile since it's not obvious you have to go to fullscreen for the controls. Maybe we can address this in the future, so I've updated to be back to the original design. Clicking play now simply plays the video without going fullscreen and added back the fullscreen button.

[Shiti]

@kaseyvee when transcript is shown in full screen mode, the other controls are not visible even on hover. We have to hide transcript for any other controls to be visible.

[Shiti]

When showing picture-in-picture, I think it should show the poster /first frame at the original location.

[kaseyvee]

@kaseyvee when transcript is shown in full screen mode, the other controls are not visible even on hover. We have to hide transcript for any other controls to be visible.

@Shiti Not quite sure how the designs are meant to handle showing the transcript on fullscreen with the controls. I could make them appear like this with a max height of 25% viewport height:

@Laurendragonscale @RenataDzotova @lyjeileen What do you guys think?

[Shiti]

on desktop, the transcript comes below the controls so I would assume that the same happens on mobile as well.