Move watch attributes in a dedicated component

6 files changed, 124 insertions, 1 deletions

diff --git a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.scss b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.scss
index 109c31c57..7b8a876ab 100644
--- a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.scss
@@ -1,3 +1,6 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
 .alert {
   text-align: center;
   border-radius: 0;
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/index.ts b/client/src/app/+videos/+video-watch/shared/metadata/index.ts
index 7f7ee797b..de9abe97e 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/index.ts
+++ b/client/src/app/+videos/+video-watch/shared/metadata/index.ts
@@ -1,2 +1,3 @@
+export * from './video-attributes.component'
 export * from './video-avatar-channel.component'
 export * from './video-description.component'
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html
new file mode 100644
index 000000000..598bc485d
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html
@@ -0,0 +1,54 @@
+<div class="video-attribute">
+  <span i18n class="video-attribute-label">Privacy</span>
+  <span class="video-attribute-value">{{ video.privacy.label }}</span>
+</div>
+
+<div *ngIf="video.isLocal === false" class="video-attribute">
+  <span i18n class="video-attribute-label">Origin</span>
+  <a class="video-attribute-value" target="_blank" rel="noopener noreferrer" [href]="getVideoUrl()">{{ video.originInstanceHost }}</a>
+</div>
+
+<div *ngIf="!!video.originallyPublishedAt" class="video-attribute">
+  <span i18n class="video-attribute-label">Originally published</span>
+  <span class="video-attribute-value">{{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }}</span>
+</div>
+
+<div class="video-attribute">
+  <span i18n class="video-attribute-label">Category</span>
+  <span *ngIf="!video.category.id" class="video-attribute-value">{{ video.category.label }}</span>
+  <a
+    *ngIf="video.category.id" class="video-attribute-value"
+    [routerLink]="[ '/search' ]" [queryParams]="{ categoryOneOf: [ video.category.id ] }"
+  >{{ video.category.label }}</a>
+</div>
+
+<div class="video-attribute">
+  <span i18n class="video-attribute-label">Licence</span>
+  <span *ngIf="!video.licence.id" class="video-attribute-value">{{ video.licence.label }}</span>
+  <a
+    *ngIf="video.licence.id" class="video-attribute-value"
+    [routerLink]="[ '/search' ]" [queryParams]="{ licenceOneOf: [ video.licence.id ] }"
+  >{{ video.licence.label }}</a>
+</div>
+
+<div class="video-attribute">
+  <span i18n class="video-attribute-label">Language</span>
+  <span *ngIf="!video.language.id" class="video-attribute-value">{{ video.language.label }}</span>
+  <a
+    *ngIf="video.language.id" class="video-attribute-value"
+    [routerLink]="[ '/search' ]" [queryParams]="{ languageOneOf: [ video.language.id ] }"
+  >{{ video.language.label }}</a>
+</div>
+
+<div class="video-attribute video-attribute-tags">
+  <span i18n class="video-attribute-label">Tags</span>
+  <a
+    *ngFor="let tag of getVideoTags()"
+    class="video-attribute-value" [routerLink]="[ '/search' ]" [queryParams]="{ tagsOneOf: [ tag ] }"
+  >{{ tag }}</a>
+</div>
+
+<div class="video-attribute" *ngIf="!video.isLive">
+  <span i18n class="video-attribute-label">Duration</span>
+  <span class="video-attribute-value">{{ video.duration | myDurationFormatter }}</span>
+</div>
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss
new file mode 100644
index 000000000..45190a3e3
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss
@@ -0,0 +1,40 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.video-attribute {
+  font-size: 13px;
+  display: block;
+  margin-bottom: 12px;
+}
+
+.video-attribute-label {
+  @include padding-right(5px);
+
+  min-width: 142px;
+  display: inline-block;
+  color: pvar(--greyForegroundColor);
+  font-weight: $font-bold;
+}
+
+a.video-attribute-value {
+  @include disable-default-a-behaviour;
+  color: pvar(--mainForegroundColor);
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+.video-attribute-tags {
+  .video-attribute-value:not(:nth-child(2)) {
+    &::before {
+      content: ', ';
+    }
+  }
+}
+
+@media screen and (max-width: 1600px) {
+  .video-attributes .video-attribute {
+    margin-bottom: 5px;
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.ts b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.ts
new file mode 100644
index 000000000..5cb77f0c8
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core'
+import { VideoDetails } from '@app/shared/shared-main'
+
+@Component({
+  selector: 'my-video-attributes',
+  templateUrl: './video-attributes.component.html',
+  styleUrls: [ './video-attributes.component.scss' ]
+})
+export class VideoAttributesComponent {
+  @Input() video: VideoDetails
+
+  getVideoUrl () {
+    if (!this.video.url) {
+      return this.video.originInstanceUrl + VideoDetails.buildWatchUrl(this.video)
+    }
+
+    return this.video.url
+  }
+
+  getVideoTags () {
+    if (!this.video || Array.isArray(this.video.tags) === false) return []
+
+    return this.video.tags
+  }
+}
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
index 0a4d6bfd1..8b3ed4964 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
@@ -130,7 +130,7 @@ export class VideoWatchPlaylistComponent {
 
         setTimeout(() => {
           document.querySelector('.element-' + this.currentPlaylistPosition).scrollIntoView(false)
-        }, 0)
+        })
 
         return
       }