123 lines
4.6 KiB
Vue
123 lines
4.6 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-3 mt-3 font-dm" style="-webkit-app-region: no-drag">
|
|
<div class="flex flex-col items-center p-3 bg-[#11111189] rounded-xl">
|
|
<div class="text-sm mb-2 select-none">Episode File Naming</div>
|
|
<input
|
|
v-model="episodeNamingTemplate"
|
|
type="text"
|
|
name="text"
|
|
placeholder="Episode Naming"
|
|
class="bg-[#5c5b5b] w-full focus:outline-none px-3 py-2 rounded-xl text-sm text-center"
|
|
/>
|
|
<div class="text-sm mt-2"> Example: </div>
|
|
<div class="text-sm">
|
|
{{ `${episodeNaming}` }}
|
|
</div>
|
|
|
|
<div class="text-sm mt-2 select-none"> Variables: </div>
|
|
<div class="text-sm text-center"> {seriesName}, {episodeName}, {seasonNumber}, {seasonNumberDD}, {episodeNumber}, {episodeNumberDD}, {quality} </div>
|
|
</div>
|
|
<div class="flex flex-col items-center p-3 bg-[#11111189] rounded-xl">
|
|
<div class="text-sm mb-2 select-none">Season Folder Naming</div>
|
|
<input
|
|
v-model="seasonNamingTemplate"
|
|
type="text"
|
|
name="text"
|
|
placeholder="Episode Naming"
|
|
class="bg-[#5c5b5b] w-full focus:outline-none px-3 py-2 rounded-xl text-sm text-center"
|
|
/>
|
|
<div class="text-sm mt-2"> Example: </div>
|
|
<div class="text-sm">
|
|
{{ `${seasonNaming}` }}
|
|
</div>
|
|
|
|
<div class="text-sm mt-2 select-none"> Variables: </div>
|
|
<div class="text-sm text-center"> {seriesName}, {seasonNumber}, {seasonNumberDD}, {quality} </div>
|
|
<div class="flex flex-row mt-3 select-none">
|
|
<input v-model="isSeasonActive" @change="setSeasonFolder(isSeasonActive)" type="checkbox" name="Season Folder" class="cursor-pointer" />
|
|
<div class="text-sm ml-1.5"> Create Season Folder </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const episodeNumber = ref<number>(1)
|
|
const seasonNumber = ref<number>(1)
|
|
const quality = ref<number>(1080)
|
|
const seriesName = ref<string>('Frieren')
|
|
const episodeName = ref<string>("The Journey's End")
|
|
const episodeNamingTemplate = ref<string>()
|
|
const seasonNamingTemplate = ref<string>()
|
|
const isSeasonActive = ref<boolean>()
|
|
|
|
const episodeNaming = computed(() => {
|
|
if (!episodeNamingTemplate.value) return
|
|
return episodeNamingTemplate.value
|
|
.replace('{seriesName}', seriesName.value)
|
|
.replace('{episodeName}', episodeName.value)
|
|
.replace('{seasonNumber}', seasonNumber.value.toString())
|
|
.replace('{seasonNumberDD}', seasonNumber.value.toString().padStart(2, '0'))
|
|
.replace('{episodeNumber}', episodeNumber.value.toString())
|
|
.replace('{episodeNumberDD}', episodeNumber.value.toString().padStart(2, '0'))
|
|
.replace('{quality}', quality.value.toString() + 'p')
|
|
})
|
|
|
|
const seasonNaming = computed(() => {
|
|
if (!seasonNamingTemplate.value) return
|
|
return seasonNamingTemplate.value
|
|
.replace('{seriesName}', seriesName.value)
|
|
.replace('{seasonNumber}', seasonNumber.value.toString())
|
|
.replace('{seasonNumberDD}', seasonNumber.value.toString().padStart(2, '0'))
|
|
.replace('{quality}', quality.value.toString() + 'p')
|
|
})
|
|
|
|
onMounted(() => {
|
|
;(window as any).myAPI.getSeasonTemplate().then((result: string) => {
|
|
seasonNamingTemplate.value = result
|
|
})
|
|
;(window as any).myAPI.getEpisodeTemplate().then((result: string) => {
|
|
episodeNamingTemplate.value = result
|
|
})
|
|
;(window as any).myAPI.getSeasonEnabled().then((result: boolean) => {
|
|
isSeasonActive.value = result
|
|
})
|
|
})
|
|
|
|
watch(episodeNamingTemplate, () => {
|
|
if (!episodeNamingTemplate.value) return
|
|
setEpisodeTemplate(episodeNamingTemplate.value)
|
|
})
|
|
|
|
watch(seasonNamingTemplate, () => {
|
|
if (!seasonNamingTemplate.value) return
|
|
setSeasonTemplate(seasonNamingTemplate.value)
|
|
})
|
|
|
|
const setEpisodeTemplate = (name: string) => {
|
|
if (process.client) {
|
|
;(window as any).myAPI.setEpisodeTemplate(name).then((result: string) => {
|
|
episodeNamingTemplate.value = result
|
|
})
|
|
}
|
|
}
|
|
|
|
const setSeasonTemplate = (name: string) => {
|
|
if (process.client) {
|
|
;(window as any).myAPI.setSeasonTemplate(name).then((result: string) => {
|
|
seasonNamingTemplate.value = result
|
|
})
|
|
}
|
|
}
|
|
|
|
const setSeasonFolder = (status: boolean | undefined) => {
|
|
if (process.client) {
|
|
;(window as any).myAPI.setSeasonEnabled(status).then((result: boolean) => {
|
|
isSeasonActive.value = result
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style></style>
|