Alert user for low quota and video auto-block on upload page (#4336)

[github/Chocobozzz/PeerTube.git] / client / src / app / +videos / +video-edit / video-update.component.ts

import { of } from 'rxjs'
import { map, switchMap } from 'rxjs/operators'
import { SelectChannelItem } from 'src/types/select-options-item.model'
import { Component, HostListener, OnInit } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'
import { Notifier } from '@app/core'
import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
import { Video, VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
import { LiveVideoService } from '@app/shared/shared-video-live'
import { LoadingBarService } from '@ngx-loading-bar/core'
import { LiveVideo, LiveVideoUpdate, VideoPrivacy } from '@shared/models'
import { hydrateFormFromVideo } from './shared/video-edit-utils'

@Component({
  selector: 'my-videos-update',
  styleUrls: [ './shared/video-edit.component.scss' ],
  templateUrl: './video-update.component.html'
})
export class VideoUpdateComponent extends FormReactive implements OnInit {
  video: VideoEdit
  videoDetails: VideoDetails
  userVideoChannels: SelectChannelItem[] = []
  videoCaptions: VideoCaptionEdit[] = []
  liveVideo: LiveVideo

  isUpdatingVideo = false
  schedulePublicationPossible = false
  waitTranscodingEnabled = true

  private updateDone = false

  constructor (
    protected formValidatorService: FormValidatorService,
    private route: ActivatedRoute,
    private router: Router,
    private notifier: Notifier,
    private videoService: VideoService,
    private loadingBar: LoadingBarService,
    private videoCaptionService: VideoCaptionService,
    private liveVideoService: LiveVideoService
  ) {
    super()
  }

  ngOnInit () {
    this.buildForm({})

    this.route.data
        .pipe(map(data => data.videoData))
        .subscribe({
          next: ({ video, videoChannels, videoCaptions, liveVideo }) => {
            this.video = new VideoEdit(video)
            this.videoDetails = video

            this.userVideoChannels = videoChannels
            this.videoCaptions = videoCaptions
            this.liveVideo = liveVideo

            this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE

            // FIXME: Angular does not detect the change inside this subscription, so use the patched setTimeout
            setTimeout(() => {
              hydrateFormFromVideo(this.form, this.video, true)

              if (this.liveVideo) {
                this.form.patchValue({
                  saveReplay: this.liveVideo.saveReplay,
                  permanentLive: this.liveVideo.permanentLive
                })
              }
            })
          },

          error: err => {
            console.error(err)
            this.notifier.error(err.message)
          }
        })
  }

  @HostListener('window:beforeunload', [ '$event' ])
  onUnload (event: any) {
    const { text, canDeactivate } = this.canDeactivate()

    if (canDeactivate) return

    event.returnValue = text
    return text
  }

  canDeactivate (): { canDeactivate: boolean, text?: string } {
    if (this.updateDone === true) return { canDeactivate: true }

    const text = $localize`You have unsaved changes! If you leave, your changes will be lost.`

    for (const caption of this.videoCaptions) {
      if (caption.action) return { canDeactivate: false, text }
    }

    return { canDeactivate: this.formChanged === false, text }
  }

  checkForm () {
    this.forceCheck()

    return this.form.valid
  }

  isWaitTranscodingEnabled () {
    if (this.videoDetails.getFiles().length > 1) { // Already transcoded
      return false
    }

    if (this.liveVideo && this.form.value['saveReplay'] !== true) {
      return false
    }

    return true
  }

  update () {
    if (this.checkForm() === false || this.isUpdatingVideo === true) {
      return
    }

    this.video.patch(this.form.value)

    this.loadingBar.useRef().start()
    this.isUpdatingVideo = true

    // Update the video
    this.videoService.updateVideo(this.video)
        .pipe(
          // Then update captions
          switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions)),

          switchMap(() => {
            if (!this.liveVideo) return of(undefined)

            const liveVideoUpdate: LiveVideoUpdate = {
              saveReplay: !!this.form.value.saveReplay,
              permanentLive: !!this.form.value.permanentLive
            }

            // Don't update live attributes if they did not change
            const liveChanged = Object.keys(liveVideoUpdate)
              .some(key => this.liveVideo[key] !== liveVideoUpdate[key])
            if (!liveChanged) return of(undefined)

            return this.liveVideoService.updateLive(this.video.id, liveVideoUpdate)
          })
        )
        .subscribe({
          next: () => {
            this.updateDone = true
            this.isUpdatingVideo = false
            this.loadingBar.useRef().complete()
            this.notifier.success($localize`Video updated.`)
            this.router.navigateByUrl(Video.buildWatchUrl(this.video))
          },

          error: err => {
            this.loadingBar.useRef().complete()
            this.isUpdatingVideo = false
            this.notifier.error(err.message)
            console.error(err)
          }
        })
  }

  hydratePluginFieldsFromVideo () {
    if (!this.video.pluginData) return

    this.form.patchValue({
      pluginData: this.video.pluginData
    })
  }

  getVideoUrl () {
    return Video.buildWatchUrl(this.videoDetails)
  }
}