forks
/
peertube
1
0
Fork 0
Code Releases Activity

Client: move video watch modals in their own component

This commit is contained in:
Chocobozzz 2016-11-20 16:09:38 +01:00
parent 900f0d2b3c
commit cf02fbfb17
10 changed files with 126 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/app.module.ts
View File

@ -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,

2
client/src/app/videos/video-watch/index.ts
View File

@ -1,2 +1,4 @@
export * from './video-magnet.component';
export * from './video-share.component';
export * from './video-watch.component';
export * from './webtorrent.service';

17
client/src/app/videos/video-watch/video-magnet.component.html Normal file
View File

@ -0,0 +1,17 @@
<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content modal-lg">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="hideModal()">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Magnet Uri</h4>
</div>
<div class="modal-body">
<input #magnetUriInput (click)="magnetUriInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="video.magnetUri" />
</div>
</div>
</div>
</div>

27
client/src/app/videos/video-watch/video-magnet.component.ts Normal file
View File

@ -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();
}
}

25
client/src/app/videos/video-watch/video-share.component.html Normal file
View File

@ -0,0 +1,25 @@
<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="hideModal()">
<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" readonly [value]="getVideoUrl()" />
</div>
<div class="form-group">
<label>Embed</label>
<input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" />
</div>
</div>
</div>
</div>
</div>

38
client/src/app/videos/video-watch/video-share.component.ts Normal file
View File

@ -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 '<iframe width="560" height="315" ' +
'src="' + window.location.origin + '/videos/embed/' + this.video.id + '" ' +
'frameborder="0" allowfullscreen>' +
'</iframe>';
}
getVideoUrl() {
return window.location.href;
}
}

45
client/src/app/videos/video-watch/video-watch.component.html
View File

@ -79,46 +79,5 @@
</div>
</div>
<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-content modal-lg">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="hideMagnetUriModal()">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Magnet Uri</h4>
</div>
<div class="modal-body">
<input #magnetUriInput (click)="magnetUriInput.select()" type="text" class="form-control input-sm" readonly [value]="video.magnetUri" />
</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>
<my-video-share #videoShareModal *ngIf="video !== null" [video]="video"></my-video-share>
<my-video-magnet #videoMagnetModal *ngIf="video !== null" [video]="video"></my-video-magnet>

7
client/src/app/videos/video-watch/video-watch.component.scss
View File

@ -83,10 +83,3 @@
}
}
}
.modal-content {
input {
/* Force blank on readonly inputs */
background-color: #fff;
}
}

32
client/src/app/videos/video-watch/video-watch.component.ts
View File

@ -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 '<iframe width="560" height="315" ' +
'src="' + window.location.origin + '/videos/embed/' + this.video.id + '" ' +
'frameborder="0" allowfullscreen>' +
'</iframe>';
}
getVideoUrl() {
return window.location.href;
showMagnetUriModal() {
this.videoMagnetModal.show();
}
private loadTooLong() {

4
client/src/sass/application.scss
View File

@ -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);