100 lines
3.2 KiB
Vue
100 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
<div >
|
||
|
|
<div v-if="error" id="instances-list-error" class="alert alert-danger" v-html="$t('home.getting-started.register.instances.error')"></div>
|
||
|
|
|
||
|
|
<div id="instances-list" class="list-group" >
|
||
|
|
<a v-for="instance of instances" v-bind:title="instance.host" v-bind:href="instance.url" class="list-group-item" target="_blank">
|
||
|
|
<div class="left-div">
|
||
|
|
<h4 class="list-group-item-heading">
|
||
|
|
<span class="instance-name">{{ instance.name }}</span>
|
||
|
|
<small class="instance-host">{{ instance.host }}</small>
|
||
|
|
</h4>
|
||
|
|
|
||
|
|
<p v-if="instance.shortDescription" class="list-group-item-text">
|
||
|
|
{{ instance.shortDescription }}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="right-div">
|
||
|
|
<li v-if="instance.totalInstanceFollowers">{{ instance.totalInstanceFollowers }} {{ $t('home.getting-started.register.instances.followers') }}</li>
|
||
|
|
<li v-if="instance.totalInstanceFollowing">{{ $t('home.getting-started.register.instances.follows') }} {{ instance.totalInstanceFollowing }} {{ $t('home.getting-started.register.instances.instances') }}</li>
|
||
|
|
<li v-if="instance.userVideoQuota">{{ instance.userVideoQuotaBytes }} {{ $t('home.getting-started.register.instances.per_user') }}</li>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import axios from 'axios'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'peertube-instances',
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
error: false,
|
||
|
|
instances: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// Thanks https://stackoverflow.com/a/6274381
|
||
|
|
shuffle (a) {
|
||
|
|
for (let i = a.length - 1; i > 0; i--) {
|
||
|
|
const j = Math.floor(Math.random() * (i + 1));
|
||
|
|
[a[i], a[j]] = [a[j], a[i]]
|
||
|
|
}
|
||
|
|
|
||
|
|
return a
|
||
|
|
},
|
||
|
|
|
||
|
|
bytes (value) {
|
||
|
|
// https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
|
||
|
|
const dictionaryBytes = [
|
||
|
|
{ max: 1024, type: this.$t('home.getting-started.register.instances.bytes.B') },
|
||
|
|
{ max: 1048576, type: this.$t('home.getting-started.register.instances.bytes.KB') },
|
||
|
|
{ max: 1073741824, type: this.$t('home.getting-started.register.instances.bytes.MB') },
|
||
|
|
{ max: 1.0995116e12, type: this.$t('home.getting-started.register.instances.bytes.GB') }
|
||
|
|
]
|
||
|
|
|
||
|
|
if (value === -1) return this.$t('home.getting-started.register.instances.no_quota')
|
||
|
|
|
||
|
|
const format = dictionaryBytes.find(function (d) { return value < d.max }) || dictionaryBytes[dictionaryBytes.length - 1]
|
||
|
|
const calc = Math.floor(value / (format.max / 1024)).toString()
|
||
|
|
|
||
|
|
return calc + format.type
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
const options = {
|
||
|
|
method: 'GET',
|
||
|
|
params: {
|
||
|
|
start: 0,
|
||
|
|
count: 100,
|
||
|
|
signup: true,
|
||
|
|
healthy: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
axios('https://instances.joinpeertube.org/api/v1/instances', options)
|
||
|
|
.then(response => {
|
||
|
|
this.instances = this.shuffle(response.data.data)
|
||
|
|
|
||
|
|
this.instances.forEach(i => {
|
||
|
|
i.url = 'https://' + i.host
|
||
|
|
|
||
|
|
if (i.userVideoQuota) {
|
||
|
|
i.userVideoQuotaBytes = this.bytes(i.userVideoQuota)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
.catch(err => {
|
||
|
|
console.error(err)
|
||
|
|
this.error = true
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|