From 3a0fb65c61f80b510bce979a45d59d17948745e8 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 5 Apr 2019 10:52:27 +0200 Subject: Add video miniature dropdown --- .../modal/video-blacklist.component.html | 38 ---------- .../modal/video-blacklist.component.scss | 6 -- .../modal/video-blacklist.component.ts | 69 ------------------- .../modal/video-download.component.html | 52 -------------- .../modal/video-download.component.scss | 25 ------- .../+video-watch/modal/video-download.component.ts | 68 ------------------ .../+video-watch/modal/video-report.component.html | 36 ---------- .../+video-watch/modal/video-report.component.scss | 10 --- .../+video-watch/modal/video-report.component.ts | 80 ---------------------- .../videos/+video-watch/video-watch.component.html | 37 +--------- .../videos/+video-watch/video-watch.component.scss | 12 +--- .../videos/+video-watch/video-watch.component.ts | 75 +------------------- .../app/videos/+video-watch/video-watch.module.ts | 8 --- 13 files changed, 9 insertions(+), 507 deletions(-) delete mode 100644 client/src/app/videos/+video-watch/modal/video-blacklist.component.html delete mode 100644 client/src/app/videos/+video-watch/modal/video-blacklist.component.scss delete mode 100644 client/src/app/videos/+video-watch/modal/video-blacklist.component.ts delete mode 100644 client/src/app/videos/+video-watch/modal/video-download.component.html delete mode 100644 client/src/app/videos/+video-watch/modal/video-download.component.scss delete mode 100644 client/src/app/videos/+video-watch/modal/video-download.component.ts delete mode 100644 client/src/app/videos/+video-watch/modal/video-report.component.html delete mode 100644 client/src/app/videos/+video-watch/modal/video-report.component.scss delete mode 100644 client/src/app/videos/+video-watch/modal/video-report.component.ts (limited to 'client/src/app/videos/+video-watch') diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html b/client/src/app/videos/+video-watch/modal/video-blacklist.component.html deleted file mode 100644 index 1a87bdcd4..000000000 --- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html +++ /dev/null @@ -1,38 +0,0 @@ - -
-

Blacklist video

- -
- -
- -
-
- -
- {{ formErrors.reason }} -
-
- -
- -
- -
- - Cancel - - - -
-
- -
- diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.scss b/client/src/app/videos/+video-watch/modal/video-blacklist.component.scss deleted file mode 100644 index afcdb9a16..000000000 --- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import 'variables'; -@import 'mixins'; - -textarea { - @include peertube-textarea(100%, 100px); -} diff --git a/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts b/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts deleted file mode 100644 index 50a7cadd1..000000000 --- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { Component, Input, OnInit, ViewChild } from '@angular/core' -import { Notifier, RedirectService } from '@app/core' -import { FormReactive, VideoBlacklistService, VideoBlacklistValidatorsService } from '../../../shared/index' -import { VideoDetails } from '../../../shared/video/video-details.model' -import { I18n } from '@ngx-translate/i18n-polyfill' -import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' -import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' - -@Component({ - selector: 'my-video-blacklist', - templateUrl: './video-blacklist.component.html', - styleUrls: [ './video-blacklist.component.scss' ] -}) -export class VideoBlacklistComponent extends FormReactive implements OnInit { - @Input() video: VideoDetails = null - - @ViewChild('modal') modal: NgbModal - - error: string = null - - private openedModal: NgbModalRef - - constructor ( - protected formValidatorService: FormValidatorService, - private modalService: NgbModal, - private videoBlacklistValidatorsService: VideoBlacklistValidatorsService, - private videoBlacklistService: VideoBlacklistService, - private notifier: Notifier, - private redirectService: RedirectService, - private i18n: I18n - ) { - super() - } - - ngOnInit () { - const defaultValues = { unfederate: 'true' } - - this.buildForm({ - reason: this.videoBlacklistValidatorsService.VIDEO_BLACKLIST_REASON, - unfederate: null - }, defaultValues) - } - - show () { - this.openedModal = this.modalService.open(this.modal, { keyboard: false }) - } - - hide () { - this.openedModal.close() - this.openedModal = null - } - - blacklist () { - const reason = this.form.value[ 'reason' ] || undefined - const unfederate = this.video.isLocal ? this.form.value[ 'unfederate' ] : undefined - - this.videoBlacklistService.blacklistVideo(this.video.id, reason, unfederate) - .subscribe( - () => { - this.notifier.success(this.i18n('Video blacklisted.')) - this.hide() - this.redirectService.redirectToHomepage() - }, - - err => this.notifier.error(err.message) - ) - } -} diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.html b/client/src/app/videos/+video-watch/modal/video-download.component.html deleted file mode 100644 index 2bb5d6d37..000000000 --- a/client/src/app/videos/+video-watch/modal/video-download.component.html +++ /dev/null @@ -1,52 +0,0 @@ - -
-

