aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-07-02 16:30:33 +0200
committerChocobozzz <chocobozzz@cpy.re>2020-08-06 15:08:58 +0200
commit71ab65d02f359000f9ca6a00f163d66d56a33955 (patch)
tree0fb0460b05b90f151a8a24f1dc3a82c6c5697546 /client/src
parenta3b5e78af3696f807e54bc4b11e559bbd9b6ba1e (diff)
downloadPeerTube-71ab65d02f359000f9ca6a00f163d66d56a33955.tar.gz
PeerTube-71ab65d02f359000f9ca6a00f163d66d56a33955.tar.zst
PeerTube-71ab65d02f359000f9ca6a00f163d66d56a33955.zip
decouple video abuse details from embed, add embed to block list details
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+admin/moderation/video-block-list/video-block-list.component.html24
-rw-r--r--client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts23
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-details.component.html8
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-details.component.scss17
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-list-table.component.html2
-rw-r--r--client/src/app/shared/shared-main/feeds/feed.component.html2
-rw-r--r--client/src/app/shared/shared-moderation/moderation.scss17
-rw-r--r--client/src/standalone/videos/embed.ts13
8 files changed, 70 insertions, 36 deletions
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
index 278e68a96..d39aacb76 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@@ -57,12 +57,12 @@
57 </td> 57 </td>
58 58
59 <td> 59 <td>
60 <a [href]="getVideoUrl(videoBlock)" class="video-table-video-link" [title]="videoBlock.video.name" target="_blank" rel="noopener noreferrer"> 60 <a [href]="getVideoUrl(videoBlock)" class="table-video-link" [title]="videoBlock.video.name" target="_blank" rel="noopener noreferrer">
61 <div class="video-table-video"> 61 <div class="table-video">
62 <div class="video-table-video-image"> 62 <div class="table-video-image">
63 <img [src]="videoBlock.video.thumbnailPath"> 63 <img [src]="videoBlock.video.thumbnailPath">
64 </div> 64 </div>
65 <div class="video-table-video-text"> 65 <div class="table-video-text">
66 <div> 66 <div>
67 <my-global-icon i18n-title title="The video was blocked due to automatic blocking of new videos" *ngIf="videoBlock.type == 2" iconName="robot"></my-global-icon> 67 <my-global-icon i18n-title title="The video was blocked due to automatic blocking of new videos" *ngIf="videoBlock.type == 2" iconName="robot"></my-global-icon>
68 {{ videoBlock.video.name }} 68 {{ videoBlock.video.name }}
@@ -97,8 +97,20 @@
97 <tr> 97 <tr>
98 <td class="expand-cell" colspan="6"> 98 <td class="expand-cell" colspan="6">
99 <div class="d-flex moderation-expanded"> 99 <div class="d-flex moderation-expanded">
100 <span class="col-2 moderation-expanded-label" i18n>Block reason:</span> 100
101 <span class="col-9 moderation-expanded-text" [innerHTML]="videoBlock.reasonHtml"></span> 101 <!-- block right part (block details) -->
102 <div class="col-8">
103 <span class="col-3 moderation-expanded-label" i18n>Block reason:</span>
104 <span class="col-9 moderation-expanded-text" [innerHTML]="videoBlock.reasonHtml"></span>
105 </div>
106
107 <!-- block right part (video embed) -->
108 <div class="col-4">
109 <div class="screenratio">
110 <div [innerHTML]="videoBlock.embedHtml"></div>
111 </div>
112 </div>
113
102 </div> 114 </div>
103 </td> 115 </td>
104 </tr> 116 </tr>
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
index dfdf65c19..e94c293ca 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
@@ -7,14 +7,17 @@ import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
7import { VideoBlockService } from '@app/shared/shared-moderation' 7import { VideoBlockService } from '@app/shared/shared-moderation'
8import { I18n } from '@ngx-translate/i18n-polyfill' 8import { I18n } from '@ngx-translate/i18n-polyfill'
9import { VideoBlacklist, VideoBlacklistType } from '@shared/models' 9import { VideoBlacklist, VideoBlacklistType } from '@shared/models'
10import { buildVideoEmbed, buildVideoLink } from 'src/assets/player/utils'
11import { environment } from 'src/environments/environment'
12import { DomSanitizer } from '@angular/platform-browser'
10 13
11@Component({ 14@Component({
12 selector: 'my-video-block-list', 15 selector: 'my-video-block-list',
13 templateUrl: './video-block-list.component.html', 16 templateUrl: './video-block-list.component.html',
14 styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-block-list.component.scss' ] 17 styleUrls: [ '../../../shared/shared-moderation/moderation.scss', '../../../shared/shared-abuse-list/abuse-list-table.component.scss', './video-block-list.component.scss' ]
15}) 18})
16export class VideoBlockListComponent extends RestTable implements OnInit, AfterViewInit { 19export class VideoBlockListComponent extends RestTable implements OnInit, AfterViewInit {
17 blocklist: (VideoBlacklist & { reasonHtml?: string })[] = [] 20 blocklist: (VideoBlacklist & { reasonHtml?: string, embedHtml?: string })[] = []
18 totalRecords = 0 21 totalRecords = 0
19 sort: SortMeta = { field: 'createdAt', order: -1 } 22 sort: SortMeta = { field: 'createdAt', order: -1 }
20 pagination: RestPagination = { count: this.rowsPerPage, start: 0 } 23 pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
@@ -28,6 +31,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
28 private confirmService: ConfirmService, 31 private confirmService: ConfirmService,
29 private videoBlocklistService: VideoBlockService, 32 private videoBlocklistService: VideoBlockService,
30 private markdownRenderer: MarkdownService, 33 private markdownRenderer: MarkdownService,
34 private sanitizer: DomSanitizer,
31 private videoService: VideoService, 35 private videoService: VideoService,
32 private route: ActivatedRoute, 36 private route: ActivatedRoute,
33 private router: Router, 37 private router: Router,
@@ -171,6 +175,16 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
171 ) 175 )
172 } 176 }
173 177
178 getVideoEmbed (entry: VideoBlacklist) {
179 return buildVideoEmbed(
180 buildVideoLink({
181 baseUrl: `${environment.embedUrl}/videos/embed/${entry.video.uuid}`,
182 title: false,
183 warningTitle: false
184 })
185 )
186 }
187
174 protected loadData () { 188 protected loadData () {
175 this.videoBlocklistService.listBlocks({ 189 this.videoBlocklistService.listBlocks({
176 pagination: this.pagination, 190 pagination: this.pagination,
@@ -184,7 +198,10 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
184 this.blocklist = resultList.data 198 this.blocklist = resultList.data
185 199
186 for (const element of this.blocklist) { 200 for (const element of this.blocklist) {
187 Object.assign(element, { reasonHtml: await this.toHtml(element.reason) }) 201 Object.assign(element, {
202 reasonHtml: await this.toHtml(element.reason),
203 embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(element))
204 })
188 } 205 }
189 }, 206 },
190 207
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index 431fdf5aa..fb8366f4c 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -96,12 +96,8 @@
96 <!-- report right part (video/comment details) --> 96 <!-- report right part (video/comment details) -->
97 <div class="col-4"> 97 <div class="col-4">
98 <div *ngIf="abuse.video" class="screenratio"> 98 <div *ngIf="abuse.video" class="screenratio">
99 <div> 99 <div *ngIf="abuse.video.deleted" i18n>The video was deleted</div>
100 <span i18n *ngIf="abuse.video.deleted">The video was deleted</span> 100 <div *ngIf="!abuse.video.deleted" [innerHTML]="abuse.embedHtml"></div>
101 <span i18n *ngIf="!abuse.video.deleted">The video was blocked</span>
102 </div>
103
104 <div *ngIf="!abuse.video.deleted && !abuse.video.blacklisted" [innerHTML]="abuse.embedHtml"></div>
105 </div> 101 </div>
106 102
107 <div *ngIf="abuse.comment" class="comment-html"> 103 <div *ngIf="abuse.comment" class="comment-html">
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
index d83eb974d..8f8f3ac2e 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
@@ -2,23 +2,6 @@
2@import 'mixins'; 2@import 'mixins';
3@import 'miniature'; 3@import 'miniature';
4 4
5.screenratio {
6 div {
7 @include miniature-thumbnail;
8
9 display: inline-flex;
10 justify-content: center;
11 align-items: center;
12 color: pvar(--inputPlaceholderColor);
13 }
14
15 @include large-screen-ratio($selector: 'div, ::ng-deep iframe') {
16 width: 100% !important;
17 height: 100% !important;
18 left: 0;
19 };
20}
21
22.comment-html { 5.comment-html {
23 background-color: #ececec; 6 background-color: #ececec;
24 padding: 10px; 7 padding: 10px;
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index d90b93fff..d8fe8b2d3 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -175,7 +175,7 @@
175 175
176 <ng-template pTemplate="rowexpansion" let-abuse> 176 <ng-template pTemplate="rowexpansion" let-abuse>
177 <tr> 177 <tr>
178 <td class="expand-cell" colspan="6"> 178 <td class="expand-cell" colspan="8">
179 <my-abuse-details [abuse]="abuse" [baseRoute]="baseRoute" [isAdminView]="isAdminView()"></my-abuse-details> 179 <my-abuse-details [abuse]="abuse" [baseRoute]="baseRoute" [isAdminView]="isAdminView()"></my-abuse-details>
180 </td> 180 </td>
181 </tr> 181 </tr>
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.html b/client/src/app/shared/shared-main/feeds/feed.component.html
index 6b8013a9b..13883fd9b 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.html
+++ b/client/src/app/shared/shared-main/feeds/feed.component.html
@@ -1,6 +1,6 @@
1<div class="video-feed"> 1<div class="video-feed">
2 <my-global-icon 2 <my-global-icon
3 *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="left auto" 3 *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom left auto"
4 class="icon-syndication" role="button" iconName="syndication" 4 class="icon-syndication" role="button" iconName="syndication"
5 > 5 >
6 </my-global-icon> 6 </my-global-icon>
diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss
index 260346dc5..c9f0d0c42 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -22,6 +22,23 @@
22 } 22 }
23} 23}
24 24
25.screenratio {
26 div {
27 @include miniature-thumbnail;
28
29 display: inline-flex;
30 justify-content: center;
31 align-items: center;
32 color: pvar(--inputPlaceholderColor);
33 }
34
35 @include large-screen-ratio($selector: 'div, ::ng-deep iframe') {
36 width: 100% !important;
37 height: 100% !important;
38 left: 0;
39 };
40}
41
25.input-group { 42.input-group {
26 @include peertube-input-group(300px); 43 @include peertube-input-group(300px);
27 44
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 468b1889f..dca23ca7e 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -17,6 +17,7 @@ import { PeerTubeEmbedApi } from './embed-api'
17import { TranslationsManager } from '../../assets/player/translations-manager' 17import { TranslationsManager } from '../../assets/player/translations-manager'
18import videojs from 'video.js' 18import videojs from 'video.js'
19import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings' 19import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
20import { AuthUser } from '@app/core/auth/auth-user.model'
20 21
21type Translations = { [ id: string ]: string } 22type Translations = { [ id: string ]: string }
22 23
@@ -42,6 +43,9 @@ export class PeerTubeEmbed {
42 mode: PlayerMode 43 mode: PlayerMode
43 scope = 'peertube' 44 scope = 'peertube'
44 45
46 user: AuthUser
47 headers = new Headers()
48
45 static async main () { 49 static async main () {
46 const videoContainerId = 'video-container' 50 const videoContainerId = 'video-container'
47 const embed = new PeerTubeEmbed(videoContainerId) 51 const embed = new PeerTubeEmbed(videoContainerId)
@@ -57,11 +61,11 @@ export class PeerTubeEmbed {
57 } 61 }
58 62
59 loadVideoInfo (videoId: string): Promise<Response> { 63 loadVideoInfo (videoId: string): Promise<Response> {
60 return fetch(this.getVideoUrl(videoId)) 64 return fetch(this.getVideoUrl(videoId), { headers: this.headers })
61 } 65 }
62 66
63 loadVideoCaptions (videoId: string): Promise<Response> { 67 loadVideoCaptions (videoId: string): Promise<Response> {
64 return fetch(this.getVideoUrl(videoId) + '/captions') 68 return fetch(this.getVideoUrl(videoId) + '/captions', { headers: this.headers })
65 } 69 }
66 70
67 loadConfig (): Promise<Response> { 71 loadConfig (): Promise<Response> {
@@ -111,6 +115,7 @@ export class PeerTubeEmbed {
111 115
112 async init () { 116 async init () {
113 try { 117 try {
118 this.user = AuthUser.load()
114 await this.initCore() 119 await this.initCore()
115 } catch (e) { 120 } catch (e) {
116 console.error(e) 121 console.error(e)
@@ -163,6 +168,10 @@ export class PeerTubeEmbed {
163 const urlParts = window.location.pathname.split('/') 168 const urlParts = window.location.pathname.split('/')
164 const videoId = urlParts[ urlParts.length - 1 ] 169 const videoId = urlParts[ urlParts.length - 1 ]
165 170
171 if (this.user) {
172 this.headers.set('Authorization', `${this.user.getTokenType()} ${this.user.getAccessToken()}`)
173 }
174
166 const videoPromise = this.loadVideoInfo(videoId) 175 const videoPromise = this.loadVideoInfo(videoId)
167 const captionsPromise = this.loadVideoCaptions(videoId) 176 const captionsPromise = this.loadVideoCaptions(videoId)
168 const configPromise = this.loadConfig() 177 const configPromise = this.loadConfig()