720-Add support for giphy and pexel images #1469

marecar3 · 2019-10-18T17:31:31Z

Added support for giphy and pexels images

Fixes #720

WPAndroid PR: wordpress-mobile/WordPress-Android#10628
Gutenberg PR: WordPress/gutenberg#18026

Note: works only on Android (@etoledom will implement iOS part of it)

To test:

Open WPAndroid application
Create a new post or open existing
Create a new image block
Open picker
Click on Choose from Free Photo Library
Confirm and see that it will be shown in the new post
Open picker
Click on Choose from Giphy
Confirm and see that it will be shown in the new post

@iamthomasbishop I have two questions regarding UI/UX:

Should we show some icons for Giphy and Pexels options in the picker?
Are you ok with strings which were reused from WPAndroid or you think we should put some new strings for gb-mobile?

@iamthomasbishop also about this one. There are some giphy images that can be smaller than a size of the component. I have centered them, but do we want some background on unused space?

Update release notes:

If there are user facing changes, I have added an item to RELEASE-NOTES.txt.

Added support to present giphy and pexel images

…ilable-from-image-block # Conflicts: # gutenberg

iamthomasbishop · 2019-10-18T21:41:57Z

@marecar3 thanks for the ping! Happy to see that the implementation we did for Giphy Aztec is working here :)

Should we show some icons for Giphy and Pexels options in the picker?

We could always use the same icon we're using for the first option in that list (dashicons "image" icon, I believe) for the first iteration. I think we might eventually want to iterate on the bottom sheet used here for selection, but for now we can use that.

Are you ok with strings which were reused from WPAndroid or you think we should put some new strings for gb-mobile?

Assuming you mean the text label strings used on the bottom sheet, I think that's fine.

There are some giphy images that can be smaller than a size of the component. I have centered them, but do we want some background on unused space?

Let's look at what the web does and match that as a starting point in terms of alignment, and I don't know if I'd apply a background – assuming that area around the image is still tappable to select the block, that's probably fine.

…ilable-from-image-block # Conflicts: # gutenberg

marecar3 · 2019-10-21T18:29:38Z

Hey @iamthomasbishop, thanks for the help 👍

This is how it looks with icons, is that ok with you?

etoledom · 2019-10-21T18:36:33Z

...nberg-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java

+    public static final String MEDIA_SOURCE_STOCK_MEDIA = "MEDIA_SOURCE_STOCK_MEDIA";
+    public static final String MEDIA_SOURCE_GIPHY_MEDIA = "MEDIA_SOURCE_GIPHY_MEDIA";


I wouldn't mention "stock media" or "giphy" at the bridge level. I would say that they are all "extra options".
Ideally we would be able to add more media sources on the client app (like the iOS-only Other apps option) without the need to modify the Bridge.

Hey @etoledom that was my initial solution but I had a problem with this part of the code: https://github.com/wordpress-mobile/gutenberg-mobile/pull/1469/files#diff-37882e44592184b021430fb0aae5d21cR129-R135

For media stock, we don't have information about the upload process
which means that we need to listen for MediaSelectedCallback ( and not MediaUploadCallback )
and for Giphy we have information about the upload process so we need to use MediaUploadCallback

Some ugly solution would be to put prefix upload in the key so that we know which callback we need to assign to the media source.

Do you have something on your mind in this case?

I see, that makes sense.

Just an idea: Do you think it would be possible to use a single progress-based callback (MediaUploadCallback?), and send the progress as completed from the beginning in the Stock Photos case?

This might be a simpler workaround 🤔

Hey @etoledom I managed to only use one callback for all cases (MediaUploadCallback)
which gives us the opportunity to hide 3rd party options from RN layer.

Let me know when you do another iteration of review. Thanks.

iamthomasbishop · 2019-10-21T19:09:29Z

@marecar3 The sheet is looking pretty good, but I have one suggestion that just jumped to my mind. We should probably use a Giphy logo from their design guidelines. I grabbed one of the logos from their Sketch asset library and made an SVG, which you can download here. For a preview, it looks like this (32x32, but we will scale down to match the size of our other icons, which IIRC is 24x24):

marecar3 · 2019-10-23T12:08:17Z

@marecar3 The sheet is looking pretty good, but I have one suggestion that just jumped to my mind. We should probably use a Giphy logo from their design guidelines. I grabbed one of the logos from their Sketch asset library and made an SVG, which you can download here. For a preview, it looks like this (32x32, but we will scale down to match the size of our other icons, which IIRC is 24x24):

Thanks for the suggestion @iamthomasbishop, I think it's a good one but with the current implementation, it's not so easy to set custom icons for Other resources. Let's go with default icons for this iteration and I will create a separate ticket that will bring that feature, WDYT?

