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