Begin instance view
This commit is contained in:
Chocobozzz
parent
123490f3c8
commit
1f2d2c4d1b
11 changed files with 485 additions and 107 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 205 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 205 KiB |
|
|
@ -1,103 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="error" id="instances-list-error" class="alert alert-danger" v-html="$t('home.getting-started.register.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>
|
||||
|
||||
<!-- TODO: add link to instances list webpage -->
|
||||
<!--<a v-bind:href="$root.link.instancesPT" class="list-group-item" target="_blank">-->
|
||||
<!--{{ $t('home.getting-started.register.instances.see-more') }}-->
|
||||
<!--</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,
|
||||
nsfwPolicy: [ 'do_not_list', 'blur' ]
|
||||
}
|
||||
}
|
||||
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>
|
||||
362
src/components/InstancesList.vue
Normal file
362
src/components/InstancesList.vue
Normal file
|
|
@ -0,0 +1,362 @@
|
|||
<template>
|
||||
<div class="root">
|
||||
<div class="filters">
|
||||
<div v-translate class="title">Filter according to your preferences</div>
|
||||
|
||||
<form>
|
||||
<div class="group">
|
||||
<label for="profile" v-translate>Your profile</label>
|
||||
|
||||
<b-form-radio-group id="profile" buttons name="profile" v-model="profile">
|
||||
<b-form-radio value="viewer">
|
||||
<translate>Viewer</translate>
|
||||
</b-form-radio>
|
||||
|
||||
<b-form-radio value="video-maker">
|
||||
<translate>Video maker</translate>
|
||||
</b-form-radio>
|
||||
</b-form-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<label for="profile" v-translate>You want to</label>
|
||||
|
||||
<b-form-radio-group id="wantTo" buttons name="wantTo" v-model="wantTo">
|
||||
<b-form-radio value="create-account">
|
||||
<translate>Create an account</translate>
|
||||
</b-form-radio>
|
||||
|
||||
<b-form-radio value="discover-instances">
|
||||
<translate>Discover instances</translate>
|
||||
</b-form-radio>
|
||||
</b-form-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<label for="themes" class="label-checkbox" v-translate>Themes</label>
|
||||
|
||||
<b-form-checkbox-group
|
||||
v-model="themes"
|
||||
:options="availableThemes"
|
||||
name="themes"
|
||||
id="themes"
|
||||
size="lg"
|
||||
></b-form-checkbox-group>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<label for="profile" v-translate>Sensitive videos</label>
|
||||
|
||||
<b-form-radio-group id="nsfw" buttons name="nsfw" v-model="wantTo">
|
||||
<b-form-radio value="hide">
|
||||
<translate>Hide</translate>
|
||||
</b-form-radio>
|
||||
|
||||
<b-form-radio value="blur">
|
||||
<translate>Blur</translate>
|
||||
</b-form-radio>
|
||||
|
||||
<b-form-radio value="display">
|
||||
<translate>Display</translate>
|
||||
</b-form-radio>
|
||||
|
||||
<b-form-radio value="no-opinion">
|
||||
<translate>No opinion</translate>
|
||||
</b-form-radio>
|
||||
</b-form-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<label for="instance-languages" class="label-checkbox" v-translate>Instance languages</label>
|
||||
|
||||
<b-form-checkbox-group
|
||||
v-model="languages"
|
||||
:options="availableLanguages"
|
||||
name="instance-languages"
|
||||
id="instance-languages"
|
||||
size="lg"
|
||||
></b-form-checkbox-group>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<label for="quota" v-translate>Allowed video space</label>
|
||||
|
||||
<b-form-select v-model="quota" id="quota" name="quota">
|
||||
<option value="1">
|
||||
<translate>At least 1GB</translate>
|
||||
</option>
|
||||
|
||||
<option value="5">
|
||||
<translate>At least 5GB</translate>
|
||||
</option>
|
||||
|
||||
<option value="20">
|
||||
<translate>At least 20GB</translate>
|
||||
</option>
|
||||
|
||||
<option value="50">
|
||||
<translate>At least 50GB</translate>
|
||||
</option>
|
||||
</b-form-select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div v-if="error" id="instances-list-error" class="alert alert-danger">
|
||||
Sorry, but we cannot fetch the instances list. Please retry later.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../scss/_variables.scss';
|
||||
|
||||
.filters {
|
||||
margin-bottom: 100px;
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
form {
|
||||
border-left: 6px solid $orange;
|
||||
padding-left: 24px;
|
||||
|
||||
.group {
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > label {
|
||||
min-width: 140px;
|
||||
margin: 0 10px 0 0;
|
||||
|
||||
&.label-checkbox {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
width: 280px;
|
||||
height: 35px;
|
||||
line-height: 21px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-group-toggle {
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border-color: $orange;
|
||||
height: 30px;
|
||||
padding: 0 15px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
font-weight: $font-semibold;
|
||||
background-color: $orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../scss/_variables.scss';
|
||||
|
||||
.custom-checkbox {
|
||||
.custom-control-label > span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.custom-control-input:checked + label {
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
#themes {
|
||||
.custom-control {
|
||||
&:nth-child(4n) {
|
||||
width: 100px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-child(4n-1) {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
&:nth-child(4n-2) {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
&:nth-child(4n-3) {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { BFormRadio, BFormRadioGroup, BFormCheckboxGroup, BFormSelect } from 'bootstrap-vue'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'b-form-radio-group': BFormRadioGroup,
|
||||
'b-form-radio': BFormRadio,
|
||||
'b-form-checkbox-group': BFormCheckboxGroup,
|
||||
'b-form-select': BFormSelect
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
error: false,
|
||||
|
||||
instances: [],
|
||||
availableThemes: [
|
||||
{ value: '11', text: this.$gettext('News & Politics') },
|
||||
{ value: '1', text: this.$gettext('Music') },
|
||||
{ value: '2', text: this.$gettext('Films') },
|
||||
{ value: '3', text: this.$gettext('Vehicles') },
|
||||
|
||||
{ value: '10', text: this.$gettext('Entertainment') },
|
||||
{ value: '4', text: this.$gettext('Art') },
|
||||
{ value: '5', text: this.$gettext('Sports') },
|
||||
{ value: '6', text: this.$gettext('Travels') },
|
||||
|
||||
{ value: '15', text: this.$gettext('Science & Technology') },
|
||||
{ value: '8', text: this.$gettext('People') },
|
||||
{ value: '9', text: this.$gettext('Comedy') },
|
||||
{ value: '12', text: this.$gettext('How To') },
|
||||
|
||||
{ value: '7', text: this.$gettext('Gaming') },
|
||||
{ value: '13', text: this.$gettext('Education') },
|
||||
{ value: '14', text: this.$gettext('Activism') },
|
||||
{ value: '16', text: this.$gettext('Animals') },
|
||||
|
||||
{ value: '17', text: this.$gettext('Kids') },
|
||||
{ value: '18', text: this.$gettext('Food') },
|
||||
],
|
||||
|
||||
profile: 'viewer',
|
||||
wantTo: 'create-account',
|
||||
themes: [],
|
||||
nsfw: 'no-opinion',
|
||||
languages: [],
|
||||
quota: '5'
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
availableLanguages: function () {
|
||||
const available = [
|
||||
{
|
||||
value: 'en',
|
||||
text: this.$gettext('English')
|
||||
}
|
||||
]
|
||||
|
||||
const all = {
|
||||
'fr': this.$gettext('Français'),
|
||||
'ja': this.$gettext('日本語'),
|
||||
'eu': this.$gettext('Euskara'),
|
||||
'ca': this.$gettext('Català'),
|
||||
'cs': this.$gettext('Čeština'),
|
||||
'eo': this.$gettext('Esperanto'),
|
||||
'el': this.$gettext('ελληνικά'),
|
||||
'de': this.$gettext('Deutsch'),
|
||||
'it': this.$gettext('Italiano'),
|
||||
'nl': this.$gettext('Nederlands'),
|
||||
'es': this.$gettext('Español'),
|
||||
'oc': this.$gettext('Occitan'),
|
||||
'gd': this.$gettext('Gàidhlig'),
|
||||
'zh': this.$gettext('简体中文（中国）'),
|
||||
'pt': this.$gettext('Português (Portugal)'),
|
||||
'sv': this.$gettext('svenska'),
|
||||
'pl': this.$gettext('Polski'),
|
||||
'fi': this.$gettext('suomi'),
|
||||
'ru': this.$gettext('русский')
|
||||
}
|
||||
|
||||
const navigatorLanguage = window.navigator.userLanguage || window.navigator.language
|
||||
const smallLanguage = navigatorLanguage.split('-')[0]
|
||||
|
||||
const found = all[smallLanguage]
|
||||
if (found && found !== 'en') {
|
||||
available.push({
|
||||
value: smallLanguage,
|
||||
text: found
|
||||
})
|
||||
}
|
||||
|
||||
return available
|
||||
}
|
||||
},
|
||||
|
||||
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: 'B'},
|
||||
{max: 1048576, type: 'KB'},
|
||||
{max: 1073741824, type: 'MB'},
|
||||
{max: 1.0995116e12, type: 'GB'}
|
||||
]
|
||||
|
||||
if (value === -1) return '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,
|
||||
nsfwPolicy: ['do_not_list', 'blur']
|
||||
}
|
||||
}
|
||||
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>
|
||||
|
|
@ -8,10 +8,10 @@ import App from './App.vue'
|
|||
import Home from './views/Home.vue'
|
||||
import Help from './views/Help'
|
||||
import News from './views/News'
|
||||
import Instances from './views/Instances'
|
||||
|
||||
import './scss/bootstrap.scss'
|
||||
import './scss/main.scss'
|
||||
import CommonMixins from './mixins/Common-Mixins'
|
||||
import CommonMixins from './mixins/CommonMixins'
|
||||
|
||||
const translations = require('./translations.json')
|
||||
|
||||
|
|
@ -66,6 +66,10 @@ const routes = [
|
|||
{
|
||||
path: '/news',
|
||||
component: News
|
||||
},
|
||||
{
|
||||
path: '/instances',
|
||||
component: Instances
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
3
src/scss/_bootstrap-variables.scss
Normal file
3
src/scss/_bootstrap-variables.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@import "_variables";
|
||||
|
||||
$primary: $orange;
|
||||
2
src/scss/bootstrap.scss
vendored
2
src/scss/bootstrap.scss
vendored
|
|
@ -34,3 +34,5 @@
|
|||
@import '~bootstrap/scss/carousel';
|
||||
@import '~bootstrap/scss/utilities';
|
||||
@import '~bootstrap/scss/print';
|
||||
|
||||
@import '~bootstrap-vue/dist/bootstrap-vue.css';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
@import "_variables";
|
||||
@import "_mixins";
|
||||
|
||||
@import "_bootstrap-variables";
|
||||
@import "bootstrap.scss";
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proza Libre';
|
||||
font-style: normal;
|
||||
|
|
@ -181,10 +184,11 @@ main {
|
|||
|
||||
.title-block {
|
||||
text-align: center;
|
||||
margin-bottom: 100px;
|
||||
margin: auto auto 100px auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 450px;
|
||||
|
||||
.title {
|
||||
margin-bottom: 10px;
|
||||
|
|
|
|||
|
|
@ -253,7 +253,7 @@
|
|||
<div class="one-column">
|
||||
<div class="subtitle" v-translate>À vous de jouer !</div>
|
||||
|
||||
<img :src="buildImgUrl('peertube-you-play.png')" alt="PeerTube you play illustration"/>
|
||||
<img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="PeerTube you play illustration"/>
|
||||
</div>
|
||||
|
||||
<div class="buttons-row">
|
||||
|
|
|
|||
106
src/views/Instances.vue
Normal file
106
src/views/Instances.vue
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<main>
|
||||
<div class="blocks">
|
||||
|
||||
<div class="title-block">
|
||||
<div class="title" v-translate>Create an account</div>
|
||||
|
||||
<p v-translate>
|
||||
If you would like to interact with videos (like, comment, download...), subscribe to channels, create playlists or play videos,
|
||||
then all you have to do is <strong>create an account on the PeerTube instance of your choice.</strong>
|
||||
</p>
|
||||
|
||||
<button class="jpt-button">
|
||||
<span v-translate>See the instances list</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="block-with-image">
|
||||
<div>
|
||||
<img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Multiple instances illustration">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="title" v-translate>1. Find the instance that suits you best</div>
|
||||
|
||||
<p v-translate>
|
||||
By <strong>filtering according to your profile</strong> (video maker or viewer), <strong>themes</strong> that you are
|
||||
looking for or <strong>languages</strong> you speak, <strong>find an instance whose rules match your needs!</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-with-image">
|
||||
<div>
|
||||
<div class="title" v-translate>2. Create your account and enjoy PeerTube</div>
|
||||
|
||||
<p v-translate>
|
||||
A username, an email, a password and you can already <strong>enjoy all the features of PeerTube!</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img :src="buildImgUrl('peertube-upload.png')" alt="PeerTube upload illustration">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<instances-list></instances-list>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../scss/_variables.scss';
|
||||
|
||||
.blocks {
|
||||
margin: 60px auto;
|
||||
width: 770px;
|
||||
}
|
||||
|
||||
.title-block {
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.jpt-button {
|
||||
margin-top: 25px;
|
||||
border: 2px solid $orange;
|
||||
min-width: 225px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-with-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 100px;
|
||||
|
||||
& > div {
|
||||
flex-basis: 100%;
|
||||
|
||||
img {
|
||||
width: 370px;
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import InstancesList from '../components/InstancesList'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
InstancesList
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in a new issue