Migration to Vue 3 #2689

kloon15 · 2023-08-31T19:17:30Z

Brings the frontend to run under Vue 3 while maintaining the same behavior as much as possible.
Current status: rewrite to typescript and compositions API mostly finished.

🚨 Before submitting your PR, please read community, and indicate which issues (in any of the repos) are either fixed or closed by this PR. See GitHub Help: Closing issues using keywords.

DO make sure you are requesting to pull a topic/feature/bugfix branch (right side). Don't request your master!
DO make sure you are making a pull request against the master branch (left side). Also you should start your branch off our master.
DO make sure that File Browser can be successfully built. See builds and development.
DO make sure that related issues are opened in other repositories. I.e., the frontend, caddy plugins or the web page need to be updated accordingly.
AVOID breaking the continuous integration build.

…ob/main/Node.gitignore)

Replace vuex with pinia Fix some routing issues Fix most vue3 breaking changes

Remove garbage from vscode renaming Fix reading route in pinia store

Replace moment with dayjs Fix some routing issues Fix some vuex store leftovers

Add turkey to the list Detect ro, nl-be, is locales

kloon15 · 2023-08-31T19:29:23Z

Implements #2623

joepbuhre · 2023-09-06T21:53:25Z

I like it and I want to perhaps join in on this. But what is the plan / to do list. Also do we want to perhaps consider moving to typescript (improved tooling). Let me know how I can join in

kloon15 · 2023-09-07T14:07:44Z

I like it and I want to perhaps join in on this. But what is the plan / to do list. Also do we want to perhaps consider moving to typescript (improved tooling). Let me know how I can join in

Thanks for ur interest, my current plan for this migration is to port the current codebase to Vue3 with only mostly necessary changes before we reach the EOL of Vue2.
I would absolutely love if someone took the time and effort to rewrite it with typescript and compositions API but that is out of my scope atm. Im also not very familiar at all with Vue.

The tasks left on my todo list are:

Sync with master branch
Replace noty with something that is still supported/maintained
Fix lint warnings

Ur more than welcome to help out in any of those tasks or lmk if u find anything that seems wrong.

joepbuhre · 2023-09-07T14:23:59Z

Okay good to know. I'll build upon your branch and try to move everything over to composition api and typescript. Lovely to hear that almost everything is ported to Vue3.

joepbuhre · 2023-09-07T14:25:37Z

Just checked about noty. I almost exclusively use my own notification system using just pinia. Will try to make a semi compatible port from noty :D

kloon15 · 2023-09-07T19:41:33Z

Just checked about noty. I almost exclusively use my own notification system using just pinia. Will try to make a semi compatible port from noty :D

I just looked into this and found vue-toastification to have everything we need and added it so u dont have to bother with this.
Quick question if u know: why couldnt i use $t inside the custom toast component?

omalk98 · 2024-03-25T16:05:15Z

@kloon15 Branch is now aligned with master again, I pulled the most recent updates as well and should be ready for merge.

kloon15 · 2024-03-25T16:08:01Z

@kloon15 Branch is now aligned with master again, I pulled the most recent updates as well and should be ready for merge.

Thank you very much i will test it this week!

omalk98 · 2024-03-27T03:43:50Z

@kloon15 I've done some light testing and there seems to be a bug with the prompts. For (Copy, Move, Upload) prompts.
The issue:
When uploading/copying/moving a file with a duplicate causing a conflict, the prompt shows up momentarily before being popped from currentPrompt array and being unable to reach it. Seems to exist before the merge.
How to reproduce:
Copy/Move/Upload a duplicate file into FileBrowser.

I suspect this is due to Pinia running state mutations async but not confirmed yet.

kloon15 · 2024-03-29T13:23:08Z

@kloon15 I've done some light testing and there seems to be a bug with the prompts. For (Copy, Move, Upload) prompts. The issue: When uploading/copying/moving a file with a duplicate causing a conflict, the prompt shows up momentarily before being popped from currentPrompt array and being unable to reach it. Seems to exist before the merge. How to reproduce: Copy/Move/Upload a duplicate file into FileBrowser.

I suspect this is due to Pinia running state mutations async but not confirmed yet.

I do get the prompt on Upload

omalk98 · 2024-03-29T13:44:31Z

