From 71ab65d02f359000f9ca6a00f163d66d56a33955 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Thu, 2 Jul 2020 16:30:33 +0200 Subject: [PATCH] decouple video abuse details from embed, add embed to block list details --- .../video-block-list.component.html | 24 ++++++++++++++----- .../video-block-list.component.ts | 23 +++++++++++++++--- .../abuse-details.component.html | 8 ++----- .../abuse-details.component.scss | 17 ------------- .../abuse-list-table.component.html | 2 +- .../shared-main/feeds/feed.component.html | 2 +- .../shared/shared-moderation/moderation.scss | 17 +++++++++++++ client/src/standalone/videos/embed.ts | 13 ++++++++-- client/webpack/webpack.video-embed.js | 4 +++- 9 files changed, 73 insertions(+), 37 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 @@ - -
-
+ +
+
-
+
{{ videoBlock.video.name }} @@ -97,8 +97,20 @@
- Block reason: - + + +
+ Block reason: + +
+ + +
+
+
+
+
+
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' import { VideoBlockService } from '@app/shared/shared-moderation' import { I18n } from '@ngx-translate/i18n-polyfill' import { VideoBlacklist, VideoBlacklistType } from '@shared/models' +import { buildVideoEmbed, buildVideoLink } from 'src/assets/player/utils' +import { environment } from 'src/environments/environment' +import { DomSanitizer } from '@angular/platform-browser' @Component({ selector: 'my-video-block-list', templateUrl: './video-block-list.component.html', - styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-block-list.component.scss' ] + styleUrls: [ '../../../shared/shared-moderation/moderation.scss', '../../../shared/shared-abuse-list/abuse-list-table.component.scss', './video-block-list.component.scss' ] }) export class VideoBlockListComponent extends RestTable implements OnInit, AfterViewInit { - blocklist: (VideoBlacklist & { reasonHtml?: string })[] = [] + blocklist: (VideoBlacklist & { reasonHtml?: string, embedHtml?: string })[] = [] totalRecords = 0 sort: SortMeta = { field: 'createdAt', order: -1 } pagination: RestPagination = { count: this.rowsPerPage, start: 0 } @@ -28,6 +31,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV private confirmService: ConfirmService, private videoBlocklistService: VideoBlockService, private markdownRenderer: MarkdownService, + private sanitizer: DomSanitizer, private videoService: VideoService, private route: ActivatedRoute, private router: Router, @@ -171,6 +175,16 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV ) } + getVideoEmbed (entry: VideoBlacklist) { + return buildVideoEmbed( + buildVideoLink({ + baseUrl: `${environment.embedUrl}/videos/embed/${entry.video.uuid}`, + title: false, + warningTitle: false + }) + ) + } + protected loadData () { this.videoBlocklistService.listBlocks({ pagination: this.pagination, @@ -184,7 +198,10 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV this.blocklist = resultList.data for (const element of this.blocklist) { - Object.assign(element, { reasonHtml: await this.toHtml(element.reason) }) + Object.assign(element, { + reasonHtml: await this.toHtml(element.reason), + embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(element)) + }) } }, 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 @@
-
- The video was deleted - The video was blocked -
- -
+
The video was deleted
+
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 @@ @import 'mixins'; @import 'miniature'; -.screenratio { - div { - @include miniature-thumbnail; - - display: inline-flex; - justify-content: center; - align-items: center; - color: pvar(--inputPlaceholderColor); - } - - @include large-screen-ratio($selector: 'div, ::ng-deep iframe') { - width: 100% !important; - height: 100% !important; - left: 0; - }; -} - .comment-html { background-color: #ececec; 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 @@ - + 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 @@
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 @@ } } +.screenratio { + div { + @include miniature-thumbnail; + + display: inline-flex; + justify-content: center; + align-items: center; + color: pvar(--inputPlaceholderColor); + } + + @include large-screen-ratio($selector: 'div, ::ng-deep iframe') { + width: 100% !important; + height: 100% !important; + left: 0; + }; +} + .input-group { @include peertube-input-group(300px); 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' import { TranslationsManager } from '../../assets/player/translations-manager' import videojs from 'video.js' import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings' +import { AuthUser } from '@app/core/auth/auth-user.model' type Translations = { [ id: string ]: string } @@ -42,6 +43,9 @@ export class PeerTubeEmbed { mode: PlayerMode scope = 'peertube' + user: AuthUser + headers = new Headers() + static async main () { const videoContainerId = 'video-container' const embed = new PeerTubeEmbed(videoContainerId) @@ -57,11 +61,11 @@ export class PeerTubeEmbed { } loadVideoInfo (videoId: string): Promise { - return fetch(this.getVideoUrl(videoId)) + return fetch(this.getVideoUrl(videoId), { headers: this.headers }) } loadVideoCaptions (videoId: string): Promise { - return fetch(this.getVideoUrl(videoId) + '/captions') + return fetch(this.getVideoUrl(videoId) + '/captions', { headers: this.headers }) } loadConfig (): Promise { @@ -111,6 +115,7 @@ export class PeerTubeEmbed { async init () { try { + this.user = AuthUser.load() await this.initCore() } catch (e) { console.error(e) @@ -163,6 +168,10 @@ export class PeerTubeEmbed { const urlParts = window.location.pathname.split('/') const videoId = urlParts[ urlParts.length - 1 ] + if (this.user) { + this.headers.set('Authorization', `${this.user.getTokenType()} ${this.user.getAccessToken()}`) + } + const videoPromise = this.loadVideoInfo(videoId) const captionsPromise = this.loadVideoCaptions(videoId) const configPromise = this.loadConfig() diff --git a/client/webpack/webpack.video-embed.js b/client/webpack/webpack.video-embed.js index e7671d3ea..319b00e5d 100644 --- a/client/webpack/webpack.video-embed.js +++ b/client/webpack/webpack.video-embed.js @@ -27,7 +27,9 @@ module.exports = function () { modules: [ helpers.root('src'), helpers.root('node_modules') ], alias: { - 'video.js$': path.resolve('node_modules/video.js/core.js') + 'video.js$': path.resolve('node_modules/video.js/core.js'), + '@app': path.resolve('src/app'), + '@shared': path.resolve('../shared') } }, -- 2.41.0