[MBL-3167] Video Feed Bottom Overlay Components by scottkicks · Pull Request #2824 · kickstarter/ios-oss

scottkicks · 2026-04-06T15:50:16Z

📲 What

Adds a static bottom overlay components SwiftUI view to the VideoFeedViewController.
Includes all components from the designs except for the percent funded circle. The progress bar also isn't wire up to anything yet.

🤔 Why

This is where most of the campaign info will be

🛠 How

Building all overlay components via SwiftUI. Reminder that the main VideoFeedViewController is a UIViewController to help manage the video players later on. Found that SwiftUI wasn't the best at that in my SPIKE.

Add new icons and color
Create a VideoFeedOverlayView view and add a VideoFeedBottomOverlayView to it.
Add the new overlay view to VideoFeedCell (managed by the collection view in VideoFeedViewController.
Add snapshots

👀 See

Trello, screenshots, external resources?

After	Large Text

♿️ Accessibility

Works with VoiceOver
Supports Dynamic Type

✅ Acceptance criteria

Bottom overlay includes, campaign tags, CTA, creator, campaign name, and progress bar view
New colors and icons are added and being used

amy-at-kickstarter

I have a few requested changes on VideoFeedCell (namely using contentConfiguration). These rest are non-blocking suggestions.

amy-at-kickstarter · 2026-04-06T20:46:13Z

KDS/Sources/KDS/Colors/Colors.swift

+          lightMode: .gray_550,
+          lightModeAlpha: 0.24,
+          darkMode: .gray_550,
+          darkModeAlpha: 0.25


Is it intentional that the lightModeAlpha and darkModeAlpha are different by 0.01?

amy-at-kickstarter · 2026-04-06T20:47:22Z

...ler/__Snapshots__/VideoFeedViewControllerTests/testView_VideoFeedCell.lang_en_device_pad.png

Love a screenshot test 👍 Is it possible to set up the test so that the overlay has something dark behind it? It's a bit hard to see, as-is. (But not a blocker.)

amy-at-kickstarter · 2026-04-06T20:48:48Z

...rk-iOSTests/Kickstarter-iOS/Features/VideoFeed/Controller/VideoFeedViewControllerTests.swift

+          height: device.deviceSize.height
+        ))
+
+        cell.configureWith(value: .init(


Nit: I find it easier to read if the initializer is referenced by name, like

Suggested change

cell.configureWith(value: .init(

cell.configureWith(value: VideoFeedItem(

amy-at-kickstarter · 2026-04-06T20:49:28Z

...rk-iOSTests/Kickstarter-iOS/Features/VideoFeed/Controller/VideoFeedViewControllerTests.swift

+
+        assertSnapshot(
+          matching: cell,
+          as: .image(perceptualPrecision: 0.98),


Nit: Does it need the lower precision to work?

amy-at-kickstarter · 2026-04-06T20:51:56Z

...rk/Sources/Kickstarter-Framework/Kickstarter-iOS/Features/VideoFeed/Cell/VideoFeedCell.swift

  static let reuseIdentifier = "VideoFeedCell"

-  private let titleLabel = UILabel()
+  private var overlayHostingController: UIHostingController<VideoFeedOverlayView>?


This cell should use self.contentConfiguration instead of embedding a UIHostingController. Having embedded view controllers can be finicky to get working consistently, especially with cell recycling.

amy-at-kickstarter · 2026-04-06T20:54:20Z

...k/Sources/Kickstarter-Framework/Kickstarter-iOS/Features/VideoFeed/Model/VideoFeedItem.swift

@@ -2,5 +2,22 @@ import Foundation

 public struct VideoFeedItem {


Nice to see this as a simple plain-ol'-swift struct.

amy-at-kickstarter · 2026-04-06T20:55:43Z

...tarter-Framework/Kickstarter-iOS/Features/VideoFeed/Overlay/VideoFeedBottomOverlayView.swift

+
+  var body: some View {
+    HStack(spacing: Constants.iconSpacing) {
+      Image(self.icon)


This should use Library.imageNamed(self.icon) instead of creating an image directly from the string. We do some bundle magic in our tests to get images working - changing this will make the pill icons show up in your screenshot tests.

Huh i'm not seeing imageNamed in the codebase anywhere

Whoops, I told you the wrong name. It's Library.image(named:). See: https://github.com/kickstarter/ios-oss/blob/main/Library/Sources/Library/Library/Image.swift#L3-L9

amy-at-kickstarter · 2026-04-06T20:56:15Z

...tarter-Framework/Kickstarter-iOS/Features/VideoFeed/Overlay/VideoFeedBottomOverlayView.swift

+      FeedPillView(icon: "video-feed-clock-icon", text: self.item.secondaryPillText)
+    }
+    .accessibilityElement(children: .combine)
+    .accessibilityLabel("\(self.item.categoryPillText), \(self.item.secondaryPillText)")


Is there a reason the label is applied to the HStack and not to the individual pills?

Its just my preference for VoiceOver. Like this it'll read as one "Film, 23 days left" which I feel like is a smoother experience than having a pause in between the two. I'm open to changing it since we don't have a defined VoiceOver pattern for things like this.

That makes sense - can you throw that in a comment?

amy-at-kickstarter · 2026-04-06T20:58:52Z

...tarter-Framework/Kickstarter-iOS/Features/VideoFeed/Overlay/VideoFeedBottomOverlayView.swift

+}
+
+/// Custom frosted glass background view.
+private struct FrostedGlassBackground: UIViewRepresentable {


Do we need a custom glass effect? Can we use glassEffect(in:) instead?

glassEffect is only available in ios 26, but I could check how it looks compared to the designs and add a version conditional

Ok yeah glass effect doesn't offer much flexibility in terms of adjusting the amount of "frost", and by itself its a way too frosty compared to the designs, so I think a simple custom FrostedGlassBackground like this is the way to go

Roger that. Two thoughts:

Should FrostedGlassBackground be public and in its own file, so we can reuse it?

Can you throw this extra context in a comment?

Yea! My plan is to iteratively make changes like this as needed in this feature. I'll end up reusing it for the video overlay controls, so making it public will be the move, but I tend to prefer keeping each PR contained within the context of its changes, if that makes sense.

I'll definitely add a context comment

amy-at-kickstarter · 2026-04-06T21:00:00Z

.../Kickstarter-Framework/Kickstarter-iOS/Features/VideoFeed/Overlay/VideoFeedOverlayView.swift

+    ZStack(alignment: .bottom) {
+      self.topGradient
+        .ignoresSafeArea()
+        /// Hidden so VoiceOver jumps straight to the interactive overlay.


I like this comment

nativeksr · 2026-04-07T14:36:47Z

SwiftLint found issues

Warnings

File	Line	Reason
VideoFeedBottomOverlayView.swift	93	Images that provide context should have an accessibility label or should be explicitly hidden from accessibility (accessibility_label_for_image)

Generated by 🚫 Danger

kickstarter deleted a comment from nativeksr Apr 6, 2026

scottkicks self-assigned this Apr 6, 2026

scottkicks marked this pull request as ready for review April 6, 2026 16:58

scottkicks requested a review from amy-at-kickstarter April 6, 2026 16:59

amy-at-kickstarter requested changes Apr 6, 2026

View reviewed changes

Base automatically changed from scott/videofeed/mbl-3063 to main April 6, 2026 21:08

scottkicks changed the title ~~Scott/videofeed/mbl 3167~~ [MBL-3167] Video Feed Bottom Overlay Components Apr 6, 2026

scottkicks added 10 commits April 7, 2026 09:38

add bottom overlay fields to VideoFeedItems

459e6d8

add new pill view icon svg assets

b22ff8c

create VideoFeedOverlay and VideoFeedBottomOverlay

5c519ca

add the overlay to the VideoFeedCell

838e48e

add a snapshots

4120bf2

setup prepareForReuse

74cae52

fix safe area inset bug

04e0556

accessibility support

8a3df52

update gradient height to match designs

68d079b

pr feedback cleanup

d390033

scottkicks force-pushed the scott/videofeed/mbl-3167 branch from f622180 to d390033 Compare April 7, 2026 14:43

scottkicks requested a review from amy-at-kickstarter April 7, 2026 15:00

scottkicks added 2 commits April 7, 2026 10:38

helpful voiceover comment

9a1ddbd

use Library.image(named:)

fecb0c9

	cell.configureWith(value: .init(
	cell.configureWith(value: VideoFeedItem(

		@@ -2,5 +2,22 @@ import Foundation

		public struct VideoFeedItem {

Conversation

scottkicks commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📲 What

🤔 Why

🛠 How

👀 See

♿️ Accessibility

✅ Acceptance criteria

Uh oh!

amy-at-kickstarter left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

scottkicks Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nativeksr commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SwiftLint found issues

Warnings

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

scottkicks commented Apr 6, 2026 •

edited

Loading

scottkicks Apr 7, 2026 •

edited

Loading

nativeksr commented Apr 7, 2026 •

edited

Loading