From: Chocobozzz Date: Wed, 6 Dec 2017 16:15:59 +0000 (+0100) Subject: Begin video watch design X-Git-Tag: v0.0.1-alpha~149^2~27 X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=b1fa3eba70dbd7d9e5b795ad251e293c88ebeee2;p=oweals%2Fpeertube.git Begin video watch design --- diff --git a/CREDITS.md b/CREDITS.md index a7b2b5568..65017bbc1 100644 --- a/CREDITS.md +++ b/CREDITS.md @@ -8,14 +8,9 @@ # Design -Inspirations from: +By [Olivier Massain](https://twitter.com/omassain) - * [Aurélien Salomon](https://dribbble.com/shots/1338727-Youtube-Redesign) - * [Wojciech Zieliński](https://dribbble.com/shots/3000315-youtube-concept) - -Video.js theme: - - * [zanechua](https://github.com/zanechua/videojs-sublime-inspired-skin) +Icons from [Robbie Pearce](https://robbiepearce.com/softies/) # Fonts 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. + + + + + + + + + + + diff --git a/server/models/video/video.ts b/server/models/video/video.ts index 4dce8e2fc..60023bc8c 100644 --- a/server/models/video/video.ts +++ b/server/models/video/video.ts @@ -486,7 +486,7 @@ toFormattedJSON = function (this: VideoInstance) { description: this.getTruncatedDescription(), serverHost, isLocal: this.isOwned(), - account: this.VideoChannel.Account.name, + accountName: this.VideoChannel.Account.name, duration: this.duration, views: this.views, likes: this.likes, @@ -514,6 +514,7 @@ toFormattedDetailsJSON = function (this: VideoInstance) { privacy: this.privacy, descriptionPath: this.getDescriptionPath(), channel: this.VideoChannel.toFormattedJSON(), + account: this.VideoChannel.Account.toFormattedJSON(), files: [] } diff --git a/server/tests/api/follows.ts b/server/tests/api/follows.ts index aadae3cce..dcb4c8bd9 100644 --- a/server/tests/api/follows.ts +++ b/server/tests/api/follows.ts @@ -227,7 +227,7 @@ describe('Test follows', function () { expect(videoDetails.nsfw).to.be.ok expect(videoDetails.description).to.equal('my super description') expect(videoDetails.serverHost).to.equal('localhost:9003') - expect(videoDetails.account).to.equal('root') + expect(videoDetails.accountName).to.equal('root') expect(videoDetails.likes).to.equal(1) expect(videoDetails.dislikes).to.equal(1) expect(videoDetails.isLocal).to.be.false diff --git a/server/tests/api/multiple-servers.ts b/server/tests/api/multiple-servers.ts index c80ded862..c7f19f261 100644 --- a/server/tests/api/multiple-servers.ts +++ b/server/tests/api/multiple-servers.ts @@ -111,13 +111,14 @@ describe('Test multiple servers', function () { expect(video.tags).to.deep.equal([ 'tag1p1', 'tag2p1' ]) expect(dateIsValid(video.createdAt)).to.be.true expect(dateIsValid(video.updatedAt)).to.be.true - expect(video.account).to.equal('root') + expect(video.accountName).to.equal('root') const res2 = await getVideo(server.url, video.uuid) const videoDetails = res2.body expect(videoDetails.channel.name).to.equal('my channel') expect(videoDetails.channel.description).to.equal('super channel') + expect(videoDetails.account.name).to.equal('root') expect(dateIsValid(videoDetails.channel.createdAt)).to.be.true expect(dateIsValid(videoDetails.channel.updatedAt)).to.be.true expect(videoDetails.files).to.have.lengthOf(1) @@ -201,7 +202,7 @@ describe('Test multiple servers', function () { expect(video.tags).to.deep.equal([ 'tag1p2', 'tag2p2', 'tag3p2' ]) expect(dateIsValid(video.createdAt)).to.be.true expect(dateIsValid(video.updatedAt)).to.be.true - expect(video.account).to.equal('user1') + expect(video.accountName).to.equal('user1') if (server.url !== 'http://localhost:9002') { expect(video.isLocal).to.be.false @@ -316,7 +317,7 @@ describe('Test multiple servers', function () { expect(video1.serverHost).to.equal('localhost:9003') expect(video1.duration).to.equal(5) expect(video1.tags).to.deep.equal([ 'tag1p3' ]) - expect(video1.account).to.equal('root') + expect(video1.accountName).to.equal('root') expect(dateIsValid(video1.createdAt)).to.be.true expect(dateIsValid(video1.updatedAt)).to.be.true @@ -342,7 +343,7 @@ describe('Test multiple servers', function () { expect(video2.serverHost).to.equal('localhost:9003') expect(video2.duration).to.equal(5) expect(video2.tags).to.deep.equal([ 'tag2p3', 'tag3p3', 'tag4p3' ]) - expect(video2.account).to.equal('root') + expect(video2.accountName).to.equal('root') expect(dateIsValid(video2.createdAt)).to.be.true expect(dateIsValid(video2.updatedAt)).to.be.true @@ -690,7 +691,7 @@ describe('Test multiple servers', function () { expect(baseVideo.licence).to.equal(video.licence) expect(baseVideo.category).to.equal(video.category) expect(baseVideo.nsfw).to.equal(video.nsfw) - expect(baseVideo.account).to.equal(video.account) + expect(baseVideo.accountName).to.equal(video.accountName) expect(baseVideo.tags).to.deep.equal(video.tags) } }) diff --git a/server/tests/api/services.ts b/server/tests/api/services.ts index 8d96ccc5e..4d480c305 100644 --- a/server/tests/api/services.ts +++ b/server/tests/api/services.ts @@ -46,7 +46,7 @@ describe('Test services', function () { expect(res.body.html).to.equal(expectedHtml) expect(res.body.title).to.equal(server.video.name) - expect(res.body.author_name).to.equal(server.video.account) + expect(res.body.author_name).to.equal(server.video.accountName) expect(res.body.width).to.equal(560) expect(res.body.height).to.equal(315) expect(res.body.thumbnail_url).to.equal(expectedThumbnailUrl) @@ -66,7 +66,7 @@ describe('Test services', function () { expect(res.body.html).to.equal(expectedHtml) expect(res.body.title).to.equal(server.video.name) - expect(res.body.author_name).to.equal(server.video.account) + expect(res.body.author_name).to.equal(server.video.accountName) expect(res.body.height).to.equal(50) expect(res.body.width).to.equal(50) expect(res.body).to.not.have.property('thumbnail_url') diff --git a/server/tests/api/single-server.ts b/server/tests/api/single-server.ts index fe192d391..d7e9ad41f 100644 --- a/server/tests/api/single-server.ts +++ b/server/tests/api/single-server.ts @@ -127,7 +127,7 @@ describe('Test a single server', function () { expect(video.nsfw).to.be.ok expect(video.description).to.equal('my super description') expect(video.serverHost).to.equal('localhost:9001') - expect(video.account).to.equal('root') + expect(video.accountName).to.equal('root') expect(video.isLocal).to.be.true expect(video.tags).to.deep.equal([ 'tag1', 'tag2', 'tag3' ]) expect(dateIsValid(video.createdAt)).to.be.true @@ -176,7 +176,7 @@ describe('Test a single server', function () { expect(video.nsfw).to.be.ok expect(video.description).to.equal('my super description') expect(video.serverHost).to.equal('localhost:9001') - expect(video.account).to.equal('root') + expect(video.accountName).to.equal('root') expect(video.isLocal).to.be.true expect(video.tags).to.deep.equal([ 'tag1', 'tag2', 'tag3' ]) expect(dateIsValid(video.createdAt)).to.be.true @@ -243,7 +243,7 @@ describe('Test a single server', function () { expect(video.nsfw).to.be.ok expect(video.description).to.equal('my super description') expect(video.serverHost).to.equal('localhost:9001') - expect(video.account).to.equal('root') + expect(video.accountName).to.equal('root') expect(video.isLocal).to.be.true expect(video.tags).to.deep.equal([ 'tag1', 'tag2', 'tag3' ]) expect(dateIsValid(video.createdAt)).to.be.true @@ -298,7 +298,7 @@ describe('Test a single server', function () { // expect(video.nsfw).to.be.ok // expect(video.description).to.equal('my super description') // expect(video.serverHost).to.equal('localhost:9001') - // expect(video.account).to.equal('root') + // expect(video.accountName).to.equal('root') // expect(video.isLocal).to.be.true // expect(video.tags).to.deep.equal([ 'tag1', 'tag2', 'tag3' ]) // expect(dateIsValid(video.createdAt)).to.be.true @@ -563,7 +563,8 @@ describe('Test a single server', function () { expect(video.nsfw).to.be.ok expect(video.description).to.equal('my super description updated') expect(video.serverHost).to.equal('localhost:9001') - expect(video.account).to.equal('root') + expect(video.accountName).to.equal('root') + expect(video.account.name).to.equal('root') expect(video.isLocal).to.be.true expect(video.tags).to.deep.equal([ 'tagup1', 'tagup2' ]) expect(dateIsValid(video.createdAt)).to.be.true @@ -612,7 +613,7 @@ describe('Test a single server', function () { expect(video.nsfw).to.be.ok expect(video.description).to.equal('my super description updated') expect(video.serverHost).to.equal('localhost:9001') - expect(video.account).to.equal('root') + expect(video.accountName).to.equal('root') expect(video.isLocal).to.be.true expect(video.tags).to.deep.equal([ 'supertag', 'tag1', 'tag2' ]) expect(dateIsValid(video.createdAt)).to.be.true @@ -652,7 +653,7 @@ describe('Test a single server', function () { expect(video.nsfw).to.be.ok expect(video.description).to.equal('hello everybody') expect(video.serverHost).to.equal('localhost:9001') - expect(video.account).to.equal('root') + expect(video.accountName).to.equal('root') expect(video.isLocal).to.be.true expect(video.tags).to.deep.equal([ 'supertag', 'tag1', 'tag2' ]) expect(dateIsValid(video.createdAt)).to.be.true diff --git a/server/tests/api/users.ts b/server/tests/api/users.ts index 33646e84f..5066e73fc 100644 --- a/server/tests/api/users.ts +++ b/server/tests/api/users.ts @@ -117,7 +117,7 @@ describe('Test users', function () { const res = await getVideosList(server.url) const video = res.body.data[ 0 ] - expect(video.account) + expect(video.accountName) .to .equal('root') videoId = video.id @@ -487,7 +487,7 @@ describe('Test users', function () { .equal(1) const video = res.body.data[ 0 ] - expect(video.account) + expect(video.accountName) .to .equal('root') }) diff --git a/server/tests/utils/servers.ts b/server/tests/utils/servers.ts index faa2f19ff..8340fbc18 100644 --- a/server/tests/utils/servers.ts +++ b/server/tests/utils/servers.ts @@ -24,7 +24,7 @@ interface ServerInfo { id: number uuid: string name: string - account: string + accountName: string } remoteVideo?: { diff --git a/shared/models/videos/video.model.ts b/shared/models/videos/video.model.ts index 08b29425c..dc12a05d9 100644 --- a/shared/models/videos/video.model.ts +++ b/shared/models/videos/video.model.ts @@ -1,3 +1,4 @@ +import { Account } from '../accounts' import { VideoChannel } from './video-channel.model' import { VideoPrivacy } from './video-privacy.enum' @@ -13,7 +14,7 @@ export interface VideoFile { export interface Video { id: number uuid: string - account: string + accountName: string createdAt: Date | string updatedAt: Date | string categoryLabel: string @@ -43,4 +44,5 @@ export interface VideoDetails extends Video { descriptionPath: string channel: VideoChannel files: VideoFile[] + account: Account }