diff options
Diffstat (limited to 'client/src/app/videos/video-watch')
8 files changed, 118 insertions, 75 deletions
diff --git a/client/src/app/videos/video-watch/index.ts b/client/src/app/videos/video-watch/index.ts index b17aaacf2..1a8403b0a 100644 --- a/client/src/app/videos/video-watch/index.ts +++ b/client/src/app/videos/video-watch/index.ts | |||
@@ -1,2 +1,4 @@ | |||
1 | export * from './video-magnet.component'; | ||
2 | export * from './video-share.component'; | ||
1 | export * from './video-watch.component'; | 3 | export * from './video-watch.component'; |
2 | export * from './webtorrent.service'; | 4 | export * from './webtorrent.service'; |
diff --git a/client/src/app/videos/video-watch/video-magnet.component.html b/client/src/app/videos/video-watch/video-magnet.component.html new file mode 100644 index 000000000..9108c7258 --- /dev/null +++ b/client/src/app/videos/video-watch/video-magnet.component.html | |||
@@ -0,0 +1,17 @@ | |||
1 | <div bsModal #modal="bs-modal" class="modal" tabindex="-1"> | ||
2 | <div class="modal-dialog"> | ||
3 | <div class="modal-content modal-lg"> | ||
4 | |||
5 | <div class="modal-header"> | ||
6 | <button type="button" class="close" aria-label="Close" (click)="hideModal()"> | ||
7 | <span aria-hidden="true">×</span> | ||
8 | </button> | ||
9 | <h4 class="modal-title">Magnet Uri</h4> | ||
10 | </div> | ||
11 | |||
12 | <div class="modal-body"> | ||
13 | <input #magnetUriInput (click)="magnetUriInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="video.magnetUri" /> | ||
14 | </div> | ||
15 | </div> | ||
16 | </div> | ||
17 | </div> | ||
diff --git a/client/src/app/videos/video-watch/video-magnet.component.ts b/client/src/app/videos/video-watch/video-magnet.component.ts new file mode 100644 index 000000000..2894e7df6 --- /dev/null +++ b/client/src/app/videos/video-watch/video-magnet.component.ts | |||
@@ -0,0 +1,27 @@ | |||
1 | import { Component, Input, ViewChild } from '@angular/core'; | ||
2 | |||
3 | import { ModalDirective } from 'ng2-bootstrap/components/modal'; | ||
4 | |||
5 | import { Video } from '../shared'; | ||
6 | |||
7 | @Component({ | ||
8 | selector: 'my-video-magnet', | ||
9 | templateUrl: './video-magnet.component.html' | ||
10 | }) | ||
11 | export class VideoMagnetComponent { | ||
12 | @Input() video: Video = null; | ||
13 | |||
14 | @ViewChild('modal') modal: ModalDirective; | ||
15 | |||
16 | constructor() { | ||
17 | // empty | ||
18 | } | ||
19 | |||
20 | show() { | ||
21 | this.modal.show(); | ||
22 | } | ||
23 | |||
24 | hide() { | ||
25 | this.modal.hide(); | ||
26 | } | ||
27 | } | ||
diff --git a/client/src/app/videos/video-watch/video-share.component.html b/client/src/app/videos/video-watch/video-share.component.html new file mode 100644 index 000000000..2e83e9a45 --- /dev/null +++ b/client/src/app/videos/video-watch/video-share.component.html | |||
@@ -0,0 +1,25 @@ | |||
1 | <div bsModal #modal="bs-modal" class="modal" tabindex="-1"> | ||
2 | <div class="modal-dialog modal-lg"> | ||
3 | <div class="modal-content"> | ||
4 | |||
5 | <div class="modal-header"> | ||
6 | <button type="button" class="close" aria-label="Close" (click)="hideModal()"> | ||
7 | <span aria-hidden="true">×</span> | ||
8 | </button> | ||
9 | <h4 class="modal-title">Share</h4> | ||
10 | </div> | ||
11 | |||
12 | <div class="modal-body"> | ||
13 | <div class="form-group"> | ||
14 | <label>URL</label> | ||
15 | <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" /> | ||
16 | </div> | ||
17 | |||
18 | <div class="form-group"> | ||
19 | <label>Embed</label> | ||
20 | <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" /> | ||
21 | </div> | ||
22 | </div> | ||
23 | </div> | ||
24 | </div> | ||
25 | </div> | ||
diff --git a/client/src/app/videos/video-watch/video-share.component.ts b/client/src/app/videos/video-watch/video-share.component.ts new file mode 100644 index 000000000..74b238350 --- /dev/null +++ b/client/src/app/videos/video-watch/video-share.component.ts | |||
@@ -0,0 +1,38 @@ | |||
1 | import { Component, Input, ViewChild } from '@angular/core'; | ||
2 | |||
3 | import { ModalDirective } from 'ng2-bootstrap/components/modal'; | ||
4 | |||
5 | import { Video } from '../shared'; | ||
6 | |||
7 | @Component({ | ||
8 | selector: 'my-video-share', | ||
9 | templateUrl: './video-share.component.html' | ||
10 | }) | ||
11 | export class VideoShareComponent { | ||
12 | @Input() video: Video = null; | ||
13 | |||
14 | @ViewChild('modal') modal: ModalDirective; | ||
15 | |||
16 | constructor() { | ||
17 | // empty | ||
18 | } | ||
19 | |||
20 | show() { | ||
21 | this.modal.show(); | ||
22 | } | ||
23 | |||
24 | hide() { | ||
25 | this.modal.hide(); | ||
26 | } | ||
27 | |||
28 | getVideoIframeCode() { | ||
29 | return '<iframe width="560" height="315" ' + | ||
30 | 'src="' + window.location.origin + '/videos/embed/' + this.video.id + '" ' + | ||
31 | 'frameborder="0" allowfullscreen>' + | ||
32 | '</iframe>'; | ||
33 | } | ||
34 | |||
35 | getVideoUrl() { | ||
36 | return window.location.href; | ||
37 | } | ||
38 | } | ||
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 2dfc25f56..0f0fa68cc 100644 --- a/client/src/app/videos/video-watch/video-watch.component.html +++ b/client/src/app/videos/video-watch/video-watch.component.html | |||
@@ -79,46 +79,5 @@ | |||
79 | </div> | 79 | </div> |
80 | </div> | 80 | </div> |
81 | 81 | ||
82 | <div *ngIf="video !== null" bsModal #magnetUriModal="bs-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="magnetUriModal" aria-hidden="true"> | 82 | <my-video-share #videoShareModal *ngIf="video !== null" [video]="video"></my-video-share> |
83 | <div class="modal-dialog"> | 83 | <my-video-magnet #videoMagnetModal *ngIf="video !== null" [video]="video"></my-video-magnet> |
84 | <div class="modal-content modal-lg"> | ||
85 | |||
86 | <div class="modal-header"> | ||
87 | <button type="button" class="close" aria-label="Close" (click)="hideMagnetUriModal()"> | ||
88 | <span aria-hidden="true">×</span> | ||
89 | </button> | ||
90 | <h4 class="modal-title">Magnet Uri</h4> | ||
91 | </div> | ||
92 | |||
93 | <div class="modal-body"> | ||
94 | <input #magnetUriInput (click)="magnetUriInput.select()" type="text" class="form-control input-sm" readonly [value]="video.magnetUri" /> | ||
95 | </div> | ||
96 | </div> | ||
97 | </div> | ||
98 | </div> | ||
99 | |||
100 | <div *ngIf="video !== null" bsModal #shareModal="bs-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="shareModal" aria-hidden="true"> | ||
101 | <div class="modal-dialog modal-lg"> | ||
102 | <div class="modal-content"> | ||
103 | |||
104 | <div class="modal-header"> | ||
105 | <button type="button" class="close" aria-label="Close" (click)="hideShareModal()"> | ||
106 | <span aria-hidden="true">×</span> | ||
107 | </button> | ||
108 | <h4 class="modal-title">Share</h4> | ||
109 | </div> | ||
110 | |||
111 | <div class="modal-body"> | ||
112 | <div class="form-group"> | ||
113 | <label>URL</label> | ||
114 | <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm" readonly [value]="getVideoUrl()" /> | ||
115 | </div> | ||
116 | |||
117 | <div class="form-group"> | ||
118 | <label>Embed</label> | ||
119 | <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm" readonly [value]="getVideoIframeCode()" /> | ||
120 | </div> | ||
121 | </div> | ||
122 | </div> | ||
123 | </div> | ||
124 | </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 45446e175..ac62b04e7 100644 --- a/client/src/app/videos/video-watch/video-watch.component.scss +++ b/client/src/app/videos/video-watch/video-watch.component.scss | |||
@@ -83,10 +83,3 @@ | |||
83 | } | 83 | } |
84 | } | 84 | } |
85 | } | 85 | } |
86 | |||
87 | .modal-content { | ||
88 | input { | ||
89 | /* Force blank on readonly inputs */ | ||
90 | background-color: #fff; | ||
91 | } | ||
92 | } | ||
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 3dab2bbb7..afc6fe01c 100644 --- a/client/src/app/videos/video-watch/video-watch.component.ts +++ b/client/src/app/videos/video-watch/video-watch.component.ts | |||
@@ -1,10 +1,11 @@ | |||
1 | import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'; | 1 | import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'; |
2 | import { ActivatedRoute } from '@angular/router'; | 2 | import { ActivatedRoute } from '@angular/router'; |
3 | 3 | ||
4 | import { ModalDirective } from 'ng2-bootstrap/components/modal'; | ||
5 | import { MetaService } from 'ng2-meta'; | 4 | import { MetaService } from 'ng2-meta'; |
6 | import * as videojs from 'video.js'; | 5 | import * as videojs from 'video.js'; |
7 | 6 | ||
7 | import { VideoMagnetComponent } from './video-magnet.component'; | ||
8 | import { VideoShareComponent } from './video-share.component'; | ||
8 | import { Video, VideoService } from '../shared'; | 9 | import { Video, VideoService } from '../shared'; |
9 | import { WebTorrentService } from './webtorrent.service'; | 10 | import { WebTorrentService } from './webtorrent.service'; |
10 | 11 | ||
@@ -17,8 +18,8 @@ import { WebTorrentService } from './webtorrent.service'; | |||
17 | export class VideoWatchComponent implements OnInit, OnDestroy { | 18 | export class VideoWatchComponent implements OnInit, OnDestroy { |
18 | private static LOADTIME_TOO_LONG: number = 30000; | 19 | private static LOADTIME_TOO_LONG: number = 30000; |
19 | 20 | ||
20 | @ViewChild('magnetUriModal') magnetUriModal: ModalDirective; | 21 | @ViewChild('videoMagnetModal') videoMagnetModal: VideoMagnetComponent; |
21 | @ViewChild('shareModal') shareModal: ModalDirective; | 22 | @ViewChild('videoShareModal') videoShareModal: VideoShareComponent; |
22 | 23 | ||
23 | downloadSpeed: number; | 24 | downloadSpeed: number; |
24 | error: boolean = false; | 25 | error: boolean = false; |
@@ -121,31 +122,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
121 | }); | 122 | }); |
122 | } | 123 | } |
123 | 124 | ||
124 | showMagnetUriModal() { | ||
125 | this.magnetUriModal.show(); | ||
126 | } | ||
127 | |||
128 | hideMagnetUriModal() { | ||
129 | this.magnetUriModal.hide(); | ||
130 | } | ||
131 | |||
132 | showShareModal() { | 125 | showShareModal() { |
133 | this.shareModal.show(); | 126 | this.videoShareModal.show(); |
134 | } | 127 | } |
135 | 128 | ||
136 | hideShareModal() { | 129 | showMagnetUriModal() { |
137 | this.shareModal.hide(); | 130 | this.videoMagnetModal.show(); |
138 | } | ||
139 | |||
140 | getVideoIframeCode() { | ||
141 | return '<iframe width="560" height="315" ' + | ||
142 | 'src="' + window.location.origin + '/videos/embed/' + this.video.id + '" ' + | ||
143 | 'frameborder="0" allowfullscreen>' + | ||
144 | '</iframe>'; | ||
145 | } | ||
146 | |||
147 | getVideoUrl() { | ||
148 | return window.location.href; | ||
149 | } | 131 | } |
150 | 132 | ||
151 | private loadTooLong() { | 133 | private loadTooLong() { |