Rewrite web front-end using React

This is a big commit, some font-end function are still working, including manage, error handle, as others.
2021-11-21 17:30:43 +08:00
parent d556bbe0c8
commit e170c8b842
38 changed files with 38580 additions and 19880 deletions
--- a/internal/pkg/api/api.go
+++ b/internal/pkg/api/api.go
@@ -742,7 +742,7 @@ func NewAPI(config Config) (*API, error) {
 	apiMux.HandleFunc("/add_ffmpeg_config", api.HandleAddFfmpegConfig)

 	mux.Handle("/api/v1/", http.StripPrefix("/api/v1", apiMux))
-	mux.Handle("/web/", http.StripPrefix("/web", http.FileServer(http.Dir("web"))))
+	mux.Handle("/", http.StripPrefix("/", http.FileServer(http.Dir("web/build"))))

 	api.token = apiConfig.Token

--- a/web/.gitignore
+++ b/web/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/web/Caddyfile
+++ b/web/Caddyfile
@@ -0,0 +1,4 @@
+:8081 {
+ reverse_proxy /api/* localhost:8080
+ reverse_proxy * localhost:3000
+}
--- a/web/README.md
+++ b/web/README.md
@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
--- a/web/axios.min.js
+++ b/web/axios.min.js
--- a/web/index.html
+++ b/web/index.html
@@ -1,41 +0,0 @@
-<html>
-
-<head>
-	<meta charset="utf-8" />
-	<title>MSW Open Music Project</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-	<link rel="stylesheet" href="water.css" />
-	<link rel="stylesheet" href="style.css" />
-	<!-- Add to homescreen for Chrome on Android -->
-	<meta name="mobile-web-app-capable" content="yes" />
-	<link rel="icon" href="favicon.png" />
-</head>
-
-<body>
-	<div id="app" class="base">
-		<header class="header">
-			<h3 class="title">
-				<img class="logo" src="favicon.png" />
-				<span class="title-text">MSW Open Music Project</span>
-			</h3>
-			<nav class="nav">
-				<router-link class="nav-link" to="/">I'm Feeling Lucky</router-link>
-				<router-link class="nav-link" to="/search_files">Files</router-link>
-				<router-link class="nav-link" to="/search_folders">Folders</router-link>
-				<router-link class="nav-link" to="/manage">Manage</router-link>
-			</nav>
-		</header>
-		<main>
-			<router-view :token="token" @set_token="set_token" @play_audio="play_audio"></router-view>
-		</main>
-		<footer>
-			<component-audio-player :token="token" @stop="stop" @play_audio="play_audio" :file=playing_audio_file></component-audio-player>
-		</footer>
-	</div>
-</body>
-<script src="vue.js"></script>
-<script src="vue-router.js"></script>
-<script src="axios.min.js"></script>
-<script src="index.js"></script>
-
-</html>
--- a/web/index.js
+++ b/web/index.js
@@ -1,942 +0,0 @@
-const component_share = {
-	emits: ['play_audio', 'set_token'],
-	props: ['token'],
-	template: `
-<div class="page">
-<h3>Share with others!</h3>
-<p v-if="error_status">{{ error_status }}</p>
-<p>Share link: <a :href="computed_share_link">{{ computed_share_link }}</a> , or share this page directly.</p>
-<table>
-<thead>
-<tr>
-	<th>Filename</th>
-	<th>Folder Name</th>
-	<th>Size</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-	<component-file :file=file @play_audio="$emit('play_audio', $event)"></component-file>
-</tr>
-</tbody>
-</table>
-</div>
-`,
-	computed: {
-		computed_share_link() {
-			return window.location.href
-		},
-	},
-	data() {
-		return {
-			file: {},
-			error_status: "",
-		}
-	},
-	mounted() {
-		if (this.$route.query.id) {
-			this.get_file_info()
-		}
-	},
-	methods: {
-		get_file_info() {
-			axios.post('/api/v1/get_file_info', {
-				id: parseInt(this.$route.query.id),
-			}).then((response) => {
-				this.file = response.data
-			}).catch((error) => {
-				if (error.response) {
-					this.error_status = error.response.data.status
-				} else {
-					this.error_status = 'Network error'
-				}
-			})
-		},
-	},
-}
-
-const component_search_folders = {
-	emits: ['play_audio', 'set_token'],
-	props: ['token'],
-	data() {
-		return {
-			search_foldernames: "",
-			folders: [],
-			folder: {},
-			offset: 0,
-			limit: 10,
-			folder_offset: 0,
-			folder_limit: 10,
-			files_in_folder: [],
-			playing_audio_file: {},
-			is_loading: false,
-			error_status: "",
-		}
-	},
-	computed: {
-		computed_folders_page() {
-			if (this.is_loading) {
-				return 'Loading...'
-			}
-			if (this.error_status) {
-				return this.error_status
-			}
-			return this.offset + ' ~ ' + (this.offset + this.folders.length)
-		},
-		computed_files_page() {
-			if (this.is_loading) {
-				return 'Loading...'
-			}
-			if (this.error_status) {
-				return this.error_status
-			}
-			return this.folder_offset + ' ~ ' + (this.folder_offset + this.files_in_folder.length)
-		},
-	},
-	template: `
-<div class="page">
-<h3>Search Folders</h3>
-<div class="search_toolbar">
-<input type="text" @keyup.enter="first_search_folders" v-model="search_foldernames" placeholder="Enter folder name" />
-<button @click="first_search_folders">Search Folders</Button>
-<button @click="last_page">Last Page</button>
-<button disabled>{{ computed_folders_page }}</button>
-<button @click="next_page">Next Page</button>
-</div>
-
-<table v-if="folders.length">
-<thead>
-<tr>
-	<th>Folder Name</th>
-	<th>Action</th>
-</tr>
-</thead>
-<tbody>
-<tr v-for="folder in folders">
-	<td class="clickable" @click="view_folder(folder)">{{ folder.foldername }}</td>
-	<td><button @click="view_folder(folder)">View</button></td>
-</tr>
-</tbody>
-</table>
-
-<h3>Files in folder</h3>
-<div class="search_toolbar">
-<button @click="folder_last_page">Last Page</button>
-<button disabled>{{ computed_files_page }}</button>
-<button @click="folder_next_page">Next Page</button>
-</div>
-<table v-if="files_in_folder.length">
-	<thead>
-		<tr>
-			<th>Filename</th>
-			<th>Folder Name</th>
-			<th>Size</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr v-for="file in files_in_folder">
-			<component-file :file=file @play_audio="$emit('play_audio', $event)"></component-file>
-		</tr>
-	</tbody>
-</table>
-</div>
-`,
-	mounted() {
-		if (this.$route.query.folder_id) {
-			this.folder.id = parseInt(this.$route.query.folder_id)
-			this.get_files_in_folder()
-		}
-	},
-	methods: {
-		folder_last_page() {
-			this.folder_offset = this.folder_offset - this.folder_limit
-			if (this.folder_offset < 0) {
-				this.folder_offset = 0
-				return
-			}
-			this.get_files_in_folder()
-		},
-		folder_next_page() {
-			this.folder_offset = this.folder_offset + this.folder_limit
-			this.get_files_in_folder()
-		},
-		view_folder(folder) {
-			this.folder = folder
-			this.get_files_in_folder()
-		},
-		get_files_in_folder() {
-			this.is_loading = true
-			axios.post('/api/v1/get_files_in_folder', {
-				folder_id: this.folder.id,
-				limit: this.folder_limit,
-				offset: this.folder_offset,
-			}).then((response) => {
-				this.error_status = ""
-				this.files_in_folder = response.data.files
-			}).catch((error) => {
-				if (error.response) {
-					this.error_status = error.response.data.status
-				} else {
-					this.error_status = 'Network error'
-				}
-			}).finally(() => {
-				this.is_loading = false
-			})
-		},
-		last_page() {
-			this.offset = this.offset - this.limit
-			if (this.offset < 0) {
-				this.offset = 0
-				return
-			}
-			this.search_folders()
-		},
-		next_page() {
-			this.offset = this.offset + this.limit
-			this.search_folders()
-		},
-		first_search_folders() {
-			this.offset = 0
-			this.search_folders()
-		},
-		search_folders() {
-			this.is_loading = true
-			axios.post('/api/v1/search_folders', {
-				foldername: this.search_foldernames,
-				limit: this.limit,
-				offset: this.offset,
-			}).then((response) => {
-				this.error_status = ""
-				this.folders = response.data.folders
-			}).catch((error) => {
-				if (error.response) {
-					this.error_status = error.response.data.status
-				} else {
-					this.error_status = 'Network error'
-				}
-			}).finally(() => {
-				this.is_loading = false
-			})
-		},
-	},
-}
-
-const component_token = {
-	progs: ['token'],
-	emits: ['set_token'],
-	data() {
-		return {
-			token_tmp: "",
-		}
-	},
-	template: `
-<table><tbody><tr>
-<td>Token</td>
-<td><input type="text" v-model="token_tmp" @change="emit_set_token" placeholder="token" /></td>
-</tr></tbody></table>
-`,
-	methods: {
-		emit_set_token() {
-			this.$emit('set_token', this.token_tmp)
-		},
-	},
-}
-
-const component_manage= {
-	props: ['token'],
-	emits: ['set_token'],
-	data() {
-		return {
-			feedback: "",
-			feedback_status: "Submit",
-			feedback_placeholder: "feedback...",
-			submit_disabled: false,
-			is_err: false,
-			err_msg: "",
-		}
-	},
-	template: `
-<div class="page">
-<div class="description">
-<h4>关于本站</h4>
-<p>一只随处可见的 葱厨&车万人 想听 TA 屯在硬盘里的音乐。</p>
-<p>一点点说明：下方播放器的 Raw 模式即不转码直接播放源文件，支持断点续传；Prepare 模式：勾选后播放的文件将提前在服务器端转码，然后以支持断点续传的方式提供，如果你的网络不稳定，经常播放到一半就中断，可以尝试勾选 Prepare。</p>
-<p>站内音乐来自公开网络，仅供个人使用，如有侵权或建议请提交反馈</p>
-<div class="feedback">
-	<input type="text" v-model="feedback" :disabled="submit_disabled" :placeholder="feedback_placeholder"/>
-	<button @click="submit_feedback" :disabled="submit_disabled">{{ feedback_status }}</button>
-	<label v-if="is_err">{{ err_msg }}</label>
-</div>
-</div>
-<component-token :token="token" @set_token="$emit('set_token', $event)"></component-token>
-<component-manage-database :token="token"></component-manage-database>
-</div>
-`,
-	methods: {
-		submit_feedback() {
-			axios.post('/api/v1/feedback', {
-				feedback: this.feedback,
-			}).then((response) => {
-				this.submit_disabled = true
-				this.feedback = ""
-				this.feedback_status = "Success"
-				this.feedback_placeholder = "Thanks for your feedback!"
-				this.is_err = false
-			}).catch((err) => {
-				console.log(err)
-				this.is_err = true
-				this.err_msg = err.response.data.status
-			})
-		},
-	}
-}
-const component_manage_database = {
-	props: ['token'],
-	data() {
-		return {
-			root: "",
-			pattern: [".flac", ".mp3"],
-			pattern_tmp: "",
-			s: "",
-		}
-	},
-	template: `
-<div>
-<table>
-<tbody>
-<tr>
-	<td>Root</td>
-	<td><input type="text" v-model="root" placeholder="/path/to/root" /></td>
-</tr>
-<tr>
-	<td><button @click="add_pattern">Add Pattern</button></td>
-	<td><input type="text" v-model="pattern_tmp" placeholder=".wav" /></td>
-</tr>
-<tr>
-	<td colspan="2"><strong>Pattern List</strong></td>
-</tr>
-<tr v-for="p in pattern">
-	<td colspan="2">{{ p }}</td>
-</tr>
-<tr>
-	<td><button @click="update_database">Update</button></td>
-	<td><button @click="reset_database">Reset</button></td>
-</tr>
-<tr>
-	<td>Status</td>
-	<td>{{ s }}</td>
-</tr>
-</tbody>
-</table>
-</div>
-`,
-	methods: {
-		add_pattern() {
-			this.pattern.push(this.pattern_tmp)
-			this.pattern_tmp = ""
-		},
-		reset_database() {
-			axios.post('/api/v1/reset', {
-				token: this.token,
-			}).then((response) => {
-				this.s = response.data.status
-			}).catch((err) => {
-				this.s = err.response.data.status
-			})
-		},
-		update_database() {
-			this.s = "Updating..."
-			axios.post('/api/v1/walk', {
-				token: this.token,
-				root: this.root,
-				pattern: this.pattern,
-			}).then((response) => {
-				this.s = response.data.status
-			}).catch((err) => {
-				this.s = err.response.data.status
-			})
-		}
-	},
-}
-
-const component_file_dialog = {
-	props: ['file', 'show_dialog'],
-	emits: ['play_audio', 'close_dialog'],
-	template: `
-<dialog open v-if="show_dialog">
-	<p>{{ file.filename }}</p>
-	<p>
-		Download 使用 Axios 异步下载<br />
-		Play 调用网页播放器播放<br />
-	</p>
-	<button @click="download_file(file)" :disabled="disabled">{{ computed_download_status }}</button>
-	<button @click="emit_play_audio">Play</button>
-	<button @click="share">Share</button>
-	<button @click="emit_close_dialog">Close</button>
-</dialog>
-	`,
-	data() {
-		return {
-			download_loaded: 0,
-			disabled: false,
-		}
-	},
-	methods: {
-		share() {
-			this.$router.push({
-				path: '/share',
-				query: {
-					id: this.file.id,
-				},
-			})
-			this.emit_close_dialog()
-		},
-		emit_close_dialog() {
-			this.$emit('close_dialog')
-		},
-		emit_play_audio() {
-			console.log("pressed button")
-			this.$emit("play_audio", this.file)
-			this.emit_close_dialog()
-		},
-		download_file(file) {
-			this.disabled = true
-			axios({
-				url: '/api/v1/get_file',
-				method: 'POST',
-				responseType: 'blob', // important
-				data: {
-					id: file.id,
-				},
-				onDownloadProgress: ProgressEvent => {
-					this.download_loaded = ProgressEvent.loaded
-				}
-			}).then((response) => {
-				const url = window.URL.createObjectURL(new Blob([response.data]));
-				const link = document.createElement('a');
-				link.href = url;
-				link.setAttribute('download', file.filename);
-				document.body.appendChild(link);
-				link.click();
-				this.download_loaded = 0
-				this.disabled = false
-				this.emit_close_dialog()
-			})
-		},
-	},
-	computed: {
-		computed_download_status() {
-			if (this.download_loaded === 0) {
-				return 'Download'
-			} else {
-				return Math.round(this.download_loaded / this.file.filesize * 100) + '%'
-			}
-		},
-	},
-}
-
-const component_file = {
-	props: ['file'],
-	emits: ['play_audio'],
-	template: `
-<td class="clickable" @click="click_filename">{{ file.filename }}</td>
-<td class="clickable" @click="show_folder">{{ file.foldername }}</td>
-<td>{{ computed_readable_size }}
-	<component-file-dialog
-		@close_dialog="close_dialog"
-		@play_audio="$emit('play_audio', $event)"
-		:show_dialog="show_dialog"
-		:file="file"
-	></component-file-dialog>
-</td>
-`,
-	data() {
-		return {
-			download_loaded: 0,
-			disabled: false,
-			show_dialog: false,
-		}
-	},
-	methods: {
-		click_filename() {
-			if (this.show_dialog) {
-				this.file.play_back_type = 'stream'
-				this.$emit('play_audio', this.file)
-				this.show_dialog = false
-			} else {
-				this.show_dialog = true
-			}
-		},
-		show_folder() {
-			this.$router.push({
-				path: '/search_folders',
-				query: {
-					folder_id: this.file.folder_id,
-				},
-			})
-		},
-		close_dialog() {
-			this.show_dialog = false
-		},
-		dialog() {
-			this.show_dialog = this.show_dialog ? false : true
-		},
-	},
-	computed: {
-		computed_readable_size() {
-			let filesize = this.file.filesize
-			if (filesize < 1024) {
-				return filesize
-			}
-			if (filesize < 1024 * 1024) {
-				return Math.round(filesize / 1024) + 'K'
-			}
-			if (filesize < 1024 * 1024 * 1024) {
-				return Math.round(filesize / 1024 / 1024) + 'M'
-			}
-			if (filesize < 1024 * 1024 * 1024 * 1024) {
-				return Math.round(filesize / 1024 / 1024 / 1024) + 'G'
-			}
-		},
-	},
-}
-
-const component_audio_player = {
-	emits: ['stop', 'play_audio'],
-	data() {
-		return {
-			loop: true,
-			ffmpeg_config: {},
-			show_dialog: false,
-			is_preparing: false,
-			prepare: false,
-			raw: false,
-			playing_url: "",
-			prepared_filesize: 0,
-			playing_file: {},
-			error_status: "",
-		}
-	},
-	props: ['file', 'token'],
-	template: `
-<div>
-<h5>Player Status</h5>
-<component-file-dialog
-	@close_dialog="close_dialog"
-	@play_audio="$emit('play_audio', $event)"
-	:show_dialog="show_dialog"
-	:file="file"
-></component-file-dialog>
-<span v-if="computed_show">
-	<button @click="dialog">{{ file.filename }}</button>
-	<button @click="show_folder">{{ file.foldername }}</button> 
-	<button disabled>{{ computed_readable_size }}</button>
-	<button v-if="error_status" @click="retry">Retry</button>
-	<button @click="emit_stop">Stop</button>
-</span>
-<br />
-<input type="checkbox" v-model="loop" />
-<label>Loop</label>
-<input type="checkbox" v-model="raw" />
-<label>Raw</label>
-<input v-show="!raw" type="checkbox" v-model="prepare" />
-<label v-show="!raw">Prepare</label><br />
-<video v-if="computed_video_show" class="audio-player" :src="playing_url" controls autoplay :loop="loop">
-</video>
-<component-stream-config @set_ffmpeg_config="set_ffmpeg_config"></component-stream-config>
-<p>{{ token }}</p>
-</div>
-`,
-	methods: {
-		emit_stop() {
-			this.$emit('stop')
-		},
-		dialog() {
-			this.show_dialog = this.show_dialog ? false : true
-		},
-		close_dialog() {
-			this.show_dialog = false
-		},
-		show_folder() {
-			this.$router.push({
-				path: '/search_folders',
-				query: {
-					folder_id: this.file.folder_id,
-				}
-			})
-		},
-		set_ffmpeg_config(ffmpeg_config) {
-			this.ffmpeg_config = ffmpeg_config
-		},
-		prepare_func() {
-			if (!this.file.id) {
-				return
-			}
-			this.playing_file = {}
-			this.is_preparing = true
-			axios.post('/api/v1/prepare_file_stream_direct', {
-				id: this.file.id,
-				config_name: this.ffmpeg_config.name,
-			}).then(response => {
-				console.log(response.data)
-				this.error_status = ''
-				this.prepared_filesize = response.data.filesize
-				var file = this.file
-				this.playing_file = file
-				this.set_playing_url()
-				console.log('axios done', this.playing_file)
-			}).catch((err) => {
-				if (err.response) {
-					this.error_status = err.response.data.status
-				} else {
-					this.error_status = "Network error"
-				}
-			}).finally(() => {
-				this.is_preparing = false
-			})
-		},
-		set_playing_url() {
-			if (this.raw) {
-				console.log('computed raw rul')
-				this.playing_url = '/api/v1/get_file_direct?id=' + this.playing_file.id
-			} else {
-				if (this.prepare) {
-					console.log('empty playing_file, start prepare')
-					this.playing_url = '/api/v1/get_file_stream_direct?id=' + this.playing_file.id + '&config=' + this.ffmpeg_config.name
-				} else {
-					console.log('computed stream url')
-					this.playing_url = '/api/v1/get_file_stream?id=' + this.playing_file.id + '&config=' + this.ffmpeg_config.name
-				}
-			}
-		},
-		setup_player() {
-			// 如果没有勾选 prepare 则直接播放
-			// 否则进入 prepare 流程
-			this.playing_file = {}
-			if (this.prepare && !this.raw) {
-				this.prepare_func()
-			} else {
-				this.playing_file = this.file
-				this.set_playing_url()
-			}
-		},
-		retry() {
-			this.setup_player()
-		},
-	},
-	watch: {
-		file() {
-			this.setup_player()
-		},
-		raw() {
-			if (this.prepare) {
-				this.prepare_func()
-			} else {
-				this.set_playing_url()
-			}
-		},
-		prepare() {
-			this.playing_file = {}
-			this.prepare_func()
-		},
-		ffmpeg_config() {
-			this.setup_player()
-		},
-	},
-	computed: {
-		computed_can_retry() {
-			return this.error_status ? true : false
-		},
-		computed_readable_size() {
-			if (this.is_preparing) {
-				return 'Preparing...'
-			}
-			if (this.error_status) {
-				return this.error_status
-			}
-			let filesize = this.playing_file.filesize
-			if (this.prepare) {
-				filesize = this.prepared_filesize
-			}
-			if (this.raw) {
-				filesize = this.playing_file.filesize
-			}
-			if (filesize < 1024 * 1024 * 1024) {
-				filesize = Math.round(filesize / 1024) + 'K'
-			}
-			if (filesize < 1024 * 1024 * 1024 * 1024) {
-				filesize = Math.round(filesize / 1024 / 1024) + 'M'
-			}
-			// add separater to number
-			return filesize.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-		},
-		computed_video_show() {
-			if (this.playing_file.id && this.playing_url) {
-				return true
-			}
-			return false
-		},
-		computed_show() {
-			return this.file.id ? true : false
-		},
-	},
-}
-
-const component_search_files = {
-	emits: ['play_audio'],
-	props: ['token'],
-	computed: {
-		computed_files_page() {
-			if (this.is_loading) {
-				return 'Loading...'
-			}
-			if (this.error_status) {
-				return this.error_status
-			}
-			return this.offset + ' ~ ' + (this.offset + this.files.length)
-		},
-	},
-	template: `
-<div class="page">
-<h3>Search Files</h3>
-<div class="search_toolbar">
-<input type="text" name="filename" @keyup.enter="first_search_files" v-model="search_filenames" placeholder="Enter filename" />
-<button @click="first_search_files">Search</button>
-<button @click="last_page">Last Page</button>
-<button disabled>{{ computed_files_page }}</button>
-<button @click="next_page">Next Page</button>
-</div>
-<table v-if="files.length">
-	<thead>
-		<tr>
-			<th>Filename</th>
-			<th>Folder Name</th>
-			<th>Size</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr v-for="file in files">
-			<component-file :file=file @play_audio="$emit('play_audio', $event)"></component-file>
-		</tr>
-	</tbody>
-</table>
-</div>
-`,
-	data() {
-		return {
-			search_filenames: '',
-			files: [],
-			offset: 0,
-			limit: 10,
-			playing_audio_file: {},
-			is_loading: false,
-			error_status: "",
-		}
-	},
-	methods: {
-		first_search_files() {
-			this.offset = 0
-			this.search_files()
-		},
-		search_files() {
-			this.is_loading = true
-			axios.post('/api/v1/search_files', {
-				filename: this.search_filenames,
-				limit: this.limit,
-				offset: this.offset,
-			}).then((response) => {
-				this.error_status = ""
-				this.files = response.data.files
-			}).catch((error) => {
-				if (error.response) {
-					this.error_status = error.response.data.status
-				} else {
-					this.error_status = 'Network error'
-				}
-			}).finally(() => {
-				this.is_loading = false
-			})
-		},
-		last_page() {
-			this.offset = this.offset - this.limit
-			if (this.offset < 0) {
-				this.offset = 0
-				return
-			}
-			this.search_files()
-		},
-		next_page() {
-			this.offset = this.offset + this.limit
-			this.search_files()
-		},
-	},
-}
-
-const component_get_random_files = {
-	emits: ['play_audio', 'set_token'],
-	props: ['token'],
-	data() {
-		return {
-			files: [],
-			is_loading: false,
-			error_status: "",
-		}
-	},
-	computed: {
-		computed_refresh() {
-			if (this.error_status) {
-				return this.error_status
-			}
-			if (this.is_loading) {
-				return 'Loading...'
-			}
-			return 'Refresh'
-		},
-	},
-	template: `
-<div class="page">
-<div class="search_toolbar">
-	<button class="refresh" @click="get_random_files">{{ computed_refresh }}</button>
-</div>
-<table>
-	<thead>
-		<tr>
-			<th>Filename</th>
-			<th>Folder Name</th>
-			<th>Size</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr v-for="file in files">
-			<component-file :file=file @play_audio="$emit('play_audio', $event)"></component-file>
-		</tr>
-	</tbody>
-</table>
-</div>
-`,
-	mounted() {
-		this.get_random_files()
-	},
-	methods: {
-		get_random_files() {
-			this.is_loading = true
-			axios.get('/api/v1/get_random_files'
-			).then(response => {
-				this.error_status = ""
-				this.files = response.data.files;
-			}).catch((error) => {
-				if (error.response) {
-					this.error_status = error.response.data.status
-				} else {
-					this.error_status = 'Network error'
-				}
-			}).finally(() => {
-				this.is_loading = false
-			})
-		}
-	},
-}
-
-const component_stream_config = {
-	emits: ['set_ffmpeg_config'],
-	data() {
-		return {
-			ffmpeg_config_list: [],
-			selected_ffmpeg_config: {},
-		}
-	},
-	template: `
-<div>
-<table>
-<tbody>
-<tr>
-<td>
-<select v-model="selected_ffmpeg_config">
-	<option v-for="ffmpeg_config in ffmpeg_config_list" :value="ffmpeg_config">
-		{{ ffmpeg_config.name }}
-	</option>
-</select>
-</td>
-<td>
-<span>{{ selected_ffmpeg_config.args }}</span>
-</td>
-</tr>
-</tbody>
-</table>
-</div>
-`,
-	mounted() {
-		axios.get('/api/v1/get_ffmpeg_config_list',
-		).then(response => {
-			// 后端返回数据 ffmpeg_configs 是一个字典，name 作为 key，ffmpeg_config{} 作为 value
-			// 为方便前端，此处将 ffmpeg_configs 转为数组，并添加 name 到每个对象中
-			var ffmpeg_configs = response.data.ffmpeg_configs
-			var tmp_list = []
-			for (var key in ffmpeg_configs) {
-				var ffmpeg_config = ffmpeg_configs[key]
-				ffmpeg_config.name = key
-				tmp_list.push(ffmpeg_config)
-			}
-			tmp_list.sort()
-			this.ffmpeg_config_list = tmp_list
-			this.selected_ffmpeg_config = this.ffmpeg_config_list[0]
-		}).catch(err => {
-			this.ffmpeg_config_list = [{name: 'No avaliable config'}]
-			this.selected_ffmpeg_config = this.ffmpeg_config_list[0]
-		})
-	},
-	watch: {
-		selected_ffmpeg_config(n, o) {
-			this.$emit('set_ffmpeg_config', this.selected_ffmpeg_config)
-		},
-	},
-}
-
-const routes = [
-	{ path: '/', component: component_get_random_files},
-	{ path: '/search_files', component: component_search_files},
-	{ path: '/search_folders', component: component_search_folders},
-	{ path: '/manage', component: component_manage},
-	{ path: '/share', component: component_share},
-]
-const router = VueRouter.createRouter({
-	history: VueRouter.createWebHashHistory(),
-	routes,
-})
-
-const app = Vue.createApp({
-	data() {
-		return {
-			playing_audio_file: {},
-			token: "default token",
-		}
-	},
-	methods: {
-		stop() {
-			this.playing_audio_file = {}
-		},
-		set_token(token) {
-			this.token = token
-		},
-		play_audio(file) {
-			console.log(file)
-			this.playing_audio_file = file
-		},
-	},
-})
-
-app.component('component-search-folders', component_search_folders)
-app.component('component-manage', component_manage)
-app.component('component-file', component_file)
-app.component('component-audio-player', component_audio_player)
-app.component('component-search-files', component_search_files)
-app.component('component-get-random-files', component_get_random_files)
-app.component('component-file-dialog', component_file_dialog)
-app.component('component-token', component_token)
-app.component('component-stream-config', component_stream_config)
-app.component('component-manage-database', component_manage_database)
-app.component('component-share', component_share)
-
-app.use(router)
-
-app.mount('#app')
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "msw-open-music-react",
+  "version": "1.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router": "^6.0.2",
+    "react-router-dom": "^6.0.2",
+    "react-scripts": "4.0.3",
+    "water.css": "^2.1.1",
+    "web-vitals": "^1.1.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.34"
+  }
+}
--- a/web/public/favicon.png
+++ b/web/public/favicon.png
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Personal music streaming platform" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <!-- Add to homescreen for Chrome on Android -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    <title>MSW Open Music</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/web/public/manifest.json
+++ b/web/public/manifest.json
@@ -0,0 +1,14 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.png",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/web/public/robots.txt
+++ b/web/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -0,0 +1,94 @@
+html {
+  font-size: 1em;
+}
+body {
+  margin: auto;
+  margin-top: 1rem;
+}
+.base {
+  display: grid;
+  grid-row-gap: 1em;
+}
+.header {
+  color: white;
+  background-color: rgb(63, 81, 181);
+  box-shadow: 0 0 8px #393939;
+  border-radius: 6px 6px 0 0;
+}
+.title {
+  margin-left: 1em;
+  display: flex;
+  align-items: center;
+}
+.title-text {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.logo {
+  width: 39px;
+  height: 39px;
+  border-radius: 6px;
+}
+.nav {
+  display: flex;
+  justify-content: space-evenly;
+}
+.nav-link {
+  color: rgb(229, 232, 245);
+  padding: 1em;
+}
+a.unset {
+  color: unset;
+  text-decoration: unset;
+}
+a.active {
+  color: deeppink;
+  background-color: lightgray;
+  border-radius: 0.39em 0.39em 0 0;
+}
+.audio-player {
+  height: 39px;
+  width: 100%;
+}
+td.clickable {
+  cursor: pointer;
+}
+div.clickable {
+  cursor: pointer;
+}
+div.page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+div.search_toolbar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  width: 100%;
+}
+div.feedback {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+button.refresh {
+  width: 100%;
+}
+td,
+th {
+  padding-bottom: 0.5em;
+  padding-top: 0.5em;
+}
+dialog {
+  border: solid;
+}
+.player-options {
+  display: flex;
+}
+.ffmpeg-config {
+  display: flex;
+  justify-content: space-between;
+}
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -0,0 +1,79 @@
+import {
+  HashRouter as Router,
+  Routes,
+  Route,
+  NavLink,
+} from "react-router-dom";
+import "./App.css";
+
+import GetRandomFiles from "./component/GetRandomFiles";
+import SearchFiles from "./component/SearchFiles";
+import SearchFolders from "./component/SearchFolders";
+import Manage from "./component/Manage";
+import Share from "./component/Share";
+import AudioPlayer from "./component/AudioPlayer";
+import { useState } from "react";
+
+function App() {
+  const [playingFile, setPlayingFile] = useState({});
+  return (
+    <div className="base">
+      <Router>
+        <header className="header">
+          <h3 className="title">
+            <img src="favicon.png" alt="logo" className="logo" />
+            <span className="title-text">MSW Open Music Project</span>
+          </h3>
+          <nav className="nav">
+            <NavLink to="/" className="nav-link">
+              Feeling luckly
+            </NavLink>
+            <NavLink to="/search-files" className="nav-link">
+              Files
+            </NavLink>
+            <NavLink to="/search-folders" className="nav-link">
+              Folders
+            </NavLink>
+            <NavLink to="/manage" className="nav-link">
+              Manage
+            </NavLink>
+          </nav>
+        </header>
+        <main>
+          <Routes>
+            <Route
+              index
+              path="/"
+              element={<GetRandomFiles setPlayingFile={setPlayingFile} />}
+            />
+            <Route
+              path="/search-files"
+              element={<SearchFiles setPlayingFile={setPlayingFile} />}
+            />
+            <Route
+              path="/search-folders"
+              element={<SearchFolders setPlayingFile={setPlayingFile} />}
+            />
+            <Route
+              path="/search-folders/:id"
+              element={<SearchFolders setPlayingFile={setPlayingFile} />}
+            />
+            <Route path="/manage" element={<Manage />} />
+            <Route
+              path="/share/:id"
+              element={<Share setPlayingFile={setPlayingFile} />}
+            />
+          </Routes>
+        </main>
+        <footer>
+          <AudioPlayer
+            playingFile={playingFile}
+            setPlayingFile={setPlayingFile}
+          />
+        </footer>
+      </Router>
+    </div>
+  );
+}
+
+export default App;
--- a/web/src/App.test.js
+++ b/web/src/App.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
--- a/web/src/component/AudioPlayer.js
+++ b/web/src/component/AudioPlayer.js
@@ -0,0 +1,154 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router";
+import { CalcReadableFilesizeDetail } from "./Common";
+import FfmpegConfig from "./FfmpegConfig";
+import FileDialog from "./FileDialog";
+
+function AudioPlayer(props) {
+  // props.playingFile
+  // props.setPlayingFile
+
+  const [fileDialogShowStatus, setFileDialogShowStatus] = useState(false);
+  const [loop, setLoop] = useState(true);
+  const [raw, setRaw] = useState(false);
+  const [prepare, setPrepare] = useState(false);
+  const [selectedFfmpegConfig, setSelectedFfmpegConfig] = useState({});
+  const [playingURL, setPlayingURL] = useState("");
+  const [isPreparing, setIsPreparing] = useState(false);
+  const [preparedFilesize, setPreparedFilesize] = useState(null);
+
+  useEffect(() => {
+    // no playing file
+    if (props.playingFile.id === undefined) {
+      setPlayingURL("");
+      return;
+    }
+    if (raw) {
+      console.log("Play raw file");
+      setPlayingURL("/api/v1/get_file_direct?id=" + props.playingFile.id);
+    } else {
+      if (prepare) {
+        // prepare file
+        setIsPreparing(true);
+        fetch("/api/v1/prepare_file_stream_direct", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            id: props.playingFile.id,
+            config_name: selectedFfmpegConfig.name,
+          }),
+        })
+          .then((response) => response.json())
+          .then((data) => {
+            setPreparedFilesize(data.filesize);
+            setIsPreparing(false);
+            setPlayingURL(
+              `/api/v1/get_file_stream_direct?id=${props.playingFile.id}&config=${selectedFfmpegConfig.name}`
+            );
+          });
+      } else {
+        setPlayingURL(
+          `/api/v1/get_file_stream?id=${props.playingFile.id}&config=${selectedFfmpegConfig.name}`
+        );
+      }
+    }
+  }, [props.playingFile.id, raw, prepare, selectedFfmpegConfig]);
+
+  let navigate = useNavigate();
+
+  return (
+    <div>
+      <h5>Player status</h5>
+      {props.playingFile.id && (
+        <span>
+          <FileDialog
+            showStatus={fileDialogShowStatus}
+            setShowStatus={setFileDialogShowStatus}
+            file={props.playingFile}
+            setPlayingFile={() => {
+              return;
+            }}
+          />
+
+          <button
+            onClick={() => {
+              setFileDialogShowStatus(!fileDialogShowStatus);
+            }}
+          >
+            {props.playingFile.filename}
+          </button>
+
+          <button
+            onClick={() =>
+              navigate(`search-folders/${props.playingFile.folder_id}`)
+            }
+          >
+            {props.playingFile.foldername}
+          </button>
+
+          <button disabled>
+            {prepare
+              ? CalcReadableFilesizeDetail(preparedFilesize)
+              : CalcReadableFilesizeDetail(props.playingFile.filesize)}
+          </button>
+
+          {isPreparing && <button disabled>Preparing...</button>}
+
+          {playingURL !== "" && (
+            <button
+              onClick={() => {
+                props.setPlayingFile({});
+              }}
+            >
+              Stop
+            </button>
+          )}
+        </span>
+      )}
+
+      <br />
+
+      <input
+        checked={loop}
+        onChange={(event) => setLoop(event.target.checked)}
+        type="checkbox"
+      />
+      <label>Loop</label>
+
+      <input
+        checked={raw}
+        onChange={(event) => setRaw(event.target.checked)}
+        type="checkbox"
+      />
+      <label>Raw</label>
+
+      {!raw && (
+        <span>
+          <input
+            checked={prepare}
+            onChange={(event) => setPrepare(event.target.checked)}
+            type="checkbox"
+          />
+          <label>Prepare</label>
+        </span>
+      )}
+
+      {playingURL !== "" && (
+        <audio
+          controls
+          autoPlay
+          loop={loop}
+          className="audio-player"
+          src={playingURL}
+        ></audio>
+      )}
+
+      <FfmpegConfig
+        selectedFfmpegConfig={selectedFfmpegConfig}
+        setSelectedFfmpegConfig={setSelectedFfmpegConfig}
+      />
+    </div>
+  );
+}
+
+export default AudioPlayer;
--- a/web/src/component/Common.js
+++ b/web/src/component/Common.js
@@ -0,0 +1,40 @@
+export function CalcReadableFilesize(filesize) {
+  if (filesize < 1024) {
+    return filesize;
+  }
+  if (filesize < 1024 * 1024) {
+    return Math.round(filesize / 1024) + "K";
+  }
+  if (filesize < 1024 * 1024 * 1024) {
+    return Math.round(filesize / 1024 / 1024) + "M";
+  }
+  if (filesize < 1024 * 1024 * 1024 * 1024) {
+    return Math.round(filesize / 1024 / 1024 / 1024) + "G";
+  }
+}
+
+export function CalcReadableFilesizeDetail(filesize) {
+  if (filesize < 1024 * 1024) {
+    return filesize;
+  }
+  if (filesize < 1024 * 1024 * 1024) {
+    return numberWithCommas(Math.round(filesize / 1024)) + "K";
+  }
+  if (filesize < 1024 * 1024 * 1024 * 1024) {
+    return numberWithCommas(Math.round(filesize / 1024 / 1024)) + "M";
+  }
+  if (filesize < 1024 * 1024 * 1024 * 1024 * 1024) {
+    return numberWithCommas(Math.round(filesize / 1024 / 1024 / 1024)) + "G";
+  }
+}
+
+function numberWithCommas(x) {
+  x = x.toString();
+  var pattern = /(-?\d+)(\d{3})/;
+  while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
+  return x;
+}
+
+export function SayHello() {
+  return "Hello";
+}
--- a/web/src/component/FfmpegConfig.js
+++ b/web/src/component/FfmpegConfig.js
@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+
+function FfmpegConfig(props) {
+  // props.setSelectedFfmpegConfig
+  // props.selectedFfmpegConfig
+
+  const [ffmpegConfigList, setFfmpegConfigList] = useState([]);
+
+  useEffect(() => {
+    fetch("/api/v1/get_ffmpeg_config_list")
+      .then((response) => response.json())
+      .then((data) => {
+        setFfmpegConfigList(data.ffmpeg_config_list);
+        if (data.ffmpeg_config_list.length > 0) {
+          props.setSelectedFfmpegConfig(data.ffmpeg_config_list[0]);
+        }
+      });
+  }, []);
+
+  return (
+    <div className="ffmpeg-config">
+      <select
+        onChange={(event) => {
+          props.setSelectedFfmpegConfig(
+            ffmpegConfigList[event.target.selectedIndex]
+          );
+        }}
+      >
+        {ffmpegConfigList.map((ffmpegConfig) => (
+          <option key={ffmpegConfig.name}>{ffmpegConfig.name}</option>
+        ))}
+      </select>
+      <span>{props.selectedFfmpegConfig.args}</span>
+    </div>
+  );
+}
+
+export default FfmpegConfig;
--- a/web/src/component/FileDialog.js
+++ b/web/src/component/FileDialog.js
@@ -0,0 +1,44 @@
+import { useNavigate } from "react-router";
+
+function FileDialog(props) {
+  // props.showStatus
+  // props.setShowStatus
+  // props.playingFile
+  // props.setPlayingFile
+  // props.file
+
+  let navigate = useNavigate();
+
+  if (!props.showStatus) {
+    return null;
+  }
+
+  return (
+    <dialog open>
+      <p>{props.file.filename}</p>
+      <FileDialog file={props.file} />
+      <p>
+        Download 使用 Axios 异步下载
+        <br />
+        Play 调用网页播放器播放
+        <br />
+      </p>
+      <button>Download</button>
+      <button
+        onClick={() => {
+          props.setPlayingFile(props.file);
+          props.setShowStatus(false);
+        }}
+      >
+        Play
+      </button>
+      <button onClick={() => {
+        navigate(`/share/${props.file.id}`)
+        props.setShowStatus(false);
+      }}>Share</button>
+      <button onClick={() => props.setShowStatus(false)}>Close</button>
+    </dialog>
+  );
+}
+
+export default FileDialog;
--- a/web/src/component/FileEntry.js
+++ b/web/src/component/FileEntry.js
@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { CalcReadableFilesize } from "./Common";
+import FileDialog from "./FileDialog";
+
+function FileEntry(props) {
+  const [showStatus, setShowStatus] = useState(false);
+  let navigate = useNavigate();
+
+  return (
+    <tr>
+      <td
+        className="clickable"
+        onClick={() => {
+          // double click to play file and close dialog
+          if (showStatus) {
+            props.setPlayingFile(props.file);
+            setShowStatus(false);
+            return;
+          }
+          setShowStatus(true);
+        }}
+      >
+        {props.file.filename}
+      </td>
+      <td
+        className="clickable"
+        onClick={() => navigate(`/search-folders/${props.file.folder_id}`)}
+      >
+        {props.file.foldername}
+      </td>
+      <td>
+        {CalcReadableFilesize(props.file.filesize)}
+        <FileDialog
+          setPlayingFile={props.setPlayingFile}
+          showStatus={showStatus}
+          setShowStatus={setShowStatus}
+          file={props.file}
+        />
+      </td>
+    </tr>
+  );
+}
+
+export default FileEntry;
--- a/web/src/component/FilesTable.js
+++ b/web/src/component/FilesTable.js
@@ -0,0 +1,26 @@
+import FileEntry from "./FileEntry";
+
+function FilesTable(props) {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Filename</th>
+          <th>Folder Name</th>
+          <th>Size</th>
+        </tr>
+      </thead>
+      <tbody>
+        {props.files.map((file) => (
+          <FileEntry
+            setPlayingFile={props.setPlayingFile}
+            key={file.id}
+            file={file}
+          />
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default FilesTable;
--- a/web/src/component/FoldersTable.js
+++ b/web/src/component/FoldersTable.js
@@ -0,0 +1,32 @@
+import { useNavigate } from "react-router";
+
+function FoldersTable(props) {
+  let navigate = useNavigate();
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Folder name</th>
+          <th>Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        {props.folders.map((folder) => (
+          <tr key={folder.id}>
+            <td
+              onClick={() => navigate(`/search-folders/${folder.id}`)}
+              className="clickable"
+            >
+              {folder.foldername}
+            </td>
+            <td onClick={() => navigate(`/search-folders/${folder.id}`)}>
+              <button>View</button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default FoldersTable;
--- a/web/src/component/GetRandomFiles.js
+++ b/web/src/component/GetRandomFiles.js
@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+import FilesTable from "./FilesTable";
+
+function GetRandomFiles(props) {
+  const [files, setFiles] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  function refresh(setFiles) {
+    setIsLoading(true);
+    fetch("/api/v1/get_random_files")
+      .then((response) => response.json())
+      .then((data) => {
+        setIsLoading(false);
+        setFiles(data.files);
+      });
+  }
+
+  useEffect(() => {
+    refresh(setFiles);
+  }, []);
+  return (
+    <div className="page">
+      <div className="search_toolbar">
+        <button className="refresh" onClick={() => refresh(setFiles)}>
+          {isLoading ? "Loading..." : "Refresh"}
+        </button>
+      </div>
+      <FilesTable setPlayingFile={props.setPlayingFile} files={files} />
+    </div>
+  );
+}
+
+export default GetRandomFiles;
--- a/web/src/component/Manage.js
+++ b/web/src/component/Manage.js
@@ -0,0 +1,9 @@
+function Manage() {
+    return (
+        <div>
+            <h2>Manage</h2>
+        </div>
+    )
+}
+
+export default Manage;
--- a/web/src/component/SearchFiles.js
+++ b/web/src/component/SearchFiles.js
@@ -0,0 +1,93 @@
+import { useState, useEffect } from "react";
+import FilesTable from "./FilesTable";
+
+function SearchFiles(props) {
+  const [files, setFiles] = useState([]);
+  const [filename, setFilename] = useState("");
+  const [offset, setOffset] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const limit = 10;
+
+  function searchFiles() {
+    if (
+      filename === "" &&
+      (props.folder === undefined || props.folder.id === undefined)
+    ) {
+      return;
+    }
+    const folder = props.folder ? props.folder : {};
+    const url = folder.id
+      ? "/api/v1/get_files_in_folder"
+      : "/api/v1/search_files";
+    setIsLoading(true);
+    fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        filename: filename,
+        limit: limit,
+        offset: offset,
+        folder_id: folder.id,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setIsLoading(false);
+        const files = data.files ? data.files : [];
+        setFiles(files);
+      });
+  }
+
+  function nextPage() {
+    setOffset(offset + limit);
+  }
+
+  function lastPage() {
+    const offsetValue = offset - limit;
+    if (offsetValue < 0) {
+      return;
+    }
+    setOffset(offsetValue);
+  }
+
+  useEffect(() => searchFiles(), [offset, props.folder]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div className="page">
+      <h3>Search Files</h3>
+      <div className="search_toolbar">
+        {!props.folder && (
+          <input
+            onChange={(event) => setFilename(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                searchFiles();
+              }
+            }}
+            type="text"
+            placeholder="Enter filename"
+          />
+        )}
+        <button
+          disabled={!!props.folder}
+          onClick={() => {
+            searchFiles();
+          }}
+        >
+          {isLoading ? "Loading..." : "Search"}
+        </button>
+        {props.folder && props.folder.foldername && (
+          <button onClick={searchFiles}>{props.folder.foldername}</button>
+        )}
+        <button onClick={lastPage}>Last page</button>
+        <button disabled>
+          {offset} - {offset + files.length}
+        </button>
+        <button onClick={nextPage}>Next page</button>
+      </div>
+      <FilesTable setPlayingFile={props.setPlayingFile} files={files} />
+    </div>
+  );
+}
+
+export default SearchFiles;
--- a/web/src/component/SearchFolders.js
+++ b/web/src/component/SearchFolders.js
@@ -0,0 +1,94 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import FoldersTable from "./FoldersTable";
+import SearchFiles from "./SearchFiles";
+
+function SearchFolders(props) {
+  const [foldername, setFoldername] = useState("");
+  const [folders, setFolders] = useState([]);
+  const [folder, setFolder] = useState({});
+  const [offset, setOffset] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const limit = 10;
+
+  function searchFolder() {
+    if (foldername === "") {
+      return;
+    }
+    setIsLoading(true);
+    fetch("/api/v1/search_folders", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        foldername: foldername,
+        limit: limit,
+        offset: offset,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setIsLoading(false);
+        let folders;
+        if (data.folders) {
+          folders = data.folders;
+        } else {
+          folders = [];
+        }
+        setFolders(folders);
+      });
+  }
+
+  function nextPage() {
+    setOffset(offset + limit);
+  }
+
+  function lastPage() {
+    const offsetValue = offset - limit;
+    if (offsetValue < 0) {
+      return;
+    }
+    setOffset(offsetValue);
+  }
+
+  function viewFolder(folder) {
+    setFolder(folder);
+  }
+
+  let params = useParams();
+  useEffect(() => searchFolder(), [offset]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (params.id !== undefined) {
+      setFolder({ id: parseInt(params.id) });
+    }
+  }, [params.id]);
+
+  return (
+    <div className="page">
+      <h3>Search Folders</h3>
+      <div className="search_toolbar">
+        <input
+          onChange={(event) => setFoldername(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              searchFolder();
+            }
+          }}
+          type="text"
+          placeholder="Enter folder name"
+        />
+        <button onClick={searchFolder}>
+          {isLoading ? "Loading..." : "Search"}
+        </button>
+        <button onClick={lastPage}>Last page</button>
+        <button disabled>
+          {offset} - {offset + limit}
+        </button>
+        <button onClick={nextPage}>Next page</button>
+      </div>
+      <FoldersTable viewFolder={viewFolder} folders={folders} />
+      <SearchFiles setPlayingFile={props.setPlayingFile} folder={folder} />
+    </div>
+  );
+}
+
+export default SearchFolders;
--- a/web/src/component/Share.js
+++ b/web/src/component/Share.js
@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import FilesTable from "./FilesTable";
+
+function Share(props) {
+  let params = useParams();
+  const [file, setFile] = useState([]);
+  useEffect(() => {
+    fetch("/api/v1/get_file_info", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        id: parseInt(params.id),
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setFile([data]);
+      });
+  }, [params]);
+  return (
+    <div className="page">
+      <h3>Share with others! {params.id}</h3>
+      <p>
+        Share link: <a href={window.location.href}>{window.location.href}</a>
+      </p>
+      <FilesTable setPlayingFile={props.setPlayingFile} files={file} />
+    </div>
+  );
+}
+
+export default Share;
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import 'water.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
--- a/web/src/reportWebVitals.js
+++ b/web/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
--- a/web/src/setupTests.js
+++ b/web/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
--- a/web/style.css
+++ b/web/style.css
@@ -1,74 +0,0 @@
-html {
-	font-size: 1em;
-}
-.base {
-	display: grid;
-	grid-row-gap: 1em;
-}
-.header {
-	color: white;
-	background-color: rgb(63, 81, 181);
-	box-shadow: 0 0 8px #393939;
-}
-.title {
-	margin-left: 1em;
-	display: flex;
-	align-items: center;
-}
-.title-text {
-	margin-left: 1em;
-	margin-right: 1em;
-}
-.logo {
-	width: 39px;
-	height: 39px;
-	border-radius: 6px;
-}
-.nav {
-	display: flex;
-	justify-content: space-evenly;
-}
-.nav-link {
-	color: rgb(229, 232, 245);
-	padding: 1em;
-}
-a.router-link-active {
-	color: deeppink;
-	background-color: lightgray;
-	border-radius: 0.39em 0.39em 0 0;
-}
-.audio-player {
-	height: 39px;
-	width: 100%;
-}
-td.clickable {
-	cursor: pointer;
-}
-div.clickable {
-	cursor: pointer;
-}
-div.page {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-}
-div.search_toolbar {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: flex-end;
-	width: 100%;
-}
-div.feedback {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-}
-button.refresh {
-	width: 100%;
-}
-td, th {
-	padding-bottom: 0.5em;
-	padding-top: 0.5em;
-}
--- a/web/vue-router.global.prod.js
+++ b/web/vue-router.global.prod.js
--- a/web/vue-router.js
+++ b/web/vue-router.js
--- a/web/vue.global.prod.js
+++ b/web/vue.global.prod.js
--- a/web/vue.js
+++ b/web/vue.js
--- a/web/water.css
+++ b/web/water.css