Skip to content

Commit

Permalink
Merge pull request #28 from Giphy/next
Browse files Browse the repository at this point in the history
v1.1.0
  • Loading branch information
pshoniuk authored Sep 9, 2021
2 parents 53088e3 + 895faaa commit e38cf8c
Show file tree
Hide file tree
Showing 51 changed files with 1,588 additions and 265 deletions.
9 changes: 7 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<p align="center">
<img width="750" height="150" src="docs/assets/sdk_logo.gif">
<img width="750" height="150" src="https://github.com/Giphy/giphy-react-native-sdk/blob/main/docs/assets/sdk_logo.gif">
</p>

<img align="right" width="300" height="483" src="docs/assets/example_app.gif">
<img align="right" width="300" height="483" src="https://github.com/Giphy/giphy-react-native-sdk/blob/main/docs/assets/example_app.gif">

# GIPHY SDK for React Native

Expand Down Expand Up @@ -30,5 +30,10 @@ Facebook, Slack, Instagram, and more – with just a few lines of code.
- [GiphyDialog](docs/api.md#giphydialog)
- [GiphyMediaView](docs/api.md#giphymediaview)
- [GiphyVideoView](docs/api.md#giphyvideoview)
- [GiphyVideoManager](docs/api.md#giphyvideomanager)
- [GiphyGridView](docs/api.md#giphygridview)
- [GiphyContent](docs/api.md#giphycontent)

### Guides

- [Using clips with React-Native-Video](docs/using-clips-with-react-native-video.md)
2 changes: 1 addition & 1 deletion android/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,6 @@ def kotlin_version = getExtOrDefault('kotlinVersion')
dependencies {
// noinspection GradleDynamicVersion
api 'com.facebook.react:react-native:+'
implementation 'com.giphy.sdk:ui:2.1.6'
implementation 'com.giphy.sdk:ui:2.1.7'
implementation "org.jetbrains.kotlin:kotlin-reflect:1.5.0"
}
111 changes: 44 additions & 67 deletions android/src/main/java/com/giphyreactnativesdk/GiphyGridViewManager.kt
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,12 @@ import com.facebook.react.uimanager.events.RCTEventEmitter
import com.giphy.sdk.core.models.Media
import com.giphy.sdk.core.models.enums.MediaType
import com.giphy.sdk.core.models.enums.RenditionType
import com.giphy.sdk.ui.GPHRequestType
import com.giphy.sdk.ui.pagination.GPHContent
import com.giphy.sdk.ui.utils.aspectRatio
import com.giphy.sdk.ui.views.GPHGridCallback
import com.giphy.sdk.ui.views.GPHSearchGridCallback
import com.giphy.sdk.ui.views.GifView
import com.giphy.sdk.ui.views.GiphyGridView


class GiphyGridViewManager(): SimpleViewManager<GiphyGridView>() {
class GiphyGridViewManager() : SimpleViewManager<GiphyRNGridView>() {
val REACT_CLASS = "GiphyReactNativeGridView"
private var _renditionType = RenditionType.downsized
private var _clipsPreviewRenditionType = RenditionType.downsized
Expand All @@ -47,42 +43,42 @@ class GiphyGridViewManager(): SimpleViewManager<GiphyGridView>() {
.build()
}

fun emitEvent(context: ReactContext, view: GiphyGridView, name: String, params: WritableMap) {
fun emitEvent(context: ReactContext, view: GiphyRNGridView, name: String, params: WritableMap) {
context.getJSModule(RCTEventEmitter::class.java).receiveEvent(
view.id,
name,
params
)
}

private fun getGridCallback(view: GiphyGridView, reactContext: ThemedReactContext): GPHGridCallback? {
return object: GPHGridCallback {
private fun getGridCallback(
view: GiphyRNGridView,
reactContext: ThemedReactContext
): GPHGridCallback? {
return object : GPHGridCallback {
override fun contentDidUpdate(resultCount: Int) {
val params = Arguments.createMap()
params.putInt("resultCount", resultCount)
emitEvent(reactContext, view, "onContentUpdate", params)
}

override fun didSelectMedia(media: Media) {
val isVideo = media.type == MediaType.video
val mediaMap = Arguments.createMap()
mediaMap.putString("id", media.id)
mediaMap.putString(
"url", getGifURL(media, if (isVideo) _clipsPreviewRenditionType else _renditionType)
)
mediaMap.putDouble("aspectRatio", media.aspectRatio.toDouble())
mediaMap.putBoolean("isVideo", isVideo)

val params = Arguments.createMap()
val isVideo = media.type == MediaType.video
val mediaRenditionType = if (isVideo) _clipsPreviewRenditionType else _renditionType
val mediaMap = mediaToRNMap(media, mediaRenditionType)
params.putMap("media", mediaMap)

emitEvent(reactContext, view, "onMediaSelect", params)
}
}
}

fun getSearchGridCallback(view: GiphyGridView, reactContext: ThemedReactContext): GPHSearchGridCallback? {
return object: GPHSearchGridCallback {
fun getSearchGridCallback(
view: GiphyRNGridView,
reactContext: ThemedReactContext
): GPHSearchGridCallback? {
return object : GPHSearchGridCallback {
override fun didTapUsername(username: String) {
TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
}
Expand All @@ -99,70 +95,51 @@ class GiphyGridViewManager(): SimpleViewManager<GiphyGridView>() {
}
}

@ReactProp(name="content")
fun setContent(view: GiphyGridView, value: ReadableMap) {
val content = GPHContent()
val query = value.getString("searchQuery")
val requestType = value.getString("requestType")
val mediaType = value.getString("mediaType")

if (query != null) {
content.searchQuery = query
}

if (requestType != null) {
content.requestType = GPHRequestType.values().firstOrNull {it.name == requestType}
?: GPHRequestType.search
}

if (mediaType != null){
content.mediaType = MediaType.values().firstOrNull {it.name == mediaType} ?: MediaType.gif
}
@ReactProp(name = "content")
fun setContent(view: GiphyRNGridView, value: ReadableMap?) {
view.setContent(value)
}

view.content = content
@ReactProp(name = "cellPadding")
fun setCellPadding(view: GiphyRNGridView, value: Int?) {
view.setCellPadding(value)
}

@ReactProp(name="cellPadding")
fun setCellPadding(view: GiphyGridView, value: Int?) {
if (value != null) {
view.cellPadding
}
@ReactProp(name = "fixedSizeCells")
fun setFixedSizeCells(view: GiphyRNGridView, value: Boolean?) {
view.setFixedSizeCells(value)
}

@ReactProp(name="fixedSizeCells")
fun setFixedSizeCells(view: GiphyGridView, value: Boolean){
view.fixedSizeCells = value
@ReactProp(name = "orientation")
fun setOrientation(view: GiphyRNGridView, value: String?) {
view.setOrientation(value)
}

@ReactProp(name="orientation")
fun setOrientation(view: GiphyGridView, value: String){
view.direction = when(value) {
"horizontal" -> GiphyGridView.HORIZONTAL
"vertical" -> GiphyGridView.VERTICAL
else -> GiphyGridView.VERTICAL
}
@ReactProp(name = "spanCount")
fun setSpanCount(view: GiphyRNGridView, value: Int?) {
view.setSpanCount(value)
}

@ReactProp(name="spanCount")
fun setSpanCount(view: GiphyGridView, value: Int) {
view.spanCount = value
@ReactProp(name = "renditionType")
fun setRenditionType(view: GiphyRNGridView, value: String?) {
view.setRenditionType(value)
}

@ReactProp(name="renditionType")
fun setRenditionType(view: GiphyGridView, value: String) {
_renditionType = renditionByName(value) ?: RenditionType.downsized
@ReactProp(name = "clipsPreviewRenditionType")
fun setClipsPreviewRenditionType(view: GiphyRNGridView, value: String?) {
view.setClipsPreviewRenditionType(value)
}

@ReactProp(name="clipsPreviewRenditionType")
fun setClipsPreviewRenditionType(view: GiphyGridView, value: String) {
_clipsPreviewRenditionType = renditionByName(value) ?: RenditionType.downsized
@ReactProp(name = "showCheckeredBackground")
fun setShowCheckeredBackground(view: GiphyRNGridView, value: Boolean?) {
view.setShowCheckeredBackground(value)
}

override fun createViewInstance(reactContext: ThemedReactContext): GiphyGridView {
val view = GiphyGridView(reactContext)
override fun createViewInstance(reactContext: ThemedReactContext): GiphyRNGridView {
val view = GiphyRNGridView(reactContext)

view.callback = getGridCallback(view, reactContext)
view.searchCallback = getSearchGridCallback(view, reactContext)
view.gridView.callback = getGridCallback(view, reactContext)
view.gridView.searchCallback = getSearchGridCallback(view, reactContext)

return view
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,66 +4,30 @@ import com.facebook.react.bridge.ReadableMap
import com.facebook.react.uimanager.SimpleViewManager
import com.facebook.react.uimanager.ThemedReactContext
import com.facebook.react.uimanager.annotations.ReactProp
import com.giphy.sdk.core.GPHCore
import com.giphy.sdk.core.models.Media
import com.giphy.sdk.core.models.enums.RenditionType
import com.giphy.sdk.ui.views.GPHMediaView
import timber.log.Timber


class GiphyMediaViewManager(): SimpleViewManager<GPHMediaView>() {
class GiphyMediaViewManager() : SimpleViewManager<GiphyRNMediaView>() {
val REACT_CLASS = "GiphyReactNativeMediaView"
val DEFAULT_RENDITION_TYPE = RenditionType.fixedWidth

private var media: Media? = null
private var renditionType = DEFAULT_RENDITION_TYPE
private var aspectRatio: Float? = null

companion object {
val TAG = GiphyMediaViewManager::class.java.simpleName
}

private fun _setMedia(view: GPHMediaView) {
if (media != null) {
view.setMedia(media, renditionType)
}
if (aspectRatio != null) {
view.aspectRatio = aspectRatio as Float
}

}

@ReactProp(name="media")
fun setMedia(gifView: GPHMediaView, rnMedia: ReadableMap){
val mediaId = rnMedia.getString("id")
aspectRatio = rnMedia.getDouble("aspectRatio").toFloat()

if (mediaId != null) {
GPHCore.gifById(mediaId) { result, e ->
media = result?.data
if (media != null) {
_setMedia(gifView)
}
e?.let {
Timber.d("Error while fetching GIF: %s", e.localizedMessage)
}
}
}
@ReactProp(name = "media")
fun setMedia(gifView: GiphyRNMediaView, rnMedia: ReadableMap?) {
gifView.setMedia(rnMedia)
}

@ReactProp(name="renditionType")
fun setRenditionType(gifView: GPHMediaView, renditionName: String) {
renditionType = RenditionType.values().firstOrNull {
it.name == snakeToCamel(renditionName)
} ?: DEFAULT_RENDITION_TYPE
_setMedia(gifView)
@ReactProp(name = "renditionType")
fun setRenditionType(gifView: GiphyRNMediaView, renditionName: String?) {
gifView.setRenditionType(renditionName)
}

override fun getName(): String {
return "GiphyReactNativeMediaView"
}

override fun createViewInstance(reactContext: ThemedReactContext): GPHMediaView {
return GPHMediaView(reactContext)
override fun createViewInstance(reactContext: ThemedReactContext): GiphyRNMediaView {
return GiphyRNMediaView(reactContext)
}
}
107 changes: 107 additions & 0 deletions android/src/main/java/com/giphyreactnativesdk/GiphyRNGridView.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
package com.giphyreactnativesdk

import android.content.Context
import android.util.AttributeSet
import android.widget.FrameLayout
import com.facebook.react.bridge.ReadableMap
import com.giphy.sdk.core.models.enums.MediaType
import com.giphy.sdk.core.models.enums.RenditionType
import com.giphy.sdk.ui.GPHRequestType
import com.giphy.sdk.ui.pagination.GPHContent
import com.giphy.sdk.ui.views.GiphyGridView

class GiphyRNGridView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {
companion object {
val DEFAULT_RENDITION_TYPE = RenditionType.fixedWidth
}

lateinit var gridView: GiphyGridView
private var renditionType = DEFAULT_RENDITION_TYPE
private var clipsPreviewRenditionType = DEFAULT_RENDITION_TYPE

init {
prepareLayout()
}

private fun prepareLayout() {
gridView = GiphyGridView(context)
addView(gridView)
}

override fun requestLayout() {
super.requestLayout()
post(measureAndLayout)
}

private val measureAndLayout = Runnable {
measure(
MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
)
layout(left, top, right, bottom)
}

fun setContent(value: ReadableMap?) {
val content = GPHContent()
val query = value?.getString("searchQuery")
val requestType = value?.getString("requestType")
val mediaType = value?.getString("mediaType")

if (query != null) {
content.searchQuery = query
}

if (requestType != null) {
content.requestType = GPHRequestType.values().firstOrNull { it.name == requestType }
?: GPHRequestType.search
}

if (mediaType != null) {
content.mediaType = MediaType.values().firstOrNull { it.name == mediaType } ?: MediaType.gif
}

gridView.content = content
}

fun setCellPadding(value: Int?) {
if (value != null) {
gridView.cellPadding = value
}
}

fun setFixedSizeCells(value: Boolean?) {
if (value != null) {
gridView.fixedSizeCells = value
}
}

fun setOrientation(value: String?) {
gridView.direction = when (value) {
"horizontal" -> GiphyGridView.HORIZONTAL
"vertical" -> GiphyGridView.VERTICAL
else -> GiphyGridView.VERTICAL
}
}

fun setSpanCount(value: Int?) {
if (value != null) {
gridView.spanCount = value
}
}

fun setRenditionType(value: String?) {
renditionType = renditionByName(value) ?: DEFAULT_RENDITION_TYPE
}

fun setClipsPreviewRenditionType(value: String?) {
clipsPreviewRenditionType = renditionByName(value) ?: DEFAULT_RENDITION_TYPE
}

fun setShowCheckeredBackground(value: Boolean?){
gridView.showCheckeredBackground = value ?: false
}
}
Loading

0 comments on commit e38cf8c

Please sign in to comment.