@kloon15 I've done some light testing and there seems to be a bug with the prompts. For (Copy, Move, Upload) prompts. The issue: When uploading/copying/moving a file with a duplicate causing a conflict, the prompt shows up momentarily before being popped from currentPrompt array and being unable to reach it. Seems to exist before the merge. How to reproduce: Copy/Move/Upload a duplicate file into FileBrowser.

I suspect this is due to Pinia running state mutations async but not confirmed yet.

I do get the prompt on Upload

Will test it further this weekend to confirm why it's happening on my side

Realign with master and add new features

kloon15 · 2024-03-30T14:21:28Z

This looks good to me, ill change it to ready to review. Thanks everyone for their contribs!

o1egl · 2024-04-01T14:16:51Z

You all have done a great job!

gdy666 · 2024-04-28T04:55:20Z

@kloon15 Hi,The Vue3 version is likely related to the code in the "VideoPlayer.vue" file, which cannot play MKV format video files.

kloon15 · 2024-04-28T14:35:26Z

@kloon15 Hi,The Vue3 version is likely related to the code in the "VideoPlayer.vue" file, which cannot play MKV format video files.

The thing is, most browsers dont even support the mkv container, let alone the proprietary codecs such files are encoded with.

Modern web browsers only support the WebM container format that is based on Matroska, but limited to royalty-free codecs. Even when the MKV file contains media encoded by a codec that the browser is able to decode, most browsers are unable to play media in such a container.

Whats ur use case that requires u to play mkv in a browser?

gdy666 · 2024-04-28T22:56:07Z

@kloon15 Hi,The Vue3 version is likely related to the code in the "VideoPlayer.vue" file, which cannot play MKV format video files.

The thing is, most browsers dont even support the mkv container, let alone the proprietary codecs such files are encoded with.

Modern web browsers only support the WebM container format that is based on Matroska, but limited to royalty-free codecs. Even when the MKV file contains media encoded by a codec that the browser is able to decode, most browsers are unable to play media in such a container.

Whats ur use case that requires u to play mkv in a browser?

You can test this file, which could be played online in the previous version of the file browser.

https://www.daji.it:66/release/v2.5.1/test.mkv

Actually, what I mean is that all the MKV files I have been using could be played normally in the browser before.

kloon15 · 2024-04-29T20:38:59Z

@kloon15 Hi,The Vue3 version is likely related to the code in the "VideoPlayer.vue" file, which cannot play MKV format video files.

The thing is, most browsers dont even support the mkv container, let alone the proprietary codecs such files are encoded with.

Modern web browsers only support the WebM container format that is based on Matroska, but limited to royalty-free codecs. Even when the MKV file contains media encoded by a codec that the browser is able to decode, most browsers are unable to play media in such a container.

Whats ur use case that requires u to play mkv in a browser?

You can test this file, which could be played online in the previous version of the file browser.

https://www.daji.it:66/release/v2.5.1/test.mkv

Actually, what I mean is that all the MKV files I have been using could be played normally in the browser before.

We could bypass videojs for unsupported formats i guess. Dont have a better idea.

Daniel-dev22 · 2024-06-08T00:29:27Z

This migration to vue3 broke the ability to pull down to refresh on mobile in a text editor.

#3131

I assume @touchmove.prevent.stop might be to blame.

kloon15 and others added 12 commits August 12, 2023 10:16

Migration to Vite 4 (initial commit)

17d80aa

Migration to VIte 4 (working)

8072a94

Merge branch 'filebrowser:master' into vite-4

c78a364

Moved mobile.css import to top-level

64190c3

Add proper gitignore for Node (https://github.com/github/gitignore/bl…

c6ff9e6

…ob/main/Node.gitignore)

Migration to Vue3 (Initial commit)

b9574d9

Migration to vue3 continued

7c91ba0

Replace vuex with pinia Fix some routing issues Fix most vue3 breaking changes

Migration to vue3 continued

85fe716

Remove garbage from vscode renaming Fix reading route in pinia store

Format files with prettier

3413de8

Migration to vue3 continued

05d011f

Replace moment with dayjs Fix some routing issues Fix some vuex store leftovers

Small fixes for vue3

878f67b

Fix some i18n related issues

0ea9267

Add turkey to the list Detect ro, nl-be, is locales

kloon15 added 7 commits September 2, 2023 16:06

Merge commit '374bbd3' into vue3

8ec78fb

Forgot to save in vscode (facepalm)

4bbb48d

Bundle dayjs locales together

