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