interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Client: add share button

This commit is contained in:
Chocobozzz 2016-11-08 21:11:57 +01:00
parent e31f6ad637
commit 99cc4f4948
3 changed files with 60 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
client/src/app/videos/video-watch/video-watch.component.html
View File

@ -50,6 +50,10 @@
</div>
<div id="video-actions" class="col-md-4 text-right">
<button id="share" class="btn btn-default" (click)="showShareModal()">
<span class="glyphicon glyphicon-share"></span> Share
</button>
<button title="Get magnet URI" id="magnet-uri" class="btn btn-default" (click)="showMagnetUriModal()">
<span class="glyphicon glyphicon-magnet"></span> Magnet
</button>
@ -72,9 +76,9 @@
</div>
</div>
<div *ngIf="video !== null" bsModal #magnetUriModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="magnetUriModal" aria-hidden="true">
<div *ngIf="video !== null" bsModal #magnetUriModal="bs-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="magnetUriModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-content modal-lg">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="hideMagnetUriModal()">
@ -89,3 +93,29 @@
</div>
</div>
</div>
<div *ngIf="video !== null" bsModal #shareModal="bs-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="shareModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="hideShareModal()">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Share</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>URL</label>
<input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm" readonly [value]="getVideoUrl()" />
</div>
<div class="form-group">
<label>Embed</label>
<input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm" readonly [value]="getVideoIframeCode()" />
</div>
</div>
</div>
</div>
</div>

9
client/src/app/videos/video-watch/video-watch.component.scss
View File

@ -39,7 +39,7 @@
top: 2px;
}
#magnet-uri {
#magnet-uri, #share {
font-weight: bold;
opacity: 0.85;
}
@ -75,3 +75,10 @@
}
}
}
.modal-content {
input {
/* Force blank on readonly inputs */
background-color: #fff;
}
}

22
client/src/app/videos/video-watch/video-watch.component.ts
View File

@ -18,6 +18,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
private static LOADTIME_TOO_LONG: number = 30000;
@ViewChild('magnetUriModal') magnetUriModal: ModalDirective;
@ViewChild('shareModal') shareModal: ModalDirective;
downloadSpeed: number;
error: boolean = false;
@ -74,8 +75,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
}
loadVideo() {
console.log('<iframe width="560" height="315" src="' + window.location.origin + '/videos/embed/' + this.video.id + '" frameborder="0" allowfullscreen></iframe>');
// Reset the error
this.error = false;
// We are loading the video
@ -116,6 +115,25 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
this.magnetUriModal.hide();
}
showShareModal() {
this.shareModal.show();
}
hideShareModal() {
this.shareModal.hide();
}
getVideoIframeCode() {
return '<iframe width="560" height="315" ' +
'src="' + window.location.origin + '/videos/embed/' + this.video.id + '" ' +
'frameborder="0" allowfullscreen>' +
'</iframe>';
}
getVideoUrl() {
return window.location.href;
}
private loadTooLong() {
this.error = true;
console.error('The video load seems to be abnormally long.');