freezing the list in the backgroud while previewing a file #3004

niubility000 · 2024-02-16T01:20:37Z

It is to fix #2188, #1870, and it works perfectly.

When you return from the preview, you will go back to the last position of the list.

This is a new PR instead of the old one #3002
the old PR can't pass the checks totally because of the "type may not be empty [type-empty]" error. When we commit a changed file, we need write a type in the commit message box, something like "fix: ......". the default name "Update Files.vue" is totally wrong. It's a little bit misleading.

https://github.com/conventional-changelog/commitlint/?tab=readme-ov-file#config
Common types according to [commitlint-config-conventional (based on the Angular convention)]can be:

build
chore
ci
docs
feat
fix
perf
refactor
revert
style
test

niubility000 · 2024-02-16T01:37:49Z

Here, you can see the listing is in the background. When you close the pic, you will go back directly to this current position.

this is under background-color: rgba(0, 0, 0, 0.9), the whole pic looks a little bit messy. So I change it to background-color: rgba(0, 0, 0, 0.99), we can't see the background any more. it's cleaner.

change the background color to 0.99, then it looks cleaner.

stop the underlying list scrolling when using the mousewheel or swiping the screen.

alanmilinovic · 2024-02-16T07:02:02Z

Does this work if I open txt file?

niubility000 · 2024-02-17T05:48:51Z

Does this work if I open txt file?

Sure.
I just don't know where I can upload the modified filebrower.exe (windows version), then you can test it yourself.

Can you visit this page? https://note.youdao.com/ynoteshare/index.html?id=0418919966031fb8354f905af0122e7a&type=note&_time=1708149703792
It's in chinese, it's my note. just download the zip file. If you never used the windows version , put the filebrowser.exe in d:\filebrowser\ folder, then run:
cd d:\filebrowser
.\filebrowser -d filebrowser.db config init
.\filebrowser -d filebrowser.db users add kkk 123456 --perm.admin
.\filebrowser -d filebrowser.db config set --address 0.0.0.0
.\filebrowser -d filebrowser.db config set --port 1234
.\filebrowser -d filebrowser.db config set --root e:/

.\filebrowser.exe -d .\filebrowser.db --disable-preview-resize --disable-type-detection-by-header --cache-dir .\cache

niubility000 · 2024-02-17T11:23:29Z

frontend/src/css/styles.css

@@ -152,7 +152,7 @@ main .spinner .bounce2 {
 /* PREVIEWER */

 #previewer {
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: rgba(0, 0, 0, 0.99);


if it's 0.9, we would see the listing in the background. It looks a little bit messy.

niubility000 · 2024-02-17T11:25:38Z

frontend/src/views/Files.vue

@@ -3,10 +3,10 @@
    <header-bar v-if="error || req.type == null" showMenu showLogo />

    <breadcrumbs base="/files" />
-
+    <listing />


Put the listing here, just like the sidebar, the headerbar. Then, the listing will always show in the mainpage, sometimes in the background.

alanmilinovic · 2024-02-17T11:28:13Z

Good stuff, let's wait for merge of your PR. 😀

niubility000 · 2024-02-17T11:30:48Z

frontend/src/views/Files.vue

+        this.fetchData();
+        return;
+      } 
+    }, 


here we judge if the routing is from a dir (listing) to a file (preview), a dir to another dir, a file to a file, or a file to a dir. we only allow the listing to reload when it's from a dir to a dir.

niubility000 · 2024-02-17T11:32:49Z

frontend/src/views/Files.vue

-      this.setLoading(true);
+      if (window.sessionStorage.getItem('listFrozen') !=="true"){ 
+        this.setLoading(true);
+      }


this.setLoading(true) is the function to reload the listing. we just disable it when the routing is not from a dir to a dir.

niubility000 · 2024-02-17T11:35:49Z

frontend/src/views/files/Preview.vue

@@ -1,6 +1,8 @@
 <template>
  <div
    id="previewer"
+    @touchmove.prevent.stop 
+    @wheel.prevent.stop


to avoid the scrolling or wheeling to move the underground listing.

niubility000 · 2024-02-17T11:54:32Z

frontend/src/views/files/Listing.vue

+      }
+      if (this.req.isDir) {
+        window.sessionStorage.setItem('listFrozen', "false"); 
+      }


Without this modification, it would still work. But we would see the listing page blinking when we are back from the preview. It's because we are keeping the listing page alive all the time, it's watching the req to refill the window even if it's in the backgound. so we need this modification here. and I use window.sessionStorage.setItem to transfer data between .vue files. It's very fast and simple.

alanmilinovic · 2024-02-18T07:53:22Z

Does this work if I open txt file?

Sure. I just don't know where I can upload the modified filebrower.exe (windows version), then you can test it yourself.

