Login
You're viewing the discuss.systems public feed.
  • Kevs 🦄kevinrpb@mastodon.social
    Sep 21, 2024, 11:57 PM

    It has all the Twitch chat goodies, including emote support for Twitch, FFZ and BTTV.

    (I'm not 100% sure on this UI yet, I know the header bit looks odd).

    (5/x)

    @SwiftUI

    Screenshot of an iOS app. There is an emote picker above the input textfield showing many emotes.
    💬 1🔄 0⭐ 0

Replies

  • Kevs 🦄kevinrpb@mastodon.social
    Sep 22, 2024, 12:05 AM

    The feature I'm most proud of is animated emotes. It's nothing crazy in and out of itself. But if you have tried to get GIFs to render in SwiftUI you may know that it also not trivial.

    The crazy part? Those GIFs you see are not SwiftUI Images*. They are Text. Actually, every message in chat is just a Text view!

    *They kinda are Images, but keep reading to understand what I mean.

    (6/x)

    #SwiftUI

    Video of an iOS app. There's a chat conversation showcasing the display of animated emotes in the chat.
    💬 1🔄 0⭐ 0
  • Kevs 🦄kevinrpb@mastodon.social
    Sep 22, 2024, 12:06 AM

    I am really happy with the implementation to render these emotes in text. Both badges and static emotes are just a Text(Image(uiImage:)) element. They are then concatenated to form the whole message.

    In order to be able to follow this approach, I download the images and use the UIImage to initialize the SwiftUI image. One important bit here is matching the text size. I am using the current DynamicType setting to resize the images so they are always scaled to the text.

    (7/x)

    #SwiftUI

    💬 1🔄 0⭐ 0
  • Kevs 🦄kevinrpb@mastodon.social
    Sep 22, 2024, 12:06 AM

    Now for the animated emotes... They are also defined in the view hierarchy as a Text(Image(uiImage:)). However! The magic to make them animate is to make use of the new TextRenderer protocol.

    When I have to add an animated emote to the hierarchy, I add it as an Image with the first frame. I also add a custom TextAttribute to it that contains all the needed images to render the animation.

    (8/x)

    #SwiftUI

    💬 1🔄 0⭐ 0
  • Kevs 🦄kevinrpb@mastodon.social
    Sep 22, 2024, 12:06 AM

    Then, I wrap the chat message in a TimelineView to drive the animation. The timeline context is passed to the text renderer, which then reads the attribute to get the necessary frames, and uses the timeline context to pick which frame needs to be rendered

    The relevant WWDC session (developer.apple.com/videos/pla) and the snippets shared by @dlx were really helpful in getting comfortable with the renderer, which is an extremely powerful tool in SwiftUI.

    (9/x)

    #SwiftUI

    💬 1🔄 0⭐ 0
  • Kevs 🦄kevinrpb@mastodon.social
    Sep 22, 2024, 12:08 AM

    Other than that, the app will support things that you'd probably expect from it. Some obvious ones are searching for channels (duh) or viewing the details of a specific channel (so you can see the name of that juicy emote).

    (These UIs are WIP at the moment).

    (10/x)

    #SwiftUI

    Screenshot of an iOS app. There is a search bar and some results matching the query.
    Screenshot of an iOS app. A sheet is presented over a chat. It shows the details of a specific message, such as the sender, the motes in the message and the badges the sender has.
    💬 1🔄 0⭐ 0
  • Kevs 🦄kevinrpb@mastodon.social
    Sep 22, 2024, 12:08 AM

    I also want to allow some form of customization, at the minimum setting a color scheme override and setting an accent color.

    I have also implemented opt-in into using recent-messages.robotty.de/, which allows loading the recent history of a chat (if available) on joining it.

    (11/x)

    #SwiftUI

    Screenshot of an iOS app. There is a settings screen that has controls to select the theme of the app, the accent color and a toggle to load recent messages.
    💬 1🔄 0⭐ 0
  • Kevs 🦄kevinrpb@mastodon.social
    Sep 22, 2024, 12:09 AM

    I have many more features in the backlog, but the app is now in an MLP state that I am happy to share.

    I need to do a bit of polishing and fix a few bugs, but hopefully I will be able to send it to TestFlight in the next couple weeks.

    I also want to keep updating this thread with the progress I make.

    (12/x)

    #SwiftUI

    💬 0🔄 0⭐ 0