Fix video password access

client/src/app/+my-library/my-channel-space.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, inject } from '@angular/core'
 import { RouterOutlet } from '@angular/router'
 import { ServerService } from '@app/core'
+import { NewFeatureInfoService } from '@app/modal/new-feature-info.service'
 import { HorizontalMenuComponent, HorizontalMenuEntry } from '@app/shared/shared-main/menu/horizontal-menu.component'
 import { HTMLServerConfig } from '@peertube/peertube-models'
 
@@ -10,6 +11,7 @@ import { HTMLServerConfig } from '@peertube/peertube-models'
 })
 export class MyChannelSpaceComponent implements OnInit {
   private serverService = inject(ServerService)
+  private newFeatureInfoService = inject(NewFeatureInfoService)
 
   menuEntries: HorizontalMenuEntry[] = []
 
@@ -19,6 +21,8 @@ export class MyChannelSpaceComponent implements OnInit {
     this.serverConfig = this.serverService.getHTMLConfig()
 
     this.buildMenu()
+
+    this.newFeatureInfoService.showChannelCollaboration()
   }
 
   private buildMenu () {

client/src/app/+video-watch/video-watch.component.ts

@@ -404,6 +404,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         })
       },
       error: async err => {
+        console.log(err)
         if (err.body.code === ServerErrorCode.VIDEO_REQUIRES_PASSWORD || err.body.code === ServerErrorCode.INCORRECT_VIDEO_PASSWORD) {
           const { confirmed, password } = await this.handleVideoPasswordError(err)
 

client/src/app/modal/new-feature-info.service.ts

@@ -2,6 +2,7 @@ import { Injectable, inject } from '@angular/core'
 import { AuthService, Notifier, ServerService, UserService } from '@app/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { UserNewFeatureInfo } from '@peertube/peertube-models'
+import { first } from 'rxjs'
 import { NewFeatureInfoModalComponent } from './new-feature-info-modal.component'
 
 @Injectable({ providedIn: 'root' })
@@ -13,7 +14,7 @@ export class NewFeatureInfoService {
   private notifier = inject(Notifier)
 
   showChannelCollaboration () {
-    this.auth.userInformationLoaded.subscribe(() => {
+    this.auth.userInformationLoaded.pipe(first()).subscribe(() => {
       const config = this.serverService.getHTMLConfig()
       if (config.client.newFeaturesInfo !== true) return
 
@@ -25,16 +26,14 @@ export class NewFeatureInfoService {
       const modalRef = this.modalService.open(NewFeatureInfoModalComponent, { size: 'lg', centered: true })
       const component = modalRef.componentInstance as NewFeatureInfoModalComponent
 
-      component.title = $localize`Collaborations on channels are coming to ${instanceName}`
+      component.title = $localize`Collaboration on channels are coming to ${instanceName}`
       component.iconName = 'channel'
       component.html = $localize`You can now <strong>invite other users</strong> to collaborate on your channel`
 
       modalRef.result.finally(() => {
         this.userService.markNewFeatureInfoAsRead(UserNewFeatureInfo.CHANNEL_COLLABORATION)
           .subscribe({
-            next: () => {
-              // empty
-            },
+            next: () => this.auth.refreshUserInformation(),
 
             error: err => this.notifier.error(err.message)
           })

client/src/app/shared/shared-main/http/auth-interceptor.service.ts

@@ -3,7 +3,14 @@ import { Injectable, Injector, inject } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService } from '@app/core/auth/auth.service'
 import { getBackendUrl } from '@app/helpers'
-import { HttpStatusCode, OAuth2ErrorCode, PeerTubeProblemDocument, ServerErrorCode } from '@peertube/peertube-models'
+import {
+  HttpStatusCode,
+  OAuth2ErrorCode,
+  OAuth2ErrorCodeType,
+  PeerTubeProblemDocument,
+  ServerErrorCode,
+  ServerErrorCodeType
+} from '@peertube/peertube-models'
 import { isSameOrigin } from '@root-helpers/url'
 import { Observable, throwError as observableThrowError, of } from 'rxjs'
 import { catchError, switchMap } from 'rxjs/operators'
@@ -28,13 +35,18 @@ export class AuthInterceptor implements HttpInterceptor {
       .pipe(
         catchError((err: HttpErrorResponse) => {
           const error = err.error as PeerTubeProblemDocument
-          const isOTPMissingError = this.authService.isOTPMissingError(err)
 
-          if (error && error.code === ServerErrorCode.CURRENT_PASSWORD_IS_INVALID) {
+          const bypassCodes = new Set<ServerErrorCodeType | OAuth2ErrorCodeType>([
+            ServerErrorCode.VIDEO_REQUIRES_PASSWORD,
+            ServerErrorCode.INCORRECT_VIDEO_PASSWORD,
+            ServerErrorCode.CURRENT_PASSWORD_IS_INVALID
+          ])
+
+          if (error?.code && bypassCodes.has(error.code)) {
             return observableThrowError(() => err)
           }
 
-          if (!isOTPMissingError) {
+          if (!this.authService.isOTPMissingError(err)) {
             if (err.status === HttpStatusCode.UNAUTHORIZED_401 && error && error.code === OAuth2ErrorCode.INVALID_TOKEN) {
               return this.handleTokenExpired(req, next)
             }

client/src/app/shared/shared-video-miniature/videos-list.component.scss

@@ -62,8 +62,9 @@ my-date-group-label.date-displayed,
     @include margin-right(1rem);
   }
 
-  .date-title {
+  my-date-group-label.date-displayed {
     text-align: center;
+    display: block;
   }
 
   .videos-header {

client/src/sass/bootstrap.scss

@@ -188,6 +188,7 @@ body {
   .modal-header {
     border-bottom: 0;
     margin-bottom: 5px;
+    padding: 1.5rem $modal-inner-padding;
 
     .modal-title {
       font-size: 20px;