From 69a019968e225f1eac4a3df3041f141d0047d7f0 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 20 Jul 2020 10:13:56 +0200 Subject: Fallback to built in HLS if possible --- .../p2p-media-loader/p2p-media-loader-plugin.ts | 54 +++++++++++++--------- 1 file changed, 33 insertions(+), 21 deletions(-) (limited to 'client/src') 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,19 +43,23 @@ 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) - // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080 - (videojs as any).Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => { - this.hlsjs = hlsjs - }) + 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) + initVideoJsContribHlsJsPlayer(player) + } this.startTime = timeToInt(options.startTime) @@ -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 () { -- cgit v1.2.3 From 0bdad52fbbad81e7654adc495088da56a00437df Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 20 Jul 2020 11:37:06 +0200 Subject: Fix issues with external links in search page --- .../src/app/+search/channel-lazy-load.resolver.ts | 8 ----- client/src/app/+search/search.component.html | 20 +++++++++--- client/src/app/+search/search.component.ts | 36 ++++++++++++++++------ client/src/app/+search/video-lazy-load.resolver.ts | 8 ----- .../video-thumbnail.component.html | 15 ++++++--- .../shared-thumbnail/video-thumbnail.component.ts | 7 +++-- .../video-miniature.component.html | 12 +++++--- .../video-miniature.component.ts | 25 +++++++++------ ...video-playlist-element-miniature.component.html | 2 +- 9 files changed, 81 insertions(+), 52 deletions(-) (limited to 'client/src') 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 + // Same algorithm than videos + if (this.getVideoLinkType() === 'external') { + return channel.url + } - return [ '/search/lazy-load-channel', { url: channel.url, externalRedirect, fromPath } ] + if (this.getVideoLinkType() === 'internal') { + return [ '/video-channels', channel.nameWithHost ] } - 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-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 + if (this.videoLinkType === 'internal' || !this.video.url) { + this.videoRouterLink = [ '/videos/watch', this.video.uuid ] + return + } - this.videoLink = [ '/search/lazy-load-video', { url: this.video.url, externalRedirect, fromPath } ] + if (this.videoLinkType === 'external') { + this.videoRouterLink = null + this.videoHref = this.video.url + this.videoTarget = '_blank' return } - this.videoLink = [ '/videos/watch', this.video.uuid ] + // Lazy load + this.videoRouterLink = [ '/search/lazy-load-video', { url: this.video.url } ] } displayOwnerAccount () { 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 @@
-- cgit v1.2.3 From b5366b3c7e1e2036624d6e7e2784ad8fc4700fac Mon Sep 17 00:00:00 2001 From: kimsible Date: Mon, 20 Jul 2020 14:52:14 +0200 Subject: Correct maximized icon padding since new icons set implemented --- client/src/app/shared/shared-forms/markdown-textarea.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/src') 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; } } } -- cgit v1.2.3 From cd801c69072327eddab0eb0e9a7c1f97cbd6601d Mon Sep 17 00:00:00 2001 From: kimsible Date: Mon, 20 Jul 2020 14:45:43 +0200 Subject: Correct action button selection mode styles --- .../shared-video-miniature/videos-selection.component.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'client/src') 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 + } } -- cgit v1.2.3 From 2821595787460810b85fe9f4808869581b2e5975 Mon Sep 17 00:00:00 2001 From: kimsible Date: Mon, 20 Jul 2020 14:40:37 +0200 Subject: Correct missing test in user-edit template --- client/src/app/+admin/users/user-edit/user-edit.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/src') 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 297e6104c..037040902 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 }} -- cgit v1.2.3 From 2170f1db6ee40531f9d08b711d8b7b00254c0031 Mon Sep 17 00:00:00 2001 From: kimsible Date: Mon, 20 Jul 2020 14:12:00 +0200 Subject: Fix accessibility action buttons and display on imports and followers list --- .../followers-list/followers-list.component.html | 4 ++-- .../my-account-video-imports.component.html | 2 +- .../shared/shared-main/buttons/button.component.html | 2 +- .../shared-main/buttons/delete-button.component.html | 2 +- client/src/sass/primeng-custom.scss | 20 +------------------- 5 files changed, 6 insertions(+), 24 deletions(-) (limited to 'client/src') 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/+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/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/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 } -- cgit v1.2.3