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

Add latest news

Browse source
This commit is contained in:
Chocobozzz 2019-10-23 10:36:29 +02:00
parent 66b9f63d34
commit 16a961904e
No known key found for this signature in database
GPG key ID: 583A612D890159BE
7 changed files with 263 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/img/news/release-1.4/en/account-creation.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
public/img/news/release-1.4/en/channel.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 125 KiB

BIN
public/img/news/release-1.4/en/share-popup.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
public/img/news/release-1.4/fr/account-creation.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
public/img/news/release-1.4/fr/channel.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
public/img/news/release-1.4/fr/share-popup.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.5 KiB

314
src/views/News.vue
View file

@ -2,16 +2,118 @@
<main> <main>
<div class="blocks"> <div class="blocks">
<div class="title-block"> <div class="title-block">
<div class="title">PeerTube news!</div> <div class="title" v-translate>PeerTube news!</div>
<p>Discover the latest PeerTube improvements</p> <p>Discover the latest PeerTube improvements</p>
<div class="separator"></div> <div class="separator"></div>
</div> </div>
<div class="news"> <article class="news">
<div class="title">PeerTube 1.3 is out!</div> <div class="title" v-translate>PeerTube 1.4 is out!</div>
<div class="date">June 5, 2019</div> <div class="date" v-translate>September 25, 2019</div>
<div class="body">
<p>Hi everybody,</p>
<p>Peertube 1.4 just came out! Here's a quick overview of what's new…</p>
<h4>Plug-in system</h4>
<p>
Since PeerTube's launch, we have been aware that every administrator and user wishes to see the software fulfill their needs.
As Framasoft cannot and will not develop every feature that could be hoped for, we have from the start of the project planned
on creating a plug-in system.
</p>
<p>
We are pleased to announce that the foundation stones of this system have been laid in this 1.4 release! It might be very basic
for now, but we plan on improving it bit by bit in Peertube's future releases.
</p>
<p>
Now, this system allows each administrator to <b>create specific plug-ins</b> depending on their needs. They may install
extensions created by other people on their instance as well. For example, it is now possible to install community created
graphical themes to change the instance visual interface.
</p>
<h4>A better interface</h4>
<p>
We strive to improve PeerTube's interface by collecting users' opinions so that we know what is causing them trouble
(in terms of understanding and usability for example). Even though this is a time-consuming undertaking,
this new release already offers you a few modifications.
</p>
<p>
First of all, we realized that most people who discover PeerTube have a hard time understanding
<b>the difference between a channel and an account</b>.
Indeed, on others video broadcasting services (such as YouTube) these two things are pretty much the same.
</p>
<p>
However, on PeerTube each account is linked to one or multiple channels that can be named as the users sees fit. You also have
to create at least one channel when creating an account. Once the channels have been created, users can upload videos to each
channel to organize their contents (for example, you could have a channel about cooking and another one about biking).
</p>
<figure>
<img @click="openModal" :src="buildNewsImgUrl('release-1.4', 'channel.png')" alt="2 channels on Framasoft's account on FramaTube instance">
<figcaption>2 channels on Framasoft's account on FramaTube instance</figcaption>
</figure>
<p>
In order to make this channel idea more understandable, we have changed the sign-up form, which from now on consists of two
steps:
</p>
<ul>
<li>Step 1: account creation (choosing your username, password, email, etc.)</li>
<li>Step 2: choosing your default channel name via a new form</li>
</ul>
<figure>
<img :src="buildNewsImgUrl('release-1.4', 'account-creation.png')" alt="the new sign-up form in 2 steps">
<figcaption>the new sign-up form in 2 steps</figcaption>
</figure>
<ul>
<li>We also aimed to differentiate a channel homepage from that of an account. These two pages used to list videos, whereas now
the account homepage lists all the channel linked to the account by showing under each channel name the thumbnail from the
last videos uploaded on it.
</li>
<li>Another unclear element was the <b>video sharing pop-up</b>. We have improved it, and it is now possible to share or embed a
video by making it start and/or finish at a precise moment (time-code feature), to decide which subtitles will appear by
default, and to loop the video. These new options will surely be greatly enjoyed.
</li>
</ul>
<figure>
<img :src="buildNewsImgUrl('release-1.4', 'share-popup.png')" alt="customization options when video sharing">
<figcaption>customization options when video sharing</figcaption>
</figure>
<h4>More features</h4>
<p>
Our wonderful community of translators is once again to thank for their work, after they enriched PeerTube with
<b>3 new languages</b>: Finnish, Greek and Scottish Gaelic, making PeerTube now available in 22 languages.
</p>
<p>
We also added a new feature allowing you to <b>upload an audio file</b> directly to PeerTube: the software will automatically
create a video from the audio file. This much awaited for feature should make life easier for music makers :)
</p>
<p>
This new release includes many other improvements. You can see the complete list on
<a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube/releases/tag/v1.4.0">https://github.com/Chocobozzz/PeerTube/releases/tag/v1.4.0</a>.
</p>
<p>Thanks to all PeerTube contributors!<br>Framasoft</p>
</div>
</article>
<article class="news">
<div class="title" v-translate>PeerTube 1.3 is out!</div>
<div class="date" v-translate>June 5, 2019</div>
<div class="body"> <div class="body">
<p v-translate>Hello!</p> <p v-translate>Hello!</p>
@ -29,7 +131,7 @@
<p v-translate> <p v-translate>
Another feature of this 1.3 version has been entirely developed by an external contributor: Another feature of this 1.3 version has been entirely developed by an external contributor:
<a href="https://github.com/joshmorel">Josh Morel</a> who add <strong>a quarantine system</strong> for videos on PeerTube. If the <a target="_blank" rel="noopener noreferrer" href="https://github.com/joshmorel">Josh Morel</a> who add <strong>a quarantine system</strong> for videos on PeerTube. If the
administrator of an instance enables this feature, any new video uploaded on his instance will automatically be hidden until a administrator of an instance enables this feature, any new video uploaded on his instance will automatically be hidden until a
moderator approves it. moderator approves it.
</p> </p>
@ -62,25 +164,25 @@
<p v-translate> <p v-translate>
Many other improvements have been made in this new version. You can see the complete list on Many other improvements have been made in this new version. You can see the complete list on
<a href="https://github.com/Chocobozzz/PeerTube/releases/tag/v1.3.0">https://github.com/Chocobozzz/PeerTube/releases/tag/v1.3.0</a>. <a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube/releases/tag/v1.3.0">https://github.com/Chocobozzz/PeerTube/releases/tag/v1.3.0</a>.
</p> </p>
<p v-translate>Thanks to all PeerTube contributors!</p> <p v-translate>Thanks to all PeerTube contributors!</p>
<p v-translate>Framasoft.</p> <p v-translate>Framasoft.</p>
</div> </div>
</div> </article>
<div class="news"> <article class="news">
<div class="title">PeerTube: retrospective, new features and more to come!</div> <div class="title" v-translate>PeerTube: retrospective, new features and more to come!</div>
<div class="date">February 26, 2019</div> <div class="date" v-translate>February 26, 2019</div>
<div class="body"> <div class="body">
<p v-translate> <p v-translate>
Since version 1.0 has been released last November, we went on improving PeerTube, day after day. These improvements on PeerTube Since version 1.0 has been released last November, we went on improving PeerTube, day after day. These improvements on PeerTube
go well beyond the objectives fixed during the crowdfunding. They have been funded by the go well beyond the objectives fixed during the crowdfunding. They have been funded by the
<a href="https://framasoft.org/en/">Framasoft non-profit</a>, which develops the software (and lives only <a target="_blank" rel="noopener noreferrer" href="https://framasoft.org/en/">Framasoft non-profit</a>, which develops the software (and lives only
through <a href="https://soutenir.framasoft.org/en/">your donations</a>). through <a target="_blank" rel="noopener noreferrer" href="https://soutenir.framasoft.org/en/">your donations</a>).
</p> </p>
<p v-translate>Here is a small retrospective of the end of 2018/beginning of 2019:</p> <p v-translate>Here is a small retrospective of the end of 2018/beginning of 2019:</p>
@ -103,7 +205,7 @@
<p v-translate> <p v-translate>
In the meantime, the PeerTube federation has grown: today, more than 300 instances broadcast more than 70,000 videos, with In the meantime, the PeerTube federation has grown: today, more than 300 instances broadcast more than 70,000 videos, with
nearly 2 million cumulated views. We remind you that the only official website we maintain around PeerTube is nearly 2 million cumulated views. We remind you that the only official website we maintain around PeerTube is
<a href="https://joinpeertube.org/en">https://joinpeertube.org/en</a> and that we bear no responsibility on any other site that <a target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org/en">https://joinpeertube.org/en</a> and that we bear no responsibility on any other site that
may be published. may be published.
</p> </p>
@ -115,12 +217,12 @@
<p v-translate> <p v-translate>
If you also to contribute to the growing of PeerTube, you can participate in its funding here: If you also to contribute to the growing of PeerTube, you can participate in its funding here:
<a href="https://soutenir.framasoft.org/en">https://soutenir.framasoft.org/en</a> <a target="_blank" rel="noopener noreferrer" href="https://soutenir.framasoft.org/en">https://soutenir.framasoft.org/en</a>
</p> </p>
<p v-translate> <p v-translate>
If you have any questions, feel free to use our forum: If you have any questions, feel free to use our forum:
<a href="https://framacolibri.org/c/peertube">https://framacolibri.org/c/peertube</a> <a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/peertube">https://framacolibri.org/c/peertube</a>
</p> </p>
<p v-translate> <p v-translate>
@ -129,11 +231,11 @@
</p> </p>
</div> </div>
</div> </article>
<div class="news"> <article class="news">
<div class="title">PeerTube crowdfunding newsletter #4</div> <div class="title" v-translate>PeerTube crowdfunding newsletter #4</div>
<div class="date">October 16, 2018</div> <div class="date" v-translate>October 16, 2018</div>
<div class="body"> <div class="body">
<p v-translate>Hello everyone!</p> <p v-translate>Hello everyone!</p>
@ -160,12 +262,12 @@
<p v-translate>We know that feature descriptions are not very amusing, so we have published a few demonstration videos:</p> <p v-translate>We know that feature descriptions are not very amusing, so we have published a few demonstration videos:</p>
<ul> <ul>
<li><a href="https://framatube.org/videos/watch/f57da309-6b92-4fe0-9267-ff8188cc050c">RSS Feeds</a></li> <li><a target="_blank" rel="noopener noreferrer" href="https://framatube.org/videos/watch/f57da309-6b92-4fe0-9267-ff8188cc050c">RSS Feeds</a></li>
<li><a href="https://framatube.org/videos/watch/dcad56d9-9fe6-45bc-96aa-3d778f6804c1">Torrent import</a></li> <li><a target="_blank" rel="noopener noreferrer" href="https://framatube.org/videos/watch/dcad56d9-9fe6-45bc-96aa-3d778f6804c1">Torrent import</a></li>
<li><a href="https://framatube.org/videos/watch/59d306c0-fc5b-493a-956a-43785693346b">YouTube video import</a></li> <li><a target="_blank" rel="noopener noreferrer" href="https://framatube.org/videos/watch/59d306c0-fc5b-493a-956a-43785693346b">YouTube video import</a></li>
<li><a href="https://framatube.org/videos/watch/edd7a468-08d5-4877-b62b-61c5f3f83ceb">Adding subtitles</a></li> <li><a target="_blank" rel="noopener noreferrer" href="https://framatube.org/videos/watch/edd7a468-08d5-4877-b62b-61c5f3f83ceb">Adding subtitles</a></li>
<li><a href="https://framatube.org/videos/watch/60c4bea4-6bb2-4fce-8d9f-8a522575419d">Advanced search</a></li> <li><a target="_blank" rel="noopener noreferrer" href="https://framatube.org/videos/watch/60c4bea4-6bb2-4fce-8d9f-8a522575419d">Advanced search</a></li>
<li><a href="https://framatube.org/videos/watch/8968dbe1-a387-433b-a20f-37fe9f3ca8d5">Video channel subscriptions</a></li> <li><a target="_blank" rel="noopener noreferrer" href="https://framatube.org/videos/watch/8968dbe1-a387-433b-a20f-37fe9f3ca8d5">Video channel subscriptions</a></li>
</ul> </ul>
<p v-translate> <p v-translate>
@ -176,8 +278,8 @@
</p> </p>
<p v-translate> <p v-translate>
We remind you that you can ask questions on <a href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You We remind you that you can ask questions on <a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You
can also contact us directly on <a href="https://contact.framasoft.org"> https://contact.framasoft.org</a>. can also contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org"> https://contact.framasoft.org</a>.
</p> </p>
<p v-translate> <p v-translate>
@ -185,11 +287,11 @@
Framasoft Framasoft
</p> </p>
</div> </div>
</div> </article>
<div class="news"> <article class="news">
<div class="title">PeerTube crowdfunding newsletter #3</div> <div class="title" v-translate>PeerTube crowdfunding newsletter #3</div>
<div class="date">September 12, 2018</div> <div class="date" v-translate>September 12, 2018</div>
<div class="body"> <div class="body">
<p v-translate>Hello everyone!</p> <p v-translate>Hello everyone!</p>
@ -206,7 +308,7 @@
<p v-translate> <p v-translate>
It was not included in the crowdfunding, but we created an "Overview" page, that displays videos of some It was not included in the crowdfunding, but we created an "Overview" page, that displays videos of some
categories/tags/channels picked randomly, to show the diversity of the videos uploaded on PeerTube. You can see categories/tags/channels picked randomly, to show the diversity of the videos uploaded on PeerTube. You can see
<a href="https://peertube3.cpy.re/videos/overview">a demonstration here</a>. <a target="_blank" rel="noopener noreferrer" href="https://peertube3.cpy.re/videos/overview">a demonstration here</a>.
</p> </p>
<p v-translate> <p v-translate>
@ -215,8 +317,8 @@
</p> </p>
<p v-translate> <p v-translate>
Regarding the crowdfunding, most of the rewards are ready: <a href="https://github.com/Chocobozzz/PeerTube">the PeerTube Regarding the crowdfunding, most of the rewards are ready: <a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube">the PeerTube
README</a> and <a href="https://joinpeertube.org/fr/hall-of-fame/">the JoinPeerTube Hall of Fame</a> show off the names of the README</a> and <a target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org/fr/hall-of-fame/">the JoinPeerTube Hall of Fame</a> show off the names of the
persons who have chosen the corresponding rewards. We will soon be able to send the personalized thank-you digital arts to persons who have chosen the corresponding rewards. We will soon be able to send the personalized thank-you digital arts to
people that gave 80€ (~93 USD) and more (and it's so beautiful that we are looking forward to it!) people that gave 80€ (~93 USD) and more (and it's so beautiful that we are looking forward to it!)
</p> </p>
@ -227,13 +329,13 @@
</p> </p>
<p v-translate> <p v-translate>
We remind you that you can track the progress of the work directly <a href="https://github.com/Chocobozzz/PeerTube"> on the git We remind you that you can track the progress of the work directly <a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube"> on the git
repository</a>, and be part of the discussions/bug reports/feature requests in the "Issues" tab. repository</a>, and be part of the discussions/bug reports/feature requests in the "Issues" tab.
</p> </p>
<p v-translate> <p v-translate>
Moreover, you can ask questions on <a href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You can also Moreover, you can ask questions on <a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You can also
contact us directly on <a href="https://contact.framasoft.org">https://contact.framasoft.org.</a> contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
</p> </p>
<p v-translate> <p v-translate>
@ -241,11 +343,11 @@
Framasoft Framasoft
</p> </p>
</div> </div>
</div> </article>
<div class="news"> <article class="news">
<div class="title">PeerTube crowdfunding newsletter #2</div> <div class="title" v-translate>PeerTube crowdfunding newsletter #2</div>
<div class="date">August 20, 2018</div> <div class="date" v-translate>August 20, 2018</div>
<div class="body"> <div class="body">
<p v-translate>Hello everyone!</p> <p v-translate>Hello everyone!</p>
@ -259,8 +361,8 @@
<p v-translate> <p v-translate>
These four features are all implemented, and can already be used on instances updated to version <em>v1.0.0-beta.10</em> (for These four features are all implemented, and can already be used on instances updated to version <em>v1.0.0-beta.10</em> (for
example <a href="https://framatube.org">https://framatube.org</a>). Regarding the subtitles support, you can test them on the example <a target="_blank" rel="noopener noreferrer" href="https://framatube.org">https://framatube.org</a>). Regarding the subtitles support, you can test them on the
<a href="https://framatube.org/videos/watch/217eefeb-883d-45be-b7fc-a788ad8507d3"> the "What is PeerTube"</a> video. <a target="_blank" rel="noopener noreferrer" href="https://framatube.org/videos/watch/217eefeb-883d-45be-b7fc-a788ad8507d3"> the "What is PeerTube"</a> video.
</p> </p>
<p v-translate> <p v-translate>
@ -270,13 +372,13 @@
</p> </p>
<p v-translate> <p v-translate>
We remind you that you can track the progress of the work directly <a href="https://github.com/Chocobozzz/PeerTube"> on the git We remind you that you can track the progress of the work directly <a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube"> on the git
repository</a>, and be part of the discussions/bug reports/feature requests in the "Issues" tab. repository</a>, and be part of the discussions/bug reports/feature requests in the "Issues" tab.
</p> </p>
<p v-translate> <p v-translate>
Moreover, you can ask questions on <a href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You can also Moreover, you can ask questions on <a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You can also
contact us directly on <a href="https://contact.framasoft.org">https://contact.framasoft.org.</a> contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
</p> </p>
<p v-translate> <p v-translate>
@ -284,11 +386,11 @@
Framasoft Framasoft
</p> </p>
</div> </div>
</div> </article>
<div class="news"> <article class="news">
<div class="title">PeerTube crowdfunding newsletter #1</div> <div class="title" v-translate>PeerTube crowdfunding newsletter #1</div>
<div class="date">July 23, 2018</div> <div class="date" v-translate>July 23, 2018</div>
<div class="body"> <div class="body">
<p v-translate>Hello everyone!</p> <p v-translate>Hello everyone!</p>
@ -326,10 +428,15 @@
Framasoft Framasoft
</p> </p>
</div> </div>
</div> </article>
</div> </div>
<div id="modal" @click="closeModal()" v-bind:class="{ 'hide-modal': hideModal }">
<img :src="modalImgSrc" />
<div class="caption">{{ modalCaption }}</div>
</div>
</main> </main>
</template> </template>
@ -376,16 +483,121 @@
word-break: break-word; word-break: break-word;
} }
figure {
margin: 30px 0;
border: 10px solid #fff3ea;
border-bottom: 0;
img {
cursor: pointer;
max-width: 100%;
height: auto;
margin-bottom: 5px;
}
figcaption {
font-size: 14px;
background: #fff3ea;
text-align: center;
padding: 10px 0;
}
}
@media screen and (max-width: $small-screen) { @media screen and (max-width: $small-screen) {
padding: 10px; padding: 10px;
} }
} }
#modal {
&.hide-modal {
display: none;
}
position: fixed;
z-index: 1;
padding-top: 5vh;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
img {
margin: auto;
display: block;
height: 90%;
width: auto;
}
.caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px;
}
img,
.caption {
animation-name: zoom;
animation-duration: 0.6s;
}
}
@keyframes zoom {
from { transform:scale(0) }
to { transform:scale(1) }
}
</style> </style>
<script> <script>
export default { export default {
components: { }, components: { },
data: function () {
return {
imageLocales: {
'release-1.4': {
en: true,
fr: true
}
},
hideModal: true,
modalImgSrc: '',
modalCaption: ''
}
},
methods: {
buildNewsImgUrl: function (newsId, img) {
let locale = 'en'
const current = this.$language.current.toLowerCase().split('_')[0]
if (this.imageLocales[current]) locale = current
return this.buildImgUrl(`news/${newsId}/${locale}/${img}`)
},
openModal: function (event) {
const img = event.target
this.hideModal = false
this.modalImgSrc = img.src
this.modalCaption = img.alt
},
closeModal: function () {
this.hideModal = true
this.modalImgSrc = ''
this.modalCaption = ''
}
},
metaInfo: function () { metaInfo: function () {
return { return {
title: this.$gettext('News') title: this.$gettext('News')