pocket-casts-ios
pocket-casts-ios copied to clipboard
Automattic
Update widget design
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
https://github.com/Automattic/pocket-casts-ios/assets/4081020/41fcc829-876a-481f-beee-6c8494270b90
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)
- View all of the widgets in the widget viewer, they should be ordered smallest to largest, new style design first and "contrast" styles second
- add all widget types to your homescreen
- Ensure you have a bunch of podcasts in your "up next" queue
- All widget sizes should match the designs
- For iOS 17 interactive widgets, try playing the podcast with the play buttons, they should start and update instantly
- Clicking anywhere else on a row should open the podcast in the app (all iOS versions)
- clear out your now playing list, leave 1 episode in "now playing"
- widgets should match the designs
- Remove the currently playing episode
- Go to your filters and make sure that the top filter has some episodes in it
- 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)
- Clear episodes from the top filter
- 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
- remove all pocket casts widgets
- return to trunk, build and run
- add all pocket casts widgets to your home screen
- switch back to this branch, build and run
- 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.mdif 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.
| 1 Warning | |
|---|---|
| :warning: | This PR is larger than 500 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews. |
Generated by :no_entry_sign: Danger
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
@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):
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 🙏
@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 |
|---|---|
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!
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.
I've updated the PR with the new grey colour instead of red for the dark mode widgets
| large | medium / small |
|---|---|
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.
@jgcaruso given this:
Given the feedback on Android when we replaced people's existing widgets, it would be great having both so there's less change.
Is this something you'd like to tackle or should we? Just want to know before we start reviewing that.
Is this something you'd like to tackle or should we? Just want to know before we start reviewing that.
I'm OK to add the new medium widget type, it shouldn't be too big of a job. I feel like it should be something I can follow up with quickly after this. But I'd still like to do it after this PR is wrapped up incase there are any fundamental changes requested in this PR if that makes sense?
But I'd still like to do it after this PR is wrapped up incase there are any fundamental changes requested in this PR if that makes sense?
Ok!
@jgcaruso just one thing that popped into my head and I think you probably thought about it too: for people already using the widgets, we should probably keep the previous appearance.
And, of course, have the new one as an option.
I think this should even be one of the testing steps: upgrade and ensure your widgets' appearance is similar to the one before.
Do you think the code will change much after doing these changes? Or it should be ok to review this one?
@jgcaruso just one thing that popped into my head and I think you probably thought about it too: for people already using the widgets, we should probably keep the previous appearance.
And, of course, have the new one as an option.
I think this should even be one of the testing steps: upgrade and ensure your widgets' appearance is similar to the one before.
Do you think the code will change much after doing these changes? Or it should be ok to review this one?
@leandroalonso So the way we thought to handle this was to give them the "contrast" theme, which is very close to the original, just with some Red detail on top rows vs Grey (for the lists). It is very close but not exactly the same. The new "2 tone" red variation is something you need to choose on purpose.
If you want to re-introduce the original widget styles, and just have the 2 new ones as options... I think we'd need to then provide all 3 as options in the widget chooser (instead of leaving the current style as the default, but not let new users select it). Unless there is some technique you have in the app for excluding certain things for users who are new vs legacy past a certain version?
As far as how much the code would change... it would just be a couple new widget entries in WidgetExtension/PocketCastsWidgetBundle.swift, a new Widget[xyz].swift file for each of the sizes (so 3 I think) and 2 new styles in WidgetExtension/Up Next/UpNextStyles.swift (for light and dark mode). It shouldn't fundamentally change this PR though, just add some code for the new styles. So you should be able to review this as-is and I can add it in later, if that is what you are asking.
It is very close but not exactly the same.
That's what I was mentioning!
If you want to re-introduce the original widget styles
No no no, that's not my intention.
I saw that this PR already includes the "contrast" version so it's ready. Sorry for the back and forth!
Tested this in the iPad and iOS using iOS 17 and its working correctly!
https://github.com/Automattic/pocket-casts-ios/assets/651601/95e154ca-8f2a-4833-b2f0-d0b53e128c35
I've also tested the Sonoma/iPhone integration and they are also looking good. One thing that I noticed is that sometimes the widgets can get a bit out of sync from the phone status, specially if you change the upnext or playing status on the phone it can take a while to update on MacOS. Is this expected?
I've also tested the Sonoma/iPhone integration and they are also looking good. One thing that I noticed is that sometimes the widgets can get a bit out of sync from the phone status, specially if you change the upnext or playing status on the phone it can take a while to update on MacOS. Is this expected?
So I'm not sure it is expected, but I'm also not sure we're doing anything special in order to get them to appear there. It is just leveraging whatever iOS already does to make widgets available on desktop.
One thing that I noticed is that sometimes the widgets can get a bit out of sync from the phone status, specially if you change the upnext or playing status on the phone it can take a while to update on MacOS. Is this expected?
I faced the same while testing with the old widget code. As @jgcaruso mentioned I don't think we do anything special...
I'm gonna test this a bit more but I propose we leave that for 7.68 given 7.67 has already some important changes.
@jgcaruso could you please waiting to merge this one so it goes to 7.68?
Sure thing! How will I know it is safe to merge?
Alternatively, feel free to merge this in when appropriate if there are no other requested changes. I'm not planning any additional changes at this point. Only thing planned at this point is a separate PR once this is merged in for the new medium size "Now Playing" widget
@leandroalonso 👍 Submitted in https://github.com/Automattic/pocket-casts-ios/pull/1864