Feature: Initial implementation of baseline MediaVideo component with required link prop and styling

[otaree]

Create Base MediaVideo Component

Contributor checklist

• This pull request is on a separate branch and not the main branch

---

Description

I've implemented the baseline MediaVideo component based on the user story's requirements. This component includes the following features:

• A required link prop, enabling the component to display a video or link to a video call.
• Styling that aligns with the coloration defined in tailwind.config.ts.
• Appropriate sizing to maintain consistency with other components in the components/media directory.

Testing

I've thoroughly tested the component by temporarily replacing the MediaMap component with the new MediaVideo component in the pages/events/[id]/about.vue file. Please note that this replacement was done solely for testing purposes. I verified that the component integrates seamlessly and maintains consistent styling and sizing according to the design guidelines and tailwind configuration.

• Create base MediaVideo component #273

[github-actions]

Thank you for the pull request!

The activist team will do our best to address your contribution as soon as we can. The following is a checklist for maintainers to make sure this process goes as well as possible. Feel free to address the points below yourself in further commits if you realize that actions are needed :)

If you're not already a member of our public Matrix community, please consider joining! We'd suggest using Element as your Matrix client, and definitely join the General and Development rooms once you're in. It'd be great to have you!

Maintainer checklist

• The commit messages for the remote branch should be checked to make sure the contributor's email is set up correctly so that they receive credit for their contribution

  • The contributor's name and icon in remote commits should be the same as what appears in the PR
  • If there's a mismatch, the contributor needs to make sure that the email they use for GitHub matches what they have for git config user.email in their local activist repo

• The CHANGELOG has been updated with a description of the changes for the upcoming release (if necessary)

[netlify]

✅ Deploy Preview for activist-org ready!

Name	Link
🔨 Latest commit	0a0532c
🔍 Latest deploy log	https://app.netlify.com/sites/activist-org/deploys/64ea362f1bdfaf00083b4e1c
😎 Deploy Preview	https://deploy-preview-299--activist-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[andrewtavis]

Hey @otaree! Thanks for this commit 🙏 I'm realizing that there's an issue with your commit messages when doing the maintainer checklist. You'll notice that the user name and image don't match for the commit and the PR, so you won't get credit for your contribution.

Can you check the following as directed by the checklist:

If there's a mismatch, the contributor needs to make sure that the email they use for GitHub matches what they have for git config user.email in their local activist repo

[otaree]

Hey @andrewtavis, I've corrected it to match my GitHub email. This should ensure proper attribution of the contribution to my account. Thank you for your understanding.

[andrewtavis]

No need for thanks, @otaree! Just trying to make sure you get your due credit, and trust me this happens all the time (henve the note for maintainers) 😊

[andrewtavis]

Only real comment I have on this @otaree is that I'm thinking we don't need a custom icon component for this. We can use a normal <Icon name='bi:camera-video' /> component or another one from Bootstrap Icons. We normally are making the custom icon components only in cases where we need to given that it's a branded icon or one we made specifically. We might event want to convert some of those custom icons over to ones available from Icones, which is something you'd be welcome to work on, @otaree!

[andrewtavis]

I can definitely see how you'd think that one would be necessary though, so no stress! Looking at it, IconJoin, IconLegal, and maybe a few others could be converted. Let me know if you'd have interest in this for another issue!

[otaree]

Hey @andrewtavis , Thank you for your thoughtful insights and suggestions. I'm definitely interested in working on the conversion of the custom icons to standard ones, including "IconJoin" and "IconLegal." To keep things organized and clear, would you prefer that I create a separate pull request for this icon conversion task? This way, it won't mix with the changes in the current pull request, and we can focus on each aspect more effectively. Please let me know your thoughts on this approach, and I'll be more than happy to get started on making these improvements.

[andrewtavis]

Yes, @otaree, that'd be perfect if it was in a separate PR. Also, if you'd be so kind as to make an issue for this this would also be great 😊 I'd comment in there with any other information for it that's needed like how we'd need to update the legal docs if we use a new icon pack, but it'd be good to have an issue for an overview.

Appreciate your willingness to help!

[andrewtavis]

Thanks for the quick reaction and changes on this, @otaree! Appreciate the work here and look forward to future contributions!