<div class="form-group" *ngIf="isCreation()">
<label for="username">Username</label>
<input
- type="text" class="form-control" id="username" placeholder="john"
+ type="text" id="username" placeholder="john"
formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
>
<div *ngIf="formErrors.username" class="form-error">
<div class="form-group">
<label for="email">Email</label>
<input
- type="text" class="form-control" id="email" placeholder="mail@example.com"
+ type="text" id="email" placeholder="mail@example.com"
formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
>
<div *ngIf="formErrors.email" class="form-error">
<div class="form-group" *ngIf="isCreation()">
<label for="password">Password</label>
<input
- type="password" class="form-control" id="password"
+ type="password" id="password"
formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
>
<div *ngIf="formErrors.password" class="form-error">
<div class="form-group">
<label for="role">Role</label>
- <select class="form-control" id="role" formControlName="role">
- <option *ngFor="let role of roles" [value]="role.value">
- {{ role.label }}
- </option>
- </select>
+ <div class="peertube-select-container">
+ <select id="role" formControlName="role">
+ <option *ngFor="let role of roles" [value]="role.value">
+ {{ role.label }}
+ </option>
+ </select>
+ </div>
<div *ngIf="formErrors.role" class="form-error">
{{ formErrors.role }}
<div class="form-group">
<label for="videoQuota">Video quota</label>
- <select class="form-control" id="videoQuota" formControlName="videoQuota">
- <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
- {{ videoQuotaOption.label }}
- </option>
- </select>
+ <div class="peertube-select-container">
+ <select id="videoQuota" formControlName="videoQuota">
+ <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
+ {{ videoQuotaOption.label }}
+ </option>
+ </select>
+ </div>
<div class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
Transcoding is enabled on server. The video quota only take in account <strong>original</strong> video. <br />
display: block;
}
-select {
- @include peertube-select(340px);
+.peertube-select-container {
+ @include peertube-select-container(340px);
}
input[type=submit] {
// Thanks: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
+import { AuthService } from '../../core/auth'
+
function getParameterByName (name: string, url: string) {
if (!url) url = window.location.href
name = name.replace(/[\[\]]/g, '\\$&')
return Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
}
+function populateAsyncUserVideoChannels (authService: AuthService, channel: any[]) {
+ return new Promise(res => {
+ authService.userInformationLoaded
+ .subscribe(
+ () => {
+ const user = authService.getUser()
+ if (!user) return
+
+ const videoChannels = user.videoChannels
+ if (Array.isArray(videoChannels) === false) return
+
+ videoChannels.forEach(c => channel.push({ id: c.id, label: c.name }))
+
+ return res()
+ }
+ )
+ })
+}
+
export {
viewportHeight,
- getParameterByName
+ getParameterByName,
+ populateAsyncUserVideoChannels
}
name: this.name,
tags: this.tags,
nsfw: this.nsfw,
- channel: this.channel,
+ channelId: this.channel,
privacy: this.privacy
}
}
</div>
<div class="col-md-4">
+ <div class="form-group">
+ <label>Channel</label>
+ <div class="peertube-select-disabled-container">
+ <select formControlName="channelId">
+ <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
+ </select>
+ </div>
+ </div>
+
<div class="form-group">
<label for="category">Category</label>
- <select id="category" formControlName="category">
- <option></option>
- <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
- </select>
+ <div class="peertube-select-container">
+ <select id="category" formControlName="category">
+ <option></option>
+ <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
+ </select>
+ </div>
<div *ngIf="formErrors.category" class="form-error">
{{ formErrors.category }}
<div class="form-group">
<label for="licence">Licence</label>
- <select id="licence" formControlName="licence">
- <option></option>
- <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
- </select>
+ <div class="peertube-select-container">
+ <select id="licence" formControlName="licence">
+ <option></option>
+ <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
+ </select>
+ </div>
<div *ngIf="formErrors.licence" class="form-error">
{{ formErrors.licence }}
<div class="form-group">
<label for="language">Language</label>
- <select id="language" formControlName="language">
- <option></option>
- <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
- </select>
+ <div class="peertube-select-container">
+ <select id="language" formControlName="language">
+ <option></option>
+ <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
+ </select>
+ </div>
<div *ngIf="formErrors.language" class="form-error">
{{ formErrors.language }}
<div class="form-group">
<label for="privacy">Privacy</label>
- <select id="privacy" formControlName="privacy">
-
- <option></option>
- <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
- </select>
+ <div class="peertube-select-container">
+ <select id="privacy" formControlName="privacy">
+ <option></option>
+ <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
+ </select>
+ </div>
<div *ngIf="formErrors.privacy" class="form-error">
{{ formErrors.privacy }}
@import '_variables';
@import '_mixins';
+.peertube-select-container {
+ @include peertube-select-container(auto);
+}
+
+.peertube-select-disabled-container {
+ @include peertube-select-disabled-container(auto);
+}
+
.video-edit {
height: 100%;
}
}
- select {
- @include peertube-select(100%);
- }
-
input, select {
font-size: 15px
}
import { NotificationsService } from 'angular2-notifications'
import 'rxjs/add/observable/forkJoin'
import { ServerService } from '../../../core/server'
+import { VIDEO_CHANNEL } from '../../../shared/forms/form-validators'
import { ValidatorMessage } from '../../../shared/forms/form-validators/validator-message'
import {
VIDEO_CATEGORY,
@Input() formErrors: { [ id: string ]: string } = {}
@Input() validationMessages: ValidatorMessage = {}
@Input() videoPrivacies = []
+ @Input() userVideoChannels = []
tags: string[] = []
videoCategories = []
updateForm () {
this.formErrors['name'] = ''
this.formErrors['privacy'] = ''
+ this.formErrors['channelId'] = ''
this.formErrors['category'] = ''
this.formErrors['licence'] = ''
this.formErrors['language'] = ''
this.validationMessages['name'] = VIDEO_NAME.MESSAGES
this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES
+ this.validationMessages['channelId'] = VIDEO_CHANNEL.MESSAGES
this.validationMessages['category'] = VIDEO_CATEGORY.MESSAGES
this.validationMessages['licence'] = VIDEO_LICENCE.MESSAGES
this.validationMessages['language'] = VIDEO_LANGUAGE.MESSAGES
this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS))
this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS))
+ this.form.addControl('channelId', new FormControl({ value: '', disabled: true }))
this.form.addControl('nsfw', new FormControl(false))
this.form.addControl('category', new FormControl('', VIDEO_CATEGORY.VALIDATORS))
this.form.addControl('licence', new FormControl('', VIDEO_LICENCE.VALIDATORS))
<input #videofileInput type="file" name="videofile" id="videofile" (change)="fileChange()" />
</div>
- <div class="form-group">
- <select [(ngModel)]="firstStepPrivacyId">
- <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
- </select>
+ <div class="form-group form-group-channel">
+ <label 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">
- <select [(ngModel)]="firstStepChannelId">
- <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
- </select>
+ <label 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>
</div>
</div>
<form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
<my-video-edit
[form]="form" [formErrors]="formErrors"
- [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies"
+ [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" [userVideoChannels]="userVideoChannels"
></my-video-edit>
border: 3px solid #EAEAEA;
width: 100%;
height: 440px;
- text-align: center;
margin-top: 40px;
display: flex;
justify-content: center;
align-items: center;
+ .peertube-select-container {
+ @include peertube-select-container(190px);
+ }
+
.upload-video {
display: flex;
flex-direction: column;
align-items: center;
+ .form-group-channel {
+ margin-bottom: 20px;
+ }
+
.icon.icon-upload {
@include icon(90px);
margin-bottom: 25px;
position: relative;
overflow: hidden;
display: inline-block;
- margin-bottom: 70px;
+ margin-bottom: 45px;
+ width: 190px;
@include peertube-button;
@include orange-button;
display: block;
}
}
-
- select {
- @include peertube-select(auto);
-
- display: inline-block;
- font-size: 15px
- }
}
}
import { AuthService, ServerService } from '../../core'
import { FormReactive } from '../../shared'
import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message'
+import { populateAsyncUserVideoChannels } from '../../shared/misc/utils'
import { VideoEdit } from '../../shared/video/video-edit.model'
import { VideoService } from '../../shared/video/video.service'
ngOnInit () {
this.buildForm()
+ populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
+ .then(() => this.firstStepChannelId = this.userVideoChannels[0].id)
+
this.serverService.videoPrivaciesLoaded
.subscribe(
() => {
// Public by default
this.firstStepPrivacyId = VideoPrivacy.PUBLIC
})
-
- this.authService.userInformationLoaded
- .subscribe(
- () => {
- const user = this.authService.getUser()
- if (!user) return
-
- const videoChannels = user.videoChannels
- if (Array.isArray(videoChannels) === false) return
-
- this.userVideoChannels = videoChannels.map(v => ({ id: v.id, label: v.name }))
- this.firstStepChannelId = this.userVideoChannels[0].id
- }
- )
}
fileChange () {
<my-video-edit
[form]="form" [formErrors]="formErrors"
- [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies"
+ [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" [userVideoChannels]="userVideoChannels"
></my-video-edit>
<div class="submit-container">
import 'rxjs/add/observable/forkJoin'
import { VideoPrivacy } from '../../../../../shared/models/videos'
import { ServerService } from '../../core'
+import { AuthService } from '../../core/auth'
import { FormReactive } from '../../shared'
import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message'
+import { populateAsyncUserVideoChannels } from '../../shared/misc/utils'
import { VideoEdit } from '../../shared/video/video-edit.model'
import { VideoService } from '../../shared/video/video.service'
formErrors: { [ id: string ]: string } = {}
validationMessages: ValidatorMessage = {}
videoPrivacies = []
+ userVideoChannels = []
constructor (
private formBuilder: FormBuilder,
private router: Router,
private notificationsService: NotificationsService,
private serverService: ServerService,
- private videoService: VideoService
+ private videoService: VideoService,
+ private authService: AuthService
) {
super()
}
ngOnInit () {
this.buildForm()
- this.videoPrivacies = this.serverService.getVideoPrivacies()
+ this.serverService.videoPrivaciesLoaded
+ .subscribe(
+ () => this.videoPrivacies = this.serverService.getVideoPrivacies()
+ )
+
+ populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
const uuid: string = this.route.snapshot.params['uuid']
this.videoService.getVideo(uuid)
}
@mixin orange-button {
- color: #fff;
- background-color: $orange-color;
+ &, &:active, &:focus {
+ color: #fff;
+ background-color: $orange-color;
+ }
- &:hover, &:active, &:focus {
+ &:hover {
color: #fff;
background-color: $orange-hoover-color;
}
}
@mixin grey-button {
- background-color: $grey-color;
- color: #585858;
+ &, &:active, &:focus {
+ background-color: $grey-color;
+ color: #585858;
+ }
&:hover, &:active, &:focus, &[disabled], &.disabled {
color: #585858;
}
-@mixin peertube-select ($width) {
- background-color: #fff;
+@mixin peertube-select-container ($width) {
+ padding: 0;
+ margin: 0;
border: 1px solid #C6C6C6;
- height: $button-height;
width: $width;
border-radius: 3px;
- padding-left: 15px;
- padding-right: 15px;
+ overflow: hidden;
+ background: #fff;
+ position: relative;
+
+ &:after {
+ top: 50%;
+ right: calc(0% + 15px);
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border: 5px solid rgba(0, 0, 0, 0);
+ border-top-color: #000000;
+ margin-top: -2px;
+ z-index: 100;
+ }
+
+ select {
+ padding: 0 12px;
+ width: calc(100% + 2px);
+ position: relative;
+ left: 1px;
+ border: none;
+ box-shadow: none;
+ background: transparent none;
+ appearance: none;
+ cursor: pointer;
+ height: $button-height;
+
+ &:focus {
+ outline: none;
+ }
+
+ &:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 #000;
+ }
+ }
+}
+
+@mixin peertube-select-disabled-container ($width) {
+ @include peertube-select-container($width);
+
+ background-color: #E5E5E5;
+
+ select {
+ cursor: default;
+ }
}
projects / oweals / peertube.git / commitdiff