diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html index 48b5681f4..ce603459e 100644 --- a/client/src/app/+admin/follows/followers-list/followers-list.component.html +++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html @@ -44,8 +44,8 @@ - - + + diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html index 2e7b322ca..d103f8e2f 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.html +++ b/client/src/app/+admin/users/user-edit/user-edit.component.html @@ -95,7 +95,7 @@
{{ formErrors.email }} diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html index 3e07550c1..4caa076a3 100644 --- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html +++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html @@ -45,7 +45,7 @@ {{ videoImport.createdAt | date: 'short' }} - + diff --git a/client/src/app/+search/channel-lazy-load.resolver.ts b/client/src/app/+search/channel-lazy-load.resolver.ts index 17a212829..d9f7ec901 100644 --- a/client/src/app/+search/channel-lazy-load.resolver.ts +++ b/client/src/app/+search/channel-lazy-load.resolver.ts @@ -12,20 +12,12 @@ export class ChannelLazyLoadResolver implements Resolve { resolve (route: ActivatedRouteSnapshot) { const url = route.params.url - const externalRedirect = route.params.externalRedirect - const fromPath = route.params.fromPath if (!url) { console.error('Could not find url param.', { params: route.params }) return this.router.navigateByUrl('/404') } - if (externalRedirect === 'true') { - window.open(url) - this.router.navigateByUrl(fromPath) - return - } - return this.searchService.searchVideoChannels({ search: url }) .pipe( map(result => { diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html index 9bff024ad..84be4fb14 100644 --- a/client/src/app/+search/search.component.html +++ b/client/src/app/+search/search.component.html @@ -35,15 +35,27 @@
- + + Avatar + + + Avatar
- + + + + + + + + +
{{ result.displayName }}
{{ result.nameWithHost }}
- +
{{ result.followersCount }} subscribers
@@ -54,7 +66,7 @@
diff --git a/client/src/app/+search/search.component.ts b/client/src/app/+search/search.component.ts index 1ed54937b..70116fab3 100644 --- a/client/src/app/+search/search.component.ts +++ b/client/src/app/+search/search.component.ts @@ -5,7 +5,7 @@ import { AuthService, ComponentPagination, HooksService, Notifier, ServerService import { immutableAssign } from '@app/helpers' import { Video, VideoChannel } from '@app/shared/shared-main' import { AdvancedSearch, SearchService } from '@app/shared/shared-search' -import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature' +import { MiniatureDisplayOptions, VideoLinkType } from '@app/shared/shared-video-miniature' import { MetaService } from '@ngx-meta/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { SearchTargetType, ServerConfig } from '@shared/models' @@ -119,6 +119,25 @@ export class SearchComponent implements OnInit, OnDestroy { return this.authService.isLoggedIn() } + getVideoLinkType (): VideoLinkType { + if (this.advancedSearch.searchTarget === 'search-index') { + const remoteUriConfig = this.serverConfig.search.remoteUri + + // Redirect on the external instance if not allowed to fetch remote data + if ((!this.isUserLoggedIn() && !remoteUriConfig.anonymous) || !remoteUriConfig.users) { + return 'external' + } + + return 'lazy-load' + } + + return 'internal' + } + + isExternalChannelUrl () { + return this.getVideoLinkType() === 'external' + } + search () { forkJoin([ this.getVideosObs(), @@ -184,17 +203,16 @@ export class SearchComponent implements OnInit, OnDestroy { } getChannelUrl (channel: VideoChannel) { - if (this.advancedSearch.searchTarget === 'search-index' && channel.url) { - const remoteUriConfig = this.serverConfig.search.remoteUri - - // Redirect on the external instance if not allowed to fetch remote data - const externalRedirect = (!this.authService.isLoggedIn() && !remoteUriConfig.anonymous) || !remoteUriConfig.users - const fromPath = window.location.pathname + window.location.search - - return [ '/search/lazy-load-channel', { url: channel.url, externalRedirect, fromPath } ] + // Same algorithm than videos + if (this.getVideoLinkType() === 'external') { + return channel.url } - return [ '/video-channels', channel.nameWithHost ] + if (this.getVideoLinkType() === 'internal') { + return [ '/video-channels', channel.nameWithHost ] + } + + return [ '/search/lazy-load-channel', { url: channel.url } ] } hideActions () { diff --git a/client/src/app/+search/video-lazy-load.resolver.ts b/client/src/app/+search/video-lazy-load.resolver.ts index e8b2b8c74..d4fe6ed79 100644 --- a/client/src/app/+search/video-lazy-load.resolver.ts +++ b/client/src/app/+search/video-lazy-load.resolver.ts @@ -12,20 +12,12 @@ export class VideoLazyLoadResolver implements Resolve { resolve (route: ActivatedRouteSnapshot) { const url = route.params.url - const externalRedirect = route.params.externalRedirect - const fromPath = route.params.fromPath if (!url) { console.error('Could not find url param.', { params: route.params }) return this.router.navigateByUrl('/404') } - if (externalRedirect === 'true') { - window.open(url) - this.router.navigateByUrl(fromPath) - return - } - return this.searchService.searchVideos({ search: url }) .pipe( map(result => { diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss index f2c76f7a1..39e72b5bc 100644 --- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss +++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss @@ -43,7 +43,7 @@ $input-border-radius: 3px; } .grey-button { - padding: 0 12px 0 12px; + padding: 0 7px 0 12px; } } } diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html index a7dd4bb10..8eccd5c3c 100644 --- a/client/src/app/shared/shared-main/buttons/button.component.html +++ b/client/src/app/shared/shared-main/buttons/button.component.html @@ -1,4 +1,4 @@ - + diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.html b/client/src/app/shared/shared-main/buttons/delete-button.component.html index 398b6db1e..6643e6013 100644 --- a/client/src/app/shared/shared-main/buttons/delete-button.component.html +++ b/client/src/app/shared/shared-main/buttons/delete-button.component.html @@ -1,4 +1,4 @@ - + {{ label }} diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html index fe5510c56..0cb0f321b 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html @@ -1,7 +1,12 @@ - + + + + + + + + +
@@ -30,4 +35,4 @@
- + diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts index 3ff45d9b7..812c7a508 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts @@ -11,8 +11,11 @@ import { Video } from '../shared-main' export class VideoThumbnailComponent { @Input() video: Video @Input() nsfw = false - @Input() routerLink: any[] + + @Input() videoRouterLink: any[] @Input() queryParams: { [ p: string ]: any } + @Input() videoHref: string + @Input() videoTarget: string @Input() displayWatchLaterPlaylist: boolean @Input() inWatchLaterPlaylist: boolean @@ -49,7 +52,7 @@ export class VideoThumbnailComponent { } getVideoRouterLink () { - if (this.routerLink) return this.routerLink + if (this.videoRouterLink) return this.videoRouterLink return [ '/videos/watch', this.video.uuid ] } diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html index e5d91e69a..a88b3bc9e 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html @@ -1,6 +1,6 @@
Unlisted @@ -15,10 +15,12 @@
- {{ video.name }} + + {{ video.name }} diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts index e1adbb6ad..f434550dd 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts @@ -29,6 +29,7 @@ export type MiniatureDisplayOptions = { blacklistInfo?: boolean nsfw?: boolean } +export type VideoLinkType = 'internal' | 'lazy-load' | 'external' @Component({ selector: 'my-video-miniature', @@ -55,7 +56,7 @@ export class VideoMiniatureComponent implements OnInit { @Input() displayVideoActions = true @Input() fitWidth = false - @Input() useLazyLoadUrl = false + @Input() videoLinkType: VideoLinkType = 'internal' @Output() videoBlocked = new EventEmitter() @Output() videoUnblocked = new EventEmitter() @@ -85,7 +86,9 @@ export class VideoMiniatureComponent implements OnInit { playlistElementId?: number } - videoLink: any[] = [] + videoRouterLink: any[] = [] + videoHref: string + videoTarget: string private ownerDisplayTypeChosen: 'account' | 'videoChannel' @@ -125,18 +128,20 @@ export class VideoMiniatureComponent implements OnInit { } buildVideoLink () { - if (this.useLazyLoadUrl && this.video.url) { - const remoteUriConfig = this.serverConfig.search.remoteUri - - // Redirect on the external instance if not allowed to fetch remote data - const externalRedirect = (!this.authService.isLoggedIn() && !remoteUriConfig.anonymous) || !remoteUriConfig.users - const fromPath = window.location.pathname + window.location.search - - this.videoLink = [ '/search/lazy-load-video', { url: this.video.url, externalRedirect, fromPath } ] + if (this.videoLinkType === 'internal' || !this.video.url) { + this.videoRouterLink = [ '/videos/watch', this.video.uuid ] return } - this.videoLink = [ '/videos/watch', this.video.uuid ] + if (this.videoLinkType === 'external') { + this.videoRouterLink = null + this.videoHref = this.video.url + this.videoTarget = '_blank' + return + } + + // Lazy load + this.videoRouterLink = [ '/search/lazy-load-video', { url: this.video.url } ] } displayOwnerAccount () { diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss index d3cbabf23..c33e11889 100644 --- a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss +++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss @@ -10,14 +10,13 @@ position: fixed; .action-button { - display: inline-block; + display: block; + margin-left: 55px; } .action-button-cancel-selection { @include peertube-button; @include grey-button; - - margin-right: 10px; } } } @@ -54,4 +53,8 @@ margin-top: 10px; } } + + .action-selection-mode { + display: none; // disable for small screens + } } diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html index e3f7ef017..473fdc102 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html +++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html @@ -8,7 +8,7 @@
diff --git a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts index 46c6bbaf2..f8116f4bc 100644 --- a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts +++ b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts @@ -43,20 +43,24 @@ class P2pMediaLoaderPlugin extends Plugin { // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080 if (!(videojs as any).Html5Hlsjs) { - const message = 'HLS.js does not seem to be supported.' - console.warn(message) + console.warn('HLS.js does not seem to be supported. Try to fallback to built in HLS.') - player.ready(() => player.trigger('error', new Error(message))) - return + if (!player.canPlayType('application/vnd.apple.mpegurl')) { + const message = 'Cannot fallback to built-in HLS' + console.warn(message) + + player.ready(() => player.trigger('error', new Error(message))) + return + } + } else { + // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080 + (videojs as any).Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => { + this.hlsjs = hlsjs + }) + + initVideoJsContribHlsJsPlayer(player) } - // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080 - (videojs as any).Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => { - this.hlsjs = hlsjs - }) - - initVideoJsContribHlsJsPlayer(player) - this.startTime = timeToInt(options.startTime) player.src({ @@ -64,11 +68,13 @@ class P2pMediaLoaderPlugin extends Plugin { src: options.src }) - player.one('play', () => { - player.addClass('vjs-has-big-play-button-clicked') - }) + player.ready(() => { + this.initializeCore() - player.ready(() => this.initialize()) + if ((videojs as any).Html5Hlsjs) { + this.initializePlugin() + } + }) } dispose () { @@ -82,7 +88,19 @@ class P2pMediaLoaderPlugin extends Plugin { return this.hlsjs } - private initialize () { + private initializeCore () { + this.player.one('play', () => { + this.player.addClass('vjs-has-big-play-button-clicked') + }) + + this.player.one('canplay', () => { + if (this.startTime) { + this.player.currentTime(this.startTime) + } + }) + } + + private initializePlugin () { initHlsJsPlayer(this.hlsjs) // FIXME: typings @@ -102,12 +120,6 @@ class P2pMediaLoaderPlugin extends Plugin { this.statsP2PBytes.numPeers = 1 + this.options.redundancyUrlManager.countBaseUrls() this.runStats() - - this.player.one('canplay', () => { - if (this.startTime) { - this.player.currentTime(this.startTime) - } - }) } private runStats () { diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index a9a950dc0..2388c0469 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss @@ -79,15 +79,6 @@ p-table { tr { &:hover { background-color: pvar(--submenuColor) !important; - - .action-cell { - .dropdown-root, - my-edit-button, - my-delete-button, - my-button { - display: inline-block !important; - } - } } td { @@ -164,18 +155,9 @@ p-table { my-edit-button, my-delete-button, my-button { - display: none !important; + display: inline-block !important; margin-left: 5px; - &.show { - display: inline-block !important; - } - - // keep displaying on touchscreen - @media not all and (hover: hover) and (pointer: fine) { - display: inline-block !important; - } - :first-child { margin-left: 0 } diff --git a/server/controllers/api/users/index.ts b/server/controllers/api/users/index.ts index fcd828ae3..5939f6125 100644 --- a/server/controllers/api/users/index.ts +++ b/server/controllers/api/users/index.ts @@ -340,7 +340,7 @@ async function askResetUserPassword (req: express.Request, res: express.Response const verificationString = await Redis.Instance.setResetPasswordVerificationString(user.id) const url = WEBSERVER.URL + '/reset-password?userId=' + user.id + '&verificationString=' + verificationString - await Emailer.Instance.addPasswordResetEmailJob(user.email, url) + await Emailer.Instance.addPasswordResetEmailJob(user.username, user.email, url) return res.status(204).end() } diff --git a/server/lib/emailer.ts b/server/lib/emailer.ts index d54eab966..48ba7421e 100644 --- a/server/lib/emailer.ts +++ b/server/lib/emailer.ts @@ -427,12 +427,13 @@ class Emailer { return JobQueue.Instance.createJob({ type: 'email', payload: emailPayload }) } - addPasswordResetEmailJob (to: string, resetPasswordUrl: string) { + addPasswordResetEmailJob (username: string, to: string, resetPasswordUrl: string) { const emailPayload: EmailPayload = { template: 'password-reset', to: [ to ], subject: 'Reset your account password', locals: { + username, resetPasswordUrl } } @@ -454,12 +455,13 @@ class Emailer { return JobQueue.Instance.createJob({ type: 'email', payload: emailPayload }) } - addVerifyEmailJob (to: string, verifyEmailUrl: string) { + addVerifyEmailJob (username: string, to: string, verifyEmailUrl: string) { const emailPayload: EmailPayload = { template: 'verify-email', to: [ to ], subject: `Verify your email on ${WEBSERVER.HOST}`, locals: { + username, verifyEmailUrl } } diff --git a/server/lib/emails/password-reset/html.pug b/server/lib/emails/password-reset/html.pug index bb6a9d16b..ac33db5d7 100644 --- a/server/lib/emails/password-reset/html.pug +++ b/server/lib/emails/password-reset/html.pug @@ -5,8 +5,8 @@ block title block content p. - A reset password procedure for your account ${to} has been requested on #[a(href=WEBSERVER.URL) #{WEBSERVER.HOST}]. - Please follow #[a(href=resetPasswordUrl) this link] to reset it: #[a(href=resetPasswordUrl) #{resetPasswordUrl}] + A reset password procedure for your account #{username} has been requested on #[a(href=WEBSERVER.URL) #{WEBSERVER.HOST}]. + Please follow #[a(href=resetPasswordUrl) this link] to reset it: #[a(href=resetPasswordUrl) #{resetPasswordUrl}] (the link will expire within 1 hour) p. - If you are not the person who initiated this request, please ignore this email. \ No newline at end of file + If you are not the person who initiated this request, please ignore this email. diff --git a/server/lib/user.ts b/server/lib/user.ts index 642549879..6e7a738ee 100644 --- a/server/lib/user.ts +++ b/server/lib/user.ts @@ -111,8 +111,9 @@ async function sendVerifyUserEmail (user: MUser, isPendingEmail = false) { if (isPendingEmail) url += '&isPendingEmail=true' const email = isPendingEmail ? user.pendingEmail : user.email + const username = user.username - await Emailer.Instance.addVerifyEmailJob(email, url) + await Emailer.Instance.addVerifyEmailJob(username, email, url) } // ---------------------------------------------------------------------------