From e2409062dedf8856c56ef1bdc98ca623e21c4f3b Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 3 Apr 2019 16:17:41 +0200 Subject: [PATCH 1/1] Refactor video miniatures --- .../account-videos.component.ts | 1 - .../video-auto-blacklist-list.component.html | 25 +++---- .../video-auto-blacklist-list.component.scss | 33 +-------- .../video-auto-blacklist-list.component.ts | 19 ++++-- .../my-account-history.component.html | 8 +-- .../my-account-history.component.scss | 58 +--------------- .../my-account-videos.component.html | 12 +--- .../my-account-videos.component.scss | 49 +------------ .../my-account-videos.component.ts | 10 +++ .../video-channel-videos.component.ts | 1 - client/src/app/search/search.component.html | 8 +-- client/src/app/search/search.component.scss | 47 ++----------- client/src/app/search/search.component.ts | 11 ++- .../video/video-miniature.component.html | 34 ++++++++-- .../video/video-miniature.component.scss | 68 ++++++++++++++++++- .../shared/video/video-miniature.component.ts | 57 +++++++++++++++- client/src/sass/include/_miniature.scss | 1 - client/src/sass/include/_mixins.scss | 1 - 18 files changed, 199 insertions(+), 244 deletions(-) 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 @@
- - -
- {{ video.name }} - {{ video.views | myNumberFormatter }} views - -
+
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 @@
- - -
- {{ result.name }} - {{ result.publishedAt | myFromNow }} - {{ result.views | myNumberFormatter }} views - -
+
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 + + @include avatar($image-size); - margin: 0 50px 0 40px; + 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 @@ -
+
@@ -7,19 +7,41 @@ class="video-miniature-name" [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }" > - Unlisted - Private + + Unlisted + Private + {{ video.name }} - {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views + + {{ video.publishedAt | myFromNow }} + - + {{ video.views | myNumberFormatter }} views + - - + {{ video.byVideoChannel }} + +
+ {{ video.privacy.label }} + - + {{ getStateLabel(video) }} +
+ +
+ Blacklisted + {{ video.blacklistedReason }} +
+ +
+ Sensitive +
+
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; } } -- 2.41.0