client/src/app/videos/+video-watch/video-watch.component.html

   1 <div class="row">
   2   <!-- We need the video container for videojs so we just hide it -->
   3   <div [hidden]="videoNotFound" id="video-container">
   4      <video id="video-element" class="video-js vjs-peertube-skin"></video>
   5   </div>
   6
   7   <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
   8
   9   <!-- Video information -->
  10   <div *ngIf="video" class="margin-content video-bottom">
  11     <div class="video-info">
  12       <div class="video-info-name-actions">
  13         <div class="video-info-name">{{ video.name }}</div>
  14
  15         <div class="video-info-actions">
  16           <div
  17               *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
  18               class="action-button action-button-like">
  19             <span class="icon icon-like" title="Like this video" ></span>
  20           </div>
  21
  22           <div
  23               *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
  24               class="action-button action-button-dislike">
  25             <span class="icon icon-dislike" title="Dislike this video"></span>
  26           </div>
  27
  28           <div (click)="showShareModal()" class="action-button">
  29             <span class="icon icon-share"></span>
  30             Share
  31           </div>
  32
  33           <div class="action-more" dropdown dropup="true" placement="right">
  34             <div class="action-button" dropdownToggle>
  35               <span class="icon icon-more"></span>
  36             </div>
  37
  38             <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
  39               <li role="menuitem">
  40                 <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
  41                   <span class="icon icon-download"></span> Download
  42                 </a>
  43               </li>
  44
  45               <li *ngIf="isUserLoggedIn()" role="menuitem">
  46                 <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
  47                   <span class="icon icon-alert"></span> Report
  48                 </a>
  49               </li>
  50
  51               <li *ngIf="isVideoBlacklistable()" role="menuitem">
  52                 <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)">
  53                   <span class="icon icon-blacklist"></span> Blacklist
  54                 </a>
  55               </li>
  56
  57               <li *ngIf="isVideoUpdatable()" role="menuitem">
  58                 <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]">
  59                   <span class="icon icon-edit"></span> Update
  60                 </a>
  61               </li>
  62
  63               <li *ngIf="isVideoRemovable()" role="menuitem">
  64                 <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)">
  65                   <span class="icon icon-blacklist"></span> Delete
  66                 </a>
  67               </li>
  68             </ul>
  69           </div>
  70         </div>
  71       </div>
  72
  73       <div class="video-info-date-views-bar">
  74         <div class="video-info-date-views">
  75           {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
  76         </div>
  77
  78         <div
  79           class="video-info-likes-dislikes-bar"
  80           *ngIf="video.likes !== 0 || video.dislikes !== 0"  [tooltip]="likesBarTooltipText">
  81           <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
  82         </div>
  83       </div>
  84
  85       <div class="video-info-channel">
  86         {{ video.channel.name }}
  87         <!-- Here will be the subscribe button -->
  88       </div>
  89
  90       <div class="video-info-by">
  91         By {{ video.by }}
  92         <img [src]="getAvatarPath()" alt="Account avatar" />
  93       </div>
  94
  95       <div class="video-info-description">
  96         <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
  97
  98         <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length === 250" (click)="showMoreDescription()">
  99           Show more
 100           <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
 101           <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
 102         </div>
 103
 104         <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
 105           Show less
 106           <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
 107         </div>
 108       </div>
 109
 110       <div class="video-attributes">
 111         <div class="video-attribute">
 112           <span class="video-attribute-label">
 113             Privacy
 114           </span>
 115           <span class="video-attribute-value">
 116             {{ video.privacyLabel }}
 117           </span>
 118         </div>
 119
 120         <div class="video-attribute">
 121           <span class="video-attribute-label">
 122             Category
 123           </span>
 124           <span class="video-attribute-value">
 125             {{ video.categoryLabel }}
 126           </span>
 127         </div>
 128
 129         <div class="video-attribute">
 130           <span class="video-attribute-label">
 131             Licence
 132           </span>
 133           <span class="video-attribute-value">
 134             {{ video.licenceLabel }}
 135           </span>
 136         </div>
 137
 138         <div class="video-attribute">
 139           <span class="video-attribute-label">
 140             Language
 141           </span>
 142           <span class="video-attribute-value">
 143             {{ video.languageLabel }}
 144           </span>
 145         </div>
 146
 147         <div class="video-attribute">
 148           <span class="video-attribute-label">
 149             Tags
 150           </span>
 151
 152           <span class="video-attribute-value">
 153             {{ getVideoTags() }}
 154           </span>
 155         </div>
 156       </div>
 157
 158       <my-video-comments [video]="video" [user]="user"></my-video-comments>
 159     </div>
 160
 161     <div class="other-videos">
 162       <div class="title-page title-page-single">
 163         Other videos
 164       </div>
 165
 166       <div *ngFor="let video of otherVideos">
 167         <my-video-miniature [video]="video" [user]="user"></my-video-miniature>
 168       </div>
 169     </div>
 170   </div>
 171 </div>
 172
 173 <ng-template [ngIf]="video !== null">
 174   <my-video-share #videoShareModal [video]="video"></my-video-share>
 175   <my-video-download #videoDownloadModal [video]="video"></my-video-download>
 176   <my-video-report #videoReportModal [video]="video"></my-video-report>
 177 </ng-template>