Merge pull request #10 from dotmind/enhance/preview-quality-prop

[ENHANCE] Preview Quality Prop
Thanasis1101 · Apr 11, 2021 · e6dd12a · e6dd12a
2 parents fbc76cb + c4cfec5
commit e6dd12a
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 12 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
 *.tgz
 android/local.properties
-node_modules/
-.DS_Store
+node_modules
+.DS_Store
diff --git a/README.md b/README.md
@@ -217,7 +217,8 @@ Usage examples: [JS code](Examples/js-example/App.js), [TS code](Examples/ts-exa
 | `showStickersButtonSelectedTextStyle` | No | Additional style for the text of the button that shows stickers when the button is selected and `gifType` is `"all"`. | |
 | `showStickersButtonStyle` | No | Additional style for the button that shows stickers when `gifType` is `"all"`. | |
 | `showStickersButtonSelectedStyle` | No | Additional style for the button that shows stickers when it is selected and `gifType` is `"all"`. | |
-
+| `previewGifQuality` | No | Additional parameter to choose GIF preview source media type. | |
+| `selectedGifQuality` | No | Additional parameter to choose GIF selected source media type. | |
 
 ## Attribution
 If you wish to **publish your app** and go from development to production you need to follow some steps for every API that you use.

diff --git a/index.d.ts b/index.d.ts
@@ -22,6 +22,8 @@ declare module 'react-native-gif-search' {
 
   type Rating = "y" | "g" | "pg" | "pg-13" | "r";
 
+  type MediaFormats = "low" | "medium" | "high";
+
   interface GiphyImages {
     fixed_height: BaseImage & {
       size: string;
@@ -179,6 +181,8 @@ declare module 'react-native-gif-search' {
     showStickersButtonText?: string;
     placeholderTextColor?: string;
     loadingSpinnerColor?: string;
+    previewGifQuality?: MediaFormats;
+    selectedGifQuality?: MediaFormats;
 
     style?: ViewStyle;
     textInputStyle?: TextStyle;

diff --git a/src/GifSearch.js b/src/GifSearch.js
@@ -35,6 +35,18 @@ const endpoints = {
   SEARCH: "search",
 }
 
+const giphyFormats = {
+    low: "preview_gif",
+    medium: "fixed_width",
+    high: "downsized_large"
+}
+
+const tenorFormats = {
+    low: "nanogif",
+    medium: "tinygif",
+    high: "mediumgif"
+}
+
 class GifSearch extends PureComponent {
 
     constructor(props) {
@@ -123,6 +135,22 @@ class GifSearch extends PureComponent {
       if (currentGifType == gif_types.STICKER) {
           this.provider = providers.GIPHY
       }
+
+      this.previewGifQuality = "low";
+      if (props.previewGifQuality != null) {
+          this.previewGifQuality = props.previewGifQuality;
+      }
+
+      this.selectedGifQuality = "medium";
+      if (props.selectedGifQuality != null) {
+          this.selectedGifQuality = props.selectedGifQuality;
+      }
+
+      this.tenorGifPreview = tenorFormats[this.previewGifQuality];
+      this.tenorGifSelected = tenorFormats[this.selectedGifQuality];
+
+      this.giphyGifPreview = giphyFormats[this.previewGifQuality];
+      this.giphyGifSelected = giphyFormats[this.selectedGifQuality];
 
       this.state = {
         gifs: [],
@@ -223,7 +251,6 @@ class GifSearch extends PureComponent {
               "key": this.tenorApiKey,
               "limit": limit,
               "locale": "el_GR",
-              "media_filter": "basic",
               "contentfilter": "medium",
               ...this.state.next != 0 && {"pos": this.state.next},
               ...this.props.tenorApiProps,
@@ -445,16 +472,16 @@ class GifSearch extends PureComponent {
               var gif_better_quality = null;
 
               if (item.provider == providers.TENOR) {
-                gif_preview = item.media[0].nanogif.url
-                gif_better_quality = item.media[0].tinygif.url
-                if (parseInt(item.media[0].tinygif.dims[1])) {
-                    aspect_ratio = parseInt(item.media[0].tinygif.dims[0])/parseInt(item.media[0].tinygif.dims[1])
+                gif_preview = item.media[0][this.tenorGifPreview].url
+                gif_better_quality = item.media[0][this.tenorGifSelected].url
+                if (parseInt(item.media[0][this.tenorGifSelected].dims[1])) {
+                    aspect_ratio = parseInt(item.media[0][this.tenorGifSelected].dims[0])/parseInt(item.media[0][this.tenorGifSelected].dims[1])
                 }
               } else {
-                gif_preview = item.images.preview_gif.url
-                gif_better_quality = item.images.downsized.url
-                if (parseInt(item.images.preview_gif.height)) {
-                    aspect_ratio = parseInt(item.images.preview_gif.width)/parseInt(item.images.preview_gif.height)
+                gif_preview = item.images[this.giphyGifPreview].url
+                gif_better_quality = item.images[this.giphyGifSelected].url
+                if (parseInt(item.images[this.giphyGifSelected].height)) {
+                    aspect_ratio = parseInt(item.images[this.giphyGifSelected].width)/parseInt(item.images[this.giphyGifSelected].height)
                 }
               }