telegram-crawler/data/web/blogfork.telegram.org/api/animated-emojis.html
2024-02-14 23:52:00 +00:00

199 lines
15 KiB
HTML

<!DOCTYPE html>
<html class="">
<head>
<meta charset="utf-8">
<title>Animated Emojis</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="description" content="Graphical telegram clients should transform emojis into their respective animated version.">
<meta property="og:title" content="Animated Emojis">
<meta property="og:image" content="">
<meta property="og:description" content="Graphical telegram clients should transform emojis into their respective animated version.">
<link rel="icon" type="image/svg+xml" href="/img/website_icon.svg?4">
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
<link rel="alternate icon" href="/img/favicon.ico" type="image/x-icon" />
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
<link href="/css/telegram.css?236" rel="stylesheet" media="screen">
<style>
</style>
</head>
<body class="preload">
<div class="dev_page_wrap">
<div class="dev_page_head navbar navbar-static-top navbar-tg">
<div class="navbar-inner">
<div class="container clearfix">
<ul class="nav navbar-nav navbar-right hidden-xs"><li class="navbar-twitter"><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)"><i class="icon icon-twitter"></i><span> Twitter</span></a></li></ul>
<ul class="nav navbar-nav">
<li><a href="//telegram.org/">Home</a></li>
<li class="hidden-xs"><a href="//telegram.org/faq">FAQ</a></li>
<li class="hidden-xs"><a href="//telegram.org/apps">Apps</a></li>
<li class="active"><a href="/api">API</a></li>
<li class=""><a href="/mtproto">Protocol</a></li>
<li class=""><a href="/schema">Schema</a></li>
</ul>
</div>
</div>
</div>
<div class="container clearfix">
<div class="dev_page">
<div id="dev_page_content_wrap" class=" ">
<div class="dev_page_bread_crumbs"><ul class="breadcrumb clearfix"><li><a href="/api" >API</a></li><i class="icon icon-breadcrumb-divider"></i><li><a href="/api/animated-emojis" >Animated Emojis</a></li></ul></div>
<h1 id="dev_page_title">Animated Emojis</h1>
<div id="dev_page_content"><!-- scroll_nav -->
<p>Graphical telegram clients should transform emojis into their respective animated version. </p>
<h3><a class="anchor" href="#animated-emojis" id="animated-emojis" name="animated-emojis"><i class="anchor-icon"></i></a>Animated emojis</h3>
<pre><code><a href='/constructor/inputStickerSetAnimatedEmoji'>inputStickerSetAnimatedEmoji</a>#28703c8 = <a href='/type/InputStickerSet'>InputStickerSet</a>;
<a href='/constructor/messages.stickerSet'>messages.stickerSet</a>#6e153f16 set:<a href='/type/StickerSet'>StickerSet</a> packs:<a href='/type/Vector%20t'>Vector</a>&lt;<a href='/type/StickerPack'>StickerPack</a>&gt; keywords:<a href='/type/Vector%20t'>Vector</a>&lt;<a href='/type/StickerKeyword'>StickerKeyword</a>&gt; documents:<a href='/type/Vector%20t'>Vector</a>&lt;<a href='/type/Document'>Document</a>&gt; = <a href='/type/messages.StickerSet'>messages.StickerSet</a>;
---functions---
<a href='/method/messages.getStickerSet'>messages.getStickerSet</a>#c8a0ec74 stickerset:<a href='/type/InputStickerSet'>InputStickerSet</a> hash:<a href='/type/int'>int</a> = <a href='/type/messages.StickerSet'>messages.StickerSet</a>;</code></pre>
<p>On startup, clients should fetch the animated emoji stickerset by calling the <a href="/method/messages.getStickerSet">messages.getStickerSet</a> method, providing <a href="/constructor/inputStickerSetAnimatedEmoji">inputStickerSetAnimatedEmoji</a> to the <code>stickerset</code> field.<br>
The returned stickerset will contain a set of animated stickers, one for each of the supported emojis. </p>
<p>Clients should substitute messages containing only one instance of one of the allowed emojis with the respective animated sticker.<br>
Also, when receiving messages containing only one instance of a <a href="/api/custom-emoji">custom emoji</a>, instead of displaying a message bubble with a single small custom emoji inside, the scaled-up custom emoji should be displayed directly, like with normal stickers. </p>
<p>Animated emojis should loop only once when first sent or received, or when clicked.<br>
For <a href="#emoji-reactions">supported emojis</a>, clients on both sides of private chats with users are supposed to show a reaction animation when any of the two users clicks on the animated emoji: <a href="#emoji-reactions">click here for more info »</a>.</p>
<p>For special <a href="/api/dice">dice emojis</a> like <img class="emoji" src="//telegram.org/img/emoji/40/F09F8EB2.png" width="20" height="20" alt="🎲" />, <img class="emoji" src="//telegram.org/img/emoji/40/F09F8EAF.png" width="20" height="20" alt="🎯" />, or <img class="emoji" src="//telegram.org/img/emoji/40/F09F8F80.png" width="20" height="20" alt="🏀" />, clients are supposed to behave differently both when sending and receiving such emojis: <a href="/api/dice">click here for more info »</a>.</p>
<h3><a class="anchor" href="#emojis-with-sounds" id="emojis-with-sounds" name="emojis-with-sounds"><i class="anchor-icon"></i></a>Emojis with sounds</h3>
<p>Certain animated emojis should play sound when clicked, as specified by <a href="/api/config#client-configuration">server-side configuration</a>. </p>
<p>The returned JSON object will contain the following map, with a list of file IDs to download:</p>
<pre><code> "emojies_sounds": {
"\ud83c\udf83": {
"id": "4956223179606458539",
"access_hash": "-2107001400913062971",
"file_reference_base64": "AF-4ApC7ukC0UWEPZN0TeSJURe7T"
},
"\u26b0": {
"id": "4956223179606458540",
"access_hash": "-1498869544183595185",
"file_reference_base64": "AF-4ApCLKMGt96WCvLm58kbqZHd3"
},
"\ud83e\udddf\u200d\u2642": {
"id": "4960929110848176331",
"access_hash": "3986395821757915468",
"file_reference_base64": "AF-4ApAedNln3IMEHH-SUQuH8L9g"
},
}</code></pre>
<p>The <a href="/api/file_reference">file reference field</a> should be base64-decoded before <a href="/api/files">downloading the file</a>.</p>
<h3><a class="anchor" href="#emoji-reactions" id="emoji-reactions" name="emoji-reactions"><i class="anchor-icon"></i></a>Emoji reactions</h3>
<pre><code><a href='/constructor/inputStickerSetAnimatedEmojiAnimations'>inputStickerSetAnimatedEmojiAnimations</a>#cde3739 = <a href='/type/InputStickerSet'>InputStickerSet</a>;
<a href='/constructor/messages.stickerSet'>messages.stickerSet</a>#6e153f16 set:<a href='/type/StickerSet'>StickerSet</a> packs:<a href='/type/Vector%20t'>Vector</a>&lt;<a href='/type/StickerPack'>StickerPack</a>&gt; keywords:<a href='/type/Vector%20t'>Vector</a>&lt;<a href='/type/StickerKeyword'>StickerKeyword</a>&gt; documents:<a href='/type/Vector%20t'>Vector</a>&lt;<a href='/type/Document'>Document</a>&gt; = <a href='/type/messages.StickerSet'>messages.StickerSet</a>;
<a href='/constructor/stickerPack'>stickerPack</a>#12b299d4 emoticon:<a href='/type/string'>string</a> documents:<a href='/type/Vector%20t'>Vector</a>&lt;<a href='/type/long'>long</a>&gt; = <a href='/type/StickerPack'>StickerPack</a>;
<a href='/constructor/sendMessageEmojiInteraction'>sendMessageEmojiInteraction</a>#25972bcb emoticon:<a href='/type/string'>string</a> msg_id:<a href='/type/int'>int</a> interaction:<a href='/type/DataJSON'>DataJSON</a> = <a href='/type/SendMessageAction'>SendMessageAction</a>;
<a href='/constructor/sendMessageEmojiInteractionSeen'>sendMessageEmojiInteractionSeen</a>#b665902e emoticon:<a href='/type/string'>string</a> = <a href='/type/SendMessageAction'>SendMessageAction</a>;
<a href='/constructor/updateUserTyping'>updateUserTyping</a>#c01e857f user_id:<a href='/type/long'>long</a> action:<a href='/type/SendMessageAction'>SendMessageAction</a> = <a href='/type/Update'>Update</a>;
---functions---
<a href='/method/messages.getStickerSet'>messages.getStickerSet</a>#c8a0ec74 stickerset:<a href='/type/InputStickerSet'>InputStickerSet</a> hash:<a href='/type/int'>int</a> = <a href='/type/messages.StickerSet'>messages.StickerSet</a>;
<a href='/method/messages.setTyping'>messages.setTyping</a>#58943ee2 flags:<a href='/type/%23'>#</a> peer:<a href='/type/InputPeer'>InputPeer</a> top_msg_id:flags.0?<a href='/type/int'>int</a> action:<a href='/type/SendMessageAction'>SendMessageAction</a> = <a href='/type/Bool'>Bool</a>;</code></pre>
<p>Not to be confused with <a href="/api/reactions">message reactions »</a>. </p>
<p>On startup, clients should fetch the animated reaction emoji stickerset by calling the <a href="/method/messages.getStickerSet">messages.getStickerSet</a> method, providing <a href="/constructor/inputStickerSetAnimatedEmojiAnimations">inputStickerSetAnimatedEmojiAnimations</a> to the <code>stickerset</code> field.<br>
The returned stickerset will contain a set of animated emoji reactions, <em>one or more</em> for each of the supported emojis.<br>
If a set of reactions for the <img class="emoji" src="//telegram.org/img/emoji/40/E29DA4.png" width="20" height="20" alt="❤" /> emoji is returned, the same reactions should also be assigned to the <img class="emoji" src="//telegram.org/img/emoji/40/F09FA7A1.png" width="20" height="20" alt="🧡" />, <img class="emoji" src="//telegram.org/img/emoji/40/F09F929B.png" width="20" height="20" alt="💛" />, <img class="emoji" src="//telegram.org/img/emoji/40/F09F929A.png" width="20" height="20" alt="💚" />, <img class="emoji" src="//telegram.org/img/emoji/40/F09F9299.png" width="20" height="20" alt="💙" />, <img class="emoji" src="//telegram.org/img/emoji/40/F09F929C.png" width="20" height="20" alt="💜" />, <img class="emoji" src="//telegram.org/img/emoji/40/F09F96A4.png" width="20" height="20" alt="🖤" />, <img class="emoji" src="//telegram.org/img/emoji/40/F09FA48D.png" width="20" height="20" alt="🤍" /> and <img class="emoji" src="//telegram.org/img/emoji/40/F09FA48E.png" width="20" height="20" alt="🤎" /> emojis. </p>
<p>Clients on both sides of private chats with users should overlay one of the appropriate reaction animations over the animated sticker when any of the two users clicks on a supported animated emoji.<br>
The same should happen for standalone <a href="/api/custom-emoji">custom emojis</a> (single <a href="/api/custom-emoji">custom emojis</a> are always displayed as standalone stickers) if the underlying normal emoji is supported (as above).<br>
The reaction animation for each separate tap should be chosen randomly from all the available reactions for a given emoji, and multiple taps should be aggregated and sent to the other user as follows: </p>
<p>At each tap, clients should store all occurred taps in a local list.<br>
After 1 second has elapsed with no more taps, the local list should be cleared and stored taps should be sent using <a href="/method/messages.setTyping">messages.setTyping</a>, passing a <a href="/constructor/sendMessageEmojiInteraction">sendMessageEmojiInteraction</a> constructor with the following fields: </p>
<ul>
<li><code>emoticon</code> - The emoji we're reacting to</li>
<li><code>msg_id</code> - Message ID of the animated emoji that was clicked</li>
<li><code>interaction</code> - A JSON object with interaction info, containing the following keys:<ul>
<li><code>v</code> - An integer indicating the object version, currently <code>1</code></li>
<li><code>a</code> - An array of JSON objects, each containing the following keys:<ul>
<li><code>t</code> - float, number of seconds that passed since the previous tap in the array, the first tap uses a value of <code>0.0</code>.</li>
<li><code>i</code> - integer, 1-based index of the randomly chosen animation for the tap (equivalent to the index of a specific emoji-related animation in <a href="/constructor/stickerPack">stickerPack</a> + 1).</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>1 second after the receiving user has seen the last reaction animation for a specific emoji, an acknowledgement must be sent using <a href="/method/messages.setTyping">messages.setTyping</a>, passing a <a href="/constructor/sendMessageEmojiInteractionSeen">sendMessageEmojiInteractionSeen</a> with that emoji.</p></div>
</div>
</div>
</div>
<div class="footer_wrap">
<div class="footer_columns_wrap footer_desktop">
<div class="footer_column footer_column_telegram">
<h5>Telegram</h5>
<div class="footer_telegram_description"></div>
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
</div>
<div class="footer_column">
<h5><a href="//telegram.org/faq">About</a></h5>
<ul>
<li><a href="//telegram.org/faq">FAQ</a></li>
<li><a href="//telegram.org/privacy">Privacy</a></li>
<li><a href="//telegram.org/press">Press</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps#mobile-apps">Mobile Apps</a></h5>
<ul>
<li><a href="//telegram.org/dl/ios">iPhone/iPad</a></li>
<li><a href="//telegram.org/android">Android</a></li>
<li><a href="//telegram.org/dl/web">Mobile Web</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps#desktop-apps">Desktop Apps</a></h5>
<ul>
<li><a href="//desktop.telegram.org/">PC/Mac/Linux</a></li>
<li><a href="//macos.telegram.org/">macOS</a></li>
<li><a href="//telegram.org/dl/web">Web-browser</a></li>
</ul>
</div>
<div class="footer_column footer_column_platform">
<h5><a href="/">Platform</a></h5>
<ul>
<li><a href="/api">API</a></li>
<li><a href="//translations.telegram.org/">Translations</a></li>
<li><a href="//instantview.telegram.org/">Instant View</a></li>
</ul>
</div>
</div>
<div class="footer_columns_wrap footer_mobile">
<div class="footer_column">
<h5><a href="//telegram.org/faq">About</a></h5>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/blog">Blog</a></h5>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/apps">Apps</a></h5>
</div>
<div class="footer_column">
<h5><a href="/">Platform</a></h5>
</div>
<div class="footer_column">
<h5><a href="//telegram.org/press">Press</a></h5>
</div>
</div>
</div>
</div>
<script src="/js/main.js?47"></script>
<script src="/js/jquery.min.js?1"></script>
<script src="/js/bootstrap.min.js?1"></script>
<script>window.initDevPageNav&&initDevPageNav();
backToTopInit("Go up");
removePreloadInit();
</script>
</body>
</html>