update: created a new ticket with some context: #1487

iamthomasbishop · 2019-10-23T12:44:46Z

Works for me! This would be an enhancement, not a blocker 👍

mchowning · 2019-10-23T21:12:01Z

react-native-gutenberg-bridge/index.js

+	return RNReactNativeGutenbergBridge.getOtherMediaOptions( filter, callback );
+}
+
+export function requesOtherMediaPickFrom( mediaSource, multiple, callback ) {


Minor typo here I believe: request is missing the t both here and in the RNReactNativeGutenbergBridge?

Also, just noting that I think you could shorten these a bit to only be:

export const getOtherMediaOptions = RNReactNativeGutenbergBridge.getOtherMediaOptions; export const requestOtherMediaPickFrom = RNReactNativeGutenbergBridge.requesOtherMediaPickFrom;

I personally prefer avoiding explicitly passing the arguments, but I don't think it's wrong the way you have it. In other words I'm not pushing for this change if you prefer it as-is.

Hey @mchowning, thanks for the comment.

Minor typo here I believe: request is missing the t both here and in the RNReactNativeGutenbergBridge?

Fixed.

I personally prefer avoiding explicitly passing the arguments, but I don't think it's wrong the way you have it. In other words, I'm not pushing for this change if you prefer it as-is.

I just followed the current style of code in that file to avoid big differences between methods.

koke · 2019-10-24T08:46:40Z

react-native-gutenberg-bridge/index.js

@@ -89,4 +89,12 @@ export function requestImageUploadCancel( mediaId ) {
 	return RNReactNativeGutenbergBridge.requestImageUploadCancel( mediaId );
 }

+export function getOtherMediaOptions( filter, callback ) {


I don't want to block on this to get this feature out, but why are these "other"? Is there something intrinsically different in requesting an image from the device library or pexels?

I understand we might need to pass the available options through the bridge because we want to show them in the existing bottom sheet (although I think a native one is in the works), but other than that, I think the apps should define which options are available more generally.

That's a good question @koke.

Main idea is to provide 3rd party media sources from native applications so that in the future we can just change native apps WPAndroid or WPiOS and everything should work (without changing JS side or bridge).

I agree that it would be easier to control which options are available from one place (JS) and not from two places (WPAndroid and WPiOS), but we can see in the future if this current solution has some big downsides and if's true, we can change approach.

maybe also @etoledom can share his opinion on this one.

I agree that it would be easier to control which options are available from one place (JS) and not from two places (WPAndroid and WPiOS)

I actually think it makes more sense to define those in the apps, and avoid gutenberg making any assumptions about the available options.

As an example, the demo app still offers device library, camera, and wp media library, but only the device library works as expected. The camera option does nothing in the iOS simulator (it has no camera), and the media library option inserts a sample image/video.

It would be better if gutenberg just asked about the available options to present them in the picker, and then request the selected one. In the demo app, we could have some options like Choose from device, Add sample image, and Add sample video, instead of pretending to support options that won't work.

I'm not sure how much effort this would be, but if we are already requesting the "others" through the bridge, it doesn't feel like it would be a hard thing to request all the options.

I missed the point at first but now it's clear.
Yeah, we can do that, it does make sense, then we can easily mock resources for the demo apps also :)

I actually think it makes more sense to define those in the apps, and avoid gutenberg making any assumptions about the available options.

Actually, the only option on gutenberg web (stand alone) is to add an image from a link. The WordPress Media Picker is some kind of "add on" iirc.

I'd suggest to implement the bridge with this new options as it is now, and on a second step, migrate the "older" options to be handled on this new way.

Hopefully we keep the testing steps and possible issues lower on this PR this way.

Sounds like a good plan @etoledom
Here is the ticket: #1492

Thanks, @koke for the points.

…ilable-from-image-block

iamthomasbishop · 2019-10-24T15:34:55Z

@marecar3 I had a chance to review this, and overall it feels great. The only thing that I was going to suggest is that we focus the search input right away when launching into the FPL/Giphy search.

marecar3 · 2019-10-24T15:59:12Z

Hey @iamthomasbishop, it seems that Aztec is working the same, so maybe we can raise a separate ticket, for a fix which will be presented in both Aztec and Gutenberg?

marecar3 · 2019-10-24T15:59:49Z

@etoledom @hypest Giphy is disabled so we only have Pexels support.

…port)

koke · 2019-10-24T16:19:13Z

Tested on media-text and it's working nicely 👌

iamthomasbishop · 2019-10-24T16:42:04Z

it seems that Aztec is working the same, so maybe we can raise a separate ticket, for a fix which will be presented in both Aztec and Gutenberg?

Odd, I could've sworn we had this same discussion when building for Aztec and made it select the input first 🤔 I'll create separate issues on WPAndroid and WPiOS today.

