Web-desktop: As Native-like As Possible
Tags: javascript, webdev, ux, showdev
Published: 2021-10-17 12:41:56

I have recently been traveling to another city. That is why I brought with me my trusty NUC installed with Debian + [ArozOS](https://github.com/tobychui/arozos) besides my laptop. As this is my first time loading a few TB worth of files into this system, I soon running into issues where all the files I uploaded to the NUC is hard to find and I don't know what I have uploaded to the web desktop interface. This is how the systems look like before I start traveling.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d72irvq4rztiwx9jnjbe.png)

And this is how it looks like now. Notice the difference? 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2lio1hamz81as4whwkl.png)

## Yes, File Previews!!!
One of the most important things of native operating systems like Windows and MacOS offer on-desktop preview of files. I have always forgotten to add this feature because most of the other web desktop system doesn't provide file previews. Even OS.js (which is the world most stared web-desktop project on Github) didn't implement this feature.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arl1ogvwhunkvwt0qtus.png)

So I decided write myself one that can preview files on desktop. This is not something difficult as I have already implemented file manager previews in previous milestones. 

{% link https://dev.to/tobychui/i-write-my-own-web-desktop-os-for-3-years-and-this-is-what-it-looks-like-now-2903 %}
 
This is just a simple update. However, if you observe carefully on the Window's File Explorer, other the video preview, you can also see the application that use to open / preview this file type. Here is an example of the preview thumbnail of two mp4 files.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62jscdpcciuuit4q5eb5.png)

As a user, you can easily spot:
1. The filename of this file
2. What is the video content (preview from first few seconds)
3. What application will be used to open this file (VLC) 

So that is why I also implemented this feature in ArozOS web desktop interface. With these implemented, now I can easily look for a specific file on the desktop.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xv4frzbo9d8b86fd18ik.png)

## Folder Previews
Window's folder preview is really helpful. It can help me look for a folder containing specific preview-able files like photos and videos (e.g. anime series). Although MS decided to remove it in Windows 11, I am implementing this feature in my system. The idea was simple: You first have a background template for the folder, then overlap 1 - 2 preview image on top to create an illusion of layered file structures 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4ovm9amzawjn4swcjas.png)

To update the thumbnail, you simply need to check if the mtime of the folder is larger than the mtime of the preview thumbnail. If yes, simply re-run the thumbnail generation tool and we can keep all our thumbnails up-to-date with the content inside the folder(s). 

## Hovering Tool-tips
If you are a Windows user, you might already knew that you can hover on top of a file on desktop and get its properties by keep hovering on top of the file for a few seconds. This feature was previously added in ArOZ Online Beta but didn't get migrated to the final version. As I just so accidentally need it today and can't find it, I decided to add this feature in as well, which make it even more native OS like.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajojjg6vr47paig8arxu.png)
 
And now the web desktop experience is even getting better!

Feel free to take a look at my Github repo if you are interested to host your own ArozOS system for fun :D 
{% github tobychui/arozos %}