Move watch attributes in a dedicated component
This commit is contained in:
Chocobozzz
parent
2453589a28
commit
c894a1ea72
|
|
@ -1,3 +1,6 @@
|
|||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
|
||||
.alert {
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
export * from './video-attributes.component'
|
||||
export * from './video-avatar-channel.component'
|
||||
export * from './video-description.component'
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -130,7 +130,7 @@ export class VideoWatchPlaylistComponent {
|
|||
|
||||
setTimeout(() => {
|
||||
document.querySelector('.element-' + this.currentPlaylistPosition).scrollIntoView(false)
|
||||
}, 0)
|
||||
})
|
||||
|
||||
return
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,62 +88,7 @@
|
|||
|
||||
<my-video-description [video]="video"></my-video-description>
|
||||
|
||||
<div class="video-attributes mb-3">
|
||||
<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-attributes [video]="video"></my-video-attributes>
|
||||
|
||||
<my-video-comments
|
||||
class="border-top"
|
||||
|
|
|
|||
|
|
@ -199,40 +199,11 @@ my-subscribe-button {
|
|||
@include margin-left(5px);
|
||||
}
|
||||
|
||||
.video-attributes {
|
||||
my-video-attributes {
|
||||
@include margin-left($video-watch-info-margin-left);
|
||||
|
||||
.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: ', ';
|
||||
}
|
||||
}
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
my-action-buttons {
|
||||
|
|
@ -260,12 +231,6 @@ my-video-comments {
|
|||
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
|
||||
@media screen and (max-width: 1100px) {
|
||||
#video-wrapper {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { Hotkey, HotkeysService } from 'angular2-hotkeys'
|
||||
import { forkJoin, Subscription } from 'rxjs'
|
||||
import { catchError } from 'rxjs/operators'
|
||||
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 {
|
||||
AuthService,
|
||||
|
|
@ -21,7 +20,6 @@ import { HooksService } from '@app/core/plugins/hooks.service'
|
|||
import { isXPercentInViewport, scrollToTop } from '@app/helpers'
|
||||
import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
|
||||
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 { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
|
||||
import { HTMLServerConfig, PeerTubeProblemDocument, ServerErrorCode, VideoCaption, VideoPrivacy, VideoState } from '@shared/models'
|
||||
|
|
@ -51,10 +49,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
|
||||
player: any
|
||||
playerElement: HTMLVideoElement
|
||||
|
||||
theaterEnabled = false
|
||||
|
||||
playerPlaceholderImgSrc: string
|
||||
theaterEnabled = false
|
||||
|
||||
video: VideoDetails = null
|
||||
videoCaptions: VideoCaption[] = []
|
||||
|
|
@ -62,28 +58,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
playlistPosition: number
|
||||
playlist: VideoPlaylist = null
|
||||
|
||||
likesBarTooltipText = ''
|
||||
|
||||
remoteServerDown = false
|
||||
|
||||
tooltipSupport = ''
|
||||
tooltipSaveToPlaylist = ''
|
||||
|
||||
videoActionsOptions: VideoActionsDisplayType = {
|
||||
playlist: false,
|
||||
download: true,
|
||||
update: true,
|
||||
blacklist: true,
|
||||
delete: true,
|
||||
report: true,
|
||||
duplicate: true,
|
||||
mute: true,
|
||||
liveInfo: true
|
||||
}
|
||||
|
||||
private nextVideoUuid = ''
|
||||
private nextVideoUUID = ''
|
||||
private nextVideoTitle = ''
|
||||
|
||||
private currentTime: number
|
||||
|
||||
private paramsSub: Subscription
|
||||
private queryParamsSub: Subscription
|
||||
private configSub: Subscription
|
||||
|
|
@ -95,7 +76,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
|
||||
constructor (
|
||||
private elementRef: ElementRef,
|
||||
private changeDetector: ChangeDetectorRef,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private videoService: VideoService,
|
||||
|
|
@ -129,40 +109,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
async ngOnInit () {
|
||||
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()
|
||||
|
||||
this.paramsSub = this.route.params.subscribe(routeParams => {
|
||||
const videoId = routeParams[ 'videoId' ]
|
||||
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.loadRouteParams()
|
||||
this.loadRouteQuery()
|
||||
|
||||
this.initHotkeys()
|
||||
|
||||
|
|
@ -194,42 +144,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
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[]) {
|
||||
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.nextVideoUUID = video.uuid
|
||||
this.nextVideoTitle = video.name
|
||||
}
|
||||
}
|
||||
|
||||
isVideoBlur (video: Video) {
|
||||
return video.isVideoNSFWForUser(this.user, this.serverConfig)
|
||||
}
|
||||
|
||||
isAutoPlayEnabled () {
|
||||
return (
|
||||
(this.user && this.user.autoPlayNextVideo) ||
|
||||
this.anonymousUser.autoPlayNextVideo
|
||||
)
|
||||
}
|
||||
|
||||
handleTimestampClicked (timestamp: number) {
|
||||
if (!this.player || this.video.isLive) return
|
||||
|
|
@ -238,11 +160,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
scrollToTop()
|
||||
}
|
||||
|
||||
isPlaylistAutoPlayEnabled () {
|
||||
return (
|
||||
(this.user && this.user.autoPlayNextVideoPlaylist) ||
|
||||
this.anonymousUser.autoPlayNextVideoPlaylist
|
||||
)
|
||||
onPlaylistVideoFound (videoId: string) {
|
||||
this.loadVideo(videoId)
|
||||
}
|
||||
|
||||
isUserLoggedIn () {
|
||||
return this.authService.isLoggedIn()
|
||||
}
|
||||
|
||||
isVideoBlur (video: Video) {
|
||||
return video.isVideoNSFWForUser(this.user, this.serverConfig)
|
||||
}
|
||||
|
||||
isChannelDisplayNameGeneric () {
|
||||
|
|
@ -254,21 +181,44 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
return genericChannelDisplayName.includes(this.video.channel.displayName)
|
||||
}
|
||||
|
||||
onPlaylistVideoFound (videoId: string) {
|
||||
this.loadVideo(videoId)
|
||||
}
|
||||
|
||||
displayOtherVideosAsRow () {
|
||||
// Use the same value as in the SASS file
|
||||
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) {
|
||||
// Video did not change
|
||||
if (
|
||||
this.video &&
|
||||
(this.video.uuid === videoId || this.video.shortUUID === videoId)
|
||||
) return
|
||||
if (this.isSameElement(this.video, videoId)) return
|
||||
|
||||
if (this.player) this.player.pause()
|
||||
|
||||
|
|
@ -280,45 +230,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
'filter:api.video-watch.video.get.result'
|
||||
)
|
||||
|
||||
// Video did change
|
||||
forkJoin([
|
||||
videoObs,
|
||||
this.videoCaptionService.listCaptions(videoId)
|
||||
])
|
||||
.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 search = window.location.search
|
||||
let originUrl = errorBody.originUrl
|
||||
if (search) originUrl += search
|
||||
|
||||
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`
|
||||
).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
|
||||
})
|
||||
}
|
||||
|
||||
return this.restExtractor.redirectTo404IfNotFound(err, 'video', [
|
||||
HttpStatusCode.BAD_REQUEST_400,
|
||||
HttpStatusCode.FORBIDDEN_403,
|
||||
HttpStatusCode.NOT_FOUND_404
|
||||
])
|
||||
})
|
||||
)
|
||||
.subscribe(([ video, captionsResult ]) => {
|
||||
forkJoin([ videoObs, this.videoCaptionService.listCaptions(videoId)])
|
||||
.subscribe(
|
||||
([ video, captionsResult ]) => {
|
||||
const queryParams = this.route.snapshot.queryParams
|
||||
|
||||
const urlOptions = {
|
||||
|
|
@ -336,34 +250,57 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
|
||||
this.onVideoFetched(video, captionsResult.data, urlOptions)
|
||||
.catch(err => this.handleError(err))
|
||||
})
|
||||
.catch(err => this.handleGlobalError(err))
|
||||
},
|
||||
|
||||
err => this.handleRequestError(err)
|
||||
)
|
||||
}
|
||||
|
||||
private loadPlaylist (playlistId: string) {
|
||||
// Playlist did not change
|
||||
if (
|
||||
this.playlist &&
|
||||
(this.playlist.uuid === playlistId || this.playlist.shortUUID === playlistId)
|
||||
) return
|
||||
if (this.isSameElement(this.playlist, playlistId)) return
|
||||
|
||||
this.playlistService.getVideoPlaylist(playlistId)
|
||||
.pipe(
|
||||
// If 400 or 403, the video is private or blocked so redirect to 404
|
||||
catchError(err => this.restExtractor.redirectTo404IfNotFound(err, 'video', [
|
||||
HttpStatusCode.BAD_REQUEST_400,
|
||||
HttpStatusCode.FORBIDDEN_403,
|
||||
HttpStatusCode.NOT_FOUND_404
|
||||
]))
|
||||
)
|
||||
.subscribe(playlist => {
|
||||
.subscribe(
|
||||
playlist => {
|
||||
this.playlist = playlist
|
||||
|
||||
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
|
||||
if (!errorMessage) return
|
||||
|
||||
|
|
@ -371,7 +308,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
if (errorMessage.indexOf('from xs param') !== -1) {
|
||||
this.flushPlayer()
|
||||
this.remoteServerDown = true
|
||||
this.changeDetector.detectChanges()
|
||||
|
||||
return
|
||||
}
|
||||
|
|
@ -449,39 +385,44 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
this.zone.runOutsideAngular(async () => {
|
||||
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', () => {
|
||||
// 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())
|
||||
})
|
||||
|
||||
/**
|
||||
* 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, false to disable the upnext functionality
|
||||
* go to the next video in 'condition()' if you don't want of the timer.
|
||||
* 'next': function triggered at the end of the timer.
|
||||
* 'suspended': function used at each clic of the timer checking if we need
|
||||
* to reset progress and wait until 'suspended' becomes truthy again.
|
||||
* next: function triggered at the end of the timer.
|
||||
* suspended: function used at each click of the timer checking if we need to reset progress
|
||||
* and wait until suspended becomes truthy again.
|
||||
*/
|
||||
this.player.upnext({
|
||||
timeout: 10000, // 10s
|
||||
timeout: 5000, // 5s
|
||||
|
||||
headText: $localize`Up Next`,
|
||||
cancelText: $localize`Cancel`,
|
||||
suspendedText: $localize`Autoplay is suspended`,
|
||||
|
||||
getTitle: () => this.nextVideoTitle,
|
||||
next: () => this.zone.run(() => this.autoplayNext()),
|
||||
|
||||
next: () => this.zone.run(() => this.playNextVideoInAngularZone()),
|
||||
condition: () => {
|
||||
if (this.playlist) {
|
||||
if (this.isPlaylistAutoPlayEnabled()) {
|
||||
// upnext will not trigger, and instead the next video will play immediately
|
||||
this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
|
||||
if (!this.playlist) return this.isAutoPlayNext()
|
||||
|
||||
// Don't wait timeout to play the next playlist video
|
||||
if (this.isPlaylistAutoPlayNext()) {
|
||||
this.playNextVideoInAngularZone()
|
||||
return undefined
|
||||
}
|
||||
} else if (this.isAutoPlayEnabled()) {
|
||||
return true // upnext will trigger
|
||||
}
|
||||
return false // upnext will not trigger, and instead leave the video stopping
|
||||
|
||||
return false
|
||||
},
|
||||
|
||||
suspended: () => {
|
||||
return (
|
||||
!isXPercentInViewport(this.player.el(), 80) ||
|
||||
|
|
@ -491,8 +432,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
})
|
||||
|
||||
this.player.one('stopped', () => {
|
||||
if (this.playlist) {
|
||||
if (this.isPlaylistAutoPlayEnabled()) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
|
||||
if (this.playlist && this.isPlaylistAutoPlayNext()) {
|
||||
this.playNextVideoInAngularZone()
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -510,33 +451,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
})
|
||||
}
|
||||
|
||||
private autoplayNext () {
|
||||
private playNextVideoInAngularZone () {
|
||||
if (this.playlist) {
|
||||
this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
|
||||
} else if (this.nextVideoUuid) {
|
||||
this.router.navigate([ '/w', this.nextVideoUuid ])
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
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)
|
||||
if (this.nextVideoUUID) {
|
||||
this.router.navigate([ '/w', this.nextVideoUUID ])
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
private isAutoplay () {
|
||||
|
|
@ -550,6 +474,20 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
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 () {
|
||||
// Remove player if it exists
|
||||
if (!this.player) return
|
||||
|
|
@ -569,6 +507,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
user?: AuthUser
|
||||
}) {
|
||||
const { video, videoCaptions, urlOptions, user } = params
|
||||
|
||||
const getStartTime = () => {
|
||||
const byUrl = urlOptions.startTime !== undefined
|
||||
const byHistory = video.userHistory && (!this.playlist || urlOptions.resume !== undefined)
|
||||
|
|
@ -595,7 +534,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
const options: PeertubePlayerManagerOptions = {
|
||||
common: {
|
||||
autoplay: this.isAutoplay(),
|
||||
nextVideo: () => this.zone.run(() => this.autoplayNext()),
|
||||
nextVideo: () => this.playNextVideoInAngularZone(),
|
||||
|
||||
playerElement: this.playerElement,
|
||||
onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
|
||||
|
|
@ -663,7 +602,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
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') {
|
||||
mode = 'webtorrent'
|
||||
}
|
||||
|
|
@ -717,7 +656,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
|
||||
const videoUUID = this.video.uuid
|
||||
|
||||
// Reset to refetch the video
|
||||
// Reset to force refresh the video
|
||||
this.video = undefined
|
||||
this.loadVideo(videoUUID)
|
||||
}
|
||||
|
|
@ -765,4 +704,25 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
|||
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@ import {
|
|||
VideoAvatarChannelComponent,
|
||||
VideoDescriptionComponent,
|
||||
VideoRateComponent,
|
||||
VideoWatchPlaylistComponent
|
||||
VideoWatchPlaylistComponent,
|
||||
VideoAttributesComponent
|
||||
} from './shared'
|
||||
import { VideoCommentAddComponent } from './shared/comment/video-comment-add.component'
|
||||
import { VideoCommentComponent } from './shared/comment/video-comment.component'
|
||||
|
|
@ -57,6 +58,7 @@ import { VideoWatchComponent } from './video-watch.component'
|
|||
PrivacyConcernsComponent,
|
||||
ActionButtonsComponent,
|
||||
VideoAlertComponent,
|
||||
VideoAttributesComponent,
|
||||
|
||||
VideoCommentsComponent,
|
||||
VideoCommentAddComponent,
|
||||
|
|
|
|||
Loading…
Reference in New Issue