13b87cd

Fix infinite calls to renew

4d7ea79

Fix locale related error and rename ua to uk

75bc9c4

Fix errors in settings and shares

ce67fb5

Bump compatConfig to Vue3 mode

fe3ed4a

kloon15 added 3 commits September 7, 2023 15:18

Fix usage progressbar not showing

a1ca679

Fix duplicate user var from refactoring

808cd1d

Fix error display during upload after refactor

856de2a

Replace noty with vue-toastification

b257589

Initial Javascript to Typescript convert

4867952

omalk98 added 2 commits March 25, 2024 11:39

format according to prettier

50d81f5

update new prompt to use pinia

9c8a033

bug fixes due to merge

0709474

omalk98 and others added 6 commits March 29, 2024 21:35

directory listing bug fix

e12b108

Merge pull request #1 from omalk98/vue3

cef81da

Realign with master and add new features

Add go related commands to npm

e749ed4

Fix frontend lint issues

3ff27ae

Fix go lint issues

e657704

Fix goimports lint issue

f4b3d54

kloon15 force-pushed the vue3 branch from 18d7c14 to f4b3d54 Compare March 30, 2024 13:23

Bump dependencies

4e14b72

kloon15 marked this pull request as ready for review March 30, 2024 14:21

kloon15 requested a review from o1egl as a code owner March 30, 2024 14:21

kloon15 changed the title ~~WIP: Migration to Vue 3~~ Migration to Vue 3 Mar 31, 2024

kloon15 and others added 2 commits March 31, 2024 14:47

Link C statically for go release build

82f9a01

build: frontend build refactoring

b5c9e3f

o1egl merged commit 5100e58 into filebrowser:master Apr 1, 2024
7 of 8 checks passed

kloon15 deleted the vue3 branch April 1, 2024 19:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migration to Vue 3 #2689

Migration to Vue 3 #2689

kloon15 commented Aug 31, 2023 •

edited

Loading

kloon15 commented Aug 31, 2023

joepbuhre commented Sep 6, 2023

kloon15 commented Sep 7, 2023

joepbuhre commented Sep 7, 2023

joepbuhre commented Sep 7, 2023 •

edited

Loading

kloon15 commented Sep 7, 2023

omalk98 commented Mar 25, 2024

kloon15 commented Mar 25, 2024

omalk98 commented Mar 27, 2024 •

edited

Loading

kloon15 commented Mar 29, 2024 •

edited

Loading

omalk98 commented Mar 29, 2024

kloon15 commented Mar 30, 2024

o1egl commented Apr 1, 2024

gdy666 commented Apr 28, 2024

kloon15 commented Apr 28, 2024 •

edited

Loading

gdy666 commented Apr 28, 2024 •

edited

Loading

kloon15 commented Apr 29, 2024

Daniel-dev22 commented Jun 8, 2024 •

edited

Loading

Migration to Vue 3 #2689

Migration to Vue 3 #2689

Conversation

kloon15 commented Aug 31, 2023 • edited Loading

kloon15 commented Aug 31, 2023

joepbuhre commented Sep 6, 2023

kloon15 commented Sep 7, 2023

joepbuhre commented Sep 7, 2023

joepbuhre commented Sep 7, 2023 • edited Loading

kloon15 commented Sep 7, 2023

omalk98 commented Mar 25, 2024

kloon15 commented Mar 25, 2024

omalk98 commented Mar 27, 2024 • edited Loading

kloon15 commented Mar 29, 2024 • edited Loading

omalk98 commented Mar 29, 2024

kloon15 commented Mar 30, 2024

o1egl commented Apr 1, 2024

gdy666 commented Apr 28, 2024

kloon15 commented Apr 28, 2024 • edited Loading

gdy666 commented Apr 28, 2024 • edited Loading

kloon15 commented Apr 29, 2024

Daniel-dev22 commented Jun 8, 2024 • edited Loading

kloon15 commented Aug 31, 2023 •

edited

Loading

joepbuhre commented Sep 7, 2023 •

edited

Loading

omalk98 commented Mar 27, 2024 •

edited

Loading

kloon15 commented Mar 29, 2024 •

edited

Loading

kloon15 commented Apr 28, 2024 •

edited

Loading

gdy666 commented Apr 28, 2024 •

edited

Loading

Daniel-dev22 commented Jun 8, 2024 •

edited

Loading