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