Can you visit this page? https://note.youdao.com/ynoteshare/index.html?id=0418919966031fb8354f905af0122e7a&type=note&_time=1708149703792 It's in chinese, it's my note. just download the zip file. If you never used the windows version , put the filebrowser.exe in d:\filebrowser\ folder, then run: cd d:\filebrowser .\filebrowser -d filebrowser.db config init .\filebrowser -d filebrowser.db users add kkk 123456 --perm.admin .\filebrowser -d filebrowser.db config set --address 0.0.0.0 .\filebrowser -d filebrowser.db config set --port 1234 .\filebrowser -d filebrowser.db config set --root e:/

.\filebrowser.exe -d .\filebrowser.db --disable-preview-resize --disable-type-detection-by-header --cache-dir .\cache

I am using filebrowser on linux this is my kernel Linux 6.1.0-18-amd64 x86_64. Can you please compile version for Linux. I am very happy to test it.

niubility000 · 2024-02-18T08:02:43Z

Does this work if I open txt file?

Sure. I just don't know where I can upload the modified filebrower.exe (windows version), then you can test it yourself.
Can you visit this page? https://note.youdao.com/ynoteshare/index.html?id=0418919966031fb8354f905af0122e7a&type=note&_time=1708149703792 It's in chinese, it's my note. just download the zip file. If you never used the windows version , put the filebrowser.exe in d:\filebrowser\ folder, then run: cd d:\filebrowser .\filebrowser -d filebrowser.db config init .\filebrowser -d filebrowser.db users add kkk 123456 --perm.admin .\filebrowser -d filebrowser.db config set --address 0.0.0.0 .\filebrowser -d filebrowser.db config set --port 1234 .\filebrowser -d filebrowser.db config set --root e:/
.\filebrowser.exe -d .\filebrowser.db --disable-preview-resize --disable-type-detection-by-header --cache-dir .\cache

I am using filebrowser on linux this is my kernel Linux 6.1.0-18-amd64 x86_64. Can you please compile version for Linux. I am very happy to test it.

Here it is:
filebrowser.zip
with: go env -w GOOS=linux, go env -w GOARCH=amd64

niubility000 · 2024-02-18T08:49:30Z

Does this work if I open txt file?

Sure. I just don't know where I can upload the modified filebrower.exe (windows version), then you can test it yourself.
Can you visit this page? https://note.youdao.com/ynoteshare/index.html?id=0418919966031fb8354f905af0122e7a&type=note&_time=1708149703792 It's in chinese, it's my note. just download the zip file. If you never used the windows version , put the filebrowser.exe in d:\filebrowser\ folder, then run: cd d:\filebrowser .\filebrowser -d filebrowser.db config init .\filebrowser -d filebrowser.db users add kkk 123456 --perm.admin .\filebrowser -d filebrowser.db config set --address 0.0.0.0 .\filebrowser -d filebrowser.db config set --port 1234 .\filebrowser -d filebrowser.db config set --root e:/
.\filebrowser.exe -d .\filebrowser.db --disable-preview-resize --disable-type-detection-by-header --cache-dir .\cache

I am using filebrowser on linux this is my kernel Linux 6.1.0-18-amd64 x86_64. Can you please compile version for Linux. I am very happy to test it.

And here is a version I modified to fix this #2978. You can switch pics or close pics with animation by finger swipe or mouse drag. (swipe left, swipe right, swipe down)

filebrowser.zip

alanmilinovic · 2024-02-18T11:03:36Z

What about #3004? That's what this PR should be?

I tried both zip files you provided and when I enter txt file and close it, I am back on top of my list.

niubility000 · 2024-02-18T11:15:36Z

What about #3004? That's what this PR should be?

I tried both zip files you provided and when I enter txt file and close it, I am back on top of my list.
Really? Close your browser totally and reopen it. The version No. in the bottom of sidebar is (untrack).
Can you swipe the screen to switch pics?

Here it is:
filebrowser.zip
with: go env -w GOOS=linux, go env -w GOARCH=amd64

This is for this PR.

alanmilinovic · 2024-02-18T11:21:26Z

Unfortunately, it is not working as expected.

niubility000 · 2024-02-18T11:27:22Z

Unfortunately, it is not working as expected.

Try this:
filebrowser-linux-amd64-PR3004.zip
Just check the version of filebrowser in the sidebar. It should be "for PA#3004". This will ensure you testing this correct version.

alanmilinovic · 2024-02-18T11:34:18Z

Unfortunately, it is not working as expected.

Try this: filebrowser-linux-amd64-PR3004.zip Just check the version of filebrowser in the sidebar. It should be "for PA#3004". This will ensure you testing this correct version.

Oh yea, thats what I am talking about. It is working great.

niubility000 · 2024-02-18T11:37:39Z

