diff --git a/client/src/app/+videos/+video-watch/shared/index.ts b/client/src/app/+videos/+video-watch/shared/index.ts
index a6c2d75ad..6c5ff7e9b 100644
--- a/client/src/app/+videos/+video-watch/shared/index.ts
+++ b/client/src/app/+videos/+video-watch/shared/index.ts
@@ -1,4 +1,5 @@
export * from './comment'
+export * from './information'
export * from './metadata'
export * from './playlist'
export * from './recommendations'
diff --git a/client/src/app/+videos/+video-watch/shared/information/index.ts b/client/src/app/+videos/+video-watch/shared/information/index.ts
new file mode 100644
index 000000000..4c9920765
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/information/index.ts
@@ -0,0 +1 @@
+export * from './privacy-concerns.component'
diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
new file mode 100644
index 000000000..efad5a2b8
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
@@ -0,0 +1,15 @@
+
+
+
+ Friendly Reminder:
+
+ the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
+
+
+
More information
+
+
+
+ OK
+
+
diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss
new file mode 100644
index 000000000..b42be318f
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss
@@ -0,0 +1,80 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.privacy-concerns {
+ position: fixed;
+ bottom: 0;
+
+ width: calc(100% - #{$menu-width});
+ z-index: z(privacymsg);
+
+ padding: 5px 15px;
+
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ justify-content: space-between;
+ background-color: rgba(0, 0, 0, 0.9);
+ color: #fff;
+}
+
+// If the view is expanded
+:host-context(.expanded) {
+ .privacy-concerns {
+ width: 100%;
+ }
+}
+
+// Or if we are in the small view
+@media screen and (max-width: $small-view) {
+ .privacy-concerns {
+ width: 100%;
+ }
+}
+
+.privacy-concerns-text {
+ margin: 0 5px;
+}
+
+a {
+ @include disable-default-a-behaviour;
+
+ color: pvar(--mainColor);
+ transition: color 0.3s;
+
+ &:hover {
+ color: #fff;
+ }
+}
+
+.privacy-concerns-button {
+ @include margin-left(auto);
+
+ padding: 5px 8px 5px 7px;
+ border-radius: 3px;
+ white-space: nowrap;
+ cursor: pointer;
+ transition: background-color 0.3s;
+ font-weight: $font-semibold;
+
+ &:hover {
+ background-color: #000;
+ }
+}
+
+.privacy-concerns-okay {
+ @include margin-left(10px);
+
+ background-color: pvar(--mainColor);
+}
+
+@media screen and (max-width: 1300px) {
+ .privacy-concerns {
+ font-size: 12px;
+ padding: 2px 5px;
+ }
+
+ .privacy-concerns-text {
+ margin: 0;
+ }
+}
diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.ts b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.ts
new file mode 100644
index 000000000..ef5c8ed87
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.ts
@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core'
+import { ServerService } from '@app/core'
+import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
+import { HTMLServerConfig } from '@shared/models'
+import { getStoredP2PEnabled } from '../../../../../assets/player/peertube-player-local-storage'
+import { isWebRTCDisabled } from '../../../../../assets/player/utils'
+
+@Component({
+ selector: 'my-privacy-concerns',
+ templateUrl: './privacy-concerns.component.html',
+ styleUrls: [ './privacy-concerns.component.scss' ]
+})
+export class PrivacyConcernsComponent implements OnInit {
+ private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
+
+ hasAlreadyAcceptedPrivacyConcern = false
+
+ private serverConfig: HTMLServerConfig
+
+ constructor (
+ private serverService: ServerService
+ ) { }
+
+ async ngOnInit () {
+ this.serverConfig = this.serverService.getHTMLConfig()
+ if (
+ isWebRTCDisabled() ||
+ this.serverConfig.tracker.enabled === false ||
+ getStoredP2PEnabled() === false ||
+ peertubeLocalStorage.getItem(PrivacyConcernsComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
+ ) {
+ this.hasAlreadyAcceptedPrivacyConcern = true
+ }
+ }
+
+ declinedPrivacyConcern () {
+ peertubeLocalStorage.setItem(PrivacyConcernsComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'false')
+ this.hasAlreadyAcceptedPrivacyConcern = false
+ }
+
+ acceptedPrivacyConcern () {
+ peertubeLocalStorage.setItem(PrivacyConcernsComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true')
+ this.hasAlreadyAcceptedPrivacyConcern = true
+ }
+}
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts
index 2ea3b206f..b554567d9 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts
@@ -2,7 +2,6 @@ import { Component, EventEmitter, Inject, Input, LOCALE_ID, OnChanges, Output }
import { MarkdownService, Notifier } from '@app/core'
import { VideoDetails, VideoService } from '@app/shared/shared-main'
-
@Component({
selector: 'my-video-description',
templateUrl: './video-description.component.html',
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 40efa7b35..2380d5a98 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -261,21 +261,7 @@
>
-
-
-
- Friendly Reminder:
-
- the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
-
-
-
More information
-
-
-
- OK
-
-
+
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 f25f3bf31..e075fc57e 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -364,94 +364,12 @@ my-video-comments {
margin-bottom: 20px;
}
-// If the view is not expanded, take into account the menu
-.privacy-concerns {
- z-index: z(dropdown) + 1;
- width: calc(100% - #{$menu-width});
-}
-
-@media screen and (max-width: $small-view) {
- .privacy-concerns {
- @include margin-left($menu-width - 15px); // Menu is absolute
- }
-}
-
-:host-context(.expanded) {
- .privacy-concerns {
- @include margin-left(-15px);
-
- width: 100%;
- }
-}
-
-.privacy-concerns {
- position: fixed;
- bottom: 0;
- z-index: z(privacymsg);
-
- padding: 5px 15px;
-
- display: flex;
- flex-wrap: nowrap;
- align-items: center;
- justify-content: space-between;
- background-color: rgba(0, 0, 0, 0.9);
- color: #fff;
-
- .privacy-concerns-text {
- margin: 0 5px;
- }
-
- a {
- @include disable-default-a-behaviour;
-
- color: pvar(--mainColor);
- transition: color 0.3s;
-
- &:hover {
- color: #fff;
- }
- }
-
- .privacy-concerns-button {
- @include margin-left(auto);
-
- padding: 5px 8px 5px 7px;
- border-radius: 3px;
- white-space: nowrap;
- cursor: pointer;
- transition: background-color 0.3s;
- font-weight: $font-semibold;
-
- &:hover {
- background-color: #000;
- }
- }
-
- .privacy-concerns-okay {
- @include margin-left(10px);
-
- background-color: pvar(--mainColor);
- }
-}
-
@media screen and (max-width: 1600px) {
.video-bottom .video-info .video-attributes .video-attribute {
margin-bottom: 5px;
}
}
-@media screen and (max-width: 1300px) {
- .privacy-concerns {
- font-size: 12px;
- padding: 2px 5px;
-
- .privacy-concerns-text {
- margin: 0;
- }
- }
-}
-
// Use the same breakpoint than in the typescript component to display the other video miniatures as row
@media screen and (max-width: 1100px) {
#video-wrapper {
@@ -489,10 +407,6 @@ my-video-comments {
}
}
}
-
- .privacy-concerns {
- width: 100%;
- }
}
@media screen and (max-width: 450px) {
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 9bc82d667..5a0109e64 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -26,7 +26,6 @@ import { SupportModalComponent } from '@app/shared/shared-support-modal'
import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature'
import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
-import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
import {
HTMLServerConfig,
@@ -37,12 +36,7 @@ import {
VideoPrivacy,
VideoState
} from '@shared/models'
-import {
- cleanupVideoWatch,
- getStoredP2PEnabled,
- getStoredTheater,
- getStoredVideoWatchHistory
-} from '../../../assets/player/peertube-player-local-storage'
+import { cleanupVideoWatch, getStoredTheater, getStoredVideoWatchHistory } from '../../../assets/player/peertube-player-local-storage'
import {
CustomizationOptions,
P2PMediaLoaderOptions,
@@ -51,7 +45,7 @@ import {
PlayerMode,
videojs
} from '../../../assets/player/peertube-player-manager'
-import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils'
+import { timeToInt } from '../../../assets/player/utils'
import { environment } from '../../../environments/environment'
import { VideoWatchPlaylistComponent } from './shared'
@@ -63,8 +57,6 @@ type URLOptions = CustomizationOptions & { playerMode: PlayerMode }
styleUrls: [ './video-watch.component.scss' ]
})
export class VideoWatchComponent implements OnInit, OnDestroy {
- private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
-
@ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
@ViewChild('videoShareModal') videoShareModal: VideoShareComponent
@ViewChild('supportModal') supportModal: SupportModalComponent
@@ -84,15 +76,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
playlistPosition: number
playlist: VideoPlaylist = null
- descriptionLoading = false
- completeDescriptionShown = false
- completeVideoDescription: string
- shortVideoDescription: string
- videoHTMLDescription = ''
-
likesBarTooltipText = ''
- hasAlreadyAcceptedPrivacyConcern = false
remoteServerDown = false
tooltipSupport = ''
@@ -159,6 +144,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
}
async ngOnInit () {
+ this.serverConfig = this.serverService.getHTMLConfig()
+
// Hide the tooltips for unlogged users in mobile view, this adds confusion with the popover
if (this.user || !this.screenService.isInMobileView()) {
this.tooltipSupport = $localize`Support options for this video`
@@ -167,16 +154,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
PeertubePlayerManager.initState()
- this.serverConfig = this.serverService.getHTMLConfig()
- if (
- isWebRTCDisabled() ||
- this.serverConfig.tracker.enabled === false ||
- getStoredP2PEnabled() === false ||
- peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
- ) {
- this.hasAlreadyAcceptedPrivacyConcern = true
- }
-
this.paramsSub = this.route.params.subscribe(routeParams => {
const videoId = routeParams[ 'videoId' ]
if (videoId) this.loadVideo(videoId)
@@ -272,16 +249,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
this.redirectService.redirectToHomepage()
}
- declinedPrivacyConcern () {
- peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'false')
- this.hasAlreadyAcceptedPrivacyConcern = false
- }
-
- acceptedPrivacyConcern () {
- peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true')
- this.hasAlreadyAcceptedPrivacyConcern = true
- }
-
isVideoToTranscode () {
return this.video && this.video.state.id === VideoState.TO_TRANSCODE
}
@@ -486,9 +453,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
// Re init attributes
this.playerPlaceholderImgSrc = undefined
- this.descriptionLoading = false
- this.completeDescriptionShown = false
- this.completeVideoDescription = undefined
this.remoteServerDown = false
this.currentTime = undefined
diff --git a/client/src/app/+videos/+video-watch/video-watch.module.ts b/client/src/app/+videos/+video-watch/video-watch.module.ts
index f4484f1fe..c1f40d785 100644
--- a/client/src/app/+videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.module.ts
@@ -18,7 +18,8 @@ import {
VideoAvatarChannelComponent,
VideoDescriptionComponent,
VideoRateComponent,
- VideoWatchPlaylistComponent
+ VideoWatchPlaylistComponent,
+ PrivacyConcernsComponent
} from './shared'
import { VideoCommentAddComponent } from './shared/comment/video-comment-add.component'
import { VideoCommentComponent } from './shared/comment/video-comment.component'
@@ -51,6 +52,7 @@ import { VideoWatchComponent } from './video-watch.component'
VideoWatchPlaylistComponent,
VideoRateComponent,
VideoDescriptionComponent,
+ PrivacyConcernsComponent,
VideoCommentsComponent,
VideoCommentAddComponent,