churrho
January 11, 2022, 5:32am
#1
gif search bar would be epic. They are more powerful than words when viewers show their reactions to the streamer. Both streamers and viewers love this feature.
Cykotiq
January 11, 2022, 10:27pm
#3
we have animated GIF emotes in chat, what I think you meant to ask for is integration with a service like giphy so you can search for random GIFs. Is that more accurate?
just trying to clarify, so this thread doesn’t get marked as complete and get locked
churrho
January 11, 2022, 10:40pm
#4
Yea, a search bar for giphy or tenor
1 Like
potaho
January 12, 2022, 8:22pm
#5
oh yees, the power of gifs
1 Like
Mytho
January 14, 2022, 9:54pm
#6
I know Giphy has a public API which we should be able to hook into. Pretty sure the other gif providers have something similar. Giphy should have a mature filter which makes moderation easier.
1 Like
If this was something implemented, I would suggest going with Tenor as they have a bet Gif selection.
1 Like
Banjax
July 21, 2022, 8:20pm
#8
I know I’m late to this but all the yes
I’ve created a pull request to add a Tenor gif search menu:
Glimesh:dev ← MemoryLeakDeath:feature/allow-tenor-gifs-in-chat
opened 07:24PM - 27 Dec 22 UTC
## Description
Reaction gifs can be a fun way for viewers to interact and react… in the moment to the content being streamed on the platform. They differ from emotes and animated emotes in that they are submitted by the community to popular sites like Giphy and Tenor and thus there is a larger variety of reaction-based gifs that can be accessed.
## Integration
We are integrating with Tenor a Google-owned service that has a wide variety of content that is both moderated and easy to integrate with via API. As part of this integration, we are required to display either a "powered by Tenor" logo or to show a "Search Tenor" label when searching for reaction gifs. I have chosen to do both of these just to be on the safe side (and they are easy to accomplish).
**important note**: If we wish to integrate with other reaction gif sites in the future, the license terms of Tenor require that we do not mix the search results of those other sites with those of Tenor and that we do not change the order in which category/search results are returned from the Tenor service.
## UI Details
Similar to hyperlinks, channel owners can always use reaction gifs in their channel (if enabled site-wide, see technical details). Channel owners may enable viewers to use reaction gifs in their channel via the channel settings page below (default is No = off):
When enabled, viewers will see a new button next to the emote button on the chat panel:
When clicked, the button will open a menu similar to below:
The search box at the top of the menu is focused by default, so the viewer may start typing a search term immediately and can use either the enter key to submit the search or the blue search button. We submit the search terms to Tenor and then display the results (20 per page) in the scrolling panel below the search as shown:
Clicking an image will do the following:
- add the image to your "recent" tab (max: 15 recent) and save it to your browser's local storage and is not based on the user you are logged in as. If you log in as multiple Glimesh users on the same browser, your recent images will be the same.
- send a chat message with the image you selected
- anonymously notify Tenor of what image was selected so they can rank their image results appropriately (no user or channel data is sent in the request, however the images are hosted on Tenor's servers so they may be able to passively gather information)
- close the reaction gif menu
Clicking the "Featured" or "Trending" tabs will display a list of categories curated by Tenor that viewers can drill down into to find gifs if they are stumped on terms to search for. We display the top 10 categories in each tab and will show 20 results per page for each category selected.
## Limitations
- We currently only support English language in our reaction gif menu and search. I plan on supporting more languages in subsequent patches.
- Out of the box, the Tenor API throttles us to one request per second -- I've made a few design decisions around this limitation to either reduce the number of requests we make or to introduce "think time" to spread requests out. It is for this reason that we do not have autocomplete or search suggestions turned on and I did not make the search results pages load the next page automatically (you must push a button). We may be able to petition Google for lighter restrictions as time goes on and our api traffic pattern is better known.
- Tenor has the concept of mp4 video/audio reactions and stickers -- I do not currently support those but their inclusion can be discussed for a future patch.
- The web-based chat will attempt to shrink gifs down from their original size to a maximum of 350x220 pixels while hopefully maintaining a correct aspect ratio. This can still be a bit big for a particularly active chat, so I'm open to suggestions. I've included Tenor's "tinygif" (referred to as "small_src" in the Glimesh api's "Token" structure) resized gif in api calls so chat bots and mobile apps can use the pre-shrunk gif when displaying chat if they desire.
- I have set Tenor's content filter to "medium" (PG) site-wide. I have not provided a way for individual streamers to change this setting. See https://tenor.com/gifapi/documentation#contentfilter for more information on what that setting allows.
## 3rd Party Impacts and API Additions
Adding this new reaction gif functionality will have impacts to our already existing community bot/app contributors:
- Tenor chat messages are parsed as a single token of a new type: "tenor". They cannot contain any additional text/emotes/etc. When sending a tenor gif chat message, the message must conform to the following or it will be interpreted as a simple text message:
`:tenor:tenor gif id:original size url:small size url`
The URLs above MUST point to "https://media.tenor.com" domain or they will be rejected.
Here's an example Tenor chat message:
`:tenor:17538261428434176722:https://media.tenor.com/82Rr2PPBCtIAAAAC/cat-jam-cat.gif:https://media.tenor.com/82Rr2PPBCtIAAAAM/cat-jam-cat.gif`
Here's an example graphql mutation and return:
```
mutation CreateTenorMessage($channelId: ID!, $message: ChatMessageInput!) {
createTenorMessage(channelId: $channelId, message: $message) {
message
user {
username
}
tokens {
type
text
... on TenorToken {
src
tenor_id
small_src
}
}
}
}
assert json_response(conn, 200)["data"]["createTenorMessage"] == %{
"message" =>
":tenor:23232323232:https://media.tenor.com/blahblah:https://media.tenor.com/anotherthing",
"user" => %{
"username" => user.username
},
"tokens" => [
%{
"type" => "tenor",
"text" => nil,
"tenor_id" => "23232323232",
"src" => "https://media.tenor.com/blahblah",
"small_src" => "https://media.tenor.com/anotherthing"
}
]
}
```
- The tenor chat messages use the "chat" oauth scope the same as normal chat messages.
## Technical Details
- The Tenor functionality can be enabled/disabled site-wide via config.exs (and its variants) or via the following system environment variables:
| Variable | Value | Details |
| --------- | ------- | ---------- |
| GLIMESH_TENOR_ENABLED | true/false | Default: true; will enable/disable tenor reaction gifs functionality site-wide |
| GLIMESH_TENOR_API_KEY | api key | Must be present or tenor will be disabled site-wide. |
- In addition, the Tenor content filter can be altered by changing the config.exs file:
- The "allow_reaction_gifs" boolean column was added to the "channels" table with a default of "false".
- All of the Tenor API calls are carried out via Javascript XMLHTTPRequests in the TenorSearch.js file.
- A Tenor api key can be obtained via the Google Cloud console, instructions here: https://developers.google.com/tenor/guides/quickstart
- We use the v2 Tenor API and do not support v1 (which is deprecated).
- Our reaction gif menu uses the Tippy.js library version 6.3.7 which is under MIT License and can be found here: https://atomiks.github.io/tippyjs/
3 Likes