Download video

- -
- -
-
-
-
- -
- -
- -
-
-
- -
-
- - -
- -
- - -
- -
- - -
-
-
- -
- - Cancel - - - -
- diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.scss b/client/src/app/videos/+video-watch/modal/video-download.component.scss deleted file mode 100644 index 3e826c3b6..000000000 --- a/client/src/app/videos/+video-watch/modal/video-download.component.scss +++ /dev/null @@ -1,25 +0,0 @@ -@import 'variables'; -@import 'mixins'; - -.peertube-select-container { - @include peertube-select-container(100px); - - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right: none; - - select { - height: inherit; - } -} - -.download-type { - margin-top: 30px; - - .peertube-radio-container { - @include peertube-radio-container; - - display: inline-block; - margin-right: 30px; - } -} diff --git a/client/src/app/videos/+video-watch/modal/video-download.component.ts b/client/src/app/videos/+video-watch/modal/video-download.component.ts deleted file mode 100644 index 834385771..000000000 --- a/client/src/app/videos/+video-watch/modal/video-download.component.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core' -import { VideoDetails } from '../../../shared/video/video-details.model' -import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { I18n } from '@ngx-translate/i18n-polyfill' -import { Notifier } from '@app/core' - -@Component({ - selector: 'my-video-download', - templateUrl: './video-download.component.html', - styleUrls: [ './video-download.component.scss' ] -}) -export class VideoDownloadComponent implements OnInit { - @Input() video: VideoDetails = null - - @ViewChild('modal') modal: ElementRef - - downloadType: 'direct' | 'torrent' | 'magnet' = 'torrent' - resolutionId: number | string = -1 - - constructor ( - private notifier: Notifier, - private modalService: NgbModal, - private i18n: I18n - ) { } - - ngOnInit () { - this.resolutionId = this.video.files[0].resolution.id - } - - show () { - this.modalService.open(this.modal) - } - - download () { - window.location.assign(this.getLink()) - } - - getLink () { - // HTML select send us a string, so convert it to a number - this.resolutionId = parseInt(this.resolutionId.toString(), 10) - - const file = this.video.files.find(f => f.resolution.id === this.resolutionId) - if (!file) { - console.error('Could not find file with resolution %d.', this.resolutionId) - return - } - - const link = (() => { - switch (this.downloadType) { - case 'direct': { - return file.fileDownloadUrl - } - case 'torrent': { - return file.torrentDownloadUrl - } - case 'magnet': { - return file.magnetUri - } - } - })() - - return link - } - - activateCopiedMessage () { - this.notifier.success(this.i18n('Copied')) - } -} diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.html b/client/src/app/videos/+video-watch/modal/video-report.component.html deleted file mode 100644 index b9434da26..000000000 --- a/client/src/app/videos/+video-watch/modal/video-report.component.html +++ /dev/null @@ -1,36 +0,0 @@ - -
-

Report video

- -
- -
- -
- Your report will be sent to moderators of {{ currentHost }}. - It will be forwarded to origin instance {{ originHost }} too. -
- -
-
- -
- {{ formErrors.reason }} -
-
- -
- - Cancel - - - -
-
- -
- diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.scss b/client/src/app/videos/+video-watch/modal/video-report.component.scss deleted file mode 100644 index 4713660a2..000000000 --- a/client/src/app/videos/+video-watch/modal/video-report.component.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import 'variables'; -@import 'mixins'; - -.information { - margin-bottom: 20px; -} - -textarea { - @include peertube-textarea(100%, 100px); -} diff --git a/client/src/app/videos/+video-watch/modal/video-report.component.ts b/client/src/app/videos/+video-watch/modal/video-report.component.ts deleted file mode 100644 index 911f3b447..000000000 --- a/client/src/app/videos/+video-watch/modal/video-report.component.ts +++ /dev/null @@ -1,80 +0,0 @@ -import { Component, Input, OnInit, ViewChild } from '@angular/core' -import { Notifier } from '@app/core' -import { FormReactive, VideoAbuseService } from '../../../shared/index' -import { VideoDetails } from '../../../shared/video/video-details.model' -import { I18n } from '@ngx-translate/i18n-polyfill' -import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' -import { VideoAbuseValidatorsService } from '@app/shared/forms/form-validators/video-abuse-validators.service' -import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' - -@Component({ - selector: 'my-video-report', - templateUrl: './video-report.component.html', - styleUrls: [ './video-report.component.scss' ] -}) -export class VideoReportComponent extends FormReactive implements OnInit { - @Input() video: VideoDetails = null - - @ViewChild('modal') modal: NgbModal - - error: string = null - - private openedModal: NgbModalRef - - constructor ( - protected formValidatorService: FormValidatorService, - private modalService: NgbModal, - private videoAbuseValidatorsService: VideoAbuseValidatorsService, - private videoAbuseService: VideoAbuseService, - private notifier: Notifier, - private i18n: I18n - ) { - super() - } - - get currentHost () { - return window.location.host - } - - get originHost () { - if (this.isRemoteVideo()) { - return this.video.account.host - } - - return '' - } - - ngOnInit () { - this.buildForm({ - reason: this.videoAbuseValidatorsService.VIDEO_ABUSE_REASON - }) - } - - show () { - this.openedModal = this.modalService.open(this.modal, { keyboard: false }) - } - - hide () { - this.openedModal.close() - this.openedModal = null - } - - report () { - const reason = this.form.value['reason'] - - this.videoAbuseService.reportVideo(this.video.id, reason) - .subscribe( - () => { - this.notifier.success(this.i18n('Video reported.')) - this.hide() - }, - - err => this.notifier.error(err.message) - ) - } - - isRemoteVideo () { - return !this.video.isLocal - } -} diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index ad1d04b70..7755a729a 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -120,37 +120,9 @@ -
-
- -
- -
- - Download - - - - Report - - - - Update - - - - Blacklist - - - - Unblacklist - - - - Delete - -
-
+
- - - diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 2874847cd..c1eaf9b2b 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -257,7 +257,9 @@ $player-factor: 1.7; // 16/9 display: flex; align-items: center; - .action-button:not(:first-child), .action-dropdown { + .action-button:not(:first-child), + .action-dropdown, + my-video-actions-dropdown { margin-left: 10px; } @@ -304,14 +306,6 @@ $player-factor: 1.7; // 16/9 margin-left: 3px; } } - - .action-dropdown { - display: inline-block; - - .dropdown-menu .dropdown-item { - @include dropdown-with-icon-item; - } - } } .video-info-likes-dislikes-bar { diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index cedbbf985..53673d9d9 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -13,10 +13,7 @@ import { AuthService, ConfirmService } from '../../core' import { RestExtractor, VideoBlacklistService } from '../../shared' import { VideoDetails } from '../../shared/video/video-details.model' import { VideoService } from '../../shared/video/video.service' -import { VideoDownloadComponent } from './modal/video-download.component' -import { VideoReportComponent } from './modal/video-report.component' import { VideoShareComponent } from './modal/video-share.component' -import { VideoBlacklistComponent } from './modal/video-blacklist.component' import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component' import { I18n } from '@ngx-translate/i18n-polyfill' import { environment } from '../../../environments/environment' @@ -32,6 +29,7 @@ import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' import { ComponentPagination } from '@app/shared/rest/component-pagination.model' import { Video } from '@app/shared/video/video.model' +import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component' @Component({ selector: 'my-video-watch', @@ -41,11 +39,8 @@ import { Video } from '@app/shared/video/video.model' export class VideoWatchComponent implements OnInit, OnDestroy { private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern' - @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent @ViewChild('videoShareModal') videoShareModal: VideoShareComponent - @ViewChild('videoReportModal') videoReportModal: VideoReportComponent @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent - @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent player: any @@ -212,11 +207,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ) } - showReportModal (event: Event) { - event.preventDefault() - this.videoReportModal.show() - } - showSupportModal () { this.videoSupportModal.show() } @@ -225,54 +215,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.videoShareModal.show(this.currentTime) } - showDownloadModal (event: Event) { - event.preventDefault() - this.videoDownloadModal.show() - } - - showBlacklistModal (event: Event) { - event.preventDefault() - this.videoBlacklistModal.show() - } - - async unblacklistVideo (event: Event) { - event.preventDefault() - - const confirmMessage = this.i18n( - 'Do you really want to remove this video from the blacklist? It will be available again in the videos list.' - ) - - const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblacklist')) - if (res === false) return - - this.videoBlacklistService.removeVideoFromBlacklist(this.video.id).subscribe( - () => { - this.notifier.success(this.i18n('Video {{name}} removed from the blacklist.', { name: this.video.name })) - - this.video.blacklisted = false - this.video.blacklistedReason = null - }, - - err => this.notifier.error(err.message) - ) - } - isUserLoggedIn () { return this.authService.isLoggedIn() } - isVideoUpdatable () { - return this.video.isUpdatableBy(this.authService.getUser()) - } - - isVideoBlacklistable () { - return this.video.isBlackistableBy(this.user) - } - - isVideoUnblacklistable () { - return this.video.isUnblacklistableBy(this.user) - } - getVideoTags () { if (!this.video || Array.isArray(this.video.tags) === false) return [] @@ -283,23 +229,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video.isRemovableBy(this.authService.getUser()) } - async removeVideo (event: Event) { - event.preventDefault() - - const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete')) - if (res === false) return - - this.videoService.removeVideo(this.video.id) - .subscribe( - () => { - this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name })) - - // Go back to the video-list. - this.redirectService.redirectToHomepage() - }, - - error => this.notifier.error(error.message) - ) + onVideoRemoved () { + this.redirectService.redirectToHomepage() } acceptedPrivacyConcern () { diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts index 2f448db78..983350f52 100644 --- a/client/src/app/videos/+video-watch/video-watch.module.ts +++ b/client/src/app/videos/+video-watch/video-watch.module.ts @@ -1,26 +1,21 @@ import { NgModule } from '@angular/core' import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' -import { ClipboardModule } from 'ngx-clipboard' import { SharedModule } from '../../shared' import { VideoCommentAddComponent } from './comment/video-comment-add.component' import { VideoCommentComponent } from './comment/video-comment.component' import { VideoCommentService } from './comment/video-comment.service' import { VideoCommentsComponent } from './comment/video-comments.component' -import { VideoDownloadComponent } from './modal/video-download.component' -import { VideoReportComponent } from './modal/video-report.component' import { VideoShareComponent } from './modal/video-share.component' import { VideoWatchRoutingModule } from './video-watch-routing.module' import { VideoWatchComponent } from './video-watch.component' import { NgxQRCodeModule } from 'ngx-qrcode2' import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap' -import { VideoBlacklistComponent } from '@app/videos/+video-watch/modal/video-blacklist.component' import { RecommendationsModule } from '@app/videos/recommendations/recommendations.module' @NgModule({ imports: [ VideoWatchRoutingModule, SharedModule, - ClipboardModule, NgbTooltipModule, NgxQRCodeModule, RecommendationsModule @@ -29,10 +24,7 @@ import { RecommendationsModule } from '@app/videos/recommendations/recommendatio declarations: [ VideoWatchComponent, - VideoDownloadComponent, VideoShareComponent, - VideoReportComponent, - VideoBlacklistComponent, VideoSupportComponent, VideoCommentsComponent, VideoCommentAddComponent, -- cgit v1.2.3