Media files collection block mobile (#26721)

* updated initial example html content file with story block * adding method requestStoryCreatorLoad() to the bridge * added new interface OnStoryCreatorRequestListener * passing mediaFiles and blockId over the bridge in requestStoryCreatorLoad() * prettier fix * added gray-700 color, missing if not after retiring and changes made in (#25213) * removed jetpack stories example block from initial demo load * Mobile Stories block (part2: on done) (#25771) * added mobile StoryUpdateProgress component and bridge code to send/receive save progress * updated WPAndroid bridge DeferredEventEmitter to handle Story save events separately * changed all Save event interface methods to use String ids instead of int, and removed serverMediaId params as these don't apply while saving locally * redefined upload/save state constants * added onStorySaveResult handling to bridge, and renamed STORY_SAVE_STATE_* events to MEDIA_SAVE_STATE_* where appropriate * checking for matches of mediaId in mediaFiles while saving to send save progress updates * added mediaModelCreated() method to the bridge, so a new ID can be assigned to a mediaFile in a Story block * mediaId should always be a string in mediaFiles so, converting to avoid strict comparison to fail * removed commented code * updated documentation * added missing implementation of method storySaveSync() in demo app * fixed prettier warning * Update packages/block-editor/src/components/story-update-progress/README.md Co-authored-by: Joel Dean <[email protected]> * Update packages/block-editor/src/components/story-update-progress/README.md Co-authored-by: Joel Dean <[email protected]> * Mobile Stories block (part3: refactor / rename) (#26005) * renames for generic media files collection block and BlockMediaUpdateProgres * referencing the right props method in finishMediaSaveWithFailure * mistaken renames of parameters in bridge methods * renamed more abstract/generic method names requestMediaFilesEditorLoad * removed extra whtie space * renamed argument type Co-authored-by: Joel Dean <[email protected]> * Update packages/block-editor/src/components/block-media-update-progress/README.md Co-authored-by: Paul Von Schrottky <[email protected]> * using array.some() to find element in array * prettified function call * removed commented code * Media Files Collection (part4: error handling) (#26008) * added mobile StoryUpdateProgress component and bridge code to send/receive save progress * updated WPAndroid bridge DeferredEventEmitter to handle Story save events separately * changed all Save event interface methods to use String ids instead of int, and removed serverMediaId params as these don't apply while saving locally * redefined upload/save state constants * added onStorySaveResult handling to bridge, and renamed STORY_SAVE_STATE_* events to MEDIA_SAVE_STATE_* where appropriate * checking for matches of mediaId in mediaFiles while saving to send save progress updates * added mediaModelCreated() method to the bridge, so a new ID can be assigned to a mediaFile in a Story block * mediaId should always be a string in mediaFiles so, converting to avoid strict comparison to fail * removed commented code * updated documentation * added missing implementation of method storySaveSync() in demo app * fixed prettier warning * renames for generic media files collection block and BlockMediaUpdateProgres * referencing the right props method in finishMediaSaveWithFailure * mistaken renames of parameters in bridge methods * renamed more abstract/generic method names requestMediaFilesEditorLoad * removed extra whtie space * renamed argument type * renamed event paramter name to easier to understand 'success' boolean, matching the native counterpart * added cancel and retry bridge methods specific for mediaFiles collection based blocks * added requestMediaFilesSaveCancelDialog bridge method * renamed bridge method mediaModelCreatedForFile for more general purpose mediaIdChanged * Add missing iOS bridge declarations * added jsdoc like description for methods * removed unneeded return statement in some bridge methods * Update packages/react-native-bridge/index.js Co-authored-by: Joel Dean <[email protected]> * Update packages/react-native-bridge/index.js Co-authored-by: Joel Dean <[email protected]> * Update packages/react-native-bridge/index.js Co-authored-by: Joel Dean <[email protected]> * fixed typo, added punctuation Co-authored-by: eToledo <[email protected]> Co-authored-by: Joel Dean <[email protected]> * [RNMobile] added jetpack node_modules folder to cleanup step in JSbundle building (#26247) * added mobile StoryUpdateProgress component and bridge code to send/receive save progress * updated WPAndroid bridge DeferredEventEmitter to handle Story save events separately * changed all Save event interface methods to use String ids instead of int, and removed serverMediaId params as these don't apply while saving locally * redefined upload/save state constants * added onStorySaveResult handling to bridge, and renamed STORY_SAVE_STATE_* events to MEDIA_SAVE_STATE_* where appropriate * checking for matches of mediaId in mediaFiles while saving to send save progress updates * added mediaModelCreated() method to the bridge, so a new ID can be assigned to a mediaFile in a Story block * mediaId should always be a string in mediaFiles so, converting to avoid strict comparison to fail * removed commented code * updated documentation * added missing implementation of method storySaveSync() in demo app * fixed prettier warning * renames for generic media files collection block and BlockMediaUpdateProgres * referencing the right props method in finishMediaSaveWithFailure * mistaken renames of parameters in bridge methods * renamed more abstract/generic method names requestMediaFilesEditorLoad * removed extra whtie space * renamed argument type * renamed event paramter name to easier to understand 'success' boolean, matching the native counterpart * added cancel and retry bridge methods specific for mediaFiles collection based blocks * added requestMediaFilesSaveCancelDialog bridge method * renamed bridge method mediaModelCreatedForFile for more general purpose mediaIdChanged * added jetpack node_modules folder to cleanup step in JSbundle building tasks * Mobile Stories block - unit tests for BlockMediaUpdateProgress (#26423) * adding upload progress tests on BLockMediaUpdateProgress component (mediaFiles collection) * added save event tests for BlockMediaUpdateProgress component * ids in mediaFiles array are always strings, fixed that * updated function name passed by props * fixed mediaFiles const passing for saving, using tempMediaFiles * fixed state change for saveReset signal, was changing upload state instead * fixed typo * fixed using save state var * changed to more descriptive test names * removed commented line * renamed vars to match bridge signal name * Mobile stories block: hide behind feature flag (#26522) * hide Story block in non-DEV builds * prettified * passing enableStories feature flag in GutenbergProps and hiding block from picker if false * added space * renamed bridge GutenbergProps property to agnostic abstraction mediaFilesCollectionBlock * renamed var on Capabilities enum * removed stories specific block behavior * added Jdoc descriptions * [RNMobile] iOS side of bridge for media collection blocks (#26704) * Activate media files collection capabilitie on iOS example app * Implement iOS side of Bridge for Media Collection blocks * Update packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift Co-authored-by: Paul Von Schrottky <[email protected]> Co-authored-by: Paul Von Schrottky <[email protected]> Co-authored-by: Joel Dean <[email protected]> Co-authored-by: Paul Von Schrottky <[email protected]> Co-authored-by: eToledo <[email protected]>
WordPress · Nov 14, 2020 · bc3dc55 · bc3dc55
1 parent e65e5e4
commit bc3dc55
Show file tree

Hide file tree

Showing 21 changed files with 1,438 additions and 31 deletions.
diff --git a/packages/base-styles/_colors.native.scss b/packages/base-styles/_colors.native.scss
@@ -40,6 +40,7 @@ $gray: #87a6bc;
 $gray-light: lighten($gray, 33%); //#f3f6f8
 $gray-dark: darken($gray, 38%); //#2e4453
 $gray-900: #1a1a1a;
+$gray-700: #757575;
 
 // $gray-text: ideal for standard, non placeholder text
 // $gray-text-min: minimum contrast needed for WCAG 2.0 AA on white background

diff --git a/packages/block-editor/src/components/block-media-update-progress/README.md b/packages/block-editor/src/components/block-media-update-progress/README.md
@@ -0,0 +1,104 @@
+BlockMediaUpdateProgress
+===================
+
+`BlockMediaUpdateProgress` shows a progress bar while the media files associated with a media-containing block are being saved first and uploaded later
+
+## Usage
+
+Usage example
+
+```jsx
+import { ImageBackground, Text, View } from 'react-native';
+import {
+	BlockMediaUpdateProgress,
+} from '@wordpress/block-editor';
+
+function BlockUpdatingProgress( { url, id } ) {
+	return (
+		<BlockMediaUpdateProgress
+			mediaId={ id }
+			renderContent={ ( { isSaveFailed, retryMessage } ) => {
+				return (
+					<ImageBackground
+						resizeMethod="scale"
+						source={ { uri: url } }
+					>
+						{ isSaveFailed &&
+							<View>
+								<Text>{ retryMessage }</Text>
+							</View>
+						}
+					</ImageBackground>
+				);
+			} }
+		/>
+	);
+}
+```
+
+## Props
+
+### mediaFiles
+
+A collection of media ID that identifies the current collection of files represented in this media container block.
+
+- Type: `Array`
+- Required: Yes
+- Platform: Mobile
+
+### renderContent
+
+Content to be rendered along with the progress bar, usually the thumbnail of the media being uploaded.
+
+- Type: `React components`
+- Required: Yes
+- Platform: Mobile
+
+It passes an object containing the following properties:
+
+`{ isUploadInProgress, isUploadFailed, isSaveInProgress, isSaveFailed, retryMessage }`
+
+### onUpdateMediaProgress
+
+Callback called when the progress of the upload is updated.
+
+- Type: `Function`
+- Required: No
+- Platform: Mobile
+
+The argument of the callback is an object containing the following properties:
+
+`{ mediaId, mediaUrl, progress, state }`
+
+### onFinishMediaUploadWithSuccess
+
+Callback called when the media file has been uploaded successfully.
+
+- Type: `Function`
+- Required: No
+- Platform: Mobile
+
+The argument of the callback is an object containing the following properties:
+
+`{ mediaId, mediaServerId, mediaUrl, progress, state }`
+
+### onFinishMediaUploadWithFailure
+
+Callback called when the media file couldn't be uploaded.
+
+- Type: `Function`
+- Required: No
+- Platform: Mobile
+
+The argument of the callback is an object containing the following properties:
+
+`{ mediaId, progress, state }`
+
+
+### onMediaUploadStateReset
+
+Callback called when the media upload is reset
+
+- Type: `Function`
+- Required: No
+- Platform: Mobile