mirror of
https://github.com/Chocobozzz/PeerTube.git
synced 2024-09-20 01:47:21 +03:00
Add ability to list all local videos on client
This commit is contained in:
parent
1cd3facc3d
commit
017c3dcadf
@ -1,17 +1,6 @@
|
|||||||
@import '_variables';
|
@import '_variables';
|
||||||
@import '_mixins';
|
@import '_mixins';
|
||||||
|
|
||||||
my-redundancy-checkbox /deep/ my-peertube-checkbox {
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 0;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.caption {
|
.caption {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<div class="form-group">
|
<div class="root">
|
||||||
<label class="form-group-checkbox">
|
<label class="form-group-checkbox">
|
||||||
<input type="checkbox" [(ngModel)]="checked" (ngModelChange)="onModelChange()" [id]="inputName" [disabled]="isDisabled" />
|
<input type="checkbox" [(ngModel)]="checked" (ngModelChange)="onModelChange()" [id]="inputName" [disabled]="isDisabled" />
|
||||||
<span role="checkbox" [attr.aria-checked]="checked"></span>
|
<span role="checkbox" [attr.aria-checked]="checked"></span>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
@import '_variables';
|
@import '_variables';
|
||||||
@import '_mixins';
|
@import '_mixins';
|
||||||
|
|
||||||
.form-group {
|
.root {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.form-group-checkbox {
|
.form-group-checkbox {
|
||||||
@ -20,6 +20,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
my-help {
|
my-help {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
|
@ -1,8 +1,18 @@
|
|||||||
<div [ngClass]="{ 'margin-content': marginContent }">
|
<div [ngClass]="{ 'margin-content': marginContent }">
|
||||||
<div *ngIf="titlePage" class="title-page title-page-single">
|
<div class="videos-header">
|
||||||
{{ titlePage }}
|
<div *ngIf="titlePage" class="title-page title-page-single">
|
||||||
|
{{ titlePage }}
|
||||||
|
</div>
|
||||||
|
<my-video-feed [syndicationItems]="syndicationItems"></my-video-feed>
|
||||||
|
|
||||||
|
<div class="moderation-block" *ngIf="displayModerationBlock">
|
||||||
|
<my-peertube-checkbox
|
||||||
|
(change)="toggleModerationDisplay()"
|
||||||
|
inputName="display-unlisted-private" i18n-labelText labelText="Display unlisted and private videos"
|
||||||
|
>
|
||||||
|
</my-peertube-checkbox>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<my-video-feed [syndicationItems]="syndicationItems"></my-video-feed>
|
|
||||||
|
|
||||||
<div class="no-results" i18n *ngIf="pagination.totalItems === 0">No results.</div>
|
<div class="no-results" i18n *ngIf="pagination.totalItems === 0">No results.</div>
|
||||||
<div
|
<div
|
||||||
|
@ -8,12 +8,27 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-page.title-page-single {
|
.videos-header {
|
||||||
margin-right: 5px;
|
display: flex;
|
||||||
}
|
height: 80px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
my-video-feed {
|
.title-page.title-page-single {
|
||||||
display: inline-block;
|
margin: 0 5px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
my-video-feed {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moderation-block {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
@media screen and (max-width: 500px) {
|
||||||
|
@ -37,6 +37,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
|
|||||||
videoPages: Video[][] = []
|
videoPages: Video[][] = []
|
||||||
ownerDisplayType: OwnerDisplayType = 'account'
|
ownerDisplayType: OwnerDisplayType = 'account'
|
||||||
firstLoadedPage: number
|
firstLoadedPage: number
|
||||||
|
displayModerationBlock = false
|
||||||
|
|
||||||
protected baseVideoWidth = 215
|
protected baseVideoWidth = 215
|
||||||
protected baseVideoHeight = 205
|
protected baseVideoHeight = 205
|
||||||
@ -160,6 +161,10 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleModerationDisplay () {
|
||||||
|
throw new Error('toggleModerationDisplay is not implemented')
|
||||||
|
}
|
||||||
|
|
||||||
protected hasMoreVideos () {
|
protected hasMoreVideos () {
|
||||||
// No results
|
// No results
|
||||||
if (this.pagination.totalItems === 0) return false
|
if (this.pagination.totalItems === 0) return false
|
||||||
|
@ -8,6 +8,9 @@
|
|||||||
[routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
|
[routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
|
||||||
>
|
>
|
||||||
{{ video.name }}
|
{{ video.name }}
|
||||||
|
|
||||||
|
<span *ngIf="isUnlistedVideo(video)" class="badge badge-warning" i18n>Unlisted</span>
|
||||||
|
<span *ngIf="isPrivateVideo(video)" class="badge badge-danger" i18n>Private</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<span i18n class="video-miniature-created-at-views">{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
|
<span i18n class="video-miniature-created-at-views">{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
|
||||||
|
@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
|
|||||||
import { User } from '../users'
|
import { User } from '../users'
|
||||||
import { Video } from './video.model'
|
import { Video } from './video.model'
|
||||||
import { ServerService } from '@app/core'
|
import { ServerService } from '@app/core'
|
||||||
|
import { VideoPrivacy } from '../../../../../shared'
|
||||||
|
|
||||||
export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
|
export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
|
||||||
|
|
||||||
@ -49,4 +50,12 @@ export class VideoMiniatureComponent implements OnInit {
|
|||||||
displayOwnerVideoChannel () {
|
displayOwnerVideoChannel () {
|
||||||
return this.ownerDisplayTypeChosen === 'videoChannel'
|
return this.ownerDisplayTypeChosen === 'videoChannel'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
isUnlistedVideo () {
|
||||||
|
return this.video.privacy.id === VideoPrivacy.UNLISTED
|
||||||
|
}
|
||||||
|
|
||||||
|
isPrivateVideo () {
|
||||||
|
return this.video.privacy.id === VideoPrivacy.PRIVATE
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -5,6 +5,11 @@
|
|||||||
@include peertube-select-container(auto);
|
@include peertube-select-container(auto);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
my-peertube-checkbox {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.video-edit {
|
.video-edit {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
|
@ -10,6 +10,7 @@ import { VideoService } from '../../shared/video/video.service'
|
|||||||
import { VideoFilter } from '../../../../../shared/models/videos/video-query.type'
|
import { VideoFilter } from '../../../../../shared/models/videos/video-query.type'
|
||||||
import { I18n } from '@ngx-translate/i18n-polyfill'
|
import { I18n } from '@ngx-translate/i18n-polyfill'
|
||||||
import { ScreenService } from '@app/shared/misc/screen.service'
|
import { ScreenService } from '@app/shared/misc/screen.service'
|
||||||
|
import { UserRight } from '../../../../../shared/models/users'
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'my-videos-local',
|
selector: 'my-videos-local',
|
||||||
@ -40,6 +41,11 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On
|
|||||||
ngOnInit () {
|
ngOnInit () {
|
||||||
super.ngOnInit()
|
super.ngOnInit()
|
||||||
|
|
||||||
|
if (this.authService.isLoggedIn()) {
|
||||||
|
const user = this.authService.getUser()
|
||||||
|
this.displayModerationBlock = user.hasRight(UserRight.SEE_ALL_VIDEOS)
|
||||||
|
}
|
||||||
|
|
||||||
this.generateSyndicationList()
|
this.generateSyndicationList()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -56,4 +62,10 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On
|
|||||||
generateSyndicationList () {
|
generateSyndicationList () {
|
||||||
this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, this.filter, this.categoryOneOf)
|
this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, this.filter, this.categoryOneOf)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleModerationDisplay () {
|
||||||
|
this.filter = this.filter === 'local' ? 'all-local' as 'all-local' : 'local' as 'local'
|
||||||
|
|
||||||
|
this.reloadVideos()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -29,7 +29,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
/* Fallback for non-webkit */
|
/* Fallback for non-webkit */
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
max-height: $font-size*$line-height*$lines-to-show;
|
max-height: $font-size*$line-height*$lines-to-show + 0.2;
|
||||||
/* Fallback for non-webkit */
|
/* Fallback for non-webkit */
|
||||||
font-size: $font-size;
|
font-size: $font-size;
|
||||||
line-height: $line-height;
|
line-height: $line-height;
|
||||||
|
Loading…
Reference in New Issue
Block a user