VueTube/NUXT/pages/activities/install.vue

105 lines
2.2 KiB
Vue

<template>
<div>
<center class="container" ref="stage0">
<v-img
src="/icon.svg"
width="10rem"
height="10rem"
:class="$vuetify.theme.dark ? '' : 'invert'"
/>
<h1>{{ lang.welcome }}</h1>
<p>{{ lang.tagline }}</p>
</center>
<center class="container hidden" ref="stage1">
<h1>{{ lang.langsetup }}</h1>
<language style="width: 80%" />
</center>
<!--
<center class="container hidden" ref="stage2">
<v-autocomplete
label="API"
:items="apis"
style="border-top-right-radius: 1rem !important; border-top-left-radius: 1rem !important; box-shadow: none !important"
solo
filled
class="mx-8"
></v-autocomplete>
</center>
-->
<center class="container hidden" ref="stage2">
<h1>{{ lang.featuresetup }}</h1>
<v-checkbox disabled v-model="ryd" :label="lang.enableryd" />
<v-checkbox disabled v-model="sponsorBlock" :label="lang.enablespb" />
</center>
<center class="container hidden" ref="stage3">
<h1>{{ lang.thanks }}</h1>
<h3>{{ lang.enjoy }}</h3>
</center>
<v-btn @click="next()" class="rounded-xl primary nextButton"
>{{ lang.next }}
<v-icon style="margin-left: 0.5em">mdi-arrow-right</v-icon></v-btn
>
</div>
</template>
<style scoped>
.nextButton {
position: absolute;
bottom: 1em;
right: 2em;
}
.hidden {
display: none;
}
.fullWidth {
width: 100%;
}
.container {
width: 100%;
}
</style>
<script>
import language from "~/components/Settings/language.vue";
export default {
layout: "empty",
components: {
language,
},
data() {
return {
lang: {},
stage: 0,
ryd: true,
sponsorBlock: true,
apis: ["youtube.com", "twitch.tv", "odysee.com"]
};
},
mounted() {
this.lang = this.$lang("events");
},
methods: {
next() {
this.$refs["stage" + this.stage].style.display = "none";
this.stage++;
if (!this.$refs["stage" + this.stage]) {
localStorage.setItem("lastRunVersion", process.env.version);
localStorage.setItem("firstTimeSetupComplete", true);
this.$router.replace("/");
}
this.$refs["stage" + this.stage].style.display = "block";
},
},
};
</script>