interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Move watch attributes in a dedicated component

This commit is contained in:
Chocobozzz 2021-06-30 09:49:45 +02:00
parent 2453589a28
commit c894a1ea72
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
10 changed files with 312 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/app/+videos/+video-watch/shared/information/video-alert.component.scss
View File

@ -1,3 +1,6 @@
@use '_variables' as *;
@use '_mixins' as *;
.alert { .alert {
text-align: center; text-align: center;
border-radius: 0; border-radius: 0;

1
client/src/app/+videos/+video-watch/shared/metadata/index.ts
View File

@ -1,2 +1,3 @@
export * from './video-attributes.component'
export * from './video-avatar-channel.component' export * from './video-avatar-channel.component'
export * from './video-description.component' export * from './video-description.component'

54
client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html Normal file
View File

@ -0,0 +1,54 @@
<div class="video-attribute">
<span i18n class="video-attribute-label">Privacy</span>
<span class="video-attribute-value">{{ video.privacy.label }}</span>
</div>
<div *ngIf="video.isLocal === false" class="video-attribute">
<span i18n class="video-attribute-label">Origin</span>
<a class="video-attribute-value" target="_blank" rel="noopener noreferrer" [href]="getVideoUrl()">{{ video.originInstanceHost }}</a>
</div>
<div *ngIf="!!video.originallyPublishedAt" class="video-attribute">
<span i18n class="video-attribute-label">Originally published</span>
<span class="video-attribute-value">{{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }}</span>
</div>
<div class="video-attribute">
<span i18n class="video-attribute-label">Category</span>
<span *ngIf="!video.category.id" class="video-attribute-value">{{ video.category.label }}</span>
<a
*ngIf="video.category.id" class="video-attribute-value"
[routerLink]="[ '/search' ]" [queryParams]="{ categoryOneOf: [ video.category.id ] }"
>{{ video.category.label }}</a>
</div>
<div class="video-attribute">
<span i18n class="video-attribute-label">Licence</span>
<span *ngIf="!video.licence.id" class="video-attribute-value">{{ video.licence.label }}</span>
<a
*ngIf="video.licence.id" class="video-attribute-value"
[routerLink]="[ '/search' ]" [queryParams]="{ licenceOneOf: [ video.licence.id ] }"
>{{ video.licence.label }}</a>
</div>
<div class="video-attribute">
<span i18n class="video-attribute-label">Language</span>
<span *ngIf="!video.language.id" class="video-attribute-value">{{ video.language.label }}</span>
<a
*ngIf="video.language.id" class="video-attribute-value"
[routerLink]="[ '/search' ]" [queryParams]="{ languageOneOf: [ video.language.id ] }"
>{{ video.language.label }}</a>
</div>
<div class="video-attribute video-attribute-tags">
<span i18n class="video-attribute-label">Tags</span>
<a
*ngFor="let tag of getVideoTags()"
class="video-attribute-value" [routerLink]="[ '/search' ]" [queryParams]="{ tagsOneOf: [ tag ] }"
>{{ tag }}</a>
</div>
<div class="video-attribute" *ngIf="!video.isLive">
<span i18n class="video-attribute-label">Duration</span>
<span class="video-attribute-value">{{ video.duration | myDurationFormatter }}</span>
</div>

40
client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss Normal file
View File

@ -0,0 +1,40 @@
@use '_variables' as *;
@use '_mixins' as *;
.video-attribute {
font-size: 13px;
display: block;
margin-bottom: 12px;
}
.video-attribute-label {
@include padding-right(5px);
min-width: 142px;
display: inline-block;
color: pvar(--greyForegroundColor);
font-weight: $font-bold;
}
a.video-attribute-value {
@include disable-default-a-behaviour;
color: pvar(--mainForegroundColor);
&:hover {
opacity: 0.9;
}
}
.video-attribute-tags {
.video-attribute-value:not(:nth-child(2)) {
&::before {
content: ', ';
}
}
}
@media screen and (max-width: 1600px) {
.video-attributes .video-attribute {
margin-bottom: 5px;
}
}

25
client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.ts Normal file
View File

@ -0,0 +1,25 @@
import { Component, Input } from '@angular/core'
import { VideoDetails } from '@app/shared/shared-main'
@Component({
selector: 'my-video-attributes',
templateUrl: './video-attributes.component.html',
styleUrls: [ './video-attributes.component.scss' ]
})
export class VideoAttributesComponent {
@Input() video: VideoDetails
getVideoUrl () {
if (!this.video.url) {
return this.video.originInstanceUrl + VideoDetails.buildWatchUrl(this.video)
}
return this.video.url
}
getVideoTags () {
if (!this.video || Array.isArray(this.video.tags) === false) return []
return this.video.tags
}
}

2
client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
View File

@ -130,7 +130,7 @@ export class VideoWatchPlaylistComponent {
setTimeout(() => { setTimeout(() => {
document.querySelector('.element-' + this.currentPlaylistPosition).scrollIntoView(false) document.querySelector('.element-' + this.currentPlaylistPosition).scrollIntoView(false)
}, 0) })
return return
} }

57
client/src/app/+videos/+video-watch/video-watch.component.html
View File

@ -88,62 +88,7 @@
<my-video-description [video]="video"></my-video-description> <my-video-description [video]="video"></my-video-description>
<div class="video-attributes mb-3"> <my-video-attributes [video]="video"></my-video-attributes>
<div class="video-attribute">
<span i18n class="video-attribute-label">Privacy</span>
<span class="video-attribute-value">{{ video.privacy.label }}</span>
</div>
<div *ngIf="video.isLocal === false" class="video-attribute">
<span i18n class="video-attribute-label">Origin</span>
<a class="video-attribute-value" target="_blank" rel="noopener noreferrer" [href]="getVideoUrl()">{{ video.originInstanceHost }}</a>
</div>
<div *ngIf="!!video.originallyPublishedAt" class="video-attribute">
<span i18n class="video-attribute-label">Originally published</span>
<span class="video-attribute-value">{{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }}</span>
</div>
<div class="video-attribute">
<span i18n class="video-attribute-label">Category</span>
<span *ngIf="!video.category.id" class="video-attribute-value">{{ video.category.label }}</span>
<a
*ngIf="video.category.id" class="video-attribute-value"
[routerLink]="[ '/search' ]" [queryParams]="{ categoryOneOf: [ video.category.id ] }"
>{{ video.category.label }}</a>
</div>
<div class="video-attribute">
<span i18n class="video-attribute-label">Licence</span>
<span *ngIf="!video.licence.id" class="video-attribute-value">{{ video.licence.label }}</span>
<a
*ngIf="video.licence.id" class="video-attribute-value"
[routerLink]="[ '/search' ]" [queryParams]="{ licenceOneOf: [ video.licence.id ] }"
>{{ video.licence.label }}</a>
</div>
<div class="video-attribute">
<span i18n class="video-attribute-label">Language</span>
<span *ngIf="!video.language.id" class="video-attribute-value">{{ video.language.label }}</span>
<a
*ngIf="video.language.id" class="video-attribute-value"
[routerLink]="[ '/search' ]" [queryParams]="{ languageOneOf: [ video.language.id ] }"
>{{ video.language.label }}</a>
</div>
<div class="video-attribute video-attribute-tags">
<span i18n class="video-attribute-label">Tags</span>
<a
*ngFor="let tag of getVideoTags()"
class="video-attribute-value" [routerLink]="[ '/search' ]" [queryParams]="{ tagsOneOf: [ tag ] }"
>{{ tag }}</a>
</div>
<div class="video-attribute" *ngIf="!video.isLive">
<span i18n class="video-attribute-label">Duration</span>
<span class="video-attribute-value">{{ video.duration | myDurationFormatter }}</span>
</div>
</div>
<my-video-comments <my-video-comments
class="border-top" class="border-top"

41
client/src/app/+videos/+video-watch/video-watch.component.scss
View File

@ -199,40 +199,11 @@ my-subscribe-button {
@include margin-left(5px); @include margin-left(5px);
} }
.video-attributes { my-video-attributes {
@include margin-left($video-watch-info-margin-left); @include margin-left($video-watch-info-margin-left);
.video-attribute { display: block;
font-size: 13px; margin-bottom: 15px;
display: block;
margin-bottom: 12px;
}
}
.video-attribute-label {
@include padding-right(5px);
min-width: 142px;
display: inline-block;
color: pvar(--greyForegroundColor);
font-weight: $font-bold;
}
a.video-attribute-value {
@include disable-default-a-behaviour;
color: pvar(--mainForegroundColor);
&:hover {
opacity: 0.9;
}
}
.video-attribute-tags {
.video-attribute-value:not(:nth-child(2)) {
&::before {
content: ', ';
}
}
} }
my-action-buttons { my-action-buttons {
@ -260,12 +231,6 @@ my-video-comments {
margin-bottom: 20px; margin-bottom: 20px;
} }
@media screen and (max-width: 1600px) {
.video-attributes .video-attribute {
margin-bottom: 5px;
}
}
// Use the same breakpoint than in the typescript component to display the other video miniatures as row // Use the same breakpoint than in the typescript component to display the other video miniatures as row
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
#video-wrapper { #video-wrapper {

402
client/src/app/+videos/+video-watch/video-watch.component.ts
View File

@ -1,8 +1,7 @@
import { Hotkey, HotkeysService } from 'angular2-hotkeys' import { Hotkey, HotkeysService } from 'angular2-hotkeys'
import { forkJoin, Subscription } from 'rxjs' import { forkJoin, Subscription } from 'rxjs'
import { catchError } from 'rxjs/operators'
import { PlatformLocation } from '@angular/common' import { PlatformLocation } from '@angular/common'
import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core' import { Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router' import { ActivatedRoute, Router } from '@angular/router'
import { import {
AuthService, AuthService,
@ -21,7 +20,6 @@ import { HooksService } from '@app/core/plugins/hooks.service'
import { isXPercentInViewport, scrollToTop } from '@app/helpers' import { isXPercentInViewport, scrollToTop } from '@app/helpers'
import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main' import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription' import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
import { VideoActionsDisplayType } from '@app/shared/shared-video-miniature'
import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
import { HTMLServerConfig, PeerTubeProblemDocument, ServerErrorCode, VideoCaption, VideoPrivacy, VideoState } from '@shared/models' import { HTMLServerConfig, PeerTubeProblemDocument, ServerErrorCode, VideoCaption, VideoPrivacy, VideoState } from '@shared/models'
@ -51,10 +49,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
player: any player: any
playerElement: HTMLVideoElement playerElement: HTMLVideoElement
theaterEnabled = false
playerPlaceholderImgSrc: string playerPlaceholderImgSrc: string
theaterEnabled = false
video: VideoDetails = null video: VideoDetails = null
videoCaptions: VideoCaption[] = [] videoCaptions: VideoCaption[] = []
@ -62,28 +58,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
playlistPosition: number playlistPosition: number
playlist: VideoPlaylist = null playlist: VideoPlaylist = null
likesBarTooltipText = ''
remoteServerDown = false remoteServerDown = false
tooltipSupport = '' private nextVideoUUID = ''
tooltipSaveToPlaylist = ''
videoActionsOptions: VideoActionsDisplayType = {
playlist: false,
download: true,
update: true,
blacklist: true,
delete: true,
report: true,
duplicate: true,
mute: true,
liveInfo: true
}
private nextVideoUuid = ''
private nextVideoTitle = '' private nextVideoTitle = ''
private currentTime: number private currentTime: number
private paramsSub: Subscription private paramsSub: Subscription
private queryParamsSub: Subscription private queryParamsSub: Subscription
private configSub: Subscription private configSub: Subscription
@ -95,7 +76,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
constructor ( constructor (
private elementRef: ElementRef, private elementRef: ElementRef,
private changeDetector: ChangeDetectorRef,
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router, private router: Router,
private videoService: VideoService, private videoService: VideoService,
@ -129,40 +109,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
async ngOnInit () { async ngOnInit () {
this.serverConfig = this.serverService.getHTMLConfig() this.serverConfig = this.serverService.getHTMLConfig()
// Hide the tooltips for unlogged users in mobile view, this adds confusion with the popover
if (this.user || !this.screenService.isInMobileView()) {
this.tooltipSupport = $localize`Support options for this video`
this.tooltipSaveToPlaylist = $localize`Save to playlist`
}
PeertubePlayerManager.initState() PeertubePlayerManager.initState()
this.paramsSub = this.route.params.subscribe(routeParams => { this.loadRouteParams()
const videoId = routeParams[ 'videoId' ] this.loadRouteQuery()
if (videoId) this.loadVideo(videoId)
const playlistId = routeParams[ 'playlistId' ]
if (playlistId) this.loadPlaylist(playlistId)
})
this.queryParamsSub = this.route.queryParams.subscribe(queryParams => {
// Handle the ?playlistPosition
const positionParam = queryParams[ 'playlistPosition' ] ?? 1
this.playlistPosition = positionParam === 'last'
? -1 // Handle the "last" index
: parseInt(positionParam + '', 10)
if (isNaN(this.playlistPosition)) {
console.error(`playlistPosition query param '${positionParam}' was parsed as NaN, defaulting to 1.`)
this.playlistPosition = 1
}
this.videoWatchPlaylist.updatePlaylistIndex(this.playlistPosition)
const start = queryParams[ 'start' ]
if (this.player && start) this.player.currentTime(parseInt(start, 10))
})
this.initHotkeys() this.initHotkeys()
@ -194,41 +144,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
return this.videoWatchPlaylist.currentPlaylistPosition return this.videoWatchPlaylist.currentPlaylistPosition
} }
isUserLoggedIn () {
return this.authService.isLoggedIn()
}
getVideoUrl () {
if (!this.video.url) {
return this.video.originInstanceUrl + VideoDetails.buildWatchUrl(this.video)
}
return this.video.url
}
getVideoTags () {
if (!this.video || Array.isArray(this.video.tags) === false) return []
return this.video.tags
}
onRecommendations (videos: Video[]) { onRecommendations (videos: Video[]) {
if (videos.length > 0) { if (videos.length === 0) return
// The recommended videos's first element should be the next video
const video = videos[0]
this.nextVideoUuid = video.uuid
this.nextVideoTitle = video.name
}
}
isVideoBlur (video: Video) { // The recommended videos's first element should be the next video
return video.isVideoNSFWForUser(this.user, this.serverConfig) const video = videos[0]
} this.nextVideoUUID = video.uuid
this.nextVideoTitle = video.name
isAutoPlayEnabled () {
return (
(this.user && this.user.autoPlayNextVideo) ||
this.anonymousUser.autoPlayNextVideo
)
} }
handleTimestampClicked (timestamp: number) { handleTimestampClicked (timestamp: number) {
@ -238,11 +160,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
scrollToTop() scrollToTop()
} }
isPlaylistAutoPlayEnabled () { onPlaylistVideoFound (videoId: string) {
return ( this.loadVideo(videoId)
(this.user && this.user.autoPlayNextVideoPlaylist) || }
this.anonymousUser.autoPlayNextVideoPlaylist
) isUserLoggedIn () {
return this.authService.isLoggedIn()
}
isVideoBlur (video: Video) {
return video.isVideoNSFWForUser(this.user, this.serverConfig)
} }
isChannelDisplayNameGeneric () { isChannelDisplayNameGeneric () {
@ -254,21 +181,44 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
return genericChannelDisplayName.includes(this.video.channel.displayName) return genericChannelDisplayName.includes(this.video.channel.displayName)
} }
onPlaylistVideoFound (videoId: string) {
this.loadVideo(videoId)
}
displayOtherVideosAsRow () { displayOtherVideosAsRow () {
// Use the same value as in the SASS file // Use the same value as in the SASS file
return this.screenService.getWindowInnerWidth() <= 1100 return this.screenService.getWindowInnerWidth() <= 1100
} }
private loadRouteParams () {
this.paramsSub = this.route.params.subscribe(routeParams => {
const videoId = routeParams[ 'videoId' ]
if (videoId) return this.loadVideo(videoId)
const playlistId = routeParams[ 'playlistId' ]
if (playlistId) return this.loadPlaylist(playlistId)
})
}
private loadRouteQuery () {
this.queryParamsSub = this.route.queryParams.subscribe(queryParams => {
// Handle the ?playlistPosition
const positionParam = queryParams[ 'playlistPosition' ] ?? 1
this.playlistPosition = positionParam === 'last'
? -1 // Handle the "last" index
: parseInt(positionParam + '', 10)
if (isNaN(this.playlistPosition)) {
console.error(`playlistPosition query param '${positionParam}' was parsed as NaN, defaulting to 1.`)
this.playlistPosition = 1
}
this.videoWatchPlaylist.updatePlaylistIndex(this.playlistPosition)
const start = queryParams[ 'start' ]
if (this.player && start) this.player.currentTime(parseInt(start, 10))
})
}
private loadVideo (videoId: string) { private loadVideo (videoId: string) {
// Video did not change if (this.isSameElement(this.video, videoId)) return
if (
this.video &&
(this.video.uuid === videoId || this.video.shortUUID === videoId)
) return
if (this.player) this.player.pause() if (this.player) this.player.pause()
@ -280,90 +230,77 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
'filter:api.video-watch.video.get.result' 'filter:api.video-watch.video.get.result'
) )
// Video did change forkJoin([ videoObs, this.videoCaptionService.listCaptions(videoId)])
forkJoin([ .subscribe(
videoObs, ([ video, captionsResult ]) => {
this.videoCaptionService.listCaptions(videoId) const queryParams = this.route.snapshot.queryParams
])
.pipe(
// If 400, 403 or 404, the video is private or blocked so redirect to 404
catchError(err => {
const errorBody = err.body as PeerTubeProblemDocument
if (errorBody.code === ServerErrorCode.DOES_NOT_RESPECT_FOLLOW_CONSTRAINTS && errorBody.originUrl) { const urlOptions = {
const search = window.location.search resume: queryParams.resume,
let originUrl = errorBody.originUrl
if (search) originUrl += search
this.confirmService.confirm( startTime: queryParams.start,
$localize`This video is not available on this instance. Do you want to be redirected on the origin instance: <a href="${originUrl}">${originUrl}</a>?`, stopTime: queryParams.stop,
$localize`Redirection`
).then(res => {
if (res === false) {
return this.restExtractor.redirectTo404IfNotFound(err, 'video', [
HttpStatusCode.BAD_REQUEST_400,
HttpStatusCode.FORBIDDEN_403,
HttpStatusCode.NOT_FOUND_404
])
}
return window.location.href = originUrl muted: queryParams.muted,
}) loop: queryParams.loop,
subtitle: queryParams.subtitle,
playerMode: queryParams.mode,
peertubeLink: false
} }
return this.restExtractor.redirectTo404IfNotFound(err, 'video', [ this.onVideoFetched(video, captionsResult.data, urlOptions)
HttpStatusCode.BAD_REQUEST_400, .catch(err => this.handleGlobalError(err))
HttpStatusCode.FORBIDDEN_403, },
HttpStatusCode.NOT_FOUND_404
]) err => this.handleRequestError(err)
})
) )
.subscribe(([ video, captionsResult ]) => {
const queryParams = this.route.snapshot.queryParams
const urlOptions = {
resume: queryParams.resume,
startTime: queryParams.start,
stopTime: queryParams.stop,
muted: queryParams.muted,
loop: queryParams.loop,
subtitle: queryParams.subtitle,
playerMode: queryParams.mode,
peertubeLink: false
}
this.onVideoFetched(video, captionsResult.data, urlOptions)
.catch(err => this.handleError(err))
})
} }
private loadPlaylist (playlistId: string) { private loadPlaylist (playlistId: string) {
// Playlist did not change if (this.isSameElement(this.playlist, playlistId)) return
if (
this.playlist &&
(this.playlist.uuid === playlistId || this.playlist.shortUUID === playlistId)
) return
this.playlistService.getVideoPlaylist(playlistId) this.playlistService.getVideoPlaylist(playlistId)
.pipe( .subscribe(
// If 400 or 403, the video is private or blocked so redirect to 404 playlist => {
catchError(err => this.restExtractor.redirectTo404IfNotFound(err, 'video', [ this.playlist = playlist
HttpStatusCode.BAD_REQUEST_400,
HttpStatusCode.FORBIDDEN_403,
HttpStatusCode.NOT_FOUND_404
]))
)
.subscribe(playlist => {
this.playlist = playlist
this.videoWatchPlaylist.loadPlaylistElements(playlist, !this.playlistPosition, this.playlistPosition) this.videoWatchPlaylist.loadPlaylistElements(playlist, !this.playlistPosition, this.playlistPosition)
}) },
err => this.handleRequestError(err)
)
} }
private handleError (err: any) { private isSameElement (element: VideoDetails | VideoPlaylist, newId: string) {
if (!element) return false
return (element.id + '') === newId || element.uuid === newId || element.shortUUID === newId
}
private async handleRequestError (err: any) {
const errorBody = err.body as PeerTubeProblemDocument
if (errorBody.code === ServerErrorCode.DOES_NOT_RESPECT_FOLLOW_CONSTRAINTS && errorBody.originUrl) {
const originUrl = errorBody.originUrl + (window.location.search ?? '')
const res = await this.confirmService.confirm(
$localize`This video is not available on this instance. Do you want to be redirected on the origin instance: <a href="${originUrl}">${originUrl}</a>?`,
$localize`Redirection`
)
if (res === true) return window.location.href = originUrl
}
// If 400, 403 or 404, the video is private or blocked so redirect to 404
return this.restExtractor.redirectTo404IfNotFound(err, 'video', [
HttpStatusCode.BAD_REQUEST_400,
HttpStatusCode.FORBIDDEN_403,
HttpStatusCode.NOT_FOUND_404
])
}
private handleGlobalError (err: any) {
const errorMessage: string = typeof err === 'string' ? err : err.message const errorMessage: string = typeof err === 'string' ? err : err.message
if (!errorMessage) return if (!errorMessage) return
@ -371,7 +308,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
if (errorMessage.indexOf('from xs param') !== -1) { if (errorMessage.indexOf('from xs param') !== -1) {
this.flushPlayer() this.flushPlayer()
this.remoteServerDown = true this.remoteServerDown = true
this.changeDetector.detectChanges()
return return
} }
@ -449,39 +385,44 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
this.zone.runOutsideAngular(async () => { this.zone.runOutsideAngular(async () => {
this.player = await PeertubePlayerManager.initialize(playerMode, playerOptions, player => this.player = player) this.player = await PeertubePlayerManager.initialize(playerMode, playerOptions, player => this.player = player)
this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) this.player.on('customError', ({ err }: { err: any }) => {
this.zone.run(() => this.handleGlobalError(err))
})
this.player.on('timeupdate', () => { this.player.on('timeupdate', () => {
// Don't need to trigger angular change for this variable, that is sent to children components on click
this.currentTime = Math.floor(this.player.currentTime()) this.currentTime = Math.floor(this.player.currentTime())
}) })
/** /**
* replaces this.player.one('ended') * condition: true to make the upnext functionality trigger, false to disable the upnext functionality
* 'condition()': true to make the upnext functionality trigger, * go to the next video in 'condition()' if you don't want of the timer.
* false to disable the upnext functionality * next: function triggered at the end of the timer.
* go to the next video in 'condition()' if you don't want of the timer. * suspended: function used at each click of the timer checking if we need to reset progress
* 'next': function triggered at the end of the timer. * and wait until suspended becomes truthy again.
* 'suspended': function used at each clic of the timer checking if we need
* to reset progress and wait until 'suspended' becomes truthy again.
*/ */
this.player.upnext({ this.player.upnext({
timeout: 10000, // 10s timeout: 5000, // 5s
headText: $localize`Up Next`, headText: $localize`Up Next`,
cancelText: $localize`Cancel`, cancelText: $localize`Cancel`,
suspendedText: $localize`Autoplay is suspended`, suspendedText: $localize`Autoplay is suspended`,
getTitle: () => this.nextVideoTitle, getTitle: () => this.nextVideoTitle,
next: () => this.zone.run(() => this.autoplayNext()),
next: () => this.zone.run(() => this.playNextVideoInAngularZone()),
condition: () => { condition: () => {
if (this.playlist) { if (!this.playlist) return this.isAutoPlayNext()
if (this.isPlaylistAutoPlayEnabled()) {
// upnext will not trigger, and instead the next video will play immediately // Don't wait timeout to play the next playlist video
this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) if (this.isPlaylistAutoPlayNext()) {
} this.playNextVideoInAngularZone()
} else if (this.isAutoPlayEnabled()) { return undefined
return true // upnext will trigger
} }
return false // upnext will not trigger, and instead leave the video stopping
return false
}, },
suspended: () => { suspended: () => {
return ( return (
!isXPercentInViewport(this.player.el(), 80) || !isXPercentInViewport(this.player.el(), 80) ||
@ -491,8 +432,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
}) })
this.player.one('stopped', () => { this.player.one('stopped', () => {
if (this.playlist) { if (this.playlist && this.isPlaylistAutoPlayNext()) {
if (this.isPlaylistAutoPlayEnabled()) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) this.playNextVideoInAngularZone()
} }
}) })
@ -510,33 +451,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
}) })
} }
private autoplayNext () { private playNextVideoInAngularZone () {
if (this.playlist) { if (this.playlist) {
this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
} else if (this.nextVideoUuid) { return
this.router.navigate([ '/w', this.nextVideoUuid ])
} }
}
private setOpenGraphTags () { if (this.nextVideoUUID) {
this.metaService.setTitle(this.video.name) this.router.navigate([ '/w', this.nextVideoUUID ])
return
this.metaService.setTag('og:type', 'video') }
this.metaService.setTag('og:title', this.video.name)
this.metaService.setTag('name', this.video.name)
this.metaService.setTag('og:description', this.video.description)
this.metaService.setTag('description', this.video.description)
this.metaService.setTag('og:image', this.video.previewPath)
this.metaService.setTag('og:duration', this.video.duration.toString())
this.metaService.setTag('og:site_name', 'PeerTube')
this.metaService.setTag('og:url', window.location.href)
this.metaService.setTag('url', window.location.href)
} }
private isAutoplay () { private isAutoplay () {
@ -550,6 +474,20 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
return this.user.autoPlayVideo !== false return this.user.autoPlayVideo !== false
} }
private isAutoPlayNext () {
return (
(this.user && this.user.autoPlayNextVideo) ||
this.anonymousUser.autoPlayNextVideo
)
}
private isPlaylistAutoPlayNext () {
return (
(this.user && this.user.autoPlayNextVideoPlaylist) ||
this.anonymousUser.autoPlayNextVideoPlaylist
)
}
private flushPlayer () { private flushPlayer () {
// Remove player if it exists // Remove player if it exists
if (!this.player) return if (!this.player) return
@ -569,6 +507,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
user?: AuthUser user?: AuthUser
}) { }) {
const { video, videoCaptions, urlOptions, user } = params const { video, videoCaptions, urlOptions, user } = params
const getStartTime = () => { const getStartTime = () => {
const byUrl = urlOptions.startTime !== undefined const byUrl = urlOptions.startTime !== undefined
const byHistory = video.userHistory && (!this.playlist || urlOptions.resume !== undefined) const byHistory = video.userHistory && (!this.playlist || urlOptions.resume !== undefined)
@ -595,7 +534,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
const options: PeertubePlayerManagerOptions = { const options: PeertubePlayerManagerOptions = {
common: { common: {
autoplay: this.isAutoplay(), autoplay: this.isAutoplay(),
nextVideo: () => this.zone.run(() => this.autoplayNext()), nextVideo: () => this.playNextVideoInAngularZone(),
playerElement: this.playerElement, playerElement: this.playerElement,
onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element, onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
@ -663,7 +602,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
else mode = 'webtorrent' else mode = 'webtorrent'
} }
// p2p-media-loader needs TextEncoder, try to fallback on WebTorrent // p2p-media-loader needs TextEncoder, fallback on WebTorrent if not available
if (typeof TextEncoder === 'undefined') { if (typeof TextEncoder === 'undefined') {
mode = 'webtorrent' mode = 'webtorrent'
} }
@ -717,7 +656,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
const videoUUID = this.video.uuid const videoUUID = this.video.uuid
// Reset to refetch the video // Reset to force refresh the video
this.video = undefined this.video = undefined
this.loadVideo(videoUUID) this.loadVideo(videoUUID)
} }
@ -765,4 +704,25 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
this.hotkeysService.add(this.hotkeys) this.hotkeysService.add(this.hotkeys)
} }
private setOpenGraphTags () {
this.metaService.setTitle(this.video.name)
this.metaService.setTag('og:type', 'video')
this.metaService.setTag('og:title', this.video.name)
this.metaService.setTag('name', this.video.name)
this.metaService.setTag('og:description', this.video.description)
this.metaService.setTag('description', this.video.description)
this.metaService.setTag('og:image', this.video.previewPath)
this.metaService.setTag('og:duration', this.video.duration.toString())
this.metaService.setTag('og:site_name', 'PeerTube')
this.metaService.setTag('og:url', window.location.href)
this.metaService.setTag('url', window.location.href)
}
} }

4
client/src/app/+videos/+video-watch/video-watch.module.ts
View File

@ -21,7 +21,8 @@ import {
VideoAvatarChannelComponent, VideoAvatarChannelComponent,
VideoDescriptionComponent, VideoDescriptionComponent,
VideoRateComponent, VideoRateComponent,
VideoWatchPlaylistComponent VideoWatchPlaylistComponent,
VideoAttributesComponent
} from './shared' } from './shared'
import { VideoCommentAddComponent } from './shared/comment/video-comment-add.component' import { VideoCommentAddComponent } from './shared/comment/video-comment-add.component'
import { VideoCommentComponent } from './shared/comment/video-comment.component' import { VideoCommentComponent } from './shared/comment/video-comment.component'
@ -57,6 +58,7 @@ import { VideoWatchComponent } from './video-watch.component'
PrivacyConcernsComponent, PrivacyConcernsComponent,
ActionButtonsComponent, ActionButtonsComponent,
VideoAlertComponent, VideoAlertComponent,
VideoAttributesComponent,
VideoCommentsComponent, VideoCommentsComponent,
VideoCommentAddComponent, VideoCommentAddComponent,