nutomic/joinpeertube
1
1
Fork 1
Code Issues 5 Pull requests Releases Wiki Activity

Lint

Browse source
This commit is contained in:
Chocobozzz 2019-09-11 15:48:27 +02:00
parent 997ca3e60a
commit 6d6fa2b026
No known key found for this signature in database
GPG key ID: 583A612D890159BE
6 changed files with 128 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/img/framasoft-logo-text-small.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

12
src/App.vue
View file

@ -21,12 +21,12 @@
</style> </style>
<script> <script>
import HeaderComponent from './components/Header.vue' import HeaderComponent from './components/Header.vue'
export default { export default {
name: 'app', name: 'app',
components: { components: {
HeaderComponent HeaderComponent
}
} }
}
</script> </script>

34
src/components/ContentSelection.vue
View file

@ -108,23 +108,23 @@
</style> </style>
<script> <script>
import IconVideo from './icons/IconVideo.vue' import IconVideo from './icons/IconVideo.vue'
import IconInstance from './icons/IconInstance.vue' import IconInstance from './icons/IconInstance.vue'
import IconChannel from './icons/IconChannel.vue' import IconChannel from './icons/IconChannel.vue'
export default { export default {
props: { props: {
type: String, type: String,
title: String, title: String,
thumbnailUrl: String, thumbnailUrl: String,
url: String, url: String,
tags: Array, tags: Array,
description: String description: String
}, },
components: { components: {
IconVideo, IconVideo,
IconInstance, IconInstance,
IconChannel IconChannel
}
} }
}
</script> </script>

37
src/components/Header.vue
View file

