@import '_mixins';
@import '_miniature';
+my-video-thumbnail {
+ @include thumbnail-size-component(130px, 72px);
+
+ display: flex; // Avoids an issue with line-height that adds space below the element
+ margin-right: 10px;
+}
+
.video {
display: flex;
align-items: center;
}
}
- my-video-thumbnail {
- @include thumbnail-size-component(130px, 72px);
-
- display: flex; // Avoids an issue with line-height that adds space below the element
- margin-right: 10px;
- }
-
.video-info {
display: flex;
flex-direction: column;
-import { AfterContentInit, AfterViewInit, Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core'
+import { AfterViewInit, Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
import { I18n } from '@ngx-translate/i18n-polyfill'
import { DropdownAction, DropdownButtonSize, DropdownDirection } from '@app/shared/buttons/action-dropdown.component'
import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
return this.video.isUnblacklistableBy(this.user)
}
+ isVideoDownloadable () {
+ return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled
+ }
+
/* Action handlers */
async unblacklistVideo () {
{
label: this.i18n('Download'),
handler: () => this.showDownloadModal(),
- isDisplayed: () => this.displayOptions.download,
+ isDisplayed: () => this.displayOptions.download && this.isVideoDownloadable(),
iconName: 'download'
},
{
--- /dev/null
+<div *ngIf="playlist && video" class="playlist" myInfiniteScroller [autoInit]="true" [onItself]="true" (nearOfBottom)="onPlaylistVideosNearOfBottom()">
+ <div class="playlist-info">
+ <div class="playlist-display-name">
+ {{ playlist.displayName }}
+
+ <span *ngIf="isUnlistedPlaylist()" class="badge badge-warning" i18n>Unlisted</span>
+ <span *ngIf="isPrivatePlaylist()" class="badge badge-danger" i18n>Private</span>
+ <span *ngIf="isPublicPlaylist()" class="badge badge-info" i18n>Public</span>
+ </div>
+
+ <div class="playlist-by-index">
+ <div class="playlist-by">{{ playlist.ownerBy }}</div>
+ <div class="playlist-index">
+ <span>{{ currentPlaylistPosition }}</span><span>{{ playlistPagination.totalItems }}</span>
+ </div>
+ </div>
+ </div>
+
+ <div *ngFor="let playlistVideo of playlistVideos">
+ <my-video-playlist-element-miniature
+ [video]="playlistVideo" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
+ [playing]="currentPlaylistPosition === playlistVideo.playlistElement.position" [accountLink]="false" [position]="playlistVideo.playlistElement.position"
+ ></my-video-playlist-element-miniature>
+ </div>
+</div>
--- /dev/null
+@import '_variables';
+@import '_mixins';
+@import '_bootstrap-variables';
+@import '_miniature';
+
+.playlist {
+ min-width: 200px;
+ max-width: 470px;
+ height: 66vh;
+ background-color: var(--mainBackgroundColor);
+ overflow-y: auto;
+ border-bottom: 1px solid $separator-border-color;
+
+ .playlist-info {
+ padding: 5px 30px;
+ background-color: #e4e4e4;
+
+ .playlist-display-name {
+ font-size: 18px;
+ font-weight: $font-semibold;
+ margin-bottom: 5px;
+ }
+
+ .playlist-by-index {
+ color: $grey-foreground-color;
+ display: flex;
+
+ .playlist-by {
+ margin-right: 5px;
+ }
+
+ .playlist-index span:first-child::after {
+ content: '/';
+ margin: 0 3px;
+ }
+ }
+ }
+
+ my-video-playlist-element-miniature {
+ /deep/ {
+ .video {
+ .position {
+ margin-right: 0;
+ }
+
+ .video-info {
+ .video-info-name {
+ font-size: 15px;
+ }
+ }
+ }
+
+ my-video-thumbnail {
+ @include thumbnail-size-component(90px, 50px);
+ }
+ }
+ }
+}
+
--- /dev/null
+import { Component, Input } from '@angular/core'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { Video } from '@app/shared/video/video.model'
+import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models'
+import { VideoService } from '@app/shared/video/video.service'
+import { Router } from '@angular/router'
+import { AuthService } from '@app/core'
+
+@Component({
+ selector: 'my-video-watch-playlist',
+ templateUrl: './video-watch-playlist.component.html',
+ styleUrls: [ './video-watch-playlist.component.scss' ]
+})
+export class VideoWatchPlaylistComponent {
+ @Input() video: VideoDetails
+ @Input() playlist: VideoPlaylist
+
+ playlistVideos: Video[] = []
+ playlistPagination: ComponentPagination = {
+ currentPage: 1,
+ itemsPerPage: 30,
+ totalItems: null
+ }
+
+ noPlaylistVideos = false
+ currentPlaylistPosition = 1
+
+ constructor (
+ private auth: AuthService,
+ private videoService: VideoService,
+ private router: Router
+ ) {}
+
+ onPlaylistVideosNearOfBottom () {
+ // Last page
+ if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
+
+ this.playlistPagination.currentPage += 1
+ this.loadPlaylistElements(this.playlist,false)
+ }
+
+ onElementRemoved (video: Video) {
+ this.playlistVideos = this.playlistVideos.filter(v => v.id !== video.id)
+
+ this.playlistPagination.totalItems--
+ }
+
+ isPlaylistOwned () {
+ return this.playlist.isLocal === true && this.playlist.ownerAccount.name === this.auth.getUser().username
+ }
+
+ isUnlistedPlaylist () {
+ return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED
+ }
+
+ isPrivatePlaylist () {
+ return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
+ }
+
+ isPublicPlaylist () {
+ return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
+ }
+
+ loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false) {
+ this.videoService.getPlaylistVideos(playlist.uuid, this.playlistPagination)
+ .subscribe(({ totalVideos, videos }) => {
+ this.playlistVideos = this.playlistVideos.concat(videos)
+ this.playlistPagination.totalItems = totalVideos
+
+ if (totalVideos === 0) {
+ this.noPlaylistVideos = true
+ return
+ }
+
+ this.updatePlaylistIndex(this.video)
+
+ if (redirectToFirst) {
+ const extras = {
+ queryParams: { videoId: this.playlistVideos[ 0 ].uuid },
+ replaceUrl: true
+ }
+ this.router.navigate([], extras)
+ }
+ })
+ }
+
+ updatePlaylistIndex (video: VideoDetails) {
+ if (this.playlistVideos.length === 0 || !video) return
+
+ for (const playlistVideo of this.playlistVideos) {
+ if (playlistVideo.id === video.id) {
+ this.currentPlaylistPosition = playlistVideo.playlistElement.position
+ return
+ }
+ }
+
+ // Load more videos to find our video
+ this.onPlaylistVideosNearOfBottom()
+ }
+
+ navigateToNextPlaylistVideo () {
+ if (this.currentPlaylistPosition < this.playlistPagination.totalItems) {
+ const next = this.playlistVideos.find(v => v.playlistElement.position === this.currentPlaylistPosition + 1)
+
+ const start = next.playlistElement.startTimestamp
+ const stop = next.playlistElement.stopTimestamp
+ this.router.navigate([],{ queryParams: { videoId: next.uuid, start, stop } })
+ }
+ }
+}
<div id="videojs-wrapper"></div>
- <div *ngIf="playlist && video" class="playlist" myInfiniteScroller [autoInit]="true" [onItself]="true" (nearOfBottom)="onPlaylistVideosNearOfBottom()">
- <div class="playlist-info">
- <div class="playlist-display-name">
- {{ playlist.displayName }}
-
- <span *ngIf="isUnlistedPlaylist()" class="badge badge-warning" i18n>Unlisted</span>
- <span *ngIf="isPrivatePlaylist()" class="badge badge-danger" i18n>Private</span>
- <span *ngIf="isPublicPlaylist()" class="badge badge-info" i18n>Public</span>
- </div>
-
- <div class="playlist-by-index">
- <div class="playlist-by">{{ playlist.ownerBy }}</div>
- <div class="playlist-index">
- <span>{{ currentPlaylistPosition }}</span><span>{{ playlistPagination.totalItems }}</span>
- </div>
- </div>
- </div>
-
- <div *ngFor="let playlistVideo of playlistVideos">
- <my-video-playlist-element-miniature
- [video]="playlistVideo" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
- [playing]="currentPlaylistPosition === playlistVideo.playlistElement.position" [accountLink]="false" [position]="playlistVideo.playlistElement.position"
- ></my-video-playlist-element-miniature>
- </div>
- </div>
+ <my-video-watch-playlist
+ #videoWatchPlaylist
+ [video]="video" [playlist]="playlist" class="playlist"
+ ></my-video-watch-playlist>
</div>
<div class="row">
}
@mixin playlist-below-player {
- width: 100%;
- height: auto;
- max-height: 300px;
- border-bottom: 1px solid $separator-border-color;
+ width: 100% !important;
+ height: auto !important;
+ max-height: 300px !important;
+ border-bottom: 1px solid $separator-border-color !important;
}
.root {
width: 100%;
}
- .playlist {
+ my-video-watch-playlist /deep/ .playlist {
@include playlist-below-player;
}
}
}
}
- .playlist {
- min-width: 200px;
- max-width: 470px;
- height: 66vh;
- background-color: var(--mainBackgroundColor);
- overflow-y: auto;
- border-bottom: 1px solid $separator-border-color;
-
- .playlist-info {
- padding: 5px 30px;
- background-color: #e4e4e4;
-
- .playlist-display-name {
- font-size: 18px;
- font-weight: $font-semibold;
- margin-bottom: 5px;
- }
-
- .playlist-by-index {
- color: $grey-foreground-color;
- display: flex;
-
- .playlist-by {
- margin-right: 5px;
- }
-
- .playlist-index span:first-child::after {
- content: '/';
- margin: 0 3px;
- }
- }
- }
-
- my-video-playlist-element-miniature {
- /deep/ {
- .video {
- .position {
- margin-right: 0;
- }
-
- .video-info {
- .video-info-name {
- font-size: 15px;
- }
- }
- }
-
- my-video-thumbnail {
- @include thumbnail-size-component(90px, 50px);
- }
- }
- }
- }
-
/deep/ .video-js {
width: getPlayerWidth(66vh);
height: 66vh;
flex-direction: column;
justify-content: center;
- .playlist {
+ my-video-watch-playlist /deep/ .playlist {
@include playlist-below-player;
}
}
import { Notifier, ServerService } from '@app/core'
import { forkJoin, Subscription } from 'rxjs'
import { Hotkey, HotkeysService } from 'angular2-hotkeys'
-import { UserVideoRateType, VideoCaption, VideoPlaylistPrivacy, VideoPrivacy, VideoState } from '../../../../../shared'
+import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared'
import { AuthService, ConfirmService } from '../../core'
import { RestExtractor, VideoBlacklistService } from '../../shared'
import { VideoDetails } from '../../shared/video/video-details.model'
} from '../../../assets/player/peertube-player-manager'
import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
import { Video } from '@app/shared/video/video.model'
import { isWebRTCDisabled } from '../../../assets/player/utils'
+import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component'
@Component({
selector: 'my-video-watch',
export class VideoWatchComponent implements OnInit, OnDestroy {
private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
+ @ViewChild('videoWatchPlaylist') videoWatchPlaylist: VideoWatchPlaylistComponent
@ViewChild('videoShareModal') videoShareModal: VideoShareComponent
@ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
@ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
descriptionLoading = false
playlist: VideoPlaylist = null
- playlistVideos: Video[] = []
- playlistPagination: ComponentPagination = {
- currentPage: 1,
- itemsPerPage: 30,
- totalItems: null
- }
- noPlaylistVideos = false
- currentPlaylistPosition = 1
completeDescriptionShown = false
completeVideoDescription: string
return this.video.tags
}
- isVideoRemovable () {
- return this.video.isRemovableBy(this.authService.getUser())
- }
-
onVideoRemoved () {
this.redirectService.redirectToHomepage()
}
return this.video && this.video.state.id === VideoState.TO_TRANSCODE
}
- isVideoDownloadable () {
- return this.video && this.video.downloadEnabled
- }
-
isVideoToImport () {
return this.video && this.video.state.id === VideoState.TO_IMPORT
}
return video.isVideoNSFWForUser(this.user, this.serverService.getConfig())
}
- isPlaylistOwned () {
- return this.playlist.isLocal === true && this.playlist.ownerAccount.name === this.user.username
- }
-
- isUnlistedPlaylist () {
- return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED
- }
-
- isPrivatePlaylist () {
- return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
- }
-
- isPublicPlaylist () {
- return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
- }
-
- onPlaylistVideosNearOfBottom () {
- // Last page
- if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
-
- this.playlistPagination.currentPage += 1
- this.loadPlaylistElements(false)
- }
-
- onElementRemoved (video: Video) {
- this.playlistVideos = this.playlistVideos.filter(v => v.id !== video.id)
-
- this.playlistPagination.totalItems--
- }
-
private loadVideo (videoId: string) {
// Video did not change
if (this.video && this.video.uuid === videoId) return
this.playlist = playlist
const videoId = this.route.snapshot.queryParams['videoId']
- this.loadPlaylistElements(!videoId)
+ this.videoWatchPlaylist.loadPlaylistElements(playlist, !videoId)
})
}
- private loadPlaylistElements (redirectToFirst = false) {
- this.videoService.getPlaylistVideos(this.playlist.uuid, this.playlistPagination)
- .subscribe(({ totalVideos, videos }) => {
- this.playlistVideos = this.playlistVideos.concat(videos)
- this.playlistPagination.totalItems = totalVideos
-
- if (totalVideos === 0) {
- this.noPlaylistVideos = true
- return
- }
-
- this.updatePlaylistIndex()
-
- if (redirectToFirst) {
- const extras = {
- queryParams: { videoId: this.playlistVideos[ 0 ].uuid },
- replaceUrl: true
- }
- this.router.navigate([], extras)
- }
- })
- }
-
private updateVideoDescription (description: string) {
this.video.description = description
this.setVideoDescriptionHTML()
this.remoteServerDown = false
this.currentTime = undefined
- this.updatePlaylistIndex()
+ this.videoWatchPlaylist.updatePlaylistIndex(video)
let startTime = urlOptions.startTime || (this.video.userHistory ? this.video.userHistory.currentTime : 0)
// If we are at the end of the video, reset the timer
this.player.one('ended', () => {
if (this.playlist) {
- this.zone.run(() => this.navigateToNextPlaylistVideo())
+ this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
}
})
this.player.one('stopped', () => {
if (this.playlist) {
- this.zone.run(() => this.navigateToNextPlaylistVideo())
+ this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
}
})
this.setVideoLikesBarTooltipText()
}
- private updatePlaylistIndex () {
- if (this.playlistVideos.length === 0 || !this.video) return
-
- for (const video of this.playlistVideos) {
- if (video.id === this.video.id) {
- this.currentPlaylistPosition = video.playlistElement.position
- return
- }
- }
-
- // Load more videos to find our video
- this.onPlaylistVideosNearOfBottom()
- }
-
private setOpenGraphTags () {
this.metaService.setTitle(this.video.name)
this.player = undefined
}
}
-
- private navigateToNextPlaylistVideo () {
- if (this.currentPlaylistPosition < this.playlistPagination.totalItems) {
- const next = this.playlistVideos.find(v => v.playlistElement.position === this.currentPlaylistPosition + 1)
-
- const start = next.playlistElement.startTimestamp
- const stop = next.playlistElement.stopTimestamp
- this.router.navigate([],{ queryParams: { videoId: next.uuid, start, stop } })
- }
- }
}
import { NgxQRCodeModule } from 'ngx-qrcode2'
import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
import { RecommendationsModule } from '@app/videos/recommendations/recommendations.module'
+import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component'
@NgModule({
imports: [
declarations: [
VideoWatchComponent,
+ VideoWatchPlaylistComponent,
VideoShareComponent,
VideoSupportComponent,
projects / oweals / peertube.git / commitdiff