From: Chocobozzz Date: Sun, 20 Nov 2016 15:09:38 +0000 (+0100) Subject: Client: move video watch modals in their own component X-Git-Tag: v0.0.1-alpha~606 X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;h=cf02fbfb17f9e04312f771f245778d31bc1b69d2;p=github%2FChocobozzz%2FPeerTube.git Client: move video watch modals in their own component --- 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 { VideoMiniatureComponent, VideoSortComponent, VideoWatchComponent, + VideoShareComponent, + VideoMagnetComponent, VideoService, WebTorrentService } from './videos'; @@ -118,6 +120,8 @@ const APP_PROVIDERS = [ VideosComponent, VideoSortComponent, VideoWatchComponent, + VideoShareComponent, + VideoMagnetComponent ], imports: [ // import Angular's modules 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 @@ +export * from './video-magnet.component'; +export * from './video-share.component'; export * from './video-watch.component'; 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 @@ +
+
+
+ +
+ +

Magnet Uri

+
+ +
+ +
+
+
+
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 @@ +import { Component, Input, ViewChild } from '@angular/core'; + +import { ModalDirective } from 'ng2-bootstrap/components/modal'; + +import { Video } from '../shared'; + +@Component({ + selector: 'my-video-magnet', + templateUrl: './video-magnet.component.html' +}) +export class VideoMagnetComponent { + @Input() video: Video = null; + + @ViewChild('modal') modal: ModalDirective; + + constructor() { + // empty + } + + show() { + this.modal.show(); + } + + hide() { + this.modal.hide(); + } +} 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 @@ +
+
+
+ +
+ +

Share

+
+ +
+
+ + +
+ +
+ + +
+
+
+
+
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 @@ +import { Component, Input, ViewChild } from '@angular/core'; + +import { ModalDirective } from 'ng2-bootstrap/components/modal'; + +import { Video } from '../shared'; + +@Component({ + selector: 'my-video-share', + templateUrl: './video-share.component.html' +}) +export class VideoShareComponent { + @Input() video: Video = null; + + @ViewChild('modal') modal: ModalDirective; + + constructor() { + // empty + } + + show() { + this.modal.show(); + } + + hide() { + this.modal.hide(); + } + + getVideoIframeCode() { + return ''; + } + + getVideoUrl() { + return window.location.href; + } +} 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 @@ - - - + + 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 @@ } } } - -.modal-content { - input { - /* Force blank on readonly inputs */ - background-color: #fff; - } -} 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 @@ import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { ModalDirective } from 'ng2-bootstrap/components/modal'; import { MetaService } from 'ng2-meta'; import * as videojs from 'video.js'; +import { VideoMagnetComponent } from './video-magnet.component'; +import { VideoShareComponent } from './video-share.component'; import { Video, VideoService } from '../shared'; import { WebTorrentService } from './webtorrent.service'; @@ -17,8 +18,8 @@ import { WebTorrentService } from './webtorrent.service'; export class VideoWatchComponent implements OnInit, OnDestroy { private static LOADTIME_TOO_LONG: number = 30000; - @ViewChild('magnetUriModal') magnetUriModal: ModalDirective; - @ViewChild('shareModal') shareModal: ModalDirective; + @ViewChild('videoMagnetModal') videoMagnetModal: VideoMagnetComponent; + @ViewChild('videoShareModal') videoShareModal: VideoShareComponent; downloadSpeed: number; error: boolean = false; @@ -121,31 +122,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { }); } - showMagnetUriModal() { - this.magnetUriModal.show(); - } - - hideMagnetUriModal() { - this.magnetUriModal.hide(); - } - showShareModal() { - this.shareModal.show(); + this.videoShareModal.show(); } - hideShareModal() { - this.shareModal.hide(); - } - - getVideoIframeCode() { - return ''; - } - - getVideoUrl() { - return window.location.href; + showMagnetUriModal() { + this.videoMagnetModal.show(); } 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 { display: none !important; } +input.readonly { + /* Force blank on readonly inputs */ + background-color: #fff !important; +} footer { border-top: 1px solid rgba(0, 0, 0, 0.2);