…ilable-from-image-block # Conflicts: # gutenberg

Tug · 2019-10-28T12:13:44Z

Are you ok with strings which were reused from WPAndroid or you think we should put some new strings for gb-mobile?

Assuming you mean the text label strings used on the bottom sheet, I think that's fine.

@iamthomasbishop I had a comment about that related to i18n wordpress-mobile/WordPress-Android#10628 (comment)

iamthomasbishop · 2019-10-28T14:22:01Z

@Tug good catch! Added a comment w/ thoughts.

…ilable-from-image-block # Conflicts: # gutenberg

cameronvoell

Looks good to me, just left a comment in gutenberg-bridge build.gradle, think theres a gif library we don't need without giphy, unless I'm mistaken. Otherwise 👍

cameronvoell · 2019-10-29T17:30:41Z

react-native-gutenberg-bridge/android/build.gradle

@@ -117,6 +117,9 @@ dependencies {
    implementation "org.webkit:android-jsc:r241213"
    implementation project(':react-native-aztec')

+    // For animated GIF support
+    implementation 'com.facebook.fresco:animated-gif:2.0.0'


Perhaps this should be removed with Giphy code?

Good question @cameronvoell!
I was thinking to remove it but then I realize that we might need it as the user could already have gif in his Wordpress Library and it would be cool that he can see animated gif while editing the Post.

Just tested this, very cool!

cameronvoell · 2019-10-29T17:44:08Z

react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.swift

+
+    @objc
+    func requestOtherMediaPickFrom(_ source: String, allowMultipleSelection: Bool, callback: @escaping RCTResponseSenderBlock) {
+        //TODO implement me


Just curious when these will be implemented, perhaps during the iOS implementation for Pexel?

Great questions @cameronvoell !
Yes, that's correct. The idea is to merge JS and Android part and then @etoledom will work on iOS side of it.

…rg-mobile into issue/AztecAndroid-IndexOutOfBoundsException-setSpan * 'develop' of https://github.com/wordpress-mobile/gutenberg-mobile: (50 commits) Update issue templates Update gutenberg ref Update gutenberg ref Update issue templates Update GB ref to point to official 1.16.0 tag Update RELEASE-NOTES.txt Update JS bundles Update GB ref Update app bundles Update GB reference. [Aztec iOS]: `shouldInteractWith` will return always true to avoid crashes [Aztec iOS] Cleanup white spaces. Update bundles. Update version to 1.6.0 Updated bundles Force translation update when generating new bundles Update gutenberg ref 720-Add support for giphy and pexel images (#1469) Update bundles Update gutenberg ref ... # Conflicts: # gutenberg

marecar3 added 5 commits October 18, 2019 18:29

Added support to open giphy and pexel picker

cdcd68f

Added support to present giphy and pexel images

Update release notes

fa362ec

Fixed typo in release notes

d703d87

Added missing method implementations

6130d0c

Added empty method implementation for giphy and pexels on iOS

f326576

marecar3 added the [OS] Android label Oct 18, 2019

marecar3 added this to the 1.6 milestone Oct 18, 2019

marecar3 changed the title ~~Add support for giphy and pexel images~~ 720/Add support for giphy and pexel images Oct 18, 2019

marecar3 changed the title ~~720/Add support for giphy and pexel images~~ 720-Add support for giphy and pexel images Oct 18, 2019

marecar3 mentioned this pull request Oct 18, 2019

Add support for pexel images wordpress-mobile/WordPress-Android#10628

Merged

2 tasks

marecar3 requested review from cameronvoell, etoledom, hypest and mchowning October 18, 2019 17:37

marecar3 mentioned this pull request Oct 18, 2019

[RNMobile] Added support for giphy and pexels images WordPress/gutenberg#18026

Merged

5 tasks

marecar3 added 2 commits October 18, 2019 19:46

Merge branch 'develop' into issue/720_pexels-and-giphy-search-not-ava…

ae19042

…ilable-from-image-block # Conflicts: # gutenberg

Fixed failed build

ab2b2fe

marecar3 added 4 commits October 21, 2019 13:22

Merge branch 'develop' into issue/720_pexels-and-giphy-search-not-ava…

52d2491

…ilable-from-image-block # Conflicts: # gutenberg

Update gb reference

79c3ee8

Update gb reference

c3516e1

Removed unused import

81e9d9f

etoledom reviewed Oct 21, 2019

View reviewed changes

marecar3 added 2 commits October 23, 2019 13:50

Use MediaUploadCallback instead of MediaSelectedCallback

bc0f09f

Update gb reference

8cbce18

marecar3 mentioned this pull request Oct 23, 2019

Set custom icons for Other media resources in Bottom sheet picker #1487

Open

mchowning reviewed Oct 23, 2019

View reviewed changes

koke reviewed Oct 24, 2019

View reviewed changes

marecar3 added 3 commits October 24, 2019 12:16

Merge branch 'develop' into issue/720_pexels-and-giphy-search-not-ava…

262494f

…ilable-from-image-block

Fix typo in requestOtherMediaPickFrom

86116ce

Update gb reference

7551068

marecar3 mentioned this pull request Oct 24, 2019

Provide media resource options from native apps #1492

Open

Update gb reference

c7a5c3d

Edit release notes to match current implementation (exclude giphy sup…

41e99a9

…port)

etoledom self-requested a review October 24, 2019 19:39

marecar3 added 3 commits October 25, 2019 11:41

Update gb reference

706d976

Fix iOS tests

ac6d631

Merge branch 'develop' into issue/720_pexels-and-giphy-search-not-ava…

e19a386

…ilable-from-image-block # Conflicts: # gutenberg

Update gb reference

b7c27e5

marecar3 added 3 commits October 29, 2019 16:04

Merge branch 'develop' into issue/720_pexels-and-giphy-search-not-ava…

e4ff3b2

…ilable-from-image-block # Conflicts: # gutenberg

Update gb reference

8395eac

Update gb reference

3b03798

cameronvoell approved these changes Oct 29, 2019

View reviewed changes

marecar3 added 2 commits October 29, 2019 19:36

Update gutenberg reference

c4feb40

Update gb reference

6666209

marecar3 merged commit 7411092 into develop Oct 29, 2019

marecar3 deleted the issue/720_pexels-and-giphy-search-not-available-from-image-block branch October 29, 2019 19:32

designsimply mentioned this pull request Nov 14, 2019

Post Settings: featured image option "Choose from Giphy" is not working #1581

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

720-Add support for giphy and pexel images #1469

720-Add support for giphy and pexel images #1469

marecar3 commented Oct 18, 2019 •

edited

Loading

iamthomasbishop commented Oct 18, 2019

marecar3 commented Oct 21, 2019

etoledom Oct 21, 2019

marecar3 Oct 22, 2019

etoledom Oct 22, 2019

marecar3 Oct 23, 2019

iamthomasbishop commented Oct 21, 2019

marecar3 commented Oct 23, 2019 •

edited

Loading

iamthomasbishop commented Oct 23, 2019

mchowning Oct 23, 2019 •

edited

Loading

marecar3 Oct 24, 2019

koke Oct 24, 2019

marecar3 Oct 24, 2019 •

edited

Loading

koke Oct 24, 2019

marecar3 Oct 24, 2019

etoledom Oct 24, 2019

etoledom Oct 24, 2019

marecar3 Oct 24, 2019

iamthomasbishop commented Oct 24, 2019

marecar3 commented Oct 24, 2019

marecar3 commented Oct 24, 2019 •

edited

Loading

koke commented Oct 24, 2019

iamthomasbishop commented Oct 24, 2019

Tug commented Oct 28, 2019

iamthomasbishop commented Oct 28, 2019

cameronvoell left a comment

cameronvoell Oct 29, 2019

marecar3 Oct 29, 2019

cameronvoell Oct 29, 2019

cameronvoell Oct 29, 2019

marecar3 Oct 29, 2019

		public static final String MEDIA_SOURCE_STOCK_MEDIA = "MEDIA_SOURCE_STOCK_MEDIA";
		public static final String MEDIA_SOURCE_GIPHY_MEDIA = "MEDIA_SOURCE_GIPHY_MEDIA";

720-Add support for giphy and pexel images #1469

720-Add support for giphy and pexel images #1469

Conversation

marecar3 commented Oct 18, 2019 • edited Loading

iamthomasbishop commented Oct 18, 2019

marecar3 commented Oct 21, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

iamthomasbishop commented Oct 21, 2019

marecar3 commented Oct 23, 2019 • edited Loading

iamthomasbishop commented Oct 23, 2019

mchowning Oct 23, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marecar3 Oct 24, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

iamthomasbishop commented Oct 24, 2019

marecar3 commented Oct 24, 2019

marecar3 commented Oct 24, 2019 • edited Loading

koke commented Oct 24, 2019

iamthomasbishop commented Oct 24, 2019

Tug commented Oct 28, 2019

iamthomasbishop commented Oct 28, 2019

cameronvoell left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marecar3 commented Oct 18, 2019 •

edited

Loading

marecar3 commented Oct 23, 2019 •

edited

Loading

mchowning Oct 23, 2019 •

edited

Loading

marecar3 Oct 24, 2019 •

edited

Loading

marecar3 commented Oct 24, 2019 •

edited

Loading