aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-04-19 10:20:08 +0200
committerRigel Kent <par@rigelk.eu>2020-05-01 16:41:02 +0200
commitaeb1bed9835b3b092832160245080d4023c14d91 (patch)
tree366cdf113afe748ca59f1bc40ce589cac781cc3c /client/src/app
parent5fd4ca0051c7e7f3f8c47bcbde5cab0c56532e64 (diff)
downloadPeerTube-aeb1bed9835b3b092832160245080d4023c14d91.tar.gz
PeerTube-aeb1bed9835b3b092832160245080d4023c14d91.tar.zst
PeerTube-aeb1bed9835b3b092832160245080d4023c14d91.zip
Factorize video display in table for moderation components, apply it to blacklisted videos as well
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+admin/moderation/moderation.component.scss70
-rw-r--r--client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html22
-rw-r--r--client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss71
-rw-r--r--client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html17
-rw-r--r--client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts2
5 files changed, 99 insertions, 83 deletions
diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss
index ef6a39b5d..a4ee65423 100644
--- a/client/src/app/+admin/moderation/moderation.component.scss
+++ b/client/src/app/+admin/moderation/moderation.component.scss
@@ -27,7 +27,7 @@
27 } 27 }
28} 28}
29 29
30.video-abuse-states { 30.video-table-states {
31 & > :not(:first-child) { 31 & > :not(:first-child) {
32 margin-left: .4rem; 32 margin-left: .4rem;
33 } 33 }
@@ -68,3 +68,71 @@ my-action-dropdown.show {
68 display: block !important; 68 display: block !important;
69 } 69 }
70} 70}
71
72
73.video-table-video-link {
74 @include disable-outline;
75 position: relative;
76 top: 3px;
77}
78
79.video-table-video {
80 display: inline-flex;
81
82 .video-table-video-image {
83 @include miniature-thumbnail;
84
85 $image-height: 45px;
86
87 height: $image-height;
88 width: #{(16/9) * $image-height};
89 margin-right: 0.5rem;
90 border-radius: 2px;
91 border: none;
92 background: transparent;
93 display: inline-flex;
94 justify-content: center;
95 align-items: center;
96 position: relative;
97
98 img {
99 height: 100%;
100 width: 100%;
101 border-radius: 2px;
102 }
103
104 span {
105 color: var(--inputPlaceholderColor);
106 }
107
108 .video-table-video-image-label {
109 @include static-thumbnail-overlay;
110 position: absolute;
111 border-radius: 3px;
112 font-size: 10px;
113 padding: 0 3px;
114 line-height: 1.3;
115 bottom: 2px;
116 right: 2px;
117 }
118 }
119
120 .video-table-video-text {
121 display: inline-flex;
122 flex-direction: column;
123 justify-content: center;
124 font-size: 90%;
125 color: var(--mainForegroundColor);
126 line-height: 1rem;
127
128 div .glyphicon {
129 font-size: 80%;
130 color: gray;
131 margin-left: 0.1rem;
132 }
133
134 div + div {
135 font-size: 80%;
136 }
137 }
138}
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
index 67ef28408..e2c08f910 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
@@ -52,16 +52,16 @@
52 </td> 52 </td>
53 53
54 <td *ngIf="!videoAbuse.video.deleted"> 54 <td *ngIf="!videoAbuse.video.deleted">
55 <a [href]="getVideoUrl(videoAbuse)" class="video-abuse-video-link" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer"> 55 <a [href]="getVideoUrl(videoAbuse)" class="video-table-video-link" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
56 <div class="video-abuse-video"> 56 <div class="video-table-video">
57 <div class="video-abuse-video-image"> 57 <div class="video-table-video-image">
58 <img [src]="videoAbuse.video.thumbnailPath"> 58 <img [src]="videoAbuse.video.thumbnailPath">
59 <span 59 <span
60 class="video-abuse-video-image-label" *ngIf="videoAbuse.count > 1" 60 class="video-table-video-image-label" *ngIf="videoAbuse.count > 1"
61 i18n-title title="This video has been reported multiple times." 61 i18n-title title="This video has been reported multiple times."
62 >{{ videoAbuse.nth }}/{{ videoAbuse.count }}</span> 62 >{{ videoAbuse.nth }}/{{ videoAbuse.count }}</span>
63 </div> 63 </div>
64 <div class="video-abuse-video-text"> 64 <div class="video-table-video-text">
65 <div> 65 <div>
66 {{ videoAbuse.video.name }} 66 {{ videoAbuse.video.name }}
67 <span *ngIf="!videoAbuse.video.blacklisted" class="glyphicon glyphicon-new-window"></span> 67 <span *ngIf="!videoAbuse.video.blacklisted" class="glyphicon glyphicon-new-window"></span>
@@ -74,9 +74,9 @@
74 </td> 74 </td>
75 75
76 <td *ngIf="videoAbuse.video.deleted" class="c-hand" [pRowToggler]="videoAbuse"> 76 <td *ngIf="videoAbuse.video.deleted" class="c-hand" [pRowToggler]="videoAbuse">
77 <div class="video-abuse-video" i18n-title title="Video was deleted"> 77 <div class="video-table-video" i18n-title title="Video was deleted">
78 <div class="video-abuse-video-image"><span i18n>Deleted</span></div> 78 <div class="video-table-video-image"><span i18n>Deleted</span></div>
79 <div class="video-abuse-video-text"> 79 <div class="video-table-video-text">
80 <div> 80 <div>
81 {{ videoAbuse.video.name }} 81 {{ videoAbuse.video.name }}
82 <span class="glyphicon glyphicon-trash"></span> 82 <span class="glyphicon glyphicon-trash"></span>
@@ -123,7 +123,7 @@
123 <span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span> 123 <span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span>
124 </div> 124 </div>
125 </div> 125 </div>
126 <a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-abuse-links" i18n> 126 <a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-details-links" i18n>
127 {videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span> 127 {videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
128 </a> 128 </a>
129 </span> 129 </span>
@@ -142,14 +142,14 @@
142 <span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}</span> 142 <span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}</span>
143 </div> 143 </div>
144 </div> 144 </div>
145 <a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-abuse-links" *ngIf="!videoAbuse.video.deleted" i18n> 145 <a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-details-links" *ngIf="!videoAbuse.video.deleted" i18n>
146 {videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span> 146 {videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
147 </a> 147 </a>
148 </span> 148 </span>
149 </div> 149 </div>
150 <div class="d-flex"> 150 <div class="d-flex">
151 <span class="col-3 moderation-expanded-label" i18n>Updated</span> 151 <span class="col-3 moderation-expanded-label" i18n>Updated</span>
152 <time class="col-9 moderation-expanded-text video-abuse-date-updated">{{ videoAbuse.updatedAt | date: 'medium' }}</time> 152 <time class="col-9 moderation-expanded-text video-details-date-updated">{{ videoAbuse.updatedAt | date: 'medium' }}</time>
153 </div> 153 </div>
154 154
155 <!-- report text --> 155 <!-- report text -->
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
index b5dc53b3a..a9251e2f0 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
@@ -9,78 +9,15 @@
9 } 9 }
10} 10}
11 11
12.video-abuse-date-updated { 12.video-details-date-updated {
13 font-size: 90%; 13 font-size: 90%;
14 margin-top: .1rem; 14 margin-top: .1rem;
15} 15}
16 16
17.video-abuse-links { 17.video-details-links {
18 @include disable-default-a-behaviour; 18 @include disable-default-a-behaviour;
19} 19}
20 20
21.video-abuse-video-link { 21.video-abuse-states .glyphicon-comment {
22 @include disable-outline; 22 margin-left: 0.5rem;
23 position: relative;
24 top: 3px;
25}
26
27.video-abuse-video {
28 display: inline-flex;
29
30 .video-abuse-video-image {
31 @include miniature-thumbnail;
32
33 $image-height: 45px;
34
35 height: $image-height;
36 width: #{(16/9) * $image-height};
37 margin-right: 0.5rem;
38 border-radius: 2px;
39 border: none;
40 background: transparent;
41 display: inline-flex;
42 justify-content: center;
43 align-items: center;
44 position: relative;
45
46 img {
47 height: 100%;
48 width: 100%;
49 border-radius: 2px;
50 }
51
52 span {
53 color: var(--inputPlaceholderColor);
54 }
55
56 .video-abuse-video-image-label {
57 @include static-thumbnail-overlay;
58 position: absolute;
59 border-radius: 3px;
60 font-size: 10px;
61 padding: 0 3px;
62 line-height: 1.3;
63 bottom: 2px;
64 right: 2px;
65 }
66 }
67
68 .video-abuse-video-text {
69 display: inline-flex;
70 flex-direction: column;
71 justify-content: center;
72 font-size: 90%;
73 color: var(--mainForegroundColor);
74 line-height: 1rem;
75
76 div .glyphicon {
77 font-size: 80%;
78 color: gray;
79 margin-left: 0.1rem;
80 }
81
82 div + div {
83 font-size: 80%;
84 }
85 }
86} 23}
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
index c5c0fdbbf..90a786ad0 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
@@ -8,7 +8,7 @@
8 <tr> 8 <tr>
9 <th style="width: 40px"></th> 9 <th style="width: 40px"></th>
10 <th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th> 10 <th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th>
11 <th style="width: 120px;" i18n>Sensitive</th> 11 <th style="width: 100px;" i18n>Sensitive</th>
12 <th style="width: 120px;" i18n>Unfederated</th> 12 <th style="width: 120px;" i18n>Unfederated</th>
13 <th style="width: 190px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th> 13 <th style="width: 190px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
14 <th style="width: 120px;"></th> 14 <th style="width: 120px;"></th>
@@ -25,8 +25,19 @@
25 </td> 25 </td>
26 26
27 <td> 27 <td>
28 <a [href]="getVideoUrl(videoBlacklist)" i18n-title title="Go to the video" target="_blank" rel="noopener noreferrer"> 28 <a [href]="getVideoUrl(videoBlacklist)" class="video-table-video-link" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
29 {{ videoBlacklist.video.name }} 29 <div class="video-table-video">
30 <div class="video-table-video-image">
31 <img [src]="videoBlacklist.video.thumbnailPath">
32 </div>
33 <div class="video-table-video-text">
34 <div>
35 {{ videoBlacklist.video.name }}
36 <span class="glyphicon glyphicon-new-window"></span>
37 </div>
38 <div class="text-muted">by {{ videoBlacklist.video.channel?.displayName }} on {{ videoBlacklist.video.channel?.host }} </div>
39 </div>
40 </div>
30 </a> 41 </a>
31 </td> 42 </td>
32 43
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
index 4e9965bee..c38d30865 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
@@ -38,7 +38,7 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
38 ngOnInit () { 38 ngOnInit () {
39 this.serverService.getConfig() 39 this.serverService.getConfig()
40 .subscribe(config => { 40 .subscribe(config => {
41 // don't filter if auto-blacklist not enabled as this will be only list 41 // don't filter if auto-blacklist not enabled as this will be the only list
42 if (config.autoBlacklist.videos.ofUsers.enabled) { 42 if (config.autoBlacklist.videos.ofUsers.enabled) {
43 this.listBlacklistTypeFilter = VideoBlacklistType.MANUAL 43 this.listBlacklistTypeFilter = VideoBlacklistType.MANUAL
44 } 44 }