mirror of https://github.com/FreeTubeApp/FreeTube
create ft-instance-selector component
This commit is contained in:
chunky programmer
Chunky programmer
parent
632a7c8c24
commit
f109da2784
|
|
@ -0,0 +1,50 @@
|
|||
import { defineComponent } from 'vue'
|
||||
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
|
||||
import FtInput from '../ft-input/ft-input.vue'
|
||||
import FtButton from '../ft-button/ft-button.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FtInstanceSelector',
|
||||
components: {
|
||||
'ft-button': FtButton,
|
||||
'ft-flex-box': FtFlexBox,
|
||||
'ft-input': FtInput
|
||||
},
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
tooltip: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
backendType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
currentInstance: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
instanceList: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
defaultInstance: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInstanceInput: function (inputData) {
|
||||
this.$emit('input', inputData)
|
||||
},
|
||||
setDefaultInstance: function () {
|
||||
this.$emit('setDefaultInstance')
|
||||
},
|
||||
clearDefaultInstance: function () {
|
||||
this.$emit('clearDefaultInstance')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<div>
|
||||
<ft-flex-box
|
||||
class="settingsFlexStart460px"
|
||||
>
|
||||
<ft-input
|
||||
:placeholder="placeholder"
|
||||
:show-action-button="false"
|
||||
:show-label="true"
|
||||
:value="currentInstance"
|
||||
:data-list="instanceList"
|
||||
:tooltip="$t('Tooltips.General Settings.Piped Instance')"
|
||||
@input="handleInstanceInput"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
<ft-flex-box>
|
||||
<div v-if="backendType === 'piped'">
|
||||
<a href="https://github.com/TeamPiped/Piped/wiki/Instances">
|
||||
{{ $t('Settings.General Settings.View all Piped instance information') }}
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
>
|
||||
<a
|
||||
href="https://api.invidious.io"
|
||||
>
|
||||
{{ $t('Settings.General Settings.View all Invidious instance information') }}
|
||||
</a>
|
||||
</div>
|
||||
</ft-flex-box>
|
||||
<p
|
||||
v-if="defaultInstance !== ''"
|
||||
class="center"
|
||||
>
|
||||
{{ $t('Settings.General Settings.The currently set default instance is {instance}', {
|
||||
instance: defaultInstance
|
||||
}) }}
|
||||
</p>
|
||||
<template v-else>
|
||||
<p
|
||||
class="center"
|
||||
>
|
||||
{{ $t('Settings.General Settings.No default instance has been set') }}
|
||||
</p>
|
||||
<p
|
||||
class="center"
|
||||
>
|
||||
{{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
|
||||
</p>
|
||||
</template>
|
||||
<ft-flex-box>
|
||||
<ft-button
|
||||
:label="$t('Settings.General Settings.Set Current Instance as Default')"
|
||||
@click="setDefaultInstance"
|
||||
/>
|
||||
<ft-button
|
||||
:label="$t('Settings.General Settings.Clear Default Instance')"
|
||||
@click="clearDefaultInstance"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./ft-instance-selector"></script>
|
||||
|
|
@ -2,10 +2,8 @@ import { defineComponent } from 'vue'
|
|||
import { mapActions, mapMutations } from 'vuex'
|
||||
import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
|
||||
import FtSelect from '../ft-select/ft-select.vue'
|
||||
import FtInput from '../ft-input/ft-input.vue'
|
||||
import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
|
||||
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
|
||||
import FtButton from '../ft-button/ft-button.vue'
|
||||
import FtInstanceSelector from '../ft-instance-selector/ft-instance-selector.vue'
|
||||
|
||||
import debounce from 'lodash.debounce'
|
||||
import { showToast } from '../../helpers/utils'
|
||||
|
|
@ -15,10 +13,8 @@ export default defineComponent({
|
|||
components: {
|
||||
'ft-settings-section': FtSettingsSection,
|
||||
'ft-select': FtSelect,
|
||||
'ft-input': FtInput,
|
||||
'ft-toggle-switch': FtToggleSwitch,
|
||||
'ft-flex-box': FtFlexBox,
|
||||
'ft-button': FtButton
|
||||
'ft-instance-selector': FtInstanceSelector
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
|
|
@ -202,7 +198,7 @@ export default defineComponent({
|
|||
this.setCurrentPipedInstanceBounce(input)
|
||||
},
|
||||
|
||||
handleSetDefaultInstanceClick: function () {
|
||||
handleSetDefaultInvidiousInstanceClick: function () {
|
||||
const instance = this.currentInvidiousInstance
|
||||
this.updateDefaultInvidiousInstance(instance)
|
||||
|
||||
|
|
@ -218,7 +214,7 @@ export default defineComponent({
|
|||
showToast(message)
|
||||
},
|
||||
|
||||
handleClearDefaultInstanceClick: function () {
|
||||
handleClearDefaultInvidiousInstanceClick: function () {
|
||||
this.updateDefaultInvidiousInstance('')
|
||||
showToast(this.$t('Default Invidious instance has been cleared'))
|
||||
},
|
||||
|
|
|
|||
|
|
@ -99,102 +99,57 @@
|
|||
@change="updateExternalLinkHandling"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="backendPreference === 'invidious' || fallbackPreference === 'invidious'"
|
||||
<template
|
||||
v-if="backendPreference === 'piped'"
|
||||
>
|
||||
<ft-flex-box class="settingsFlexStart460px">
|
||||
<ft-input
|
||||
:placeholder="$t('Settings.General Settings.Current Invidious Instance')"
|
||||
:show-action-button="false"
|
||||
:show-label="true"
|
||||
:value="currentInvidiousInstance"
|
||||
:data-list="invidiousInstancesList"
|
||||
:tooltip="$t('Tooltips.General Settings.Invidious Instance')"
|
||||
@input="handleInvidiousInstanceInput"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
<ft-flex-box>
|
||||
<div>
|
||||
<a
|
||||
href="https://api.invidious.io"
|
||||
>
|
||||
{{ $t('Settings.General Settings.View all Invidious instance information') }}
|
||||
</a>
|
||||
</div>
|
||||
</ft-flex-box>
|
||||
<p
|
||||
v-if="defaultInvidiousInstance !== ''"
|
||||
class="center"
|
||||
<ft-instance-selector
|
||||
:backend-type="'piped'"
|
||||
:placeholder="$t('Settings.General Settings.Current Piped Instance')"
|
||||
:tooltip="$t('Tooltips.General Settings.Piped Instance')"
|
||||
:instance-list="pipedInstancesList"
|
||||
:current-instance="currentPipedInstance"
|
||||
:default-instance="defaultPipedInstance"
|
||||
@input="handlePipedInstanceInput"
|
||||
@setDefaultInstance="handleSetDefaultPipedInstanceClick"
|
||||
@cclearDefaultInstance="handleClearDefaultPipedInstanceClick"
|
||||
/>
|
||||
<br
|
||||
v-if="(backendFallback && fallbackPreference === 'invidious')"
|
||||
>
|
||||
{{ $t('Settings.General Settings.The currently set default instance is {instance}', { instance: defaultInvidiousInstance }) }}
|
||||
</p>
|
||||
<template v-else>
|
||||
<p class="center">
|
||||
{{ $t('Settings.General Settings.No default instance has been set') }}
|
||||
</p>
|
||||
<p class="center">
|
||||
{{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
|
||||
</p>
|
||||
</template>
|
||||
<ft-flex-box>
|
||||
<ft-button
|
||||
:label="$t('Settings.General Settings.Set Current Instance as Default')"
|
||||
@click="handleSetDefaultInstanceClick"
|
||||
/>
|
||||
<ft-button
|
||||
:label="$t('Settings.General Settings.Clear Default Instance')"
|
||||
@click="handleClearDefaultInstanceClick"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
</div>
|
||||
<div
|
||||
v-if="backendPreference === 'piped' || fallbackPreference === 'piped'"
|
||||
</template>
|
||||
<template
|
||||
v-if="(backendFallback && fallbackPreference === 'invidious') || backendPreference == 'invidious'"
|
||||
>
|
||||
<ft-flex-box class="settingsFlexStart460px">
|
||||
<ft-input
|
||||
:placeholder="$t('Settings.General Settings.Current Piped Instance')"
|
||||
:show-action-button="false"
|
||||
:show-label="true"
|
||||
:value="currentPipedInstance"
|
||||
:data-list="pipedInstancesList"
|
||||
:tooltip="$t('Tooltips.General Settings.Piped Instance')"
|
||||
@input="handlePipedInstanceInput"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
<ft-flex-box>
|
||||
<div>
|
||||
<a
|
||||
href="https://github.com/TeamPiped/Piped/wiki/Instances"
|
||||
>
|
||||
{{ $t('Settings.General Settings.View all Piped instance information') }}
|
||||
</a>
|
||||
</div>
|
||||
</ft-flex-box>
|
||||
<p
|
||||
v-if="defaultPipedInstance !== ''"
|
||||
class="center"
|
||||
<ft-instance-selector
|
||||
:backend-type="'invidious'"
|
||||
:placeholder="$t('Settings.General Settings.Current Invidious Instance')"
|
||||
:tooltip="$t('Tooltips.General Settings.Invidious Instance')"
|
||||
:instance-list="invidiousInstancesList"
|
||||
:current-instance="currentInvidiousInstance"
|
||||
:default-instance="defaultInvidiousInstance"
|
||||
@input="handleInvidiousInstanceInput"
|
||||
@setDefaultInstance="handleSetDefaultInvidiousInstanceClick"
|
||||
@clearDefaultInstance="handleClearDefaultInvidiousInstanceClick"
|
||||
/>
|
||||
<br
|
||||
v-if="(backendFallback && fallbackPreference === 'piped')"
|
||||
>
|
||||
{{ $t('Settings.General Settings.The currently set default instance is {instance}', { instance: defaultPipedInstance }) }}
|
||||
</p>
|
||||
<template v-else>
|
||||
<p class="center">
|
||||
{{ $t('Settings.General Settings.No default instance has been set') }}
|
||||
</p>
|
||||
<p class="center">
|
||||
{{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
|
||||
</p>
|
||||
</template>
|
||||
<ft-flex-box>
|
||||
<ft-button
|
||||
:label="$t('Settings.General Settings.Set Current Instance as Default')"
|
||||
@click="handleSetDefaultPipedInstanceClick"
|
||||
/>
|
||||
<ft-button
|
||||
:label="$t('Settings.General Settings.Clear Default Instance')"
|
||||
@click="handleClearDefaultPipedInstanceClick"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
</div>
|
||||
</template>
|
||||
<template
|
||||
v-if="backendFallback && fallbackPreference === 'piped'"
|
||||
>
|
||||
<ft-instance-selector
|
||||
:backend-type="'piped'"
|
||||
:placeholder="$t('Settings.General Settings.Current Piped Instance')"
|
||||
:tooltip="$t('Tooltips.General Settings.Piped Instance')"
|
||||
:instance-list="pipedInstancesList"
|
||||
:current-instance="currentPipedInstance"
|
||||
:default-instance="defaultPipedInstance"
|
||||
@input="handlePipedInstanceInput"
|
||||
@setDefaultInstance="handleSetDefaultPipedInstanceClick"
|
||||
@cclearDefaultInstance="handleClearDefaultPipedInstanceClick"
|
||||
/>
|
||||
</template>
|
||||
</ft-settings-section>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue