18 files changed, 104 insertions, 58 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 3ceea02ca..6ae7b1b79 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -63,7 +63,7 @@
     <div class="col-md-7 col-xl-5"></div>
     <div class="col-md-5 col-xl-5">
 
-      <div class="form-error submit-error" i18n *ngIf="!form.valid">
+      <div class="form-error submit-error" i18n *ngIf="!form.valid && serverConfig.allowEdits">
         There are errors in the form:
 
         <ul>
@@ -77,7 +77,11 @@
         You cannot allow live replay if you don't enable transcoding.
       </span>
 
-      <input (click)="formValidated()" type="submit" i18n-value value="Update configuration" [disabled]="!form.valid || !hasConsistentOptions()">
+      <span i18n *ngIf="!serverConfig.allowEdits">
+        You cannot change the server configuration because it's managed externally.
+      </span>
+
+      <input (click)="formValidated()" type="submit" i18n-value value="Update configuration" [disabled]="!form.valid || !hasConsistentOptions() || !serverConfig.allowEdits">
     </div>
   </div>
 </form>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index 5951d0aaa..0458d257f 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -33,6 +33,11 @@ input[type=number] {
     top: 5px;
     right: 2.5rem;
   }
+
+  input[disabled] {
+    background-color: #f9f9f9;
+    pointer-events: none;
+  }
 }
 
 input[type=checkbox] {
@@ -93,6 +98,11 @@ textarea {
   }
 }
 
+input[disabled] {
+  opacity: 0.5;
+}
+
+
 .form-group-right {
   padding-top: 2px;
 }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index f13fe4bf9..04b0175a7 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -258,6 +258,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
 
     this.loadConfigAndUpdateForm()
     this.loadCategoriesAndLanguages()
+    if (!this.serverConfig.allowEdits) {
+      this.form.disable()
+    }
   }
 
   formValidated () {
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts
index d6959a50e..8fba423c3 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts
@@ -155,7 +155,7 @@ export class MyVideoPlaylistElementsComponent implements OnInit, OnDestroy {
   }
 
   private loadElements () {
-    this.videoPlaylistService.getPlaylistVideos(this.videoPlaylistId, this.pagination)
+    this.videoPlaylistService.getPlaylistVideos({ videoPlaylistId: this.videoPlaylistId, componentPagination: this.pagination })
         .subscribe(({ total, data }) => {
           this.playlistElements = this.playlistElements.concat(data)
           this.pagination.totalItems = total
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
index 78b3af4a7..b2863fed6 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
@@ -1,6 +1,14 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { Router } from '@angular/router'
-import { AuthService, ComponentPagination, LocalStorageService, Notifier, SessionStorageService, UserService } from '@app/core'
+import {
+  AuthService,
+  ComponentPagination,
+  HooksService,
+  LocalStorageService,
+  Notifier,
+  SessionStorageService,
+  UserService
+} from '@app/core'
 import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
 import { VideoPlaylistPrivacy } from '@shared/models'
@@ -34,6 +42,7 @@ export class VideoWatchPlaylistComponent {
   currentPlaylistPosition: number
 
   constructor (
+    private hooks: HooksService,
     private userService: UserService,
     private auth: AuthService,
     private notifier: Notifier,
@@ -87,31 +96,38 @@ export class VideoWatchPlaylistComponent {
   }
 
   loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false, position?: number) {
-    this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination)
-        .subscribe(({ total, data }) => {
-          this.playlistElements = this.playlistElements.concat(data)
-          this.playlistPagination.totalItems = total
-
-          const firstAvailableVideo = this.playlistElements.find(e => !!e.video)
-          if (!firstAvailableVideo) {
-            this.noPlaylistVideos = true
-            return
-          }
-
-          if (position) this.updatePlaylistIndex(position)
-
-          if (redirectToFirst) {
-            const extras = {
-              queryParams: {
-                start: firstAvailableVideo.startTimestamp,
-                stop: firstAvailableVideo.stopTimestamp,
-                playlistPosition: firstAvailableVideo.position
-              },
-              replaceUrl: true
-            }
-            this.router.navigate([], extras)
-          }
-        })
+    const obs = this.hooks.wrapObsFun(
+      this.videoPlaylist.getPlaylistVideos.bind(this.videoPlaylist),
+      { videoPlaylistId: playlist.uuid, componentPagination: this.playlistPagination },
+      'video-watch',
+      'filter:api.video-watch.video-playlist-elements.get.params',
+      'filter:api.video-watch.video-playlist-elements.get.result'
+    )
+
+    obs.subscribe(({ total, data: playlistElements }) => {
+      this.playlistElements = this.playlistElements.concat(playlistElements)
+      this.playlistPagination.totalItems = total
+
+      const firstAvailableVideo = this.playlistElements.find(e => !!e.video)
+      if (!firstAvailableVideo) {
+        this.noPlaylistVideos = true
+        return
+      }
+
+      if (position) this.updatePlaylistIndex(position)
+
+      if (redirectToFirst) {
+        const extras = {
+          queryParams: {
+            start: firstAvailableVideo.startTimestamp,
+            stop: firstAvailableVideo.stopTimestamp,
+            playlistPosition: firstAvailableVideo.position
+          },
+          replaceUrl: true
+        }
+        this.router.navigate([], extras)
+      }
+    })
   }
 
   updatePlaylistIndex (position: number) {
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 acfd46a41..f0d159be3 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -455,7 +455,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         this.zone.run(() => this.theaterEnabled = enabled)
       })
 
-      this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', { player: this.player, videojs, video: this.video })
+      this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', {
+        player: this.player,
+        playlist: this.playlist,
+        playlistPosition: this.playlistPosition,
+        videojs,
+        video: this.video
+      })
     })
   }
 
