Make history page remember last query string & search limit #5192

PikachuEXE · 2024-05-30T06:34:12Z

Pull Request Type

Bugfix
Feature Implementation
Documentation
Other

Related issue

Description

Make several page types remember last query string & search limit to deal with

Search in history
Found a few videos
View one of them, go back last page, oops not filtered

Page types:

History page
Channel tab (Channel List for current profile)
User Playlists page
Single User Playlist page
Single Channel page

Screenshots

No video I am lazy

Testing

Ensure last used search query and data limit restored when revisiting history page
Ensure they are not restored after clearing query text / in new window
Ensure no 2 time rendering on page initial render

Desktop

OS:
OS Version:
FreeTube version:

Additional context

There are 2 commits & first one is refactor
Might easier to review per commit

efb4f5ff-1298-471a-8973-3d47447115dc · 2024-05-30T20:43:23Z

I understand where you're are coming from but this behavior is also not apparent in Playlists tab, Channel tab, and a Channel page.

Channel page one also applies to Nr 6 on the list of issue #2446 which is a way bigger issue

Just to clarify im not against this but I think we should do it for all pages instead of one for the sake of a consistent UX

kommunarr · 2024-05-31T00:29:47Z

I'd also like to know rationale, as I don't see any requests for this. I'm not necessarily opposed to it, but I don't have any reason to believe that the app remembering my last query would cause fewer irksome moments than the app not remembering it.

PikachuEXE · 2024-05-31T01:31:19Z

Making it work like search query page
I realize this when searching in history (and several videos popup), click one of them, not the one I want, go back, oops
Though I can always open in new windows (but mobile can't do it?)
Up to you guys

kommunarr · 2024-05-31T13:46:20Z

If you want, you can share the build & I can try it out for a while in personal use. It sounds nice in theory, but it feels more horizontal of a change for the use cases where you want to go to the initial page state & now have to click to clear the input. The search bar is also omnipresent, so you wouldn't ever forget what was going on, but here I could see it leading to momentary confusion and re-familiarizing yourself with the context of what's going on & what you were searching beforehand. Seems like maybe "open in a new tab" covers the type of use case you're mentioning better (albeit I guess not if you didn't expect to misclick).

PikachuEXE · 2024-06-03T05:52:06Z

Used router.replace to ensure the query text restored only on clicking back
Clicking on history link won't restore it

About the catch after replace:
https://v3.router.vuejs.org/guide/advanced/navigation-failures.html

Update 1: Use my custom build if you want - https://github.com/PikachuEXE/FreeTube/actions/runs/9345433122

efb4f5ff-1298-471a-8973-3d47447115dc · 2024-06-30T18:47:37Z

Just to clarify im not against this but I think we should do it for all pages instead of one for the sake of a consistent UX

Just retested it but my opinion on this hasnt changed.

PikachuEXE · 2024-06-30T22:31:57Z

@efb4f5ff-1298-471a-8973-3d47447115dc
Can you list all the page types so I won't miss any on next update?

kommunarr · 2024-06-30T22:39:50Z

That sounds like it would be a pretty sizable change to the codebase for a small feature. I would personally advise putting this one on the backburner just because I'm not sure if the feature would provide enough utility versus the effort to maintain it.

github-actions · 2024-07-29T01:51:52Z

This PR is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 14 days.

efb4f5ff-1298-471a-8973-3d47447115dc · 2024-08-01T15:09:23Z

@efb4f5ff-1298-471a-8973-3d47447115dc Can you list all the page types so I won't miss any on next update?

Sure:

FT Channel tab
User Playlist tab main view
Inside User Playlist
Creator Channel page

efb4f5ff-1298-471a-8973-3d47447115dc · 2024-08-01T15:18:40Z

Q: Why does it take a while for the thumbnails to appear when navigating back to the History tab? Why isnt it instantly shown?

VirtualBoxVM_bZgbgCWrV7.mp4

github-actions · 2024-08-16T16:36:05Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

PikachuEXE · 2024-08-20T01:12:09Z

Q: Why does it take a while for the thumbnails to appear when navigating back to the History tab? Why isnt it instantly shown?

