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

Design FAQ page

Browse source
This commit is contained in:
Chocobozzz 2019-09-23 10:46:31 +02:00
parent 1d4d6c1c87
commit 04dbb45c9c
No known key found for this signature in database
GPG key ID: 583A612D890159BE
4 changed files with 509 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.vue
View file

@ -26,13 +26,15 @@
return {
title: 'JoinPeerTube',
titleTemplate: '%s | JoinPeerTube',
meta: {
meta: [
{
description: this.$gettext(
'A free software to take back control of your videos! ' +
'With more than 100 000 hosted videos, viewed more than 6 millions times and 20 000 users, ' +
'PeerTube is the decentralized free software alternative to videos platforms developed by Framasoft'
)
}
]
}
}
}

64
src/components/AccordionElement.vue Normal file
View file

@ -0,0 +1,64 @@
<template>
<b-card no-body :id="accordionId">
<b-card-header header-tag="header" role="tab">
<a :href="href" v-b-toggle="accordionBodyId">
{{ title }}
</a>
</b-card-header>
<b-collapse :accordion="accordion" :id="accordionBodyId" role="tabpanel">
<b-card-body>
<b-card-text>
<slot></slot>
</b-card-text>
</b-card-body>
</b-collapse>
</b-card>
</template>
<style scoped>
</style>
<script>
import { BCollapse, BCard, BCardHeader, BCardBody, BCardText, VBToggle } from 'bootstrap-vue'
export default {
components: {
BCollapse,
BCard,
BCardHeader,
BCardBody,
BCardText
},
directives: {
'b-toggle': VBToggle
},
props: {
title: String,
id: String,
accordion: String
},
computed: {
accordionId: function () {
return this.id.toLowerCase()
.replace(/[ /']/g, '-')
.replace(/[?!.,]/g, '')
},
href: function () {
return '#' + this.accordionId
},
accordionBodyId: function () {
return this.accordionId + '-body'
}
}
}
</script>

7
src/main.js
View file

@ -10,6 +10,7 @@ import Help from './views/Help'
import News from './views/News'
import Instances from './views/Instances'
import HallOfFame from './views/Hall-Of-Fame'
import FAQ from './views/FAQ'
import './scss/main.scss'
import CommonMixins from './mixins/CommonMixins'
@ -75,6 +76,10 @@ const routes = [
{
path: '/hall-of-fame',
component: HallOfFame
},
{
path: '/faq',
component: FAQ
}
]
@ -131,7 +136,7 @@ if (!(navigator.doNotTrack === 'yes' ||
const nowTs = Math.round(now.getTime() / 1000)
const visitorInfo = self.getVisitorInfo()
const createTs = parseInt(visitorInfo[2], 10)
const cookieTimeout = 33696000 // 13 mois en secondes
const cookieTimeout = 33696000 // 13 months in seconds
return (createTs + cookieTimeout) - nowTs
}

509
src/views/FAQ.vue
View file

@ -1,111 +1,442 @@
<template>
<main>
<section class="row faq">
<div class="container">
<h2 class="text-center" v-html="$t('faq.title')"></h2>
<p><i class="text-center" v-html="$t('faq.clic')"></i></p>
<h3 v-html="$t('faq.section.prez')"></h3>
<div id="accordion-presentation" class="panel-group">
<div class="panel panel-default"
v-for="(question, key, index) in $t('faq.prez')">
<div class="panel-heading" role="button" @click="toggleAccordion('prez', index)">
<h3 class="panel-title" v-html="$t('faq.prez.' + key + '.title')"></h3>
<div class="blocks">
<div class="title-block">
<div class="title" v-translate>FAQ</div>
<div class="separator"></div>
</div>
<b-collapse v-model="prez[index]">
<div class="panel-body" v-if="key === 'pros'">
<p v-html="$t('faq.prez.pros.text[0]')"></p>
<div class="block" role="tablist">
<div class="title" v-translate>PeerTube Presentation</div>
<accordion-element accordion="a" id="What is PeerTube?" :title="$gettext('What is PeerTube')">
<div v-translate>
<p>PeerTube is software that you install on a web server. It allows you to create a video hosting website, so create your
"homemade YouTube".</p>
<p>The difference to YouTube is that it's not intended to create a huge platform centralizing videos from the whole world on a
single server farm (which is horribly expensive).</p>
<p>On the contrary, PeerTube's concept is to create a network of multiple small interconnected video hosting providers.</p>
</div>
</accordion-element>
<accordion-element accordion="a" id="The three main advantages of PeerTube."
:title="$gettext('The three main advantages of PeerTube.')">
<div v-translate>
<p>PeerTube is unique because (as far as we know) it's the only video hosting web application which combines three
advantages:</p>
<ol>
<li v-html="$t('faq.prez.pros.list[0]')"></li>
<li v-html="$t('faq.prez.pros.list[1]')"></li>
<li v-html="$t('faq.prez.pros.list[2]')"></li>
<li>An open code (transparency) under a free/libre license (ethic, respect and community-driven development);</li>
<li>A federation of interconnected hosting providers (so more video choices wherever you go to see them);</li>
<li>Peer-to-peer broadcasting – and therefore viewing – (so no slowing down when a video becomes viral).</li>
</ol>
<p v-html="$t('faq.prez.pros.text[1]')"></p>
<p>Linked together, these three features makes it easy to host videos on the server side, while remaining practical, ethical and
fun for the internet users.</p>
</div>
<div class="panel-body" v-if="key === 'libre'">
<p v-html="$t('faq.prez.libre.text[0]')"></p>
<p v-html="$t('faq.prez.libre.text[1]')"></p>
</accordion-element>
<accordion-element accordion="a" id="Why is it better as free/libre software?"
:title="$gettext('Why is it better as free/libre software?')">
<div v-translate>
<p>
Because by design free/libre software respects our fundamental freedoms, and guarantees them by
<a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE">a license</a>,
so a legally enforceable contract.
</p>
<p>Concretely here, it means that:</p>
<ul>
<li v-html="$t('faq.prez.libre.list[0]')"></li>
<li v-html="$t('faq.prez.libre.list[1]')"></li>
<li v-html="$t('faq.prez.libre.list[2]')"></li>
<li>PeerTube is freely provided, no need to pay to install it on your server;</li>
<li>We can look under the hood of PeerTube (its source code): it's auditable, transparent;</li>
<li>Its development is community-based, it can be enhanced by everyone's contributions.</li>
</ul>
</div>
<div class="panel-body" v-if="!/(pros|libre)/.test(key)">
<p
v-for="(p, index) in $t('faq.prez.' + key + '.text')"
v-html="$t('faq.prez.' + key + '.text[' + index + ']')"
></p>
</accordion-element>
<accordion-element accordion="a" id="What's the interest to federate the video hosting providers?"
:title="$gettext('What\'s the interest to federate the video hosting providers?')">
<div v-translate>
<p>
The advantage of YouTube (and other platforms) is its video catalog: from knitting tutorials to Minecraft constructions
through videos of kittens or holidays... you can find everything!
</p>
<p>
The more the video catalogue is varied, the more people are interested, the more videos are uploaded... but hosting videos from
all over the world is (very, very) expensive!
</p>
<p>
If the hosting provider Knitting-PeerTube becomes friends with Kittens-Tube and Framatube, it will display the videos of
others on its site, thus diluting hosting costs while remaining practical and complete for Internet users.
</p>
<p>
PeerTube's federation protocol is fluid (everyone can choose who they want to follow), and based on
<a target="_blank" rel="noopener noreferrer" href="https://activitypub.rocks">ActivityPub</a>: this opens the possibility
to connect with tools like Mastodon for example.
</p>
</div>
</b-collapse>
</accordion-element>
<accordion-element accordion="a" id="Why broadcast PeerTube videos through peer-to-peer?"
:title="$gettext('Why broadcast PeerTube videos through peer-to-peer?')">
<div v-translate>
<p>When you host a large file like a video, the biggest thing to fear is success: if a video becomes viral and many people watch
it at the same time, the server has a big risk of getting overloaded!</p>
<p>
Peer-to-peer broadcasting allows, thanks to the
<a target="_blank" rel="noopener noreferrer" href="https://en.wikipedia.org/wiki/WebRTC">WebRTC</a>
protocol, that Internet users who watch the same video at the same time exchange bits of files, which relieves the server.
</p>
<p>There is nothing to do: your web browser does it automatically. If you are on a mobile phone or if your network does not
allow it (router, firewall, etc.), this function is disabled and switches back to an "old-style" video broadcast 😉.</p>
</div>
</accordion-element>
<accordion-element accordion="a" id="For those who know how to administer a server, PeerTube is..."
:title="$gettext('For those who know how to administer a server, PeerTube is...')">
<div v-translate>
<p>
<strong>It's software you install on your server</strong> to create a website where videos are hosted and broadcast...
Basically: you create your own "homemade YouTube"!
</p>
<p>There already exists free/libre software that enables you to do this. But with PeerTube, you can link your instance (your
video website) to Zaïd's PeerTube instance (where he hosts videos of the lectures for his people's university), to Catherin's
(who hosts her webmedia videos) or even to Solar's PeerTube instance (who manages a vloggers collective).</p>
<p>
<strong>But PeerTube doesn't centralize: it federates.</strong> Thanks to the
<a target="_blank" rel="noopener noreferrer" href="https://activitypub.rocks">ActivityPub</a>
protocol (also used by
<a target="_blank" rel="noopener noreferrer" href="https://joinmastodon.org">the Mastodon federation</a>,
a free/libre Twitter alternative), PeerTube can federate several small hosters so they don't have to buy thousands of hard
disks to host videos for the whole world.
</p>
<p>As a result, on your PeerTube website, the audience will be able to watch not only your videos, but also videos hosted by
Zaïd, Catherin or Solar... without having to host their videos on your PeerTube-powered website. Such diversity in a
video-catalog makes it very attractive. Such a large choice and diversity of videos is what made centralized platforms such as
YouTube succesful.
</p>
<p>
Federation offers another benefit: <strong>everyone becomes independent</strong>. Zaïd, Catherin, Solar and yourself can make
your own rules, your own Terms of Services (for example, one can imagine a MeowTube where dogs videos are strictly forbidden
😉).
</p>
</div>
</accordion-element>
<accordion-element accordion="a" id="For those who wants to upload their videos, PeerTube allows..."
:title="$gettext('For those who wants to upload their videos, PeerTube allows...')">
<div v-translate>
<p>
It allows you to choose a hoster that fits you. YouTube's excesses are a good exemple: its hoster, Google/Alphabet, can
impose its "Robocopyright" (the ContentID system) or its tools to index, recommend and spotlight videos; and those tools seem
as unfair as they are obscure. Even though, it already forces you
<a target="_blank" rel="noopener noreferrer" href="https://tosdr.org/#youtube"> to give it extended copyrights on your videos,
for free</a>!
</p>
<p>With PeerTube, <strong>you can choose the hoster of your videos according to his terms of services</strong>, his moderation
policy, his federation choices... As you don't have a tech giant facing you, you might be able to talk with you hoster if you
ever have a problem, a need, or something you want.</p>
<p>
The other big advantage of PeerTube is that your hoster doesn't have to fear the sudden success of one of your videos.
Indeed, PeerTube broadcasts videos with the protocol
<a target="_blank" rel="noopener noreferrer" href="https://en.wikipedia.org/wiki/BitTorrent">WebTorrent</a>.
If hundreds of people are watching your video at the same time, their browsers automatically send bits of your video to other
viewers.
</p>
<p>Before this peer-to-peer broadcast, successful videographers (or videos that make the buzz) were doomed to be hosted by a web
giant whose infrastructure can handle millions of simultaneous views... Or to pay for a very expensive independent video host so
that it can hold the load.</p>
</div>
</accordion-element>
<accordion-element accordion="a" id="For those who want to watch videos, PeerTube can offer..."
:title="$gettext('For those who want to watch videos, PeerTube can offer...')">
<div v-translate>
<p>One of the benefits is that <strong>you become a part of the broadcasting of the videos you are watching</strong>. If other
people are watching a PeerTube video at the same time as you, as long as your tab remains open, your browser shares bits of
that video and you participate in a healthier use of the Internet.</p>
<p>Of course, PeerTube's video player adapts to your situation: if your installation does not allow peer-to-peer playback
(corporate network, recalcitrant browser, etc.) video playback will be done in the classic way.</p>
<p>
But above all, <strong>PeerTube treats you like a person, not as a product</strong> that it has to track, profile, and lock
in video loops to better sell your available brain time. Thus, the
<a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube">source code</a>
(the recipe) of the PeerTube software is open, making its operation transparent.
</p>
<p><strong>PeerTube is not only open-source: it's free (as in free speech).</strong> Its free license guarantees our fundamental
freedoms as users. It is this respect for our freedoms that allows Framasoft to invite you to contribute to this software, and
many evolutions (innovative comment system, etc.) have already been suggested by some of you.</p>
</div>
</accordion-element>
<accordion-element accordion="a" id="Is PeerTube's purpose to replace YouTube?"
:title="$gettext('Is PeerTube\'s purpose to replace YouTube?')">
<div v-translate>
<p>We can answer with certainty: no!</p>
<p>In March 2018, PeerTube released its publicly usable beta version. Several collectives set up the first instances, thus
creating the bases of the federation.</p>
<p>But this is just the beginning, PeerTube is not (yet) perfect, and many features are missing. But we intend to keep improving
it day after day.</p>
<p>March 2018 thus represents the birth of the PeerTube federations: the more this software will be used and supported, the more
people will use it and contribute to it, and the faster it will evolve towards a concrete alternative to platforms such as
YouTube.</p>
<p>Nevertheless, the ambition remains to be <strong>a free and decentralized alternative</strong>: the goal of an alternative is
not to replace, but to propose something else, with different values, in parallel to what already exists.</p>
</div>
</accordion-element>
</div>
<div class="block" role="tablist">
<div class="title" v-translate>Creation and content</div>
<accordion-element accordion="a" id="If it's free, can we upload illegal stuff on it?"
:title="$gettext('If it\'s free, can we upload illegal stuff on it?')">
<div v-translate>
<p>Being free doesn't mean being above the law! Each PeerTube hosting provider can decide on its own general conditions of use,
abiding by their local laws.</p>
<p>
For example, in France, discriminatory content
<a target="_blank" rel="noopener noreferrer" href="https://fr.wikipedia.org/wiki/Lois_contre_le_racisme_et_les_discours_de_haine">is prohibited</a>
and may be reported to the authorities. PeerTube allows users to report problematic videos, and each administrator must then
apply its moderation in accordance with its terms and conditions and the law.
</p>
<p>The federation system, for its part, allows hosts to decide with whom they want to connect, depending on the types of content
or the moderation policies of others.</p>
</div>
</accordion-element>
<accordion-element accordion="a" id="Who is responsible for content published on PeerTube?"
:title="$gettext('Who is responsible for content published on PeerTube?')">
<div v-translate>
<p>PeerTube is not a website: it is software that allows a web hoster (for example, Dominique) to create a video website (let's
call it DominiqueTube).</p>
<p>Now imagine that Camille has created an account on DominiqueTube and uploads an illegal video, because this video uses music
created by Solal.</p>
<p>Solal goes on Framatube, an instance which follows DominiqueTube. So, Solal can see, from Framatube, the videos published on
DominiqueTube.</p>
<p>Solal sees Camille's illegal video, and signals it with the button provided for that purpose. Although the report is made
from Framatube, it is sent directly to the person hosting the illegal content, Dominique.</p>
<p>From that moment on, Dominique is responsible, because they are warned that they're hosting an illegal video. It is therefore
up to them to act if they don't want to be held accountable before the law.</p>
<p>Then Dominique and Solal can turn against Camille, who uploaded the video.</p>
</div>
</accordion-element>
<accordion-element accordion="a" id="What is PeerTube's remuneration policy?"
:title="$gettext('What is PeerTube\'s remuneration policy?')">
<div v-translate>
<p>There are none, not at the moment', 'PeerTube is a tool that we wanted neutral in terms of remuneration.</p>
<p>For now, the solution proposed to people who upload videos is to use the "support" button under the video. This button
displays a frame in which people who upload videos can display text, images, and links freely. For example, it's possible to
put a link to Patreon, Tipeee, Paypal, Liberapay (or any other solution) there. Other examples: put a postal address if you'd
like to receive physical thank-you cards, put a logo of your enterprise, a link to support a non-profit organisation...</p>
<p>We did not go any further because to favour one technical solution would be to impose, in the code, a political vision of
cultural sharing and its financing. All financial solutions are possible and treated equally in PeerTube.</p>
<p>However, many improvements of PeerTube are to be expected... Including those that would allow you to create (and choose) the
monetization tools that interest you!</p>
<p>Nevertheless, it is worth remembering that the vast majority of videos published on the Internet (and even on YouTube) are
shared for non-market purposes: remuneration is a tool, but not necessarily a main or essential purpose.</p>
</div>
</accordion-element>
<accordion-element accordion="a" id="Where can I put my videos?" :title="$gettext('Where can I put my videos?')">
<div v-translate>
<p>You need to find a PeerTube hosting instance you trust.</p>
<p>
There's a complete <a target="_blank" rel="noopener noreferrer" href="https://instances.joinpeertube.org">list of instances
here</a>,
and a list of those that are <a target="_blank" rel="noopener noreferrer" href="/instances">open to registration here</a>.
</p>
<p>Then, we recommend you go to the instances, read their "about" page to discover their terms of use (disk space limit per
user, content policy, etc.).</p>
<p>It's best to contact and talk directly with hosting providers, to understand their business model, vision, etc. Because only
you can determine what makes you trust such or such host, and thus entrust your videos to them.</p>
</div>
</accordion-element>
<accordion-element accordion="a" id="There are many porn videos on PeerTube!"
:title="$gettext('There are many porn videos on PeerTube!')">
<div v-translate>
<p>No. In October 2018, on an average instance federating with ~200 instances and indexing ~16000 videos, only ~200 videos are
tagged as NSFW (i. e. the content is sensitive, which could be something else than pornography). Therefore, they represent
only ~1% of all the videos.</p>
<p>Moreover, each administrator decides with which instances he wants to federate: he has the full control of the content he
wants to display on his instance. It's up to him to choose the policy regarding this kind of videos. He can decide to:
<ul>
<li>Display them</li>
<li>Blur the title and thumbnail</li>
<li>Hide them</li>
</ul>
<p>By default, this configuration is set to "Hide them". If some administrators decide to display them with a blur filter
for example, it's <strong>their</strong> choice.</p>
<p>Finally, any user can override this configuration, and decides if he want to display, blur or hide these videos for
himself.</p>
<p>PeerTube is just a software: it's not Framasoft (non-profit that develops PeerTube) that's responsible for the content
published on some instances.</p>
<p>It's up to everyone to be responsible: parents, visitors, uploaders, PeerTube administrators to respect the law and avoid any
problematic situations.</p>
</div>
</accordion-element>
</div>
<div class="block" role="tablist">
<div class="title" v-translate>Technical questions</div>
<accordion-element accordion="a" id="How do I install PeerTube?" :title="$gettext('How do I install PeerTube?')">
<div v-translate>
<p>The <a target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/#/install-any-os">installation guide is
here</a>
(only in English).</p>
<p>We recommend not to install PeerTube on low-end hardware or behind a weak connection (for example, on a RaspberryPi with an
ADSL connection): this could slow down all federations.</p>
<p>
Don't bother the developer to help you install your instance: we have a
<a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/peertube">support forum</a> for that.
</p>
</div>
</accordion-element>
<accordion-element accordion="a"
id="PeerTube v1.0 does not seem to me to contain all the tools necessary for a good management of my instance."
:title="$gettext('PeerTube v1.0 does not seem to me to contain all the tools necessary for a good management of my instance.')">
<div v-translate>
<blockquote>
"It's outrageous and unconscious: you're releasing PeerTube's version 1 when it doesn't contain the necessary tools
to effectively manage videos claimed by rights holders, or to effectively manage the issue of online harassment in comments,
or to effectively manage monetization through advertising, or to (insert here your request to PeerTube). It will never work!
What do you intend to do about it?"
</blockquote>
<p>You're right. PeerTube 1.0 is not the perfect tool, far from it. And we never promised that this version 1.0 would be a
tool that would include all the features corresponding to all cases.</p>
<p>PeerTube 1.0 is the realization of the commitment we made in October 2017 to take PeerTube from an alpha version (personal
project and proof of concept that a federated video platform could work) to a 1.0 version in October 2018 (which does not mean
"final version", but "version considered stable and distributable").</p>
<p>Remember that PeerTube has only one (almost) full time developer and a small handful of very involved volunteers. It is not a
product developed by a start-up with a full time team (dev, design, UX, marketing, support, etc.) and significant financial
support. It is a Community free software, the development of which will continue over the months and, we hope, in the years to
come.</p>
<p>We are well aware of the shortcomings of PeerTube 1.0, especially in the moderation tools area (videos, comments, etc.). And
we intend to work on these weaknesses. </p>
<p>We have chosen to do so as follows: on the one hand we will work primarily in the coming months to improve these tools within
PeerTube itself (in the <i>core</i> of the software). On the other hand, we will also focus, in parallel, a large part of
PeerTube's development effort during 2019 on the integration of a plugin system, which can be developed by the communities.
</p>
<p>Indeed, we do not claim to have the science behind it and know how best to manage each of the tools according to each of the
needs. For example: with regard to the question of DMCA requests, cases vary according to geographical jurisdictions (European
law is different from French law, itself different from Canadian law, itself different from American law, etc.). Concerning
the tools for moderating comments, here again, we cannot decree ourselves experts of the subject, because this is simply not
the case.</p>
<p>By acting both on the <i>core</i>, but also by allowing the development of plugins, we believe that PeerTube will, in the
long term, be able to respond much better to these issues and allow different communities to adapt PeerTube to their needs.
</p>
<p>We are working as quickly as possible to improve PeerTube, but we are doing so with the resources we have, which means
<strong>very</strong> limited.</p>
<p>In the meantime, as an user if you feel that PeerTube 1.0 does not currently meet your needs, it's simple: don't use it right
now :) (we remind you that we don't make money developing PeerTube, and that if we obviously hope for its success, the
survival of our association doesn't depend on it).</p>
<p>As an administrator, if you are afraid of DMCA requests, there is an option to limit the opening of registrations to people
you know. You will then be able to reopen registrations without verification once these verification tools have been
integrated, or you have developed them.</p>
</div>
</accordion-element>
<accordion-element accordion="a" id="How do I contribute to PeerTube’s code?"
:title="$gettext('How do I contribute to PeerTube’s code?')">
<div v-translate>
<p>
The <a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube">Git repository of PeerTube is
here</a>.
</p>
<p>
You can <a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube/issues">create an issue</a>,
contribute to it, or even start contributing by choosing the
<a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue+%3Abeginner%3A%22">
easy problems for those who begin
</a>.
See <a target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/#/contribute-getting-started">contributing guide</a>
for more information.
</p>
<p>
If you want to help out in another way, or if you want to request a feature, come discuss it on our
<a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/peertube">contribution forum</a>.
</p>
</div>
</accordion-element>
<accordion-element accordion="a" id="Why does PeerTube use the ActivityPub federation protocol? Why not IPFS / d.tube / Steemit?"
:title="$gettext('Why does PeerTube use the ActivityPub federation protocol? Why not IPFS / d.tube / Steemit?')">
<div v-translate>
<p>PeerTube uses ActivityPub because this federation protocol is recommended by the W3C and is already used by the federated
social network Mastodon.</p>
<p>IPFS is a great technology, but it still seems very (too!) young for large scale streaming of large files.</p>
<p>After discussing it on our forum, we feel that d.tube is not free or open source, because publishing only compiled code
hinders freedom of modification.</p>
<p>PeerTube is free, decentralized, distributed, and does not impose any remuneration model. This is the choice we have made,
which is debatable, and others (like d.tube) have made other choices, which have their advantages. So it’s up to you to see
what suits you.</p>
</div>
</accordion-element>
<div class="bottom-link-wrapper">
<a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube/blob/develop/FAQ.md"
class="bottom-link">
<span class="text" v-translate>More technical questions</span>
<icon-right></icon-right>
</a>
</div>
</div>
<h3 v-html="$t('faq.section.content')"></h3>
<div id="accordion-creation" class="panel-group">
<div class="panel panel-default"
v-for="(question, key, index) in $t('faq.content')">
<div class="panel-heading" role="button" @click="toggleAccordion('content', index)">
<h3 class="panel-title" v-html="$t('faq.content.' + key + '.title')"></h3>
</div>
<b-collapse v-model="content[index]">
<div class="panel-body">
<p
v-for="(p, index) in $t('faq.content.' + key + '.text')"
v-html="$t('faq.content.' + key + '.text[' + index + ']')"
></p>
</div>
</b-collapse>
</div>
</div>
<p><a :href="$t('link.forumPT')" class="button" v-html="$t('faq.forum')"></a></p>
<h3 v-html="$t('faq.section.tech')"></h3>
<div id="accordion-tech" class="panel-group">
<div class="panel panel-default"
v-for="(question, key, index) in $t('faq.tech')">
<div class="panel-heading" role="button" @click="toggleAccordion('tech', index)">
<h3 class="panel-title" v-html="$t('faq.tech.' + key + '.title')"></h3>
</div>
<b-collapse v-model="tech[index]">
<div class="panel-body">
<p
v-for="(p, index) in $t('faq.tech.' + key + '.text')"
v-html="$t('faq.tech.' + key + '.text[' + index + ']')"
></p>
</div>
</b-collapse>
</div>
</div>
</div>
</section>
</main>
</template>
<style lang="scss">
header a {
color: #000;
}
</style>
<style scoped lang="scss">
@import '../scss/_variables.scss';
.title {
font-size: 22px;
margin-top: 30px;
margin-bottom: 15px;
}
.card {
margin: 5px 0;
}
.blocks {
margin: 60px auto;
}
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}
</style>
<script>
import { BCollapse } from 'bootstrap-vue'
import AccordionElement from '../components/AccordionElement'
import IconRight from '../components/icons/IconRight'
export default {
export default {
components: {
BCollapse
},
data () {
return {
prez: [...Array(9).keys()].map(i => (i < 1)),
content: [...Array(5).keys()].map(i => false),
tech: [...Array(4).keys()].map(i => false)
}
},
methods: {
toggleAccordion (section, index) {
if (this[section][index]) {
this.$set(this[section], index, false)
} else {
this[section] = this[section].map((v, i) => i === index)
}
}
AccordionElement,
IconRight
},
metaInfo: function () {
@ -113,5 +444,5 @@ export default {
title: this.$gettext('FAQ')
}
}
}
}
</script>