Custom Instances V1

Squashed commit of the following: commit 5784e95a454ab4633ea80d1e87a81248ea0e832f Author: root <[email protected]> Date: Sun Dec 10 23:14:25 2023 +0530 Custom Instances V1
mmjee · May 16, 2024 · d3f1b48 · d3f1b48
1 parent e0b5e67
commit d3f1b48
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 88 deletions.
diff --git a/src/routes/Preferences.vue b/src/routes/Preferences.vue
@@ -1,47 +1,34 @@
 <template>
-    <v-container style="max-width: 1080px">
-        <h1 class="text-h4 text-center">{{ $t('titles.preferences') }}</h1>
-        <v-divider class="ma-4"/>
-        <v-select
-            :label="$t('preferences.colorScheme')"
-            :value="$store.state.prefs.colorScheme"
-            @input="$store.commit('prefs/setColorScheme', { colorScheme: $event })"
-            :items="colorSchemeOptions"
-        />
-        <div v-for="(opt, optId) in options" :key="optId">
-            <v-checkbox
-                    v-if="opt.type === 'bool'"
-                    dense
-                    :label="$t('preferences.' + opt.id)"
-                    :input-value="$store.getters['prefs/getPreferenceBoolean'](opt.id, opt.default)"
-                    @change="setValue(opt.id, $event)"
-            />
-            <v-text-field
-                    v-else-if="opt.type === 'number'"
-                    type="number"
-                    :label="$t('preferences.' + opt.id)"
-                    :value="$store.getters['prefs/getPreferenceNumber'](opt.id, opt.default)"
-                    @input="setValue(opt.id, Number($event))"
-            />
-            <v-select
-                    v-else-if="opt.type === 'select'"
-                    :label="$t('preferences.' + opt.id)"
-                    :value="$store.getters['prefs/getPreference'](opt.id, opt.default)"
-                    :attach="opt.multi"
-                    :chips="opt.multi"
-                    :multiple="opt.multi"
-                    :items="opt.options"
-                    @input="setValue(opt.id, $event)"
-            />
-        </div>
-        <h5 class="text-h5">{{ $t('actions.instances_list') }}</h5>
-        <v-data-table :headers="tableHeaders" :items="instances" :items-per-page="-1">
+	<v-container style="max-width: 1080px">
+		<h1 class="text-h4 text-center">{{ $t('titles.preferences') }}</h1>
+		<v-divider class="ma-4" />
+		<v-select :label="$t('preferences.colorScheme')" :value="$store.state.prefs.colorScheme"
+			@input="$store.commit('prefs/setColorScheme', { colorScheme: $event })" :items="colorSchemeOptions" />
+		<div v-for="(opt, optId) in options" :key="optId">
+			<v-checkbox v-if="opt.type === 'bool'" dense :label="$t('preferences.' + opt.id)"
+				:input-value="$store.getters['prefs/getPreferenceBoolean'](opt.id, opt.default)"
+				@change="setValue(opt.id, $event)" />
+			<v-text-field v-else-if="opt.type === 'number'" type="number" :label="$t('preferences.' + opt.id)"
+				:value="$store.getters['prefs/getPreferenceNumber'](opt.id, opt.default)"
+				@input="setValue(opt.id, Number($event))" />
+			<v-select v-else-if="opt.type === 'select'" :label="$t('preferences.' + opt.id)"
+				:value="$store.getters['prefs/getPreference'](opt.id, opt.default)" :attach="opt.multi" :chips="opt.multi"
+				:multiple="opt.multi" :items="opt.options" @input="setValue(opt.id, $event)" />
+		</div>
+		<v-checkbox dense :label="$t('preferences.custom_instance.button_label')"
+			:input-value="$store.getters['prefs/getPreferenceBoolean']('enableCustomInstance', false)"
+			@change="setCustomInstanceStatus" />
+		<v-text-field v-if="$store.getters['prefs/getPreferenceBoolean']('enableCustomInstance', false)"
+			:label="$t('preferences.custom_instance.input_label')"
+			:value="$store.getters['prefs/getPreference']('custom_instance_v1')" @input="setValue('custom_instance_v1', $event)" />
+		<h5 class="text-h5">{{ $t('actions.instances_list') }}</h5>
+		<v-data-table :headers="tableHeaders" :items="instances" :items-per-page="-1">
 			<!-- eslint-disable-next-line vue/valid-v-slot -->
 			<template v-slot:item.registered="{ item }">
 				{{ $store.getters['i18n/fmtFullNumber'](item.registered) }}
 			</template>
