Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add articles audio player #305

Merged
merged 78 commits into from
Oct 31, 2023
Merged

Conversation

shahin-hq
Copy link
Contributor

@shahin-hq shahin-hq commented Oct 26, 2023

Summary

Closes: https://app.clickup.com/t/8678v0juv

This PR implements two audio players:

  • One with use of a library - wavesurfer and achieves the exact design
  • Another is completely custom but has a different progress bar

image

image

For testing:

  • Run ArticleSeeder
  • Set this URL as audio_file_url
https://dashbrd-testing.s3.eu-west-1.amazonaws.com/24/en.0199216d-8e1d-419c-b207-e8c0a611f969.mp3

Try both and pick your side

image

Checklist

  • I checked my UI changes against the design and there are no notable differences
  • I checked my UI changes for any responsiveness issues
  • I checked my (code) changes for obvious issues, debug statements and commented code
  • I opened a corresponding card on Clickup for any remaining TODOs in my code
  • I added a short description on how to test this PR (if necessary)
  • I added a storybook entry for the component that was added (if necessary)
  • Documentation (if necessary)
  • Tests (if necessary)
  • Ready to be merged

shahin-hq and others added 30 commits October 24, 2023 17:39
# Conflicts:
#	.env.example
#	composer.lock
# Conflicts:
#	app/Models/Article.php
#	tests/App/Http/Controllers/ArticleControllerTest.php
Base automatically changed from feat/articles-audio to feat/articles October 27, 2023 10:03
@shahin-hq shahin-hq marked this pull request as ready for review October 27, 2023 10:24
Copy link
Contributor

@crnkovic crnkovic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I personally like the wave surfer more, looks sleek! Will see what others say!

I just noticed the tiny color issue for the waves (should be primary-900) and forgotten translations in "Audio Version".

Screenshot 2023-10-27 at 13 56 50

Copy link
Contributor

@ItsANameToo ItsANameToo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer the wavesurfer one as well, looks good.

One remark about the loading state for it: the spinner takes up more height than the actual wave it will show and it shifts the content

@@ -0,0 +1 @@
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.852 6.67c2.724 1.676 4.085 2.514 4.341 3.68.087.398.087.809 0 1.206-.256 1.166-1.617 2.004-4.34 3.68C9.89 17.06 8.41 17.97 7.21 17.62a2.812 2.812 0 0 1-1.095-.611c-.928-.838-.928-2.577-.928-6.055 0-3.478 0-5.217.928-6.054a2.813 2.813 0 0 1 1.095-.612c1.2-.351 2.68.56 5.642 2.383Z" fill="currentColor"/></svg>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

best to remove width and height and only keep the viewBox so it's possible to use different sizes for the image. Same applies to the other one

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • removed width and height
  • set fixed height for the spinner container, so it will have the same height with wave.

@ItsANameToo ItsANameToo marked this pull request as draft October 31, 2023 09:42
@shahin-hq shahin-hq marked this pull request as ready for review October 31, 2023 12:20
@shahin-hq shahin-hq requested a review from ItsANameToo October 31, 2023 12:22
@ItsANameToo ItsANameToo merged commit 75fa393 into feat/articles Oct 31, 2023
16 checks passed
@ItsANameToo ItsANameToo deleted the feat/articles-audio-player branch October 31, 2023 13:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants