Add french content selection

src/components/ContentSelection.vue

@@ -2,7 +2,7 @@
   <div id="content-selection">
 
     <div class="left">
-      <img :src="thumbnailUrl" alt="thumbnail"/>
+      <img :src="buildImgUrl('content-selection-thumbnails/' + thumbnailName)" alt="thumbnail"/>
 
       <a target="_blank" rel="noopener noreferrer" :href="url" class="jpt-button jpt-button-medium">
         <template v-if="type === 'video'">
@@ -98,6 +98,8 @@
     }
 
     .right {
+      min-height: 170px;
+
       .title {
         font-size: 24px;
         font-weight: $font-semibold;
@@ -114,7 +116,6 @@
 
       .description {
         font-size: 16px;
-        min-height: 170px;
       }
 
       .tags {
@@ -142,7 +143,7 @@
     props: {
       type: String,
       title: String,
-      thumbnailUrl: String,
+      thumbnailName: String,
       url: String,
       tags: Array,
       description: String

src/components/ContentSelections.vue

@@ -2,7 +2,7 @@
   <div id="content-selections">
     <div class="content-selection" v-for="contentSelection in getContentSelections()" :key="contentSelection.url">
       <content-selection :type="contentSelection.type" :title="contentSelection.title"
-                         :thumbnail-url="contentSelection.thumbnailUrl" :url="contentSelection.url" :tags="contentSelection.tags"
+                         :thumbnail-name="contentSelection.thumbnailName" :url="contentSelection.url" :tags="contentSelection.tags"
                          :description="contentSelection.description"
       >
       </content-selection>

src/components/icons/IconChannel.vue

@@ -1,10 +1,12 @@
 <template>
-  <svg width="41px" height="20px" viewBox="0 0 41 20" version="1.1" xmlns="http://www.w3.org/2000/svg"
-       xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="icone/chaine" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+  <svg width="21" height="20" viewBox="0 0 21 20">
+    <g
+      id="icone/chaine"
+      style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1"
+      transform="translate(-11)">
       <path
-        d="M30.76625,6 L12.23375,6 C11.5523687,6 11,6.53563024 11,7.19636364 L11,18.8036364 C11,19.4643698 11.5523687,20 12.23375,20 L30.76625,20 C31.4476313,20 32,19.4643698 32,18.8036364 L32,7.19636364 C32,6.53563024 31.4476313,6 30.76625,6 Z M31,19 L12,19 L12,7 L31,7 L31,19 Z M30,0.5 L30,1 L13,1 L13,0.5 C13,0.223857625 13.3171316,0 13.7083333,0 L29.2916667,0 C29.6828684,0 30,0.223857625 30,0.5 Z M31,3.5 L31,4 L12,4 L12,3.5 C12,3.22385763 12.3038068,3 12.6785714,3 L30.3214286,3 C30.6961932,3 31,3.22385763 31,3.5 Z M17.5259363,16.8151256 C17.7152321,16.9337842 17.9355568,16.9979073 18.161158,17 C18.32374,16.999634 18.4843857,16.9658752 18.6324515,16.9009601 L25.3056947,14.0222015 C25.7272789,13.8451231 26,13.4431299 26,12.9987896 C26,12.5544492 25.7272789,12.1524561 25.3056947,11.9753777 L18.6324515,9.09661903 C18.2736828,8.94259679 17.8586994,8.97423234 17.529341,9.18071277 C17.1999826,9.3871932 17.0008478,9.74055892 17,10.1200309 L17,15.8775482 C17.0007047,16.2557699 17.1984104,16.6082163 17.5259363,16.8151256 Z M18,10.1681475 C17.9995749,10.1022855 18.0354749,10.0410683 18.094505,10.0070023 C18.1298416,9.9976659 18.1671697,9.9976659 18.2025064,10.0070023 C18.2291649,10.0012002 18.2568489,10.0012002 18.2835074,10.0070023 L24.8783413,12.8109285 C24.954566,12.8406947 25.0031305,12.912834 24.9998429,12.9914111 C25.0022616,13.0682052 24.9535047,13.1380438 24.8783413,13.1654479 L18.2835074,15.9758199 C18.2250299,16.00806 18.1529826,16.00806 18.094505,15.9758199 C18.0373387,15.940063 18.0020587,15.8799028 18,15.8146747 L18,10.1681475 Z"
-        id="Mask" fill="#000000" fill-rule="nonzero"></path>
+        d="M 30.76625,6 H 12.23375 C 11.552369,6 11,6.5356302 11,7.1963636 V 18.803636 C 11,19.46437 11.552369,20 12.23375,20 h 18.5325 C 31.447631,20 32,19.46437 32,18.803636 V 7.1963636 C 32,6.5356302 31.447631,6 30.76625,6 Z M 31,19 H 12 V 7 H 31 Z M 30,0.5 V 1 H 13 V 0.5 C 13,0.22385763 13.317132,0 13.708333,0 H 29.291667 C 29.682868,0 30,0.22385763 30,0.5 Z m 1,3 V 4 H 12 V 3.5 C 12,3.2238576 12.303807,3 12.678571,3 H 30.321429 C 30.696193,3 31,3.2238576 31,3.5 Z M 17.525936,16.815126 c 0.189296,0.118658 0.409621,0.182781 0.635222,0.184874 0.162582,-3.66e-4 0.323228,-0.03412 0.471293,-0.09904 l 6.673244,-2.878758 C 25.727279,13.845123 26,13.44313 26,12.99879 26,12.554449 25.727279,12.152456 25.305695,11.975378 L 18.632451,9.096619 C 18.273683,8.9425968 17.858699,8.9742323 17.529341,9.1807128 17.199983,9.3871932 17.000848,9.7405589 17,10.120031 v 5.757517 c 7.05e-4,0.378222 0.19841,0.730668 0.525936,0.937578 z M 18,10.168148 c -4.25e-4,-0.06586 0.03548,-0.12708 0.09451,-0.161146 0.03534,-0.00934 0.07266,-0.00934 0.108001,0 0.02666,-0.0058 0.05434,-0.0058 0.081,0 l 6.594834,2.803926 c 0.07623,0.02977 0.124789,0.101906 0.121502,0.180483 0.0024,0.07679 -0.04634,0.146633 -0.121502,0.174037 l -6.594834,2.810372 c -0.05848,0.03224 -0.130524,0.03224 -0.189002,0 -0.05717,-0.03576 -0.09245,-0.09592 -0.09451,-0.161145 z"
+        style="fill:#000000;fill-rule:nonzero"/>
     </g>
   </svg>
 </template>

src/mixins/ContentSelectionsEN.js

@@ -5,9 +5,9 @@ export default {
         {
           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: ['privacy', 'documentary', 'capitalisme-de-surveillance'],
+          thumbnailName: 'nothing-to-hide.jpg',
+          url: 'https://media.zat.im/videos/watch/35badfed-5322-48ac-b5c1-71b1ad88262e',
+          tags: [ '#privacy', '#documentary' ],
           description: 'Nothing to hide (2017) is a Franco-German feature-length documentary by Marc Meillassoux and Mihaela Gladovic, about how mass surveillance affects individuals and society. Taking a critical look at the laws allowing State surveillance that were implemented by several countries in the past few years, we are reminded of how important the debate about usage of personal data is and how it questions the very basis of democracy.'
         }
       ]

src/mixins/ContentSelectionsFR.js

@@ -5,10 +5,55 @@ export default {
         {
           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: ['privacy', 'documentaire', 'capitalisme-de-surveillance'],
+          thumbnailName: 'nothing-to-hide.jpg',
+          url: 'https://media.zat.im/videos/watch/35badfed-5322-48ac-b5c1-71b1ad88262e',
+          tags: [ '#privacy', '#documentaire', '#capitalisme-de-surveillance' ],
           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.'
+        },
+
+        {
+          type: 'video',
+          title: 'Démocratie(s)',
+          thumbnailName: 'democraties.jpg',
+          tags: [ '#democratie', '#DataGueule', '#politique', '#France', '#elections' ],
+          description: 'Ce film d\'Henri Poulain, Julien Goetz et Sylvain Lapoix (les créateurs de la série DataGueule) met en évidence les travers de notre démocratie représentative et propose des  alternatives qui fonctionnent et dont nous pourrions nous inspirer. Objectif : explorer son passé pour mieux comprendre cette "crise démocratique" qui est sur toutes les lèvres.',
+          url: 'https://peertube.datagueule.tv/videos/watch/0b04f13d-1e18-4f1d-814e-4979aa7c9c44'
+        },
+
+        {
+          type: 'channel',
+          title: 'DataGueule',
+          thumbnailName: 'datagueule.jpg',
+          description: 'DataGueule, c’est une websérie documentaire créée en 2014 qui présente à chaque épisode, de façon simple et imagée, une problématique sociétale à l’aide de données statistiques soigneusement sélectionnées et commentées (les datas). Un⋅e invité⋅e spécialiste du thème sélectionné enrichit de façon complémentaire l’argumentaire chiffré déjà solide, tout en proposant des solutions qui profiteraient au plus grand nombre. Un excellent moyen de se sensibiliser aux questions et problématiques qui secouent notre civilisation !',
+          tags: [ '#DataJournalisme', '#documentaire', '#société' ],
+          url: 'https://peertube.datagueule.tv/video-channels/c2fbac48-b069-42dd-b24c-7969c14a1374/videos'
+        },
+
+        {
+          type: 'channel',
+          title: 'Hygiène Mentale',
+          thumbnailName: 'hygiene-mentale.jpg',
+          description: 'La chaîne Hygiène Mentale se donne pour objectif de nous apprendre à nous forger un esprit critique face aux flux permanents d’informations qui prétendent tous détenir les clés de la vérité. En nous dispensant divers conseils basiques pour ne pas nous laisser tromper par des arguments fallacieux, Christophe Michel (le créateur de la chaîne) nous permet de développer des méthodes d\'autodéfense intellectuelle et de nous faire découvrir les instruments critiques pour nous protéger de la désinformation.',
+          tags: [ '#VulgarisationScientifique', '#zététique', '#désinformation' ],
+          url: 'https://skeptikon.fr/video-channels/ecf58044-ecfd-46b8-bf6f-d8206bbace38/videos'
+        },
+
+        {
+          type: 'instance',
+          title: 'Académie de Lyon',
+          thumbnailName: 'academie-lyon.jpg',
+          description: 'L\'instance de l\'Académie de Lyon propose à tous les enseignants des établissements scolaires du territoire d\'héberger les vidéos produites lors de leurs activités pédagogiques. On y trouve donc des vidéos sur des thèmes aussi variés que les mathématiques, l\'informatique et les enjeux du numérique,  les méthodes pédagogiques, la coiffure ou la cuisine. Et les formes aussi sont très variables : tutoriels, captations, reportages, témoignages, interviews, etc.',
+          tags: [ '#enseignement', '#pédagogie', '#tutoriel' ],
+          url: 'https://tube.ac-lyon.fr/'
+        },
+
+        {
+          type: 'instance',
+          title: 'Colibri Outils Libres',
+          thumbnailName: 'colibris.jpg',
+          description: 'Cette instance, maintenue et modérée par l\'association Colibris, diffuse des vidéos sur les thèmes de la transition écologique. On y retrouve les nombreuses vidéos utilisées dans les différents Moocs créés par l\'association, des reportages et documentaires sur la nature et l\'écologie, mais aussi des vidéos de Jean-Michel Cornu de la chaîne Trucs d\'animation sur les techniques d\'animation et de facilitation.',
+          tags: [ '#écologie', '#permaculture', '#monnaies' ],
+          url: 'https://video.colibris-outilslibres.org/videos/local'
         }
       ]
     }

src/scss/main.scss

@@ -319,6 +319,7 @@ p > a {
   margin-right: 20px;
   font-size: 14px;
   min-width: 140px;
+  padding: 0 10px;
   height: 25px;
   display: flex;
   align-items: center;