-        </v-data-table>
-    </v-container>
+		</v-data-table>
+	</v-container>
 </template>
 
 <script>
@@ -51,8 +38,7 @@ import { COLOR_SCHEME_STATES } from '@/store/prefs-store'
 export default {
 	data () {
 		return {
-			instances: [],
-			instanceOption: null,
+			upstreamInstanceList: [],
 			countryOptions: null,
 			tableHeaders: [
 				{
@@ -288,45 +274,24 @@ export default {
 			if (this.countryOptions != null) {
 				opts.push(this.countryOptions)
 			}
-			if (this.instanceOption != null) {
-				opts.push(this.instanceOption)
-			}
 
-			return opts
-		}
-	},
-	mounted () {
-		if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} })
-		Promise.all([
-			this.getInstances(),
-			this.getCountries()
-		])
-	},
-	methods: {
-		async getCountries () {
-			const locale = this.$store.state.i18n.locale
-			const [Countries, LocalizedNames] = await loadCountries(locale)
-			Countries.registerLocale(LocalizedNames)
-			this.countryOptions = {
-				id: 'region',
+			opts.push({
+				id: 'instance',
 				type: 'select',
-				label: 'Country',
-				default: this.$store.getters['prefs/getPreference']('region', this.$store.state.i18n.parsed.region ?? 'US'),
-				options: Object.entries(Countries.getNames(LocalizedNames.locale, { select: 'official' }))
-					.sort((a, b) => this.$store.getters['i18n/compare'](a[1], b[1]))
-					.map(([code, name]) => ({
-						text: name,
-						value: code
-					}))
-			}
-		},
+				default: this.$store.getters['prefs/apiUrl'],
+				label: 'Instance',
+				options: this.instances.map(i => ({
+					text: i.name,
+					value: i.api_url
+				}))
+			})
 
-		async getInstances () {
-			const resp = await fetch(process.env.VUE_APP_PIPED_INSTANCES_API ?? 'https://piped-instances.kavin.rocks/', {
-				referrerPolicy: 'no-referrer'
-			}).then(resp => resp.json())
+			return opts
+		},
+		instances () {
+			const instanceURLSet = new Set()
 
-			const instances = resp.map((v) => {
+			const instances = this.upstreamInstanceList.map((v) => {
 				try {
 					v._locations = v.locations.split(',')
 				} catch (e) {
@@ -335,21 +300,59 @@ export default {
 				}
 				v._cdn = v.cdn
 				v.cdn = v._cdn === true ? '✔️' : '❌'
+				instanceURLSet.add(v.api_url)
 				return v
 			})
 
-			if (process.env.VUE_APP_PIPED_URL && !instances.includes(process.env.VUE_APP_PIPED_URL)) {
-				const u = new URL(process.env.VUE_APP_PIPED_URL)
+			const customInstance = this.$store.getters['prefs/getPreference']('custom_instance_v1')
+			if (customInstance != null && customInstance.length !== 0 && !instanceURLSet.has(customInstance)) {
+				try {
+					const u = new URL(customInstance)
+					instances.push({
+						name: u.hostname,
+						api_url: customInstance,
+						locations: '???',
+						_locations: [],
+						registered: -1,
+						cdn: '???',
+						_cdn: false
+					})
+					instanceURLSet.add(customInstance)
+				} catch (e) {
+					console.error('Caught error while parsing custom instance URL, skipping:', e)
+				}
+			}
+
+			const currentInstance = this.$store.getters['prefs/apiUrl']
+			if (!instanceURLSet.has(currentInstance)) {
+				const u = new URL(currentInstance)
+
+				instances.push({
+					name: u.hostname,
+					api_url: currentInstance,
+					locations: '???',
+					_locations: [],
+					registered: -1,
+					cdn: '???',
+					_cdn: false
+				})
+				instanceURLSet.add(currentInstance)
+			}
+
+			const vapu = process.env.VUE_APP_PIPED_URL
+			if (!instanceURLSet.has(vapu)) {
+				const u = new URL(vapu)
 
 				instances.push({
 					name: u.hostname,
-					api_url: process.env.VUE_APP_PIPED_URL,
+					api_url: vapu,
 					locations: '???',
 					_locations: [],
 					registered: -1,
 					cdn: '???',
 					_cdn: false
 				})
+				instanceURLSet.add(vapu)
 			}
 
 			instances.sort((a, b) => this.$store.getters['i18n/compare'](a.name, b.name))
@@ -359,26 +362,57 @@ export default {
 				return b._locations.length - a._locations.length
 			})
 
-			this.instances = instances
-			this.instanceOption = {
-				id: 'instance',
+			return instances
+		}
+	},
+	mounted () {
+		if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} })
+		Promise.all([
+			this.getInstances(),
+			this.getCountries()
+		])
+	},
+	methods: {
+		async getCountries () {
+			const locale = this.$store.state.i18n.locale
+			const [Countries, LocalizedNames] = await loadCountries(locale)
+			Countries.registerLocale(LocalizedNames)
+			this.countryOptions = {
+				id: 'region',
 				type: 'select',
-				default: this.$store.getters['prefs/apiUrl'],
-				label: 'Instance',
-				options: instances.map(i => ({
-					text: i.name,
-					value: i.api_url
-				}))
+				label: 'Country',
+				default: this.$store.getters['prefs/getPreference']('region', this.$store.state.i18n.parsed.region ?? 'US'),
+				options: Object.entries(Countries.getNames(LocalizedNames.locale, { select: 'official' }))
+					.sort((a, b) => this.$store.getters['i18n/compare'](a[1], b[1]))
+					.map(([code, name]) => ({
+						text: name,
+						value: code
+					}))
 			}
 		},
 
+		async getInstances () {
+			const resp = await fetch(process.env.VUE_APP_PIPED_INSTANCES_API ?? 'https://piped-instances.kavin.rocks/', {
+				referrerPolicy: 'no-referrer'
+			}).then(resp => resp.json())
+
+			this.upstreamInstanceList = resp
+		},
+
 		setValue (k, v) {
 			this.$store.commit('prefs/setPrefs', {
 				id: k,
 				value: v
 			})
 		},
 
+		setCustomInstanceStatus (ev) {
+			if (ev === false) {
+				this.setValue('custom_instance_v1', null)
+			}
+			this.setValue('enableCustomInstance', ev)
+		},
+
 		sslScore (url) {
 			return 'https://www.ssllabs.com/ssltest/analyze.html?d=' + new URL(url).host + '&latest'
 		}

diff --git a/src/store/prefs-store.js b/src/store/prefs-store.js
@@ -30,6 +30,7 @@ const PrefsStore = {
 			disableLBRY: true,
 			proxyLBRY: true,
 			homepageButton: false,
+			enableCustomInstance: false,
 
 			selectedSkip: [],
 			codecs: ['av01', 'avc1', 'vp9']

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -172,6 +172,10 @@
             "av01": "AV1 (AOMedia Video 1)",
             "avc1": "AVC (H.264/Advanced Video Coding)",
             "vp9": "VP9"
+        },
+        "custom_instance": {
+            "button_label": "Enable custom instance input?",
+            "input_label": "Instance Base URL"
         }
     },
     "footer": {