UI Updates

[jchue]

Clear and concise description of the problem

Hi, great project so far. I'm not a UX expert, but I'd like to help redesign and develop the UI.

Suggested solution

I've taken the liberty of mocking up what is currently the "Podcast" page. I'd like to call out a few things:

• I renamed the page from "Podcast" to "All Subscriptions," which is a bit clearer to me, especially since "Favorites" is a subset.
• I think the Info page would better fit under/inside the Settings page, as it is outside of the core workflow of the app.
• I think it would eventually make more sense to also move the language selection to the Settings page. I would think that once set, it shouldn't change often. But for now, I've left it where it is.
• I've tried to simplify the search/sort, but I'm not 100% satisfied with it. It'll need more iterations.
• I still have a bit more to do on this page, but I wanted to get your feedback before proceeding further. Also, what do you think about the look/feel/colors?

Thanks!

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[SamTV12345]

That looks really awesome. I really like the look and feel of it. It looks much cleaner than the UI I created.

[SamTV12345]

Could you please send me the color codes/the design schema? It's hard to get the colors just right.

[uGeek]

Very nice and modern interface. I like it very much! Congratulations.

[SamTV12345]

Yeah. I really like it.

[jchue]

Thanks for all the positive feedback; I'm glad you like it. You can access the mockup/prototype here. The colors are on the Color Palette page. However, they might change a bit as I flesh out the design system. I can let you know once I complete each page, so you can review. Would you want help with development once the designs are ready?

[SamTV12345]

Thanks. I started implementing the new theme. But I will wait once a page is done. We just need to sync together so we don't implement the same page twice. You can branch off feature/new-ui-theme.

[jchue]

Hi, I've completed wireframes for the majority of the pages. Would it be alright if I took point to develop the new UI? It would be easier to implement the global design system and avoid merge conflicts. Otherwise, let me know which pages you'd like me to work on.

Anyway, here are some notes about the primary features, but you can also look at the latest Penpot, as it includes more detail as well as the modals.

Note that the sidebar is static in all these wireframes, since I'm using the same component for it.

Home Page

• I didn't think it was useful to list the episodes the user last listened to, so I replaced it with a list of in progress episodes and a list of the latest episodes that have been released.
• I also thought it might be cool to have a brief section with stats. I don't know how difficult it would be to get these metrics.

All Subscriptions Page

• Honestly, looking at other podcast apps, I don't know how useful it is to have a search for the currently subscribed podcasts. But I've kept it for now.
• I added the ability to filter by topic. I don't know how difficult it would be to implement this.
• I also thought it would be cool to toggle between the currently grid view and a more linear list view (still need to create the wireframe).

Podcast Detail Page

• I removed the "Active" toggle, because I didn't see the use case for it.
• I moved the "Download to server" function from the modal to the base page above each episode's title.
• Instead of having the "i" button open up the details for each episode, each entire row should be clickable to open up the details.
• Once an episode is completed, the play button should turn into a checkmark.

Latest Episodes Page

• This was renamed from "Timeline." This should basically display the latest episodes from all the podcasts in reverse chronological order.
• The first tab is in list format, which includes all the episode details. This could probably use the same components as the Podcast Detail page.
• The second tab is basically what is on the Timeline page currently, where each day is a row with the episodes released on that day are listed.

[SamTV12345]

Thanks for the quick design templates. If you like to you can also implement it on your own. The sidebar has been done by @doba16 . So I Hope there is not much to do. The different pages definitely need to be implemented. We could also coordinate on which page to implement. Let me know which strategy you prefer.

Concerning the

• Homepage: Good idea. The metrics need to be implemented. I don't know if I extrapolate that from the watchlog as it records every movement/pause of the Audioplayer. So skipping around would influence that metric but I don't know how much a user would skip in episodes.

• All Subscriptions page: We definitely need the search bar as some of the users have 50-100 podcasts in their subscription. Filtering by topic could be done in the Frontend as the keywords are saved in a string. That toggle is a good idea I like it.

• Podcast Detail Page: We need the active button as this enables the user to disable the sync with the remote rss feed. This is necessary when a user stores a historic podcast which he just wants to keep on the device.

[SamTV12345]

The latest episode page also looks good. Is there a reason not to expand the items over the whole page?

With that the pages: Settings Info InvitePage AdministrationPage UserPage

are left to be designed. Do you want to do that in this pr or we delay that into a second pr to prevent this from overflowing with commits.

[jchue]

The sidebar has been done by @doba16 . So I Hope there is not much to do.

