Add categories & single category page

mykhailodanilenko commented 3 weeks ago

🚀 Description

This PR adds a Categories page and a single category page; also thumbnail path is renamed to previewPath everywhere (commit b0a580eecc54a0f0968c0a15ece106dce9dc80e0); see at https://mykhailodanilenko.github.io/web-client/

📄 Motivation and Context

closes #149

🧪 How Has This Been Tested?

Web & mobile

📦 Types of changes

[ ] Bug fix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

✅ Checklist (copied from README)

[x] Squash your changes into a single clear and thoroughly descriptive commit, split changes into multiple commits only when it contributes to readability
[x] Reference the GitHub issue that you are contributing on in your commit title or body
[x] Sign your commits, as this is required by the automated GitHub PR checks
[x] Ensure that the changes adhere to the project code style and formatting rules by running npx eslint . and npx prettier --check ../ from the ./OwnTube.tv/ directory (without errors/warnings)
[x] Include links and illustrations in your pull request to make it easy to review
[x] Request a review by @mykhailodanilenko, @ar9708 and @mblomdahl

mblomdahl commented 3 weeks ago

Note to self: Adding the figma alignment label, on having the "Uncategorized" category listed before all other categories. Applies to the site overview page, the root-level Categories page, and the Categories within Channel page.

mykhailodanilenko commented 3 weeks ago

@mblomdahl you are trying to open this page on an instance which doesn't have any videos categorized, that is why the screen is empty - no categories, no videos in categories. issue #153 mentions this and can be prioritized to prevent such situations from happening sooner than later. also, an "empty" state for pages and page blocks could help let the user know what is going on.

regarding the categoryOneOf[] param, this is one of the ways you can pass an array in query params, the Peertube built-in frontend, for example, chooses a different approach and sends multiple query params like in the screenshot. if there is a need to adhere to a specific approach here let me know and I'll take a look at what we can tweak in axios for that. in any case, we are now only fetching one category at a time so we can just pass a single number instead of an array with length of 1

mblomdahl commented 3 weeks ago

@mblomdahl you are trying to open this page on an instance which doesn't have any videos categorized, that is why the screen is empty - no categories, no videos in categories. issue #153 mentions this and can be prioritized to prevent such situations from happening sooner than later. also, an "empty" state for pages and page blocks could help let the user know what is going on.

/.../

Is I understand after researching into #153, "Uncategorized" won't be reality anytime soon (weeks away). Could we please add the empty state you hinted at, upon finding that there are not any videos in any category, then we'd show a text on the root-level Categories page informing the user, "There are not any categorized videos on this site"? Right now, it's pretty confusing, many sites don't use categories and it's unclear if the page is broken/hanging, or if there's simply nothing to see there (in which case a un-techy user might ask "why do they show a Categories menu item, when it's nothing there!? 🤯").

OwnTube-tv / web-client