Prefetch previous and next images in preview.

[niubility000]

This will auto prefetch the previous and next images in preview. A very useful feature! Most of other projects have this one.
The effects will be more obvious if your Internet speed is low. So using a cellphone (close wifi) to test it. It's very fast to show the previous or next pic when you switch.

Filebrowser uses "lazy load", "cache", "prefetch imgs", and it can disable preview resize, disable type detection by header. All of these make filebrowser the fastest and most stable project compared with others. And it's written in golang, which allows it to run in low-end servers.
Very good.

[mckaygerhard]

great improvement.. i reviewed the code and looks good.. please @o1egl ..

[niubility000]

great improvement.. i reviewed the code and looks good.. please @o1egl ..

Yes, I also think it's cool.

[niubility000]

All fixed.
I just can't see my reply to o1egl,...it says "pending", weird. I put it here.

#1627 (comment)
Fixed. Redeced to two variables.

#1627 (comment)
previousLink and nextLink are for Router use. In preview.vue, it always starts with /files/....,and it's an relative path.
It's defined in the router/index.js,

...
path: "/files/*",
name: "Files",
component: Files,
...
But img src (raw) needs to use an absolute path. and starts with ${baseURL}/api/preview/big/...or ${baseURL}/api/raw/... in preview.vue.
You can see how we get this "raw" in the computed:{}. "raw" is used for the src of image, video, audio, and blob. and the href in link rel="prefetch" tab needs to use the same path format.

So here we need change the previousLink from /files/... to ${baseURL}/api/preview/big/...., slice(6) will delete the first 6 characters "/files", and ${baseURL}/api/preview/big${this.previousLink.slice(6)}?k=${key}` will get the whole path for the previous and next raw.

You can check all the required path format using console.log.

#1627 (comment)
Fixed.
In strict mode code, functions can only be declared at top level or inside a block. So I put it outside.

[niubility000]

#1627 (comment)
I can't figure it out. Is this a direct and faster way to get the URL?
Currently, we create all the URL of raw (including the thumbnails) in this (a little bit) complicated way. If using the file fields to create the URL is faster, we can make another PR to change them thoroughly.

[ramiresviana]

You are using the slice() method, making hard to understand the code. Using the file fields to construct the URL is more descriptive.

[niubility000]

You are using the slice() method, making hard to understand the code. Using the file fields to construct the URL is more descriptive.

Yes, we need to use console.log to see the difference of the path formats.

[niubility000]

@ramiresviana
@o1egl
Please review it again. There's no bug and it works great.

[o1egl]

You are using the slice() method, making hard to understand the code. Using the file fields to construct the URL is more descriptive.

@niubility000 please address that comment before merging this PR

[niubility000]

You are using the slice() method, making hard to understand the code. Using the file fields to construct the URL is more descriptive.

@niubility000 please address that comment before merging this PR

It's not necessary to use the file fields to construct the URL. As @ramiresviana said, it will not make it faster, just make it more descriptive for the coder to read.

Currently we just calculate the prefetch link in the same way as we calculate the raw path. I think it's fine, it's easy to understand.

[o1egl]

You are using the slice() method, making hard to understand the code. Using the file fields to construct the URL is more descriptive.

@niubility000 please address that comment before merging this PR

It's not necessary to use the file fields to construct the URL. As @ramiresviana said, it will not make it faster, just make it more descriptive for the coder to read.

Currently we just calculate the prefetch link in the same way as we calculate the raw path. I think it's fine, it's easy to understand.

I would prefer to explicitly construct URL instead of making manipulations on the current path

[niubility000]

Thank you, @ramiresviana,
@o1egl, now it's ok.