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