Streamers can now allow reaction gifs in chat

[MemoryLeakDeath]

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/

[Ribenaberri]

I have a couple of questions relating to this PR if I may.

Is there a way for a user who is viewing a stream to turn off seeing the gifs (Maybe like behind a click to view or something) - I ask for this consideration as I have seen a lot of feedback from those especially with reading difficulties about following our chats due to lack of accessibility controls when it comes to font style/size, this could further compound the issue if there's a lot of GIFs being thrown up in someones chat between conversations.

Does this particular GIF program have protections against things like racist gifs or similar? If not, is there perhaps another option which would do better for Glimesh? While any GIF used in the wrong way could be used to target and harrass someone, having the presence of Racist or otherwise GIFs already in the picker should really be a red flag IMO.

and my final question here:

How will GIFs display in the chat logs for GCT? If there is a report made due to a GIF someone posted, this would need to be visible, or at the very least the name of the GIF, such as is the case with the emotes presently, so that it may be effectively handled.

[MemoryLeakDeath]

@Ribenaberri

There's not currently a way for viewers to turn off the chat gifs; It's something I'd like to explore for a future patch but I kept it out of here as it might require some surgery on how chat currently works (we don't currently have a way for some users to see a message and others not to see that message from what I can tell; but this will be the case when we add commands/whispers to chat as the result of chat commands should only be seen by a select few).

Tenor does have moderation settings, I've set the default to "medium" which is the equivalent of G/PG rating here in the states. The final bullet point under "Limitations" in the PR has a link to what content is allowed/blocked by the PG rating. Streamers cannot currently change that setting.

I'll have to look at the GCT chat log dashboard to give you a better answer, but if it's just text then tenor gifs will show up like this: ":tenor:17538261428434176722:https://media.tenor.com/82Rr2PPBCtIAAAAC/cat-jam-cat.gif:https://media.tenor.com/82Rr2PPBCtIAAAAM/cat-jam-cat.gif" and you'd have to copy/paste one of those URLs into another browser tab to see what the image was. Again, I'll have to look to see if there's an improvement I can make there.

[MemoryLeakDeath]

rebased with dev

[Ribenaberri]

Tenor does have moderation settings, I've set the default to "medium" which is the equivalent of G/PG rating here in the states. The final bullet point under "Limitations" in the PR has a link to what content is allowed/blocked by the PG rating. Streamers cannot currently change that setting.

1. Id like to apologies the PR had a lot to read and I missed that part so my apologies.

Looking over it, the PG rating allows for partial nudity, would this entail topless men? I say specifically men because that is the societal norm but of course, on Glimesh that would be a ToS violation - we may need to at least get together with other members of the GCT and overview the content at each "age rating" level to determine which is the best - I'm not saying the G/PG isn't the right call, but I think it may be a decision that needs consideration from the GCT as a whole, just to confirm!

I'll have to look at the GCT chat log dashboard to give you a better answer, but if it's just text then tenor gifs will show up like this: ":tenor:17538261428434176722:https://media.tenor.com/82Rr2PPBCtIAAAAC/cat-jam-cat.gif:https://media.tenor.com/82Rr2PPBCtIAAAAM/cat-jam-cat.gif" and you'd have to copy/paste one of those URLs into another browser tab to see what the image was. Again, I'll have to look to see if there's an improvement I can make there.

Honestly if its just text and we have to put that into google, that's fine. The GCT hub and chat logs need a lot of work but we work with what we have, just as long as there is some way for us to be able to access that GIF to check it, would mean a lot :)

[MemoryLeakDeath]

@Ribenaberri

Looking over it, the PG rating allows for partial nudity, would this entail topless men? I say specifically men because that is the societal norm but of course, on Glimesh that would be a ToS violation - we may need to at least get together with other members of the GCT and overview the content at each "age rating" level to determine which is the best - I'm not saying the G/PG isn't the right call, but I think it may be a decision that needs consideration from the GCT as a whole, just to confirm!

It allows for non-detailed nudity, so while you can get depictions of topless men they are from a distance or tastefully cropped from the searches I performed. Either way, we will likely need an update to the TOS that covers 3rd party services like Tenor where we only have partial moderation control.

I also verified that the tenor gifs will just show up as text as I had pasted in an earlier comment. There are quite a few enhancements that probably should be investigated on the GCT chat log page as well.

[Ribenaberri]

Either way, we will likely need an update to the TOS that covers 3rd party services like Tenor where we only have partial moderation control.

Lemme feed all this back into the GCT (at present I think I'm the only one regularly active on GitHub) and see what we can come up with towards that/the rating and make sure we have can get these things in place, as it would need to be in place to go alongside if/when this gets rolled out!

I also verified that the tenor gifs will just show up as text as I had pasted in an earlier comment. There are quite a few enhancements that probably should be investigated on the GCT chat log page as well.

Perfect, thank you. And yeah for sure, Im hoping to get some movement with that soon :)