Fixed

github-actions · 2024-08-20T01:12:14Z

Conflicts have been resolved. A maintainer will review the pull request shortly.

PikachuEXE · 2024-08-20T02:48:27Z

FT Channel tab
User Playlist tab main view
Inside User Playlist
Creator Channel page

Also done but for the Creator Channel page one I am not really confident (even though I tested it a bit

…en going back

…going back

… back

PikachuEXE · 2024-10-12T02:48:09Z

Change

        if (isNewSearch) {
          this.searchResults = results
        } else {
          this.searchResults = this.searchResults.concat(results)
        }

to

        if (isNewSearch) {
          this.searchResults = results
          results.forEach(e => {
            if (e.type === 'video') console.log(`${e.type}: ${e.videoId}`)
            else if (e.type === 'playlist') console.log(`${e.type}: ${e.playlistId}`)
            else console.log(`${e.type}`)
          })
        } else {
          this.searchResults = this.searchResults.concat(results)
        }

searchChannelLocal is not modified by this PR

efb4f5ff-1298-471a-8973-3d47447115dc · 2024-10-12T07:35:12Z

Left one is just a normal search. Right one is when coming back to the channel page

* development: (35 commits) Translated using Weblate (Hungarian) Translated using Weblate (French) Translated using Weblate (Chinese (Simplified Han script)) Translated using Weblate (Serbian) Translated using Weblate (Italian) Translated using Weblate (English (United Kingdom)) Translated using Weblate (French) Translated using Weblate (Czech) Translated using Weblate (Bulgarian) Translated using Weblate (Italian) Translated using Weblate (Turkish) Translated using Weblate (German) Translated using Weblate (Spanish) Add Playlist Sort By Video Duration (FreeTubeApp#5627) Translated using Weblate (Estonian) Translated using Weblate (Italian) Translated using Weblate (French) Translated using Weblate (Chinese (Simplified Han script)) Translated using Weblate (Serbian) Translated using Weblate (Serbian) ...

PikachuEXE · 2024-10-12T08:22:49Z

I can simply find a channel and type something on search input and keep pressing enter and gets results sorted slightly differently sometimes
The one with thumbnail "Dumb but good" I have seen it on 4th place most of the time, but 2nd & 3rd place sometimes

Update 1: If you try IV API it's even more random, I even saw a playlist jump to 3rd place once

Screen.Recording.2024-10-12.at.16.20.05.mp4

absidue · 2024-10-12T09:16:04Z

As the goal of this pull request seems to have changed a lot, could you please update the pull request description and title with what this pull request actually does.

src/renderer/views/Channel/Channel.js

PikachuEXE · 2024-10-13T00:24:37Z

@absidue
Both fixed

efb4f5ff-1298-471a-8973-3d47447115dc · 2024-10-15T20:02:47Z

It briefly shows that there are 0 results for the search i made before showing the actual search results

VirtualBoxVM_POiZPMF3AU.mp4

Edit: it also seems to do this on dev branch so i dont think its related to this PR but i could be wrong.

* development: (30 commits) Translated using Weblate (Azerbaijani) Translated using Weblate (French) Translated using Weblate (Estonian) Bump the babel group with 3 updates (FreeTubeApp#5858) Bump electron-builder from 25.1.7 to 25.1.8 (FreeTubeApp#5862) Bump stylelint from 16.9.0 to 16.10.0 in the stylelint group (FreeTubeApp#5860) Bump the eslint group with 2 updates (FreeTubeApp#5859) Bump globals from 15.10.0 to 15.11.0 (FreeTubeApp#5861) Bump sass from 1.79.4 to 1.79.5 (FreeTubeApp#5863) Bump electron from 32.1.2 to 32.2.0 (FreeTubeApp#5864) Translated using Weblate (Icelandic) Translated using Weblate (Russian) Translated using Weblate (Hebrew) Translated using Weblate (Chinese (Traditional Han script)) Translated using Weblate (Italian) Translated using Weblate (Chinese (Simplified Han script)) Translated using Weblate (Serbian) Translated using Weblate (Czech) Translated using Weblate (Japanese) Translated using Weblate (Portuguese (Brazil)) ...

PikachuEXE · 2024-10-16T01:47:38Z

@efb4f5ff-1298-471a-8973-3d47447115dc
I just fixed this for search tab only
Since the data isElementListLoading for all tabs if any tab's data finished loading it shows the result too early
I introduced another state for search tab only (no need for other tabs yet coz PR is not for remembering other tabs)

absidue

As we are now adding the data limits to the URLs, there isn't really a need to duplicate them into session storage too, so we can probably remove that code.

Additionally the code for the channel page seems a bit messy, but in an unusual move for me I think I would be okay with it, assuming that it will be refactored soon anyway when we migrate the component to the composition API or start saving the selected tab in the URL, whichever happens sooner.

efb4f5ff-1298-471a-8973-3d47447115dc

To future after RC reviewer me: LGTM

PikachuEXE · 2024-10-17T00:25:08Z

@absidue
dataLimit and searchDataLimit and separated and I don't intend to introduce more changes to this already big PR causing potentially more stuff to test = more chances to break something

I can make a PR later for storing dataLimit into route instead of session storage (which might cause behaviour change, another reason to not do so in this PR

github-actions · 2024-11-23T14:57:55Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

* development: (273 commits) Translated using Weblate (Serbian) Translated using Weblate (Czech) Translated using Weblate (French) Translated using Weblate (German) Translated using Weblate (Spanish) Fix text colour in player overflow menu (FreeTubeApp#6213) Add warning message to proxy settings (FreeTubeApp#6099) Migrate SubscribedChannels view to Composition API (FreeTubeApp#6131) Translated using Weblate (Croatian) Translated using Weblate (English (United Kingdom)) Translated using Weblate (Afrikaans) Translated using Weblate (Afrikaans) Better player error handling (FreeTubeApp#6180) Translated using Weblate (Arabic) Translated using Weblate (Afrikaans) local API: Fix playlists and podcasts not appearing in search results (FreeTubeApp#6196) Translated using Weblate (Serbian) Translated using Weblate (Hungarian) Bump shaka-player from 4.11.11 to 4.12.1 (FreeTubeApp#6193) Translated using Weblate (French) ... # Conflicts: # src/renderer/views/SubscribedChannels/SubscribedChannels.js

github-actions · 2024-11-24T01:02:20Z

Conflicts have been resolved. A maintainer will review the pull request shortly.

absidue

I haven't got round to testing the pull request yet, so for the moment here is a code review with a bunch suggestions and one question.

absidue · 2024-11-27T06:53:22Z

src/renderer/components/ChannelDetails/ChannelDetails.vue

@@ -207,6 +207,7 @@
          v-if="showSearchBar"
          ref="searchBar"
          :placeholder="$t('Channel.Search Channel')"
+          :value="props.query"


Suggested change

:value="props.query"

:value="query"

absidue · 2024-11-27T06:54:28Z

src/renderer/views/Channel/Channel.vue

      class="card channelDetails"
      @change-tab="changeTab"
-      @search="newSearch"
+      @search="(v) => newSearchWithStatePersist(v)"


Suggested change

@search="(v) => newSearchWithStatePersist(v)"

@search="newSearchWithStatePersist"

absidue · 2024-11-27T07:00:16Z

src/renderer/views/SubscribedChannels/SubscribedChannels.vue

+;(() => {
  document.addEventListener('keydown', keyboardShortcutHandler)
  getSubscription()
-})
+
+  const oldQuery = route.query.searchQueryText ?? ''
+  if (oldQuery !== null && oldQuery !== '') {
+    // `handleQueryChange` must be called after `filterHistoryDebounce` assigned
+    handleQueryChange(oldQuery, true)
+  }
+})()


Could you please explain why you changed this from an onMounted callback to an immediately invoked function?

absidue · 2024-11-27T07:07:20Z

src/renderer/views/Channel/Channel.js

+        await this.$router.replace({ path: `/channel/${this.id}` }).catch(failure => {
+          if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+            return
+          }
+
+          throw failure
+        })


To make the code more readable please pick one of the Promise syntaxes either async-await or chaining, instead of combining both of them. When using async-await, you can just use a normal try-catch.

This suggestion applies to all files that have this construct introduced by this pull request.

github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label May 30, 2024

FreeTubeBot enabled auto-merge (squash) May 30, 2024 06:34

PikachuEXE force-pushed the feature/history/remember-search-query branch from 434c7d5 to cfbda54 Compare June 3, 2024 05:49

github-actions bot added the PR: stale label Jul 29, 2024

PikachuEXE removed the PR: stale label Jul 29, 2024

github-actions bot added PR: merge conflicts / rebase needed and removed PR: waiting for review For PRs that are complete, tested, and ready for review labels Aug 16, 2024

PikachuEXE force-pushed the feature/history/remember-search-query branch from 3c71c71 to 987b10a Compare August 20, 2024 01:12

github-actions bot removed the PR: merge conflicts / rebase needed label Aug 20, 2024

PikachuEXE added the PR: waiting for review For PRs that are complete, tested, and ready for review label Aug 20, 2024

PikachuEXE and others added 5 commits September 3, 2024 08:43

$ Simplify boolean assignment, rename session storage key

7098373

* Make history page remember last query string & search limit only wh…

7c0c69d

…en going back

! Fix restoring filtered history having unnecessary delay

65c41b8

* Make subscribed channels page remember last query string only when …

66103ae

…going back

* Make user playlists page remember last query string only when going…

39b4079

… back

absidue reviewed Oct 12, 2024

View reviewed changes

src/renderer/views/Channel/Channel.js Show resolved Hide resolved

* Put currentTab value into proper place params instead of query

49cd449

efb4f5ff-1298-471a-8973-3d47447115dc requested a review from absidue October 14, 2024 21:48

PikachuEXE added 2 commits October 16, 2024 09:26

! Fix search tab showing "0 results" before search done

03f887e

absidue added the DO NOT MERGE UNTIL AFTER RELEASE Do not merge before the next release as this is not a bug fix label Oct 16, 2024

absidue reviewed Oct 16, 2024

View reviewed changes

efb4f5ff-1298-471a-8973-3d47447115dc reviewed Oct 16, 2024

View reviewed changes

ChunkyProgrammer removed the DO NOT MERGE UNTIL AFTER RELEASE Do not merge before the next release as this is not a bug fix label Oct 27, 2024

efb4f5ff-1298-471a-8973-3d47447115dc previously approved these changes Oct 27, 2024

View reviewed changes

PikachuEXE requested a review from absidue October 27, 2024 10:05

github-actions bot added PR: merge conflicts / rebase needed and removed PR: waiting for review For PRs that are complete, tested, and ready for review labels Nov 23, 2024

PikachuEXE dismissed efb4f5ff-1298-471a-8973-3d47447115dc’s stale review via a5f5a66 November 24, 2024 01:01

- Remove useless file after merging dev

6041e3a

github-actions bot removed the PR: merge conflicts / rebase needed label Nov 24, 2024

PikachuEXE added the PR: waiting for review For PRs that are complete, tested, and ready for review label Nov 24, 2024

absidue reviewed Nov 27, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make history page remember last query string & search limit #5192

Make history page remember last query string & search limit #5192

PikachuEXE commented May 30, 2024 •

edited

Loading

efb4f5ff-1298-471a-8973-3d47447115dc commented May 30, 2024 •

edited

Loading

kommunarr commented May 31, 2024

PikachuEXE commented May 31, 2024

kommunarr commented May 31, 2024 •

edited

Loading

PikachuEXE commented Jun 3, 2024 •

edited

Loading

efb4f5ff-1298-471a-8973-3d47447115dc commented Jun 30, 2024

PikachuEXE commented Jun 30, 2024

kommunarr commented Jun 30, 2024

github-actions bot commented Jul 29, 2024

efb4f5ff-1298-471a-8973-3d47447115dc commented Aug 1, 2024

efb4f5ff-1298-471a-8973-3d47447115dc commented Aug 1, 2024 •

edited

Loading

github-actions bot commented Aug 16, 2024

PikachuEXE commented Aug 20, 2024

github-actions bot commented Aug 20, 2024

PikachuEXE commented Aug 20, 2024

PikachuEXE commented Oct 12, 2024

efb4f5ff-1298-471a-8973-3d47447115dc commented Oct 12, 2024

PikachuEXE commented Oct 12, 2024 •

edited

Loading

absidue commented Oct 12, 2024

PikachuEXE commented Oct 13, 2024

efb4f5ff-1298-471a-8973-3d47447115dc commented Oct 15, 2024 •

edited

Loading

PikachuEXE commented Oct 16, 2024

absidue left a comment

efb4f5ff-1298-471a-8973-3d47447115dc left a comment

PikachuEXE commented Oct 17, 2024

github-actions bot commented Nov 23, 2024

github-actions bot commented Nov 24, 2024

absidue left a comment

absidue Nov 27, 2024

absidue Nov 27, 2024

absidue Nov 27, 2024

absidue Nov 27, 2024

	@search="(v) => newSearchWithStatePersist(v)"
	@search="newSearchWithStatePersist"

Make history page remember last query string & search limit #5192

Are you sure you want to change the base?

Make history page remember last query string & search limit #5192

Conversation

PikachuEXE commented May 30, 2024 • edited Loading

Pull Request Type

Related issue

Description

Screenshots

Testing

Desktop

Additional context

efb4f5ff-1298-471a-8973-3d47447115dc commented May 30, 2024 • edited Loading

kommunarr commented May 31, 2024

PikachuEXE commented May 31, 2024

kommunarr commented May 31, 2024 • edited Loading

PikachuEXE commented Jun 3, 2024 • edited Loading

efb4f5ff-1298-471a-8973-3d47447115dc commented Jun 30, 2024

PikachuEXE commented Jun 30, 2024

kommunarr commented Jun 30, 2024

github-actions bot commented Jul 29, 2024

efb4f5ff-1298-471a-8973-3d47447115dc commented Aug 1, 2024

efb4f5ff-1298-471a-8973-3d47447115dc commented Aug 1, 2024 • edited Loading

github-actions bot commented Aug 16, 2024

PikachuEXE commented Aug 20, 2024

github-actions bot commented Aug 20, 2024

PikachuEXE commented Aug 20, 2024

PikachuEXE commented Oct 12, 2024

efb4f5ff-1298-471a-8973-3d47447115dc commented Oct 12, 2024

PikachuEXE commented Oct 12, 2024 • edited Loading

absidue commented Oct 12, 2024

PikachuEXE commented Oct 13, 2024

efb4f5ff-1298-471a-8973-3d47447115dc commented Oct 15, 2024 • edited Loading

PikachuEXE commented Oct 16, 2024

absidue left a comment

Choose a reason for hiding this comment

efb4f5ff-1298-471a-8973-3d47447115dc left a comment

Choose a reason for hiding this comment

PikachuEXE commented Oct 17, 2024

github-actions bot commented Nov 23, 2024

github-actions bot commented Nov 24, 2024

absidue left a comment

Choose a reason for hiding this comment

absidue Nov 27, 2024

Choose a reason for hiding this comment

absidue Nov 27, 2024

Choose a reason for hiding this comment

absidue Nov 27, 2024

Choose a reason for hiding this comment

absidue Nov 27, 2024

Choose a reason for hiding this comment

PikachuEXE commented May 30, 2024 •

edited

Loading

efb4f5ff-1298-471a-8973-3d47447115dc commented May 30, 2024 •

edited

Loading

kommunarr commented May 31, 2024 •

edited

Loading

PikachuEXE commented Jun 3, 2024 •

edited

Loading

efb4f5ff-1298-471a-8973-3d47447115dc commented Aug 1, 2024 •

edited

Loading

PikachuEXE commented Oct 12, 2024 •

edited

Loading

efb4f5ff-1298-471a-8973-3d47447115dc commented Oct 15, 2024 •

edited

Loading