Update widget design

[jgcaruso]

Updates to widgets based on new designs Lkt7fuf9Nq3XvfAFPCfpTD-fi-995_4119

Also introduces a PCWidgetColorScheme struct to store different collections of colours to be passed to the different versions of the widgets to support a new style and a "contrast" style that is more like the current widgets.

cc @david-gonzalez-a8c

Some screenshots

The widget chooser

Screen.Recording.2024-01-04.at.4.57.03.PM.mov

iPhone 13 mini in dark mode (widget doesn't change based on light/dark mode)

new large	new small / medium	old/contrast large	old/contrast small / medium

iPhone 15

default text small / medium	default text large	max text size small/medium	max text size large

iPhone 15 - other widgets

empty state	empty state	filter widgets new style	filter widgets contrast

Desktop widgets

ios 16 non-interactive

small / medium	large	now playing (empty) and filter	large filter

To test

Test on an iOS 17 device (for interactive widgets) and a lower iOS version (for non interactive widgets)

1. View all of the widgets in the widget viewer, they should be ordered smallest to largest, new style design first and "contrast" styles second
2. add all widget types to your homescreen
3. Ensure you have a bunch of podcasts in your "up next" queue
4. All widget sizes should match the designs
5. For iOS 17 interactive widgets, try playing the podcast with the play buttons, they should start and update instantly
6. Clicking anywhere else on a row should open the podcast in the app (all iOS versions)
7. clear out your now playing list, leave 1 episode in "now playing"
8. widgets should match the designs
9. Remove the currently playing episode
10. Go to your filters and make sure that the top filter has some episodes in it
11. view the widgets again, they should look pleasing (but not exactly like designs, these weren't designed i just applied some common colours to them because there is too much shared code between the widgets to leave them the way they were)
12. Clear episodes from the top filter
13. View the widgets again, they should look pleasing and show the empty widget state

Test on an iOS 17 device, linked to a MacOS Sonoma mac for Desktop widgets

• ensure your mac and test phone are on the same icloud account
• if you have multiple phones you can choose which phone is used for widgets in System Settings ➝ Desktop & Dock, and in the "‌Widgets‌" section, click the ‌iPhone‌ dropdown
• add widgets to your desktop by right-clicking on the desktop -> Edit Widgets, search for Pocket Casts then add the widgets

Update experience

1. remove all pocket casts widgets
2. return to trunk, build and run
3. add all pocket casts widgets to your home screen
4. switch back to this branch, build and run
5. all widgets should still be on the home screen and should be using the "contrast" style, not the new style

Checklist

• I have considered if this change warrants user-facing release notes and have added them to CHANGELOG.md if necessary.
• I have considered adding unit tests for my changes.
• I have updated (or requested that someone edit) the spreadsheet to reflect any new or changed analytics.

[pocketcasts]

	2 Warnings
⚠️	This PR is larger than 500 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.
⚠️	PR is not assigned to a milestone.

Generated by 🚫 Danger

[leandroalonso]

widget doesn't change based on light/dark mode

Is this intentional? Showing white while the rest of the system is dark is pretty bad IMHO. Also, if we look at all Apple widgets (such as Calendar, News, Notes) they have a white background if light mode is set and a dark background if dark mode is set. I think this is a pattern we should follow. @david-gonzalez-a8c

[leandroalonso]

@jgcaruso it seems that on iOS 16- devices the color of the subtitle on the red widget is the wrong color (check the "now playing" on the first widget vs the 3rd):

[david-gonzalez-a8c]

I think this is a pattern we should follow. @david-gonzalez-a8c

Good catch, I agree. Honestly, that didn't cross my mind. I've updated with the specs with a dark-theme version of the white background widgets, as I believe it would only affect those.

It would be great if we can implement these too 🙏

[jgcaruso]

@leandroalonso Latest commits have a fix for the iOS 16 text colour in the Now Playing widget and a return of dark mode for the "Contrast" style widgets

cc @david-gonzalez-a8c

iOS 16

light	dark

iOS 17

light	dark

[david-gonzalez-a8c]

We've been getting a lot of harsh feedback about the changes in the new Android widgets, specially regarding the red backgrounds, so I think we should tread very carefully with these. I'm less concerned here since we provide a more neutral option and people with the current widget will get those, but now I'm reconsidering the dark theme L version.

Can we please make adjustments and replace the red (#D9201C) for this dark grey (#292B2E) in this version only? I feel like it looks better now.

Sorry if I'm missing something or if we've discussed this already, but I see that the M version doesn't match the specs.

Thank you!

[jgcaruso]

Hey @david-gonzalez-a8c 👋

Can we please make adjustments and replace the red (#D9201C) for this dark grey (#292B2E) in this version only? I feel like it looks better now.

That should be pretty quick to take care of. I'll try to swap those out in the next day or 2.

Sorry if I'm missing something or if we've discussed this already, but I see that the M version doesn't match the specs.

I think I left this out for now because it was a brand new layout, and I wanted to make sure all the other big changes being made were OK before doing something new.

While we're on the subject though, I don't remember if it was decided if this new layout should replace the existing 2 podcast list, or if it should be a new one added in addition to it? We can have both of them if you want to keep it around. One will just be a Medium "now playing" vs a Medium "up next" widget.

[jgcaruso]

I've updated the PR with the new grey colour instead of red for the dark mode widgets

large	medium / small

[david-gonzalez-a8c]

I think I left this out for now because it was a brand new layout, and I wanted to make sure all the other big changes being made were OK before doing something new.

Given the feedback on Android when we replaced people's existing widgets, it would be great having both so there's less change.