aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-02-26 19:59:51 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-02-26 20:01:26 +0100
commit05a9feaa48cea560abd9561434a3479ab1021643 (patch)
treec0a8705a4a05fb806d5cdad294b74b78e8985723 /client/src
parentf282639b07deee1e35403bd86c46ea521fb4845e (diff)
downloadPeerTube-05a9feaa48cea560abd9561434a3479ab1021643.tar.gz
PeerTube-05a9feaa48cea560abd9561434a3479ab1021643.tar.zst
PeerTube-05a9feaa48cea560abd9561434a3479ab1021643.zip
Client: add views information and sort
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/videos/shared/video.model.ts5
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.html5
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.scss7
-rw-r--r--client/src/app/videos/video-list/video-sort.component.ts4
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.html23
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.scss8
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.ts3
7 files changed, 40 insertions, 15 deletions
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 {
11 podHost: string; 11 podHost: string;
12 tags: string[]; 12 tags: string[];
13 thumbnailPath: string; 13 thumbnailPath: string;
14 views: number;
14 15
15 private static createByString(author: string, podHost: string) { 16 private static createByString(author: string, podHost: string) {
16 return author + '@' + podHost; 17 return author + '@' + podHost;
@@ -36,7 +37,8 @@ export class Video {
36 name: string, 37 name: string,
37 podHost: string, 38 podHost: string,
38 tags: string[], 39 tags: string[],
39 thumbnailPath: string 40 thumbnailPath: string,
41 views: number
40 }) { 42 }) {
41 this.author = hash.author; 43 this.author = hash.author;
42 this.createdAt = new Date(hash.createdAt); 44 this.createdAt = new Date(hash.createdAt);
@@ -49,6 +51,7 @@ export class Video {
49 this.podHost = hash.podHost; 51 this.podHost = hash.podHost;
50 this.tags = hash.tags; 52 this.tags = hash.tags;
51 this.thumbnailPath = hash.thumbnailPath; 53 this.thumbnailPath = hash.thumbnailPath;
54 this.views = hash.views;
52 55
53 this.by = Video.createByString(hash.author, hash.podHost); 56 this.by = Video.createByString(hash.author, hash.podHost);
54 } 57 }
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 @@
23 </span> 23 </span>
24 24
25 <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a> 25 <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>
26 <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span> 26 <span class="video-miniature-views-created-at">
27 <span class="video-miniature-views">{{ video.views }} views</span>
28 <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
29 </span>
27 </div> 30 </div>
28</div> 31</div>
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 @@
79 } 79 }
80 } 80 }
81 81
82 .video-miniature-author, .video-miniature-created-at { 82 .video-miniature-author, .video-miniature-views-created-at {
83 display: block; 83 display: block;
84 margin-left: 1px; 84 margin-left: 1px;
85 font-size: 12px; 85 font-size: 12px;
86 color: #337ab7; 86 color: #337ab7;
87 opacity: 0.9; 87 opacity: 0.9;
88
89 .video-miniature-created-at::before {
90 content: '\002022';
91 margin: 0 2px 0 1px;
92 }
88 } 93 }
89 94
90 .video-miniature-author { 95 .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 {
18 'duration': 'Duration - Asc', 18 'duration': 'Duration - Asc',
19 '-duration': 'Duration - Desc', 19 '-duration': 'Duration - Desc',
20 'createdAt': 'Created Date - Asc', 20 'createdAt': 'Created Date - Asc',
21 '-createdAt': 'Created Date - Desc' 21 '-createdAt': 'Created Date - Desc',
22 'views': 'Views - Asc',
23 '-views': 'Views - Desc'
22 }; 24 };
23 25
24 get choiceKeys() { 26 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 @@
57 <span class="glyphicon glyphicon-share"></span> Share 57 <span class="glyphicon glyphicon-share"></span> Share
58 </button> 58 </button>
59 59
60 <button title="Get magnet URI" id="magnet-uri" class="btn btn-default" (click)="showMagnetUriModal()"> 60 <div class="btn-group" dropdown>
61 <span class="glyphicon glyphicon-magnet"></span> Magnet
62 </button>
63
64 <div *ngIf="isUserLoggedIn()" class="btn-group" dropdown>
65 <button id="single-button" type="button" id="more" class="btn btn-default" dropdownToggle> 61 <button id="single-button" type="button" id="more" class="btn btn-default" dropdownToggle>
66 <span class="glyphicon glyphicon-option-horizontal"></span> More 62 <span class="glyphicon glyphicon-option-horizontal"></span> More
67 </button> 63 </button>
64
68 <ul dropdownMenu id="more-menu" role="menu" aria-labelledby="single-button"> 65 <ul dropdownMenu id="more-menu" role="menu" aria-labelledby="single-button">
69 <li role="menuitem"> 66 <li role="menuitem">
70 <a class="dropdown-item" href="#" (click)="showReportModal($event)"> 67 <a class="dropdown-item" title="Get magnet URI" href="#" (click)="showMagnetUriModal($event)">
68 <span class="glyphicon glyphicon-magnet"></span> Magnet
69 </a>
70 </li>
71
72 <li *ngIf="isUserLoggedIn()" role="menuitem">
73 <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
71 <span class="glyphicon glyphicon-alert"></span> Report 74 <span class="glyphicon glyphicon-alert"></span> Report
72 </a> 75 </a>
73 </li> 76 </li>
@@ -76,12 +79,16 @@
76 </div> 79 </div>
77 </div> 80 </div>
78 81
79 <div id="video-tags" class="row"> 82 <div id="video-tags-views" class="row">
80 <div class="col-md-12"> 83 <div class="col-md-8">
81 <a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary"> 84 <a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">
82 {{ tag }} 85 {{ tag }}
83 </a> 86 </a>
84 </div> 87 </div>
88
89 <div id="video-views" class="col-md-4 text-right">
90 {{ video.views }} views
91 </div>
85 </div> 92 </div>
86 93
87 <div id="video-description" class="row"> 94 <div id="video-description" class="row">
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 @@
47 top: 2px; 47 top: 2px;
48 } 48 }
49 49
50 #magnet-uri, #share, #more { 50 #share, #more {
51 font-weight: bold; 51 font-weight: bold;
52 opacity: 0.85; 52 opacity: 0.85;
53 } 53 }
@@ -71,12 +71,16 @@
71 } 71 }
72 } 72 }
73 73
74 #video-tags { 74 #video-tags-views {
75 margin-top: 10px; 75 margin-top: 10px;
76 76
77 a { 77 a {
78 margin-right: 5px; 78 margin-right: 5px;
79 } 79 }
80
81 #video-views {
82 font-weight: bold;
83 }
80 } 84 }
81 85
82 #video-description { 86 #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 {
145 this.videoShareModal.show(); 145 this.videoShareModal.show();
146 } 146 }
147 147
148 showMagnetUriModal() { 148 showMagnetUriModal(event: Event) {
149 event.preventDefault();
149 this.videoMagnetModal.show(); 150 this.videoMagnetModal.show();
150 } 151 }
151 152