add embed to block list details + allow blocked videos in embed

client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts

@@ -2,7 +2,7 @@ import { BytesPipe } from 'ngx-pipes'
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
-import { peertubeLocalStorage } from '@app/helpers/peertube-web-storage'
+import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { RedundancyService } from '@app/shared/shared-main'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoRedundanciesTarget, VideoRedundancy } from '@shared/models'

client/src/app/+admin/moderation/video-block-list/video-block-list.component.html

@@ -57,12 +57,12 @@ <h6 class="dropdown-header" i18n>Advanced block filters</h6>
  </td>
 
  <td>
- <a [href]="getVideoUrl(videoBlock)" class="video-table-video-link" [title]="videoBlock.video.name" target="_blank" rel="noopener noreferrer">
- <div class="video-table-video">
- <div class="video-table-video-image">
+ <a [href]="getVideoUrl(videoBlock)" class="table-video-link" [title]="videoBlock.video.name" target="_blank" rel="noopener noreferrer">
+ <div class="table-video">
+ <div class="table-video-image">
  <img [src]="videoBlock.video.thumbnailPath">
  </div>
- <div class="video-table-video-text">
+ <div class="table-video-text">
  <div>
  <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>
  {{ videoBlock.video.name }}
@@ -97,8 +97,20 @@ <h6 class="dropdown-header" i18n>Advanced block filters</h6>
  <tr>
  <td class="expand-cell" colspan="6">
  <div class="d-flex moderation-expanded">
- <span class="col-2 moderation-expanded-label" i18n>Block reason:</span>
- <span class="col-9 moderation-expanded-text" [innerHTML]="videoBlock.reasonHtml"></span>
+
+ <!-- block right part (block details) -->
+ <div class="col-8">
+ <span class="col-3 moderation-expanded-label" i18n>Block reason:</span>
+ <span class="col-9 moderation-expanded-text" [innerHTML]="videoBlock.reasonHtml"></span>
+ </div>
+
+ <!-- block right part (video embed) -->
+ <div class="col-4">
+ <div class="screenratio">
+ <div [innerHTML]="videoBlock.embedHtml"></div>
+ </div>
+ </div>
+
  </div>
  </td>
  </tr>

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' ]
 })
 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))
+ })
  }
  },
 

client/src/app/+admin/system/jobs/jobs.component.ts

@@ -1,7 +1,7 @@
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { Notifier, RestPagination, RestTable } from '@app/core'
-import { peertubeLocalStorage } from '@app/helpers/peertube-web-storage'
+import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { Job, JobState, JobType } from '@shared/models'
 import { JobStateClient } from '../../../../types/job-state-client.type'

client/src/app/+videos/+video-watch/video-watch-playlist.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, ComponentPagination, LocalStorageService, Notifier, SessionStorageService, UserService } from '@app/core'
-import { peertubeLocalStorage, peertubeSessionStorage } from '@app/helpers/peertube-web-storage'
+import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
 import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models'

client/src/app/+videos/+video-watch/video-watch.component.ts

@@ -7,7 +7,8 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, AuthUser, ConfirmService, MarkdownService, Notifier, RestExtractor, ServerService, UserService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { RedirectService } from '@app/core/routing/redirect.service'
-import { isXPercentInViewport, peertubeLocalStorage, scrollToTop } from '@app/helpers'
+import { isXPercentInViewport, scrollToTop } from '@app/helpers'
+import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
 import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'

client/src/app/app.component.ts

@@ -15,7 +15,8 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { BroadcastMessageLevel, getShortLocale, is18nPath, ServerConfig, UserRole } from '@shared/models'
 import { MenuService } from './core/menu/menu.service'
