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">
  77       {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
  78     </div>
  79
  80     <div class="video-info-channel">
  81       {{ video.channel.name }}
  82       <!-- Here will be the subscribe button -->
  83     </div>
  84
  85     <div class="video-info-by">
  86       By {{ video.by }}
  87       <img [src]="getAvatarPath()" alt="Account avatar" />
  88     </div>
  89
  90     <div class="video-info-description">
  91       <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
  92
  93       <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description.length === 250" (click)="showMoreDescription()">
  94         Show more
  95         <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
  96         <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
  97       </div>
  98
  99       <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
 100         Show less
 101         <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
 102       </div>
 103     </div>
 104
 105     <div class="video-attributes">
 106       <div class="video-attribute">
 107         <span class="video-attribute-label">
 108           Privacy
 109         </span>
 110         <span class="video-attribute-value">
 111           {{ video.privacyLabel }}
 112         </span>
 113       </div>
 114
 115       <div class="video-attribute">
 116         <span class="video-attribute-label">
 117           Category
 118         </span>
 119         <span class="video-attribute-value">
 120           {{ video.categoryLabel }}
 121         </span>
 122       </div>
 123
 124       <div class="video-attribute">
 125         <span class="video-attribute-label">
 126           Licence
 127         </span>
 128         <span class="video-attribute-value">
 129           {{ video.licenceLabel }}
 130         </span>
 131       </div>
 132
 133       <div class="video-attribute">
 134         <span class="video-attribute-label">
 135           Language
 136         </span>
 137         <span class="video-attribute-value">
 138           {{ video.languageLabel }}
 139         </span>
 140       </div>
 141
 142       <div class="video-attribute">
 143         <span class="video-attribute-label">
 144           Tags
 145         </span>
 146
 147         <span class="video-attribute-value">
 148           {{ getVideoTags() }}
 149         </span>
 150       </div>
 151     </div>
 152
 153   </div>
 154
 155   <div class="other-videos">
 156     <div *ngFor="let video of otherVideos">
 157       <my-video-miniature [video]="video" [user]="user"></my-video-miniature>
 158     </div>
 159   </div>
 160 </div>
 161
 162 <ng-template [ngIf]="video !== null">
 163   <my-video-share #videoShareModal [video]="video"></my-video-share>
 164   <my-video-download #videoDownloadModal [video]="video"></my-video-download>
 165   <my-video-report #videoReportModal [video]="video"></my-video-report>
 166 </ng-template>