</tab>
<tab *ngIf="isVideoImportEnabled()" i18n-heading heading="Import with URL">
- <my-video-import #videoImport (firstStepDone)="onFirstStepDone('import', $event)"></my-video-import>
+ <my-video-import-url #videoImportUrl (firstStepDone)="onFirstStepDone('import-url', $event)"></my-video-import-url>
</tab>
</tabset>
</div>
import { Component, ViewChild } from '@angular/core'
import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service'
-import { VideoImportComponent } from '@app/videos/+video-edit/video-import.component'
+import { VideoImportUrlComponent } from '@app/videos/+video-edit/video-import-url.component'
import { VideoUploadComponent } from '@app/videos/+video-edit/video-upload.component'
import { ServerService } from '@app/core'
})
export class VideoAddComponent implements CanComponentDeactivate {
@ViewChild('videoUpload') videoUpload: VideoUploadComponent
- @ViewChild('videoImport') videoImport: VideoImportComponent
+ @ViewChild('videoImportUrl') videoImportUrl: VideoImportUrlComponent
- secondStepType: 'upload' | 'import'
+ secondStepType: 'upload' | 'import-url'
videoName: string
constructor (
private serverService: ServerService
) {}
- onFirstStepDone (type: 'upload' | 'import', videoName: string) {
+ onFirstStepDone (type: 'upload' | 'import-url', videoName: string) {
this.secondStepType = type
this.videoName = videoName
}
canDeactivate () {
if (this.secondStepType === 'upload') return this.videoUpload.canDeactivate()
- if (this.secondStepType === 'import') return this.videoImport.canDeactivate()
+ if (this.secondStepType === 'import-url') return this.videoImportUrl.canDeactivate()
return { canDeactivate: true }
}
import { VideoAddComponent } from './video-add.component'
import { CanDeactivateGuard } from '../../shared/guards/can-deactivate-guard.service'
import { VideoUploadComponent } from '@app/videos/+video-edit/video-upload.component'
-import { VideoImportComponent } from '@app/videos/+video-edit/video-import.component'
+import { VideoImportUrlComponent } from '@app/videos/+video-edit/video-import-url.component'
@NgModule({
imports: [
declarations: [
VideoAddComponent,
VideoUploadComponent,
- VideoImportComponent
+ VideoImportUrlComponent
],
exports: [
VideoAddComponent
--- /dev/null
+<div *ngIf="!hasImportedVideo" class="upload-video-container">
+ <div class="import-video">
+ <div class="icon icon-upload"></div>
+
+ <div class="form-group">
+ <label i18n for="targetUrl">URL</label>
+ <my-help
+ helpType="custom" i18n-customHtml
+ customHtml="You can import any URL <a href='https://rg3.github.io/youtube-dl/supportedsites.html' target='_blank' rel='noopener noreferrer'>supported by youtube-dl</a> or URL that points to a raw MP4 file. You should make sure you have diffusion rights over the content it points to, otherwise it could cause legal trouble to yourself and your instance."
+ ></my-help>
+
+ <input type="text" id="targetUrl" [(ngModel)]="targetUrl" />
+ </div>
+
+ <div class="form-group">
+ <label i18n for="first-step-channel">Channel</label>
+ <div class="peertube-select-container">
+ <select id="first-step-channel" [(ngModel)]="firstStepChannelId">
+ <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label i18n for="first-step-privacy">Privacy</label>
+ <div class="peertube-select-container">
+ <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId">
+ <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
+ </select>
+ </div>
+ </div>
+
+ <input
+ type="button" i18n-value value="Import"
+ [disabled]="!isTargetUrlValid() || isImportingVideo" (click)="importVideo()"
+ />
+ </div>
+</div>
+
+<div *ngIf="hasImportedVideo" class="alert alert-info" i18n>
+ Congratulations, the video behind {{ targetUrl }} will be imported! You can already add information about this video.
+</div>
+
+<!-- Hidden because we want to load the component -->
+<form [hidden]="!hasImportedVideo" novalidate [formGroup]="form">
+ <my-video-edit
+ [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions" [schedulePublicationPossible]="false"
+ [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" [userVideoChannels]="userVideoChannels"
+ ></my-video-edit>
+
+ <div class="submit-container">
+ <div class="submit-button"
+ (click)="updateSecondStep()"
+ [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }"
+ >
+ <span class="icon icon-validate"></span>
+ <input type="button" i18n-value value="Update" />
+ </div>
+ </div>
+</form>
--- /dev/null
+@import '_variables';
+@import '_mixins';
+
+$width-size: 190px;
+
+.peertube-select-container {
+ @include peertube-select-container($width-size);
+}
+
+.import-video {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .icon.icon-upload {
+ @include icon(90px);
+ margin-bottom: 25px;
+ cursor: default;
+
+ background-image: url('../../../assets/images/video/upload.svg');
+ }
+
+ input[type=text] {
+ @include peertube-input-text($width-size);
+ display: block;
+ }
+
+ input[type=button] {
+ @include peertube-button;
+ @include orange-button;
+
+ width: $width-size;
+ margin-top: 30px;
+ }
+}
+
+
--- /dev/null
+import { Component, EventEmitter, OnInit, Output } from '@angular/core'
+import { Router } from '@angular/router'
+import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service'
+import { NotificationsService } from 'angular2-notifications'
+import { VideoPrivacy, VideoUpdate } from '../../../../../shared/models/videos'
+import { AuthService, ServerService } from '../../core'
+import { VideoService } from '../../shared/video/video.service'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { VideoImportService } from '@app/shared/video-import'
+import { VideoEdit } from '@app/shared/video/video-edit.model'
+import { LoadingBarService } from '@ngx-loading-bar/core'
+import { VideoCaptionService } from '@app/shared/video-caption'
+import { VideoSend } from '@app/videos/+video-edit/shared/video-send'
+
+@Component({
+ selector: 'my-video-import-url',
+ templateUrl: './video-import-url.component.html',
+ styleUrls: [
+ './shared/video-edit.component.scss',
+ './video-import-url.component.scss'
+ ]
+})
+export class VideoImportUrlComponent extends VideoSend implements OnInit, CanComponentDeactivate {
+ @Output() firstStepDone = new EventEmitter<string>()
+
+ targetUrl = ''
+ videoFileName: string
+
+ isImportingVideo = false
+ hasImportedVideo = false
+ isUpdatingVideo = false
+
+ video: VideoEdit
+
+ protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PRIVATE
+
+ constructor (
+ protected formValidatorService: FormValidatorService,
+ protected loadingBar: LoadingBarService,
+ protected notificationsService: NotificationsService,
+ protected authService: AuthService,
+ protected serverService: ServerService,
+ protected videoService: VideoService,
+ protected videoCaptionService: VideoCaptionService,
+ private router: Router,
+ private videoImportService: VideoImportService,
+ private i18n: I18n
+ ) {
+ super()
+ }
+
+ ngOnInit () {
+ super.ngOnInit()
+ }
+
+ canDeactivate () {
+ return { canDeactivate: true }
+ }
+
+ isTargetUrlValid () {
+ return this.targetUrl && this.targetUrl.match(/https?:\/\//)
+ }
+
+ importVideo () {
+ this.isImportingVideo = true
+
+ const videoUpdate: VideoUpdate = {
+ privacy: this.firstStepPrivacyId,
+ waitTranscoding: false,
+ commentsEnabled: true,
+ channelId: this.firstStepChannelId
+ }
+
+ this.loadingBar.start()
+
+ this.videoImportService.importVideo(this.targetUrl, videoUpdate).subscribe(
+ res => {
+ this.loadingBar.complete()
+ this.firstStepDone.emit(res.video.name)
+ this.isImportingVideo = false
+ this.hasImportedVideo = true
+
+ this.video = new VideoEdit(Object.assign(res.video, {
+ commentsEnabled: videoUpdate.commentsEnabled,
+ support: null,
+ thumbnailUrl: null,
+ previewUrl: null
+ }))
+ this.hydrateFormFromVideo()
+ },
+
+ err => {
+ this.loadingBar.complete()
+ this.isImportingVideo = false
+ this.notificationsService.error(this.i18n('Error'), err.message)
+ }
+ )
+ }
+
+ updateSecondStep () {
+ if (this.checkForm() === false) {
+ return
+ }
+
+ this.video.patch(this.form.value)
+
+ this.isUpdatingVideo = true
+
+ // Update the video
+ this.updateVideoAndCaptions(this.video)
+ .subscribe(
+ () => {
+ this.isUpdatingVideo = false
+ this.notificationsService.success(this.i18n('Success'), this.i18n('Video to import updated.'))
+
+ this.router.navigate([ '/my-account', 'video-imports' ])
+ },
+
+ err => {
+ this.isUpdatingVideo = false
+ this.notificationsService.error(this.i18n('Error'), err.message)
+ console.error(err)
+ }
+ )
+
+ }
+
+ private hydrateFormFromVideo () {
+ this.form.patchValue(this.video.toFormPatch())
+ }
+}
+++ /dev/null
-<div *ngIf="!hasImportedVideo" class="upload-video-container">
- <div class="import-video">
- <div class="icon icon-upload"></div>
-
- <div class="form-group">
- <label i18n for="targetUrl">URL</label>
- <my-help
- helpType="custom" i18n-customHtml
- customHtml="You can import any URL <a href='https://rg3.github.io/youtube-dl/supportedsites.html' target='_blank' rel='noopener noreferrer'>supported by youtube-dl</a> or URL that points to a raw MP4 file. You should make sure you have diffusion rights over the content it points to, otherwise it could cause legal trouble to yourself and your instance."
- ></my-help>
-
- <input type="text" id="targetUrl" [(ngModel)]="targetUrl" />
- </div>
-
- <div class="form-group">
- <label i18n for="first-step-channel">Channel</label>
- <div class="peertube-select-container">
- <select id="first-step-channel" [(ngModel)]="firstStepChannelId">
- <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
- </select>
- </div>
- </div>
-
- <div class="form-group">
- <label i18n for="first-step-privacy">Privacy</label>
- <div class="peertube-select-container">
- <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId">
- <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
- </select>
- </div>
- </div>
-
- <input
- type="button" i18n-value value="Import"
- [disabled]="!isTargetUrlValid() || isImportingVideo" (click)="importVideo()"
- />
- </div>
-</div>
-
-<div *ngIf="hasImportedVideo" class="alert alert-info" i18n>
- Congratulations, the video behind {{ targetUrl }} will be imported! You can already add information about this video.
-</div>
-
-<!-- Hidden because we want to load the component -->
-<form [hidden]="!hasImportedVideo" novalidate [formGroup]="form">
- <my-video-edit
- [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions" [schedulePublicationPossible]="false"
- [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" [userVideoChannels]="userVideoChannels"
- ></my-video-edit>
-
- <div class="submit-container">
- <div class="submit-button"
- (click)="updateSecondStep()"
- [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }"
- >
- <span class="icon icon-validate"></span>
- <input type="button" i18n-value value="Update" />
- </div>
- </div>
-</form>
+++ /dev/null
-@import '_variables';
-@import '_mixins';
-
-$width-size: 190px;
-
-.peertube-select-container {
- @include peertube-select-container($width-size);
-}
-
-.import-video {
- display: flex;
- flex-direction: column;
- align-items: center;
-
- .icon.icon-upload {
- @include icon(90px);
- margin-bottom: 25px;
- cursor: default;
-
- background-image: url('../../../assets/images/video/upload.svg');
- }
-
- input[type=text] {
- @include peertube-input-text($width-size);
- display: block;
- }
-
- input[type=button] {
- @include peertube-button;
- @include orange-button;
-
- width: $width-size;
- margin-top: 30px;
- }
-}
-
-
+++ /dev/null
-import { Component, EventEmitter, OnInit, Output } from '@angular/core'
-import { Router } from '@angular/router'
-import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service'
-import { NotificationsService } from 'angular2-notifications'
-import { VideoPrivacy, VideoUpdate } from '../../../../../shared/models/videos'
-import { AuthService, ServerService } from '../../core'
-import { VideoService } from '../../shared/video/video.service'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
-import { VideoImportService } from '@app/shared/video-import'
-import { VideoEdit } from '@app/shared/video/video-edit.model'
-import { LoadingBarService } from '@ngx-loading-bar/core'
-import { VideoCaptionService } from '@app/shared/video-caption'
-import { VideoSend } from '@app/videos/+video-edit/shared/video-send'
-
-@Component({
- selector: 'my-video-import',
- templateUrl: './video-import.component.html',
- styleUrls: [
- './shared/video-edit.component.scss',
- './video-import.component.scss'
- ]
-})
-export class VideoImportComponent extends VideoSend implements OnInit, CanComponentDeactivate {
- @Output() firstStepDone = new EventEmitter<string>()
-
- targetUrl = ''
- videoFileName: string
-
- isImportingVideo = false
- hasImportedVideo = false
- isUpdatingVideo = false
-
- video: VideoEdit
-
- protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PRIVATE
-
- constructor (
- protected formValidatorService: FormValidatorService,
- protected loadingBar: LoadingBarService,
- protected notificationsService: NotificationsService,
- protected authService: AuthService,
- protected serverService: ServerService,
- protected videoService: VideoService,
- protected videoCaptionService: VideoCaptionService,
- private router: Router,
- private videoImportService: VideoImportService,
- private i18n: I18n
- ) {
- super()
- }
-
- ngOnInit () {
- super.ngOnInit()
- }
-
- canDeactivate () {
- return { canDeactivate: true }
- }
-
- isTargetUrlValid () {
- return this.targetUrl && this.targetUrl.match(/https?:\/\//)
- }
-
- importVideo () {
- this.isImportingVideo = true
-
- const videoUpdate: VideoUpdate = {
- privacy: this.firstStepPrivacyId,
- waitTranscoding: false,
- commentsEnabled: true,
- channelId: this.firstStepChannelId
- }
-
- this.loadingBar.start()
-
- this.videoImportService.importVideo(this.targetUrl, videoUpdate).subscribe(
- res => {
- this.loadingBar.complete()
- this.firstStepDone.emit(res.video.name)
- this.isImportingVideo = false
- this.hasImportedVideo = true
-
- this.video = new VideoEdit(Object.assign(res.video, {
- commentsEnabled: videoUpdate.commentsEnabled,
- support: null,
- thumbnailUrl: null,
- previewUrl: null
- }))
- this.hydrateFormFromVideo()
- },
-
- err => {
- this.loadingBar.complete()
- this.isImportingVideo = false
- this.notificationsService.error(this.i18n('Error'), err.message)
- }
- )
- }
-
- updateSecondStep () {
- if (this.checkForm() === false) {
- return
- }
-
- this.video.patch(this.form.value)
-
- this.isUpdatingVideo = true
-
- // Update the video
- this.updateVideoAndCaptions(this.video)
- .subscribe(
- () => {
- this.isUpdatingVideo = false
- this.notificationsService.success(this.i18n('Success'), this.i18n('Video to import updated.'))
-
- this.router.navigate([ '/my-account', 'video-imports' ])
- },
-
- err => {
- this.isUpdatingVideo = false
- this.notificationsService.error(this.i18n('Error'), err.message)
- console.error(err)
- }
- )
-
- }
-
- private hydrateFormFromVideo () {
- this.form.patchValue(this.video.toFormPatch())
- }
-}
projects / oweals / peertube.git / commitdiff