From b1fa3eba70dbd7d9e5b795ad251e293c88ebeee2 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 6 Dec 2017 17:15:59 +0100 Subject: Begin video watch design --- client/src/app/shared/account/account.model.ts | 20 ++ client/src/app/shared/shared.module.ts | 3 + client/src/app/shared/users/user.model.ts | 6 +- .../src/app/shared/video/abstract-video-list.html | 2 +- client/src/app/shared/video/video-details.model.ts | 9 +- .../shared/video/video-miniature.component.html | 17 ++ .../shared/video/video-miniature.component.scss | 44 +++ .../app/shared/video/video-miniature.component.ts | 17 ++ .../src/app/shared/video/video-pagination.model.ts | 2 +- client/src/app/shared/video/video.model.ts | 8 +- .../videos/+video-watch/video-watch.component.html | 233 +++++++--------- .../videos/+video-watch/video-watch.component.scss | 308 ++++++--------------- .../videos/+video-watch/video-watch.component.ts | 43 ++- client/src/app/videos/video-list/index.ts | 1 - client/src/app/videos/video-list/shared/index.ts | 1 - .../shared/video-miniature.component.html | 17 -- .../shared/video-miniature.component.scss | 44 --- .../video-list/shared/video-miniature.component.ts | 19 -- client/src/app/videos/videos.module.ts | 3 +- client/src/assets/images/video/dislike.svg | 14 + client/src/assets/images/video/like.svg | 15 + client/src/assets/images/video/more.svg | 11 + client/src/assets/images/video/share.svg | 16 ++ 23 files changed, 376 insertions(+), 477 deletions(-) create mode 100644 client/src/app/shared/account/account.model.ts create mode 100644 client/src/app/shared/video/video-miniature.component.html create mode 100644 client/src/app/shared/video/video-miniature.component.scss create mode 100644 client/src/app/shared/video/video-miniature.component.ts delete mode 100644 client/src/app/videos/video-list/shared/index.ts delete mode 100644 client/src/app/videos/video-list/shared/video-miniature.component.html delete mode 100644 client/src/app/videos/video-list/shared/video-miniature.component.scss delete mode 100644 client/src/app/videos/video-list/shared/video-miniature.component.ts create mode 100644 client/src/assets/images/video/dislike.svg create mode 100644 client/src/assets/images/video/like.svg create mode 100644 client/src/assets/images/video/more.svg create mode 100644 client/src/assets/images/video/share.svg (limited to 'client/src') diff --git a/client/src/app/shared/account/account.model.ts b/client/src/app/shared/account/account.model.ts new file mode 100644 index 000000000..0b008188a --- /dev/null +++ b/client/src/app/shared/account/account.model.ts @@ -0,0 +1,20 @@ +import { Account as ServerAccount } from '../../../../../shared/models/accounts/account.model' +import { Avatar } from '../../../../../shared/models/avatars/avatar.model' + +export class Account implements ServerAccount { + id: number + uuid: string + name: string + host: string + followingCount: number + followersCount: number + createdAt: Date + updatedAt: Date + avatar: Avatar + + static GET_ACCOUNT_AVATAR_PATH (account: Account) { + if (account && account.avatar) return account.avatar.path + + return API_URL + '/client/assets/images/default-avatar.png' + } +} diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 86e1a380e..bd9aee345 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -20,6 +20,7 @@ import { RestExtractor, RestService } from './rest' import { UserService } from './users' import { VideoAbuseService } from './video-abuse' import { VideoBlacklistService } from './video-blacklist' +import { VideoMiniatureComponent } from './video/video-miniature.component' import { VideoThumbnailComponent } from './video/video-thumbnail.component' import { VideoService } from './video/video.service' @@ -44,6 +45,7 @@ import { VideoService } from './video/video.service' declarations: [ LoaderComponent, VideoThumbnailComponent, + VideoMiniatureComponent, NumberFormatterPipe, FromNowPipe ], @@ -66,6 +68,7 @@ import { VideoService } from './video/video.service' LoaderComponent, VideoThumbnailComponent, + VideoMiniatureComponent, NumberFormatterPipe, FromNowPipe diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts index b1c323114..b4d13f37c 100644 --- a/client/src/app/shared/users/user.model.ts +++ b/client/src/app/shared/users/user.model.ts @@ -1,5 +1,5 @@ import { hasUserRight, User as UserServerModel, UserRight, UserRole, VideoChannel } from '../../../../../shared' -import { Account } from '../../../../../shared/models/accounts' +import { Account } from '../account/account.model' export type UserConstructorHash = { id: number, @@ -52,8 +52,6 @@ export class User implements UserServerModel { } getAvatarPath () { - if (this.account && this.account.avatar) return this.account.avatar.path - - return API_URL + '/client/assets/images/default-avatar.png' + return Account.GET_ACCOUNT_AVATAR_PATH(this.account) } } diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html index bd4f6b1f8..5d07a276b 100644 --- a/client/src/app/shared/video/abstract-video-list.html +++ b/client/src/app/shared/video/abstract-video-list.html @@ -12,7 +12,7 @@ > diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts index 93c380b73..1a956da7c 100644 --- a/client/src/app/shared/video/video-details.model.ts +++ b/client/src/app/shared/video/video-details.model.ts @@ -1,3 +1,4 @@ +import { Account } from '../../../../../shared/models/accounts' import { Video } from '../../shared/video/video.model' import { AuthUser } from '../../core' import { @@ -10,7 +11,7 @@ import { } from '../../../../../shared' export class VideoDetails extends Video implements VideoDetailsServerModel { - account: string + accountName: string by: string createdAt: Date updatedAt: Date @@ -44,6 +45,7 @@ export class VideoDetails extends Video implements VideoDetailsServerModel { channel: VideoChannel privacy: VideoPrivacy privacyLabel: string + account: Account constructor (hash: VideoDetailsServerModel) { super(hash) @@ -53,6 +55,7 @@ export class VideoDetails extends Video implements VideoDetailsServerModel { this.descriptionPath = hash.descriptionPath this.files = hash.files this.channel = hash.channel + this.account = hash.account } getAppropriateMagnetUri (actualDownloadSpeed = 0) { @@ -71,7 +74,7 @@ export class VideoDetails extends Video implements VideoDetailsServerModel { } isRemovableBy (user: AuthUser) { - return user && this.isLocal === true && (this.account === user.username || user.hasRight(UserRight.REMOVE_ANY_VIDEO)) + return user && this.isLocal === true && (this.accountName === user.username || user.hasRight(UserRight.REMOVE_ANY_VIDEO)) } isBlackistableBy (user: AuthUser) { @@ -79,6 +82,6 @@ export class VideoDetails extends Video implements VideoDetailsServerModel { } isUpdatableBy (user: AuthUser) { - return user && this.isLocal === true && user.username === this.account + return user && this.isLocal === true && user.username === this.accountName } } diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html new file mode 100644 index 000000000..7ac017235 --- /dev/null +++ b/client/src/app/shared/video/video-miniature.component.html @@ -0,0 +1,17 @@ +
+ + +
+ + + {{ video.name }} + + + + {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views + +
+
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss new file mode 100644 index 000000000..37e84897b --- /dev/null +++ b/client/src/app/shared/video/video-miniature.component.scss @@ -0,0 +1,44 @@ +.video-miniature { + display: inline-block; + padding-right: 15px; + margin-bottom: 30px; + height: 175px; + vertical-align: top; + + .video-miniature-information { + width: 200px; + margin-top: 2px; + line-height: normal; + + .video-miniature-name { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: bold; + transition: color 0.2s; + font-size: 16px; + font-weight: $font-semibold; + color: #000; + + &:hover { + text-decoration: none; + } + + &.blur-filter { + filter: blur(3px); + padding-left: 4px; + } + } + + .video-miniature-created-at-views { + display: block; + font-size: 13px; + } + + .video-miniature-account { + font-size: 13px; + color: #585858; + } + } +} diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts new file mode 100644 index 000000000..4d79a74bb --- /dev/null +++ b/client/src/app/shared/video/video-miniature.component.ts @@ -0,0 +1,17 @@ +import { Component, Input } from '@angular/core' +import { User } from '../users' +import { Video } from './video.model' + +@Component({ + selector: 'my-video-miniature', + styleUrls: [ './video-miniature.component.scss' ], + templateUrl: './video-miniature.component.html' +}) +export class VideoMiniatureComponent { + @Input() user: User + @Input() video: Video + + isVideoNSFWForThisUser () { + return this.video.isVideoNSFWForUser(this.user) + } +} diff --git a/client/src/app/shared/video/video-pagination.model.ts b/client/src/app/shared/video/video-pagination.model.ts index 9e71769cb..e9db61596 100644 --- a/client/src/app/shared/video/video-pagination.model.ts +++ b/client/src/app/shared/video/video-pagination.model.ts @@ -1,5 +1,5 @@ export interface VideoPagination { currentPage: number itemsPerPage: number - totalItems: number + totalItems?: number } diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts index 6929c8755..d86ef8f92 100644 --- a/client/src/app/shared/video/video.model.ts +++ b/client/src/app/shared/video/video.model.ts @@ -1,8 +1,9 @@ import { Video as VideoServerModel } from '../../../../../shared' import { User } from '../' +import { Account } from '../../../../../shared/models/accounts' export class Video implements VideoServerModel { - account: string + accountName: string by: string createdAt: Date updatedAt: Date @@ -31,6 +32,7 @@ export class Video implements VideoServerModel { likes: number dislikes: number nsfw: boolean + account: Account private static createByString (account: string, serverHost: string) { return account + '@' + serverHost @@ -52,7 +54,7 @@ export class Video implements VideoServerModel { absoluteAPIUrl = window.location.origin } - this.account = hash.account + this.accountName = hash.accountName this.createdAt = new Date(hash.createdAt.toString()) this.categoryLabel = hash.categoryLabel this.category = hash.category @@ -80,7 +82,7 @@ export class Video implements VideoServerModel { this.dislikes = hash.dislikes this.nsfw = hash.nsfw - this.by = Video.createByString(hash.account, hash.serverHost) + this.by = Video.createByString(hash.accountName, hash.serverHost) } isVideoNSFWForUser (user: User) { diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index aa1f2f77e..f31e82bff 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -1,18 +1,3 @@ -
-
- The video load seems to be abnormally long. - -
-
-
@@ -23,167 +8,153 @@
-
-
-
- {{ video.name }} -
- -
- {{ video.views}} views -
-
+
+
+
+
{{ video.name }}
+ +
+
+ +
-
- +
+ +
-
- - - - -
+
+ + Share +
-
-
- - - - - - +
+
+ +
+ + +
-
-
- - - - {{ video.likes }} - -
- -
- +
+ {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views +
- - {{ video.dislikes }} - -
+
+ {{ video.channel.name }} +
-
-
-
-
- Published on {{ video.createdAt | date:'short' }} -
+
+ By {{ video.by }} + Account avatar +
-
+
+
-
+
Show more
-
+
Show less
-
-
- - Privacy: +
+
+ + Privacy - + {{ video.privacyLabel }}
-
- - Category: +
+ + Category - + {{ video.categoryLabel }}
-
- - Licence: +
+ + Licence - + {{ video.licenceLabel }}
-
- - Language: +
+ + Language - + {{ video.languageLabel }}
-
- - Tags: +
+ + Tags -
- - {{ tag }} - -
+ + {{ getVideoTags() }} +
+
+ +
+
+
+
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 06c2de7c6..7bcfeb7c3 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -17,167 +17,108 @@ font-weight: bold; } -#torrent-info { - font-size: 10px; - margin-top: 10px; - text-align: center; - - div { - min-width: 60px; - } -} - -#video-info { - .video-name-views { - font-weight: bold; - font-size: 18px; - min-height: $video-watch-title-height; - display: flex; - align-items: center; - - .video-name { - padding-left: $video-watch-info-padding-left; - } +.video-bottom { + margin-top: 40px; + display: flex; - .video-views { - text-align: right; - // Keep a symmetry with the video name - padding-right: $video-watch-info-padding-left - } + .video-info { + flex-grow: 1; + margin-right: 28px; - } + .video-info-name-actions { + display: flex; + align-items: center; - .video-small-blocks { - height: $video-watch-info-height; - color: $video-watch-info-color; - border-color: $video-watch-border-color; - border-width: 1px 0px; - border-style: solid; + .video-info-name { + font-size: 27px; + font-weight: $font-semibold; + flex-grow: 1; + } - .video-small-block { - height: $video-watch-info-height; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; + .video-info-actions { + .action-button { + @include peertube-button; - a { - cursor: pointer; - transition: color 0.3s; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + font-size: 15px; + font-weight: $font-semibold; + color: #585858; + background-color: #E5E5E5; + display: inline-block; + padding: 0 10px 0 10px; - &, &:hover { - color: inherit; - text-decoration:none; + &:hover { + background-color: #EFEFEF; + } } - &:hover { - color: #000 !important; + .action-more { + display: inline-block; } - &:hover > .glyphicon { - opacity: 1 !important; - } - } + .icon { + display: inline-block; + background-repeat: no-repeat; + background-size: contain; + width: 21px; + height: 21px; + vertical-align: middle; + position: relative; + top: -2px; - .option .glyphicon { - font-size: 22px; - color: inherit; - opacity: 0.15; - margin-bottom: 10px; - transition: opacity 0.3s; - } + &.icon-like { + background-image: url('../../../assets/images/video/like.svg'); + } - .video-small-block-text { - font-size: 15px; - font-weight: bold; - } - } + &.icon-dislike { + background-image: url('../../../assets/images/video/dislike.svg'); + } - .video-small-block:not(:last-child) { - border-width: 0 1px 0 0; - border-color: $video-watch-border-color; - border-style: solid; - } + &.icon-share { + background-image: url('../../../assets/images/video/share.svg'); + } - .video-small-block-account, .video-small-block-more { - a.option { - display: block; - - .glyphicon { - display: block; + &.icon-more { + background-image: url('../../../assets/images/video/more.svg'); + } } } } - .video-small-block-share, .video-small-block-more { - a.option { - display: block; - - .glyphicon { - display: block; - } - } + .video-info-date-views { + font-size: 16px; + margin-bottom: 10px; } - .video-small-block-more .video-small-block-dropdown { - position: relative; - - .dropdown-item .glyphicon { - margin-right: 5px; - } + .video-info-channel { + font-weight: $font-semibold; + font-size: 15px; } - .video-small-block-rating { - - .video-small-block-like { - margin-bottom: 10px; - } - - .video-small-block-text { - vertical-align: top; - } - - .glyphicon { - font-size: 18px; - margin: 0 10px 0 0; - opacity: 0.3; - } - - .interactive { - cursor: pointer; - transition: opacity, color 0.3s; + .video-info-by { + display: flex; + align-items: center; + font-size: 13px; - &.activated, &:hover { - opacity: 1; - color: #000; - } + img { + width: 16px; + height: 16px; + margin-left: 3px; } } - } - - .video-details { - margin-top: 30px; - .video-details-date-description { - padding-left: $video-watch-info-padding-left; + .video-info-description { + margin: 20px 0; + font-size: 15px; .description-loading { display: inline-block; } - .video-details-date { - font-weight: bold; - margin-bottom: 30px; - } - - .video-details-description-more { + .video-info-description-more { cursor: pointer; - margin-top: 15px; - font-weight: bold; - color: #acaeb7; + font-weight: $font-semibold; + color: #585858; + font-size: 14px; .glyphicon { position: relative; @@ -186,109 +127,20 @@ } } - .video-details-attributes { - font-weight: bold; - font-size: 12px; - - .video-details-attribute { - display: flex; - - .video-details-attribute-label { - color: $video-watch-info-color; - flex-basis: 60px; - flex-grow: 0; - flex-shrink: 0; - margin-right: 5px; - } - } - } - - .video-details-tags { - display: flex; - flex-wrap: wrap; - - a { - margin: 0 3px 3px 0; - font-size: 11px; - } - } - } - - @media screen and (max-width: 800px) { - .video-name-views { - .video-name { - padding-left: 5px; - padding-right: 0px; - } - - .video-views { - padding-left: 0px; - padding-right: 5px; - } - } - - .video-small-blocks { - a, .video-small-block-text { - font-size: 13px !important; - } - - .glyphicon { - font-size: 18px !important; - } - - .video-small-block-account { - padding-left: 10px; - padding-right: 10px; - } - } - - .video-details { - .video-details-date-description { - padding-left: 10px; - font-size: 13px !important; - } - - .video-details-attributes { - font-size: 11px !important; + .video-attributes { + .video-attribute { + font-size: 13px; + display: block; + margin-bottom: 12px; - .video-details-attribute-label { - width: 50px; + .video-attribute-label { + width: 86px; + display: inline-block; + color: #585858; + font-weight: $font-bold; } } } - } - @media screen and (max-width: 500px) { - .video-name-views { - font-size: 16px !important; - } - - // Keep the same hierarchy than max-width: 800px - .video-small-blocks { - a, .video-small-block-text { - font-size: 10px !important; - } - - .video-small-block-account { - padding-left: 5px; - padding-right: 5px; - } - } - - .video-details { - .video-details-date-description { - margin-bottom: 30px; - width: 100%; - - .video-details-date { - margin-bottom: 15px; - } - } - - .video-details-attributes { - padding-left: 10px; - padding-right: 10px; - } - } } } diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index 48842602e..3c6951403 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -10,6 +10,8 @@ import { UserVideoRateType, VideoRateType } from '../../../../../shared' import '../../../assets/player/peertube-videojs-plugin' import { AuthService, ConfirmService } from '../../core' import { VideoBlacklistService } from '../../shared' +import { Account } from '../../shared/account/account.model' +import { Video } from '../../shared/video/video.model' import { MarkdownService } from '../shared' import { VideoDownloadComponent } from './video-download.component' import { VideoReportComponent } from './video-report.component' @@ -26,6 +28,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { @ViewChild('videoShareModal') videoShareModal: VideoShareComponent @ViewChild('videoReportModal') videoReportModal: VideoReportComponent + otherVideos: Video[] = [] + error = false loading = false player: videojs.Player @@ -57,6 +61,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ) {} ngOnInit () { + this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt') + .subscribe( + data => this.otherVideos = data.videos, + + err => console.error(err) + ) + this.paramsSub = this.route.params.subscribe(routeParams => { let uuid = routeParams['uuid'] this.videoService.getVideo(uuid).subscribe( @@ -114,27 +125,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ) } - removeVideo (event: Event) { - event.preventDefault() - - this.confirmService.confirm('Do you really want to delete this video?', 'Delete').subscribe( - res => { - if (res === false) return - - this.videoService.removeVideo(this.video.id) - .subscribe( - status => { - this.notificationsService.success('Success', `Video ${this.video.name} deleted.`) - // Go back to the video-list. - this.router.navigate(['/videos/list']) - }, - - error => this.notificationsService.error('Error', error.text) - ) - } - ) - } - blacklistVideo (event: Event) { event.preventDefault() @@ -165,7 +155,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } showLessDescription () { - this.updateVideoDescription(this.shortVideoDescription) this.completeDescriptionShown = false } @@ -222,6 +211,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video.isBlackistableBy(this.authService.getUser()) } + getAvatarPath () { + return Account.GET_ACCOUNT_AVATAR_PATH(this.video.account) + } + + getVideoTags () { + if (!this.video || Array.isArray(this.video.tags) === false) return [] + + return this.video.tags.join(', ') + } + private updateVideoDescription (description: string) { this.video.description = description this.setVideoDescriptionHTML() diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts index 13024294e..5e7c7886c 100644 --- a/client/src/app/videos/video-list/index.ts +++ b/client/src/app/videos/video-list/index.ts @@ -1,4 +1,3 @@ export * from './video-recently-added.component' export * from './video-trending.component' export * from './video-search.component' -export * from './shared' diff --git a/client/src/app/videos/video-list/shared/index.ts b/client/src/app/videos/video-list/shared/index.ts deleted file mode 100644 index 2778f2d9e..000000000 --- a/client/src/app/videos/video-list/shared/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './video-miniature.component' diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.html b/client/src/app/videos/video-list/shared/video-miniature.component.html deleted file mode 100644 index 7ac017235..000000000 --- a/client/src/app/videos/video-list/shared/video-miniature.component.html +++ /dev/null @@ -1,17 +0,0 @@ -
- - -
- - - {{ video.name }} - - - - {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views - -
-
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss deleted file mode 100644 index 37e84897b..000000000 --- a/client/src/app/videos/video-list/shared/video-miniature.component.scss +++ /dev/null @@ -1,44 +0,0 @@ -.video-miniature { - display: inline-block; - padding-right: 15px; - margin-bottom: 30px; - height: 175px; - vertical-align: top; - - .video-miniature-information { - width: 200px; - margin-top: 2px; - line-height: normal; - - .video-miniature-name { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-weight: bold; - transition: color 0.2s; - font-size: 16px; - font-weight: $font-semibold; - color: #000; - - &:hover { - text-decoration: none; - } - - &.blur-filter { - filter: blur(3px); - padding-left: 4px; - } - } - - .video-miniature-created-at-views { - display: block; - font-size: 13px; - } - - .video-miniature-account { - font-size: 13px; - color: #585858; - } - } -} diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.ts b/client/src/app/videos/video-list/shared/video-miniature.component.ts deleted file mode 100644 index e8fc8e911..000000000 --- a/client/src/app/videos/video-list/shared/video-miniature.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component, Input } from '@angular/core' -import { User } from '../../../shared' -import { SortField } from '../../../shared/video/sort-field.type' -import { Video } from '../../../shared/video/video.model' - -@Component({ - selector: 'my-video-miniature', - styleUrls: [ './video-miniature.component.scss' ], - templateUrl: './video-miniature.component.html' -}) -export class VideoMiniatureComponent { - @Input() currentSort: SortField - @Input() user: User - @Input() video: Video - - isVideoNSFWForThisUser () { - return this.video.isVideoNSFWForUser(this.user) - } -} diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts index 8c8d52ad9..4b14d1da8 100644 --- a/client/src/app/videos/videos.module.ts +++ b/client/src/app/videos/videos.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core' import { SharedModule } from '../shared' -import { VideoMiniatureComponent, VideoSearchComponent } from './video-list' +import { VideoSearchComponent } from './video-list' import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component' import { VideoTrendingComponent } from './video-list/video-trending.component' import { VideosRoutingModule } from './videos-routing.module' @@ -17,7 +17,6 @@ import { VideosComponent } from './videos.component' VideoTrendingComponent, VideoRecentlyAddedComponent, - VideoMiniatureComponent, VideoSearchComponent ], diff --git a/client/src/assets/images/video/dislike.svg b/client/src/assets/images/video/dislike.svg new file mode 100644 index 000000000..56a7908fb --- /dev/null +++ b/client/src/assets/images/video/dislike.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/client/src/assets/images/video/like.svg b/client/src/assets/images/video/like.svg new file mode 100644 index 000000000..5ef6c7b31 --- /dev/null +++ b/client/src/assets/images/video/like.svg @@ -0,0 +1,15 @@ + + + + thumbs-up + Created with Sketch. + + + + + + + + + + diff --git a/client/src/assets/images/video/more.svg b/client/src/assets/images/video/more.svg new file mode 100644 index 000000000..dea392136 --- /dev/null +++ b/client/src/assets/images/video/more.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/src/assets/images/video/share.svg b/client/src/assets/images/video/share.svg new file mode 100644 index 000000000..da0f43e81 --- /dev/null +++ b/client/src/assets/images/video/share.svg @@ -0,0 +1,16 @@ + + + + share + Created with Sketch. + + + + + + + + + + + -- cgit v1.2.3