Add other GIF providers

src/components/giphy-toolbar-item.js

@@ -17,7 +17,10 @@ export default (
     >
       <div class="select-menu-header d-flex">
         <span class="select-menu-title flex-auto">Select a GIF</span>
-        <span class="ghg-powered-by-giphy" />
+        <select class="ghg-provider-selector">
+          <option value="tenor">Tenor</option>
+          <option value="giphy">Giphy</option>
+        </select>
       </div>
       <tab-list>
         <div class="select-menu-filters">

src/lib/providers/tenor.js

@@ -0,0 +1,64 @@
+export default class Tenor {
+  constructor(apiToken) {
+    if (!apiToken) {
+      throw new Error('[Tenor] API Token required')
+    }
+    this.apiToken = apiToken
+  }
+
+  async search(q, offset = 0) {
+    const params = new URLSearchParams({
+      q: q,
+      key: this.apiToken,
+      client_key: "my_test_app",
+      limit: 50,
+      pos: offset,
+    })
+    const response = await fetch(`https://tenor.googleapis.com/v2/search?${params.toString()}`)
+    const decodedResponse = await response.json()
+
+    return decodedResponse.results.map(Tenor.convertToGiphyObj)
+  }
+
+  async getTrending(offset = 0) {
+    const params = new URLSearchParams({
+      key: this.apiToken,
+      client_key: "my_test_app",
+      limit: 50,
+    })
+
+    if (offset > 0) {
+      params.pos = offset
+    }
+
+    const response = await fetch(`https://tenor.googleapis.com/v2/featured?${params.toString()}`)
+    const decodedResponse = await response.json()
+
+    return decodedResponse.results.map(Tenor.convertToGiphyObj)
+  }
+
+  static convertToGiphyObj(item) {
+    return {
+      images: {
+        original: {
+          size: item.media_formats.gif.size,
+          url: item.media_formats.gif.url,
+        },
+        downsized_medium: {
+          size: item.media_formats.mediumgif.size,
+          url: item.media_formats.mediumgif.url,
+        },
+        fixed_width: {
+          size: item.media_formats.tinygif.size,
+          url: item.media_formats.tinygif.url,
+          height: item.media_formats.tinygif.dims[1],
+          width: item.media_formats.tinygif.dims[0],
+        },
+        fixed_width_downsampled: {
+          size: item.media_formats.tinygif.size,
+          url: item.media_formats.tinygif.url,
+        },
+      }
+    }
+  }
+}

src/main.js

@@ -11,12 +11,18 @@ import select from 'select-dom'
 import observeEl from './lib/simplified-element-observer.js'
 import LoadingIndicator from './components/loading-indicator.js'
 import GiphyToolbarItem from './components/giphy-toolbar-item.js'
-import Giphy from './lib/giphy.js'
+import Giphy from './lib/providers/giphy.js'
+import Tenor from './lib/providers/tenor.js'
 
 import observe from './lib/selector-observer.js'
 
-// Create a new Giphy Client
-const giphyClient = new Giphy('Mpy5mv1k9JRY2rt7YBME2eFRGNs7EGvQ')
+const providers = {
+  tenor: new Tenor('AIzaSyDPNP-ivCtCACDvIV-M0i86TgKbZv5a-0Q'),
+  giphy: new Giphy('Mpy5mv1k9JRY2rt7YBME2eFRGNs7EGvQ')
+};
+
+let provider = providers.tenor;
+
 /**
  * Responds to the GIPHY modal being opened or closed.
  */
@@ -41,7 +47,7 @@ async function watchGiphyModals(element) {
     resultsContainer.append(<div>{LoadingIndicator}</div>)
 
     // Fetch the trending gifs
-    const gifs = await giphyClient.getTrending()
+    const gifs = await provider.getTrending()
 
     // Clear the loading indicator
     resultsContainer.innerHTML = ''
@@ -164,8 +170,8 @@ async function performSearch(event) {
 
   // If there is no search query, get the trending gifs
   const gifs = await (searchQuery === ''
-    ? giphyClient.getTrending()
-    : giphyClient.search(searchQuery))
+    ? provider.getTrending()
+    : provider.search(searchQuery))
 
   // Clear any previous results
   resultsContainer.innerHTML = ''
@@ -324,14 +330,21 @@ function handleInfiniteScroll(event) {
       resultsContainer.dataset.offset = offset
 
       const gifs = await (searchQuery
-        ? giphyClient.search(searchQuery, offset)
-        : giphyClient.getTrending(offset))
+        ? provider.search(searchQuery, offset)
+        : provider.getTrending(offset))
 
       appendResults(resultsContainer, gifs)
     }, 250)
   }
 }
 
+/**
+* Updates the GIF provider
+*/
+function changeProvider(e) {
+  provider = providers[e.target.value]
+}
+
 /**
  * Defines the event listeners
  */
@@ -354,6 +367,7 @@ function listen() {
     // What comes after <summary> is the dropdown
     watchGiphyModals(event.delegateTarget)
   })
+  delegate('.ghg-provider-selector', 'change', changeProvider)
 }
 
 // Ensure we only bind events to elements once

src/manifest.json

@@ -14,7 +14,8 @@
     "permissions": [
       "contextMenus",
       "activeTab",
-      "https://api.giphy.com/*"
+      "https://api.giphy.com/*",
+      "https://tenor.googleapis.com/*"
     ],
     "optional_permissions": [
       "http://*/*",