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

Client: add share button

pull/24/head
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>
<div id="video-actions" class="col-md-4 text-right"> <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()"> <button title="Get magnet URI" id="magnet-uri" class="btn btn-default" (click)="showMagnetUriModal()">
<span class="glyphicon glyphicon-magnet"></span> Magnet <span class="glyphicon glyphicon-magnet"></span> Magnet
</button> </button>
@ -72,9 +76,9 @@
</div> </div>
</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-dialog">
<div class="modal-content"> <div class="modal-content modal-lg">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="hideMagnetUriModal()"> <button type="button" class="close" aria-label="Close" (click)="hideMagnetUriModal()">
@ -89,3 +93,29 @@
</div> </div>
</div> </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; top: 2px;
} }
#magnet-uri { #magnet-uri, #share {
font-weight: bold; font-weight: bold;
opacity: 0.85; 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; private static LOADTIME_TOO_LONG: number = 30000;
@ViewChild('magnetUriModal') magnetUriModal: ModalDirective; @ViewChild('magnetUriModal') magnetUriModal: ModalDirective;
@ViewChild('shareModal') shareModal: ModalDirective;
downloadSpeed: number; downloadSpeed: number;
error: boolean = false; error: boolean = false;
@ -74,8 +75,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
} }
loadVideo() { loadVideo() {
console.log('<iframe width="560" height="315" src="' + window.location.origin + '/videos/embed/' + this.video.id + '" frameborder="0" allowfullscreen></iframe>');
// Reset the error // Reset the error
this.error = false; this.error = false;
// We are loading the video // We are loading the video
@ -116,6 +115,25 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
this.magnetUriModal.hide(); 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() { private loadTooLong() {
this.error = true; this.error = true;
console.error('The video load seems to be abnormally long.'); console.error('The video load seems to be abnormally long.');