Ah, ok, great. Then I'll start working on some of the pages and come back to review the sidebar after. I might've changed the colors.

The different pages definitely need to be implemented. We could also coordinate on which page to implement. Let me know which strategy you prefer.

Maybe you're right; we can divide and conquer. I can start on the All Subscriptions and Podcast Detail pages.

Do you want to do that in this pr or we delay that into a second pr to prevent this from overflowing with commits.

It's up to you. One option would be to convert this into a continuing discussion (because more designs are below haha). Then you can let me know how you want me to submit PRs (one for everything, separate for each page, or a few for groups of pages).

---

Homepage: Good idea. The metrics need to be implemented. I don't know if I extrapolate that from the watchlog as it records every movement/pause of the Audioplayer. So skipping around would influence that metric but I don't know how much a user would skip in episodes.

If you want, we could put the stats on the backlog as a future enhancement.

All Subscriptions page: We definitely need the search bar as some of the users have 50-100 podcasts in their subscription. Filtering by topic could be done in the Frontend as the keywords are saved in a string. That toggle is a good idea I like it.

Sounds good; we'll keep the search.

Podcast Detail Page: We need the active button as this enables the user to disable the sync with the remote rss feed. This is necessary when a user stores a historic podcast which he just wants to keep on the device.

I can add the toggle back, though I need to think about the best place for it. I just didn't think that was really a use case. Would people really keep a stale podcast like that (rather than just removing it completely)?

The latest episode page also looks good. Is there a reason not to expand the items over the whole page?

I believe there have been studies that have shown that if paragraph width is too wide, users have trouble reading (due to the way eyes tend to scan the screen). Let me know if you prefer wider.

---

Here are the new ones (latest Penpot prototypes are here):

Global

• First of all, I moved the settings/admin to a menu at the top-right. I couldn't find a logout button in the existing build, so I added it. If auth isn't configured, we wouldn't show "User Administration" or "Log Out." And if auth is configured but the user isn't an admin, we shouldn't show "User Administration."

Settings Page

• I split up the page into different tabs. I'm still unsure whether it's better this way. Let me know.
• I named the first tab "Data Retention," and I moved the "Clean Up Now" button next to the first setting. I also changed "Number of initial podcasts to download" to "Initial episodes to download."
• On the "OPML Export" tab, I split up the two download options.
• I renamed the third tab from "Podcast naming" to "Naming Convention." I also combined both checkboxes into one "Renaming podcasts" section.
• On the "Manage Podcasts" tab, I tried to reword the buttons to be a little clearer on what they do. Also, in the future, maybe we could consider moving this delete functionality to the individual podcast detail page.

User Administration Page

• I renamed this from "Administration."
• On the "Users" tab, I removed the "#" column and moved the "edit role" button into the Role column. Also, as you can see in the Penpot prototype, I added a confirmation modal before deleting a user.
• On the "Invitations" tab, I renamed the "#" column to "ID" and moved the "copy link" button into it. In the Penpot prototype, there's a confirmation "tooltip" when you copy the link. Also, I added a confirmation modal before deleting an invitation.

[SamTV12345]

Great wireframes. Your UI design is really consistent. I have nothing to complain about. Great work.

[jchue]

Hi, @SamTV12345, I've completed the All Podcasts and Podcast Detail pages. Should I submit a PR or keep going?

[SamTV12345]

Hi @jchue , you're really quick. Yes please submit a PR. That way we don't iterate according to the waterfall and have at the end a "big bang". I'll review it in around 8 hours.

[jchue]

It's because I'm excited about this, and I'm really enjoying working on it. 😄

[SamTV12345]

I fixed the saved sorting order and did some optimizations to your code. I also noticed that the UI is currently not optimized at all. Before merging this we need to make sure it looks also good on mobile.

[jchue]

Thank you! And sorry about that. I will work on that next along with the header. I think I will also do the sidebar while I'm at it, since we are moving the settings.

[jchue]

@SamTV12345 Should I use the Radix dropdown menu for the notifications and user settings menu? It looks like it's edge-aware, so it would fix the overflow issue you mentioned.

[SamTV12345]

Yes please do so. Radix UI is awesome.

[SamTV12345]

I did some updates to the branch as I introduced a lot of changes in the main branch that also fix the timeline not loading when having a lot of podcasts :D. So 0 days of broken features ✅

Please do a rebase if you have any open development branches.

[jchue]

Thanks for the heads up!

[jchue]

Yes please do so. Radix UI is awesome.

This is the conclusion I am realizing as well. 😄

[jchue]

