diff --git a/client/src/app/videos/shared/video.model.ts b/client/src/app/videos/shared/video.model.ts index fae001d78..8e676708b 100644 --- a/client/src/app/videos/shared/video.model.ts +++ b/client/src/app/videos/shared/video.model.ts @@ -11,6 +11,7 @@ export class Video { podHost: string; tags: string[]; thumbnailPath: string; + views: number; private static createByString(author: string, podHost: string) { return author + '@' + podHost; @@ -36,7 +37,8 @@ export class Video { name: string, podHost: string, tags: string[], - thumbnailPath: string + thumbnailPath: string, + views: number }) { this.author = hash.author; this.createdAt = new Date(hash.createdAt); @@ -49,6 +51,7 @@ export class Video { this.podHost = hash.podHost; this.tags = hash.tags; this.thumbnailPath = hash.thumbnailPath; + this.views = hash.views; this.by = Video.createByString(hash.author, hash.podHost); } diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html index f2f4a53a9..b2bf35435 100644 --- a/client/src/app/videos/video-list/video-miniature.component.html +++ b/client/src/app/videos/video-list/video-miniature.component.html @@ -23,6 +23,9 @@ {{ video.by }} - {{ video.createdAt | date:'short' }} + + {{ video.views }} views + {{ video.createdAt | date:'short' }} + diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss index d70b1b50d..0d309062a 100644 --- a/client/src/app/videos/video-list/video-miniature.component.scss +++ b/client/src/app/videos/video-list/video-miniature.component.scss @@ -79,12 +79,17 @@ } } - .video-miniature-author, .video-miniature-created-at { + .video-miniature-author, .video-miniature-views-created-at { display: block; margin-left: 1px; font-size: 12px; color: #337ab7; opacity: 0.9; + + .video-miniature-created-at::before { + content: '\002022'; + margin: 0 2px 0 1px; + } } .video-miniature-author { diff --git a/client/src/app/videos/video-list/video-sort.component.ts b/client/src/app/videos/video-list/video-sort.component.ts index 53951deb4..c950fa8aa 100644 --- a/client/src/app/videos/video-list/video-sort.component.ts +++ b/client/src/app/videos/video-list/video-sort.component.ts @@ -18,7 +18,9 @@ export class VideoSortComponent { 'duration': 'Duration - Asc', '-duration': 'Duration - Desc', 'createdAt': 'Created Date - Asc', - '-createdAt': 'Created Date - Desc' + '-createdAt': 'Created Date - Desc', + 'views': 'Views - Asc', + '-views': 'Views - Desc' }; get choiceKeys() { 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 8cee9959d..24d741ff9 100644 --- a/client/src/app/videos/video-watch/video-watch.component.html +++ b/client/src/app/videos/video-watch/video-watch.component.html @@ -57,17 +57,20 @@ Share - - -
+
+
-
-
+
+ + +
+ {{ video.views }} views +
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 794412707..0b8af52ce 100644 --- a/client/src/app/videos/video-watch/video-watch.component.scss +++ b/client/src/app/videos/video-watch/video-watch.component.scss @@ -47,7 +47,7 @@ top: 2px; } - #magnet-uri, #share, #more { + #share, #more { font-weight: bold; opacity: 0.85; } @@ -71,12 +71,16 @@ } } - #video-tags { + #video-tags-views { margin-top: 10px; a { margin-right: 5px; } + + #video-views { + font-weight: bold; + } } #video-description { 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 9ac9342b7..d1abc81bc 100644 --- a/client/src/app/videos/video-watch/video-watch.component.ts +++ b/client/src/app/videos/video-watch/video-watch.component.ts @@ -145,7 +145,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.videoShareModal.show(); } - showMagnetUriModal() { + showMagnetUriModal(event: Event) { + event.preventDefault(); this.videoMagnetModal.show(); }