g about. It is working great.

It works now? It can return to the last position of the list when you close the editor?

alanmilinovic · 2024-02-18T11:40:15Z

g about. It is working great.

It works now? It can return to the last position of the list when you close the editor?

Yes it is working great. After closing txt file, I am still on the same position on the list.

alanmilinovic · 2024-02-18T11:52:50Z

@o1egl Can you please merge this PR? Or what else needs to be done for you to merge it?

o1egl · 2024-02-22T18:34:23Z

@niubility000 Thanks fo the PR. One note: I see in the console that it still created an HTTP request to the server.

alanmilinovic · 2024-03-07T18:46:48Z

@niubility000 is it possible to implement something that remembers position when opening folder and returning back? If I have a lot of folders and enter some of them, when I return back I need to scroll again to find where I was.

niubility000 · 2024-03-07T19:10:07Z

@niubility000 is it possible to implement something that remembers position when opening folder and returning back? If I have a lot of folders and enter some of them, when I return back I need to scroll again to find where I was.

I have tried it before. It's pretty simple, just delete the this.setLoading(true); in the files.vue. But there is a bug. When you entire a new dir, sometimes it's not on the top of the list. I will rethink of it when I have time. and you can only click back button to make it work.
BTW, the Windows Explorer in windows system works in the same way as we are now.

alanmilinovic · 2024-03-07T19:20:21Z

@niubility000 is it possible to implement something that remembers position when opening folder and returning back? If I have a lot of folders and enter some of them, when I return back I need to scroll again to find where I was.

I have tried it before. It's pretty simple, just delete the this.setLoading(true); in the files.vue. But there is a bug. When you entire a new dir, sometimes it's not on the top of the list. I will rethink of it when I have time. and you can only click back button to make it work. BTW, the Windows Explorer in windows system works in the same way as we are now.

Would be great if you can make some solution. Happy to test it as always.

Not sure what you mean by Windows Explorer, but just tested it and if I enter folder and press back button, I am on the same position in the list where I was before, so I am not again back on top of the list.

niubility000 · 2024-03-07T20:00:02Z

@niubility000 is it possible to implement something that remembers position when opening folder and returning back? If I have a lot of folders and enter some of them, when I return back I need to scroll again to find where I was.

I have tried it before. It's pretty simple, just delete the this.setLoading(true); in the files.vue. But there is a bug. When you entire a new dir, sometimes it's not on the top of the list. I will rethink of it when I have time. and you can only click back button to make it work. BTW, the Windows Explorer in windows system works in the same way as we are now.

Would be great if you can make some solution. Happy to test it as always.

Not sure what you mean by Windows Explorer, but just tested it and if I enter folder and press back button, I am on the same position in the list where I was before, so I am not again back on top of the list.

Yes, you are right. My memory is wrong.

niubility000 · 2024-03-10T00:17:11Z

@niubility000 is it possible to implement something that remembers position when opening folder and returning back? If I have a lot of folders and enter some of them, when I return back I need to scroll again to find where I was.

You can test it now. The version is "test2". It's linux, amd64

filebrowser.zip

alanmilinovic · 2024-03-10T13:59:28Z

@niubility000 is it possible to implement something that remembers position when opening folder and returning back? If I have a lot of folders and enter some of them, when I return back I need to scroll again to find where I was.

You can test it now. The version is "test2". It's linux, amd64

filebrowser.zip

Just tested, thanks for effort it is working nice. There is only one small thing, when I go back, I always have folder that I entered marked as selected. Maybe it is nice to have it like that, then you know which folder you entered previously.

alanmilinovic · 2024-03-10T19:23:15Z

@niubility000 thank you very much for providing me a test version. Can you also submit a PR once you have time? Until then I will use your test version. Once again, many thanks for your effort and contribution, much appreciated.

niubility000 · 2024-03-11T07:15:57Z

@niubility000 is it possible to implement something that remembers position when opening folder and returning back? If I have a lot of folders and enter some of them, when I return back I need to scroll again to find where I was.

You can test it now. The version is "test2". It's linux, amd64

filebrowser.zip

Just tested, thanks for effort it is working nice. There is only one small thing, when I go back, I always have folder that I entered marked as selected. Maybe it is nice to have it like that, then you know which folder you entered previously.

I intended to add this function. But there is a small bug. When we return from a preview, we can't highlight the item in the list. I am still trying to figure it out.

niubility000 · 2024-03-11T14:54:40Z

