added adn dub and sub selector

This commit is contained in:
Daniel Haller 2024-04-25 02:23:47 +02:00
parent 5e1963a0ad
commit 7bed53edd4

View File

@ -49,6 +49,7 @@
</div> </div>
</button> </button>
<button v-for="result in adnSearchResults" @click="selectShow(result)" class="flex flex-row gap-3 px-3 py-3 hover:bg-[#747474] rounded-xl h-20"> <button v-for="result in adnSearchResults" @click="selectShow(result)" class="flex flex-row gap-3 px-3 py-3 hover:bg-[#747474] rounded-xl h-20">
{{ result.languages }}
<div class="min-w-10 w-10 h-14 bg-gray-700"> <div class="min-w-10 w-10 h-14 bg-gray-700">
<img :src="result.image2x" alt="Image Banner" class="h-full w-full object-cover" /> <img :src="result.image2x" alt="Image Banner" class="h-full w-full object-cover" />
</div> </div>
@ -185,11 +186,36 @@
</button> </button>
</div> </div>
</div> </div>
<div v-if="service === 'adn'" class="relative flex flex-col select-none"> <div v-if="service === 'adn' && ADNselectedShow" class="relative flex flex-col select-none">
<div class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center cursor-pointer"> <div @click="selectDub ? (selectDub = false) : (selectDub = true)" class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center cursor-pointer">
Dub: Dubs:
{{ selectedDubs.map((t) => t.name).join(', ') }} {{ selectedDubs.map((t) => t.name).join(', ') }}
</div> </div>
<div v-if="selectDub" class="absolute top-full left-0 w-full bg-[#868585] rounded-xl grid grid-cols-12 gap-1 p-1 z-10">
<button
@click="toggleDub({ locale: 'ja-JP', name: 'JP' })"
class="flex flex-row items-center justify-center gap-3 py-2 rounded-xl text-sm"
:class="selectedDubs.find((i) => i.locale === 'ja-JP') ? 'bg-[#585858]' : 'hover:bg-[#747474]'"
>
JP
</button>
<button
v-if="ADNselectedShow.languages.find((l) => l === 'vde')"
@click="toggleDub({ locale: 'de-DE', name: 'DE' })"
class="flex flex-row items-center justify-center gap-3 py-2 rounded-xl text-sm"
:class="selectedDubs.find((i) => i.locale === 'de-DE') ? 'bg-[#585858]' : 'hover:bg-[#747474]'"
>
DE
</button>
<button
v-if="ADNselectedShow.languages.find((l) => l === 'vf')"
@click="toggleDub({ locale: 'fr-FR', name: 'FR' })"
class="flex flex-row items-center justify-center gap-3 py-2 rounded-xl text-sm"
:class="selectedDubs.find((i) => i.locale === 'fr-FR') ? 'bg-[#585858]' : 'hover:bg-[#747474]'"
>
FR
</button>
</div>
</div> </div>
<div v-if="service === 'crunchyroll'" class="relative flex flex-col select-none"> <div v-if="service === 'crunchyroll'" class="relative flex flex-col select-none">
<div @click="selectSub ? (selectSub = false) : (selectSub = true)" class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center cursor-pointer"> <div @click="selectSub ? (selectSub = false) : (selectSub = true)" class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center cursor-pointer">
@ -209,11 +235,29 @@
</button> </button>
</div> </div>
</div> </div>
<div v-if="service === 'adn'" class="relative flex flex-col select-none"> <div v-if="service === 'adn' && ADNselectedShow" class="relative flex flex-col select-none">
<div class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center cursor-pointer"> <div @click="selectSub ? (selectSub = false) : (selectSub = true)" class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center cursor-pointer">
Sub: Subs:
{{ selectedSubs.length !== 0 ? selectedSubs.map((t) => t.name).join(', ') : 'No Subs selected' }} {{ selectedSubs.length !== 0 ? selectedSubs.map((t) => t.name).join(', ') : 'No Subs selected' }}
</div> </div>
<div v-if="selectSub" class="absolute top-full left-0 w-full bg-[#868585] rounded-xl grid grid-cols-12 gap-1 p-1 z-10">
<button
v-if="ADNselectedShow.languages.find((l) => l === 'vostde')"
@click="toggleSub({ locale: 'de-DE', name: 'DE' })"
class="flex flex-row items-center justify-center gap-3 py-2 rounded-xl text-sm"
:class="selectedSubs.find((i) => i.locale === 'de-DE') ? 'bg-[#585858]' : 'hover:bg-[#747474]'"
>
DE
</button>
<button
v-if="ADNselectedShow.languages.find((l) => l === 'vostf')"
@click="toggleSub({ locale: 'fr-FR', name: 'FR' })"
class="flex flex-row items-center justify-center gap-3 py-2 rounded-xl text-sm"
:class="selectedSubs.find((i) => i.locale === 'fr-FR') ? 'bg-[#585858]' : 'hover:bg-[#747474]'"
>
FR
</button>
</div>
</div> </div>
<div class="flex flex-row gap-3"> <div class="flex flex-row gap-3">
<div v-if="service === 'crunchyroll'" class="relative flex flex-col w-full"> <div v-if="service === 'crunchyroll'" class="relative flex flex-col w-full">
@ -570,11 +614,11 @@ const switchToSeason = async () => {
if (!episodesADN.value) { if (!episodesADN.value) {
isFetchingSeasons.value-- isFetchingSeasons.value--
return return
}; }
selectedStartEpisodeADN.value = episodesADN.value[0] selectedStartEpisodeADN.value = episodesADN.value[0]
selectedEndEpisodeADN.value = episodesADN.value[0] selectedEndEpisodeADN.value = episodesADN.value[0]
tab.value = 2 tab.value = 2
selectedDubs.value = [{ locale: 'ja-JP', name: 'JP' }]; selectedDubs.value = [{ locale: 'ja-JP', name: 'JP' }]
} }
if (CRselectedShow.value) { if (CRselectedShow.value) {
@ -722,4 +766,24 @@ const addToPlaylistADN = async () => {
} }
</script> </script>
<style></style> <style scoped>
::-webkit-scrollbar-track {
background: #303030;
border-radius: 0px 12px 12px 0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #cac9c9;
border-radius: 0px 12px 12px 0px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
::-webkit-scrollbar {
width: 8px;
}
</style>