diff --git a/client/src/app/core/routing/menu-guard.service.ts b/client/src/app/core/routing/menu-guard.service.ts
index 8c5bbfde9..58ad31cf4 100644
--- a/client/src/app/core/routing/menu-guard.service.ts
+++ b/client/src/app/core/routing/menu-guard.service.ts
@@ -4,11 +4,10 @@ import { MenuService } from '../menu'
 import { ScreenService } from '../wrappers'
 
 abstract class MenuGuard implements CanActivate, CanDeactivate<any> {
-  display = true
   canDeactivate = this.canActivate
 
-  constructor (protected menu: MenuService, protected screen: ScreenService, display: boolean) {
-    this.display = display
+  constructor (protected menu: MenuService, protected screen: ScreenService, protected display: boolean) {
+
   }
 
   canActivate (): boolean {
diff --git a/client/src/app/helpers/utils/url.ts b/client/src/app/helpers/utils/url.ts
index 82d9cc11b..b3cded8f4 100644
--- a/client/src/app/helpers/utils/url.ts
+++ b/client/src/app/helpers/utils/url.ts
@@ -1,19 +1,5 @@
 import { environment } from '../../../environments/environment'
 
-// Thanks: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
-function getParameterByName (name: string, url: string) {
-  if (!url) url = window.location.href
-  name = name.replace(/[[\]]/g, '\\$&')
-
-  const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)')
-  const results = regex.exec(url)
-
-  if (!results) return null
-  if (!results[2]) return ''
-
-  return decodeURIComponent(results[2].replace(/\+/g, ' '))
-}
-
 function getAbsoluteAPIUrl () {
   let absoluteAPIUrl = environment.hmr === true
     ? 'http://localhost:9000'
@@ -64,7 +50,6 @@ function objectToFormData (obj: any, form?: FormData, namespace?: string) {
 }
 
 export {
-  getParameterByName,
   objectToFormData,
   getAbsoluteAPIUrl,
   getAbsoluteEmbedUrl
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.html b/client/src/app/shared/shared-forms/markdown-textarea.component.html
index 6e70e2f37..a460cb9b7 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.html
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.html
@@ -2,6 +2,7 @@
   <textarea #textarea
     [(ngModel)]="content" (ngModelChange)="onModelChange()"
     class="form-control" [ngClass]="classes"
+    [attr.disabled]="disabled"
     [ngStyle]="{ height: textareaHeight }"
     [id]="name" [name]="name">
   </textarea>
@@ -25,11 +26,11 @@
     </ng-container>
 
     <my-button
-      *ngIf="!isMaximized" [title]="maximizeInText" className="maximize-button" icon="fullscreen" (click)="onMaximizeClick()"
+      *ngIf="!isMaximized" [title]="maximizeInText" className="maximize-button" icon="fullscreen" (click)="onMaximizeClick()" [disabled]="disabled"
     ></my-button>
 
     <my-button
-      *ngIf="isMaximized" [title]="maximizeOutText" className="maximize-button" icon="exit-fullscreen" (click)="onMaximizeClick()"
+      *ngIf="isMaximized" [title]="maximizeOutText" className="maximize-button" icon="exit-fullscreen" (click)="onMaximizeClick()" [disabled]="disabled"
     ></my-button>
   </div>
 
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.ts b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
index 8f51d47df..dcb5d20da 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
@@ -45,6 +45,7 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   previewHTML: SafeHtml | string = ''
 
   isMaximized = false
+  disabled = false
 
   maximizeInText = $localize`Maximize editor`
   maximizeOutText = $localize`Exit maximized editor`
@@ -108,6 +109,10 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
     }
   }
 
+  setDisabledState (isDisabled: boolean) {
+    this.disabled = isDisabled
+  }
+
   private lockBodyScroll () {
     this.scrollPosition = this.viewportScroller.getScrollPosition()
     document.getElementById('content').classList.add('lock-scroll')
@@ -132,8 +137,6 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
       const result = await this.customMarkdownRenderer(text)
 
       if (result instanceof HTMLElement) {
-        html = ''
-
         const wrapperElement = this.previewElement.nativeElement as HTMLElement
         wrapperElement.innerHTML = ''
         wrapperElement.appendChild(result)
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.html b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
index 7b49a0c01..03db2875b 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
@@ -7,6 +7,7 @@
   [multiple]="true"
   [searchable]="true"
   [closeOnSelect]="false"
+  [disabled]="disabled"
 
   bindValue="id"
   bindLabel="label"
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.ts b/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
index 12f697628..c9a500324 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
@@ -23,6 +23,8 @@ export class SelectCheckboxComponent implements OnInit, ControlValueAccessor {
   @Input() selectableGroupAsModel: boolean
   @Input() placeholder: string
 
+  disabled = false
+
   ngOnInit () {
     if (!this.placeholder) this.placeholder = $localize`Add a new option`
   }
@@ -59,6 +61,10 @@ export class SelectCheckboxComponent implements OnInit, ControlValueAccessor {
     this.propagateChange(this.selectedItems)
   }
 
+  setDisabledState (isDisabled: boolean) {
+    this.disabled = isDisabled
+  }
+
   compareFn (item: SelectOptionsItem, selected: ItemSelectCheckboxValue) {
     if (typeof selected === 'string' || typeof selected === 'number') {
       return item.id === selected
diff --git a/client/src/app/shared/shared-forms/select/select-custom-value.component.html b/client/src/app/shared/shared-forms/select/select-custom-value.component.html
index 9dc8c2ec2..69fdedc10 100644
--- a/client/src/app/shared/shared-forms/select/select-custom-value.component.html
+++ b/client/src/app/shared/shared-forms/select/select-custom-value.component.html
@@ -5,6 +5,7 @@
     [searchable]="searchable"
     [groupBy]="groupBy"
     [labelForId]="labelForId"
+    [disabled]="disabled"
 
     [(ngModel)]="selectedId"
     (ngModelChange)="onModelChange()"
diff --git a/client/src/app/shared/shared-forms/select/select-custom-value.component.ts b/client/src/app/shared/shared-forms/select/select-custom-value.component.ts
index bc6b863c7..636bd6101 100644
--- a/client/src/app/shared/shared-forms/select/select-custom-value.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-custom-value.component.ts
@@ -25,6 +25,7 @@ export class SelectCustomValueComponent implements ControlValueAccessor, OnChang
 
   customValue: number | string = ''
   selectedId: number | string
+  disabled = false
 
   itemsWithCustom: SelectOptionsItem[] = []
 
@@ -75,4 +76,8 @@ export class SelectCustomValueComponent implements ControlValueAccessor, OnChang
   isCustomValue () {
     return this.selectedId === 'other'
   }
+
+  setDisabledState (isDisabled: boolean) {
+    this.disabled = isDisabled
+  }
 }
diff --git a/client/src/app/shared/shared-forms/select/select-options.component.html b/client/src/app/shared/shared-forms/select/select-options.component.html
index 3b1761255..83c7de9f5 100644
--- a/client/src/app/shared/shared-forms/select/select-options.component.html
+++ b/client/src/app/shared/shared-forms/select/select-options.component.html
@@ -7,6 +7,7 @@
   [labelForId]="labelForId"
   [searchable]="searchable"
   [searchFn]="searchFn"
+  [disabled]="disabled"
 
   bindLabel="label"
   bindValue="id"
diff --git a/client/src/app/shared/shared-forms/select/select-options.component.ts b/client/src/app/shared/shared-forms/select/select-options.component.ts
index 8482b9dea..820a82c24 100644
--- a/client/src/app/shared/shared-forms/select/select-options.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-options.component.ts
@@ -23,6 +23,7 @@ export class SelectOptionsComponent implements ControlValueAccessor {
   @Input() searchFn: any
 
   selectedId: number | string
+  disabled = false
 
   propagateChange = (_: any) => { /* empty */ }
 
@@ -48,4 +49,8 @@ export class SelectOptionsComponent implements ControlValueAccessor {
   onModelChange () {
     this.propagateChange(this.selectedId)
   }
+
+  setDisabledState (isDisabled: boolean) {
+    this.disabled = isDisabled
+  }
 }
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
index 66d4cac68..ac2679b42 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
@@ -41,7 +41,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
   }
 
   static GET_DEFAULT_AVATAR_URL () {
-    return `${window.location.origin}/client/assets/images/default-avatar-videochannel.png`
+    return `${window.location.origin}/client/assets/images/default-avatar-video-channel.png`
   }
 
   constructor (hash: Partial<ServerVideoChannel>) {
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
index 0a01af593..76835b9fc 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
@@ -256,12 +256,12 @@ export class VideoPlaylistService {
                )
   }
 
-  getPlaylistVideos (
-    videoPlaylistId: number | string,
+  getPlaylistVideos (options: {
+    videoPlaylistId: number | string
     componentPagination: ComponentPaginationLight
-  ): Observable<ResultList<VideoPlaylistElement>> {
-    const path = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylistId + '/videos'
-    const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
+  }): Observable<ResultList<VideoPlaylistElement>> {
+    const path = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + options.videoPlaylistId + '/videos'
+    const pagination = this.restService.componentPaginationToRestPagination(options.componentPagination)
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination)