video add to playlist component -> onpush strategy

pull/1765/head
Chocobozzz 2019-04-05 14:16:48 +02:00
parent 3a0fb65c61
commit 8dfceec44a
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
11 changed files with 46 additions and 13 deletions

View File

@ -1,4 +1,4 @@
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' import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
@Component({ @Component({
@ -21,10 +21,19 @@ export class PeertubeCheckboxComponent implements ControlValueAccessor {
@Input() helpHtml: string @Input() helpHtml: string
@Input() disabled = false @Input() disabled = false
// FIXME: https://github.com/angular/angular/issues/10816#issuecomment-307567836
@Input() onPushWorkaround = false
constructor (private cdr: ChangeDetectorRef) { }
propagateChange = (_: any) => { /* empty */ } propagateChange = (_: any) => { /* empty */ }
writeValue (checked: boolean) { writeValue (checked: boolean) {
this.checked = checked this.checked = checked
if (this.onPushWorkaround) {
this.cdr.markForCheck()
}
} }
registerOnChange (fn: (_: any) => void) { registerOnChange (fn: (_: any) => void) {

View File

@ -18,6 +18,10 @@ export class ScreenService {
return this.getWindowInnerWidth() < 500 return this.getWindowInnerWidth() < 500
} }
isInTouchScreen () {
return 'ontouchstart' in window || navigator.msMaxTouchPoints
}
// Cache window inner width, because it's an expensive call // Cache window inner width, because it's an expensive call
private getWindowInnerWidth () { private getWindowInnerWidth () {
if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth() if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()

View File

@ -42,7 +42,7 @@
</div> </div>
<div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)"> <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"> <div class="display-name">
{{ playlist.displayName }} {{ playlist.displayName }}
@ -56,7 +56,7 @@
<div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened"> <div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened">
<my-global-icon iconName="add"></my-global-icon> <my-global-icon iconName="add"></my-global-icon>
Create a new playlist Create a private playlist
</div> </div>
<form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form"> <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">

View File

@ -40,6 +40,7 @@
.options-row { .options-row {
margin-top: 10px; margin-top: 10px;
padding-left: 10px;
> div { > div {
display: flex; display: flex;

View File

@ -1,4 +1,4 @@
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 { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
import { AuthService, Notifier } from '@app/core' import { AuthService, Notifier } from '@app/core'
import { forkJoin } from 'rxjs' import { forkJoin } from 'rxjs'
@ -19,7 +19,8 @@ type PlaylistSummary = {
@Component({ @Component({
selector: 'my-video-add-to-playlist', selector: 'my-video-add-to-playlist',
styleUrls: [ './video-add-to-playlist.component.scss' ], 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 { export class VideoAddToPlaylistComponent extends FormReactive implements OnInit {
@Input() video: Video @Input() video: Video
@ -42,7 +43,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
private notifier: Notifier, private notifier: Notifier,
private i18n: I18n, private i18n: I18n,
private videoPlaylistService: VideoPlaylistService, private videoPlaylistService: VideoPlaylistService,
private videoPlaylistValidatorsService: VideoPlaylistValidatorsService private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
private cd: ChangeDetectorRef
) { ) {
super() super()
} }
@ -79,6 +81,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
}) })
} }
this.cd.markForCheck()
} }
) )
} }
@ -107,6 +111,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
playlist.inPlaylist = !playlist.inPlaylist playlist.inPlaylist = !playlist.inPlaylist
this.resetOptions() this.resetOptions()
this.cd.markForCheck()
} }
createPlaylist () { createPlaylist () {
@ -126,6 +132,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
}) })
this.isNewPlaylistBlockOpened = false this.isNewPlaylistBlockOpened = false
this.cd.markForCheck()
}, },
err => this.notifier.error(err.message) err => this.notifier.error(err.message)
@ -165,7 +173,9 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
this.notifier.error(err.message) this.notifier.error(err.message)
playlist.inPlaylist = true playlist.inPlaylist = true
} },
() => this.cd.markForCheck()
) )
} }
@ -194,7 +204,9 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
this.notifier.error(err.message) this.notifier.error(err.message)
playlist.inPlaylist = false playlist.inPlaylist = false
} },
() => this.cd.markForCheck()
) )
} }
} }

View File

@ -9,7 +9,7 @@
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<div class="input-group-prepend peertube-select-container"> <div class="input-group-prepend peertube-select-container">
<select [(ngModel)]="resolutionId"> <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> </select>
</div> </div>
<input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" /> <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />

View File

@ -15,7 +15,7 @@ export class VideoDownloadComponent {
downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent' downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent'
resolutionId: number | string = -1 resolutionId: number | string = -1
private video: VideoDetails video: VideoDetails
constructor ( constructor (
private notifier: Notifier, private notifier: Notifier,

View File

@ -46,7 +46,7 @@ export class VideoActionsDropdownComponent implements OnChanges {
delete: true, delete: true,
report: true report: true
} }
@Input() placement: string = 'left' @Input() placement = 'left'
@Input() label: string @Input() label: string

View File

@ -99,6 +99,7 @@
.video-miniature-information { .video-miniature-information {
width: auto; width: auto;
min-width: 500px;
.video-miniature-name { .video-miniature-name {
@include ellipsis-multiline(1.3em, 2); @include ellipsis-multiline(1.3em, 2);
@ -111,6 +112,7 @@
.video-miniature-account, .video-miniature-account,
.video-miniature-channel { .video-miniature-channel {
font-size: 14px; font-size: 14px;
width: fit-content;
} }
.video-info-privacy { .video-info-privacy {
@ -134,6 +136,10 @@
my-video-thumbnail { my-video-thumbnail {
margin-right: 0; margin-right: 0;
} }
.video-miniature-information {
min-width: initial;
}
} }
} }
} }

View File

@ -72,7 +72,8 @@ export class VideoMiniatureComponent implements OnInit {
ngOnInit () { ngOnInit () {
this.setUpBy() this.setUpBy()
if (this.screenService.isInSmallView()) { // We rely on mouseenter to lazy load actions
if (this.screenService.isInTouchScreen()) {
this.showActions = true this.showActions = true
} }
} }