diff --git a/client/src/app/+accounts/account-videos/account-videos.component.ts b/client/src/app/+accounts/account-videos/account-videos.component.ts
index 7535eef08..1814ef455 100644
--- a/client/src/app/+accounts/account-videos/account-videos.component.ts
+++ b/client/src/app/+accounts/account-videos/account-videos.component.ts
@@ -23,7 +23,6 @@ import { Notifier, ServerService } from '@app/core'
})
export class AccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
titlePage: string
- marginContent = false // Disable margin
loadOnInit = false
private account: Account
diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html
index c4e5be0d6..5ef497fa7 100644
--- a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html
+++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html
@@ -6,15 +6,7 @@
-
-
-
-
{{ video.name }}
-
{{ video.account.displayName }}
-
{{ video.publishedAt | myFromNow }}
-
Privacy: {{ video.privacy.label }}
-
Sensitive: {{ video.nsfw }}
-
+
@@ -30,13 +22,12 @@
-
-
-
+
diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss
index a73c17eb9..e43a2aa7b 100644
--- a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss
+++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.scss
@@ -46,26 +46,8 @@
margin-left: 12px;
}
- my-video-thumbnail {
- margin-right: 10px;
- }
-
- .video-info {
+ my-video-miniature {
flex-grow: 1;
-
- .video-info-name {
- @include disable-default-a-behaviour;
-
- color: var(--mainForegroundColor);
- display: block;
- width: fit-content;
- font-size: 16px;
- font-weight: $font-semibold;
- }
- }
-
- .video-buttons {
- min-width: 190px;
}
}
@@ -73,21 +55,12 @@
.video {
flex-direction: column;
height: auto;
- text-align: center;
- .video-info-name {
- margin: auto;
- }
-
- input[type=checkbox] {
+ .checkbox-container {
display: none;
}
- my-video-thumbnail {
- margin-right: 0;
- }
-
- .video-buttons {
+ my-button {
margin-top: 10px;
}
}
diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts
index af68d7e2e..d66a6dcae 100644
--- a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts
+++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.ts
@@ -1,14 +1,14 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
-import { Location } from '@angular/common'
+import { Component, OnDestroy, OnInit } from '@angular/core'
import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Router, ActivatedRoute } from '@angular/router'
+import { ActivatedRoute, Router } from '@angular/router'
import { AbstractVideoList } from '@app/shared/video/abstract-video-list'
import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
-import { Notifier, AuthService, ServerService } from '@app/core'
+import { AuthService, Notifier, ServerService } from '@app/core'
import { Video } from '@shared/models'
import { VideoBlacklistService } from '@app/shared'
import { immutableAssign } from '@app/shared/misc/utils'
import { ScreenService } from '@app/shared/misc/screen.service'
+import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
@Component({
selector: 'my-video-auto-blacklist-list',
@@ -24,6 +24,17 @@ export class VideoAutoBlacklistListComponent extends AbstractVideoList implement
totalItems: null
}
+ miniatureDisplayOptions: MiniatureDisplayOptions = {
+ date: true,
+ views: false,
+ by: true,
+ privacyLabel: false,
+ privacyText: true,
+ state: false,
+ blacklistInfo: false,
+ nsfw: true
+ }
+
constructor (
protected router: Router,
protected route: ActivatedRoute,
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.html b/client/src/app/+my-account/my-account-history/my-account-history.component.html
index 00ee5fbd1..4b94490a0 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.html
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.html
@@ -15,12 +15,6 @@
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.scss b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
index e03d81055..af6395fb1 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.scss
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
@@ -34,63 +34,7 @@
.video {
@include row-blocks;
- my-video-thumbnail {
- margin-right: 10px;
- }
-
- .video-info {
+ .my-video-miniature {
flex-grow: 1;
-
- .video-info-name {
- @include disable-default-a-behaviour;
-
- color: var(--mainForegroundColor);
- display: block;
- width: fit-content;
- font-size: 18px;
- font-weight: $font-semibold;
- }
-
- .video-info-date-views {
- font-size: 14px;
- }
-
- .video-info-account {
- @include disable-default-a-behaviour;
- @include ellipsis;
-
- display: block;
- width: fit-content;
- font-size: 14px;
- color: $grey-foreground-color;
-
- &:hover {
- color: $grey-foreground-hover-color;
- }
- }
- }
-}
-
-@media screen and (max-width: $small-view) {
- .video {
- flex-direction: column;
- height: auto;
- text-align: center;
-
- .video-info-name {
- margin: auto;
- }
-
- input[type=checkbox] {
- display: none;
- }
-
- my-video-thumbnail {
- margin-right: 0;
- }
-
- .video-buttons {
- margin-top: 10px;
- }
}
}
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index 1f3ac0005..3a4054de8 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -6,17 +6,7 @@
-
-
-
-
{{ video.name }}
-
{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
-
{{ video.privacy.label }}{{ getStateLabel(video) }}
-
- Blacklisted
- {{ video.blacklistedReason }}
-
-
+
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index d2df6f290..405ded3f8 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -46,44 +46,8 @@
margin-left: 12px;
}
- my-video-thumbnail {
- margin-right: 10px;
- }
-
- .video-info {
+ my-video-miniature {
flex-grow: 1;
-
- .video-info-name {
- @include disable-default-a-behaviour;
-
- color: var(--mainForegroundColor);
- display: block;
- width: fit-content;
- font-size: 16px;
- font-weight: $font-semibold;
- }
-
- .video-info-date-views,
- .video-info-privacy,
- .video-info-blacklisted {
- font-size: 13px;
-
- &.video-info-privacy,
- &.video-info-blacklisted .blacklisted-label {
- font-weight: $font-semibold;
- }
-
- &.video-info-blacklisted {
- color: red;
-
- .blacklisted-reason {
- &::before {
- content: ' - ';
- }
- }
- }
-
- }
}
.video-buttons {
@@ -99,20 +63,11 @@
.video {
flex-direction: column;
height: auto;
- text-align: center;
- .video-info-name {
- margin: auto;
- }
-
- input[type=checkbox] {
+ .checkbox-container {
display: none;
}
- my-video-thumbnail {
- margin-right: 0;
- }
-
.video-buttons {
margin-top: 10px;
}
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index eb5096a5e..bbe86af73 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -14,6 +14,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
import { VideoPrivacy, VideoState } from '../../../../../shared/models/videos'
import { ScreenService } from '@app/shared/misc/screen.service'
import { VideoChangeOwnershipComponent } from './video-change-ownership/video-change-ownership.component'
+import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
@Component({
selector: 'my-account-videos',
@@ -30,6 +31,15 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
itemsPerPage: 5,
totalItems: null
}
+ miniatureDisplayOptions: MiniatureDisplayOptions = {
+ date: true,
+ views: true,
+ by: false,
+ privacyLabel: false,
+ privacyText: true,
+ state: true,
+ blacklistInfo: true
+ }
constructor (
protected router: Router,
diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
index 8af31000e..2045a095d 100644
--- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
+++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
@@ -23,7 +23,6 @@ import { Notifier, ServerService } from '@app/core'
})
export class VideoChannelVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
titlePage: string
- marginContent = false // Disable margin
loadOnInit = false
private videoChannel: VideoChannel
diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html
index 82a5f0f26..da2ace54d 100644
--- a/client/src/app/search/search.component.html
+++ b/client/src/app/search/search.component.html
@@ -48,13 +48,7 @@
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index e0509ee15..4e3ce1c96 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -55,51 +55,14 @@
padding-bottom: 20px;
margin-bottom: 20px;
- &.video {
-
- my-video-thumbnail {
- margin-right: 10px;
- }
-
- .video-info {
- flex-grow: 1;
-
- .video-info-name {
- @include disable-default-a-behaviour;
-
- color: var(--mainForegroundColor);
- display: block;
- width: fit-content;
- font-size: 18px;
- font-weight: $font-semibold;
- }
-
- .video-info-date-views {
- font-size: 14px;
- }
-
- .video-info-account {
- @include disable-default-a-behaviour;
- @include ellipsis;
-
- display: block;
- width: fit-content;
- font-size: 14px;
- color: $grey-foreground-color;
-
- &:hover {
- color: $grey-foreground-hover-color;
- }
- }
- }
- }
-
&.video-channel {
-
img {
- @include avatar(120px);
+ $image-size: 130px;
+ $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature
- margin: 0 50px 0 40px;
+ @include avatar($image-size);
+
+ margin: 0 ($margin-size + 10) 0 $margin-size;
}
.video-channel-info {
diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts
index c4a4b1fde..a3383ed8a 100644
--- a/client/src/app/search/search.component.ts
+++ b/client/src/app/search/search.component.ts
@@ -41,10 +41,13 @@ export class SearchComponent implements OnInit, OnDestroy {
private metaService: MetaService,
private notifier: Notifier,
private searchService: SearchService,
- private authService: AuthService,
- private serverService: ServerService
+ private authService: AuthService
) { }
+ get user () {
+ return this.authService.getUser()
+ }
+
ngOnInit () {
this.subActivatedRoute = this.route.queryParams.subscribe(
queryParams => {
@@ -76,10 +79,6 @@ export class SearchComponent implements OnInit, OnDestroy {
if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe()
}
- isVideoBlur (video: Video) {
- return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig())
- }
-
isVideoChannel (d: VideoChannel | Video): d is VideoChannel {
return d instanceof VideoChannel
}
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 2c635fa2f..f4ae0b0dd 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -1,4 +1,4 @@
-
+
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 4799e00c2..fdc3dc033 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -4,15 +4,14 @@
.video-miniature {
width: $video-miniature-width;
-
- display: inline-block;
+ display: inline-flex;
+ flex-direction: column;
margin-bottom: 30px;
height: 195px;
vertical-align: top;
.video-miniature-information {
width: 200px;
- margin-top: 2px;
line-height: normal;
.video-miniature-name {
@@ -37,5 +36,68 @@
color: $grey-foreground-hover-color;
}
}
+
+ .video-info-privacy,
+ .video-info-blacklisted .blacklisted-label,
+ .video-info-nsfw {
+ font-weight: $font-semibold;
+ }
+
+ .video-info-blacklisted {
+ color: red;
+
+ .blacklisted-reason::before {
+ content: ' - ';
+ }
+ }
+
+ .video-info-nsfw {
+ color: red;
+ }
+ }
+
+ &.display-as-row {
+ flex-direction: row;
+ margin-bottom: 0;
+ height: auto;
+ width: 100%;
+
+ my-video-thumbnail {
+ margin-right: 10px;
+ }
+
+ .video-miniature-information {
+ width: auto;
+
+ .video-miniature-name {
+ @include ellipsis-multiline(1.3em, 2);
+
+ margin-top: 2px;
+ margin-bottom: 5px;
+ }
+
+ .video-miniature-created-at-views,
+ .video-miniature-account,
+ .video-miniature-channel {
+ font-size: 14px;
+ }
+
+ .video-info-privacy {
+ margin-top: 5px;
+ }
+
+ .video-info-blacklisted {
+ margin-top: 3px;
+ }
+ }
+
+ @media screen and (max-width: $small-view) {
+ flex-direction: column;
+ height: auto;
+
+ my-video-thumbnail {
+ margin-right: 0;
+ }
+ }
}
}
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index 2f951a1f1..800417a79 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -1,10 +1,21 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'
import { User } from '../users'
import { Video } from './video.model'
import { ServerService } from '@app/core'
-import { VideoPrivacy } from '../../../../../shared'
+import { VideoPrivacy, VideoState } from '../../../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
+export type MiniatureDisplayOptions = {
+ date?: boolean
+ views?: boolean
+ by?: boolean
+ privacyLabel?: boolean
+ privacyText?: boolean
+ state?: boolean
+ blacklistInfo?: boolean
+ nsfw?: boolean
+}
@Component({
selector: 'my-video-miniature',
@@ -15,11 +26,26 @@ export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
export class VideoMiniatureComponent implements OnInit {
@Input() user: User
@Input() video: Video
+
@Input() ownerDisplayType: OwnerDisplayType = 'account'
+ @Input() displayOptions: MiniatureDisplayOptions = {
+ date: true,
+ views: true,
+ by: true,
+ privacyLabel: false,
+ privacyText: false,
+ state: false,
+ blacklistInfo: false
+ }
+ @Input() displayAsRow = false
private ownerDisplayTypeChosen: 'account' | 'videoChannel'
- constructor (private serverService: ServerService) { }
+ constructor (
+ private serverService: ServerService,
+ private i18n: I18n,
+ @Inject(LOCALE_ID) private localeId: string
+ ) { }
get isVideoBlur () {
return this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())
@@ -58,4 +84,29 @@ export class VideoMiniatureComponent implements OnInit {
isPrivateVideo () {
return this.video.privacy.id === VideoPrivacy.PRIVATE
}
+
+ getStateLabel (video: Video) {
+ if (video.privacy.id !== VideoPrivacy.PRIVATE && video.state.id === VideoState.PUBLISHED) {
+ return this.i18n('Published')
+ }
+
+ if (video.scheduledUpdate) {
+ const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId)
+ return this.i18n('Publication scheduled on ') + updateAt
+ }
+
+ if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) {
+ return this.i18n('Waiting transcoding')
+ }
+
+ if (video.state.id === VideoState.TO_TRANSCODE) {
+ return this.i18n('To transcode')
+ }
+
+ if (video.state.id === VideoState.TO_IMPORT) {
+ return this.i18n('To import')
+ }
+
+ return ''
+ }
}
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 4926adb08..13af0b936 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -5,7 +5,6 @@
@include ellipsis-multiline(1.1em, 2);
transition: color 0.2s;
- font-size: 16px;
font-weight: $font-semibold;
color: var(--mainForegroundColor);
margin-top: 10px;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 0dacc7272..9c3f28b28 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -515,7 +515,6 @@
@media screen and (max-width: 800px) {
flex-direction: column;
height: auto;
- text-align: center;
align-items: center;
}
}