Add Validation for URL Shortener Buttons and Fix Placeholder Visibility Issue

[anuj-kumary]

First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

Summary of the Change:

1. Validation for the "Shorten URL" Button:

Added validation to prevent the API call when the input field is empty. Ensures that users cannot attempt to shorten a URL without providing valid input.

2. Validation for the "Copy to Clipboard" Button:

Modified the button's behavior to ensure it is only enabled when a valid shortened URL is present. Prevents users from copying empty or invalid data.

3. Fix for Placeholder Text Visibility:

Adjusted the styling of the input field to ensure the placeholder text is fully visible.
Enhances usability and improves the overall user experience by providing clear instructions through the placeholder.

Fixes #1575

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

1. Validation for the "Shorten URL" Button:

• Manually tested by attempting to click the button with an empty input field.
• Confirmed that the API call is not triggered when the input is invalid or empty.
• Verified functionality with valid URL inputs to ensure no regression.

2. Validation for the "Copy to Clipboard" Button:

• Confirmed that the button remains disabled when no valid URL is present.
• Ensured that valid data was successfully copied to the clipboard when a valid shortened URL was available.

3. Fix for Placeholder Text Visibility:

• Ensured that the text is no longer cut off and is fully readable at all times.

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Screenshots or example output

Screen.Recording.2024-11-27.at.5.50.52.PM.mov

[netlify]

✅ Deploy Preview for reactplayio ready!

Name	Link
🔨 Latest commit	4372162
🔍 Latest deploy log	https://app.netlify.com/sites/reactplayio/deploys/674d6a6b0f36e800083d29b1
😎 Deploy Preview	https://deploy-preview-1577--reactplayio.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.

[github-actions]

Hey! contributor, thank you for opening a Pull Request 🎉.

@reactplay/maintainers will review your submission soon and give you helpful feedback. If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.