aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--client/src/app/app.module.ts4
-rw-r--r--client/src/app/videos/video-watch/index.ts2
-rw-r--r--client/src/app/videos/video-watch/video-magnet.component.html17
-rw-r--r--client/src/app/videos/video-watch/video-magnet.component.ts27
-rw-r--r--client/src/app/videos/video-watch/video-share.component.html25
-rw-r--r--client/src/app/videos/video-watch/video-share.component.ts38
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.html45
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.scss7
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.ts32
-rw-r--r--client/src/sass/application.scss4
10 files changed, 126 insertions, 75 deletions
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index e40b66c5f..3f57897fb 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -52,6 +52,8 @@ import {
52 VideoMiniatureComponent, 52 VideoMiniatureComponent,
53 VideoSortComponent, 53 VideoSortComponent,
54 VideoWatchComponent, 54 VideoWatchComponent,
55 VideoShareComponent,
56 VideoMagnetComponent,
55 VideoService, 57 VideoService,
56 WebTorrentService 58 WebTorrentService
57} from './videos'; 59} from './videos';
@@ -118,6 +120,8 @@ const APP_PROVIDERS = [
118 VideosComponent, 120 VideosComponent,
119 VideoSortComponent, 121 VideoSortComponent,
120 VideoWatchComponent, 122 VideoWatchComponent,
123 VideoShareComponent,
124 VideoMagnetComponent
121 ], 125 ],
122 imports: [ // import Angular's modules 126 imports: [ // import Angular's modules
123 BrowserModule, 127 BrowserModule,
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 @@
1export * from './video-magnet.component';
2export * from './video-share.component';
1export * from './video-watch.component'; 3export * from './video-watch.component';
2export * from './webtorrent.service'; 4export * 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">&times;</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 @@
1import { Component, Input, ViewChild } from '@angular/core';
2
3import { ModalDirective } from 'ng2-bootstrap/components/modal';
4
5import { Video } from '../shared';
6
7@Component({
8 selector: 'my-video-magnet',
9 templateUrl: './video-magnet.component.html'
10})
11export 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">&times;</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 @@
1import { Component, Input, ViewChild } from '@angular/core';
2
3import { ModalDirective } from 'ng2-bootstrap/components/modal';
4
5import { Video } from '../shared';
6
7@Component({
8 selector: 'my-video-share',
9 templateUrl: './video-share.component.html'
10})
11export 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">&times;</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">&times;</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 @@
1import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'; 1import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
2import { ActivatedRoute } from '@angular/router'; 2import { ActivatedRoute } from '@angular/router';
3 3
4import { ModalDirective } from 'ng2-bootstrap/components/modal';
5import { MetaService } from 'ng2-meta'; 4import { MetaService } from 'ng2-meta';
6import * as videojs from 'video.js'; 5import * as videojs from 'video.js';
7 6
7import { VideoMagnetComponent } from './video-magnet.component';
8import { VideoShareComponent } from './video-share.component';
8import { Video, VideoService } from '../shared'; 9import { Video, VideoService } from '../shared';
9import { WebTorrentService } from './webtorrent.service'; 10import { WebTorrentService } from './webtorrent.service';
10 11
@@ -17,8 +18,8 @@ import { WebTorrentService } from './webtorrent.service';
17export class VideoWatchComponent implements OnInit, OnDestroy { 18export 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() {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index f0526e84f..cdb486557 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -50,6 +50,10 @@ menu {
50 display: none !important; 50 display: none !important;
51} 51}
52 52
53input.readonly {
54 /* Force blank on readonly inputs */
55 background-color: #fff !important;
56}
53 57
54footer { 58footer {
55 border-top: 1px solid rgba(0, 0, 0, 0.2); 59 border-top: 1px solid rgba(0, 0, 0, 0.2);
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 16:57:52 +0000