[RNMobile] Audio Block: Proper caption field #27689
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ceyhun
added
the
Mobile App - i.e. Android or iOS
|
Size Change: 0 B Total Size: 1.21 MB ℹ️ View Unchanged
|
jd-alexander
suggested changes
Dec 16, 2020
There was a problem hiding this comment.
Thanks for this implementation @ceyhun I tested the overall behavior of the component and it works as expected! I observed all the behaviors you mentioned in the testing instructions:
✅ Audio block is selected with "Write caption..." placeholder for caption field
✅ Deselecting Audio Block causes the Caption field to be hidden
✅ Switching to html mode without modifying the caption of the Audio block resulted in no
✅ Audio caption supports multiline behavior & when enter is pressed at the end of the caption text a new paragraph is added.
✅
<figcaption> contained the expected tags and content.✅ The caption is rendered correctly.
I left a few comments to verify a few things. Once those are addressed we are good to go!
|
An associated comment.... As the Audio Block: caption field is being worked on.... Perhaps someone in this thread would like to work on or knows someone who might want to work on the Playlist block feature. Here is the issue for it: #805 (It is the second oldest issue here in the Gutenberg Github repo.) |
|
Thanks for testing and reviewing @jd-alexander! I think I have addressed your feedback. Can you please give it another check? |
jd-alexander
approved these changes
Dec 17, 2020
There was a problem hiding this comment.
Thanks @ceyhun for addressing all the feedback! We are good to go here! LGTM 🚢
Hey there @paaljoachim 👋 I'm only working on porting the Audio block to native/mobile, and unfortunately, I'm not the right person 😔 Also the issue you shared still seems to have a |
jd-alexander
added a commit
that referenced
this pull request
Jan 26, 2021
* Basics of Audio block working * Add audio support to MediaUpload * Add handling of file uploads and replace * WPMediaLibrary support for Audio block * Avoid removing media info on error state * Linting * Added an AUDIO file to the test requestMediaPickFromMediaLibrary func * Fixed typo in ToolbarButton of Audio Block. * Removed auto help behavior present on web that's not used on mobile. * [Android] Wired the click of the Audio Media Library button. * Added Audio media options for choosing audio file locally. * [RNMobile] Audio Block: Proper caption field (#27689) Co-authored-by: Joel Dean <[email protected]> Co-authored-by: Ceyhun Ozugur <[email protected]>
jd-alexander
added a commit
that referenced
this pull request
Feb 1, 2021
* Basics of Audio block working * Add audio support to MediaUpload * Add handling of file uploads and replace * WPMediaLibrary support for Audio block * Avoid removing media info on error state * Linting * Added an AUDIO file to the test requestMediaPickFromMediaLibrary func * Fixed typo in ToolbarButton of Audio Block. * Removed auto help behavior present on web that's not used on mobile. * [Android] Wired the click of the Audio Media Library button. * Added Audio media options for choosing audio file locally. * [RNMobile] Audio Block: Proper caption field (#27689) * Audio Player UI for audio block * Add extension to styles import * Show file name while loading and retry message on error * Pass state props to audio player component * Implement placeholder-ish player UI structure * added styles for icon, title and subtitle * added blue-wordpress as link color. * added sizing based on design specs. * Fixed object destructuring error. * added icon styling state for upload in progress or upload failed. * implemented error style and behavior. * added styling for upload failed text. * Override MediaUploadProgress styles * Update filename extension spseration to handle two dots * Update UI structure and styles * Make retry message translateable * Update snaphots * Fix lint error * Set initial file name * Remove devOnly flag from audio block * Increase tap target of button * Add 1px between title and subtitle * Align title, subtitle and button vertically * On iOS use VideoPlayer to play audio files in-app * Revert "On iOS use VideoPlayer to play audio files in-app" This reverts commit b1eb8dd. * [RNMobile] Audio Block - Cancel and Retry Dialog (#28540) Co-authored-by: Ceyhun Ozugur <[email protected]> * Rename button title * Add pill-shaped background to button * Add padding to title * Fix file title being empty when selecting from media library * Use safeDecodeURI * On iOS use VideoPlayer to play audio files in-app * Decrease button font size Co-authored-by: Joel Dean <[email protected]> * Revert "Remove devOnly flag from audio block" This reverts commit e6b5b6d. * Add right padding to title container to fix error state Co-authored-by: Joel Dean <[email protected]> Co-authored-by: Ceyhun Ozugur <[email protected]>
fluiddot
pushed a commit
that referenced
this pull request
Feb 2, 2021
* Basics of Audio block working * Add audio support to MediaUpload * Add handling of file uploads and replace * WPMediaLibrary support for Audio block * Avoid removing media info on error state * Linting * Added an AUDIO file to the test requestMediaPickFromMediaLibrary func * Fixed typo in ToolbarButton of Audio Block. * Removed auto help behavior present on web that's not used on mobile. * [Android] Wired the click of the Audio Media Library button. * Added Audio media options for choosing audio file locally. * [RNMobile] Audio Block: Proper caption field (#27689) * Audio Player UI for audio block * Add extension to styles import * Show file name while loading and retry message on error * Pass state props to audio player component * Implement placeholder-ish player UI structure * added styles for icon, title and subtitle * added blue-wordpress as link color. * added sizing based on design specs. * Fixed object destructuring error. * added icon styling state for upload in progress or upload failed. * implemented error style and behavior. * added styling for upload failed text. * Override MediaUploadProgress styles * Update filename extension spseration to handle two dots * Update UI structure and styles * Make retry message translateable * Update snaphots * Fix lint error * Set initial file name * Remove devOnly flag from audio block * Increase tap target of button * Add 1px between title and subtitle * Align title, subtitle and button vertically * On iOS use VideoPlayer to play audio files in-app * Revert "On iOS use VideoPlayer to play audio files in-app" This reverts commit b1eb8dd. * [RNMobile] Audio Block - Cancel and Retry Dialog (#28540) Co-authored-by: Ceyhun Ozugur <[email protected]> * Rename button title * Add pill-shaped background to button * Add padding to title * Fix file title being empty when selecting from media library * Use safeDecodeURI * On iOS use VideoPlayer to play audio files in-app * Decrease button font size Co-authored-by: Joel Dean <[email protected]> * Revert "Remove devOnly flag from audio block" This reverts commit e6b5b6d. * Add right padding to title container to fix error state Co-authored-by: Joel Dean <[email protected]> Co-authored-by: Ceyhun Ozugur <[email protected]>
fluiddot
added a commit
that referenced
this pull request
Feb 5, 2021
* Release script: Update react-native-editor version to 1.46.0 * Release script: Update with changes from 'npm run core preios' * [RNMobile] Correct condition in setting blockWidth (#28635) * [RNMobile] Fix height of the bottom-sheet after using back button (#28632) * remove unused param and setHeight even if it is the same * [RNMobile] Audio Player UI for audio block (#27467) * Basics of Audio block working * Add audio support to MediaUpload * Add handling of file uploads and replace * WPMediaLibrary support for Audio block * Avoid removing media info on error state * Linting * Added an AUDIO file to the test requestMediaPickFromMediaLibrary func * Fixed typo in ToolbarButton of Audio Block. * Removed auto help behavior present on web that's not used on mobile. * [Android] Wired the click of the Audio Media Library button. * Added Audio media options for choosing audio file locally. * [RNMobile] Audio Block: Proper caption field (#27689) * Audio Player UI for audio block * Add extension to styles import * Show file name while loading and retry message on error * Pass state props to audio player component * Implement placeholder-ish player UI structure * added styles for icon, title and subtitle * added blue-wordpress as link color. * added sizing based on design specs. * Fixed object destructuring error. * added icon styling state for upload in progress or upload failed. * implemented error style and behavior. * added styling for upload failed text. * Override MediaUploadProgress styles * Update filename extension spseration to handle two dots * Update UI structure and styles * Make retry message translateable * Update snaphots * Fix lint error * Set initial file name * Remove devOnly flag from audio block * Increase tap target of button * Add 1px between title and subtitle * Align title, subtitle and button vertically * On iOS use VideoPlayer to play audio files in-app * Revert "On iOS use VideoPlayer to play audio files in-app" This reverts commit b1eb8dd. * [RNMobile] Audio Block - Cancel and Retry Dialog (#28540) Co-authored-by: Ceyhun Ozugur <[email protected]> * Rename button title * Add pill-shaped background to button * Add padding to title * Fix file title being empty when selecting from media library * Use safeDecodeURI * On iOS use VideoPlayer to play audio files in-app * Decrease button font size Co-authored-by: Joel Dean <[email protected]> * Revert "Remove devOnly flag from audio block" This reverts commit e6b5b6d. * Add right padding to title container to fix error state Co-authored-by: Joel Dean <[email protected]> Co-authored-by: Ceyhun Ozugur <[email protected]> * [RNMobile] Enable Audio Block (#28594) Co-authored-by: Joel Dean <[email protected]> * Update react-native-editor CHANGELOG * Update unsupported block test data for UI tests (#28649) The unsupported block now used is jetpack/gif since Audio block is now supported. * Revert indentation of modified package.json files * Update react-native-editor CHANGELOG * [RNMobile] Move custom indicator to be rendered above the colors (#28698) * [RNMobile] Move back disabled style for button in File block (#28704) Co-authored-by: Luke Walczak <[email protected]> Co-authored-by: Drapich Piotr <[email protected]> Co-authored-by: etoledom <[email protected]> Co-authored-by: Joel Dean <[email protected]> Co-authored-by: Ceyhun Ozugur <[email protected]>
jd-alexander
added a commit
that referenced
this pull request
May 21, 2021
* Basics of Audio block working * Add audio support to MediaUpload * Add handling of file uploads and replace * WPMediaLibrary support for Audio block * Avoid removing media info on error state * Linting * Added an AUDIO file to the test requestMediaPickFromMediaLibrary func * Fixed typo in ToolbarButton of Audio Block. * Removed auto help behavior present on web that's not used on mobile. * [Android] Wired the click of the Audio Media Library button. * Added Audio media options for choosing audio file locally. * [RNMobile] Audio Block: Proper caption field (#27689) * Add alert prompt to insert from URL * Set entered URL in audio block attributes * initial integration with react native prompt. * updated prompt lib. * updated commit hash of prompt lib. * Updated package-lock.json. * Added RNPromptPackage to Glue Code. * fixed merge conflicts between the edit.native.js files of the branches * added onSelectURL to the media-upload component * added onSelectURL to the media-placeholder * updated onSelectURL support with notice and URL validation * sync package-lock.json * updated package-lock.json * updated package-lock.json * updated react-native-prompt-android setup due to binary dep changes. * sync package-lock.json * Integrated RNPromptPackage with the glue code. * sync package-lock.json * package-lock.json fix * sync package-lock.json * Added the globe icon to the Insert from URL source.Only shown on Android * Extract filename from all URL types and optimized extension logic. * Reduced onPress -> onSelectURL logic since the parameters match. * Added entry to CHANGELOG.md * Fixed release notes entry. Co-authored-by: eToledo <[email protected]> Co-authored-by: Joel Dean <[email protected]>
jd-alexander
added a commit
that referenced
this pull request
May 21, 2021
* Basics of Audio block working * Add audio support to MediaUpload * Add handling of file uploads and replace * WPMediaLibrary support for Audio block * Avoid removing media info on error state * Linting * Added an AUDIO file to the test requestMediaPickFromMediaLibrary func * Fixed typo in ToolbarButton of Audio Block. * Removed auto help behavior present on web that's not used on mobile. * [Android] Wired the click of the Audio Media Library button. * Added Audio media options for choosing audio file locally. * [RNMobile] Audio Block: Proper caption field (#27689) * Add alert prompt to insert from URL * Set entered URL in audio block attributes * initial integration with react native prompt. * updated prompt lib. * updated commit hash of prompt lib. * Updated package-lock.json. * Added RNPromptPackage to Glue Code. * fixed merge conflicts between the edit.native.js files of the branches * added onSelectURL to the media-upload component * added onSelectURL to the media-placeholder * updated onSelectURL support with notice and URL validation * sync package-lock.json * updated package-lock.json * updated package-lock.json * updated react-native-prompt-android setup due to binary dep changes. * sync package-lock.json * Integrated RNPromptPackage with the glue code. * sync package-lock.json * package-lock.json fix * sync package-lock.json * Added the globe icon to the Insert from URL source.Only shown on Android * Extract filename from all URL types and optimized extension logic. * Extracted the url parsing logic to a file so it can be tested. * integrated parseAudioUrl function with the Audio block. * Created tests for the audio url parsing. * Made the component and its respective tests native. * Reduced onPress -> onSelectURL logic since the parameters match. * Added entry to CHANGELOG.md * Utilized getPath from the `wordpress/url` package to simplify logic. * Added URL with folder to the tests for audio urls with an extension. * Enhanced tests to verify the title and extension values. * Trimmed the extension since a space exists in the string for the UI. * Removed trim and put the space in the string. * Removed duplicate entry. Co-authored-by: eToledo <[email protected]> Co-authored-by: Ceyhun Ozugur <[email protected]>
fluiddot
added a commit
that referenced
this pull request
Jun 3, 2021
… media sources (#31966) * Basics of Audio block working * Add audio support to MediaUpload * Add handling of file uploads and replace * WPMediaLibrary support for Audio block * Avoid removing media info on error state * Linting * Added an AUDIO file to the test requestMediaPickFromMediaLibrary func * Fixed typo in ToolbarButton of Audio Block. * Removed auto help behavior present on web that's not used on mobile. * [Android] Wired the click of the Audio Media Library button. * Added Audio media options for choosing audio file locally. * [RNMobile] Audio Block: Proper caption field (#27689) * Add alert prompt to insert from URL * Set entered URL in audio block attributes * initial integration with react native prompt. * updated prompt lib. * updated commit hash of prompt lib. * Updated package-lock.json. * Added RNPromptPackage to Glue Code. * fixed merge conflicts between the edit.native.js files of the branches * added onSelectURL to the media-upload component * added onSelectURL to the media-placeholder * updated onSelectURL support with notice and URL validation * sync package-lock.json * updated package-lock.json * updated package-lock.json * updated react-native-prompt-android setup due to binary dep changes. * sync package-lock.json * Integrated RNPromptPackage with the glue code. * sync package-lock.json * package-lock.json fix * sync package-lock.json * Added the globe icon to the Insert from URL source.Only shown on Android * Extract filename from all URL types and optimized extension logic. * Removed hook that would show/hide the audio block. It is not needed. * Only show the Insert from URL option when the audio block cap is false * Added changelog entry for the Audio block URL prompt on free sites * Removed exclamation mark. * Reduced onPress -> onSelectURL logic since the parameters match. * Added entry to CHANGELOG.md * simplified isAudioBlockEnabled's usage of getSettings. * exported the Insert from URL option so that the test can be utilize it. * Added test that verifies the Insert From URL option with the audio type * isAudioBlockMediaUploadEnabled now represents the Audio block capability * placed the audio block capability in a single filter callback function * Added release notes entry under unreleased. * added logic that verifies that the source being enabled supports audio * formatted code changes. * Changed the order of the props to match the order throughout the file. * Fixed order of ios capabilities * Fix indent issues on Gutenberg props Co-authored-by: eToledo <[email protected]> Co-authored-by: Ceyhun Ozugur <[email protected]> Co-authored-by: Carlos Garcia <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Used
BlockCaptioncomponent for Audio Block's caption field.Depends on: #27401. But I think we can review and merge this to that branch.
How has this been tested?
<figcaption>tags<figcaption>tags contain correct information (for bold, italic, etc. and<br>tags for new lines)Screenshots
Types of changes
New feature (non-breaking change which adds functionality)
Checklist: