position: relative;
top: -2px;
}
-}
\ No newline at end of file
+}
-import { Component, forwardRef, Input } from '@angular/core'
+import { ChangeDetectorRef, Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core'
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
@Component({
@Input() helpHtml: string
@Input() disabled = false
+ // FIXME: https://github.com/angular/angular/issues/10816#issuecomment-307567836
+ @Input() onPushWorkaround = false
+
+ constructor (private cdr: ChangeDetectorRef) { }
+
propagateChange = (_: any) => { /* empty */ }
writeValue (checked: boolean) {
this.checked = checked
+
+ if (this.onPushWorkaround) {
+ this.cdr.markForCheck()
+ }
}
registerOnChange (fn: (_: any) => void) {
return this.getWindowInnerWidth() < 500
}
+ isInTouchScreen () {
+ return 'ontouchstart' in window || navigator.msMaxTouchPoints
+ }
+
// Cache window inner width, because it's an expensive call
private getWindowInnerWidth () {
if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
</div>
<div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)">
- <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist"></my-peertube-checkbox>
+ <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist" [onPushWorkaround]="true"></my-peertube-checkbox>
<div class="display-name">
{{ playlist.displayName }}
<div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened">
<my-global-icon iconName="add"></my-global-icon>
- Create a new playlist
+ Create a private playlist
</div>
<form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">
.options-row {
margin-top: 10px;
+ padding-left: 10px;
> div {
display: flex;
-import { Component, Input, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'
import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
import { AuthService, Notifier } from '@app/core'
import { forkJoin } from 'rxjs'
@Component({
selector: 'my-video-add-to-playlist',
styleUrls: [ './video-add-to-playlist.component.scss' ],
- templateUrl: './video-add-to-playlist.component.html'
+ templateUrl: './video-add-to-playlist.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class VideoAddToPlaylistComponent extends FormReactive implements OnInit {
@Input() video: Video
private notifier: Notifier,
private i18n: I18n,
private videoPlaylistService: VideoPlaylistService,
- private videoPlaylistValidatorsService: VideoPlaylistValidatorsService
+ private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
+ private cd: ChangeDetectorRef
) {
super()
}
stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
})
}
+
+ this.cd.markForCheck()
}
)
}
playlist.inPlaylist = !playlist.inPlaylist
this.resetOptions()
+
+ this.cd.markForCheck()
}
createPlaylist () {
})
this.isNewPlaylistBlockOpened = false
+
+ this.cd.markForCheck()
},
err => this.notifier.error(err.message)
this.notifier.error(err.message)
playlist.inPlaylist = true
- }
+ },
+
+ () => this.cd.markForCheck()
)
}
this.notifier.error(err.message)
playlist.inPlaylist = false
- }
+ },
+
+ () => this.cd.markForCheck()
)
}
}
<div class="input-group input-group-sm">
<div class="input-group-prepend peertube-select-container">
<select [(ngModel)]="resolutionId">
- <option *ngFor="let file of video.files" [value]="file.resolution.id">{{ file.resolution.label }}</option>
+ <option *ngFor="let file of video?.files" [value]="file.resolution.id">{{ file.resolution.label }}</option>
</select>
</div>
<input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent'
resolutionId: number | string = -1
- private video: VideoDetails
+ video: VideoDetails
constructor (
private notifier: Notifier,
delete: true,
report: true
}
- @Input() placement: string = 'left'
+ @Input() placement = 'left'
@Input() label: string
.video-miniature-information {
width: auto;
+ min-width: 500px;
.video-miniature-name {
@include ellipsis-multiline(1.3em, 2);
.video-miniature-account,
.video-miniature-channel {
font-size: 14px;
+ width: fit-content;
}
.video-info-privacy {
my-video-thumbnail {
margin-right: 0;
}
+
+ .video-miniature-information {
+ min-width: initial;
+ }
}
}
}
ngOnInit () {
this.setUpBy()
- if (this.screenService.isInSmallView()) {
+ // We rely on mouseenter to lazy load actions
+ if (this.screenService.isInTouchScreen()) {
this.showActions = true
}
}
projects / oweals / peertube.git / commitdiff