Hi @SamTV12345, I'm starting to look at the Timeline page, but I think I need assistance. Could you explain this condition and the purpose of the if statement?

https://github.com/SamTV12345/PodFetch/blob/e110a49e9fa8551a98de5add67515aaf627c8758/ui/src/pages/Timeline.tsx#L66

Is it just to differentiate episodes that were released on the current day vs. in the past?

[SamTV12345]

Yes. It's basically that. Currentdate is a string. If it is empty place a box in the UI. If it is already set but the next chronological podcast was released prior to that date also create a new box.

That way we have a box for every new date.

[jchue]

@SamTV12345 For checkboxes, would you prefer to use @tailwindcss/forms, @radix-ui/react-checkbox, or just keep them as the browser default?

[SamTV12345]

A custom radix checkbox would be great. I like the accessibility features of it.

[SamTV12345]

For now there is only the Homscreen left right?

[jchue]

Home is the last one I’ve designed, but I think there’s also Info, Mobile Search, Login, and Create User.

[jchue]

@SamTV12345 It looks like the /podcast/episode/lastwatched endpoint doesn't differentiate between completed vs. not completed episodes. Is there another one that can return only not completed ones? Or could you create a new endpoint? I guess I could filter for only episodes where watchedTime < totalTime. It wouldn't be ideal, but it could be a temporary solution.

Along the same lines, we will also need the /podcast/{id}/episodes endpoint on the Podcast Detail page to determine if an episode has been completed, so that the play icon can be replaced with a check icon.

[SamTV12345]

Yeah. I'm going to look into that. At what percentage would a podcast be completed.

[SamTV12345]

I'll check the problem out at the weekend. You can place some dummy data if you'd like. Then you don't need to wait for me.

[jchue]

At what percentage would a podcast be completed.

Hm, I'm not sure. What do you mean?

I guess there are two parts to this problem, the way I understand it.

The first, which might be the more complicated, is how to tell the back-end when an episode is completed. The way I understand it, the front-end currently only sends a request to /api/v1/podcast/episode to update the back-end with the completed time when you pause the episode. It doesn't look like it accounts for when the episode is played to the end, if another episode is started, or if the page is refreshed/navigated away. We could program the front-endto trigger an API call for the first two cases; but for the third case, would we need the player to call the API regularly (e.g., every 15 seconds)? Or is there some other protocol we could use?

The second is how the front-end can know when an episode has been completed. For the "last watched" section, the front-end can filter for only episodes with watchedTime < totalTime, which doesn't seem the most efficient, or the API can just return the unfinished episodes. And we would still need the API to return the status of each episode in the /api/v1/podcast/{id}/episodes endpoint for the "podcast detail" page.

But I was wondering - what is the /api/v1/podcast/episode/lastwatched endpoint supposed to do? Did you intend for it to only return unfinished episodes, or was it supposed to return all recent episodes, regardless of status?

[SamTV12345]

Yes. I think it's a lot of work to do. The lastwatched episodes should contain a time in seconds that says how far a user advanced in a podcast. I think it is limited to 20 different podcast episodes and it only returns the latest result. So when you stop an episode a log with your current time is saved to the database. But if you also want to list that on the PodcastDetailPage that requires some backend modification.

[jchue]

But if you also want to list that on the PodcastDetailPage that requires some backend modification.

Yes, won't we need that for #155?

[jchue]

I guess for now, I can just do a "re-skin" with the current functionality on the homepage (all recently listened) as well as the latest episodes, at least until the back-end is updated.

[jchue]

Alright, here are the remaining page designs.

System Information Page

• I moved all the graphs to the top and converted them to gauges, which I think makes more sense with the metrics they are showing.
• I'm still not 100% happy with the design, but I guess we can continue to make improvements over time.

Episode Search Page

• I renamed this from "Search podcasts."
• I added the ability to download each episode to the server and even to play the episode. Is there any reason not to add these?
• Is there any reason to only show this page on mobile?

Login Page

Create Account Page (from invitation)

Let me know what you think.

[SamTV12345]

Thank you for creating the designs. The drafts look phenomenal. It is because a mobile user can't press CTRL+F for searching the saved podcast episodes. So that way a mobile user can simply tap the menu and open it.

[jchue]

Ah, awesome. I had no idea there was a CTRL+F search. I'll need to update that one too. 😆

[SamTV12345]

I noticed a bug that I didn't saw in the minimal config I had for testing. The sidebar starts scrolling again. It was originally fixed by @doba16 but is now included in the release.

[SamTV12345]

Found a fix for the scrolling sidebar.