aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-11-08 21:11:57 +0100
committerChocobozzz <florian.bigard@gmail.com>2016-11-08 21:11:57 +0100
commit99cc4f49483704d3786d3f745ca65c6e91a901ec (patch)
tree3a555c806b581b674509ba3987fb1329f2947ab5
parente31f6ad6373c70481bc5dc50bcd9691ef69b2c4b (diff)
downloadPeerTube-99cc4f49483704d3786d3f745ca65c6e91a901ec.tar.gz
PeerTube-99cc4f49483704d3786d3f745ca65c6e91a901ec.tar.zst
PeerTube-99cc4f49483704d3786d3f745ca65c6e91a901ec.zip
Client: add share button
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.html34
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.scss9
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.ts22
3 files changed, 60 insertions, 5 deletions
diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html
index 0bbb5d3e8..f3a416367 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -50,6 +50,10 @@
50 </div> 50 </div>
51 51
52 <div id="video-actions" class="col-md-4 text-right"> 52 <div id="video-actions" class="col-md-4 text-right">
53 <button id="share" class="btn btn-default" (click)="showShareModal()">
54 <span class="glyphicon glyphicon-share"></span> Share
55 </button>
56
53 <button title="Get magnet URI" id="magnet-uri" class="btn btn-default" (click)="showMagnetUriModal()"> 57 <button title="Get magnet URI" id="magnet-uri" class="btn btn-default" (click)="showMagnetUriModal()">
54 <span class="glyphicon glyphicon-magnet"></span> Magnet 58 <span class="glyphicon glyphicon-magnet"></span> Magnet
55 </button> 59 </button>
@@ -72,9 +76,9 @@
72 </div> 76 </div>
73</div> 77</div>
74 78
75<div *ngIf="video !== null" bsModal #magnetUriModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="magnetUriModal" aria-hidden="true"> 79<div *ngIf="video !== null" bsModal #magnetUriModal="bs-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="magnetUriModal" aria-hidden="true">
76 <div class="modal-dialog"> 80 <div class="modal-dialog">
77 <div class="modal-content"> 81 <div class="modal-content modal-lg">
78 82
79 <div class="modal-header"> 83 <div class="modal-header">
80 <button type="button" class="close" aria-label="Close" (click)="hideMagnetUriModal()"> 84 <button type="button" class="close" aria-label="Close" (click)="hideMagnetUriModal()">
@@ -89,3 +93,29 @@
89 </div> 93 </div>
90 </div> 94 </div>
91</div> 95</div>
96
97<div *ngIf="video !== null" bsModal #shareModal="bs-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="shareModal" aria-hidden="true">
98 <div class="modal-dialog modal-lg">
99 <div class="modal-content">
100
101 <div class="modal-header">
102 <button type="button" class="close" aria-label="Close" (click)="hideShareModal()">
103 <span aria-hidden="true">&times;</span>
104 </button>
105 <h4 class="modal-title">Share</h4>
106 </div>
107
108 <div class="modal-body">
109 <div class="form-group">
110 <label>URL</label>
111 <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm" readonly [value]="getVideoUrl()" />
112 </div>
113
114 <div class="form-group">
115 <label>Embed</label>
116 <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm" readonly [value]="getVideoIframeCode()" />
117 </div>
118 </div>
119 </div>
120 </div>
121</div>
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss
index 9d335c3ba..fe23b849f 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -39,7 +39,7 @@
39 top: 2px; 39 top: 2px;
40 } 40 }
41 41
42 #magnet-uri { 42 #magnet-uri, #share {
43 font-weight: bold; 43 font-weight: bold;
44 opacity: 0.85; 44 opacity: 0.85;
45 } 45 }
@@ -75,3 +75,10 @@
75 } 75 }
76 } 76 }
77} 77}
78
79.modal-content {
80 input {
81 /* Force blank on readonly inputs */
82 background-color: #fff;
83 }
84}
diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
index 6012daa5c..0ae323c9f 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -18,6 +18,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
18 private static LOADTIME_TOO_LONG: number = 30000; 18 private static LOADTIME_TOO_LONG: number = 30000;
19 19
20 @ViewChild('magnetUriModal') magnetUriModal: ModalDirective; 20 @ViewChild('magnetUriModal') magnetUriModal: ModalDirective;
21 @ViewChild('shareModal') shareModal: ModalDirective;
21 22
22 downloadSpeed: number; 23 downloadSpeed: number;
23 error: boolean = false; 24 error: boolean = false;
@@ -74,8 +75,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
74 } 75 }
75 76
76 loadVideo() { 77 loadVideo() {
77 console.log('<iframe width="560" height="315" src="' + window.location.origin + '/videos/embed/' + this.video.id + '" frameborder="0" allowfullscreen></iframe>');
78
79 // Reset the error 78 // Reset the error
80 this.error = false; 79 this.error = false;
81 // We are loading the video 80 // We are loading the video
@@ -116,6 +115,25 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
116 this.magnetUriModal.hide(); 115 this.magnetUriModal.hide();
117 } 116 }
118 117
118 showShareModal() {
119 this.shareModal.show();
120 }
121
122 hideShareModal() {
123 this.shareModal.hide();
124 }
125
126 getVideoIframeCode() {
127 return '<iframe width="560" height="315" ' +
128 'src="' + window.location.origin + '/videos/embed/' + this.video.id + '" ' +
129 'frameborder="0" allowfullscreen>' +
130 '</iframe>';
131 }
132
133 getVideoUrl() {
134 return window.location.href;
135 }
136
119 private loadTooLong() { 137 private loadTooLong() {
120 this.error = true; 138 this.error = true;
121 console.error('The video load seems to be abnormally long.'); 139 console.error('The video load seems to be abnormally long.');