2022-04-15 14:24:30 +00:00
|
|
|
|
<template>
|
|
|
|
|
<section id="settingsWrapper">
|
2022-04-15 17:00:08 +00:00
|
|
|
|
<ScreenHeader>Settings</ScreenHeader>
|
2022-04-15 14:24:30 +00:00
|
|
|
|
|
|
|
|
|
<form @submit.prevent="confirmThenSave" class="main-scroll-wrap">
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
<label for="inputSettingsPath">Media Path</label>
|
|
|
|
|
|
|
|
|
|
<p class="help" id="mediaPathHelp">
|
|
|
|
|
The <em>absolute</em> path to the server directory containing your media.
|
|
|
|
|
Koel will scan this directory for songs and extract any available information.<br>
|
|
|
|
|
Scanning may take a while, especially if you have a lot of songs, so be patient.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
aria-describedby="mediaPathHelp"
|
|
|
|
|
id="inputSettingsPath"
|
|
|
|
|
type="text"
|
2022-04-15 17:00:08 +00:00
|
|
|
|
v-model="state.media_path"
|
2022-04-15 14:24:30 +00:00
|
|
|
|
name="media_path"
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-row">
|
2022-04-15 17:00:08 +00:00
|
|
|
|
<Btn type="submit">Scan</Btn>
|
2022-04-15 14:24:30 +00:00
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</section>
|
|
|
|
|
</template>
|
|
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { computed, defineAsyncComponent, reactive } from 'vue'
|
2022-04-15 14:24:30 +00:00
|
|
|
|
import { settingStore, sharedStore } from '@/stores'
|
2022-04-15 17:00:08 +00:00
|
|
|
|
import { alerts, forceReloadWindow, hideOverlay, parseValidationError, showOverlay } from '@/utils'
|
2022-04-15 14:24:30 +00:00
|
|
|
|
import router from '@/router'
|
|
|
|
|
|
2022-04-21 16:06:45 +00:00
|
|
|
|
const ScreenHeader = defineAsyncComponent(() => import('@/components/ui/ScreenHeader.vue'))
|
2022-04-15 17:00:08 +00:00
|
|
|
|
const Btn = defineAsyncComponent(() => import('@/components/ui/btn.vue'))
|
2022-04-15 14:24:30 +00:00
|
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
|
const state = settingStore.state
|
|
|
|
|
const sharedState = reactive(sharedStore.state)
|
2022-04-15 14:24:30 +00:00
|
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
|
const shouldWarn = computed(() => {
|
|
|
|
|
// Warn the user if the media path is not empty and about to change.
|
|
|
|
|
if (!sharedState.originalMediaPath || !state.media_path) {
|
|
|
|
|
return false
|
|
|
|
|
}
|
2022-04-15 14:24:30 +00:00
|
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
|
return sharedState.originalMediaPath !== state.media_path.trim()
|
|
|
|
|
})
|
2022-04-15 14:24:30 +00:00
|
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
|
const save = async () => {
|
|
|
|
|
showOverlay()
|
2022-04-15 14:24:30 +00:00
|
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
|
try {
|
|
|
|
|
await settingStore.update()
|
|
|
|
|
// Make sure we're back to home first.
|
|
|
|
|
router.go('home')
|
|
|
|
|
forceReloadWindow()
|
|
|
|
|
} catch (err: any) {
|
|
|
|
|
hideOverlay()
|
2022-04-15 14:24:30 +00:00
|
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
|
const msg = err.response.status === 422 ? parseValidationError(err.response.data)[0] : 'Unknown error.'
|
|
|
|
|
alerts.error(msg)
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-04-15 14:24:30 +00:00
|
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
|
const confirmThenSave = () => {
|
|
|
|
|
if (shouldWarn.value) {
|
|
|
|
|
alerts.confirm('Warning: Changing the media path will essentially remove all existing data – songs, artists, \
|
|
|
|
|
albums, favorites, everything – and empty your playlists! Sure you want to proceed?', save)
|
|
|
|
|
} else {
|
|
|
|
|
save()
|
2022-04-15 14:24:30 +00:00
|
|
|
|
}
|
2022-04-15 17:00:08 +00:00
|
|
|
|
}
|
2022-04-15 14:24:30 +00:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
#settingsWrapper {
|
|
|
|
|
input[type="text"] {
|
|
|
|
|
width: 50%;
|
|
|
|
|
margin-top: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
|
@media only screen and (max-width: 667px) {
|
2022-04-15 14:24:30 +00:00
|
|
|
|
input[type="text"] {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|