Add ability to reset originallyPublishedAt

7 files changed, 56 insertions, 46 deletions

diff --git a/client/src/app/+search/search-filters.component.html b/client/src/app/+search/search-filters.component.html
index ed0632a4d..5b9237379 100644
--- a/client/src/app/+search/search-filters.component.html
+++ b/client/src/app/+search/search-filters.component.html
@@ -226,7 +226,7 @@
   </div>
 
   <div class="submit-button">
-    <button i18n class="reset-button" (click)="reset()" *ngIf="advancedSearch.size()">
+    <button i18n class="reset-button me-3" (click)="reset()" *ngIf="advancedSearch.size()">
       Reset
     </button>
 
diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss
index c55e59310..fd997d33b 100644
--- a/client/src/app/+search/search-filters.component.scss
+++ b/client/src/app/+search/search-filters.component.scss
@@ -34,27 +34,3 @@ input[type=submit] {
 .submit-button {
   text-align: end;
 }
-
-.reset-button {
-  @include peertube-button;
-  @include margin-right(1rem);
-
-  font-weight: $font-semibold;
-  display: inline-block;
-  padding: 0 10px;
-  white-space: nowrap;
-  background: transparent;
-}
-
-.reset-button-small {
-  font-size: 80%;
-  height: unset;
-  line-height: unset;
-  margin: unset;
-  margin-bottom: 0.5rem;
-}
-
-.label-container {
-  display: flex;
-  white-space: nowrap;
-}
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
index ea9909612..f3c1f1634 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
@@ -365,14 +365,18 @@
             </div>
 
             <div class="form-group originally-published-at">
-              <label i18n for="originallyPublishedAt">Original publication date</label>
-              <my-help>
-                <ng-template ptTemplate="preHtml">
-                  <ng-container i18n>
-                    This is the date when the content was originally published (e.g. the release date for a film)
-                  </ng-container>
-                </ng-template>
-              </my-help>
+              <div class="label-container">
+                <label i18n for="originallyPublishedAt">Original publication date</label>
+
+                <button i18n class="reset-button reset-button-small" (click)="resetField('originallyPublishedAt')" *ngIf="hasPublicationDate()">
+                  Reset
+                </button>
+              </div>
+
+              <div class="form-group-description" i18n>
+                This is the date when the content was originally published (e.g. the release date for a film)
+              </div>
+
               <p-calendar
                 id="originallyPublishedAt" formControlName="originallyPublishedAt" [dateFormat]="calendarDateFormat" [firstDayOfWeek]="0"
                 [showTime]="true" [hideOnDateTimeSelect]="true" [monthNavigator]="true" [yearNavigator]="true" [yearRange]="myYearRange"
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
index b0c1352f3..898d3b0a6 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
@@ -264,6 +264,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     if (this.schedulerInterval) clearInterval(this.schedulerInterval)
   }
 
+  // ---------------------------------------------------------------------------
+
   getExistingCaptions () {
     return this.videoCaptions
                .filter(c => c.action !== 'REMOVE')
@@ -312,6 +314,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     modalRef.componentInstance.captionEdited.subscribe(this.onCaptionEdited.bind(this))
   }
 
+  // ---------------------------------------------------------------------------
+
   isSaveReplayAllowed () {
     return this.serverConfig.live.allowReplay
   }
@@ -328,6 +332,18 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     return this.serverConfig.live.latencySetting.enabled
   }
 
+  hasPublicationDate () {
+    return !!this.form.value['originallyPublishedAt']
+  }
+
+  // ---------------------------------------------------------------------------
+
+  resetField (name: string) {
+    this.form.patchValue({ [name]: null })
+  }
+
+  // ---------------------------------------------------------------------------
+
   isPluginFieldHidden (pluginField: PluginField) {
     if (typeof pluginField.commonOptions.hidden !== 'function') return false
 
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.html b/client/src/app/shared/shared-forms/reactive-file.component.html
index 8e38697e4..33bb88f1f 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.html
+++ b/client/src/app/shared/shared-forms/reactive-file.component.html
@@ -13,7 +13,7 @@
 
   <div class="filename" *ngIf="displayFilename === true && filename">{{ filename }}</div>
 
-  <button *ngIf="displayReset && filename" i18n class="reset-button" (click)="reset()">
+  <button *ngIf="displayReset && filename" i18n class="reset-button reset-button-small ms-2" (click)="reset()">
     Reset
   </button>
 </div>
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.scss b/client/src/app/shared/shared-forms/reactive-file.component.scss
index f9ba5805a..a0afe1eee 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.scss
+++ b/client/src/app/shared/shared-forms/reactive-file.component.scss
@@ -19,15 +19,4 @@
 
     font-weight: $font-semibold;
   }
-
-  .reset-button {
-    @include peertube-button;
-    @include grey-button;
-
-    font-size: 80%;
-    margin-left: 5px;
-    line-height: initial;
-    padding: 2px 5px;
-    height: auto;
-  }
 }
diff --git a/client/src/sass/class-helpers/_forms.scss b/client/src/sass/class-helpers/_forms.scss
index 1e78df947..4e5c98aa8 100644
--- a/client/src/sass/class-helpers/_forms.scss
+++ b/client/src/sass/class-helpers/_forms.scss
@@ -49,7 +49,32 @@
   margin-top: 10px;
 }
 
-label+.form-group-description {
+// Useful with a "reset" button
+.label-container {
+  display: flex;
+  white-space: nowrap;
+  align-items: baseline;
+}
+
+label + .form-group-description,
+.label-container + .form-group-description {
   margin-bottom: 10px;
   margin-top: 0;
 }
+
+.reset-button {
+  @include peertube-button;
+  @include grey-button;
+
+  height: auto;
+
+  &.reset-button-small {
+    font-size: 80%;
+    padding: 2px 5px;
+    margin: 0 0.25rem;
+    height: fit-content;
+    line-height: initial;
+  }
+}
+
+