There is another bug. If your list is long (more than 50 folders), you can't go back to the exact position.
Because of the value set in listing.vue
watch: {
req: function () {
if (window.sessionStorage.getItem("listFrozen") !=="true" && window.sessionStorage.getItem("modified") !=="true"){
// Reset the show value
this.showLimit = 50;
We may set it to a much larger value.

niubility000 · 2024-03-13T18:16:23Z

@alanmilinovic I think I have fixed the two bugs. I hope I can give you a test version tomorrow.

alanmilinovic · 2024-03-13T18:17:59Z

@alanmilinovic I think I have fixed the two bugs. I hope I can give you a test version tomorrow.

Wow, you are amazing, many thanks.

niubility000 · 2024-03-14T05:33:13Z

@alanmilinovic I think I have fixed the two bugs. I hope I can give you a test version tomorrow.

Wow, you are amazing, many thanks.

Here's the version test3. I still can't highlight the item when we return back from a preview or editor. But I think it's ok to pull a request.

filebrowser_version-test3.zip

alanmilinovic · 2024-03-14T13:43:35Z

@alanmilinovic I think I have fixed the two bugs. I hope I can give you a test version tomorrow.

Wow, you are amazing, many thanks.

Here's the version test3. I still can't highlight the item when we return back from a preview or editor. But I think it's ok to pull a request.

filebrowser_version-test3.zip

Go for it mate and thanks.

niubility000 added 2 commits February 16, 2024 09:06

fix: freeze list in the background

dc19b2f

fix: freeze the list

30c3e8a

niubility000 requested a review from o1egl as a code owner February 16, 2024 01:20

niubility000 added 2 commits February 16, 2024 10:00

fix: freezing the list styles.css

cd30888

change the background color to 0.99, then it looks cleaner.

fix: freezing the list

47afaeb

stop the underlying list scrolling when using the mousewheel or swiping the screen.

niubility000 commented Feb 17, 2024

View reviewed changes

o1egl merged commit e167c3e into filebrowser:master Feb 22, 2024
8 checks passed

niubility000 mentioned this pull request Feb 24, 2024

fix:remain-in-the-same-position-in-list-after-rename-or-delete #3017

Closed

decaby7e mentioned this pull request May 21, 2024

An exception occurred while browsing pictures #3213

Open

freezing the list in the backgroud while previewing a file #3004

freezing the list in the backgroud while previewing a file #3004

Conversation

niubility000 commented Feb 16, 2024 • edited

niubility000 commented Feb 16, 2024 • edited

alanmilinovic commented Feb 16, 2024

niubility000 commented Feb 17, 2024 • edited

niubility000 Feb 17, 2024 • edited

Choose a reason for hiding this comment

niubility000 Feb 17, 2024

Choose a reason for hiding this comment

alanmilinovic commented Feb 17, 2024

niubility000 Feb 17, 2024

Choose a reason for hiding this comment

niubility000 Feb 17, 2024

Choose a reason for hiding this comment

niubility000 Feb 17, 2024

Choose a reason for hiding this comment

niubility000 Feb 17, 2024 • edited

Choose a reason for hiding this comment

alanmilinovic commented Feb 18, 2024

niubility000 commented Feb 18, 2024 • edited

niubility000 commented Feb 18, 2024 • edited

alanmilinovic commented Feb 18, 2024 • edited

niubility000 commented Feb 18, 2024 • edited

alanmilinovic commented Feb 18, 2024

niubility000 commented Feb 18, 2024 • edited

alanmilinovic commented Feb 18, 2024

niubility000 commented Feb 18, 2024

alanmilinovic commented Feb 18, 2024

alanmilinovic commented Feb 18, 2024

o1egl commented Feb 22, 2024

alanmilinovic commented Mar 7, 2024

niubility000 commented Mar 7, 2024

alanmilinovic commented Mar 7, 2024

niubility000 commented Mar 7, 2024

niubility000 commented Mar 10, 2024 • edited

alanmilinovic commented Mar 10, 2024

alanmilinovic commented Mar 10, 2024

niubility000 commented Mar 11, 2024

niubility000 commented Mar 11, 2024 • edited

niubility000 commented Mar 13, 2024 • edited

alanmilinovic commented Mar 13, 2024

niubility000 commented Mar 14, 2024

alanmilinovic commented Mar 14, 2024 • edited

niubility000 commented Feb 16, 2024 •

edited

niubility000 commented Feb 16, 2024 •

edited

niubility000 commented Feb 17, 2024 •

edited

niubility000 Feb 17, 2024 •

edited

niubility000 Feb 17, 2024 •

edited

niubility000 commented Feb 18, 2024 •

edited

niubility000 commented Feb 18, 2024 •

edited

alanmilinovic commented Feb 18, 2024 •

edited

niubility000 commented Feb 18, 2024 •

edited

niubility000 commented Feb 18, 2024 •

edited

niubility000 commented Mar 10, 2024 •

edited

niubility000 commented Mar 11, 2024 •

edited

niubility000 commented Mar 13, 2024 •

edited

alanmilinovic commented Mar 14, 2024 •

edited