-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Add sort by date in history page #7157
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: development
Are you sure you want to change the base?
Add sort by date in history page #7157
Conversation
Hi @anurag2787 nice to see a pr from you again. Did you already take a look at #6214 and the feedback we left on that |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Copilot reviewed 5 out of 6 changed files in this pull request and generated 1 comment.
Files not reviewed (1)
- src/renderer/views/History/History.css: Language not supported
Comments suppressed due to low confidence (1)
static/locales/en-US.yaml:53
- There is a trailing whitespace at the end of the 'Latest First' text which should be removed for consistency.
DateNewestHistory: Latest First
:value="sortOrder" | ||
:select-names="sortByNames" | ||
:select-values="sortByValues" | ||
:icon="getIconForSortPreference(setHistorySortOrder)" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The getIconForSortPreference function is receiving setHistorySortOrder as its argument; it likely should receive the current sort order (e.g., the value from sortOrder) to determine the correct icon.
:icon="getIconForSortPreference(setHistorySortOrder)" | |
:icon="getIconForSortPreference(sortOrder)" |
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
tested how copilot would work on this PR. Please disregard if this is a non issue.
Head branch was pushed to by a user without write access
In getIconForSortPreference function instead of passing setHistorySortOrder i have passed the value of it sortOrder so that it can determine the correct icon |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Icon doesnt change like on other pages.
VirtualBoxVM_4KNwAlFBhV.mp4
static/locales/en-US.yaml
Outdated
@@ -49,6 +49,8 @@ Global: | |||
Live: Live | |||
Community: Community | |||
Sort By: Sort By | |||
DateOldestHistory: Oldest First |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
DateOldestHistory: Oldest First | |
DateOldestHistory: Earliest Watched First |
static/locales/en-US.yaml
Outdated
@@ -49,6 +49,8 @@ Global: | |||
Live: Live | |||
Community: Community | |||
Sort By: Sort By | |||
DateOldestHistory: Oldest First | |||
DateNewestHistory: Latest First |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
DateNewestHistory: Latest First | |
DateNewestHistory: Latest Watched First |
Head branch was pushed to by a user without write access
Fixed Icon change like on other pages 12.04.2025_12.46.03_REC.mp4Also Updated history sort labels |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Head branch was pushed to by a user without write access
I have fixed it, the new translation keys now been added to the History instead of Global |
Not quite done reviewing
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
issue (blocking): When setting order to Earliest Watched First
and then new history entries are added, they're shown at the start instead of the end, despite them being the latest entries watched. I believe this is because upsertToHistoryCache
is not updated to handle non-default sort methods.
|
||
const state = { | ||
historyCacheSorted: [], | ||
useAscendingOrder: HISTORY_SORT_BY_VALUES.DateAddedNewest, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useAscendingOrder: HISTORY_SORT_BY_VALUES.DateAddedNewest, | |
sortOrder: HISTORY_SORT_BY_VALUES.DateAddedNewest, |
suggestion: Update variable name and concomitant uses to better reflect its type (sort type, not boolean).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Sort History by Earliest
- Open new Window
- Go to History page
- See that its sorted by Latest
It should be also sorted by Earliest
Hy, since i have worked on similar feature #7139 where i migrated the playlist sort preference from sessionStorage to Vuex store to persist it across sessions so I'd like to confirm for the history sort preference should i follow same approach and store it in Vuex or prefer to store in sessionStorage instead? |
In vuex settings store, that way it will also get remembered across app launches. As a general rule unless there is an extremely good reason, you should not be putting anything in session storage in FreeTube. As for the sorting itself, I feel like this pull request is a bit over engineered. If we break it down the goal is to implement an option to keep the order the the history is already in (newest to oldest) or have it in the reverse order (oldest to newest). That means that the The entire sorting could be handled by changing the existing historyCacheSorted computed on the history page, without needing to modify anything in the history store: historyCacheSorted: function () {
const historySorted = store.getter.getHistoryCacheSorted
if (this.historySortOrder === HISTORY_SORT_BY_VALUES.DateAddedOldest) {
return historySorted.toReversed()
} else {
return historySorted
}
} |
Head branch was pushed to by a user without write access
6f10c83
to
d25f09b
Compare
Head branch was pushed to by a user without write access
I’ve simplified the implementation as per the feedback and removed the over engineered sorting logic. Additionally i have stored the user history sort preference in the Vuex settings store ensuring it persists across app launches |
Sorting doesnt change when user uses keywords to filter VirtualBoxVM_bS3GY5q9CD.mp4 |
Head branch was pushed to by a user without write access
I have fixed the issue. This was happening because of filterVideosWithQuery has a hardcoded .sort((a, b) => b.timeWatched - a.timeWatched) which overrode the selected sort order. |
Its better but not quite the same UX as how other dropdowns behave VirtualBoxVM_VZJVmscjhk.mp4 |
I have checked carefully but i am still having trouble in spotting exactly what behavior is different between my dropdown and the expected one could you please elaborate a bit more |
@anurag2787 so in the first few seconds of the video the following happens. When sort order changes it automatically also changes in the other window. When i navigate towards the History page this doesnt happen |
Head branch was pushed to by a user without write access
Thanks for clarifying I see the issue now and have fixed it so that the sort order syncs correctly |
This PR is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 14 days. |
Apologies for the wait. We will get back to reviewing this as soon as possible |
Need all the test cases in testing section...
I definitely miss something I dunno what... |
Pull Request Type
Related issue
closes #5595
Description
In this PR i have added sort button in the history page where allowing user can organize their watch history either by Latest First or Oldest First where it will shows the watch history in ascending or descending order
Sort By Oldest First
Sort By Latest First
Desktop