-import { peertubeLocalStorage, POP_STATE_MODAL_DISMISS } from './helpers'
+import { POP_STATE_MODAL_DISMISS } from './helpers'
+import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { InstanceService } from './shared/shared-instance'
 
 @Component({

client/src/app/core/auth/auth-user.model.ts

@@ -1,7 +1,7 @@
 import { Observable, of } from 'rxjs'
 import { map } from 'rxjs/operators'
 import { User } from '@app/core/users/user.model'
-import { peertubeLocalStorage } from '@app/helpers/peertube-web-storage'
+import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import {
  hasUserRight,
  MyUser as ServerMyUserModel,
@@ -12,66 +12,7 @@ import {
  UserRole,
  UserVideoQuota
 } from '@shared/models'
-
-export type TokenOptions = {
- accessToken: string
- refreshToken: string
- tokenType: string
-}
-
-// Private class only used by User
-class Tokens {
- private static KEYS = {
- ACCESS_TOKEN: 'access_token',
- REFRESH_TOKEN: 'refresh_token',
- TOKEN_TYPE: 'token_type'
- }
-
- accessToken: string
- refreshToken: string
- tokenType: string
-
- static load () {
- const accessTokenLocalStorage = peertubeLocalStorage.getItem(this.KEYS.ACCESS_TOKEN)
- const refreshTokenLocalStorage = peertubeLocalStorage.getItem(this.KEYS.REFRESH_TOKEN)
- const tokenTypeLocalStorage = peertubeLocalStorage.getItem(this.KEYS.TOKEN_TYPE)
-
- if (accessTokenLocalStorage && refreshTokenLocalStorage && tokenTypeLocalStorage) {
- return new Tokens({
- accessToken: accessTokenLocalStorage,
- refreshToken: refreshTokenLocalStorage,
- tokenType: tokenTypeLocalStorage
- })
- }
-
- return null
- }
-
- static flush () {
- peertubeLocalStorage.removeItem(this.KEYS.ACCESS_TOKEN)
- peertubeLocalStorage.removeItem(this.KEYS.REFRESH_TOKEN)
- peertubeLocalStorage.removeItem(this.KEYS.TOKEN_TYPE)
- }
-
- constructor (hash?: TokenOptions) {
- if (hash) {
- this.accessToken = hash.accessToken
- this.refreshToken = hash.refreshToken
-
- if (hash.tokenType === 'bearer') {
- this.tokenType = 'Bearer'
- } else {
- this.tokenType = hash.tokenType
- }
- }
- }
-
- save () {
- peertubeLocalStorage.setItem(Tokens.KEYS.ACCESS_TOKEN, this.accessToken)
- peertubeLocalStorage.setItem(Tokens.KEYS.REFRESH_TOKEN, this.refreshToken)
- peertubeLocalStorage.setItem(Tokens.KEYS.TOKEN_TYPE, this.tokenType)
- }
-}
+import { TokenOptions, Tokens } from '../../../root-helpers/pure-auth-user.model'
 
 export class AuthUser extends User implements ServerMyUserModel {
  tokens: Tokens

client/src/app/core/auth/auth.service.ts

@@ -5,7 +5,7 @@ import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Router } from '@angular/router'
 import { Notifier } from '@app/core/notification/notifier.service'
-import { objectToUrlEncoded, peertubeLocalStorage } from '@app/helpers'
+import { objectToUrlEncoded, peertubeLocalStorage } from '@root-helpers/index'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { MyUser as UserServerModel, OAuthClientLocal, User, UserLogin, UserRefreshToken } from '@shared/models'
 import { environment } from '../../../environments/environment'

client/src/app/core/rest/rest-table.ts

@@ -1,4 +1,4 @@
-import { peertubeLocalStorage } from '@app/helpers/peertube-web-storage'
+import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { LazyLoadEvent, SortMeta } from 'primeng/api'
 import { RestPagination } from './rest-pagination'
 import { Subject } from 'rxjs'

client/src/app/core/server/server.service.ts

@@ -2,7 +2,8 @@ import { Observable, of, Subject } from 'rxjs'
 import { first, map, share, shareReplay, switchMap, tap } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { Inject, Injectable, LOCALE_ID } from '@angular/core'
-import { getDevLocale, isOnDevLocale, peertubeLocalStorage, sortBy } from '@app/helpers'
+import { getDevLocale, isOnDevLocale, sortBy } from '@app/helpers'
+import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import {
  getCompleteLocale,
  isDefaultLocale,

client/src/app/core/users/user.model.ts

@@ -10,23 +10,10 @@ import {
  UserRole,
  VideoChannel
 } from '@shared/models'
+import { UserKeys } from '@root-helpers/user-keys'
 
 export class User implements UserServerModel {
- static KEYS = {
- ID: 'id',
- ROLE: 'role',
- EMAIL: 'email',
- VIDEOS_HISTORY_ENABLED: 'videos-history-enabled',
- USERNAME: 'username',
- NSFW_POLICY: 'nsfw_policy',
- WEBTORRENT_ENABLED: 'peertube-videojs-' + 'webtorrent_enabled',
- AUTO_PLAY_VIDEO: 'auto_play_video',
- SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO: 'auto_play_next_video',
- AUTO_PLAY_VIDEO_PLAYLIST: 'auto_play_video_playlist',
- THEME: 'theme',
- LAST_ACTIVE_THEME: 'last_active_theme',
- VIDEO_LANGUAGES: 'video_languages'
- }
+ static KEYS = UserKeys
 
  id: number
  username: string

client/src/app/core/wrappers/storage.service.ts

@@ -1,7 +1,7 @@
 import { Observable, Subject } from 'rxjs'
 import { filter } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
-import { peertubeLocalStorage, peertubeSessionStorage } from '@app/helpers'
+import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
 
 abstract class StorageService {
  protected instance: Storage

client/src/app/helpers/index.ts

@@ -1,6 +1,5 @@
 export * from './locales'
 export * from './constants'
 export * from './i18n-utils'
-export * from './peertube-web-storage'
 export * from './utils'
 export * from './zone'

client/src/app/helpers/utils.ts

@@ -81,15 +81,6 @@ function immutableAssign <A, B> (target: A, source: B) {
  return Object.assign({}, target, source)
 }
 
-function objectToUrlEncoded (obj: any) {
- const str: string[] = []
- for (const key of Object.keys(obj)) {
- str.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]))
- }
-
- return str.join('&')
-}
-
 // Thanks: https://gist.github.com/ghinda/8442a57f22099bdb2e34
 function objectToFormData (obj: any, form?: FormData, namespace?: string) {
  const fd = form || new FormData()
@@ -207,7 +198,6 @@ export {
  sortBy,
  durationToString,
  lineFeedToHtml,
- objectToUrlEncoded,
  getParameterByName,
  populateAsyncUserVideoChannels,
  getAbsoluteAPIUrl,

client/src/app/shared/shared-abuse-list/abuse-details.component.html

@@ -96,12 +96,8 @@
  <!-- report right part (video/comment details) -->
  <div class="col-4">
  <div *ngIf="abuse.video" class="screenratio">
- <div>
- <span i18n *ngIf="abuse.video.deleted">The video was deleted</span>
- <span i18n *ngIf="!abuse.video.deleted">The video was blocked</span>
- </div>
-
- <div *ngIf="!abuse.video.deleted && !abuse.video.blacklisted" [innerHTML]="abuse.embedHtml"></div>
+ <div *ngIf="abuse.video.deleted" i18n>The video was deleted</div>
+ <div *ngIf="!abuse.video.deleted" [innerHTML]="abuse.embedHtml"></div>
  </div>
 
  <div *ngIf="abuse.comment" class="comment-html">

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;

client/src/app/shared/shared-abuse-list/abuse-list-table.component.html

@@ -175,7 +175,7 @@ <h6 class="dropdown-header" i18n>Advanced report filters</h6>
 
  <ng-template pTemplate="rowexpansion" let-abuse>
  <tr>
- <td class="expand-cell" colspan="6">
+ <td class="expand-cell" colspan="8">
  <my-abuse-details [abuse]="abuse" [baseRoute]="baseRoute" [isAdminView]="isAdminView()"></my-abuse-details>
  </td>
  </tr>