client/src/app/videos/+video-watch/video-watch.component.html

   1 <div *ngIf="error" class="row">
   2   <div class="alert alert-danger">
   3     The video load seems to be abnormally long.
   4     <ul>
   5       <li>Maybe the server {{ video.serverHost }} is down :(</li>
   6       <li>
   7         If not, you can report an issue on
   8         <a href="https://github.com/Chocobozzz/PeerTube/issues" title="Report an issue">
   9           https://github.com/Chocobozzz/PeerTube/issues
  10         </a>
  11       </li>
  12     </ul>
  13   </div>
  14 </div>
  15
  16 <div class="row">
  17   <!-- We need the video container for videojs so we just hide it -->
  18   <div [hidden]="videoNotFound" id="video-container">
  19      <video id="video-element" class="video-js vjs-peertube-skin"></video>
  20   </div>
  21
  22   <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
  23 </div>
  24
  25 <!-- Video information -->
  26 <div *ngIf="video !== null" id="video-info">
  27   <div class="row video-name-views">
  28     <div class="col-xs-8 col-md-8 video-name">
  29       {{ video.name }}
  30     </div>
  31
  32     <div class="col-xs-4 col-md-4 pull-right video-views">
  33       {{ video.views}} views
  34     </div>
  35   </div>
  36
  37   <div class="row video-small-blocks">
  38     <div class="col-xs-5 col-xs-3 col-md-3 video-small-block video-small-block-account">
  39       <a class="option" title="Access to all videos of this user" [routerLink]="['/videos/list', { field: 'account', search: video.account }]">
  40         <span class="glyphicon glyphicon-user"></span>
  41         <span class="video-small-block-text">{{ video.by }}</span>
  42       </a>
  43     </div>
  44
  45     <div class="col-xs-2 col-md-3 video-small-block video-small-block-share">
  46       <a class="option" (click)="showShareModal()" title="Share the video">
  47         <span class="glyphicon glyphicon-share"></span>
  48         <span class="hidden-xs video-small-block-text">Share</span>
  49       </a>
  50     </div>
  51
  52     <div class="col-xs-2 col-md-3 video-small-block video-small-block-more">
  53       <div class="video-small-block-dropdown" dropdown dropup="true" placement="right">
  54         <a class="option" title="Access to more options" dropdownToggle>
  55           <span class="glyphicon glyphicon-option-horizontal"></span>
  56           <span class="hidden-xs video-small-block-text">More</span>
  57         </a>
  58
  59         <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
  60           <li *ngIf="canUserUpdateVideo()" role="menuitem">
  61             <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]">
  62               <span class="glyphicon glyphicon-pencil"></span> Update
  63             </a>
  64           </li>
  65
  66           <li role="menuitem">
  67             <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
  68               <span class="glyphicon glyphicon-download-alt"></span> Download
  69             </a>
  70           </li>
  71
  72           <li *ngIf="isUserLoggedIn()" role="menuitem">
  73             <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
  74               <span class="glyphicon glyphicon-alert"></span> Report
  75             </a>
  76           </li>
  77
  78           <li *ngIf="isVideoRemovable()" role="menuitem">
  79             <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)">
  80               <span class="glyphicon glyphicon-remove"></span> Delete
  81             </a>
  82           </li>
  83
  84           <li *ngIf="isVideoBlacklistable()" role="menuitem">
  85             <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)">
  86               <span class="glyphicon glyphicon-eye-close"></span> Blacklist
  87             </a>
  88           </li>
  89         </ul>
  90       </div>
  91     </div>
  92
  93     <div class="col-xs-3 col-md-3 video-small-block video-small-block-rating">
  94       <div class="video-small-block-like">
  95         <span
  96           class="glyphicon glyphicon-thumbs-up" title="Like this video"
  97           [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'like' }" (click)="setLike()"
  98         ></span>
  99
 100         <span class="video-small-block-text">
 101           {{ video.likes }}
 102         </span>
 103       </div>
 104
 105       <div class="video-small-block-dislike">
 106         <span
 107           class="glyphicon glyphicon-thumbs-down" title="Dislike this video"
 108           [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'dislike' }" (click)="setDislike()"
 109         ></span>
 110
 111         <span class="video-small-block-text">
 112           {{ video.dislikes }}
 113         </span>
 114       </div>
 115     </div>
 116   </div>
 117
 118   <div class="row video-details">
 119     <div class="video-details-date-description col-xs-8 col-md-9">
 120       <div class="video-details-date">
 121         Published on {{ video.createdAt | date:'short' }}
 122       </div>
 123
 124       <div class="video-details-description" [innerHTML]="videoHTMLDescription"></div>
 125
 126       <div class="video-details-description-more" *ngIf="completeDescriptionShown === false && video.description.length === 250" (click)="showMoreDescription()">
 127         Show more
 128         <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
 129         <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
 130       </div>
 131
 132       <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-details-description-more">
 133         Show less
 134         <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
 135       </div>
 136     </div>
 137
 138     <div class="video-details-attributes col-xs-4 col-md-3">
 139       <div class="video-details-attribute">
 140         <span class="video-details-attribute-label">
 141           Privacy:
 142         </span>
 143         <span class="video-details-attribute-value">
 144           {{ video.privacyLabel }}
 145         </span>
 146       </div>
 147
 148       <div class="video-details-attribute">
 149         <span class="video-details-attribute-label">
 150           Category:
 151         </span>
 152         <span class="video-details-attribute-value">
 153           {{ video.categoryLabel }}
 154         </span>
 155       </div>
 156
 157       <div class="video-details-attribute">
 158         <span class="video-details-attribute-label">
 159           Licence:
 160         </span>
 161         <span class="video-details-attribute-value">
 162           {{ video.licenceLabel }}
 163         </span>
 164       </div>
 165
 166       <div class="video-details-attribute">
 167         <span class="video-details-attribute-label">
 168           Language:
 169         </span>
 170         <span class="video-details-attribute-value">
 171           {{ video.languageLabel }}
 172         </span>
 173       </div>
 174
 175       <div class="video-details-attribute">
 176         <span class="video-details-attribute-label">
 177           Tags:
 178         </span>
 179
 180         <div class="video-details-tags">
 181           <a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">
 182             {{ tag }}
 183           </a>
 184         </div>
 185       </div>
 186
 187     </div>
 188   </div>
 189 </div>
 190
 191 <ng-template [ngIf]="video !== null">
 192   <my-video-share #videoShareModal [video]="video"></my-video-share>
 193   <my-video-download #videoDownloadModal [video]="video"></my-video-download>
 194   <my-video-report #videoReportModal [video]="video"></my-video-report>
 195 </ng-template>