Add icon to owners/moderators only options

client/src/app/shared/shared-icons/global-icon.component.ts

@@ -77,7 +77,8 @@ const icons = {
   'message-circle': require('!!raw-loader?!../../../assets/images/feather/message-circle.svg').default,
   'codesandbox': require('!!raw-loader?!../../../assets/images/feather/codesandbox.svg').default,
   'award': require('!!raw-loader?!../../../assets/images/feather/award.svg').default,
-  'stats': require('!!raw-loader?!../../../assets/images/feather/stats.svg').default
+  'stats': require('!!raw-loader?!../../../assets/images/feather/stats.svg').default,
+  'shield': require('!!raw-loader?!../../../assets/images/misc/shield.svg').default
 }
 
 export type GlobalIconName = keyof typeof icons

client/src/app/shared/shared-main/buttons/action-dropdown.component.html

@@ -19,7 +19,16 @@
             <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName" aria-hidden="true"></my-global-icon>
 
             <div class="item-label">
-              <span i18n>{{ action.label }}</span>
+              <span>
+                {{ action.label }}
+
+                <my-global-icon
+                  *ngIf="action.ownerOrModeratorPrivilege && action.ownerOrModeratorPrivilege()" iconName="shield"
+                  class="owner-moderator-privilege"
+                  [ngbTooltip]="action.ownerOrModeratorPrivilege()"
+                ></my-global-icon>
+              </span>
+
               <small class="muted" *ngIf="action.description">{{ action.description }}</small>
             </div>
           </ng-template>

client/src/app/shared/shared-main/buttons/action-dropdown.component.scss

@@ -82,3 +82,11 @@
     @include ellipsis;
   }
 }
+
+.owner-moderator-privilege {
+  margin: 0 !important;
+
+  @include margin-left(1rem !important);
+
+  width: 13px !important;
+}

client/src/app/shared/shared-main/buttons/action-dropdown.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { Params, RouterLink } from '@angular/router'
 import { GlobalIconName } from '@app/shared/shared-icons/global-icon.component'
 import { GlobalIconComponent } from '../../shared-icons/global-icon.component'
-import { NgbDropdown, NgbDropdownToggle, NgbDropdownMenu } from '@ng-bootstrap/ng-bootstrap'
+import { NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
 import { NgIf, NgClass, NgFor, NgTemplateOutlet } from '@angular/common'
 
 export type DropdownAction<T> = {
@@ -19,6 +19,8 @@ export type DropdownAction<T> = {
 
   class?: string[]
   isHeader?: boolean
+
+  ownerOrModeratorPrivilege?: () => string
 }
 
 export type DropdownButtonSize = 'normal' | 'small'
@@ -31,7 +33,18 @@ export type DropdownDirection = 'horizontal' | 'vertical'
   templateUrl: './action-dropdown.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [ NgIf, NgbDropdown, NgbDropdownToggle, NgClass, GlobalIconComponent, NgbDropdownMenu, NgFor, RouterLink, NgTemplateOutlet ]
+  imports: [
+    NgIf,
+    NgbTooltip,
+    NgbDropdown,
+    NgbDropdownToggle,
+    NgClass,
+    GlobalIconComponent,
+    NgbDropdownMenu,
+    NgFor,
+    RouterLink,
+    NgTemplateOutlet
+  ]
 })
 
 export class ActionDropdownComponent<T> {

client/src/app/shared/shared-main/video/video.model.ts

@@ -236,8 +236,18 @@ export class Video implements VideoServerModel {
       this.isUpdatableBy(user)
   }
 
+  // ---------------------------------------------------------------------------
+
+  isOwner (user: AuthUser) {
+    return user && this.isLocal === true && this.account.name === user.username
+  }
+
+  hasSeeAllVideosRight (user: AuthUser) {
+    return user && user.hasRight(UserRight.SEE_ALL_VIDEOS)
+  }
+
   isOwnerOrHasSeeAllVideosRight (user: AuthUser) {
-    return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.SEE_ALL_VIDEOS))
+    return this.isOwner(user) || this.hasSeeAllVideosRight(user)
   }
 
   canRemoveOneFile (user: AuthUser) {

client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts

@@ -205,9 +205,7 @@ export class VideoActionsDropdownComponent implements OnChanges {
     return this.video.isLiveInfoAvailableBy(this.user)
   }
 
-  isVideoDownloadable () {
-    if (this.video.isOwnerOrHasSeeAllVideosRight(this.user)) return true
-
+  isVideoDownloadableByAnonymous () {
     return (
       this.video &&
       this.video.isLive !== true &&
@@ -373,8 +371,17 @@ export class VideoActionsDropdownComponent implements OnChanges {
         {
           label: $localize`Download`,
           handler: () => this.showDownloadModal(),
-          isDisplayed: () => this.displayOptions.download && this.isVideoDownloadable(),
-          iconName: 'download'
+          isDisplayed: () => {
+            if (!this.displayOptions.download) return false
+
+            return this.isVideoDownloadableByAnonymous() || this.video.isOwnerOrHasSeeAllVideosRight(this.user)
+          },
+          iconName: 'download',
+          ownerOrModeratorPrivilege: () => {
+            if (this.isVideoDownloadableByAnonymous()) return undefined
+
+            return $localize`This option is visible only to you`
+          }
         },
         {
           label: $localize`Display live information`,

client/src/assets/images/misc/shield.svg

@@ -0,0 +1,6 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="currentColor"
+  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+>
+  <path d="M466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zM256.1 446.3l-.1-381 175.9 73.3c-3.3 151.4-82.1 261.1-175.8 307.7z"></path>
+</svg>