2016-11-04 15:04:50 +00:00
|
|
|
<div *ngIf="error" class="row">
|
|
|
|
<div class="alert alert-danger">
|
|
|
|
The video load seems to be abnormally long.
|
|
|
|
<ul>
|
2017-11-15 10:00:25 +00:00
|
|
|
<li>Maybe the server {{ video.serverHost }} is down :(</li>
|
2016-11-04 15:04:50 +00:00
|
|
|
<li>
|
|
|
|
If not, you can report an issue on
|
|
|
|
<a href="https://github.com/Chocobozzz/PeerTube/issues" title="Report an issue">
|
|
|
|
https://github.com/Chocobozzz/PeerTube/issues
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
2016-06-05 10:20:25 +00:00
|
|
|
</div>
|
|
|
|
|
2016-11-04 15:04:50 +00:00
|
|
|
<div class="row">
|
2017-04-21 16:26:09 +00:00
|
|
|
<!-- We need the video container for videojs so we just hide it -->
|
|
|
|
<div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9">
|
2017-07-06 14:26:18 +00:00
|
|
|
<video id="video-container" class="video-js vjs-sublime-skin"></video>
|
2016-11-04 15:04:50 +00:00
|
|
|
</div>
|
2017-04-21 16:26:09 +00:00
|
|
|
|
|
|
|
<div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
|
2016-03-14 12:50:19 +00:00
|
|
|
</div>
|
2016-04-29 12:18:14 +00:00
|
|
|
|
2017-10-31 10:52:52 +00:00
|
|
|
<!-- P2P information -->
|
2016-11-04 15:04:50 +00:00
|
|
|
<div id="torrent-info" class="row">
|
2016-07-19 14:45:07 +00:00
|
|
|
<div id="torrent-info-download" class="col-md-4 col-sm-4 col-xs-4">Download: {{ downloadSpeed | bytes }}/s</div>
|
|
|
|
<div id="torrent-info-upload" class="col-md-4 col-sm-4 col-xs-4">Upload: {{ uploadSpeed | bytes }}/s</div>
|
|
|
|
<div id="torrent-info-peers" class="col-md-4 col-sm-4 col-xs-4">Number of peers: {{ numPeers }}</div>
|
2016-11-04 15:04:50 +00:00
|
|
|
</div>
|
|
|
|
|
2017-10-27 06:51:40 +00:00
|
|
|
<!-- Video information -->
|
2016-11-04 15:04:50 +00:00
|
|
|
<div *ngIf="video !== null" id="video-info">
|
2017-04-21 14:40:45 +00:00
|
|
|
<div class="row video-name-views">
|
2017-05-01 16:05:28 +00:00
|
|
|
<div class="col-xs-8 col-md-8 video-name">
|
2017-04-21 14:40:45 +00:00
|
|
|
{{ video.name }}
|
|
|
|
</div>
|
2016-11-04 15:04:50 +00:00
|
|
|
|
2017-05-01 16:05:28 +00:00
|
|
|
<div class="col-xs-4 col-md-4 pull-right video-views">
|
2017-04-21 14:40:45 +00:00
|
|
|
{{ video.views}} views
|
2016-11-04 15:04:50 +00:00
|
|
|
</div>
|
2017-04-21 14:40:45 +00:00
|
|
|
</div>
|
2016-11-04 15:04:50 +00:00
|
|
|
|
2017-04-21 14:40:45 +00:00
|
|
|
<div class="row video-small-blocks">
|
2017-11-14 08:31:41 +00:00
|
|
|
<div class="col-xs-5 col-xs-3 col-md-3 video-small-block video-small-block-account">
|
|
|
|
<a class="option" title="Access to all videos of this user" [routerLink]="['/videos/list', { field: 'account', search: video.account }]">
|
2017-07-06 15:18:10 +00:00
|
|
|
<span class="glyphicon glyphicon-user"></span>
|
|
|
|
<span class="video-small-block-text">{{ video.by }}</span>
|
2017-04-21 14:40:45 +00:00
|
|
|
</a>
|
|
|
|
</div>
|
2017-03-08 20:35:43 +00:00
|
|
|
|
2017-05-01 16:05:28 +00:00
|
|
|
<div class="col-xs-2 col-md-3 video-small-block video-small-block-share">
|
2017-04-21 14:40:45 +00:00
|
|
|
<a class="option" (click)="showShareModal()" title="Share the video">
|
|
|
|
<span class="glyphicon glyphicon-share"></span>
|
2017-11-06 10:46:11 +00:00
|
|
|
<span class="hidden-xs video-small-block-text">Share</span>
|
2017-04-21 14:40:45 +00:00
|
|
|
</a>
|
|
|
|
</div>
|
2016-11-08 20:11:57 +00:00
|
|
|
|
2017-05-01 16:05:28 +00:00
|
|
|
<div class="col-xs-2 col-md-3 video-small-block video-small-block-more">
|
2017-04-21 14:40:45 +00:00
|
|
|
<div class="video-small-block-dropdown" dropdown dropup="true" placement="right">
|
|
|
|
<a class="option" title="Access to more options" dropdownToggle>
|
|
|
|
<span class="glyphicon glyphicon-option-horizontal"></span>
|
2017-11-06 10:46:11 +00:00
|
|
|
<span class="hidden-xs video-small-block-text">More</span>
|
2017-04-21 14:40:45 +00:00
|
|
|
</a>
|
2017-02-26 18:59:51 +00:00
|
|
|
|
2017-04-12 20:00:17 +00:00
|
|
|
<ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
|
2017-04-10 19:15:28 +00:00
|
|
|
<li *ngIf="canUserUpdateVideo()" role="menuitem">
|
2017-07-11 14:01:56 +00:00
|
|
|
<a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]">
|
2017-04-10 19:15:28 +00:00
|
|
|
<span class="glyphicon glyphicon-pencil"></span> Update
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
2017-01-20 18:22:15 +00:00
|
|
|
<li role="menuitem">
|
2017-10-19 12:58:28 +00:00
|
|
|
<a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
|
|
|
|
<span class="glyphicon glyphicon-download-alt"></span> Download
|
2017-02-26 18:59:51 +00:00
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li *ngIf="isUserLoggedIn()" role="menuitem">
|
|
|
|
<a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
|
2017-01-20 18:22:15 +00:00
|
|
|
<span class="glyphicon glyphicon-alert"></span> Report
|
|
|
|
</a>
|
|
|
|
</li>
|
2017-04-26 19:22:10 +00:00
|
|
|
|
2017-04-26 19:42:36 +00:00
|
|
|
<li *ngIf="isVideoRemovable()" role="menuitem">
|
|
|
|
<a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)">
|
|
|
|
<span class="glyphicon glyphicon-remove"></span> Delete
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li *ngIf="isVideoBlacklistable()" role="menuitem">
|
|
|
|
<a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)">
|
|
|
|
<span class="glyphicon glyphicon-eye-close"></span> Blacklist
|
|
|
|
</a>
|
|
|
|
</li>
|
2017-01-20 18:22:15 +00:00
|
|
|
</ul>
|
|
|
|
</div>
|
2016-11-04 15:04:50 +00:00
|
|
|
</div>
|
|
|
|
|
2017-05-01 16:05:28 +00:00
|
|
|
<div class="col-xs-3 col-md-3 video-small-block video-small-block-rating">
|
2017-04-21 14:40:45 +00:00
|
|
|
<div class="video-small-block-like">
|
|
|
|
<span
|
|
|
|
class="glyphicon glyphicon-thumbs-up" title="Like this video"
|
|
|
|
[ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'like' }" (click)="setLike()"
|
|
|
|
></span>
|
2017-02-26 18:59:51 +00:00
|
|
|
|
2017-04-21 14:40:45 +00:00
|
|
|
<span class="video-small-block-text">
|
|
|
|
{{ video.likes }}
|
|
|
|
</span>
|
|
|
|
</div>
|
2016-11-04 15:04:50 +00:00
|
|
|
|
2017-04-21 14:40:45 +00:00
|
|
|
<div class="video-small-block-dislike">
|
|
|
|
<span
|
|
|
|
class="glyphicon glyphicon-thumbs-down" title="Dislike this video"
|
|
|
|
[ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'dislike' }" (click)="setDislike()"
|
|
|
|
></span>
|
2017-03-22 20:15:55 +00:00
|
|
|
|
2017-04-21 14:40:45 +00:00
|
|
|
<span class="video-small-block-text">
|
|
|
|
{{ video.dislikes }}
|
|
|
|
</span>
|
|
|
|
</div>
|
2017-03-27 19:11:37 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2017-04-21 14:40:45 +00:00
|
|
|
<div class="row video-details">
|
2017-05-01 16:05:28 +00:00
|
|
|
<div class="video-details-date-description col-xs-8 col-md-9">
|
2017-04-21 14:40:45 +00:00
|
|
|
<div class="video-details-date">
|
|
|
|
Published on {{ video.createdAt | date:'short' }}
|
|
|
|
</div>
|
|
|
|
|
2017-10-26 13:01:47 +00:00
|
|
|
<div class="video-details-description" [innerHTML]="videoHTMLDescription"></div>
|
2017-10-30 19:26:06 +00:00
|
|
|
|
|
|
|
<div *ngIf="completeDescriptionShown === false && video.description.length === 250" (click)="showMoreDescription()" class="video-details-description-more">
|
|
|
|
Show more
|
|
|
|
<span class="glyphicon glyphicon-menu-down"></span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-details-description-more">
|
|
|
|
Show less
|
|
|
|
<span class="glyphicon glyphicon-menu-up"></span>
|
|
|
|
</div>
|
2017-04-07 12:57:05 +00:00
|
|
|
</div>
|
|
|
|
|
2017-05-01 16:05:28 +00:00
|
|
|
<div class="video-details-attributes col-xs-4 col-md-3">
|
2017-10-31 10:52:52 +00:00
|
|
|
<div class="video-details-attribute">
|
|
|
|
<span class="video-details-attribute-label">
|
|
|
|
Privacy:
|
|
|
|
</span>
|
|
|
|
<span class="video-details-attribute-value">
|
|
|
|
{{ video.privacyLabel }}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
2017-04-21 14:40:45 +00:00
|
|
|
<div class="video-details-attribute">
|
|
|
|
<span class="video-details-attribute-label">
|
|
|
|
Category:
|
|
|
|
</span>
|
|
|
|
<span class="video-details-attribute-value">
|
|
|
|
{{ video.categoryLabel }}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="video-details-attribute">
|
|
|
|
<span class="video-details-attribute-label">
|
|
|
|
Licence:
|
|
|
|
</span>
|
|
|
|
<span class="video-details-attribute-value">
|
|
|
|
{{ video.licenceLabel }}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="video-details-attribute">
|
|
|
|
<span class="video-details-attribute-label">
|
|
|
|
Language:
|
|
|
|
</span>
|
|
|
|
<span class="video-details-attribute-value">
|
|
|
|
{{ video.languageLabel }}
|
|
|
|
</span>
|
|
|
|
</div>
|
2017-04-23 19:57:08 +00:00
|
|
|
|
|
|
|
<div class="video-details-attribute">
|
|
|
|
<span class="video-details-attribute-label">
|
|
|
|
Tags:
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<div class="video-details-tags">
|
|
|
|
<a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">
|
|
|
|
{{ tag }}
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2016-11-04 15:04:50 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2017-04-12 20:00:17 +00:00
|
|
|
<ng-template [ngIf]="video !== null">
|
2017-01-20 18:22:15 +00:00
|
|
|
<my-video-share #videoShareModal [video]="video"></my-video-share>
|
2017-10-19 12:58:28 +00:00
|
|
|
<my-video-download #videoDownloadModal [video]="video"></my-video-download>
|
2017-01-20 18:22:15 +00:00
|
|
|
<my-video-report #videoReportModal [video]="video"></my-video-report>
|
2017-04-12 20:00:17 +00:00
|
|
|
</ng-template>
|