Skip to content
GitLab
Unverified Commit c2409137 authored by Sofya Freyman's avatar Sofya Freyman Committed by GitHub
Browse files

Animated Sticker Support on iOS (#738) 

* [iOS] Add validation for animated stickers

* [iOS] Decode animated images and show sticker animation preview inside action sheets

* [iOS] Render animation icon for animated sticker packs

* [iOS] Add a sample animated sticker pack

* [iOS] Add validation for 0 KB image file sizes

* [iOS] Include animated sticker instructions in README

* [iOS] Miscellaneous UI tweaks
parent 24fc7c97
Hide whitespace changes
Inline Side-by-side
iOS/README.md
View file @ c2409137
......@@ -21,14 +21,17 @@ We recommend you refer to the FAQ at https://faq.whatsapp.com/general/26000226 f
* A sticker is an image that has a transparent background and can be sent in a
WhatsApp chat
* Stickers are organized into "packs". Users must explicitly add each pack to WhatsApp one-by-one, so your app should list each pack separately and each pack must have its own affordance to add it to WhatsApp (do not try to create "add all packs" operations).
* Sticker packs must contain either static or animated stickers, never a mix of both
* Each sticker pack must have a minimum of 3 stickers and a maximum of 30 stickers
* Stickers must be exactly 512 x 512 pixels
* Stickers will render on a variety of backgrounds, white, black, colored, patterned, etc. Test your sticker art on a variety of backgrounds. For this reason, we recommend you add a 8px #FFFFFF stroke to the outside of each sticker. See the sample PSD referenced at https://faq.whatsapp.com/general/26000226 for more details.
* Stickers must be either in PNG or the [WebP format](https://developers.google.com/speed/webp). Currently, animated WebP, animated PNG, or animated stickers of any kind are not supported. See the section [Converting to WebP](#converting-to-webp) below for information on how to create WebP files.
* Each sticker must be less than 100KB. See the section [Tips for Reducing File Size](#tips-for-reducing-file-size) below.
* Stickers must be either in PNG or the [WebP format](https://developers.google.com/speed/webp). Animated stickers are supported in the WebP format only. See the section [Converting to WebP](#converting-to-webp) below for information on how to create WebP files.
* Each static sticker must be less than or equal to 100KB and each animated sticker must be less than or equal to 500KB. See the section [Tips for Reducing File Size](#tips-for-reducing-file-size) below.
* Animated stickers must have frames with minimum duration of 8ms. Animation duration should be less than or equal to 10 seconds total.
* For animated stickers, the first frame should say it all - WhatsApp ends the animation on the first frame after looping so please make sure your first frame is the complete image of your sticker and adjust the sequence of the stickers accordingly so users don’t see a jumpy experience going from the last to first frame. Ex. A sticker that animated “Hi!” should have the first frame show all words “Hi!”.
* Sticker Picker/Tray Icon
* Provide an image that will be used to represent your sticker pack in the WhatsApp sticker picker/tray
* This image should be 96 x 96 pixels
* Provide an image that will be used to represent your sticker pack in the WhatsApp sticker picker/tray
* This image should be static and 96 x 96 pixels
* Max file size of 50KB
### Tips for reducing file size
......@@ -63,7 +66,9 @@ Follow these steps if you want to test your sticker assets with the sample app.
In Xcode, you must also modify the 'sticker_packs.wasticker' file. Replace the values of the metadata with your own. A few notes:
* `name`: the sticker pack's name (128 characters max)
* `identifier`: The identifier should be unique and can be alphanumeric: a-z, A-Z, 0-9, and the following characters are also allowed "_", "-", "." and " ". The identifier should be less than 128 characters.
* `publisher`: the sticker pack's publisher (128 characters max)
* `identifier`: the identifier should be unique and can be alphanumeric: a-z, A-Z, 0-9, and the following characters are also allowed "_", "-", "." and " ". The identifier should be less than 128 characters.
* `animated_sticker_pack`: boolean value to indicate whether the sticker pack is animated (required for animated sticker packs, optional for static sticker packs)
* Replace the `image_file` value with the file name of your sticker image. It must have both the file name and extension. The ordering of the files in the JSON will dictate the ordering of your stickers in your pack.
* `ios_app_store_link` and `android_play_store_link` (optional fields): here you can put the URL to your sticker app in the App Store as well as a URL to your sticker app in the Google Play Store (if you have an Android version of your sticker app). If you provide these URLs, users who receive a sticker from your app in WhatsApp can tap on it to view your sticker app in the respective App Stores. To get your App Store link before you publish your app, refer to the instructions here: https://stackoverflow.com/questions/4137426/get-itunes-link-for-app-before-submitting.
* `emojis` (optional): add up to a maximum of three emoji for each sticker file. Select emoji that best describe or represent that sticker file. For example, if the sticker is portraying love, you may choose to add a heart emoji like 💕. If your sticker portrays pizza, you may want to add the pizza slice emoji 🍕. In the future, WhatsApp will support a search function for stickers and tagging your sticker files with emoji will enable that. The sticker picker/tray in WhatsApp today already categorizes stickers into emotion categories (love, happy, sad, and angry) and it does this based on the emoji you tag your stickers with. Please see the list of emojis you can use to tag for the emotion categories: https://github.com/WhatsApp/stickers/wiki/Tag-your-stickers-with-Emojis
......
iOS/WAStickersThirdParty.xcodeproj/project.pbxproj
View file @ c2409137
......@@ -7,6 +7,28 @@
objects = {
/* Begin PBXBuildFile section */
055CF8F725C117C90071BA8D /* 02_WellDoThisTogether.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8E125C117C80071BA8D /* 02_WellDoThisTogether.webp */; };
055CF8F825C117C90071BA8D /* 17_WashingHands.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8E225C117C80071BA8D /* 17_WashingHands.webp */; };
055CF8F925C117C90071BA8D /* 10_WorkingFromBed.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8E325C117C80071BA8D /* 10_WorkingFromBed.webp */; };
055CF8FA25C117C90071BA8D /* 19_SocialDistancing.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8E425C117C80071BA8D /* 19_SocialDistancing.webp */; };
055CF8FB25C117C90071BA8D /* 11_StayCalm.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8E525C117C80071BA8D /* 11_StayCalm.webp */; };
055CF8FC25C117C90071BA8D /* 06_StayConnected.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8E625C117C80071BA8D /* 06_StayConnected.webp */; };
055CF8FD25C117C90071BA8D /* 14_CatOnTheLaptop.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8E725C117C80071BA8D /* 14_CatOnTheLaptop.webp */; };
055CF8FE25C117C90071BA8D /* 15_WorkingFromHomeF.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8E825C117C80071BA8D /* 15_WorkingFromHomeF.webp */; };
055CF8FF25C117C90071BA8D /* 18_DontTouchYourFace.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8E925C117C80071BA8D /* 18_DontTouchYourFace.webp */; };
055CF90025C117C90071BA8D /* 05_GroupVideoCalling.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8EA25C117C80071BA8D /* 05_GroupVideoCalling.webp */; };
055CF90125C117C90071BA8D /* 20_SuperheroNurse.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8EB25C117C80071BA8D /* 20_SuperheroNurse.webp */; };
055CF90225C117C90071BA8D /* 04_AirHighFive.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8EC25C117C90071BA8D /* 04_AirHighFive.webp */; };
055CF90325C117C90071BA8D /* 12_Gymnastics.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8ED25C117C90071BA8D /* 12_Gymnastics.webp */; };
055CF90425C117C90071BA8D /* 13_DoubleChecking.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8EE25C117C90071BA8D /* 13_DoubleChecking.webp */; };
055CF90525C117C90071BA8D /* 01_SendingLove.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8EF25C117C90071BA8D /* 01_SendingLove.webp */; };
055CF90625C117C90071BA8D /* 08_AreYouOK.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8F025C117C90071BA8D /* 08_AreYouOK.webp */; };
055CF90725C117C90071BA8D /* 16_WorkingFromHomeM.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8F125C117C90071BA8D /* 16_WorkingFromHomeM.webp */; };
055CF90825C117C90071BA8D /* 21_YouAreMyHero.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8F225C117C90071BA8D /* 21_YouAreMyHero.webp */; };
055CF90925C117C90071BA8D /* 03_Heart.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8F325C117C90071BA8D /* 03_Heart.webp */; };
055CF90A25C117C90071BA8D /* 09_StayingHomeMug.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8F425C117C90071BA8D /* 09_StayingHomeMug.webp */; };
055CF90B25C117C90071BA8D /* tray_TogetherAtHome.png in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8F525C117C90071BA8D /* tray_TogetherAtHome.png */; };
055CF90C25C117C90071BA8D /* 07_OK.webp in Resources */ = {isa = PBXBuildFile; fileRef = 055CF8F625C117C90071BA8D /* 07_OK.webp */; };
0E6359A4203E148200805DEB /* StickerCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0E6359A3203E148200805DEB /* StickerCell.swift */; };
8A0A6DCD1FE9F1CE00110AF2 /* UIAlertController+Additions.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8A0A6DCC1FE9F1CE00110AF2 /* UIAlertController+Additions.swift */; };
8A18E2EE1FB3B47D0082201D /* YYImage.m in Sources */ = {isa = PBXBuildFile; fileRef = 8A18E2E51FB3B47B0082201D /* YYImage.m */; };
......@@ -80,6 +102,28 @@
/* End PBXCopyFilesBuildPhase section */
/* Begin PBXFileReference section */
055CF8E125C117C80071BA8D /* 02_WellDoThisTogether.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 02_WellDoThisTogether.webp; sourceTree = "<group>"; };
055CF8E225C117C80071BA8D /* 17_WashingHands.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 17_WashingHands.webp; sourceTree = "<group>"; };
055CF8E325C117C80071BA8D /* 10_WorkingFromBed.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 10_WorkingFromBed.webp; sourceTree = "<group>"; };
055CF8E425C117C80071BA8D /* 19_SocialDistancing.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 19_SocialDistancing.webp; sourceTree = "<group>"; };
055CF8E525C117C80071BA8D /* 11_StayCalm.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 11_StayCalm.webp; sourceTree = "<group>"; };
055CF8E625C117C80071BA8D /* 06_StayConnected.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 06_StayConnected.webp; sourceTree = "<group>"; };
055CF8E725C117C80071BA8D /* 14_CatOnTheLaptop.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 14_CatOnTheLaptop.webp; sourceTree = "<group>"; };
055CF8E825C117C80071BA8D /* 15_WorkingFromHomeF.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 15_WorkingFromHomeF.webp; sourceTree = "<group>"; };
055CF8E925C117C80071BA8D /* 18_DontTouchYourFace.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 18_DontTouchYourFace.webp; sourceTree = "<group>"; };
055CF8EA25C117C80071BA8D /* 05_GroupVideoCalling.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 05_GroupVideoCalling.webp; sourceTree = "<group>"; };
055CF8EB25C117C80071BA8D /* 20_SuperheroNurse.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 20_SuperheroNurse.webp; sourceTree = "<group>"; };
055CF8EC25C117C90071BA8D /* 04_AirHighFive.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 04_AirHighFive.webp; sourceTree = "<group>"; };
055CF8ED25C117C90071BA8D /* 12_Gymnastics.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 12_Gymnastics.webp; sourceTree = "<group>"; };
055CF8EE25C117C90071BA8D /* 13_DoubleChecking.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 13_DoubleChecking.webp; sourceTree = "<group>"; };
055CF8EF25C117C90071BA8D /* 01_SendingLove.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 01_SendingLove.webp; sourceTree = "<group>"; };
055CF8F025C117C90071BA8D /* 08_AreYouOK.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 08_AreYouOK.webp; sourceTree = "<group>"; };
055CF8F125C117C90071BA8D /* 16_WorkingFromHomeM.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 16_WorkingFromHomeM.webp; sourceTree = "<group>"; };
055CF8F225C117C90071BA8D /* 21_YouAreMyHero.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 21_YouAreMyHero.webp; sourceTree = "<group>"; };
055CF8F325C117C90071BA8D /* 03_Heart.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 03_Heart.webp; sourceTree = "<group>"; };
055CF8F425C117C90071BA8D /* 09_StayingHomeMug.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 09_StayingHomeMug.webp; sourceTree = "<group>"; };
055CF8F525C117C90071BA8D /* tray_TogetherAtHome.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = tray_TogetherAtHome.png; sourceTree = "<group>"; };
055CF8F625C117C90071BA8D /* 07_OK.webp */ = {isa = PBXFileReference; lastKnownFileType = file; path = 07_OK.webp; sourceTree = "<group>"; };
0E6359A3203E148200805DEB /* StickerCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StickerCell.swift; sourceTree = "<group>"; };
8A0A6DCC1FE9F1CE00110AF2 /* UIAlertController+Additions.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIAlertController+Additions.swift"; sourceTree = "<group>"; };
8A18E2E31FB3B47A0082201D /* WAStickersThirdParty-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "WAStickersThirdParty-Bridging-Header.h"; sourceTree = "<group>"; };
......@@ -228,6 +272,28 @@
8A26A6A71FEB2E2400256DE8 /* SampleStickers */ = {
isa = PBXGroup;
children = (
055CF8EF25C117C90071BA8D /* 01_SendingLove.webp */,
055CF8F525C117C90071BA8D /* tray_TogetherAtHome.png */,
055CF8E125C117C80071BA8D /* 02_WellDoThisTogether.webp */,
055CF8F325C117C90071BA8D /* 03_Heart.webp */,
055CF8EC25C117C90071BA8D /* 04_AirHighFive.webp */,
055CF8EA25C117C80071BA8D /* 05_GroupVideoCalling.webp */,
055CF8E625C117C80071BA8D /* 06_StayConnected.webp */,
055CF8F625C117C90071BA8D /* 07_OK.webp */,
055CF8F025C117C90071BA8D /* 08_AreYouOK.webp */,
055CF8F425C117C90071BA8D /* 09_StayingHomeMug.webp */,
055CF8E325C117C80071BA8D /* 10_WorkingFromBed.webp */,
055CF8E525C117C80071BA8D /* 11_StayCalm.webp */,
055CF8ED25C117C90071BA8D /* 12_Gymnastics.webp */,
055CF8EE25C117C90071BA8D /* 13_DoubleChecking.webp */,
055CF8E725C117C80071BA8D /* 14_CatOnTheLaptop.webp */,
055CF8E825C117C80071BA8D /* 15_WorkingFromHomeF.webp */,
055CF8F125C117C90071BA8D /* 16_WorkingFromHomeM.webp */,
055CF8E225C117C80071BA8D /* 17_WashingHands.webp */,
055CF8E925C117C80071BA8D /* 18_DontTouchYourFace.webp */,
055CF8E425C117C80071BA8D /* 19_SocialDistancing.webp */,
055CF8EB25C117C80071BA8D /* 20_SuperheroNurse.webp */,
055CF8F225C117C90071BA8D /* 21_YouAreMyHero.webp */,
8AC234882146F63D00E3667B /* tray_Cuppy.png */,
8AC234942146F65100E3667B /* 01_Cuppy_smile.png */,
8AC234962146F65200E3667B /* 02_Cuppy_lol.png */,
......@@ -360,8 +426,10 @@
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
055CF90225C117C90071BA8D /* 04_AirHighFive.webp in Resources */,
8AC234A72146F65500E3667B /* 10_Cuppy_hmm.png in Resources */,
8AC234B92146F65500E3667B /* 19_Cuppy_shine.png in Resources */,
055CF8F925C117C90071BA8D /* 10_WorkingFromBed.webp in Resources */,
8A27F12F1FD9E733001B2BBD /* SecondaryTextTableViewCell.xib in Resources */,
8AC234B52146F65500E3667B /* 16_Cuppy_angry.png in Resources */,
8AC234B12146F65500E3667B /* 08_Cuppy_lovewithmug.png in Resources */,
......@@ -369,21 +437,41 @@
8AC234892146F63D00E3667B /* tray_Cuppy.png in Resources */,
8A27F11C1FD73DD0001B2BBD /* StickerPackTableViewCell.xib in Resources */,
8AC234A92146F65500E3667B /* 14_Cuppy_weird.png in Resources */,
055CF8FC25C117C90071BA8D /* 06_StayConnected.webp in Resources */,
8AC234AD2146F65500E3667B /* 01_Cuppy_smile.png in Resources */,
055CF90525C117C90071BA8D /* 01_SendingLove.webp in Resources */,
8AC234AA2146F65500E3667B /* 22_Cuppy_bye.png in Resources */,
055CF8FE25C117C90071BA8D /* 15_WorkingFromHomeF.webp in Resources */,
8AC234A52146F65500E3667B /* 09_Cuppy_lovewithcookie.png in Resources */,
055CF90325C117C90071BA8D /* 12_Gymnastics.webp in Resources */,
055CF90B25C117C90071BA8D /* tray_TogetherAtHome.png in Resources */,
8AC234AE2146F65500E3667B /* 21_Cuppy_hi.png in Resources */,
8AC234B82146F65500E3667B /* 05_Cuppy_cry.png in Resources */,
055CF90125C117C90071BA8D /* 20_SuperheroNurse.webp in Resources */,
8AC234A82146F65500E3667B /* 07_Cuppy_hate.png in Resources */,
8AC234B02146F65500E3667B /* 03_Cuppy_rofl.png in Resources */,
055CF90925C117C90071BA8D /* 03_Heart.webp in Resources */,
055CF90725C117C90071BA8D /* 16_WorkingFromHomeM.webp in Resources */,
055CF8FB25C117C90071BA8D /* 11_StayCalm.webp in Resources */,
8A22EE0E1F9A9F40003A7F21 /* LaunchScreen.storyboard in Resources */,
055CF90A25C117C90071BA8D /* 09_StayingHomeMug.webp in Resources */,
055CF8FD25C117C90071BA8D /* 14_CatOnTheLaptop.webp in Resources */,
055CF90C25C117C90071BA8D /* 07_OK.webp in Resources */,
055CF8FA25C117C90071BA8D /* 19_SocialDistancing.webp in Resources */,
8A22EE0B1F9A9F40003A7F21 /* Assets.xcassets in Resources */,
055CF90025C117C90071BA8D /* 05_GroupVideoCalling.webp in Resources */,
055CF8F825C117C90071BA8D /* 17_WashingHands.webp in Resources */,
055CF90625C117C90071BA8D /* 08_AreYouOK.webp in Resources */,
055CF90825C117C90071BA8D /* 21_YouAreMyHero.webp in Resources */,
8AC235042149FA3000E3667B /* 11_Cuppy_upset.png in Resources */,
8AC234AB2146F65500E3667B /* 12_Cuppy_angry.png in Resources */,
055CF8FF25C117C90071BA8D /* 18_DontTouchYourFace.webp in Resources */,
8AC234B42146F65500E3667B /* 04_Cuppy_sad.png in Resources */,
8A27F1311FD9E987001B2BBD /* LinkTableViewCell.xib in Resources */,
8AC234AF2146F65500E3667B /* 02_Cuppy_lol.png in Resources */,
8AC234A42146F65500E3667B /* 06_Cuppy_love.png in Resources */,
055CF90425C117C90071BA8D /* 13_DoubleChecking.webp in Resources */,
055CF8F725C117C90071BA8D /* 02_WellDoThisTogether.webp in Resources */,
8A22EE091F9A9F40003A7F21 /* Main.storyboard in Resources */,
8AC234B32146F65500E3667B /* 13_Cuppy_curious.png in Resources */,
8AC234B22146F65500E3667B /* 24_Cuppy_phone.png in Resources */,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment