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 [poster]="getVideoPoster()" 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-first-row">
  13         <div>
  14           <div class="video-info-name">{{ video.name }}</div>
  15
  16           <div class="video-info-date-views">
  17             {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
  18           </div>
  19
  20           <div class="video-info-channel">
  21             {{ video.channel.displayName }}
  22             <!-- Here will be the subscribe button -->
  23           </div>
  24
  25           <div class="video-info-by">
  26             By {{ video.by }}
  27             <img [src]="getAvatarPath()" alt="Account avatar" />
  28           </div>
  29         </div>
  30
  31         <div class="video-actions-rates">
  32           <div class="video-actions">
  33             <div
  34                 *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
  35                 class="action-button action-button-like"
  36             >
  37               <span class="icon icon-like" title="Like this video" ></span>
  38             </div>
  39
  40             <div
  41                 *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
  42                 class="action-button action-button-dislike"
  43             >
  44               <span class="icon icon-dislike" title="Dislike this video"></span>
  45             </div>
  46
  47             <div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support">
  48               <span class="icon icon-support"></span>
  49               <span class="icon-text">Support</span>
  50             </div>
  51
  52             <div (click)="showShareModal()" class="action-button action-button-share">
  53               <span class="icon icon-share"></span>
  54               <span class="icon-text">Share</span>
  55             </div>
  56
  57             <div class="action-more" dropdown dropup="true" placement="right">
  58               <div class="action-button" dropdownToggle>
  59                 <span class="icon icon-more"></span>
  60               </div>
  61
  62               <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
  63                 <li role="menuitem">
  64                   <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
  65                     <span class="icon icon-download"></span> Download
  66                   </a>
  67                 </li>
  68
  69                 <li *ngIf="isUserLoggedIn()" role="menuitem">
  70                   <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
  71                     <span class="icon icon-alert"></span> Report
  72                   </a>
  73                 </li>
  74
  75                 <li *ngIf="isVideoBlacklistable()" role="menuitem">
  76                   <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)">
  77                     <span class="icon icon-blacklist"></span> Blacklist
  78                   </a>
  79                 </li>
  80
  81                 <li *ngIf="isVideoUpdatable()" role="menuitem">
  82                   <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]">
  83                     <span class="icon icon-edit"></span> Update
  84                   </a>
  85                 </li>
  86
  87                 <li *ngIf="isVideoRemovable()" role="menuitem">
  88                   <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)">
  89                     <span class="icon icon-blacklist"></span> Delete
  90                   </a>
  91                 </li>
  92               </ul>
  93             </div>
  94           </div>
  95
  96           <div
  97               class="video-info-likes-dislikes-bar"
  98               *ngIf="video.likes !== 0 || video.dislikes !== 0"  [tooltip]="likesBarTooltipText">
  99             <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
 100           </div>
 101         </div>
 102       </div>
 103
 104       <div class="video-info-description">
 105         <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
 106
 107         <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
 108           Show more
 109           <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
 110           <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
 111         </div>
 112
 113         <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
 114           Show less
 115           <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
 116         </div>
 117       </div>
 118
 119       <div class="video-attributes">
 120         <div class="video-attribute">
 121           <span class="video-attribute-label">
 122             Privacy
 123           </span>
 124           <span class="video-attribute-value">
 125             {{ video.privacy.label }}
 126           </span>
 127         </div>
 128
 129         <div class="video-attribute">
 130           <span class="video-attribute-label">
 131             Category
 132           </span>
 133           <span class="video-attribute-value">
 134             {{ video.category.label }}
 135           </span>
 136         </div>
 137
 138         <div class="video-attribute">
 139           <span class="video-attribute-label">
 140             Licence
 141           </span>
 142           <span class="video-attribute-value">
 143             {{ video.licence.label }}
 144           </span>
 145         </div>
 146
 147         <div class="video-attribute">
 148           <span class="video-attribute-label">
 149             Language
 150           </span>
 151           <span class="video-attribute-value">
 152             {{ video.language.label }}
 153           </span>
 154         </div>
 155
 156         <div class="video-attribute">
 157           <span class="video-attribute-label">
 158             Tags
 159           </span>
 160
 161           <span class="video-attribute-value">
 162             {{ getVideoTags() }}
 163           </span>
 164         </div>
 165       </div>
 166
 167       <my-video-comments [video]="video" [user]="user"></my-video-comments>
 168     </div>
 169
 170     <div class="other-videos">
 171       <div class="title-page title-page-single">
 172         Other videos
 173       </div>
 174
 175       <div *ngFor="let video of otherVideosDisplayed">
 176         <my-video-miniature [video]="video" [user]="user"></my-video-miniature>
 177       </div>
 178     </div>
 179   </div>
 180
 181
 182   <div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
 183     <strong>Friendly Reminder:</strong>
 184     <div class="privacy-concerns-text">
 185       The sharing system used by this video implies that some technical information about your system (such as a public IP address) can be accessed publicly.
 186       <a title="Get more information" target="_blank" href="/about#p2p-privacy">More information</a>
 187     </div>
 188
 189     <div class="privacy-concerns-okay" (click)="acceptedPrivacyConcern()">
 190       OK
 191     </div>
 192   </div>
 193 </div>
 194
 195 <ng-template [ngIf]="video !== null">
 196   <my-video-support #videoSupportModal [video]="video"></my-video-support>
 197   <my-video-share #videoShareModal [video]="video"></my-video-share>
 198   <my-video-download #videoDownloadModal [video]="video"></my-video-download>
 199   <my-video-report #videoReportModal [video]="video"></my-video-report>
 200 </ng-template>