telegram-crawler/data/web/core.telegram.org/api/animated-emojis.html
2024-09-23 18:02:35 +00:00

199 lines
15 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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?241" 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>