@ -5,9 +5,10 @@
<router-link :to="getPath('/')" class="navbar-brand"> <router-link :to="getPath('/')" class="navbar-brand">
<img alt="PeerTube" :src="buildImgUrl('brand-small.png')"> <img alt="PeerTube" :src="buildImgUrl('brand-small.png')">
<div> <div class="support">
soutenu par soutenu par
<img alt="Framasoft text logo" :src="buildImgUrl('framasoft-logo-text-small.png')">
</div> </div>
</router-link> </router-link>
@ -45,7 +46,7 @@
</li> </li>
<div class="pull-right"> <div class="pull-right">
<I18n /> <I18n/>
</div> </div>
</ul> </ul>
</div> </div>
@ -55,11 +56,25 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../scss/_variables.scss'; @import '../scss/_variables.scss';
@import '../scss/_mixins.scss';
header { header {
margin-bottom: 30px; 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 { nav {
height: 60px; height: 60px;
background-color: #fff; background-color: #fff;
@ -87,17 +102,17 @@
</style> </style>
<script> <script>
import I18n from './I18n.vue' import I18n from './I18n.vue'
export default { export default {
components: { components: {
I18n I18n
}, },
methods: { methods: {
getPath (path) { getPath (path) {
return path return path
}
} }
} }
}
</script> </script>

28
src/components/I18n.vue
View file

@ -2,7 +2,7 @@
<div class="i18n"> <div class="i18n">
<b-dropdown> <b-dropdown>
<template slot="button-content"> <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"> <div class="text">
<translate>Languages</translate> <translate>Languages</translate>
@ -54,22 +54,22 @@
</style> </style>
<script> <script>
import { BDropdown, BDropdownDivider, BDropdownItem } from 'bootstrap-vue' import { BDropdown, BDropdownDivider, BDropdownItem } from 'bootstrap-vue'
import IconAdd from './icons/IconAdd' import IconAdd from './icons/IconAdd'
export default { export default {
components: { components: {
BDropdown, BDropdown,
BDropdownDivider, BDropdownDivider,
BDropdownItem, BDropdownItem,
IconAdd IconAdd
}, },
methods: { methods: {
buildLocaleLink (locale) { buildLocaleLink (locale) {
return window.location.origin + `/${locale}/` return window.location.origin + `/${locale}/`
}
} }
} }
}
</script> </script>

115
src/views/Home.vue
View file

@ -3,7 +3,7 @@
<section class="presentation"> <section class="presentation">
<div class="first-row"> <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 class="description" v-translate>A free software to take back control of your videos</div>
</div> </div>
@ -36,8 +36,8 @@
<div class="content-selection" v-for="contentSelection in contentSelections"> <div class="content-selection" v-for="contentSelection in contentSelections">
<content-selection :type="contentSelection.type" :title="contentSelection.title" <content-selection :type="contentSelection.type" :title="contentSelection.title"
:thumbnail-url="contentSelection.thumbnailUrl" :url="contentSelection.url" :tags="contentSelection.tags" :thumbnail-url="contentSelection.thumbnailUrl" :url="contentSelection.url" :tags="contentSelection.tags"
:description="contentSelection.description" :description="contentSelection.description"
> >
</content-selection> </content-selection>
</div> </div>
@ -54,24 +54,26 @@
<div class="section-title"> <div class="section-title">
<div v-translate> <div v-translate>
What is What is
<img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube" /> <img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube"/>
? ?
</div> </div>
<div class="border-title"></div> <div class="border-title"></div>
</div> </div>
<div class="ambition"> <div class="ambition">
<img :src="buildImgUrl('peertube-interface.png')" alt="PeerTube screen" /> <img :src="buildImgUrl('peertube-interface.png')" alt="PeerTube screen"/>
<div> <div>
<div class="citation"> <div class="citation">
<div class="text" v-translate> <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>
</div> </div>
<p v-translate> <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> </p>
</div> </div>
</div> </div>
@ -79,7 +81,7 @@
<div class="federation one-column"> <div class="federation one-column">
<div class="subtitle" v-translate>Une fédération d'hébergements interconnectés</div> <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="citation">
<div class="left-bar"></div> <div class="left-bar"></div>
@ -93,7 +95,8 @@
<p v-translate> <p v-translate>
N’importe qui ayant un minimum de compétences techniques peut héberger un serveur PeerTube qu’on nomme instance. 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. 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> </p>
<div class="bottom-link-wrapper"> <div class="bottom-link-wrapper">
@ -103,10 +106,11 @@
</a> </a>
</div> </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> <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é ! il suffit que l'administrateur·ice l'ai autorisé !
</p> </p>
@ -116,12 +120,13 @@
<div class="text v-translate">C'est le principe de<strong> la fédération !</strong></div> <div class="text v-translate">C'est le principe de<strong> la fédération !</strong></div>
</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> <p v-translate>
Mais ce n’est pas tout ! Le protocole de fédération ActivityPub (qu’utilise PeerTube) 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 <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), (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> <strong>ou même de commenter une vidéo hébergée sur PeerTube directement depuis Mastodon.</strong>
</p> </p>
@ -137,7 +142,7 @@
<div class="free-software one-column"> <div class="free-software one-column">
<div class="subtitle" v-translate>Un code ouvert sous licence libre</div> <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> <p v-translate>
Les principaux services de diffusion de vidéo en ligne utilisent vos données pour gagner Les principaux services de diffusion de vidéo en ligne utilisent vos données pour gagner
@ -153,11 +158,11 @@
</div> </div>
</div> </div>
<p v-translate> <p v-translate>
Mais surtout, PeerTube <strong>vous considère comme une personne, et non pas comme un produit qu’il faut 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é 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. pour vous faire rester indéfiniment en ligne.
</p> </p>
<p v-translate> <p v-translate>
Tout cela est possible car PeerTube est un logiciel libre (licence GNU-AGPL pour les connaisseur⋅euses). 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="you-are-a-video-maker one-column">
<div class="subtitle" v-translate>Vous êtes vidéaste ?</div> <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="citation">
<div class="left-bar"></div> <div class="left-bar"></div>
@ -197,14 +202,17 @@
<div class="text" v-translate> <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 Ê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> </div>
<div v-translate> <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... 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> </div>
<button class="jpt-button discover-instances"> <button class="jpt-button discover-instances">
@ -217,7 +225,7 @@
<div class="p2p one-column"> <div class="p2p one-column">
<div class="subtitle" v-translate>De la diffusion – et donc du visionnage – en pair-à-pair</div> <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="citation">
<div class="left-bar"></div> <div class="left-bar"></div>
@ -236,7 +244,8 @@
<p v-translate> <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 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> </p>
</div> </div>
@ -244,7 +253,7 @@
<div class="one-column"> <div class="one-column">
<div class="subtitle" v-translate>À vous de jouer !</div> <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>
<div class="buttons-row"> <div class="buttons-row">
@ -267,7 +276,7 @@
<div class="behind-peertube one-column"> <div class="behind-peertube one-column">
<div class="subtitle" v-translate>Qui est derrière PeerTube ?</div> <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> <p v-translate>
PeerTube est <strong>un logiciel libre gratuit financé par une association</strong> française à but non lucratif : Framasoft. 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> <p v-translate>
Créée en 2004, l'association se consacre désormais à <strong>l’éducation populaire aux enjeux du numérique.</strong> 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 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. <strong>financée à plus de 90% par vos dons</strong>, déductibles des impôts pour les contribuables français·es.
</p> </p>
@ -362,6 +372,11 @@
.ambition { .ambition {
display: flex; display: flex;
& > img,
& > div {
flex-basis: 100%;
}
img { img {
margin-right: 30px; margin-right: 30px;
} }
@ -397,28 +412,28 @@
</style> </style>
<script> <script>
import IconInstance from '../components/icons/IconInstance.vue' import IconInstance from '../components/icons/IconInstance.vue'
import ContentSelection from '../components/ContentSelection.vue' import ContentSelection from '../components/ContentSelection.vue'
import IconRight from '../components/icons/IconRight.vue' import IconRight from '../components/icons/IconRight.vue'
export default { export default {
components: { components: {
ContentSelection, ContentSelection,
IconInstance, IconInstance,
IconRight IconRight
}, },
data: () => ({ data: () => ({
contentSelections: [ contentSelections: [
{ {
type: 'video', type: 'video',
title: 'Nothing to hide', title: 'Nothing to hide',
thumbnailUrl: 'https://peertube2.cpy.re/static/thumbnails/d2a5ec78-5f85-4090-8ec5-dc1102e022ea.jpg', 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', url: 'https://peertube2.cpy.re/videos/watch/d2a5ec78-5f85-4090-8ec5-dc1102e022ea',
tags: [ 'tag', 'tag2', 'tag3' ], 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.' 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> </script>