From 244e76a552ef05a5067134b1065d26dd89246d8c Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Tue, 17 Apr 2018 00:49:04 +0200 Subject: feature: initial syndication feeds support MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Provides rss 2.0, atom 1.0 and json 1.0 feeds for videos (instance and account-wide) on listings and video-watch views. * still lacks redis caching * still lacks lastBuildDate support * still lacks channel-wide support * still lacks semantic annotation (for licenses, NSFW warnings, etc.) * still lacks love ( ˘ ³˘) * RSS: has MRSS support for torrent lists! * RSS: includes the first torrent in an enclosure * JSON: lists all torrents in the 'attachments' object * ATOM: lacking torrent listing support Advances #23 Partial implementation for the accountId generation in the client, which will need a hotfix to add a way to get the proper account id. --- .../account-videos/account-videos.component.ts | 6 +++ client/src/app/shared/misc/object-length.pipe.ts | 8 ++++ client/src/app/shared/shared.module.ts | 9 +++++ .../src/app/shared/video/abstract-video-list.html | 2 +- .../src/app/shared/video/abstract-video-list.scss | 7 ++++ client/src/app/shared/video/abstract-video-list.ts | 6 +++ .../src/app/shared/video/video-feed.component.html | 14 +++++++ .../src/app/shared/video/video-feed.component.scss | 19 ++++++++++ .../src/app/shared/video/video-feed.component.ts | 14 +++++++ client/src/app/shared/video/video.service.ts | 43 ++++++++++++++++++++++ .../videos/+video-watch/video-watch.component.html | 1 + .../videos/+video-watch/video-watch.component.scss | 5 +++ .../videos/+video-watch/video-watch.component.ts | 23 ++++++++++-- .../app/videos/video-list/video-local.component.ts | 11 ++++++ .../video-list/video-recently-added.component.ts | 10 +++++ .../videos/video-list/video-search.component.ts | 5 +++ .../videos/video-list/video-trending.component.ts | 10 +++++ 17 files changed, 188 insertions(+), 5 deletions(-) create mode 100644 client/src/app/shared/misc/object-length.pipe.ts create mode 100644 client/src/app/shared/video/video-feed.component.html create mode 100644 client/src/app/shared/video/video-feed.component.scss create mode 100644 client/src/app/shared/video/video-feed.component.ts (limited to 'client/src/app') diff --git a/client/src/app/account/account-videos/account-videos.component.ts b/client/src/app/account/account-videos/account-videos.component.ts index 2664d59d8..b9a3bea3f 100644 --- a/client/src/app/account/account-videos/account-videos.component.ts +++ b/client/src/app/account/account-videos/account-videos.component.ts @@ -27,6 +27,8 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit, totalItems: null } + syndicationItems = {} + protected baseVideoWidth = -1 protected baseVideoHeight = 155 @@ -61,6 +63,10 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit, return this.videoService.getMyVideos(newPagination, this.sort) } + generateSyndicationList () { + throw new Error('Method not implemented.') + } + async deleteSelectedVideos () { const toDeleteVideosIds = Object.keys(this.checkedVideos) .filter(k => this.checkedVideos[k] === true) diff --git a/client/src/app/shared/misc/object-length.pipe.ts b/client/src/app/shared/misc/object-length.pipe.ts new file mode 100644 index 000000000..84d182052 --- /dev/null +++ b/client/src/app/shared/misc/object-length.pipe.ts @@ -0,0 +1,8 @@ +import { Pipe, PipeTransform } from '@angular/core' + +@Pipe({ name: 'myObjectLength' }) +export class ObjectLengthPipe implements PipeTransform { + transform (value: Object) { + return Object.keys(value).length + } +} diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index eb50d45a9..74730e2aa 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -10,6 +10,7 @@ import { MarkdownService } from '@app/videos/shared' import { BsDropdownModule } from 'ngx-bootstrap/dropdown' import { ModalModule } from 'ngx-bootstrap/modal' +import { PopoverModule } from 'ngx-bootstrap/popover' import { TabsModule } from 'ngx-bootstrap/tabs' import { TooltipModule } from 'ngx-bootstrap/tooltip' import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes' @@ -21,11 +22,13 @@ import { EditButtonComponent } from './misc/edit-button.component' import { FromNowPipe } from './misc/from-now.pipe' import { LoaderComponent } from './misc/loader.component' import { NumberFormatterPipe } from './misc/number-formatter.pipe' +import { ObjectLengthPipe } from './misc/object-length.pipe' import { RestExtractor, RestService } from './rest' import { UserService } from './users' import { VideoAbuseService } from './video-abuse' import { VideoBlacklistService } from './video-blacklist' import { VideoMiniatureComponent } from './video/video-miniature.component' +import { VideoFeedComponent } from './video/video-feed.component' import { VideoThumbnailComponent } from './video/video-thumbnail.component' import { VideoService } from './video/video.service' @@ -39,6 +42,7 @@ import { VideoService } from './video/video.service' BsDropdownModule.forRoot(), ModalModule.forRoot(), + PopoverModule.forRoot(), TabsModule.forRoot(), TooltipModule.forRoot(), @@ -50,9 +54,11 @@ import { VideoService } from './video/video.service' LoaderComponent, VideoThumbnailComponent, VideoMiniatureComponent, + VideoFeedComponent, DeleteButtonComponent, EditButtonComponent, NumberFormatterPipe, + ObjectLengthPipe, FromNowPipe, MarkdownTextareaComponent, InfiniteScrollerDirective, @@ -68,6 +74,7 @@ import { VideoService } from './video/video.service' BsDropdownModule, ModalModule, + PopoverModule, TabsModule, TooltipModule, PrimeSharedModule, @@ -77,6 +84,7 @@ import { VideoService } from './video/video.service' LoaderComponent, VideoThumbnailComponent, VideoMiniatureComponent, + VideoFeedComponent, DeleteButtonComponent, EditButtonComponent, MarkdownTextareaComponent, @@ -84,6 +92,7 @@ import { VideoService } from './video/video.service' HelpComponent, NumberFormatterPipe, + ObjectLengthPipe, FromNowPipe ], diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html index 94a38019d..cb04e07b4 100644 --- a/client/src/app/shared/video/abstract-video-list.html +++ b/client/src/app/shared/video/abstract-video-list.html @@ -2,9 +2,9 @@
{{ titlePage }}
+
No results.
-
+ abstract generateSyndicationList () get user () { return this.authService.getUser() diff --git a/client/src/app/shared/video/video-feed.component.html b/client/src/app/shared/video/video-feed.component.html new file mode 100644 index 000000000..7733ef221 --- /dev/null +++ b/client/src/app/shared/video/video-feed.component.html @@ -0,0 +1,14 @@ +
+ + + + +
+ {{ key }} +
+ +
+ \ No newline at end of file diff --git a/client/src/app/shared/video/video-feed.component.scss b/client/src/app/shared/video/video-feed.component.scss new file mode 100644 index 000000000..2efeb405e --- /dev/null +++ b/client/src/app/shared/video/video-feed.component.scss @@ -0,0 +1,19 @@ +@import '_mixins'; + +.video-feed { + a { + @include disable-default-a-behaviour; + + color: black; + } + + .icon { + @include icon(12px); + + &.icon-syndication { + position: relative; + top: -2px; + background-image: url('../../../assets/images/global/syndication.svg'); + } + } +} \ No newline at end of file diff --git a/client/src/app/shared/video/video-feed.component.ts b/client/src/app/shared/video/video-feed.component.ts new file mode 100644 index 000000000..41257ca99 --- /dev/null +++ b/client/src/app/shared/video/video-feed.component.ts @@ -0,0 +1,14 @@ +import { Component, Input, OnChanges, SimpleChanges } from '@angular/core' + +@Component({ + selector: 'my-video-feed', + styleUrls: [ './video-feed.component.scss' ], + templateUrl: './video-feed.component.html' +}) +export class VideoFeedComponent implements OnChanges { + @Input() syndicationItems + + ngOnChanges (changes: SimpleChanges) { + this.syndicationItems = changes.syndicationItems.currentValue + } +} diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts index 0a8894fd9..009155410 100644 --- a/client/src/app/shared/video/video.service.ts +++ b/client/src/app/shared/video/video.service.ts @@ -8,6 +8,7 @@ import { ResultList } from '../../../../../shared/models/result-list.model' import { UserVideoRateUpdate } from '../../../../../shared/models/videos/user-video-rate-update.model' import { UserVideoRate } from '../../../../../shared/models/videos/user-video-rate.model' import { VideoFilter } from '../../../../../shared/models/videos/video-query.type' +import { FeedFormat } from '../../../../../shared/models/feeds/feed-format.enum' import { VideoRateType } from '../../../../../shared/models/videos/video-rate.type' import { VideoUpdate } from '../../../../../shared/models/videos/video-update.model' import { environment } from '../../../environments/environment' @@ -24,6 +25,7 @@ import { objectToFormData } from '@app/shared/misc/utils' @Injectable() export class VideoService { private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/' + private static BASE_FEEDS_URL = environment.apiUrl + '/feeds/videos.' constructor ( private authHttp: HttpClient, @@ -115,6 +117,47 @@ export class VideoService { .catch((res) => this.restExtractor.handleError(res)) } + baseFeed () { + const feed = {} + + for (let item in FeedFormat) { + feed[FeedFormat[item]] = VideoService.BASE_FEEDS_URL + item.toLowerCase() + } + + return feed + } + + getFeed ( + filter?: VideoFilter + ) { + let params = this.restService.addRestGetParams(new HttpParams()) + const feed = this.baseFeed() + + if (filter) { + params = params.set('filter', filter) + } + for (let item in feed) { + feed[item] = feed[item] + ((params.toString().length === 0) ? '' : '?') + params.toString() + } + + return feed + } + + getAccountFeed ( + accountId: number, + host?: string + ) { + let params = this.restService.addRestGetParams(new HttpParams()) + const feed = this.baseFeed() + + params = params.set('accountId', accountId.toString()) + for (let item in feed) { + feed[item] = feed[item] + ((params.toString().length === 0) ? '' : '?') + params.toString() + } + + return feed + } + searchVideos ( search: string, videoPagination: ComponentPagination, 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 03f64bd12..52e3e429a 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -24,6 +24,7 @@
By {{ video.by }} Account avatar +
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 03f960339..8a3e2584b 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -80,6 +80,11 @@ } } + my-video-feed { + margin-left: 5px; + margin-top: 1px; + } + .video-actions-rates { display: flex; flex-direction: column; 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 df5b8d02d..b3ebe3e4b 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core' +import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild, OnChanges } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { RedirectService } from '@app/core/routing/redirect.service' import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' @@ -9,18 +9,20 @@ import { Subscription } from 'rxjs/Subscription' import * as videojs from 'video.js' import 'videojs-hotkeys' import * as WebTorrent from 'webtorrent' -import { UserVideoRateType, VideoRateType } from '../../../../../shared' +import { UserVideoRateType, VideoRateType, FeedFormat } from '../../../../../shared' import '../../../assets/player/peertube-videojs-plugin' import { AuthService, ConfirmService } from '../../core' import { VideoBlacklistService } from '../../shared' import { Account } from '../../shared/account/account.model' import { VideoDetails } from '../../shared/video/video-details.model' +import { VideoFeedComponent } from '../../shared/video/video-feed.component' import { Video } from '../../shared/video/video.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' +import { environment } from '../../../environments/environment' import { getVideojsOptions } from '../../../assets/player/peertube-player' @Component({ @@ -38,6 +40,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { otherVideosDisplayed: Video[] = [] + syndicationItems = {} + player: videojs.Player playerElement: HTMLVideoElement userRating: UserVideoRateType = null @@ -98,14 +102,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } const uuid = routeParams['uuid'] - // Video did not changed + // Video did not change if (this.video && this.video.uuid === uuid) return - + // Video did change this.videoService.getVideo(uuid).subscribe( video => { const startTime = this.route.snapshot.queryParams.start this.onVideoFetched(video, startTime) .catch(err => this.handleError(err)) + this.generateSyndicationList() }, error => { @@ -242,6 +247,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video.tags.join(', ') } + generateSyndicationList () { + const feeds = this.videoService.getAccountFeed( + this.video.account.id, + (this.video.isLocal) ? environment.apiUrl : this.video.account.host + ) + this.syndicationItems['rss 2.0'] = feeds[FeedFormat.RSS] + this.syndicationItems['atom 1.0'] = feeds[FeedFormat.ATOM] + this.syndicationItems['json 1.0'] = feeds[FeedFormat.JSON] + } + isVideoRemovable () { return this.video.isRemovableBy(this.authService.getUser()) } diff --git a/client/src/app/videos/video-list/video-local.component.ts b/client/src/app/videos/video-list/video-local.component.ts index 8f9d50a7b..9d626abd1 100644 --- a/client/src/app/videos/video-list/video-local.component.ts +++ b/client/src/app/videos/video-list/video-local.component.ts @@ -3,9 +3,12 @@ import { ActivatedRoute, Router } from '@angular/router' import { immutableAssign } from '@app/shared/misc/utils' import { NotificationsService } from 'angular2-notifications' import { AuthService } from '../../core/auth' +import { PopoverModule } from 'ngx-bootstrap/popover' import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { SortField } from '../../shared/video/sort-field.type' import { VideoService } from '../../shared/video/video.service' +import { FeedFormat } from '../../../../../shared/models/feeds/feed-format.enum' +import * as url from 'url' @Component({ selector: 'my-videos-local', @@ -27,6 +30,7 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On ngOnInit () { super.ngOnInit() + this.generateSyndicationList() } ngOnDestroy () { @@ -38,4 +42,11 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On return this.videoService.getVideos(newPagination, this.sort, 'local') } + + generateSyndicationList () { + const feeds = this.videoService.getFeed('local') + this.syndicationItems['rss 2.0'] = feeds[FeedFormat.RSS] + this.syndicationItems['atom 1.0'] = feeds[FeedFormat.ATOM] + this.syndicationItems['json 1.0'] = feeds[FeedFormat.JSON] + } } diff --git a/client/src/app/videos/video-list/video-recently-added.component.ts b/client/src/app/videos/video-list/video-recently-added.component.ts index 1cecd14a0..2bdc20d92 100644 --- a/client/src/app/videos/video-list/video-recently-added.component.ts +++ b/client/src/app/videos/video-list/video-recently-added.component.ts @@ -6,6 +6,8 @@ import { AuthService } from '../../core/auth' import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { SortField } from '../../shared/video/sort-field.type' import { VideoService } from '../../shared/video/video.service' +import { FeedFormat } from '../../../../../shared/models/feeds/feed-format.enum' +import * as url from 'url' @Component({ selector: 'my-videos-recently-added', @@ -27,6 +29,7 @@ export class VideoRecentlyAddedComponent extends AbstractVideoList implements On ngOnInit () { super.ngOnInit() + this.generateSyndicationList() } ngOnDestroy () { @@ -38,4 +41,11 @@ export class VideoRecentlyAddedComponent extends AbstractVideoList implements On return this.videoService.getVideos(newPagination, this.sort) } + + generateSyndicationList () { + const feeds = this.videoService.getFeed('local') + this.syndicationItems['rss 2.0'] = feeds[FeedFormat.RSS] + this.syndicationItems['atom 1.0'] = feeds[FeedFormat.ATOM] + this.syndicationItems['json 1.0'] = feeds[FeedFormat.JSON] + } } diff --git a/client/src/app/videos/video-list/video-search.component.ts b/client/src/app/videos/video-list/video-search.component.ts index b94be8e11..ef9afa757 100644 --- a/client/src/app/videos/video-list/video-search.component.ts +++ b/client/src/app/videos/video-list/video-search.component.ts @@ -7,6 +7,7 @@ import { Subscription } from 'rxjs/Subscription' import { AuthService } from '../../core/auth' import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { VideoService } from '../../shared/video/video.service' +import { FeedFormat } from '../../../../../shared/models/feeds/feed-format.enum' @Component({ selector: 'my-videos-search', @@ -61,4 +62,8 @@ export class VideoSearchComponent extends AbstractVideoList implements OnInit, O const newPagination = immutableAssign(this.pagination, { currentPage: page }) return this.videoService.searchVideos(this.otherRouteParams.search, newPagination, this.sort) } + + generateSyndicationList () { + throw new Error('Method not implemented.') + } } diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts index 1dd1ad23b..905c75ab0 100644 --- a/client/src/app/videos/video-list/video-trending.component.ts +++ b/client/src/app/videos/video-list/video-trending.component.ts @@ -6,6 +6,8 @@ import { AuthService } from '../../core/auth' import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { SortField } from '../../shared/video/sort-field.type' import { VideoService } from '../../shared/video/video.service' +import { FeedFormat } from '../../../../../shared/models/feeds/feed-format.enum' +import * as url from 'url' @Component({ selector: 'my-videos-trending', @@ -27,6 +29,7 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit, ngOnInit () { super.ngOnInit() + this.generateSyndicationList() } ngOnDestroy () { @@ -37,4 +40,11 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit, const newPagination = immutableAssign(this.pagination, { currentPage: page }) return this.videoService.getVideos(newPagination, this.sort) } + + generateSyndicationList () { + const feeds = this.videoService.getFeed('local') + this.syndicationItems['rss 2.0'] = feeds[FeedFormat.RSS] + this.syndicationItems['atom 1.0'] = feeds[FeedFormat.ATOM] + this.syndicationItems['json 1.0'] = feeds[FeedFormat.JSON] + } } -- cgit v1.2.3