giphy / giphy-js Goto Github PK
View Code? Open in Web Editor NEWOfficial GIPHY packages
Home Page: https://giphy.com
License: MIT License
Official GIPHY packages
Home Page: https://giphy.com
License: MIT License
Hi,
I am using nextjs and I am importing @giphy/react-components
with SSR disabled; the component renders perfectly but giphyRandomID always return ""
I think it is the SSR but I don't know how to address this issue.
Any ideas?
Thank you
I'm trying to use the js-fetch-api to get a random GIF. On first execute, this works fine, but when trying to get another one, I just get the same result as the previous call. Almost like it's cached or something...
const data = await gf.random({
tag: "thumbs up",
type: "gifs",
rating: "pg"
});
What am I doing wrong here?
Issue reproduced here https://codesandbox.io/s/cold-bash-9o9sh
Node: v13.0.1
OS: Windows (Version 10.0.18363.778)
Package: @giphy\js-fetch-api (Version: 1.5.9)
npm i @giphy\js-fetch-api
const { GiphyFetch } = require("@giphy/js-fetch-api");
const giphy = new GiphyFetch("api key");
//...
const { data } = giphy.random();
console.log(data);
(node:39764) UnhandledPromiseRejectionWarning: Error: fetch is not defined
at new FetchError (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\fetch-error.js:21:28)
at Object.<anonymous> (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\request.js:90:38)
at step (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\request.js:33:23)
at Object.next (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\request.js:14:53)
at D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\request.js:8:71
at new Promise (<anonymous>)
at __awaiter (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\request.js:4:12)
at makeRequest (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\request.js:52:48)
at Object.request [as default] (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\request.js:101:27)
at GiphyFetch.random (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\api.js:104:33)
(node:39764) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:39764) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Breaking Changes:
https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
npm install react-dom react
npm install --save-dev @types/react-dom @types/react
incompatible with v18
GIFs in the grid are not keyboard accessible using tab since there is no tabindex
set for them. While setting tabindex=0
using javascript fixes the issue, it would be nice if this was already present in the DOM element of the GIF's <div>
tag to save the unnecessary JS query.
I have a website that I have only used JavaScript with, but I tried using TypeScript as per the example on CodeSandbox. The problem I am having is that the browsers are not compiling the code correctly. Some of the errors I have encountered are:
"chat.tsβ was blocked because of a disallowed MIME type (βvideo/mp2tβ)" //chat.ts is basically the same code as index.ts in the CodeSandbox example
After installing TypeScript through npm and creating the js files I get this error:
"ReferenceError: exports is not defined" in chat.js (source of error: Object.defineProperty(exports, "__esModule", { value: true });
) This code was generated by running tsconfig.json in Visual Studio Code
I know how to program with TypeScript, but the problem is that I don't know how to compile in the browser. I've tried researching this but had no luck. What am I missing?
I have heard that API keys should not be passed to the client as they are then available to all visitors of the website. I am not sure how to avoid this because I need to instantiate the giphyFetch on the client side?
TL;DR - your linked version of dompurify has a XSS vulnerability, updating to >=2.07 should fix it.
Got this report when I installed your package for a personal project:
=== npm audit security report ===
Critical Cross-Site Scripting
Package dompurify
Patched in >=2.0.3
Dependency of @giphy/js-components
Path @giphy/js-components > @giphy/js-analytics > dompurify
More info https://npmjs.com/advisories/1205
Critical Cross-Site Scripting
Package dompurify
Patched in >=2.0.7
Dependency of @giphy/js-components
Path @giphy/js-components > @giphy/js-analytics > dompurify
More info https://npmjs.com/advisories/1223
I'm working on a giphy integration for my app, and when I try to render, I get the invalid hook call error:
`Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
I have react
and react-dom
version 16.13.1. I know that the giphy components are using react 16.4 and I am wondering if there may be an issue with hooks not being supported by the giphy components? I tried it with a class component and got the same issue. The docs say: "Mismatching Versions of React and React DOM
You might be using a version of react-dom (< 16.8.0) or react-native (< 0.59) that doesnβt yet support Hooks."
My code:
`import React from 'react';
import PropTypes from 'prop-types';
import { GiphyFetch } from '@giphy/js-fetch-api';
import { Grid } from '@giphy/react-components';
const Giphy = () => {
const giphyFetch = new GiphyFetch('myAPIKey');
const fetchGifs = (offset) => giphyFetch.trending({ offset, limit: 10 });
return (
<React.Fragment>
<h3>Grid Example</h3>
<Grid fetchGifs={fetchGifs} width={500} columns={3} />
</React.Fragment>
);
};`
Hello, I got a warning when bundling my code with rollupjs (code still worked)
Circular dependencies
node_modules/@giphy/js-fetch-api/dist/index.js
-> node_modules/@giphy/js-fetch-api/dist/api.js
-> node_modules/@giphy/js-fetch-api/dist/request.js
-> node_modules/@giphy/js-fetch-api/dist/index.js
I see in the code, we can move this line
If it's ok I can make a PR.
Thanks!
There are three URLs for analytics - at what points do these need to be called? Is loaded called when the search results load or when the result of clicking on the gif is loaded? When is the click URL called vs the sent URL?
Thanks
Importing Β΄import { renderGif } from '@giphy/js-components';or
import { GiphyFetch } from '@giphy/js-fetch-api';` in Angular results in a warning:
Warning: /....../giphy/giphy.component.ts depends on '@giphy/js-components'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Would be nice if both packages are bundled properly. Personally I use rollup for that.
The JavaScript AbortController
allows the cancellation of an in-flight fetch request. The current @giphy/js-fetch-api
doesn't expose an option to pass an AbortController .abort()
function or a signal to fetch itself.
If this was integrated, SDK users would be able to abort in-flight requests (such as if the user starts a search, pauses, and then continues typing)
if you search for generic term like "hello world" the paginator (https://github.com/Giphy/giphy-js/blob/master/packages/fetch-api/src/paginator.ts) will issue fetch requests until all ~10,000 gifs are received.
There should be 1) a reasonable way to limit the overall number of results or 2) a way to tell the Carousel to call the paginator lazily as users scroll through it.
Hi, not sure if I'm doing an import wrong or something, but I'm getting this error in my build-process:
[ warn ] ./node_modules/@giphy/js-brand/dist/index.js
Critical dependency: the request of a dependency is an expression
ICategory gets exported, along with the Result types, but I'd like to be able to reference IGif directly. Thanks!
https://github.com/Giphy/giphy-js/blob/master/packages/fetch-api/src/result-types.ts
I'm trying to install | npm install @giphy/react-components
but getting this error..
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.10.2" from @giphy/[email protected]
npm ERR! node_modules/@giphy/react-components
npm ERR! @giphy/react-components@"^3.0.7" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
I am trying to replicate the search and masonry grid from the official documentation using their Codesandbox example.
However, when I am trying to use it, the code is not returning any gifs back.
I have verified that the JS fetch is indeed returning back gifs, it seems that the grid is not calling the fetchGifs function.
I am hitting the same issue with Carousel component as well.
Codesandbox link for my implementation - https://codesandbox.io/s/cocky-waterfall-ny9rzk Component i was trying to use - Search and Grid from https://github.com/Giphy/giphy-js/tree/master/packages/react-components
The grid and carousel should return gifs
https://codesandbox.io/s/cocky-waterfall-ny9rzk
No response
MacOS, Chrome
5.9.2
4.6.4
No response
giphy-js makes analytics pingbacks and loads fonts from a remote server, and these behaviours are not configurable.
These behaviours should be configurable (and ideally should be opt-in).
Steps:
No response
All
All
All
The lack of configurability of this functionality forces projects which care about their users privacy to apply patches, e.g. https://github.com/jitsi/jitsi-meet/pull/11457/files
Hello,
I want to post a tweet with a giphy, tweet is scheduled and tweet post api v1 is forcing us to upload the gif.
after choosing the gif
, I have tried to wget $gif.url
but I get a web page. How can I use that component to post a Giphy on twitter using the twitter API in delayed (scheduled) ?
Thanks!
The type definitions type the width and height as number
giphy-js/packages/types/src/gif.ts
Lines 5 to 8 in 180b2cb
string
s for the width and height.
{
"data":
{
"type": "gif",
"id": "11ZSwQNWba4YF2",
"url": "https://giphy.com/gifs/loop-work-programmer-11ZSwQNWba4YF2",
"slug": "loop-work-programmer-11ZSwQNWba4YF2",
"bitly_gif_url": "https://gph.is/2jt9RvW",
"bitly_url": "https://gph.is/2jt9RvW",
"embed_url": "https://giphy.com/embed/11ZSwQNWba4YF2",
"username": "",
"source": "https://www.reddit.com/r/perfectloops/comments/5qxdb2/the_work_of_a_programmer_l/",
"title": "bug programmer GIF",
"rating": "g",
"content_url": "",
"source_tld": "www.reddit.com",
"source_post_url": "https://www.reddit.com/r/perfectloops/comments/5qxdb2/the_work_of_a_programmer_l/",
"is_sticker": 0,
"import_datetime": "2017-01-30 00:38:22",
"trending_datetime": "0000-00-00 00:00:00",
"images":
{
"downsized_large":
{
"height": "480",
"size": "360614",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy.gif",
"width": "247"
},
"fixed_height_small_still":
{
"height": "100",
"size": "2377",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100_s.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100_s.gif",
"width": "52"
},
"original":
{
"frames": "139",
"hash": "4dd68be20d6aaad69a6efe697b4ec95e",
"height": "480",
"mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy.mp4",
"mp4_size": "86995",
"size": "360614",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy.gif",
"webp": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy.webp",
"webp_size": "183752",
"width": "247"
},
"fixed_height_downsampled":
{
"height": "200",
"size": "17281",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200_d.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200_d.gif",
"webp": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200_d.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200_d.webp",
"webp_size": "12966",
"width": "103"
},
"downsized_still":
{
"height": "480",
"size": "360614",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy_s.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy_s.gif",
"width": "247"
},
"fixed_height_still":
{
"height": "200",
"size": "5175",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200_s.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200_s.gif",
"width": "103"
},
"downsized_medium":
{
"height": "480",
"size": "360614",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy.gif",
"width": "247"
},
"downsized":
{
"height": "480",
"size": "360614",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy.gif",
"width": "247"
},
"preview_webp":
{
"height": "480",
"size": "8468",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy-preview.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy-preview.webp",
"width": "247"
},
"original_mp4":
{
"height": "932",
"mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy.mp4",
"mp4_size": "86995",
"width": "480"
},
"fixed_height_small":
{
"height": "100",
"mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100.mp4",
"mp4_size": "10186",
"size": "50463",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100.gif",
"webp": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100.webp",
"webp_size": "40646",
"width": "52"
},
"fixed_height":
{
"height": "200",
"mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200.mp4",
"mp4_size": "18897",
"size": "128398",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200.gif",
"webp": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200.webp",
"webp_size": "88210",
"width": "103"
},
"downsized_small":
{
"height": "480",
"mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy-downsized-small.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy-downsized-small.mp4",
"mp4_size": "42230",
"width": "246"
},
"preview":
{
"height": "480",
"mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy-preview.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy-preview.mp4",
"mp4_size": "42230",
"width": "246"
},
"fixed_width_downsampled":
{
"height": "389",
"size": "52675",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200w_d.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200w_d.gif",
"webp": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200w_d.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200w_d.webp",
"webp_size": "26166",
"width": "200"
},
"fixed_width_small_still":
{
"height": "195",
"size": "5287",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100w_s.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100w_s.gif",
"width": "100"
},
"fixed_width_small":
{
"height": "195",
"mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100w.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100w.mp4",
"mp4_size": "17291",
"size": "129812",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100w.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100w.gif",
"webp": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100w.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100w.webp",
"webp_size": "86288",
"width": "100"
},
"original_still":
{
"height": "480",
"size": "17092",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy_s.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy_s.gif",
"width": "247"
},
"fixed_width_still":
{
"height": "389",
"size": "14972",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200w_s.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200w_s.gif",
"width": "200"
},
"looping":
{
"mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy-loop.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy-loop.mp4",
"mp4_size": "51732"
},
"fixed_width":
{
"height": "389",
"mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200w.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200w.mp4",
"mp4_size": "32513",
"size": "332239",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200w.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200w.gif",
"webp": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200w.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200w.webp",
"webp_size": "188114",
"width": "200"
},
"preview_gif":
{
"height": "480",
"size": "14800",
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy-preview.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy-preview.gif",
"width": "247"
},
"480w_still":
{
"url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/480w_s.jpg?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=480w_s.jpg",
"width": "480",
"height": "933"
}
}
},
"meta":
{
"status": 200,
"msg": "OK",
"response_id": "23d6e9db26e65b7b246eea266c0aa51b61b2e691"
}
}
The giphyRandomId variable is undefined as needed for the verification process:
https://developers.giphy.com/docs/sdk#verification
Using Angular 9.1.0
When a Gif component is focused and the user presses a key nothing happens
When a Gif is focused and the user presses a key there should be a callback like onGifClick.
This would be good for accessibility. Instead of having to click a Gif the user could just press enter and trigger the same behavior
No response
All
5.4.0
No response
No response
Hi all!
I have a site where user posts text
and giphy gifs
, and I been saving those posts together with the giphy id
At the moment, in order to show them I'm creating this url:
const source = `https://media2.giphy.com/media/${giphyId}/giphy.gif`
I wonder how can I start using webp
or mp4
formats instead.
Should I just change that url to end with ${giphyId}/giphy.webp
? in that case, all the older years posted gifs should keep working with this new url?
Thanks
Please find below an extract of my terminal while running npm start
in a create-react-app
project.
Compiled with warnings.
./node_modules/@giphy/js-brand/dist/index.js
Critical dependency: the request of a dependency is an expression
This is a problem, as project builds will fail because of this.
It does not look like a big issue to solve. But it would be really helpful. Thanks.
When I use the gf.gifs(string[])
API to fetch a list of gifs by IDs, it usually responds with all the gifs that I've requested but not always.
I've defined a simple function in my service layer that looks like this:
export const getGifsByIds = async (gifIds) => {
console.log('ids:', gifIds);
const { data } = await gf.gifs(gifIds);
console.log('data', data);
return data;
};
And below is a screenshot of those console log statements. I'm passing in an array of 6 gif Ids, but only 5 are being returned by gf.gifs()
.
The gifId that is missing in the results is gifIds[4]
i.e. l0MYsHhzxfLsYfpPW
. I've confirmed it is an existing GIF by visiting https://media.giphy.com/media/l0MYsHhzxfLsYfpPW/giphy.gif
and sure enough it's some famous sportsball player.
Is the API working as expected or is this a bug? If it is working as expected, what is it about gif l0MYsHhzxfLsYfpPW
that cannot be retrieved by gf.gifs()
?
https://github.com/Giphy/giphy-js/blob/master/packages/react-components/README.md contains broken links for pages:
Search
Trending
GIF by ID
GIFs category and subcategory
Related Fetch
Random
In @giphy/js-components
render functions like renderGif
and renderGrid
need a static width. As a feature request I would like to have them be responsive with pure css 100% width, without the need of defining a static width in js, listening to window-resize and rerendering.
When using Grid component with the search function, I'm getting the below error whenever a new search term is entered:
"Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
at Grid"
No response
I'm only using Grid component with custom search input (no SearchContextManager) and passing the search term as states.
No response
@giphy/react-components: ^5.4.0
No response
I tried using a debouncer but still got the same error. (the same error happens in your own example here #56 (comment))
I also tried using AbortController() in reques.ts, it didn't solve the issue.
The IImages
states that downsized
and downsized_still
are always present, however, it's not true. Recently we've captured an exception with a IImages
missing both downsized
and downsized_still
.
Here's the culprit:
{
"type": "gif",
"id": "FftX0IDWgZw074Oqb1",
"url": "https://giphy.com/gifs/Roland-Garros-djokovic-novak-FftX0IDWgZw074Oqb1",
"slug": "Roland-Garros-djokovic-novak-FftX0IDWgZw074Oqb1",
"bitly_gif_url": "https://gph.is/g/Eq5Mz8D",
"bitly_url": "https://gph.is/g/Eq5Mz8D",
"embed_url": "https://giphy.com/embed/FftX0IDWgZw074Oqb1",
"username": "Roland-Garros",
"source": "",
"title": "French Open Tennis GIF by Roland-Garros",
"rating": "g",
"content_url": "",
"source_tld": "",
"source_post_url": "",
"is_sticker": false,
"import_datetime": "2020-10-08 10:54:23",
"trending_datetime": "2021-09-07 00:41:49",
"images": {
"original": {
"height": "270",
"width": "480",
"size": "8552905",
"url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/giphy.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=giphy.gif&ct=g",
"mp4_size": "516802",
"mp4": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/giphy.mp4?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=giphy.mp4&ct=g",
"frames": "146",
"hash": "3834f1c2c86dadf9f603d3c1ff686edb"
},
"downsized_large": {
"height": "270",
"width": "480",
"size": "5765173",
"url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/giphy-downsized-large.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=giphy-downsized-large.gif&ct=g"
},
"downsized_medium": {
"height": "216",
"width": "384",
"size": "3616080",
"url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/giphy-downsized-medium.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=giphy-downsized-medium.gif&ct=g"
},
"fixed_height": {
"height": "200",
"width": "356",
"size": "4998274",
"url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/200.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=200.gif&ct=g"
},
"fixed_height_downsampled": {
"height": "200",
"width": "356",
"size": "262328",
"url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/200_d.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=200_d.gif&ct=g"
},
"fixed_height_still": {
"height": "200",
"width": "356",
"size": "45799",
"url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/200_s.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=200_s.gif&ct=g"
},
"fixed_width": {
"height": "113",
"width": "200",
"size": "1635927",
"url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/200w.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=200w.gif&ct=g",
"webp_size": "180512",
"webp": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/200w.webp?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=200w.webp&ct=g"
},
"fixed_width_downsampled": {
"height": "113",
"width": "200",
"size": "92135",
"url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/200w_d.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=200w_d.gif&ct=g"
},
"fixed_width_still": {
"height": "113",
"width": "200",
"size": "16580",
"url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/200w_s.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=200w_s.gif&ct=g"
},
"original_still": {
"height": "270",
"width": "480",
"size": "77083",
"url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/giphy_s.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=giphy_s.gif&ct=g"
},
"original_mp4": {
"height": "270",
"width": "480",
"mp4_size": "516802",
"mp4": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/giphy.mp4?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=giphy.mp4&ct=g"
},
"480w_still": {
"height": "270",
"width": "480",
"size": "8552905",
"url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/480w_s.jpg?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=480w_s.jpg&ct=g"
}
},
"user": {
"avatar_url": "https://media1.giphy.com/avatars/Roland-Garros/9ztB7JZL1WCt.gif",
"banner_image": "https://media1.giphy.com/headers/Roland-Garros/qGSHfw6PzKqO.jpg",
"banner_url": "https://media1.giphy.com/headers/Roland-Garros/qGSHfw6PzKqO.jpg",
"profile_url": "https://giphy.com/Roland-Garros/",
"username": "Roland-Garros",
"display_name": "Roland-Garros",
"description": "Roland-Garros / French Open / Internationaux de France From Sunday 27th September to Sunday 11 October 2020. #RolandGarros http://rolandgarros.com",
"instagram_url": "https://instagram.com/rolandgarros",
"website_url": "https://www.rolandgarros.com/fr-fr/",
"is_verified": true,
"suppress_chrome": false,
"is_public": false
},
"analytics_response_payload": "e=Z2lmX2lkPUZmdFgwSURXZ1p3MDc0T3FiMSZldmVudF90eXBlPUdJRl9UUkVORElORyZjaWQ9MDI5MWE0YzE0ZnRlYTYyZ3c4ZDEwYWIxMXUxeWFna2E2dm5oNGxuM3ZjZjJrandjJmN0PWdpZg",
"analytics": {
"onload": {
"url": "https://giphy-analytics.giphy.com/v2/pingback_simple?analytics_response_payload=e%3DZ2lmX2lkPUZmdFgwSURXZ1p3MDc0T3FiMSZldmVudF90eXBlPUdJRl9UUkVORElORyZjaWQ9MDI5MWE0YzE0ZnRlYTYyZ3c4ZDEwYWIxMXUxeWFna2E2dm5oNGxuM3ZjZjJrandjJmN0PWdpZg&action_type=SEEN"
},
"onclick": {
"url": "https://giphy-analytics.giphy.com/v2/pingback_simple?analytics_response_payload=e%3DZ2lmX2lkPUZmdFgwSURXZ1p3MDc0T3FiMSZldmVudF90eXBlPUdJRl9UUkVORElORyZjaWQ9MDI5MWE0YzE0ZnRlYTYyZ3c4ZDEwYWIxMXUxeWFna2E2dm5oNGxuM3ZjZjJrandjJmN0PWdpZg&action_type=CLICK"
},
"onsent": {
"url": "https://giphy-analytics.giphy.com/v2/pingback_simple?analytics_response_payload=e%3DZ2lmX2lkPUZmdFgwSURXZ1p3MDc0T3FiMSZldmVudF90eXBlPUdJRl9UUkVORElORyZjaWQ9MDI5MWE0YzE0ZnRlYTYyZ3c4ZDEwYWIxMXUxeWFna2E2dm5oNGxuM3ZjZjJrandjJmN0PWdpZg&action_type=SENT"
}
},
"tags": [],
"is_anonymous": false,
"is_community": false,
"is_featured": false,
"is_hidden": false,
"is_indexable": false,
"is_preserve_size": false,
"is_realtime": false,
"is_removed": false,
"is_dynamic": false
}
https://github.com/Giphy/giphy-js/blob/master/packages/types/src/gif.ts#L49
original_mp4
is typed as IImage
but not IMP4
. I think IMP4
needs to extend IRendition
and original_mp4
would just be IMP4
.
Hey,
I'm trying to disable attribution and gif links on the grid, but typescript is complaining that hideAttribution isn't a valid property in the options object, and I can't see a way of preventing the gifs automatically opening the giphy website?
Thanks!
In Giphy docs there is Clips section.
In Type Option of Fetch API there is 'videos' type, though there is no 'videos' content type in docs.
Are 'clips' and 'videos' the same type? If not, what is the difference and why it's not listed in docs, and why there is no 'clips' type?
As you provide React components, maybe you could do the same for the lovely Angular framework, too? :)
For example it could then widely use RxJS (for rerendering, etc) and Angular Http client and may safe a lot of bundle size while providing maximized performance using the Angular renderer.
Wasnt much of a problem to use your js-components, tho. Love that you made it in TypeScript!
Trying to use @giphy/react-components with SSR causes this build error
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=require("@emotion/sheet"),r=t(require("@emotion/stylis"));function t(e){return e&&e.__esModule?e:{default:e}}require("@emotion/weak-memoize");var n="/*|*/",i=n+"}";function o(e){e&&a.current.insert(e+"}")}var a={current:null},s=function(e,r,t,s,c,u,d,l,f,p){switch(e){case 1:switch(r.charCodeAt(0)){case 64:return a.current.insert(r+";"),"";case 108:if(98===r.charCodeAt(2))return""}break;case 2:if(0===l)return r+n;break;case 3:switch(l){case 102:case 112:return a.current.insert(t[0]+r),"";default:return r+(0===p?n:"")}case-2:r.split(i).forEach(o)}},c=function(t){void 0===t&&(t={});var n,i=t.key||"css";void 0!==t.prefix&&(n={prefix:t.prefix});var o=new r.default(n);var c,u={};c=t.container||document.head;var d,l=document.querySelectorAll("style[data-emotion-"+i+"]");Array.prototype.forEach.call(l,function(e){e.getAttribute("data-emotion-"+i).split(" ").forEach(function(e){u[e]=!0}),e.parentNode!==c&&c.appendChild(e)}),o.use(t.stylisPlugins)(s),d=function(e,r,t,n){var i=r.name;a.current=t,o(e,r.styles),n&&(f.inserted[i]=!0)};var f={key:i,sheet:new e.StyleSheet({key:i,container:c,nonce:t.nonce,speedy:t.speedy}),nonce:t.nonce,inserted:u,registered:{},insert:d};return f},u=c;exports.default=u;
^
ReferenceError: document is not defined
at c (/my_project/node_modules/@giphy/js-brand/dist/index.js:10:795)
at a (/my_project/node_modules/@giphy/js-brand/dist/index.js:22:444)
at Object.parcelRequire.TAuN.create-emotion (/my_project/node_modules/@giphy/js-brand/dist/index.js:24:343)
at f (/my_project/node_modules/@giphy/js-brand/dist/index.js:1:468)
at p (/my_project/node_modules/@giphy/js-brand/dist/index.js:1:544)
at Object.parcelRequire.ul02.emotion (/my_project/node_modules/@giphy/js-brand/dist/index.js:26:213)
at f (/my_project/node_modules/@giphy/js-brand/dist/index.js:1:468)
at p (/my_project/node_modules/@giphy/js-brand/dist/index.js:1:544)
at Object.parcelRequire.7QCb../colors (/my_project/node_modules/@giphy/js-brand/dist/index.js:34:172)
at f (/my_project/node_modules/@giphy/js-brand/dist/index.js:1:468)
Digging into it, it's coming from the @emotion dep (emotion/cache/index.js) and @giphy/js-brand comes prebuilt with the browser specific version.
You can work around it by turning the import into a conditional require but wanted to document this to see if this is a conscious decision.
The callbacks onGifsFetched
and onGifsFetchError
for the web SDK in the js-components especially in the renderGrid
function are optional and not called if the fetchGifs
function does not return anything.
This makes it currently impossible for me to check and display a hint, if the query does not return any results.
I use Vue.js instead of React and therefore the native web components. I use it like this:
const fetchGifs = new GiphyFetch(apiKey).search(query, { ... })
renderCarousel({
fetchGifs,
onGifsFetched: (gifs) => {
...
},
onGifClick: (gif, event) => {
...
},
...
})
Something to look into is React Native support. Unable to get an iOS app running, comment out import { GiphyFetch } from '@giphy/js-fetch-api' and i am working again. Can use urls directly for now.
The issue was a build error in Xcode indicating "Can't find variable location".
I am using the @giphy/js-components for my project. I implemented a search bar like this:
However, everytime I search for something, it does not clear the old search but populates below it.
This is an example:
I am using the "remove" function to remove the grid contents before performing a search
remove() {
if (this.el) {
this.el.parentNode.removeChild(this.el);
window.removeEventListener("resize", this.resizeRender, false);
this.el = null;
}
}
This is how I fetch the gifs:
export class VanillaJSGrid {
mountNode: HTMLElement;
el: HTMLElement;
resizeRender;
constructor(mountNode: HTMLElement, input: string) {
this.mountNode = mountNode;
inputSearch = input;
this.resizeRender = throttle(500, () => this.render());
window.addEventListener("resize", this.resizeRender, false);
this.render();
}
render = () => {
const width = getWidth();
this.el = renderGrid(
{
width,
fetchGifs,
columns: width < 500 ? 2 : 3,
gutter: 6,
user: {},
onGifClick: gif => console.log(gif.url)
},
this.mountNode
) as HTMLElement;
};
remove() {
if (this.el) {
this.el.parentNode.removeChild(this.el);
this.el = null;
}
}
searchGifs(look: string) {
this.remove();
inputSearch = look;
fetchGifs = (offset: number) => gf.search(look, { offset, limit: 10 });
this.render();
}
}
How to I reset the search using the JavaScript SDK?
Hi, thanks for these components!
I was trying to implement the Grid with search, so each time an input changes its value, the Grid should fetch.
Do you have an example of how to do this?
I tried to add key={searchTerm} to the grid but then I got a lot of state-updates that went wrong because old api responses came in.
Hi,
I am using the GIPHY SDK (not the API)
I know there is a GIF component that we can import to display GIF; however I would like to use my own component.
Above all, I would like to have the file as a *.gif, not an actual URL link.
The reason being, in react I would like to use with gif_src being fetched when we use the props "onGifClick" from the Grid for example.
is there anyway to do so?
Any help would be greatly appreciated.
Passing Object with noLink property to renderCarousel() still renders Gifs with anchor tags.
link to codepen, add noLink property and set it to true: codepen
import { GiphyFetch } from "@giphy/js-fetch-api";
const gf = new GiphyFetch("sXpGFDGZs0Dv1mmNFvYaGUvYwKX0PWIh");
const fetchGifs = (offset: number) => gf.trending({ offset, limit: 4 });
export const vanillaJSCarousel = (mountNode: HTMLElement) => {
renderCarousel(
{
gifHeight: 200,
user: {},
fetchGifs,
noLink: true,
gutter: 6
},
mountNode
);
};```
### Expected behavior π€
When passing `noLink: true` Gifs should render without anchor tags.
### Steps to reproduce πΉ
Steps:
1. call the renderCarousel function
2. pass in an Object with a noLink property
### Screenshots or Videos πΉ
_No response_
### Platform π
- OS [MacOS]
- browser [chrome]
### GIPHY-JS SDK version
"@giphy/js-brand": "1.1.7", "@giphy/js-components": "3.0.5", "@giphy/js-fetch-api": "1.5.9", "@giphy/js-types": "2.0.1", "@types/throttle-debounce": "1.1.1",
### TypeScript version
_No response_
### Additional context π¦
_No response_
in the SearchBar component, there is a search button and it is a default with no option to remove it. I think we can make it conditional to boolean props.
I can make a PR for this but I didn't find any PR guidelines. If there is any and you accept PR's please let me know
the search button will not go with many designs, also as it's an ajax search we don't need the button.
I followed the sdk and sandbox to simply render a single gif: https://codesandbox.io/s/1wq52x1w44?fontsize=14&file=/src/gif.ts
But when I import renderGif:
import { renderGif } from '@giphy/js-components';
It throws an error:
ERROR in /my-project-dir/node_modules/@giphy/js-components/dist/components/carousel.d.ts
ERROR in /my-project-dir/node_modules/@giphy/js-components/dist/components/carousel.d.ts(42,21):
TS7016: Could not find a declaration file for module 'throttle-debounce'. '/my-project-dir/node_modules/throttle-debounce/index.cjs.js' implicitly has an 'any' type.
Try `npm install @types/throttle-debounce` if it exists or add a new declaration (.d.ts) file containing `declare module 'throttle-debounce';`
ERROR in /my-project-dir/node_modules/@giphy/js-components/dist/components/grid.d.ts
ERROR in /my-project-dir/node_modules/@giphy/js-components/dist/components/grid.d.ts(58,21):
TS7016: Could not find a declaration file for module 'throttle-debounce'. '/my-project-dir/node_modules/throttle-debounce/index.cjs.js' implicitly has an 'any' type.
Try `npm install @types/throttle-debounce` if it exists or add a new declaration (.d.ts) file containing `declare module 'throttle-debounce';`
The docs do not state any dependency to throttle-debounce
. If there are no dependencies but the types are needed in order @giphy/js-components
to work, then they should be included in the package.json of @giphy/js-components
imo.
I noticed that the package.json files for the fetch api and react components only specify a "main" entry point and not a "modules" entry point, which means I can't tree shake out the bits I don't use. Ideally all libraries specified a module directive and we're declared as "side effect free" (not sure if the packages are actually side effect free) so my bundler can only pull in the bits I need.
When building my react app using the default react-scripts production build I get failures in CI due to the following:
2:42:54 PM: Failed to compile.
2:42:54 PM:
2:42:54 PM: ../node_modules/@giphy/js-brand/dist/index.js
2:42:54 PM: Critical dependency: the request of a dependency is an expression
2:42:54 PM: error Command failed with exit code 1.
Investigation has lead me to believe this is an issue with the giphy-js modules being bundled with parcel and CRA using webpack. Any suggestions on how to fix this?
Following the readme file on the repo, I am not able to search for stickers.
My Code:
import { GiphyFetch } from '@giphy/js-fetch-api'
const gf = new GiphyFetch('your api key');
const { data: gifs } = await gf.search('dogs', { sort: 'relevant', lang: 'es', limit: 10, type: 'sticker' })
I am getting a 404 error.
API call made by SDK has the following URL:
https://api.giphy.com/v1/**sticker**/search?sort=relevant&lang=es&limit=10&type=sticker&q=dogs&api_key=MY_KEY
But if I try the API explorer on Docs page of Giphy, URL to search the stickers should be:
https://api.giphy.com/v1/sticker**s**/search?sort=relevant&lang=es&limit=10&type=sticker&q=dogs&api_key=MY_KEY
There is a 's' missing in the URL of API calls made by SDK.
I've tried to implement @giphy/js-fetch-api
in a Node script, but I'm getting errors regarding code that's "browser only" (window
, new Headers()
, etc).
Is the library intended to be for client-side JS only? - or is there Node support planned?
giphy/react-components 5.13.0 attempts to download a file from https://download.cypress.io/desktop/10.4.0?platform=win32&arch=x64
My job's corporate proxy blocks it since it's not from npm.
$ npm i
npm ERR! code 1
npm ERR! path C:\Users<name>\Documents\workspace\morpheus-react\node_modules\cypress
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node index.js --exec install
npm ERR! Installing Cypress (version: 10.4.0)
npm ERR!
npm ERR! [STARTED] Task without title.
npm ERR! The Cypress App could not be downloaded.
npm ERR!
npm ERR! Does your workplace require a proxy to be used to access the Internet? If so, you must configure the HTTP_PROXY environment variable before downloading Cypress. Read more: https://on.cypress.io/proxy-configuration
npm ERR!
npm ERR! Otherwise, please check network connectivity and try again:
npm ERR!
npm ERR! ----------
npm ERR!
npm ERR! URL: https://download.cypress.io/desktop/10.4.0?platform=win32&arch=x64
npm ERR! Error: unable to get local issuer certificate
npm ERR!
npm ERR! ----------
npm ERR!
npm ERR! Platform: win32-x64 (10.0.19042)
npm ERR! Cypress Version: 10.4.0
npm ERR! [FAILED] The Cypress App could not be downloaded.
npm ERR! [FAILED]
npm ERR! [FAILED] Does your workplace require a proxy to be used to access the Internet? If so, you must configure the HTTP_PROXY environment variable before downloading Cypress. Read more: https://on.cypress.io/proxy-configuration
npm ERR! [FAILED]
npm ERR! [FAILED] Otherwise, please check network connectivity and try again:
npm ERR! [FAILED]
npm ERR! [FAILED] ----------
npm ERR! [FAILED]
npm ERR! [FAILED] URL: https://download.cypress.io/desktop/10.4.0?platform=win32&arch=x64
npm ERR! [FAILED] Error: unable to get local issuer certificate
npm ERR! [FAILED]
npm ERR! [FAILED] ----------
npm ERR! [FAILED]
npm ERR! [FAILED] Platform: win32-x64 (10.0.19042)
npm ERR! [FAILED] Cypress Version: 10.4.0
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users<name>\AppData\Local\npm-cache_logs\2022-08-05T18_29_50_173Z-debug-0.log
Doesn't attempt to download files outside npm
Steps:
No response
Windows 10, Rocky Linux OS
n/a
No response
The problem is resolved with version 6.0.0. Technically, this bug is fixed, but I am posting this for other people so they do not have to go through what I went through to figure it out.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.