aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--client/config/helpers.js5
-rw-r--r--client/config/webpack.common.js54
-rw-r--r--client/config/webpack.dev.js27
-rw-r--r--client/config/webpack.prod.js25
-rw-r--r--client/package.json45
-rw-r--r--client/src/app/account/account.component.ts8
-rw-r--r--client/src/app/account/index.ts1
-rw-r--r--client/src/app/admin/admin.component.ts4
-rw-r--r--client/src/app/admin/admin.routes.ts4
-rw-r--r--client/src/app/admin/friends/friend-add/friend-add.component.ts14
-rw-r--r--client/src/app/admin/friends/friend-list/friend-list.component.ts4
-rw-r--r--client/src/app/admin/friends/friends.component.ts7
-rw-r--r--client/src/app/admin/friends/friends.routes.ts4
-rw-r--r--client/src/app/admin/friends/index.ts1
-rw-r--r--client/src/app/admin/index.ts1
-rw-r--r--client/src/app/admin/menu-admin.component.ts4
-rw-r--r--client/src/app/admin/users/user-add/user-add.component.ts6
-rw-r--r--client/src/app/admin/users/user-list/user-list.component.ts4
-rw-r--r--client/src/app/admin/users/users.component.ts7
-rw-r--r--client/src/app/admin/users/users.routes.ts4
-rw-r--r--client/src/app/app.component.ts11
-rw-r--r--client/src/app/app.module.ts130
-rw-r--r--client/src/app/app.routes.ts4
-rw-r--r--client/src/app/app.service.ts36
-rw-r--r--client/src/app/environment.ts50
-rw-r--r--client/src/app/index.ts1
-rw-r--r--client/src/app/login/login.component.ts6
-rw-r--r--client/src/app/menu.component.ts5
-rw-r--r--client/src/app/shared/search/search.component.ts7
-rw-r--r--client/src/app/videos/video-add/video-add.component.ts11
-rw-r--r--client/src/app/videos/video-list/video-list.component.ts12
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.ts6
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.ts9
-rw-r--r--client/src/app/videos/videos.component.ts4
-rw-r--r--client/src/app/videos/videos.routes.ts4
-rw-r--r--client/src/custom-typings.d.ts118
-rw-r--r--client/src/main.ts49
-rw-r--r--client/src/polyfills.ts23
-rw-r--r--client/src/vendor.ts3
-rw-r--r--client/tsconfig.json41
-rw-r--r--client/typings.json7
41 files changed, 478 insertions, 288 deletions
diff --git a/client/config/helpers.js b/client/config/helpers.js
index 24d7dae9f..6268d2628 100644
--- a/client/config/helpers.js
+++ b/client/config/helpers.js
@@ -8,10 +8,15 @@ function hasProcessFlag (flag) {
8 return process.argv.join('').indexOf(flag) > -1 8 return process.argv.join('').indexOf(flag) > -1
9} 9}
10 10
11function isWebpackDevServer () {
12 return process.argv[1] && !!(/webpack-dev-server$/.exec(process.argv[1]))
13}
14
11function root (args) { 15function root (args) {
12 args = Array.prototype.slice.call(arguments, 0) 16 args = Array.prototype.slice.call(arguments, 0)
13 return path.join.apply(path, [ROOT].concat(args)) 17 return path.join.apply(path, [ROOT].concat(args))
14} 18}
15 19
16exports.hasProcessFlag = hasProcessFlag 20exports.hasProcessFlag = hasProcessFlag
21exports.isWebpackDevServer = isWebpackDevServer
17exports.root = root 22exports.root = root
diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js
index 2ff3a1506..6edc9400c 100644
--- a/client/config/webpack.common.js
+++ b/client/config/webpack.common.js
@@ -5,7 +5,7 @@ const helpers = require('./helpers')
5 * Webpack Plugins 5 * Webpack Plugins
6 */ 6 */
7 7
8var CopyWebpackPlugin = (CopyWebpackPlugin = require('copy-webpack-plugin'), CopyWebpackPlugin.default || CopyWebpackPlugin) 8const CopyWebpackPlugin = require('copy-webpack-plugin')
9const HtmlWebpackPlugin = require('html-webpack-plugin') 9const HtmlWebpackPlugin = require('html-webpack-plugin')
10const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin 10const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin
11const WebpackNotifierPlugin = require('webpack-notifier') 11const WebpackNotifierPlugin = require('webpack-notifier')
@@ -15,7 +15,8 @@ const WebpackNotifierPlugin = require('webpack-notifier')
15 */ 15 */
16const METADATA = { 16const METADATA = {
17 title: 'PeerTube', 17 title: 'PeerTube',
18 baseUrl: '/' 18 baseUrl: '/',
19 isDevServer: helpers.isWebpackDevServer()
19} 20}
20 21
21/* 22/*
@@ -69,10 +70,7 @@ module.exports = {
69 root: helpers.root('src'), 70 root: helpers.root('src'),
70 71
71 // remove other default values 72 // remove other default values
72 modulesDirectories: [ 'node_modules' ], 73 modulesDirectories: [ 'node_modules' ]
73
74 packageAlias: 'browser'
75
76 }, 74 },
77 75
78 output: { 76 output: {
@@ -92,27 +90,15 @@ module.exports = {
92 */ 90 */
93 preLoaders: [ 91 preLoaders: [
94 92
95 /*
96 * Tslint loader support for *.ts files
97 *
98 * See: https://github.com/wbuchwalter/tslint-loader
99 */
100 // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
101
102 /*
103 * Source map loader support for *.js files
104 * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
105 *
106 * See: https://github.com/webpack/source-map-loader
107 */
108 { 93 {
109 test: /\.js$/, 94 test: /\.ts$/,
110 loader: 'source-map-loader', 95 loader: 'string-replace-loader',
111 exclude: [ 96 query: {
112 // these packages have problems with their sourcemaps 97 search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)',
113 helpers.root('node_modules/rxjs'), 98 replace: '$1.import($3).then(mod => mod.__esModule ? mod.default : mod)',
114 helpers.root('node_modules/@angular') 99 flags: 'g'
115 ] 100 },
101 include: [helpers.root('src')]
116 } 102 }
117 103
118 ], 104 ],
@@ -134,7 +120,11 @@ module.exports = {
134 */ 120 */
135 { 121 {
136 test: /\.ts$/, 122 test: /\.ts$/,
137 loader: 'awesome-typescript-loader', 123 loaders: [
124 'awesome-typescript-loader',
125 'angular2-template-loader',
126 '@angularclass/hmr-loader'
127 ],
138 exclude: [/\.(spec|e2e)\.ts$/] 128 exclude: [/\.(spec|e2e)\.ts$/]
139 }, 129 },
140 130
@@ -194,16 +184,6 @@ module.exports = {
194 new ForkCheckerPlugin(), 184 new ForkCheckerPlugin(),
195 185
196 /* 186 /*
197 * Plugin: OccurenceOrderPlugin
198 * Description: Varies the distribution of the ids to get the smallest id length
199 * for often used ids.
200 *
201 * See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
202 * See: https://github.com/webpack/docs/wiki/optimization#minimize
203 */
204 new webpack.optimize.OccurenceOrderPlugin(true),
205
206 /*
207 * Plugin: CommonsChunkPlugin 187 * Plugin: CommonsChunkPlugin
208 * Description: Shares common code between the pages. 188 * Description: Shares common code between the pages.
209 * It identifies common modules and put them into a commons chunk. 189 * It identifies common modules and put them into a commons chunk.
diff --git a/client/config/webpack.dev.js b/client/config/webpack.dev.js
index 50193bf58..fede16932 100644
--- a/client/config/webpack.dev.js
+++ b/client/config/webpack.dev.js
@@ -6,15 +6,18 @@ const commonConfig = require('./webpack.common.js') // the settings that are com
6 * Webpack Plugins 6 * Webpack Plugins
7 */ 7 */
8const DefinePlugin = require('webpack/lib/DefinePlugin') 8const DefinePlugin = require('webpack/lib/DefinePlugin')
9const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin')
9 10
10/** 11/**
11 * Webpack Constants 12 * Webpack Constants
12 */ 13 */
13const ENV = process.env.ENV = process.env.NODE_ENV = 'development' 14const ENV = process.env.ENV = process.env.NODE_ENV = 'development'
15const HOST = process.env.HOST || 'localhost'
16const PORT = process.env.PORT || 3000
14const HMR = helpers.hasProcessFlag('hot') 17const HMR = helpers.hasProcessFlag('hot')
15const METADATA = webpackMerge(commonConfig.metadata, { 18const METADATA = webpackMerge(commonConfig.metadata, {
16 host: 'localhost', 19 host: HOST,
17 port: 3000, 20 port: PORT,
18 ENV: ENV, 21 ENV: ENV,
19 HMR: HMR 22 HMR: HMR
20}) 23})
@@ -81,7 +84,10 @@ module.exports = webpackMerge(commonConfig, {
81 * 84 *
82 * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename 85 * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
83 */ 86 */
84 chunkFilename: '[id].chunk.js' 87 chunkFilename: '[id].chunk.js',
88
89 library: 'ac_[name]',
90 libraryTarget: 'var'
85 91
86 }, 92 },
87 93
@@ -109,7 +115,9 @@ module.exports = webpackMerge(commonConfig, {
109 'NODE_ENV': JSON.stringify(METADATA.ENV), 115 'NODE_ENV': JSON.stringify(METADATA.ENV),
110 'HMR': METADATA.HMR 116 'HMR': METADATA.HMR
111 } 117 }
112 }) 118 }),
119
120 new NamedModulesPlugin()
113 ], 121 ],
114 122
115 /** 123 /**
@@ -124,6 +132,17 @@ module.exports = webpackMerge(commonConfig, {
124 resourcePath: 'src' 132 resourcePath: 'src'
125 }, 133 },
126 134
135 devServer: {
136 port: METADATA.port,
137 host: METADATA.host,
138 historyApiFallback: true,
139 watchOptions: {
140 aggregateTimeout: 300,
141 poll: 1000
142 },
143 outputPath: helpers.root('dist')
144 },
145
127 /* 146 /*
128 * Include polyfills or mocks for various node stuff 147 * Include polyfills or mocks for various node stuff
129 * Description: Node configuration 148 * Description: Node configuration
diff --git a/client/config/webpack.prod.js b/client/config/webpack.prod.js
index 7ce5727d3..4e7d96a4b 100644
--- a/client/config/webpack.prod.js
+++ b/client/config/webpack.prod.js
@@ -9,10 +9,12 @@ const commonConfig = require('./webpack.common.js') // the settings that are com
9/** 9/**
10 * Webpack Plugins 10 * Webpack Plugins
11 */ 11 */
12// const ProvidePlugin = require('webpack/lib/ProvidePlugin')
12const DefinePlugin = require('webpack/lib/DefinePlugin') 13const DefinePlugin = require('webpack/lib/DefinePlugin')
13const DedupePlugin = require('webpack/lib/optimize/DedupePlugin') 14const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin')
15// const IgnorePlugin = require('webpack/lib/IgnorePlugin')
16// const DedupePlugin = require('webpack/lib/optimize/DedupePlugin')
14const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin') 17const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')
15const CompressionPlugin = require('compression-webpack-plugin')
16const WebpackMd5Hash = require('webpack-md5-hash') 18const WebpackMd5Hash = require('webpack-md5-hash')
17 19
18/** 20/**
@@ -110,7 +112,7 @@ module.exports = webpackMerge(commonConfig, {
110 * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin 112 * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
111 * See: https://github.com/webpack/docs/wiki/optimization#deduplication 113 * See: https://github.com/webpack/docs/wiki/optimization#deduplication
112 */ 114 */
113 new DedupePlugin(), 115 // new DedupePlugin(),
114 116
115 /** 117 /**
116 * Plugin: DefinePlugin 118 * Plugin: DefinePlugin
@@ -156,19 +158,16 @@ module.exports = webpackMerge(commonConfig, {
156 // comments: true, //debug 158 // comments: true, //debug
157 159
158 beautify: false, // prod 160 beautify: false, // prod
159 161 mangle: { screw_ie8: true, keep_fnames: true }, // prod
160 mangle: { 162 compress: { screw_ie8: true }, // prod
161 screw_ie8: true,
162 keep_fnames: true
163 }, // prod
164
165 compress: {
166 screw_ie8: true
167 }, // prod
168
169 comments: false // prod 163 comments: false // prod
170 }), 164 }),
171 165
166 new NormalModuleReplacementPlugin(
167 /angular2-hmr/,
168 helpers.root('config/modules/angular2-hmr-prod.js')
169 ),
170
172 /** 171 /**
173 * Plugin: CompressionPlugin 172 * Plugin: CompressionPlugin
174 * Description: Prepares compressed versions of assets to serve 173 * Description: Prepares compressed versions of assets to serve
diff --git a/client/package.json b/client/package.json
index ed7daf98e..952997d1f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -13,22 +13,29 @@
13 "url": "git://github.com/Chocobozzz/PeerTube.git" 13 "url": "git://github.com/Chocobozzz/PeerTube.git"
14 }, 14 },
15 "scripts": { 15 "scripts": {
16 "postinstall": "typings install",
17 "test": "standard && tslint -c ./tslint.json src/**/*.ts", 16 "test": "standard && tslint -c ./tslint.json src/**/*.ts",
18 "webpack": "webpack" 17 "webpack": "webpack"
19 }, 18 },
20 "license": "GPLv3", 19 "license": "GPLv3",
21 "dependencies": { 20 "dependencies": {
22 "@angular/common": "2.0.0-rc.4", 21 "@angular/common": "2.0.0-rc.6",
23 "@angular/compiler": "2.0.0-rc.4", 22 "@angular/compiler": "2.0.0-rc.6",
24 "@angular/core": "2.0.0-rc.4", 23 "@angular/core": "2.0.0-rc.6",
25 "@angular/forms": "^0.2.0", 24 "@angular/forms": "2.0.0-rc.6",
26 "@angular/http": "2.0.0-rc.4", 25 "@angular/http": "2.0.0-rc.6",
27 "@angular/platform-browser": "2.0.0-rc.4", 26 "@angular/platform-browser": "2.0.0-rc.6",
28 "@angular/platform-browser-dynamic": "2.0.0-rc.4", 27 "@angular/platform-browser-dynamic": "2.0.0-rc.6",
29 "@angular/router": "3.0.0-beta.2", 28 "@angular/router": "3.0.0-rc.2",
30 "angular-pipes": "^2.0.0", 29 "@angularclass/hmr": "^1.0.1",
31 "awesome-typescript-loader": "^0.17.0", 30 "@angularclass/hmr-loader": "^1.0.1",
31 "@types/core-js": "^0.9.28",
32 "@types/node": "^6.0.38",
33 "@types/source-map": "^0.1.26",
34 "@types/uglify-js": "^2.0.27",
35 "@types/webpack": "^1.12.29",
36 "angular-pipes": "^3.0.0",
37 "angular2-template-loader": "^0.5.0",
38 "awesome-typescript-loader": "^2.2.1",
32 "bootstrap-loader": "^1.0.8", 39 "bootstrap-loader": "^1.0.8",
33 "bootstrap-sass": "^3.3.6", 40 "bootstrap-sass": "^3.3.6",
34 "compression-webpack-plugin": "^0.3.1", 41 "compression-webpack-plugin": "^0.3.1",
@@ -43,29 +50,29 @@
43 "ie-shim": "^0.1.0", 50 "ie-shim": "^0.1.0",
44 "intl": "^1.2.4", 51 "intl": "^1.2.4",
45 "json-loader": "^0.5.4", 52 "json-loader": "^0.5.4",
46 "ng2-bootstrap": "1.0.24", 53 "ng2-bootstrap": "1.1.1",
47 "ng2-file-upload": "^1.0.3", 54 "ng2-file-upload": "^1.0.3",
48 "node-sass": "^3.7.0", 55 "node-sass": "^3.7.0",
49 "normalize.css": "^4.1.1", 56 "normalize.css": "^4.1.1",
50 "raw-loader": "^0.5.1", 57 "raw-loader": "^0.5.1",
51 "reflect-metadata": "0.1.3", 58 "reflect-metadata": "0.1.3",
52 "resolve-url-loader": "^1.4.3", 59 "resolve-url-loader": "^1.4.3",
53 "rxjs": "5.0.0-beta.6", 60 "rxjs": "5.0.0-beta.11",
54 "sass-loader": "^3.2.0", 61 "sass-loader": "^3.2.0",
55 "source-map-loader": "^0.1.5", 62 "source-map-loader": "^0.1.5",
63 "string-replace-loader": "^1.0.3",
56 "style-loader": "^0.13.1", 64 "style-loader": "^0.13.1",
57 "ts-helpers": "^1.1.1", 65 "ts-helpers": "^1.1.1",
58 "tslint": "^3.7.4", 66 "tslint": "3.15.0-dev.0",
59 "tslint-loader": "^2.1.4", 67 "tslint-loader": "^2.1.4",
60 "typescript": "^1.8.10", 68 "typescript": "^2.0.0",
61 "typings": "^1.0.4",
62 "url-loader": "^0.5.7", 69 "url-loader": "^0.5.7",
63 "webpack": "^1.13.1", 70 "webpack": "^2.1.0-beta.21",
64 "webpack-md5-hash": "0.0.5", 71 "webpack-md5-hash": "0.0.5",
65 "webpack-merge": "^0.13.0", 72 "webpack-merge": "^0.14.1",
66 "webpack-notifier": "^1.3.0", 73 "webpack-notifier": "^1.3.0",
67 "webtorrent": "^0.96.0", 74 "webtorrent": "^0.96.0",
68 "zone.js": "0.6.12" 75 "zone.js": "0.6.17"
69 }, 76 },
70 "devDependencies": { 77 "devDependencies": {
71 "codelyzer": "0.0.28", 78 "codelyzer": "0.0.28",
diff --git a/client/src/app/account/account.component.ts b/client/src/app/account/account.component.ts
index 54939f43b..a22738d3f 100644
--- a/client/src/app/account/account.component.ts
+++ b/client/src/app/account/account.component.ts
@@ -1,15 +1,13 @@
1import { Validators } from '@angular/common'; 1import { } from '@angular/common';
2import { Component, OnInit } from '@angular/core'; 2import { Component, OnInit } from '@angular/core';
3import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; 3import { FormControl, FormGroup, Validators } from '@angular/forms';
4import { Router } from '@angular/router'; 4import { Router } from '@angular/router';
5 5
6import { AccountService } from './account.service'; 6import { AccountService } from './account.service';
7 7
8@Component({ 8@Component({
9 selector: 'my-account', 9 selector: 'my-account',
10 template: require('./account.component.html'), 10 template: require('./account.component.html')
11 providers: [ AccountService ],
12 directives: [ REACTIVE_FORM_DIRECTIVES ]
13}) 11})
14 12
15export class AccountComponent implements OnInit { 13export class AccountComponent implements OnInit {
diff --git a/client/src/app/account/index.ts b/client/src/app/account/index.ts
index 7445003fd..823d9fe5f 100644
--- a/client/src/app/account/index.ts
+++ b/client/src/app/account/index.ts
@@ -1,2 +1,3 @@
1export * from './account.component'; 1export * from './account.component';
2export * from './account.routes'; 2export * from './account.routes';
3export * from './account.service';
diff --git a/client/src/app/admin/admin.component.ts b/client/src/app/admin/admin.component.ts
index 82f2529ec..64a7400e7 100644
--- a/client/src/app/admin/admin.component.ts
+++ b/client/src/app/admin/admin.component.ts
@@ -1,9 +1,7 @@
1import { Component } from '@angular/core'; 1import { Component } from '@angular/core';
2import { ROUTER_DIRECTIVES } from '@angular/router';
3 2
4@Component({ 3@Component({
5 template: '<router-outlet></router-outlet>', 4 template: '<router-outlet></router-outlet>'
6 directives: [ ROUTER_DIRECTIVES ]
7}) 5})
8 6
9export class AdminComponent { 7export class AdminComponent {
diff --git a/client/src/app/admin/admin.routes.ts b/client/src/app/admin/admin.routes.ts
index 80b3ecbc1..1fcace994 100644
--- a/client/src/app/admin/admin.routes.ts
+++ b/client/src/app/admin/admin.routes.ts
@@ -1,10 +1,10 @@
1import { RouterConfig } from '@angular/router'; 1import { Routes } from '@angular/router';
2 2
3import { AdminComponent } from './admin.component'; 3import { AdminComponent } from './admin.component';
4import { FriendsRoutes } from './friends'; 4import { FriendsRoutes } from './friends';
5import { UsersRoutes } from './users'; 5import { UsersRoutes } from './users';
6 6
7export const AdminRoutes: RouterConfig = [ 7export const AdminRoutes: Routes = [
8 { 8 {
9 path: 'admin', 9 path: 'admin',
10 component: AdminComponent, 10 component: AdminComponent,
diff --git a/client/src/app/admin/friends/friend-add/friend-add.component.ts b/client/src/app/admin/friends/friend-add/friend-add.component.ts
index 2b2aceb8a..55aed9156 100644
--- a/client/src/app/admin/friends/friend-add/friend-add.component.ts
+++ b/client/src/app/admin/friends/friend-add/friend-add.component.ts
@@ -1,5 +1,5 @@
1import { Component, OnInit } from '@angular/core'; 1import { Component, OnInit } from '@angular/core';
2import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; 2import { FormControl, FormGroup } from '@angular/forms';
3import { Router } from '@angular/router'; 3import { Router } from '@angular/router';
4 4
5import { validateUrl } from '../../../shared'; 5import { validateUrl } from '../../../shared';
@@ -8,8 +8,7 @@ import { FriendService } from '../shared';
8@Component({ 8@Component({
9 selector: 'my-friend-add', 9 selector: 'my-friend-add',
10 template: require('./friend-add.component.html'), 10 template: require('./friend-add.component.html'),
11 styles: [ require('./friend-add.component.scss') ], 11 styles: [ require('./friend-add.component.scss') ]
12 directives: [ REACTIVE_FORM_DIRECTIVES ]
13}) 12})
14export class FriendAddComponent implements OnInit { 13export class FriendAddComponent implements OnInit {
15 friendAddForm: FormGroup; 14 friendAddForm: FormGroup;
@@ -80,12 +79,13 @@ export class FriendAddComponent implements OnInit {
80 79
81 this.friendService.makeFriends(notEmptyUrls).subscribe( 80 this.friendService.makeFriends(notEmptyUrls).subscribe(
82 status => { 81 status => {
83 if (status === 409) { 82 // TODO: extractdatastatus
84 alert('Already made friends!'); 83 // if (status === 409) {
85 } else { 84 // alert('Already made friends!');
85 // } else {
86 alert('Make friends request sent!'); 86 alert('Make friends request sent!');
87 this.router.navigate([ '/admin/friends/list' ]); 87 this.router.navigate([ '/admin/friends/list' ]);
88 } 88 // }
89 }, 89 },
90 error => alert(error) 90 error => alert(error)
91 ); 91 );
diff --git a/client/src/app/admin/friends/friend-list/friend-list.component.ts b/client/src/app/admin/friends/friend-list/friend-list.component.ts
index 38d4799a6..c76fc4df2 100644
--- a/client/src/app/admin/friends/friend-list/friend-list.component.ts
+++ b/client/src/app/admin/friends/friend-list/friend-list.component.ts
@@ -1,13 +1,11 @@
1import { Component, OnInit } from '@angular/core'; 1import { Component, OnInit } from '@angular/core';
2import { ROUTER_DIRECTIVES } from '@angular/router';
3 2
4import { Friend, FriendService } from '../shared'; 3import { Friend, FriendService } from '../shared';
5 4
6@Component({ 5@Component({
7 selector: 'my-friend-list', 6 selector: 'my-friend-list',
8 template: require('./friend-list.component.html'), 7 template: require('./friend-list.component.html'),
9 styles: [ require('./friend-list.component.scss') ], 8 styles: [ require('./friend-list.component.scss') ]
10 directives: [ ROUTER_DIRECTIVES ]
11}) 9})
12export class FriendListComponent implements OnInit { 10export class FriendListComponent implements OnInit {
13 friends: Friend[]; 11 friends: Friend[];
diff --git a/client/src/app/admin/friends/friends.component.ts b/client/src/app/admin/friends/friends.component.ts
index e66280f01..bc3f54158 100644
--- a/client/src/app/admin/friends/friends.component.ts
+++ b/client/src/app/admin/friends/friends.component.ts
@@ -1,12 +1,7 @@
1import { Component } from '@angular/core'; 1import { Component } from '@angular/core';
2import { ROUTER_DIRECTIVES } from '@angular/router';
3
4import { FriendService } from './shared';
5 2
6@Component({ 3@Component({
7 template: '<router-outlet></router-outlet>', 4 template: '<router-outlet></router-outlet>'
8 directives: [ ROUTER_DIRECTIVES ],
9 providers: [ FriendService ]
10}) 5})
11 6
12export class FriendsComponent { 7export class FriendsComponent {
diff --git a/client/src/app/admin/friends/friends.routes.ts b/client/src/app/admin/friends/friends.routes.ts
index 42b4a6c14..7fdef68f9 100644
--- a/client/src/app/admin/friends/friends.routes.ts
+++ b/client/src/app/admin/friends/friends.routes.ts
@@ -1,10 +1,10 @@
1import { RouterConfig } from '@angular/router'; 1import { Routes } from '@angular/router';
2 2
3import { FriendsComponent } from './friends.component'; 3import { FriendsComponent } from './friends.component';
4import { FriendAddComponent } from './friend-add'; 4import { FriendAddComponent } from './friend-add';
5import { FriendListComponent } from './friend-list'; 5import { FriendListComponent } from './friend-list';
6 6
7export const FriendsRoutes: RouterConfig = [ 7export const FriendsRoutes: Routes = [
8 { 8 {
9 path: 'friends', 9 path: 'friends',
10 component: FriendsComponent, 10 component: FriendsComponent,
diff --git a/client/src/app/admin/friends/index.ts b/client/src/app/admin/friends/index.ts
index f3110e31d..dd4df2538 100644
--- a/client/src/app/admin/friends/index.ts
+++ b/client/src/app/admin/friends/index.ts
@@ -1,4 +1,5 @@
1export * from './friend-add'; 1export * from './friend-add';
2export * from './friend-list'; 2export * from './friend-list';
3export * from './shared'; 3export * from './shared';
4export * from './friends.component';
4export * from './friends.routes'; 5export * from './friends.routes';
diff --git a/client/src/app/admin/index.ts b/client/src/app/admin/index.ts
index 292973681..3d0e67b15 100644
--- a/client/src/app/admin/index.ts
+++ b/client/src/app/admin/index.ts
@@ -1,3 +1,4 @@
1export * from './friends';
1export * from './users'; 2export * from './users';
2export * from './admin.component'; 3export * from './admin.component';
3export * from './admin.routes'; 4export * from './admin.routes';
diff --git a/client/src/app/admin/menu-admin.component.ts b/client/src/app/admin/menu-admin.component.ts
index 788592872..a9115d49f 100644
--- a/client/src/app/admin/menu-admin.component.ts
+++ b/client/src/app/admin/menu-admin.component.ts
@@ -1,9 +1,7 @@
1import { Component } from '@angular/core'; 1import { Component } from '@angular/core';
2import { ROUTER_DIRECTIVES } from '@angular/router';
3 2
4@Component({ 3@Component({
5 selector: 'my-menu-admin', 4 selector: 'my-menu-admin',
6 template: require('./menu-admin.component.html'), 5 template: require('./menu-admin.component.html')
7 directives: [ ROUTER_DIRECTIVES ]
8}) 6})
9export class MenuAdminComponent { } 7export class MenuAdminComponent { }
diff --git a/client/src/app/admin/users/user-add/user-add.component.ts b/client/src/app/admin/users/user-add/user-add.component.ts
index 8dd98cc5c..e3f4b2e1a 100644
--- a/client/src/app/admin/users/user-add/user-add.component.ts
+++ b/client/src/app/admin/users/user-add/user-add.component.ts
@@ -1,14 +1,12 @@
1import { Validators } from '@angular/common';
2import { Component, OnInit } from '@angular/core'; 1import { Component, OnInit } from '@angular/core';
3import { FormGroup, FormControl, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; 2import { FormGroup, FormControl, Validators } from '@angular/forms';
4import { Router } from '@angular/router'; 3import { Router } from '@angular/router';
5 4
6import { UserService } from '../shared'; 5import { UserService } from '../shared';
7 6
8@Component({ 7@Component({
9 selector: 'my-user-add', 8 selector: 'my-user-add',
10 template: require('./user-add.component.html'), 9 template: require('./user-add.component.html')
11 directives: [ REACTIVE_FORM_DIRECTIVES ]
12}) 10})
13export class UserAddComponent implements OnInit { 11export class UserAddComponent implements OnInit {
14 userAddForm: FormGroup; 12 userAddForm: FormGroup;
diff --git a/client/src/app/admin/users/user-list/user-list.component.ts b/client/src/app/admin/users/user-list/user-list.component.ts
index c89a61bca..d3827eb28 100644
--- a/client/src/app/admin/users/user-list/user-list.component.ts
+++ b/client/src/app/admin/users/user-list/user-list.component.ts
@@ -1,5 +1,4 @@
1import { Component, OnInit } from '@angular/core'; 1import { Component, OnInit } from '@angular/core';
2import { ROUTER_DIRECTIVES } from '@angular/router';
3 2
4import { User } from '../../../shared'; 3import { User } from '../../../shared';
5import { UserService } from '../shared'; 4import { UserService } from '../shared';
@@ -7,8 +6,7 @@ import { UserService } from '../shared';
7@Component({ 6@Component({
8 selector: 'my-user-list', 7 selector: 'my-user-list',
9 template: require('./user-list.component.html'), 8 template: require('./user-list.component.html'),
10 styles: [ require('./user-list.component.scss') ], 9 styles: [ require('./user-list.component.scss') ]
11 directives: [ ROUTER_DIRECTIVES ]
12}) 10})
13export class UserListComponent implements OnInit { 11export class UserListComponent implements OnInit {
14 totalUsers: number; 12 totalUsers: number;
diff --git a/client/src/app/admin/users/users.component.ts b/client/src/app/admin/users/users.component.ts
index 46aa0862f..37e3b158d 100644
--- a/client/src/app/admin/users/users.component.ts
+++ b/client/src/app/admin/users/users.component.ts
@@ -1,12 +1,7 @@
1import { Component } from '@angular/core'; 1import { Component } from '@angular/core';
2import { ROUTER_DIRECTIVES } from '@angular/router';
3
4import { UserService } from './shared';
5 2
6@Component({ 3@Component({
7 template: '<router-outlet></router-outlet>', 4 template: '<router-outlet></router-outlet>'
8 directives: [ ROUTER_DIRECTIVES ],
9 providers: [ UserService ]
10}) 5})
11 6
12export class UsersComponent { 7export class UsersComponent {
diff --git a/client/src/app/admin/users/users.routes.ts b/client/src/app/admin/users/users.routes.ts
index 0457c3843..eb71bd0ae 100644
--- a/client/src/app/admin/users/users.routes.ts
+++ b/client/src/app/admin/users/users.routes.ts
@@ -1,10 +1,10 @@
1import { RouterConfig } from '@angular/router'; 1import { Routes } from '@angular/router';
2 2
3import { UsersComponent } from './users.component'; 3import { UsersComponent } from './users.component';
4import { UserAddComponent } from './user-add'; 4import { UserAddComponent } from './user-add';
5import { UserListComponent } from './user-list'; 5import { UserListComponent } from './user-list';
6 6
7export const UsersRoutes: RouterConfig = [ 7export const UsersRoutes: Routes = [
8 { 8 {
9 path: 'users', 9 path: 'users',
10 component: UsersComponent, 10 component: UsersComponent,
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 9d05c272f..e81993a3f 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,17 +1,10 @@
1import { Component } from '@angular/core'; 1import { Component } from '@angular/core';
2import { Router, ROUTER_DIRECTIVES } from '@angular/router'; 2import { Router } from '@angular/router';
3
4import { MenuAdminComponent } from './admin';
5import { MenuComponent } from './menu.component';
6import { RestExtractor, RestService, SearchComponent, SearchService } from './shared';
7import { VideoService } from './videos';
8 3
9@Component({ 4@Component({
10 selector: 'my-app', 5 selector: 'my-app',
11 template: require('./app.component.html'), 6 template: require('./app.component.html'),
12 styles: [ require('./app.component.scss') ], 7 styles: [ require('./app.component.scss') ]
13 directives: [ MenuAdminComponent, MenuComponent, ROUTER_DIRECTIVES, SearchComponent ],
14 providers: [ RestExtractor, RestService, VideoService, SearchService ]
15}) 8})
16 9
17export class AppComponent { 10export class AppComponent {
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
new file mode 100644
index 000000000..950b3c48e
--- /dev/null
+++ b/client/src/app/app.module.ts
@@ -0,0 +1,130 @@
1import { NgModule, ApplicationRef } from '@angular/core';
2import { BrowserModule } from '@angular/platform-browser';
3import { FormsModule, ReactiveFormsModule } from '@angular/forms';
4import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
5import { RouterModule } from '@angular/router';
6import { removeNgStyles, createNewHosts } from '@angularclass/hmr';
7
8import { FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';
9import { ProgressbarModule } from 'ng2-bootstrap/components/progressbar';
10import { PaginationModule } from 'ng2-bootstrap/components/pagination';
11import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
12
13/*
14 * Platform and Environment providers/directives/pipes
15 */
16import { ENV_PROVIDERS } from './environment';
17import { routes } from './app.routes';
18// App is our top level component
19import { AppComponent } from './app.component';
20import { AppState } from './app.service';
21import { AccountComponent, AccountService } from './account';
22import { LoginComponent } from './login';
23import {
24 LoaderComponent,
25 VideosComponent,
26 VideoAddComponent,
27 VideoListComponent,
28 VideoMiniatureComponent,
29 VideoSortComponent,
30 VideoWatchComponent,
31 VideoService
32} from './videos';
33import {
34 FriendsComponent,
35 FriendAddComponent,
36 FriendListComponent,
37 FriendService,
38 UsersComponent,
39 UserAddComponent,
40 UserListComponent,
41 UserService,
42 AdminComponent,
43 MenuAdminComponent
44} from './admin';
45import { MenuComponent } from './menu.component';
46import { AuthService, AuthHttp, RestExtractor, RestService, SearchComponent, SearchService } from './shared';
47
48// Application wide providers
49const APP_PROVIDERS = [
50 AppState,
51
52 {
53 provide: AuthHttp,
54 useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, authService: AuthService) => {
55 return new AuthHttp(backend, defaultOptions, authService);
56 },
57 deps: [ XHRBackend, RequestOptions, AuthService ]
58 },
59
60 AuthService,
61 RestExtractor,
62 RestExtractor, RestService, VideoService, SearchService, FriendService, UserService, AccountService
63];
64/**
65 * `AppModule` is the main entry point into Angular2's bootstraping process
66 */
67@NgModule({
68 bootstrap: [ AppComponent ],
69 declarations: [
70 AppComponent,
71 BytesPipe,
72 FileSelectDirective,
73 AccountComponent,
74 LoginComponent,
75 LoaderComponent,
76 VideosComponent,
77 VideoAddComponent,
78 VideoListComponent,
79 VideoSortComponent,
80 VideoMiniatureComponent,
81 VideoWatchComponent,
82 FriendsComponent,
83 FriendAddComponent,
84 FriendListComponent,
85 UsersComponent,
86 UserAddComponent,
87 UserListComponent,
88 AdminComponent,
89 MenuAdminComponent,
90 MenuComponent,
91 SearchComponent
92 ],
93 imports: [ // import Angular's modules
94 BrowserModule,
95 FormsModule,
96 ReactiveFormsModule,
97 HttpModule,
98 RouterModule.forRoot(routes),
99 ProgressbarModule,
100 PaginationModule
101 ],
102 providers: [ // expose our Services and Providers into Angular's dependency injection
103 ENV_PROVIDERS,
104 APP_PROVIDERS
105 ]
106})
107export class AppModule {
108 constructor(public appRef: ApplicationRef, public appState: AppState) {}
109 hmrOnInit(store) {
110 if (!store || !store.state) return;
111 console.log('HMR store', store);
112 this.appState._state = store.state;
113 this.appRef.tick();
114 delete store.state;
115 }
116 hmrOnDestroy(store) {
117 const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
118 // recreate elements
119 const state = this.appState._state;
120 store.state = state;
121 store.disposeOldHosts = createNewHosts(cmpLocation);
122 // remove styles
123 removeNgStyles();
124 }
125 hmrAfterDestroy(store) {
126 // display new elements
127 store.disposeOldHosts();
128 delete store.disposeOldHosts;
129 }
130}
diff --git a/client/src/app/app.routes.ts b/client/src/app/app.routes.ts
index d7194cb4f..03e2bce51 100644
--- a/client/src/app/app.routes.ts
+++ b/client/src/app/app.routes.ts
@@ -1,11 +1,11 @@
1import { RouterConfig } from '@angular/router'; 1import { Routes } from '@angular/router';
2 2
3import { AccountRoutes } from './account'; 3import { AccountRoutes } from './account';
4import { LoginRoutes } from './login'; 4import { LoginRoutes } from './login';
5import { AdminRoutes } from './admin'; 5import { AdminRoutes } from './admin';
6import { VideosRoutes } from './videos'; 6import { VideosRoutes } from './videos';
7 7
8export const routes: RouterConfig = [ 8export const routes: Routes = [
9 { 9 {
10 path: '', 10 path: '',
11 redirectTo: '/videos/list', 11 redirectTo: '/videos/list',
diff --git a/client/src/app/app.service.ts b/client/src/app/app.service.ts
new file mode 100644
index 000000000..033c21900
--- /dev/null
+++ b/client/src/app/app.service.ts
@@ -0,0 +1,36 @@
1
2import { Injectable } from '@angular/core';
3
4@Injectable()
5export class AppState {
6 _state = { };
7
8 constructor() { ; }
9
10 // already return a clone of the current state
11 get state() {
12 return this._state = this._clone(this._state);
13 }
14 // never allow mutation
15 set state(value) {
16 throw new Error('do not mutate the `.state` directly');
17 }
18
19
20 get(prop?: any) {
21 // use our state getter for the clone
22 const state = this.state;
23 return state.hasOwnProperty(prop) ? state[prop] : state;
24 }
25
26 set(prop: string, value: any) {
27 // internally mutate our state
28 return this._state[prop] = value;
29 }
30
31
32 _clone(object) {
33 // simple object clone
34 return JSON.parse(JSON.stringify( object ));
35 }
36}
diff --git a/client/src/app/environment.ts b/client/src/app/environment.ts
new file mode 100644
index 000000000..8bba89c4e
--- /dev/null
+++ b/client/src/app/environment.ts
@@ -0,0 +1,50 @@
1
2// Angular 2
3// rc2 workaround
4import { enableDebugTools, disableDebugTools } from '@angular/platform-browser';
5import { enableProdMode, ApplicationRef } from '@angular/core';
6// Environment Providers
7let PROVIDERS = [
8 // common env directives
9];
10
11// Angular debug tools in the dev console
12// https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md
13let _decorateModuleRef = function identity(value) { return value; };
14
15if ('production' === ENV) {
16 // Production
17 disableDebugTools();
18 enableProdMode();
19
20 PROVIDERS = [
21 ...PROVIDERS,
22 // custom providers in production
23 ];
24
25} else {
26
27 _decorateModuleRef = (modRef: any) => {
28 const appRef = modRef.injector.get(ApplicationRef);
29 const cmpRef = appRef.components[0];
30
31 let _ng = (<any>window).ng;
32 enableDebugTools(cmpRef);
33 (<any>window).ng.probe = _ng.probe;
34 (<any>window).ng.coreTokens = _ng.coreTokens;
35 return modRef;
36 };
37
38 // Development
39 PROVIDERS = [
40 ...PROVIDERS,
41 // custom providers in development
42 ];
43
44}
45
46export const decorateModuleRef = _decorateModuleRef;
47
48export const ENV_PROVIDERS = [
49 ...PROVIDERS
50];
diff --git a/client/src/app/index.ts b/client/src/app/index.ts
new file mode 100644
index 000000000..da53f6aef
--- /dev/null
+++ b/client/src/app/index.ts
@@ -0,0 +1 @@
export * from './app.module';
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index 1e0ba0fe8..7a4e15c2c 100644
--- a/client/src/app/login/login.component.ts
+++ b/client/src/app/login/login.component.ts
@@ -1,14 +1,12 @@
1import { Component, OnInit } from '@angular/core'; 1import { Component, OnInit } from '@angular/core';
2import { Validators } from '@angular/common'; 2import { FormControl, FormGroup, Validators } from '@angular/forms';
3import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
4import { Router } from '@angular/router'; 3import { Router } from '@angular/router';
5 4
6import { AuthService } from '../shared'; 5import { AuthService } from '../shared';
7 6
8@Component({ 7@Component({
9 selector: 'my-login', 8 selector: 'my-login',
10 template: require('./login.component.html'), 9 template: require('./login.component.html')
11 directives: [ REACTIVE_FORM_DIRECTIVES ]
12}) 10})
13 11
14export class LoginComponent implements OnInit { 12export class LoginComponent implements OnInit {
diff --git a/client/src/app/menu.component.ts b/client/src/app/menu.component.ts
index 6b08301df..425a12e5d 100644
--- a/client/src/app/menu.component.ts
+++ b/client/src/app/menu.component.ts
@@ -1,12 +1,11 @@
1import { Component, OnInit } from '@angular/core'; 1import { Component, OnInit } from '@angular/core';
2import { Router, ROUTER_DIRECTIVES } from '@angular/router'; 2import { Router } from '@angular/router';
3 3
4import { AuthService, AuthStatus } from './shared'; 4import { AuthService, AuthStatus } from './shared';
5 5
6@Component({ 6@Component({
7 selector: 'my-menu', 7 selector: 'my-menu',
8 template: require('./menu.component.html'), 8 template: require('./menu.component.html')
9 directives: [ ROUTER_DIRECTIVES ]
10}) 9})
11export class MenuComponent implements OnInit { 10export class MenuComponent implements OnInit {
12 isLoggedIn: boolean; 11 isLoggedIn: boolean;
diff --git a/client/src/app/shared/search/search.component.ts b/client/src/app/shared/search/search.component.ts
index 853f5dc7c..7878471dc 100644
--- a/client/src/app/shared/search/search.component.ts
+++ b/client/src/app/shared/search/search.component.ts
@@ -1,16 +1,13 @@
1import { Component, OnInit } from '@angular/core'; 1import { Component, OnInit } from '@angular/core';
2import { Router } from '@angular/router'; 2import { Router } from '@angular/router';
3 3
4import { DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/components/dropdown';
5
6import { Search } from './search.model'; 4import { Search } from './search.model';
7import { SearchField } from './search-field.type'; 5import { SearchField } from './search-field.type';
8import { SearchService } from './search.service'; 6import { SearchService } from './search.service';
9 7
10@Component({ 8@Component({
11 selector: 'my-search', 9 selector: 'my-search',
12 template: require('./search.component.html'), 10 template: require('./search.component.html')
13 directives: [ DROPDOWN_DIRECTIVES ]
14}) 11})
15 12
16export class SearchComponent implements OnInit { 13export class SearchComponent implements OnInit {
diff --git a/client/src/app/videos/video-add/video-add.component.ts b/client/src/app/videos/video-add/video-add.component.ts
index 900ef1da3..f0695d768 100644
--- a/client/src/app/videos/video-add/video-add.component.ts
+++ b/client/src/app/videos/video-add/video-add.component.ts
@@ -1,20 +1,15 @@
1import { Validators } from '@angular/common';
2import { Component, ElementRef, OnInit } from '@angular/core'; 1import { Component, ElementRef, OnInit } from '@angular/core';
3import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; 2import { FormControl, FormGroup, Validators } from '@angular/forms';
4import { Router } from '@angular/router'; 3import { Router } from '@angular/router';
5 4
6import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; 5import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
7import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
8import { FileSelectDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload';
9 6
10import { AuthService } from '../../shared'; 7import { AuthService } from '../../shared';
11 8
12@Component({ 9@Component({
13 selector: 'my-videos-add', 10 selector: 'my-videos-add',
14 styles: [ require('./video-add.component.scss') ], 11 styles: [ require('./video-add.component.scss') ],
15 template: require('./video-add.component.html'), 12 template: require('./video-add.component.html')
16 directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES, REACTIVE_FORM_DIRECTIVES ],
17 pipes: [ BytesPipe ]
18}) 13})
19 14
20export class VideoAddComponent implements OnInit { 15export class VideoAddComponent implements OnInit {
diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts
index 9a9ffe29f..fa8e497aa 100644
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/client/src/app/videos/video-list/video-list.component.ts
@@ -1,27 +1,19 @@
1import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; 1import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
2import { AsyncPipe } from '@angular/common'; 2import { ActivatedRoute, Router } from '@angular/router';
3import { ActivatedRoute, Router, ROUTER_DIRECTIVES } from '@angular/router';
4import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 3import { BehaviorSubject } from 'rxjs/BehaviorSubject';
5 4
6import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination';
7
8import { 5import {
9 LoaderComponent,
10 SortField, 6 SortField,
11 Video, 7 Video,
12 VideoService 8 VideoService
13} from '../shared'; 9} from '../shared';
14import { AuthService, AuthUser, RestPagination, Search, SearchField } from '../../shared'; 10import { AuthService, AuthUser, RestPagination, Search, SearchField } from '../../shared';
15import { VideoMiniatureComponent } from './video-miniature.component';
16import { VideoSortComponent } from './video-sort.component';
17import { SearchService } from '../../shared'; 11import { SearchService } from '../../shared';
18 12
19@Component({ 13@Component({
20 selector: 'my-videos-list', 14 selector: 'my-videos-list',
21 styles: [ require('./video-list.component.scss') ], 15 styles: [ require('./video-list.component.scss') ],
22 pipes: [ AsyncPipe ], 16 template: require('./video-list.component.html')
23 template: require('./video-list.component.html'),
24 directives: [ LoaderComponent, PAGINATION_DIRECTIVES, ROUTER_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ]
25}) 17})
26 18
27export class VideoListComponent implements OnInit, OnDestroy { 19export class VideoListComponent implements OnInit, OnDestroy {
diff --git a/client/src/app/videos/video-list/video-miniature.component.ts b/client/src/app/videos/video-list/video-miniature.component.ts
index 84bab950e..38317f832 100644
--- a/client/src/app/videos/video-list/video-miniature.component.ts
+++ b/client/src/app/videos/video-list/video-miniature.component.ts
@@ -1,6 +1,4 @@
1import { DatePipe } from '@angular/common';
2import { Component, Input, Output, EventEmitter } from '@angular/core'; 1import { Component, Input, Output, EventEmitter } from '@angular/core';
3import { ROUTER_DIRECTIVES } from '@angular/router';
4 2
5import { SortField, Video, VideoService } from '../shared'; 3import { SortField, Video, VideoService } from '../shared';
6import { User } from '../../shared'; 4import { User } from '../../shared';
@@ -8,9 +6,7 @@ import { User } from '../../shared';
8@Component({ 6@Component({
9 selector: 'my-video-miniature', 7 selector: 'my-video-miniature',
10 styles: [ require('./video-miniature.component.scss') ], 8 styles: [ require('./video-miniature.component.scss') ],
11 template: require('./video-miniature.component.html'), 9 template: require('./video-miniature.component.html')
12 directives: [ ROUTER_DIRECTIVES ],
13 pipes: [ DatePipe ]
14}) 10})
15 11
16export class VideoMiniatureComponent { 12export class VideoMiniatureComponent {
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 d260e55c7..2a60e9327 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -1,18 +1,13 @@
1import { Component, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core'; 1import { Component, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
2import { ActivatedRoute } from '@angular/router'; 2import { ActivatedRoute } from '@angular/router';
3 3
4import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; 4import { Video, VideoService } from '../shared';
5
6import { LoaderComponent, Video, VideoService } from '../shared';
7import { WebTorrentService } from './webtorrent.service'; 5import { WebTorrentService } from './webtorrent.service';
8 6
9@Component({ 7@Component({
10 selector: 'my-video-watch', 8 selector: 'my-video-watch',
11 template: require('./video-watch.component.html'), 9 template: require('./video-watch.component.html'),
12 styles: [ require('./video-watch.component.scss') ], 10 styles: [ require('./video-watch.component.scss') ]
13 providers: [ WebTorrentService ],
14 directives: [ LoaderComponent ],
15 pipes: [ BytesPipe ]
16}) 11})
17 12
18export class VideoWatchComponent implements OnInit, OnDestroy { 13export class VideoWatchComponent implements OnInit, OnDestroy {
diff --git a/client/src/app/videos/videos.component.ts b/client/src/app/videos/videos.component.ts
index 76252afbb..591e7523d 100644
--- a/client/src/app/videos/videos.component.ts
+++ b/client/src/app/videos/videos.component.ts
@@ -1,9 +1,7 @@
1import { Component } from '@angular/core'; 1import { Component } from '@angular/core';
2import { ROUTER_DIRECTIVES } from '@angular/router';
3 2
4@Component({ 3@Component({
5 template: '<router-outlet></router-outlet>', 4 template: '<router-outlet></router-outlet>'
6 directives: [ ROUTER_DIRECTIVES ]
7}) 5})
8 6
9export class VideosComponent { 7export class VideosComponent {
diff --git a/client/src/app/videos/videos.routes.ts b/client/src/app/videos/videos.routes.ts
index 1f088b376..074f96596 100644
--- a/client/src/app/videos/videos.routes.ts
+++ b/client/src/app/videos/videos.routes.ts
@@ -1,11 +1,11 @@
1import { RouterConfig } from '@angular/router'; 1import { Routes } from '@angular/router';
2 2
3import { VideoAddComponent } from './video-add'; 3import { VideoAddComponent } from './video-add';
4import { VideoListComponent } from './video-list'; 4import { VideoListComponent } from './video-list';
5import { VideosComponent } from './videos.component'; 5import { VideosComponent } from './videos.component';
6import { VideoWatchComponent } from './video-watch'; 6import { VideoWatchComponent } from './video-watch';
7 7
8export const VideosRoutes: RouterConfig = [ 8export const VideosRoutes: Routes = [
9 { 9 {
10 path: 'videos', 10 path: 'videos',
11 component: VideosComponent, 11 component: VideosComponent,
diff --git a/client/src/custom-typings.d.ts b/client/src/custom-typings.d.ts
index 14c7d8ade..95787181f 100644
--- a/client/src/custom-typings.d.ts
+++ b/client/src/custom-typings.d.ts
@@ -1,15 +1,27 @@
1/* 1/*
2 * Custom Type Definitions 2 * Custom Type Definitions
3 * When including 3rd party modules you also need to include the type definition for the module 3 * When including 3rd party modules you also need to include the type definition for the module
4 * if they don't provide one within the module. You can try to install it with typings 4 * if they don't provide one within the module. You can try to install it with @types
5 5
6typings install node --save 6npm install @types/node
7npm install @types/lodash
7 8
8 * If you can't find the type definition in the registry we can make an ambient definition in 9 * If you can't find the type definition in the registry we can make an ambient/global definition in
9 * this file for now. For example 10 * this file for now. For example
10 11
11declare module "my-module" { 12declare module 'my-module' {
12 export function doesSomething(value: string): string; 13 export function doesSomething(value: string): string;
14}
15
16 * If you are using a CommonJS module that is using module.exports then you will have to write your
17 * types using export = yourObjectOrFunction with a namespace above it
18 * notice how we have to create a namespace that is equal to the function we're
19 * assigning the export to
20
21declare module 'jwt-decode' {
22 function jwtDecode(token: string): any;
23 namespace jwtDecode {}
24 export = jwtDecode;
13} 25}
14 26
15 * 27 *
@@ -17,33 +29,65 @@ declare module "my-module" {
17 * 29 *
18 30
19declare var assert: any; 31declare var assert: any;
32declare var _: any;
33declare var $: any;
20 34
21 * 35 *
22 * If you're importing a module that uses Node.js modules which are CommonJS you need to import as 36 * If you're importing a module that uses Node.js modules which are CommonJS you need to import as
37 * in the files such as main.browser.ts or any file within app/
23 * 38 *
24 39
25import * as _ from 'lodash' 40import * as _ from 'lodash'
26 41
27 * You can include your type definitions in this file until you create one for the typings registry 42 * You can include your type definitions in this file until you create one for the @types
28 * see https://github.com/typings/registry
29 * 43 *
30 */ 44 */
31 45
46// support NodeJS modules without type definitions
47declare module '*';
32 48
33// Extra variables that live on Global that will be replaced by webpack DefinePlugin 49// Extra variables that live on Global that will be replaced by webpack DefinePlugin
34declare var ENV: string; 50declare var ENV: string;
35declare var HMR: boolean; 51declare var HMR: boolean;
52declare var System: SystemJS;
53
54interface SystemJS {
55 import: (path?: string) => Promise<any>;
56}
57
36interface GlobalEnvironment { 58interface GlobalEnvironment {
37 ENV; 59 ENV;
38 HMR; 60 HMR;
61 SystemJS: SystemJS;
62 System: SystemJS;
39} 63}
40 64
65interface Es6PromiseLoader {
66 (id: string): (exportName?: string) => Promise<any>;
67}
68
69type FactoryEs6PromiseLoader = () => Es6PromiseLoader;
70type FactoryPromise = () => Promise<any>;
71
72type AsyncRoutes = {
73 [component: string]: Es6PromiseLoader |
74 Function |
75 FactoryEs6PromiseLoader |
76 FactoryPromise
77};
78
79
80type IdleCallbacks = Es6PromiseLoader |
81 Function |
82 FactoryEs6PromiseLoader |
83 FactoryPromise ;
84
41interface WebpackModule { 85interface WebpackModule {
42 hot: { 86 hot: {
43 data?: any, 87 data?: any,
44 idle: any, 88 idle: any,
45 accept(dependencies?: string | string[], callback?: (updatedDependencies?: any) => void): void; 89 accept(dependencies?: string | string[], callback?: (updatedDependencies?: any) => void): void;
46 decline(dependencies?: string | string[]): void; 90 decline(deps?: any | string | string[]): void;
47 dispose(callback?: (data?: any) => void): void; 91 dispose(callback?: (data?: any) => void): void;
48 addDisposeHandler(callback?: (data?: any) => void): void; 92 addDisposeHandler(callback?: (data?: any) => void): void;
49 removeDisposeHandler(callback?: (data?: any) => void): void; 93 removeDisposeHandler(callback?: (data?: any) => void): void;
@@ -54,66 +98,26 @@ interface WebpackModule {
54 }; 98 };
55} 99}
56 100
101
57interface WebpackRequire { 102interface WebpackRequire {
58 context(file: string, flag?: boolean, exp?: RegExp): any; 103 (id: string): any;
104 (paths: string[], callback: (...modules: any[]) => void): void;
105 ensure(ids: string[], callback: (req: WebpackRequire) => void, chunkName?: string): void;
106 context(directory: string, useSubDirectories?: boolean, regExp?: RegExp): WebpackContext;
59} 107}
60 108
109interface WebpackContext extends WebpackRequire {
110 keys(): string[];
111}
61 112
62interface ErrorStackTraceLimit { 113interface ErrorStackTraceLimit {
63 stackTraceLimit: number; 114 stackTraceLimit: number;
64} 115}
65 116
66 117
67
68// Extend typings 118// Extend typings
69interface NodeRequire extends WebpackRequire {} 119interface NodeRequire extends WebpackRequire {}
70interface ErrorConstructor extends ErrorStackTraceLimit {} 120interface ErrorConstructor extends ErrorStackTraceLimit {}
121interface NodeRequireFunction extends Es6PromiseLoader {}
71interface NodeModule extends WebpackModule {} 122interface NodeModule extends WebpackModule {}
72interface Global extends GlobalEnvironment {} 123interface Global extends GlobalEnvironment {}
73
74
75declare namespace Reflect {
76 function decorate(decorators: ClassDecorator[], target: Function): Function;
77 function decorate(
78 decorators: (PropertyDecorator | MethodDecorator)[],
79 target: Object,
80 targetKey: string | symbol,
81 descriptor?: PropertyDescriptor): PropertyDescriptor;
82
83 function metadata(metadataKey: any, metadataValue: any): {
84 (target: Function): void;
85 (target: Object, propertyKey: string | symbol): void;
86 };
87 function defineMetadata(metadataKey: any, metadataValue: any, target: Object): void;
88 function defineMetadata(
89 metadataKey: any,
90 metadataValue: any,
91 target: Object,
92 targetKey: string | symbol): void;
93 function hasMetadata(metadataKey: any, target: Object): boolean;
94 function hasMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
95 function hasOwnMetadata(metadataKey: any, target: Object): boolean;
96 function hasOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
97 function getMetadata(metadataKey: any, target: Object): any;
98 function getMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
99 function getOwnMetadata(metadataKey: any, target: Object): any;
100 function getOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
101 function getMetadataKeys(target: Object): any[];
102 function getMetadataKeys(target: Object, targetKey: string | symbol): any[];
103 function getOwnMetadataKeys(target: Object): any[];
104 function getOwnMetadataKeys(target: Object, targetKey: string | symbol): any[];
105 function deleteMetadata(metadataKey: any, target: Object): boolean;
106 function deleteMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
107}
108
109
110// We need this here since there is a problem with Zone.js typings
111interface Thenable<T> {
112 then<U>(
113 onFulfilled?: (value: T) => U | Thenable<U>,
114 onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
115 then<U>(
116 onFulfilled?: (value: T) => U | Thenable<U>,
117 onRejected?: (error: any) => void): Thenable<U>;
118 catch<U>(onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
119}
diff --git a/client/src/main.ts b/client/src/main.ts
index 7caabe914..70bf48537 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -1,35 +1,20 @@
1import { enableProdMode, provide } from '@angular/core'; 1import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2import { disableDeprecatedForms, provideForms } from '@angular/forms'; 2import { decorateModuleRef } from './app/environment';
3import { 3import { bootloader } from '@angularclass/hmr';
4 HTTP_PROVIDERS, 4/*
5 RequestOptions, 5 * App Module
6 XHRBackend 6 * our top level module that holds all of our components
7} from '@angular/http'; 7 */
8import { bootstrap } from '@angular/platform-browser-dynamic'; 8import { AppModule } from './app';
9import { provideRouter } from '@angular/router';
10 9
11import { routes } from './app/app.routes'; 10/*
12import { AuthHttp, AuthService, RestExtractor } from './app/shared'; 11 * Bootstrap our Angular app with a top level NgModule
13import { AppComponent } from './app/app.component'; 12 */
14 13export function main(): Promise<any> {
15if (process.env.ENV === 'production') { 14 return platformBrowserDynamic()
16 enableProdMode(); 15 .bootstrapModule(AppModule)
16 .then(decorateModuleRef)
17 .catch(err => console.error(err));
17} 18}
18 19
19bootstrap(AppComponent, [ 20bootloader(main);
20 HTTP_PROVIDERS,
21 provide(AuthHttp, {
22 useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, authService: AuthService) => {
23 return new AuthHttp(backend, defaultOptions, authService);
24 },
25 deps: [ XHRBackend, RequestOptions, AuthService ]
26 }),
27
28 AuthService,
29 RestExtractor,
30
31 provideRouter(routes),
32
33 disableDeprecatedForms(),
34 provideForms()
35]);
diff --git a/client/src/polyfills.ts b/client/src/polyfills.ts
index 740a563bb..65e211459 100644
--- a/client/src/polyfills.ts
+++ b/client/src/polyfills.ts
@@ -6,9 +6,28 @@ require('intl/locale-data/jsonp/en.js');
6import 'ie-shim'; // Internet Explorer 6import 'ie-shim'; // Internet Explorer
7 7
8// Prefer CoreJS over the polyfills above 8// Prefer CoreJS over the polyfills above
9import 'core-js/es6'; 9import 'core-js/es6/symbol';
10import 'core-js/es6/object';
11import 'core-js/es6/function';
12import 'core-js/es6/parse-int';
13import 'core-js/es6/parse-float';
14import 'core-js/es6/number';
15import 'core-js/es6/math';
16import 'core-js/es6/string';
17import 'core-js/es6/date';
18import 'core-js/es6/array';
19import 'core-js/es6/regexp';
20import 'core-js/es6/map';
21import 'core-js/es6/set';
22import 'core-js/es6/weak-map';
23import 'core-js/es6/weak-set';
24import 'core-js/es6/typed';
25import 'core-js/es6/reflect';
26// see issue https://github.com/AngularClass/angular2-webpack-starter/issues/709
27// import 'core-js/es6/promise';
28
10import 'core-js/es7/reflect'; 29import 'core-js/es7/reflect';
11require('zone.js/dist/zone'); 30import 'zone.js/dist/zone';
12 31
13// Typescript emit helpers polyfill 32// Typescript emit helpers polyfill
14import 'ts-helpers'; 33import 'ts-helpers';
diff --git a/client/src/vendor.ts b/client/src/vendor.ts
index df03bc5f4..95356d9d0 100644
--- a/client/src/vendor.ts
+++ b/client/src/vendor.ts
@@ -12,10 +12,13 @@ import '@angular/forms';
12import '@angular/http'; 12import '@angular/http';
13import '@angular/router'; 13import '@angular/router';
14 14
15import '@angularclass/hmr';
16
15// RxJS 17// RxJS
16import 'rxjs/Observable'; 18import 'rxjs/Observable';
17import 'rxjs/Subject'; 19import 'rxjs/Subject';
18import 'rxjs/add/operator/catch'; 20import 'rxjs/add/operator/catch';
21import 'rxjs/add/operator/mergeMap';
19import 'rxjs/add/operator/map'; 22import 'rxjs/add/operator/map';
20import 'rxjs/add/observable/throw'; 23import 'rxjs/add/observable/throw';
21 24
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 7dc1a2457..c4e2a8804 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -3,24 +3,39 @@
3 "target": "es5", 3 "target": "es5",
4 "module": "commonjs", 4 "module": "commonjs",
5 "moduleResolution": "node", 5 "moduleResolution": "node",
6 "sourceMap": true,
7 "emitDecoratorMetadata": true, 6 "emitDecoratorMetadata": true,
8 "experimentalDecorators": true, 7 "experimentalDecorators": true,
9 "noImplicitAny": false, 8 "allowSyntheticDefaultImports": true,
10 "noEmitHelpers": true 9 "sourceMap": true,
10 "noEmitHelpers": true,
11 "strictNullChecks": false,
12 "baseUrl": "./src",
13 "paths": [
14 ],
15 "lib": [
16 "dom",
17 "es6"
18 ],
19 "types": [
20 "hammerjs",
21 "jasmine",
22 "node",
23 "protractor",
24 "selenium-webdriver",
25 "source-map",
26 "uglify-js",
27 "webpack"
28 ]
11 }, 29 },
30 "exclude": [
31 "node_modules",
32 "dist"
33 ],
12 "awesomeTypescriptLoaderOptions": { 34 "awesomeTypescriptLoaderOptions": {
13 "forkChecker": true 35 "forkChecker": true,
36 "useWebpackText": true
14 }, 37 },
15 "compileOnSave": false, 38 "compileOnSave": false,
16 "buildOnSave": false, 39 "buildOnSave": false,
17 "filesGlob": [ 40 "atom": { "rewriteTsconfig": false }
18 "**/*.ts",
19 "!node_modules/**"
20 ],
21 "exclude": [
22 "node_modules",
23 "typings/main",
24 "typings/main.d.ts"
25 ]
26} 41}
diff --git a/client/typings.json b/client/typings.json
deleted file mode 100644
index 9a8891f25..000000000
--- a/client/typings.json
+++ /dev/null
@@ -1,7 +0,0 @@
1{
2 "globalDependencies": {
3 "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
4 "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
5 "node": "registry:dt/node#4.0.0+20160509154515"
6 }
7}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-14 13:27:08 +0000