forked from nutomic/joinpeertube
Lint
This commit is contained in:
Chocobozzz
parent
997ca3e60a
commit
6d6fa2b026
6 changed files with 128 additions and 98 deletions
BIN
public/img/framasoft-logo-text-small.png
Normal file
BIN
public/img/framasoft-logo-text-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
12
src/App.vue
12
src/App.vue
|
|
@ -21,12 +21,12 @@
|
|||
</style>
|
||||
|
||||
<script>
|
||||
import HeaderComponent from './components/Header.vue'
|
||||
import HeaderComponent from './components/Header.vue'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
HeaderComponent
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
HeaderComponent
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -108,23 +108,23 @@
|
|||
</style>
|
||||
|
||||
<script>
|
||||
import IconVideo from './icons/IconVideo.vue'
|
||||
import IconInstance from './icons/IconInstance.vue'
|
||||
import IconChannel from './icons/IconChannel.vue'
|
||||
import IconVideo from './icons/IconVideo.vue'
|
||||
import IconInstance from './icons/IconInstance.vue'
|
||||
import IconChannel from './icons/IconChannel.vue'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: String,
|
||||
title: String,
|
||||
thumbnailUrl: String,
|
||||
url: String,
|
||||
tags: Array,
|
||||
description: String
|
||||
},
|
||||
components: {
|
||||
IconVideo,
|
||||
IconInstance,
|
||||
IconChannel
|
||||
export default {
|
||||
props: {
|
||||
type: String,
|
||||
title: String,
|
||||
thumbnailUrl: String,
|
||||
url: String,
|
||||
tags: Array,
|
||||
description: String
|
||||
},
|
||||
components: {
|
||||
IconVideo,
|
||||
IconInstance,
|
||||
IconChannel
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,10 @@
|
|||
<router-link :to="getPath('/')" class="navbar-brand">
|
||||
<img alt="PeerTube" :src="buildImgUrl('brand-small.png')">
|
||||
|
||||
<div>
|
||||
<div class="support">
|
||||
soutenu par
|
||||
|
||||
<img alt="Framasoft text logo" :src="buildImgUrl('framasoft-logo-text-small.png')">
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
|
|
@ -45,7 +46,7 @@
|
|||
</li>
|
||||
|
||||
<div class="pull-right">
|
||||
<I18n />
|
||||
<I18n/>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -55,11 +56,25 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
@import '../scss/_variables.scss';
|
||||
@import '../scss/_mixins.scss';
|
||||
|
||||
header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
color: #000;
|
||||
font-family: 'Proza Libre', sans-serif;
|
||||
font-size: 10px;
|
||||
|
||||
.support img {
|
||||
vertical-align: initial;
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
height: 60px;
|
||||
background-color: #fff;
|
||||
|
|
@ -87,17 +102,17 @@
|
|||
</style>
|
||||
|
||||
<script>
|
||||
import I18n from './I18n.vue'
|
||||
import I18n from './I18n.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
I18n
|
||||
},
|
||||
export default {
|
||||
components: {
|
||||
I18n
|
||||
},
|
||||
|
||||
methods: {
|
||||
getPath (path) {
|
||||
return path
|
||||
methods: {
|
||||
getPath (path) {
|
||||
return path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="i18n">
|
||||
<b-dropdown>
|
||||
<template slot="button-content">
|
||||
<img :src="buildImgUrl('language.png')" alt="Change languages logo" />
|
||||
<img :src="buildImgUrl('language.png')" alt="Change languages logo"/>
|
||||
|
||||
<div class="text">
|
||||
<translate>Languages</translate>
|
||||
|
|
@ -54,22 +54,22 @@
|
|||
</style>
|
||||
|
||||
<script>
|
||||
import { BDropdown, BDropdownDivider, BDropdownItem } from 'bootstrap-vue'
|
||||
import IconAdd from './icons/IconAdd'
|
||||
import { BDropdown, BDropdownDivider, BDropdownItem } from 'bootstrap-vue'
|
||||
import IconAdd from './icons/IconAdd'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BDropdown,
|
||||
BDropdownDivider,
|
||||
BDropdownItem,
|
||||
export default {
|
||||
components: {
|
||||
BDropdown,
|
||||
BDropdownDivider,
|
||||
BDropdownItem,
|
||||
|
||||
IconAdd
|
||||
},
|
||||
IconAdd
|
||||
},
|
||||
|
||||
methods: {
|
||||
buildLocaleLink (locale) {
|
||||
return window.location.origin + `/${locale}/`
|
||||
methods: {
|
||||
buildLocaleLink (locale) {
|
||||
return window.location.origin + `/${locale}/`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
<section class="presentation">
|
||||
<div class="first-row">
|
||||
<img class="brand" :src="buildImgUrl('brand.png')" alt="PeerTube logo" />
|
||||
<img class="brand" :src="buildImgUrl('brand.png')" alt="PeerTube logo"/>
|
||||
|
||||
<div class="description" v-translate>A free software to take back control of your videos</div>
|
||||
</div>
|
||||
|
|
@ -36,8 +36,8 @@
|
|||
|
||||
<div class="content-selection" v-for="contentSelection in contentSelections">
|
||||
<content-selection :type="contentSelection.type" :title="contentSelection.title"
|
||||
:thumbnail-url="contentSelection.thumbnailUrl" :url="contentSelection.url" :tags="contentSelection.tags"
|
||||
:description="contentSelection.description"
|
||||
:thumbnail-url="contentSelection.thumbnailUrl" :url="contentSelection.url" :tags="contentSelection.tags"
|
||||
:description="contentSelection.description"
|
||||
>
|
||||
</content-selection>
|
||||
</div>
|
||||
|
|
@ -54,24 +54,26 @@
|
|||
<div class="section-title">
|
||||
<div v-translate>
|
||||
What is
|
||||
<img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube" />
|
||||
<img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube"/>
|
||||
?
|
||||
</div>
|
||||
<div class="border-title"></div>
|
||||
</div>
|
||||
|
||||
<div class="ambition">
|
||||
<img :src="buildImgUrl('peertube-interface.png')" alt="PeerTube screen" />
|
||||
<img :src="buildImgUrl('peertube-interface.png')" alt="PeerTube screen"/>
|
||||
|
||||
<div>
|
||||
<div class="citation">
|
||||
<div class="text" v-translate>
|
||||
L’ambition de PeerTube, c'est d’être <strong>une alternative libre et décentralisée</strong> aux services de diffusion de vidéos.
|
||||
L’ambition de PeerTube, c'est d’être <strong>une alternative libre et décentralisée</strong> aux services de diffusion de
|
||||
vidéos.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-translate>
|
||||
Le but n’est pas de remplacer, mais de proposer quelque chose d’autre, avec des valeurs différentes, en parallèle de ce qui existe déjà.
|
||||
Le but n’est pas de remplacer, mais de proposer quelque chose d’autre, avec des valeurs différentes, en parallèle de ce qui
|
||||
existe déjà.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -79,7 +81,7 @@
|
|||
<div class="federation one-column">
|
||||
<div class="subtitle" v-translate>Une fédération d'hébergements interconnectés</div>
|
||||
|
||||
<img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Funny federation schema" />
|
||||
<img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Funny federation schema"/>
|
||||
|
||||
<div class="citation">
|
||||
<div class="left-bar"></div>
|
||||
|
|
@ -93,7 +95,8 @@
|
|||
<p v-translate>
|
||||
N’importe qui ayant un minimum de compétences techniques peut héberger un serveur PeerTube qu’on nomme instance.
|
||||
Chaque instance héberge ses propres utilisateur⋅ices et leurs vidéos.
|
||||
Ainsi, <strong>toutes les instances sont créées, animées, modérées et maintenues de façon indépendante par des administrateur⋅ices différent⋅e⋅s.</strong>
|
||||
Ainsi, <strong>toutes les instances sont créées, animées, modérées et maintenues de façon indépendante par des administrateur⋅ices
|
||||
différent⋅e⋅s.</strong>
|
||||
</p>
|
||||
|
||||
<div class="bottom-link-wrapper">
|
||||
|
|
@ -103,10 +106,11 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema" />
|
||||
<img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema"/>
|
||||
|
||||
<p v-translate>
|
||||
Mais vous avez tout de même la possibilité de regarder depuis l'instance sur laquelle vous êtes inscrit·e des vidéos qui se trouvent ailleurs ;
|
||||
Mais vous avez tout de même la possibilité de regarder depuis l'instance sur laquelle vous êtes inscrit·e des vidéos qui se
|
||||
trouvent ailleurs ;
|
||||
il suffit que l'administrateur·ice l'ai autorisé !
|
||||
</p>
|
||||
|
||||
|
|
@ -116,12 +120,13 @@
|
|||
<div class="text v-translate">C'est le principe de<strong> la fédération !</strong></div>
|
||||
</div>
|
||||
|
||||
<img :src="buildImgUrl('peertube-mastodon-federation.png')" alt="Federation with Mastodon funny schema" />
|
||||
<img :src="buildImgUrl('peertube-mastodon-federation.png')" alt="Federation with Mastodon funny schema"/>
|
||||
|
||||
<p v-translate>
|
||||
Mais ce n’est pas tout ! Le protocole de fédération ActivityPub (qu’utilise PeerTube)
|
||||
<strong>permet aussi d’interagir avec d’autres logiciels</strong> utilisant ce même protocole. Par exemple, PeerTube et le
|
||||
réseau social Mastodon, alternative à Twitter, sont liés : <strong>il est possible de « suivre » un utilisateur PeerTube depuis Mastodon</strong>
|
||||
réseau social Mastodon, alternative à Twitter, sont liés : <strong>il est possible de « suivre » un utilisateur PeerTube depuis
|
||||
Mastodon</strong>
|
||||
(en affichant dans son fil d'actualités les dernières vidéos postées par le compte suivi),
|
||||
<strong>ou même de commenter une vidéo hébergée sur PeerTube directement depuis Mastodon.</strong>
|
||||
</p>
|
||||
|
|
@ -137,7 +142,7 @@
|
|||
<div class="free-software one-column">
|
||||
<div class="subtitle" v-translate>Un code ouvert sous licence libre</div>
|
||||
|
||||
<img :src="buildImgUrl('peertube-free-software.png')" alt="PeerTube is a free software funny schema" />
|
||||
<img :src="buildImgUrl('peertube-free-software.png')" alt="PeerTube is a free software funny schema"/>
|
||||
|
||||
<p v-translate>
|
||||
Les principaux services de diffusion de vidéo en ligne utilisent vos données pour gagner
|
||||
|
|
@ -153,11 +158,11 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<p v-translate>
|
||||
Mais surtout, PeerTube <strong>vous considère comme une personne, et non pas comme un produit qu’il faut
|
||||
profiler et enfermer dans des boucles vidéos.</strong> PeerTube n’utilise par exemple aucun algorithme de recommandation biaisé
|
||||
pour vous faire rester indéfiniment en ligne.
|
||||
</p>
|
||||
<p v-translate>
|
||||
Mais surtout, PeerTube <strong>vous considère comme une personne, et non pas comme un produit qu’il faut
|
||||
profiler et enfermer dans des boucles vidéos.</strong> PeerTube n’utilise par exemple aucun algorithme de recommandation biaisé
|
||||
pour vous faire rester indéfiniment en ligne.
|
||||
</p>
|
||||
|
||||
<p v-translate>
|
||||
Tout cela est possible car PeerTube est un logiciel libre (licence GNU-AGPL pour les connaisseur⋅euses).
|
||||
|
|
@ -177,7 +182,7 @@
|
|||
<div class="you-are-a-video-maker one-column">
|
||||
<div class="subtitle" v-translate>Vous êtes vidéaste ?</div>
|
||||
|
||||
<img :src="buildImgUrl('peertube-upload.png')" alt="PeerTube upload illustration" />
|
||||
<img :src="buildImgUrl('peertube-upload.png')" alt="PeerTube upload illustration"/>
|
||||
|
||||
<div class="citation">
|
||||
<div class="left-bar"></div>
|
||||
|
|
@ -197,14 +202,17 @@
|
|||
|
||||
<div class="text" v-translate>
|
||||
Être en contact direct avec un hébergeur à taille humaine vous permet, non seulement de ne plus être le client d'une grande
|
||||
entreprise du numérique, mais surtout <strong>d'avoir des rapports privilégiés avec les personnes qui hébergent et diffusent vos données.</strong>
|
||||
entreprise du numérique, mais surtout <strong>d'avoir des rapports privilégiés avec les personnes qui hébergent et diffusent vos
|
||||
données.</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-translate>
|
||||
Avec PeerTube, vous choisissez l’hébergeur de vos vidéos selon ses conditions d’utilisation, telles que la limite d’espace disque par utilisateur⋅ice,
|
||||
Avec PeerTube, vous choisissez l’hébergeur de vos vidéos selon ses conditions d’utilisation, telles que la limite d’espace disque
|
||||
par utilisateur⋅ice,
|
||||
la politique de modération, les choix de fédération...
|
||||
Comme vous n’avez pas un géant du web en face de vous, vous pourrez probablement discuter ensemble si vous avez un souci, un besoin, une envie...
|
||||
Comme vous n’avez pas un géant du web en face de vous, vous pourrez probablement discuter ensemble si vous avez un souci, un
|
||||
besoin, une envie...
|
||||
</div>
|
||||
|
||||
<button class="jpt-button discover-instances">
|
||||
|
|
@ -217,7 +225,7 @@
|
|||
<div class="p2p one-column">
|
||||
<div class="subtitle" v-translate>De la diffusion – et donc du visionnage – en pair-à-pair</div>
|
||||
|
||||
<img :src="buildImgUrl('peertube-p2p.png')" alt="PeerTube P2P illustration" />
|
||||
<img :src="buildImgUrl('peertube-p2p.png')" alt="PeerTube P2P illustration"/>
|
||||
|
||||
<div class="citation">
|
||||
<div class="left-bar"></div>
|
||||
|
|
@ -236,7 +244,8 @@
|
|||
|
||||
<p v-translate>
|
||||
Mine de rien, avant cette diffusion en pair-à-pair, les vidéastes à succès (ou les vidéos qui font le buzz) étaient condamnés
|
||||
à s’héberger chez un géant du web dont l’infrastructure peut encaisser des milliers de vues simultanées… Ou à payer très cher un hébergement de vidéo indépendant afin qu’il tienne la charge.
|
||||
à s’héberger chez un géant du web dont l’infrastructure peut encaisser des milliers de vues simultanées… Ou à payer très cher un
|
||||
hébergement de vidéo indépendant afin qu’il tienne la charge.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -244,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-you-play.png')" alt="PeerTube you play illustration"/>
|
||||
</div>
|
||||
|
||||
<div class="buttons-row">
|
||||
|
|
@ -267,7 +276,7 @@
|
|||
<div class="behind-peertube one-column">
|
||||
<div class="subtitle" v-translate>Qui est derrière PeerTube ?</div>
|
||||
|
||||
<img class="framasoft-logo" :src="buildImgUrl('framasoft-big-logo.png')" alt="Framasoft logo" />
|
||||
<img class="framasoft-logo" :src="buildImgUrl('framasoft-big-logo.png')" alt="Framasoft logo"/>
|
||||
|
||||
<p v-translate>
|
||||
PeerTube est <strong>un logiciel libre gratuit financé par une association</strong> française à but non lucratif : Framasoft.
|
||||
|
|
@ -275,7 +284,8 @@
|
|||
|
||||
<p v-translate>
|
||||
Créée en 2004, l'association se consacre désormais à <strong>l’éducation populaire aux enjeux du numérique.</strong>
|
||||
Notre petite structure (moins de 40 membres, moins de 10 salarié·e·s) est connue pour avoir réalisé le projet Dégooglisons Internet,
|
||||
Notre petite structure (moins de 40 membres, moins de 10 salarié·e·s) est connue pour avoir réalisé le projet Dégooglisons
|
||||
Internet,
|
||||
proposant 34 outils en ligne éthiques et alternatifs. Reconnue d’intérêt général, notre association est
|
||||
<strong>financée à plus de 90% par vos dons</strong>, déductibles des impôts pour les contribuables français·es.
|
||||
</p>
|
||||
|
|
@ -362,6 +372,11 @@
|
|||
.ambition {
|
||||
display: flex;
|
||||
|
||||
& > img,
|
||||
& > div {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
|
@ -397,28 +412,28 @@
|
|||
</style>
|
||||
|
||||
<script>
|
||||
import IconInstance from '../components/icons/IconInstance.vue'
|
||||
import ContentSelection from '../components/ContentSelection.vue'
|
||||
import IconRight from '../components/icons/IconRight.vue'
|
||||
import IconInstance from '../components/icons/IconInstance.vue'
|
||||
import ContentSelection from '../components/ContentSelection.vue'
|
||||
import IconRight from '../components/icons/IconRight.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ContentSelection,
|
||||
IconInstance,
|
||||
IconRight
|
||||
},
|
||||
export default {
|
||||
components: {
|
||||
ContentSelection,
|
||||
IconInstance,
|
||||
IconRight
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
contentSelections: [
|
||||
{
|
||||
type: 'video',
|
||||
title: 'Nothing to hide',
|
||||
thumbnailUrl: 'https://peertube2.cpy.re/static/thumbnails/d2a5ec78-5f85-4090-8ec5-dc1102e022ea.jpg',
|
||||
url: 'https://peertube2.cpy.re/videos/watch/d2a5ec78-5f85-4090-8ec5-dc1102e022ea',
|
||||
tags: [ 'tag', 'tag2', 'tag3' ],
|
||||
description: 'Nothing to Hide (2017) est un film documentaire franco-allemand de Marc Meillassoux et Mihaela Gladovic, qui s\'intéresse aux effets de la surveillance de masse sur les individus et la société. Proposant un regard critique à propos des lois sur le renseignement mises en place par de nombreux États ces dernières années, le film nous rappelle à quel point le débat sur l’usage des données personnelles est actuel et questionne les fondements de nos démocraties.'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
data: () => ({
|
||||
contentSelections: [
|
||||
{
|
||||
type: 'video',
|
||||
title: 'Nothing to hide',
|
||||
thumbnailUrl: 'https://peertube2.cpy.re/static/thumbnails/d2a5ec78-5f85-4090-8ec5-dc1102e022ea.jpg',
|
||||
url: 'https://peertube2.cpy.re/videos/watch/d2a5ec78-5f85-4090-8ec5-dc1102e022ea',
|
||||
tags: ['tag', 'tag2', 'tag3'],
|
||||
description: 'Nothing to Hide (2017) est un film documentaire franco-allemand de Marc Meillassoux et Mihaela Gladovic, qui s\'intéresse aux effets de la surveillance de masse sur les individus et la société. Proposant un regard critique à propos des lois sur le renseignement mises en place par de nombreux États ces dernières années, le film nous rappelle à quel point le débat sur l’usage des données personnelles est actuel et questionne les fondements de nos démocraties.'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue