From 156c50af3085468a47b8ae73fe8cfcae46b42398 Mon Sep 17 00:00:00 2001 From: Lucas Declercq Date: Sat, 6 Oct 2018 19:17:21 +0200 Subject: Add downloadingEnabled property to video model --- client/src/app/videos/+video-watch/video-watch.component.html | 2 +- client/src/app/videos/+video-watch/video-watch.component.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) (limited to 'client/src/app/videos/+video-watch') 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 770785d02..ba04d638f 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -80,7 +80,7 @@
- + Download 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 c5deddf05..7cc831ab1 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -313,6 +313,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video && this.video.state.id === VideoState.TO_TRANSCODE } + isVideoDownloadable () { + return this.video && this.video.downloadingEnabled + } + isVideoToImport () { return this.video && this.video.state.id === VideoState.TO_IMPORT } -- cgit v1.2.3 From 7f2cfe3a792856f7de6f1d13688aa3d06ec1bf70 Mon Sep 17 00:00:00 2001 From: Lucas Declercq Date: Mon, 8 Oct 2018 14:45:22 +0200 Subject: Rename downloadingEnabled property to downloadEnabled --- client/src/app/videos/+video-watch/video-watch.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/src/app/videos/+video-watch') 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 7cc831ab1..a7fd45695 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -314,7 +314,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } isVideoDownloadable () { - return this.video && this.video.downloadingEnabled + return this.video && this.video.downloadEnabled } isVideoToImport () { -- cgit v1.2.3 From 5abb9fbbd12e7097e348d6a38622d364b1fa47ed Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 10 Jan 2019 15:39:51 +0100 Subject: Add ability to unfederate a local video (on blacklist) --- .../videos/+video-watch/modal/video-blacklist.component.html | 7 +++++++ .../app/videos/+video-watch/modal/video-blacklist.component.ts | 10 +++++++--- 2 files changed, 14 insertions(+), 3 deletions(-) (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 index c436501b4..83600fa81 100644 --- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html +++ b/client/src/app/videos/+video-watch/modal/video-blacklist.component.html @@ -15,6 +15,13 @@
+
+ +
+
Cancel 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 index 357ce39ce..50a7cadd1 100644 --- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-blacklist.component.ts @@ -34,9 +34,12 @@ export class VideoBlacklistComponent extends FormReactive implements OnInit { } ngOnInit () { + const defaultValues = { unfederate: 'true' } + this.buildForm({ - reason: this.videoBlacklistValidatorsService.VIDEO_BLACKLIST_REASON - }) + reason: this.videoBlacklistValidatorsService.VIDEO_BLACKLIST_REASON, + unfederate: null + }, defaultValues) } show () { @@ -50,8 +53,9 @@ export class VideoBlacklistComponent extends FormReactive implements OnInit { 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) + this.videoBlacklistService.blacklistVideo(this.video.id, reason, unfederate) .subscribe( () => { this.notifier.success(this.i18n('Video blacklisted.')) -- cgit v1.2.3 From 1506307f2f903ce0f80155072a33345c702b7c76 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 14 Jan 2019 16:48:38 +0100 Subject: Increase abuse length to 3000 And correctly handle new lines --- .../+video-watch/comment/linkifier.service.ts | 115 --------------------- .../comment/video-comment.component.ts | 27 +---- .../+video-watch/comment/video-comment.service.ts | 6 +- .../+video-watch/modal/video-support.component.ts | 3 +- .../videos/+video-watch/video-watch.component.ts | 2 +- .../app/videos/+video-watch/video-watch.module.ts | 4 - 6 files changed, 8 insertions(+), 149 deletions(-) delete mode 100644 client/src/app/videos/+video-watch/comment/linkifier.service.ts (limited to 'client/src/app/videos/+video-watch') diff --git a/client/src/app/videos/+video-watch/comment/linkifier.service.ts b/client/src/app/videos/+video-watch/comment/linkifier.service.ts deleted file mode 100644 index 2529c9eaf..000000000 --- a/client/src/app/videos/+video-watch/comment/linkifier.service.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { Injectable } from '@angular/core' -import { getAbsoluteAPIUrl } from '@app/shared/misc/utils' -// FIXME: use @types/linkify when https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29682/files is merged? -const linkify = require('linkifyjs') -const linkifyHtml = require('linkifyjs/html') - -@Injectable() -export class LinkifierService { - - static CLASSNAME = 'linkified' - - private linkifyOptions = { - className: { - mention: LinkifierService.CLASSNAME + '-mention', - url: LinkifierService.CLASSNAME + '-url' - } - } - - constructor () { - // Apply plugin - this.mentionWithDomainPlugin(linkify) - } - - linkify (text: string) { - return linkifyHtml(text, this.linkifyOptions) - } - - private mentionWithDomainPlugin (linkify: any) { - const TT = linkify.scanner.TOKENS // Text tokens - const { TOKENS: MT, State } = linkify.parser // Multi tokens, state - const MultiToken = MT.Base - const S_START = linkify.parser.start - - const TT_AT = TT.AT - const TT_DOMAIN = TT.DOMAIN - const TT_LOCALHOST = TT.LOCALHOST - const TT_NUM = TT.NUM - const TT_COLON = TT.COLON - const TT_SLASH = TT.SLASH - const TT_TLD = TT.TLD - const TT_UNDERSCORE = TT.UNDERSCORE - const TT_DOT = TT.DOT - - function MENTION (this: any, value: any) { - this.v = value - } - - linkify.inherits(MultiToken, MENTION, { - type: 'mentionWithDomain', - isLink: true, - toHref () { - return getAbsoluteAPIUrl() + '/services/redirect/accounts/' + this.toString().substr(1) - } - }) - - const S_AT = S_START.jump(TT_AT) // @ - const S_AT_SYMS = new State() - const S_MENTION = new State(MENTION) - const S_MENTION_DIVIDER = new State() - const S_MENTION_DIVIDER_SYMS = new State() - - // @_, - S_AT.on(TT_UNDERSCORE, S_AT_SYMS) - - // @_* - S_AT_SYMS - .on(TT_UNDERSCORE, S_AT_SYMS) - .on(TT_DOT, S_AT_SYMS) - - // Valid mention (not made up entirely of symbols) - S_AT - .on(TT_DOMAIN, S_MENTION) - .on(TT_LOCALHOST, S_MENTION) - .on(TT_TLD, S_MENTION) - .on(TT_NUM, S_MENTION) - - S_AT_SYMS - .on(TT_DOMAIN, S_MENTION) - .on(TT_LOCALHOST, S_MENTION) - .on(TT_TLD, S_MENTION) - .on(TT_NUM, S_MENTION) - - // More valid mentions - S_MENTION - .on(TT_DOMAIN, S_MENTION) - .on(TT_LOCALHOST, S_MENTION) - .on(TT_TLD, S_MENTION) - .on(TT_COLON, S_MENTION) - .on(TT_NUM, S_MENTION) - .on(TT_UNDERSCORE, S_MENTION) - - // Mention with a divider - S_MENTION - .on(TT_AT, S_MENTION_DIVIDER) - .on(TT_SLASH, S_MENTION_DIVIDER) - .on(TT_DOT, S_MENTION_DIVIDER) - - // Mention _ trailing stash plus syms - S_MENTION_DIVIDER.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS) - S_MENTION_DIVIDER_SYMS.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS) - - // Once we get a word token, mentions can start up again - S_MENTION_DIVIDER - .on(TT_DOMAIN, S_MENTION) - .on(TT_LOCALHOST, S_MENTION) - .on(TT_TLD, S_MENTION) - .on(TT_NUM, S_MENTION) - - S_MENTION_DIVIDER_SYMS - .on(TT_DOMAIN, S_MENTION) - .on(TT_LOCALHOST, S_MENTION) - .on(TT_TLD, S_MENTION) - .on(TT_NUM, S_MENTION) - } -} diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.ts b/client/src/app/videos/+video-watch/comment/video-comment.component.ts index 00f0460a1..aba7f9d1c 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.ts @@ -1,11 +1,10 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core' -import { LinkifierService } from '@app/videos/+video-watch/comment/linkifier.service' -import * as sanitizeHtml from 'sanitize-html' import { UserRight } from '../../../../../../shared/models/users' import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' import { AuthService } from '../../../core/auth' import { Video } from '../../../shared/video/video.model' import { VideoComment } from './video-comment.model' +import { HtmlRendererService } from '@app/shared/renderer' @Component({ selector: 'my-video-comment', @@ -29,7 +28,7 @@ export class VideoCommentComponent implements OnInit, OnChanges { newParentComments: VideoComment[] = [] constructor ( - private linkifierService: LinkifierService, + private htmlRenderer: HtmlRendererService, private authService: AuthService ) {} @@ -87,27 +86,7 @@ export class VideoCommentComponent implements OnInit, OnChanges { } private init () { - // Convert possible markdown to html - const html = this.linkifierService.linkify(this.comment.text) - - this.sanitizedCommentHTML = sanitizeHtml(html, { - allowedTags: [ 'a', 'p', 'span', 'br' ], - allowedSchemes: [ 'http', 'https' ], - allowedAttributes: { - 'a': [ 'href', 'class', 'target' ] - }, - transformTags: { - a: (tagName, attribs) => { - return { - tagName, - attribs: Object.assign(attribs, { - target: '_blank', - rel: 'noopener noreferrer' - }) - } - } - } - }) + this.sanitizedCommentHTML = this.htmlRenderer.toSafeHtml(this.comment.text) this.newParentComments = this.parentComments.concat([ this.comment ]) } diff --git a/client/src/app/videos/+video-watch/comment/video-comment.service.ts b/client/src/app/videos/+video-watch/comment/video-comment.service.ts index 921447d5b..b8e5878c5 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.service.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment.service.ts @@ -1,7 +1,7 @@ import { catchError, map } from 'rxjs/operators' import { HttpClient, HttpParams } from '@angular/common/http' import { Injectable } from '@angular/core' -import { lineFeedToHtml } from '@app/shared/misc/utils' +import { objectLineFeedToHtml } from '@app/shared/misc/utils' import { Observable } from 'rxjs' import { ResultList, FeedFormat } from '../../../../../../shared/models' import { @@ -28,7 +28,7 @@ export class VideoCommentService { addCommentThread (videoId: number | string, comment: VideoCommentCreate) { const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comment-threads' - const normalizedComment = lineFeedToHtml(comment, 'text') + const normalizedComment = objectLineFeedToHtml(comment, 'text') return this.authHttp.post<{ comment: VideoCommentServerModel }>(url, normalizedComment) .pipe( @@ -39,7 +39,7 @@ export class VideoCommentService { addCommentReply (videoId: number | string, inReplyToCommentId: number, comment: VideoCommentCreate) { const url = VideoCommentService.BASE_VIDEO_URL + videoId + '/comments/' + inReplyToCommentId - const normalizedComment = lineFeedToHtml(comment, 'text') + const normalizedComment = objectLineFeedToHtml(comment, 'text') return this.authHttp.post<{ comment: VideoCommentServerModel }>(url, normalizedComment) .pipe( diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.ts b/client/src/app/videos/+video-watch/modal/video-support.component.ts index 154002120..deb8fbc67 100644 --- a/client/src/app/videos/+video-watch/modal/video-support.component.ts +++ b/client/src/app/videos/+video-watch/modal/video-support.component.ts @@ -1,8 +1,7 @@ import { Component, Input, ViewChild } from '@angular/core' -import { MarkdownService } from '@app/videos/shared' - import { VideoDetails } from '../../../shared/video/video-details.model' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { MarkdownService } from '@app/shared/renderer' @Component({ selector: 'my-video-support', 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 67c5254b3..ee504bc58 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -19,7 +19,6 @@ 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 { MarkdownService } from '../shared' import { VideoDownloadComponent } from './modal/video-download.component' import { VideoReportComponent } from './modal/video-report.component' import { VideoShareComponent } from './modal/video-share.component' @@ -30,6 +29,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill' import { environment } from '../../../environments/environment' import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils' import { VideoCaptionService } from '@app/shared/video-caption' +import { MarkdownService } from '@app/shared/renderer' @Component({ selector: 'my-video-watch', 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 54a12c126..2f448db78 100644 --- a/client/src/app/videos/+video-watch/video-watch.module.ts +++ b/client/src/app/videos/+video-watch/video-watch.module.ts @@ -1,9 +1,7 @@ import { NgModule } from '@angular/core' -import { LinkifierService } from '@app/videos/+video-watch/comment/linkifier.service' import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' import { ClipboardModule } from 'ngx-clipboard' import { SharedModule } from '../../shared' -import { MarkdownService } from '../shared' import { VideoCommentAddComponent } from './comment/video-comment-add.component' import { VideoCommentComponent } from './comment/video-comment.component' import { VideoCommentService } from './comment/video-comment.service' @@ -46,8 +44,6 @@ import { RecommendationsModule } from '@app/videos/recommendations/recommendatio ], providers: [ - MarkdownService, - LinkifierService, VideoCommentService ] }) -- cgit v1.2.3 From 457bb213b273a9b206cc5654eb085cede4e916ad Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 16 Jan 2019 16:05:40 +0100 Subject: Refactor how we use icons Inject them in an angular component so we can easily change their color --- .../comment/video-comment.component.scss | 6 +- .../modal/video-blacklist.component.html | 2 +- .../modal/video-download.component.html | 2 +- .../+video-watch/modal/video-report.component.html | 2 +- .../+video-watch/modal/video-share.component.html | 2 +- .../modal/video-support.component.html | 2 +- .../videos/+video-watch/video-watch.component.html | 24 ++++--- .../videos/+video-watch/video-watch.component.scss | 80 ++++------------------ 8 files changed, 36 insertions(+), 84 deletions(-) (limited to 'client/src/app/videos/+video-watch') diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss index 84da5727e..731ecbf8f 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss @@ -41,7 +41,7 @@ } .comment-date { - color: #585858; + color: $grey-foreground-color; margin-left: 10px; } } @@ -69,7 +69,7 @@ .comment-action-reply, .comment-action-delete { - color: #585858; + color: $grey-foreground-color; cursor: pointer; margin-right: 10px; @@ -108,4 +108,4 @@ .root-comment { font-size: 14px; } -} \ No newline at end of file +} 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 index 83600fa81..1a87bdcd4 100644 --- a/client/src/app/videos/+video-watch/modal/video-blacklist.component.html +++ b/client/src/app/videos/+video-watch/modal/video-blacklist.component.html @@ -1,7 +1,7 @@

Blacklist video

- +
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 index f46f92a17..2bb5d6d37 100644 --- a/client/src/app/videos/+video-watch/modal/video-download.component.html +++ b/client/src/app/videos/+video-watch/modal/video-download.component.html @@ -1,7 +1,7 @@

Download video

- +
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 index 733c01be0..b9434da26 100644 --- a/client/src/app/videos/+video-watch/modal/video-report.component.html +++ b/client/src/app/videos/+video-watch/modal/video-report.component.html @@ -1,7 +1,7 @@

Report video

- +
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html index 301f67f2d..9f3c37fe8 100644 --- a/client/src/app/videos/+video-watch/modal/video-share.component.html +++ b/client/src/app/videos/+video-watch/modal/video-share.component.html @@ -1,7 +1,7 @@

Share

- +
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.html b/client/src/app/videos/+video-watch/modal/video-support.component.html index 00c304709..2a05224a8 100644 --- a/client/src/app/videos/+video-watch/modal/video-support.component.html +++ b/client/src/app/videos/+video-watch/modal/video-support.component.html @@ -1,7 +1,7 @@

Support

- +
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 770785d02..709eb91a8 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -53,55 +53,57 @@
- +
- +
- + Support
- + Share
- +
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 2586a2204..b03ed197d 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -183,6 +183,8 @@ $other-videos-width: 260px; .action-button { @include peertube-button; @include grey-button; + @include button-with-icon(21px, 0, -1px); + @include apply-svg-color($grey-foreground-color); font-size: 15px; font-weight: $font-semibold; @@ -194,53 +196,25 @@ $other-videos-width: 260px; display: none; } - .icon { - @include icon(21px); - - position: relative; - top: -2px; - - &.icon-like { - background-image: url('../../../assets/images/video/like-grey.svg'); - } - - &.icon-dislike { - background-image: url('../../../assets/images/video/dislike-grey.svg'); - } - - &.icon-support { - background-image: url('../../../assets/images/video/heart.svg'); - } - - &.icon-share { - background-image: url('../../../assets/images/video/share.svg'); - } - - &.icon-more { - background-image: url('../../../assets/images/video/more.svg'); - top: -1px; - } - } - - .icon-text { - margin-left: 3px; - } - &.action-button-like.activated { background-color: $green; - .icon-like { - background-image: url('../../../assets/images/video/like-white.svg'); + my-global-icon { + @include apply-svg-color(#fff); } } &.action-button-dislike.activated { background-color: $red; - .icon-dislike { - background-image: url('../../../assets/images/video/dislike-white.svg'); + my-global-icon { + @include apply-svg-color(#fff); } } + + .icon-text { + margin-left: 3px; + } } .action-more { @@ -249,36 +223,12 @@ $other-videos-width: 260px; .dropdown-menu .dropdown-item { padding: 6px 24px; - .icon { - @include icon(24px); + my-global-icon { + width: 24px; margin-right: 10px; position: relative; - top: -1px; - - &.icon-download { - background-image: url('../../../assets/images/video/download-black.svg'); - } - - &.icon-edit { - background-image: url('../../../assets/images/global/edit-black.svg'); - } - - &.icon-alert { - background-image: url('../../../assets/images/video/alert.svg'); - } - - &.icon-blacklist { - background-image: url('../../../assets/images/video/blacklist.svg'); - } - - &.icon-unblacklist { - background-image: url('../../../assets/images/global/undo.svg'); - } - - &.icon-delete { - background-image: url('../../../assets/images/global/delete-black.svg'); - } + top: -2px; } } } @@ -320,7 +270,7 @@ $other-videos-width: 260px; .video-info-description-more { cursor: pointer; font-weight: $font-semibold; - color: #585858; + color: $grey-foreground-color; font-size: 14px; .glyphicon { @@ -339,7 +289,7 @@ $other-videos-width: 260px; min-width: 91px; padding-right: 5px; display: inline-block; - color: #585858; + color: $grey-foreground-color; font-weight: $font-bold; } -- cgit v1.2.3 From 2adfc7ea9a1f858db874df9fe322e7ae833db77c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 23 Jan 2019 15:36:45 +0100 Subject: Refractor videojs player Add fake p2p-media-loader plugin --- .../videos/+video-watch/video-watch.component.ts | 77 +++++++++++----------- 1 file changed, 37 insertions(+), 40 deletions(-) (limited to 'client/src/app/videos/+video-watch') 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 ee504bc58..6e38af195 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -7,14 +7,9 @@ import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-supp import { MetaService } from '@ngx-meta/core' import { Notifier, ServerService } from '@app/core' import { forkJoin, Subscription } from 'rxjs' -// FIXME: something weird with our path definition in tsconfig and typings -// @ts-ignore -import videojs from 'video.js' -import 'videojs-hotkeys' import { Hotkey, HotkeysService } from 'angular2-hotkeys' import * as WebTorrent from 'webtorrent' import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared' -import '../../../assets/player/peertube-videojs-plugin' import { AuthService, ConfirmService } from '../../core' import { RestExtractor, VideoBlacklistService } from '../../shared' import { VideoDetails } from '../../shared/video/video-details.model' @@ -24,12 +19,11 @@ 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 { addContextMenu, getVideojsOptions, loadLocaleInVideoJS } from '../../../assets/player/peertube-player' import { I18n } from '@ngx-translate/i18n-polyfill' import { environment } from '../../../environments/environment' -import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils' import { VideoCaptionService } from '@app/shared/video-caption' import { MarkdownService } from '@app/shared/renderer' +import { PeertubePlayerManager } from '../../../assets/player/peertube-player-manager' @Component({ selector: 'my-video-watch', @@ -46,7 +40,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent - player: videojs.Player + player: any playerElement: HTMLVideoElement userRating: UserVideoRateType = null video: VideoDetails = null @@ -61,7 +55,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { remoteServerDown = false hotkeys: Hotkey[] - private videojsLocaleLoaded = false private paramsSub: Subscription constructor ( @@ -402,41 +395,45 @@ export class VideoWatchComponent implements OnInit, OnDestroy { src: environment.apiUrl + c.captionPath })) - const videojsOptions = getVideojsOptions({ - autoplay: this.isAutoplay(), - inactivityTimeout: 2500, - videoFiles: this.video.files, - videoCaptions: playerCaptions, - playerElement: this.playerElement, - videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null, - videoDuration: this.video.duration, - enableHotkeys: true, - peertubeLink: false, - poster: this.video.previewUrl, - startTime, - subtitle: urlOptions.subtitle, - theaterMode: true, - language: this.localeId, - - userWatching: this.user && this.user.videosHistoryEnabled === true ? { - url: this.videoService.getUserWatchingVideoUrl(this.video.uuid), - authorizationHeader: this.authService.getRequestHeaderValue() - } : undefined - }) + const options = { + common: { + autoplay: this.isAutoplay(), + playerElement: this.playerElement, + videoDuration: this.video.duration, + enableHotkeys: true, + inactivityTimeout: 2500, + poster: this.video.previewUrl, + startTime, + + theaterMode: true, + captions: videoCaptions.length !== 0, + peertubeLink: false, + + videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null, + embedUrl: this.video.embedUrl, + + language: this.localeId, + + subtitle: urlOptions.subtitle, - if (this.videojsLocaleLoaded === false) { - await loadLocaleInVideoJS(environment.apiUrl, videojs, isOnDevLocale() ? getDevLocale() : this.localeId) - this.videojsLocaleLoaded = true + userWatching: this.user && this.user.videosHistoryEnabled === true ? { + url: this.videoService.getUserWatchingVideoUrl(this.video.uuid), + authorizationHeader: this.authService.getRequestHeaderValue() + } : undefined, + + serverUrl: environment.apiUrl, + + videoCaptions: playerCaptions + }, + + webtorrent: { + videoFiles: this.video.files + } } - const self = this this.zone.runOutsideAngular(async () => { - videojs(this.playerElement, videojsOptions, function (this: videojs.Player) { - self.player = this - this.on('customError', ({ err }: { err: any }) => self.handleError(err)) - - addContextMenu(self.player, self.video.embedUrl) - }) + this.player = await PeertubePlayerManager.initialize('webtorrent', options) + this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) }) this.setVideoDescriptionHTML() -- cgit v1.2.3 From 092092969633bbcf6d4891a083ea497a7d5c3154 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 29 Jan 2019 08:37:25 +0100 Subject: Add hls support on server --- .../videos/+video-watch/video-watch.component.ts | 28 ++++++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) (limited to 'client/src/app/videos/+video-watch') 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 6e38af195..f77316712 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -23,7 +23,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill' import { environment } from '../../../environments/environment' import { VideoCaptionService } from '@app/shared/video-caption' import { MarkdownService } from '@app/shared/renderer' -import { PeertubePlayerManager } from '../../../assets/player/peertube-player-manager' +import { P2PMediaLoaderOptions, PeertubePlayerManager, PlayerMode, WebtorrentOptions } from '../../../assets/player/peertube-player-manager' @Component({ selector: 'my-video-watch', @@ -424,15 +424,33 @@ export class VideoWatchComponent implements OnInit, OnDestroy { serverUrl: environment.apiUrl, videoCaptions: playerCaptions - }, + } + } - webtorrent: { + let mode: PlayerMode + const hlsPlaylist = this.video.getHlsPlaylist() + if (hlsPlaylist) { + mode = 'p2p-media-loader' + const p2pMediaLoader = { + playlistUrl: hlsPlaylist.playlistUrl, + segmentsSha256Url: hlsPlaylist.segmentsSha256Url, + redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl), + trackerAnnounce: this.video.trackerUrls, videoFiles: this.video.files - } + } as P2PMediaLoaderOptions + + Object.assign(options, { p2pMediaLoader }) + } else { + mode = 'webtorrent' + const webtorrent = { + videoFiles: this.video.files + } as WebtorrentOptions + + Object.assign(options, { webtorrent }) } this.zone.runOutsideAngular(async () => { - this.player = await PeertubePlayerManager.initialize('webtorrent', options) + this.player = await PeertubePlayerManager.initialize(mode, options) this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) }) -- cgit v1.2.3 From 6ec0b75beb9c8bcd84e178912319913b91830da2 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 6 Feb 2019 10:39:50 +0100 Subject: Fallback HLS to webtorrent --- .../videos/+video-watch/video-watch.component.ts | 23 +++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) (limited to 'client/src/app/videos/+video-watch') 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 f77316712..e1766255b 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -23,7 +23,13 @@ import { I18n } from '@ngx-translate/i18n-polyfill' import { environment } from '../../../environments/environment' import { VideoCaptionService } from '@app/shared/video-caption' import { MarkdownService } from '@app/shared/renderer' -import { P2PMediaLoaderOptions, PeertubePlayerManager, PlayerMode, WebtorrentOptions } from '../../../assets/player/peertube-player-manager' +import { + P2PMediaLoaderOptions, + PeertubePlayerManager, + PeertubePlayerManagerOptions, + PlayerMode, + WebtorrentOptions +} from '../../../assets/player/peertube-player-manager' @Component({ selector: 'my-video-watch', @@ -395,10 +401,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy { src: environment.apiUrl + c.captionPath })) - const options = { + const options: PeertubePlayerManagerOptions = { common: { autoplay: this.isAutoplay(), + playerElement: this.playerElement, + onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element, + videoDuration: this.video.duration, enableHotkeys: true, inactivityTimeout: 2500, @@ -424,6 +433,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { serverUrl: environment.apiUrl, videoCaptions: playerCaptions + }, + + webtorrent: { + videoFiles: this.video.files } } @@ -431,6 +444,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { const hlsPlaylist = this.video.getHlsPlaylist() if (hlsPlaylist) { mode = 'p2p-media-loader' + const p2pMediaLoader = { playlistUrl: hlsPlaylist.playlistUrl, segmentsSha256Url: hlsPlaylist.segmentsSha256Url, @@ -442,11 +456,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { Object.assign(options, { p2pMediaLoader }) } else { mode = 'webtorrent' - const webtorrent = { - videoFiles: this.video.files - } as WebtorrentOptions - - Object.assign(options, { webtorrent }) } this.zone.runOutsideAngular(async () => { -- cgit v1.2.3 From 597a9266d426aa04c2f229168e4285a76bea2c12 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 7 Feb 2019 15:56:17 +0100 Subject: Add player mode in watch/embed urls --- .../videos/+video-watch/video-watch.component.ts | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) (limited to 'client/src/app/videos/+video-watch') 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 e1766255b..9f3a43a08 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -27,8 +27,7 @@ import { P2PMediaLoaderOptions, PeertubePlayerManager, PeertubePlayerManagerOptions, - PlayerMode, - WebtorrentOptions + PlayerMode } from '../../../assets/player/peertube-player-manager' @Component({ @@ -117,8 +116,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { .subscribe(([ video, captionsResult ]) => { const startTime = this.route.snapshot.queryParams.start const subtitle = this.route.snapshot.queryParams.subtitle + const playerMode = this.route.snapshot.queryParams.mode - this.onVideoFetched(video, captionsResult.data, { startTime, subtitle }) + this.onVideoFetched(video, captionsResult.data, { startTime, subtitle, playerMode }) .catch(err => this.handleError(err)) }) }) @@ -365,7 +365,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ) } - private async onVideoFetched (video: VideoDetails, videoCaptions: VideoCaption[], urlOptions: { startTime: number, subtitle: string }) { + private async onVideoFetched ( + video: VideoDetails, + videoCaptions: VideoCaption[], + urlOptions: { startTime?: number, subtitle?: string, playerMode?: string } + ) { this.video = video // Re init attributes @@ -440,10 +444,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } } - let mode: PlayerMode - const hlsPlaylist = this.video.getHlsPlaylist() - if (hlsPlaylist) { - mode = 'p2p-media-loader' + const mode: PlayerMode = urlOptions.playerMode === 'p2p-media-loader' ? 'p2p-media-loader' : 'webtorrent' + + if (mode === 'p2p-media-loader') { + const hlsPlaylist = this.video.getHlsPlaylist() const p2pMediaLoader = { playlistUrl: hlsPlaylist.playlistUrl, @@ -454,8 +458,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } as P2PMediaLoaderOptions Object.assign(options, { p2pMediaLoader }) - } else { - mode = 'webtorrent' } this.zone.runOutsideAngular(async () => { -- cgit v1.2.3 From c7ca4c8be781753f86d806015b182f1ee5443fcf Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 8 Feb 2019 16:16:40 +0100 Subject: Fix client with google bot --- client/src/app/videos/+video-watch/video-watch.component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'client/src/app/videos/+video-watch') 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 9f3a43a08..e801f03ad 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -8,7 +8,6 @@ import { MetaService } from '@ngx-meta/core' import { Notifier, ServerService } from '@app/core' import { forkJoin, Subscription } from 'rxjs' import { Hotkey, HotkeysService } from 'angular2-hotkeys' -import * as WebTorrent from 'webtorrent' import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared' import { AuthService, ConfirmService } from '../../core' import { RestExtractor, VideoBlacklistService } from '../../shared' @@ -90,7 +89,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ngOnInit () { if ( - WebTorrent.WEBRTC_SUPPORT === false || + !!((window as any).RTCPeerConnection || (window as any).mozRTCPeerConnection || (window as any).webkitRTCPeerConnection) === false || peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true' ) { this.hasAlreadyAcceptedPrivacyConcern = true -- cgit v1.2.3