Différences

Ci-dessous, les différences entre deux révisions de la page.

--- txs:peertube-a18:issue_946 [2019/01/12 16:07] – clement.brizard
+++ txs:peertube-a18:issue_946 [2019/01/12 17:22] – clement.brizard
@@ Ligne 23: / Ligne 23: @@
 Quand on regarde une vidéo, cette propriété est affichée dans les métadonnées (exemple d'autres métadonnées : catégorie, licence, langage).
+Il a été décidé en discutant avec les autres contributeurs que si la date n'est pas renseignée, on enregistre la valeur ''null''.
 ===== Résolution =====
 **Lien Pull Request** : https://github.com/Chocobozzz/PeerTube/pull/1285
+==== Créer le fichier de migration ====
+Nous allons créer une nouvelle propriété aux vidéos. Il est donc nécessaire de mettre à jour la base de données. Pour ce faire, on crée un fichier de migration. Ainsi, toutes les vidéos créées avant l'ajout de notre //feature// vont elles aussi posséder la nouvelle propriété, ce qui permettra de l'afficher. Dans le fichier de migration, nous utilisons la valeur du ''publishedAt'', à savoir la date de publication de la vidéo.
+[[https://github.com/Chocobozzz/PeerTube/pull/1285/commits/94a680c095b3007179820ac091189f639dd39e6b#diff-7b785cc2737486688d72d6a451fdfcdd | Voir le commit]]
+==== Modifier les modèles de données ====
+Le fait d'ajouter une nouvelle variable nécessite aussi de modifier les modèles de données, aussi bien côté client que côté serveur. Selon le contexte, le ''model'' n'est pas le même. Par exemple, à la création d'une vidéo, on ne possède pas toutes ses propriétés. Par exemple, il existe un modèle différent pour la création d'une vidéo et sa modification : ''video-create.model.ts'' et ''video-update.model.ts''.
+[[https://github.com/Chocobozzz/PeerTube/pull/1285/commits/c80341655fce5e70ad6da7d812e2ddeb1f8ef7f2|Voir le commit]]
+==== Permettre de renseigner la nouvelle date ====
+La nouvelle date doit pouvoir être renseignée à l'//upload// d'une vidéo. Elle doit également pouvoir être modifiée plus tard si l'utilisateur le souhaite.
+Le fichier HTML est le même pour ces deux usages : [[https://github.com/Chocobozzz/PeerTube/pull/1285/commits/1e74f19a2179df7fc2e0da73163ef2c3118cbecb#diff-c91ab53cc2c55fddca20c20f7b90a33f|video-edit.component.html]]. On doit donc déjà modifier ce fichier, en ajoutant un nouveau champ Angular de type ''p-calendar'' pour sélectionner la date :
+<code javascript>
+<p-calendar
+    id="originallyPublishedAt" formControlName="originallyPublishedAt" [dateFormat]="calendarDateFormat [locale]="calendarLocale" [showTime]="true" [hideOnDateTimeSelect]="true" [monthNavigator]="true [yearNavigator]="true" [yearRange]="myYearRange">
+</p-calendar>
+</code>
+Aperçu :
+{{:txs:peertube-a18:calendar.png?250|Aperçu de la sélection de date}}
+L'autre principal fichier à modifier est [[https://github.com/Chocobozzz/PeerTube/pull/1285/commits/1e74f19a2179df7fc2e0da73163ef2c3118cbecb#diff-a414a11e12bafa3d8555cc29f3207f7c|celui]], côté serveur, qui va enregistrer la nouvelle vidéo, ou la mettre à jour selon le cas. Comme pour les autres champs, si la valeur renseignée est différente de celle présente en base de données, alors on effectue la mise à jour.
+<code javascript>
+if (videoInfoToUpdate.originallyPublishedAt !== undefined && videoInfoToUpdate.originallyPublishedAt !== null) {
+    videoInstance.set('originallyPublishedAt', videoInfoToUpdate.originallyPublishedAt)
+}
+</code>
+Au niveau du comportement, si la date n'est pas renseignée par l'utilisateur, il a été décidé de lui donner la valeur ''null''. Ceci est permis en autorisant la valeur à être nulle :
+<code javascript>
+function isVideoOriginallyPublishedAtValid (value: string | null) {
+    return value === null || isDateValid(value)
+}
+</code>
+[[https://github.com/Chocobozzz/PeerTube/pull/1285/commits/1e74f19a2179df7fc2e0da73163ef2c3118cbecb|Voir le commit]]
+==== Afficher la nouvelle date ====
+Il ne reste plus qu'à permettre que cette nouvelle date soit affichée. Elle doit être visible quand l'utilisateur regarde la vidéo. On modifie donc le fichier HTML correspondant, et -- c'était nécessaire --, son fichier CSS associé. Dans le fichier HTML, on utilise l'affichage conditionnel permis par Angular avec la clause ''*ngIf'' en paramètre de la balise :
+<code javascript>
+<div class="video-attribute">
+    <span i18n class="video-attribute-label">Published on</span>
+    <span *ngIf="!video.originallyPublishedAt" class="video-attribute-value">Unknown</span>
+    <span *ngIf="video.originallyPublishedAt" class="video-attribute-value">
+        {{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }}
+    </span>
+</div>
+</code>
+[[https://github.com/Chocobozzz/PeerTube/pull/1285/commits/2fb583e0f4b5aebc2e041890120edf973a0d19d0|Voir le commit]]
 ===== Démo =====
-Ajout de la date de publication originale lors de l'upload :
+Dans cette démo, on ajoute d'abord une vidéo en renseignant sa date de publication originale, puis une autre sans la renseigner :
-{{ :txs:peertube-a18:screencast_ajout_small.webm?853x480 }}
+{{ :txs:peertube-a18:demo.webm?853x480 | Démo ajout de date}}
 ===== Pistes ouvertes par la résolution de cette issue =====