diff options
Diffstat (limited to 'client/src/app/shared/images')
4 files changed, 77 insertions, 60 deletions
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts index 806aca347..d2700f6c3 100644 --- a/client/src/app/shared/images/global-icon.component.ts +++ b/client/src/app/shared/images/global-icon.component.ts | |||
@@ -1,57 +1,62 @@ | |||
1 | import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core' | 1 | import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core' |
2 | import { HooksService } from '@app/core/plugins/hooks.service' | 2 | import { HooksService } from '@app/core/plugins/hooks.service' |
3 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
4 | 3 | ||
5 | const icons = { | 4 | const icons = { |
6 | 'add': require('!!raw-loader?!../../../assets/images/global/add.svg'), | 5 | 'add': require('!!raw-loader?!../../../assets/images/global/add.svg').default, |
7 | 'user': require('!!raw-loader?!../../../assets/images/global/user.svg'), | 6 | 'user': require('!!raw-loader?!../../../assets/images/global/user.svg').default, |
8 | 'sign-out': require('!!raw-loader?!../../../assets/images/global/sign-out.svg'), | 7 | 'sign-out': require('!!raw-loader?!../../../assets/images/global/sign-out.svg').default, |
9 | 'syndication': require('!!raw-loader?!../../../assets/images/global/syndication.svg'), | 8 | 'syndication': require('!!raw-loader?!../../../assets/images/global/syndication.svg').default, |
10 | 'help': require('!!raw-loader?!../../../assets/images/global/help.svg'), | 9 | 'help': require('!!raw-loader?!../../../assets/images/global/help.svg').default, |
11 | 'sparkle': require('!!raw-loader?!../../../assets/images/global/sparkle.svg'), | 10 | 'sparkle': require('!!raw-loader?!../../../assets/images/global/sparkle.svg').default, |
12 | 'alert': require('!!raw-loader?!../../../assets/images/global/alert.svg'), | 11 | 'alert': require('!!raw-loader?!../../../assets/images/global/alert.svg').default, |
13 | 'cloud-error': require('!!raw-loader?!../../../assets/images/global/cloud-error.svg'), | 12 | 'cloud-error': require('!!raw-loader?!../../../assets/images/global/cloud-error.svg').default, |
14 | 'clock': require('!!raw-loader?!../../../assets/images/global/clock.svg'), | 13 | 'clock': require('!!raw-loader?!../../../assets/images/global/clock.svg').default, |
15 | 'user-add': require('!!raw-loader?!../../../assets/images/global/user-add.svg'), | 14 | 'user-add': require('!!raw-loader?!../../../assets/images/global/user-add.svg').default, |
16 | 'no': require('!!raw-loader?!../../../assets/images/global/no.svg'), | 15 | 'no': require('!!raw-loader?!../../../assets/images/global/no.svg').default, |
17 | 'cloud-download': require('!!raw-loader?!../../../assets/images/global/cloud-download.svg'), | 16 | 'cloud-download': require('!!raw-loader?!../../../assets/images/global/cloud-download.svg').default, |
18 | 'undo': require('!!raw-loader?!../../../assets/images/global/undo.svg'), | 17 | 'undo': require('!!raw-loader?!../../../assets/images/global/undo.svg').default, |
19 | 'history': require('!!raw-loader?!../../../assets/images/global/history.svg'), | 18 | 'history': require('!!raw-loader?!../../../assets/images/global/history.svg').default, |
20 | 'circle-tick': require('!!raw-loader?!../../../assets/images/global/circle-tick.svg'), | 19 | 'circle-tick': require('!!raw-loader?!../../../assets/images/global/circle-tick.svg').default, |
21 | 'cog': require('!!raw-loader?!../../../assets/images/global/cog.svg'), | 20 | 'cog': require('!!raw-loader?!../../../assets/images/global/cog.svg').default, |
22 | 'download': require('!!raw-loader?!../../../assets/images/global/download.svg'), | 21 | 'download': require('!!raw-loader?!../../../assets/images/global/download.svg').default, |
23 | 'go': require('!!raw-loader?!../../../assets/images/menu/go.svg'), | 22 | 'go': require('!!raw-loader?!../../../assets/images/menu/go.svg').default, |
24 | 'edit': require('!!raw-loader?!../../../assets/images/global/edit.svg'), | 23 | 'edit': require('!!raw-loader?!../../../assets/images/global/edit.svg').default, |
25 | 'im-with-her': require('!!raw-loader?!../../../assets/images/global/im-with-her.svg'), | 24 | 'im-with-her': require('!!raw-loader?!../../../assets/images/global/im-with-her.svg').default, |
26 | 'delete': require('!!raw-loader?!../../../assets/images/global/delete.svg'), | 25 | 'delete': require('!!raw-loader?!../../../assets/images/global/delete.svg').default, |
27 | 'server': require('!!raw-loader?!../../../assets/images/global/server.svg'), | 26 | 'server': require('!!raw-loader?!../../../assets/images/global/server.svg').default, |
28 | 'cross': require('!!raw-loader?!../../../assets/images/global/cross.svg'), | 27 | 'cross': require('!!raw-loader?!../../../assets/images/global/cross.svg').default, |
29 | 'validate': require('!!raw-loader?!../../../assets/images/global/validate.svg'), | 28 | 'validate': require('!!raw-loader?!../../../assets/images/global/validate.svg').default, |
30 | 'tick': require('!!raw-loader?!../../../assets/images/global/tick.svg'), | 29 | 'tick': require('!!raw-loader?!../../../assets/images/global/tick.svg').default, |
31 | 'repeat': require('!!raw-loader?!../../../assets/images/global/repeat.svg'), | 30 | 'repeat': require('!!raw-loader?!../../../assets/images/global/repeat.svg').default, |
32 | 'inbox-full': require('!!raw-loader?!../../../assets/images/global/inbox-full.svg'), | 31 | 'inbox-full': require('!!raw-loader?!../../../assets/images/global/inbox-full.svg').default, |
33 | 'dislike': require('!!raw-loader?!../../../assets/images/video/dislike.svg'), | 32 | 'dislike': require('!!raw-loader?!../../../assets/images/video/dislike.svg').default, |
34 | 'support': require('!!raw-loader?!../../../assets/images/video/support.svg'), | 33 | 'support': require('!!raw-loader?!../../../assets/images/video/support.svg').default, |
35 | 'like': require('!!raw-loader?!../../../assets/images/video/like.svg'), | 34 | 'like': require('!!raw-loader?!../../../assets/images/video/like.svg').default, |
36 | 'more-horizontal': require('!!raw-loader?!../../../assets/images/global/more-horizontal.svg'), | 35 | 'more-horizontal': require('!!raw-loader?!../../../assets/images/global/more-horizontal.svg').default, |
37 | 'more-vertical': require('!!raw-loader?!../../../assets/images/global/more-vertical.svg'), | 36 | 'more-vertical': require('!!raw-loader?!../../../assets/images/global/more-vertical.svg').default, |
38 | 'share': require('!!raw-loader?!../../../assets/images/video/share.svg'), | 37 | 'share': require('!!raw-loader?!../../../assets/images/video/share.svg').default, |
39 | 'upload': require('!!raw-loader?!../../../assets/images/video/upload.svg'), | 38 | 'upload': require('!!raw-loader?!../../../assets/images/video/upload.svg').default, |
40 | 'playlist-add': require('!!raw-loader?!../../../assets/images/video/playlist-add.svg'), | 39 | 'playlist-add': require('!!raw-loader?!../../../assets/images/video/playlist-add.svg').default, |
41 | 'play': require('!!raw-loader?!../../../assets/images/global/play.svg'), | 40 | 'play': require('!!raw-loader?!../../../assets/images/global/play.svg').default, |
42 | 'playlists': require('!!raw-loader?!../../../assets/images/global/playlists.svg'), | 41 | 'playlists': require('!!raw-loader?!../../../assets/images/global/playlists.svg').default, |
43 | 'about': require('!!raw-loader?!../../../assets/images/menu/about.svg'), | 42 | 'globe': require('!!raw-loader?!../../../assets/images/menu/globe.svg').default, |
44 | 'globe': require('!!raw-loader?!../../../assets/images/menu/globe.svg'), | 43 | 'home': require('!!raw-loader?!../../../assets/images/menu/home.svg').default, |
45 | 'home': require('!!raw-loader?!../../../assets/images/menu/home.svg'), | 44 | 'recently-added': require('!!raw-loader?!../../../assets/images/menu/recently-added.svg').default, |
46 | 'recently-added': require('!!raw-loader?!../../../assets/images/menu/recently-added.svg'), | 45 | 'trending': require('!!raw-loader?!../../../assets/images/menu/trending.svg').default, |
47 | 'trending': require('!!raw-loader?!../../../assets/images/menu/trending.svg'), | 46 | 'video-lang': require('!!raw-loader?!../../../assets/images/global/video-lang.svg').default, |
48 | 'videos': require('!!raw-loader?!../../../assets/images/global/videos.svg'), | 47 | 'videos': require('!!raw-loader?!../../../assets/images/global/videos.svg').default, |
49 | 'folder': require('!!raw-loader?!../../../assets/images/global/folder.svg'), | 48 | 'folder': require('!!raw-loader?!../../../assets/images/global/folder.svg').default, |
50 | 'administration': require('!!raw-loader?!../../../assets/images/menu/administration.svg'), | 49 | 'subscriptions': require('!!raw-loader?!../../../assets/images/menu/subscriptions.svg').default, |
51 | 'subscriptions': require('!!raw-loader?!../../../assets/images/menu/subscriptions.svg'), | 50 | 'language': require('!!raw-loader?!../../../assets/images/menu/language.svg').default, |
52 | 'users': require('!!raw-loader?!../../../assets/images/global/users.svg'), | 51 | 'unsensitive': require('!!raw-loader?!../../../assets/images/menu/eye.svg').default, |
53 | 'search': require('!!raw-loader?!../../../assets/images/global/search.svg'), | 52 | 'sensitive': require('!!raw-loader?!../../../assets/images/menu/eye-closed.svg').default, |
54 | 'refresh': require('!!raw-loader?!../../../assets/images/global/refresh.svg') | 53 | 'p2p': require('!!raw-loader?!../../../assets/images/menu/p2p.svg').default, |
54 | 'users': require('!!raw-loader?!../../../assets/images/global/users.svg').default, | ||
55 | 'search': require('!!raw-loader?!../../../assets/images/global/search.svg').default, | ||
56 | 'refresh': require('!!raw-loader?!../../../assets/images/global/refresh.svg').default, | ||
57 | 'npm': require('!!raw-loader?!../../../assets/images/global/npm.svg').default, | ||
58 | 'fullscreen': require('!!raw-loader?!../../../assets/images/global/fullscreen.svg').default, | ||
59 | 'exit-fullscreen': require('!!raw-loader?!../../../assets/images/global/exit-fullscreen.svg').default | ||
55 | } | 60 | } |
56 | 61 | ||
57 | export type GlobalIconName = keyof typeof icons | 62 | export type GlobalIconName = keyof typeof icons |
diff --git a/client/src/app/shared/images/preview-upload.component.html b/client/src/app/shared/images/preview-upload.component.html index 5e1d5211b..7c3a2b588 100644 --- a/client/src/app/shared/images/preview-upload.component.html +++ b/client/src/app/shared/images/preview-upload.component.html | |||
@@ -1,13 +1,11 @@ | |||
1 | <div class="root"> | 1 | <div class="root"> |
2 | <div class="preview-container"> | 2 | <div class="preview-container"> |
3 | <my-reactive-file | 3 | <my-reactive-file |
4 | [inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize" | 4 | [inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize" placement="right" |
5 | icon="edit" (fileChanged)="onFileChanged($event)" | 5 | icon="edit" (fileChanged)="onFileChanged($event)" [ngbTooltip]="'(extensions: '+ videoImageExtensions +', '+ maxSizeText +': '+ maxVideoImageSizeInBytes +')'" |
6 | ></my-reactive-file> | 6 | ></my-reactive-file> |
7 | 7 | ||
8 | <img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" /> | 8 | <img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" /> |
9 | <div *ngIf="!imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" class="preview no-image"></div> | 9 | <div *ngIf="!imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" class="preview no-image"></div> |
10 | </div> | 10 | </div> |
11 | |||
12 | <div i18n class="file-constraints">(extensions: {{ allowedExtensionsMessage }}, max size: {{ maxVideoImageSize | bytes }})</div> | ||
13 | </div> | 11 | </div> |
diff --git a/client/src/app/shared/images/preview-upload.component.scss b/client/src/app/shared/images/preview-upload.component.scss index 257060239..8f3522115 100644 --- a/client/src/app/shared/images/preview-upload.component.scss +++ b/client/src/app/shared/images/preview-upload.component.scss | |||
@@ -16,11 +16,13 @@ | |||
16 | } | 16 | } |
17 | 17 | ||
18 | .preview { | 18 | .preview { |
19 | border: 2px solid grey; | 19 | object-fit: cover; |
20 | border-radius: 4px; | 20 | border-radius: 4px; |
21 | max-width: 100%; | ||
21 | 22 | ||
22 | &.no-image { | 23 | &.no-image { |
23 | background-color: #ececec; | 24 | border: 2px solid grey; |
25 | background-color: var(--mainBackgroundColor); | ||
24 | } | 26 | } |
25 | } | 27 | } |
26 | } | 28 | } |
diff --git a/client/src/app/shared/images/preview-upload.component.ts b/client/src/app/shared/images/preview-upload.component.ts index f56f5b1f8..7519734ba 100644 --- a/client/src/app/shared/images/preview-upload.component.ts +++ b/client/src/app/shared/images/preview-upload.component.ts | |||
@@ -3,6 +3,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' | |||
3 | import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' | 3 | import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' |
4 | import { ServerService } from '@app/core' | 4 | import { ServerService } from '@app/core' |
5 | import { ServerConfig } from '@shared/models' | 5 | import { ServerConfig } from '@shared/models' |
6 | import { BytesPipe } from 'ngx-pipes' | ||
7 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
6 | 8 | ||
7 | @Component({ | 9 | @Component({ |
8 | selector: 'my-preview-upload', | 10 | selector: 'my-preview-upload', |
@@ -24,14 +26,20 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor { | |||
24 | 26 | ||
25 | imageSrc: SafeResourceUrl | 27 | imageSrc: SafeResourceUrl |
26 | allowedExtensionsMessage = '' | 28 | allowedExtensionsMessage = '' |
29 | maxSizeText: string | ||
27 | 30 | ||
28 | private serverConfig: ServerConfig | 31 | private serverConfig: ServerConfig |
29 | private file: File | 32 | private bytesPipe: BytesPipe |
33 | private file: Blob | ||
30 | 34 | ||
31 | constructor ( | 35 | constructor ( |
32 | private sanitizer: DomSanitizer, | 36 | private sanitizer: DomSanitizer, |
33 | private serverService: ServerService | 37 | private serverService: ServerService, |
34 | ) {} | 38 | private i18n: I18n |
39 | ) { | ||
40 | this.bytesPipe = new BytesPipe() | ||
41 | this.maxSizeText = this.i18n('max size') | ||
42 | } | ||
35 | 43 | ||
36 | get videoImageExtensions () { | 44 | get videoImageExtensions () { |
37 | return this.serverConfig.video.image.extensions | 45 | return this.serverConfig.video.image.extensions |
@@ -41,6 +49,10 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor { | |||
41 | return this.serverConfig.video.image.size.max | 49 | return this.serverConfig.video.image.size.max |
42 | } | 50 | } |
43 | 51 | ||
52 | get maxVideoImageSizeInBytes () { | ||
53 | return this.bytesPipe.transform(this.maxVideoImageSize) | ||
54 | } | ||
55 | |||
44 | ngOnInit () { | 56 | ngOnInit () { |
45 | this.serverConfig = this.serverService.getTmpConfig() | 57 | this.serverConfig = this.serverService.getTmpConfig() |
46 | this.serverService.getConfig() | 58 | this.serverService.getConfig() |
@@ -49,7 +61,7 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor { | |||
49 | this.allowedExtensionsMessage = this.videoImageExtensions.join(', ') | 61 | this.allowedExtensionsMessage = this.videoImageExtensions.join(', ') |
50 | } | 62 | } |
51 | 63 | ||
52 | onFileChanged (file: File) { | 64 | onFileChanged (file: Blob) { |
53 | this.file = file | 65 | this.file = file |
54 | 66 | ||
55 | this.propagateChange(this.file) | 67 | this.propagateChange(this.file) |