38 lines
1.0 KiB
Vue
38 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue'
|
|
import type { RouteLocationNormalized } from 'vue-router'
|
|
import { updateUrlParameter } from '~/components/util/route'
|
|
|
|
const props = defineProps<Props>();
|
|
const route = useRoute()
|
|
const currentEpisode = computed(() => Number(route.query.episode as string))
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
function changeEpisode(route: RouteLocationNormalized, props: Props, currentEpisode: number) {
|
|
let episodeOffset = 0
|
|
if (props.type == EpisodeChangeType.NEXT) {
|
|
episodeOffset = 1
|
|
}
|
|
if (props.type == EpisodeChangeType.PREVIOUS) {
|
|
episodeOffset = -1
|
|
}
|
|
updateUrlParameter(route, 'episode', String(currentEpisode + episodeOffset))
|
|
}
|
|
|
|
interface Props {
|
|
type: EpisodeChangeType;
|
|
}
|
|
|
|
export enum EpisodeChangeType {
|
|
NEXT = "mage:next-fill",
|
|
PREVIOUS = "mage:previous-fill",
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UiButton v-on:click="changeEpisode(route, props, currentEpisode)" variant="borderless" size="icon">
|
|
<Icon :icon="props.type" class="size-5" />
|
|
</UiButton>
|
|
</template>
|