Begin instance view

src/components/Instances.vue

@@ -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>

src/components/InstancesList.vue

@@ -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>

src/main.js

@@ -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
   }
 ]
 

src/scss/_bootstrap-variables.scss

@@ -0,0 +1,3 @@
+@import "_variables";
+
+$primary: $orange;

src/scss/bootstrap.scss

@@ -34,3 +34,5 @@
 @import '~bootstrap/scss/carousel';
 @import '~bootstrap/scss/utilities';
 @import '~bootstrap/scss/print';
+
+@import '~bootstrap-vue/dist/bootstrap-vue.css';

src/scss/main.scss

@@ -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;

src/views/Home.vue

@@ -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">

src/views/Instances.vue

@@ -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>