interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Dirty update to Angular RC6

This commit is contained in:
Chocobozzz 2016-09-06 22:40:57 +02:00
parent 088a967fe0
commit ab32b0fc80
41 changed files with 478 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/config/helpers.js
View File

@ -8,10 +8,15 @@ function hasProcessFlag (flag) {
return process.argv.join('').indexOf(flag) > -1
}
function isWebpackDevServer () {
return process.argv[1] && !!(/webpack-dev-server$/.exec(process.argv[1]))
}
function root (args) {
args = Array.prototype.slice.call(arguments, 0)
return path.join.apply(path, [ROOT].concat(args))
}
exports.hasProcessFlag = hasProcessFlag
exports.isWebpackDevServer = isWebpackDevServer
exports.root = root

54
client/config/webpack.common.js
View File

@ -5,7 +5,7 @@ const helpers = require('./helpers')
* Webpack Plugins
*/
var CopyWebpackPlugin = (CopyWebpackPlugin = require('copy-webpack-plugin'), CopyWebpackPlugin.default || CopyWebpackPlugin)
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin
const WebpackNotifierPlugin = require('webpack-notifier')
@ -15,7 +15,8 @@ const WebpackNotifierPlugin = require('webpack-notifier')
*/
const METADATA = {
title: 'PeerTube',
baseUrl: '/'
baseUrl: '/',
isDevServer: helpers.isWebpackDevServer()
}
/*
@ -69,10 +70,7 @@ module.exports = {
root: helpers.root('src'),
// remove other default values
modulesDirectories: [ 'node_modules' ],
packageAlias: 'browser'
modulesDirectories: [ 'node_modules' ]
},
output: {
@ -92,27 +90,15 @@ module.exports = {
*/
preLoaders: [
/*
* Tslint loader support for *.ts files
*
* See: https://github.com/wbuchwalter/tslint-loader
*/
// { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
/*
* Source map loader support for *.js files
* Extracts SourceMaps for source files that as added as sourceMappingURL comment.
*
* See: https://github.com/webpack/source-map-loader
*/
{
test: /\.js$/,
loader: 'source-map-loader',
exclude: [
// these packages have problems with their sourcemaps
helpers.root('node_modules/rxjs'),
helpers.root('node_modules/@angular')
]
test: /\.ts$/,
loader: 'string-replace-loader',
query: {
search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)',
replace: '$1.import($3).then(mod => mod.__esModule ? mod.default : mod)',
flags: 'g'
},
include: [helpers.root('src')]
}
],
@ -134,7 +120,11 @@ module.exports = {
*/
{
test: /\.ts$/,
loader: 'awesome-typescript-loader',
loaders: [
'awesome-typescript-loader',
'angular2-template-loader',
'@angularclass/hmr-loader'
],
exclude: [/\.(spec|e2e)\.ts$/]
},
@ -193,16 +183,6 @@ module.exports = {
*/
new ForkCheckerPlugin(),
/*
* Plugin: OccurenceOrderPlugin
* Description: Varies the distribution of the ids to get the smallest id length
* for often used ids.
*
* See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
* See: https://github.com/webpack/docs/wiki/optimization#minimize
*/
new webpack.optimize.OccurenceOrderPlugin(true),
/*
* Plugin: CommonsChunkPlugin
* Description: Shares common code between the pages.

27
client/config/webpack.dev.js
View File

@ -6,15 +6,18 @@ const commonConfig = require('./webpack.common.js') // the settings that are com
* Webpack Plugins
*/
const DefinePlugin = require('webpack/lib/DefinePlugin')
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin')
/**
* Webpack Constants
*/
const ENV = process.env.ENV = process.env.NODE_ENV = 'development'
const HOST = process.env.HOST || 'localhost'
const PORT = process.env.PORT || 3000
const HMR = helpers.hasProcessFlag('hot')
const METADATA = webpackMerge(commonConfig.metadata, {
host: 'localhost',
port: 3000,
host: HOST,
port: PORT,
ENV: ENV,
HMR: HMR
})
@ -81,7 +84,10 @@ module.exports = webpackMerge(commonConfig, {
*
* See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
*/
chunkFilename: '[id].chunk.js'
chunkFilename: '[id].chunk.js',
library: 'ac_[name]',
libraryTarget: 'var'
},
@ -109,7 +115,9 @@ module.exports = webpackMerge(commonConfig, {
'NODE_ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR
}
})
}),
new NamedModulesPlugin()
],
/**
@ -124,6 +132,17 @@ module.exports = webpackMerge(commonConfig, {
resourcePath: 'src'
},
devServer: {
port: METADATA.port,
host: METADATA.host,
historyApiFallback: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
outputPath: helpers.root('dist')
},
/*
* Include polyfills or mocks for various node stuff
* Description: Node configuration

25
client/config/webpack.prod.js
View File

@ -9,10 +9,12 @@ const commonConfig = require('./webpack.common.js') // the settings that are com
/**
* Webpack Plugins
*/
// const ProvidePlugin = require('webpack/lib/ProvidePlugin')
const DefinePlugin = require('webpack/lib/DefinePlugin')
const DedupePlugin = require('webpack/lib/optimize/DedupePlugin')
const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin')
// const IgnorePlugin = require('webpack/lib/IgnorePlugin')
// const DedupePlugin = require('webpack/lib/optimize/DedupePlugin')
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')
const CompressionPlugin = require('compression-webpack-plugin')
const WebpackMd5Hash = require('webpack-md5-hash')
/**
@ -110,7 +112,7 @@ module.exports = webpackMerge(commonConfig, {
* See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
* See: https://github.com/webpack/docs/wiki/optimization#deduplication
*/
new DedupePlugin(),
// new DedupePlugin(),
/**
* Plugin: DefinePlugin
@ -156,19 +158,16 @@ module.exports = webpackMerge(commonConfig, {
// comments: true, //debug
beautify: false, // prod
mangle: {
screw_ie8: true,
keep_fnames: true
}, // prod
compress: {
screw_ie8: true
}, // prod
mangle: { screw_ie8: true, keep_fnames: true }, // prod
compress: { screw_ie8: true }, // prod
comments: false // prod
}),
new NormalModuleReplacementPlugin(
/angular2-hmr/,
helpers.root('config/modules/angular2-hmr-prod.js')
),
/**
* Plugin: CompressionPlugin
* Description: Prepares compressed versions of assets to serve

45
client/package.json
View File

@ -13,22 +13,29 @@
"url": "git://github.com/Chocobozzz/PeerTube.git"
},
"scripts": {
"postinstall": "typings install",
"test": "standard && tslint -c ./tslint.json src/**/*.ts",
"webpack": "webpack"
},
"license": "GPLv3",
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "^0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"angular-pipes": "^2.0.0",
"awesome-typescript-loader": "^0.17.0",
"@angular/common": "2.0.0-rc.6",
"@angular/compiler": "2.0.0-rc.6",
"@angular/core": "2.0.0-rc.6",
"@angular/forms": "2.0.0-rc.6",
"@angular/http": "2.0.0-rc.6",
"@angular/platform-browser": "2.0.0-rc.6",
"@angular/platform-browser-dynamic": "2.0.0-rc.6",
"@angular/router": "3.0.0-rc.2",
"@angularclass/hmr": "^1.0.1",
"@angularclass/hmr-loader": "^1.0.1",
"@types/core-js": "^0.9.28",
"@types/node": "^6.0.38",
"@types/source-map": "^0.1.26",
"@types/uglify-js": "^2.0.27",
"@types/webpack": "^1.12.29",
"angular-pipes": "^3.0.0",
"angular2-template-loader": "^0.5.0",
"awesome-typescript-loader": "^2.2.1",
"bootstrap-loader": "^1.0.8",
"bootstrap-sass": "^3.3.6",
"compression-webpack-plugin": "^0.3.1",
@ -43,29 +50,29 @@
"ie-shim": "^0.1.0",
"intl": "^1.2.4",
"json-loader": "^0.5.4",
"ng2-bootstrap": "1.0.24",
"ng2-bootstrap": "1.1.1",
"ng2-file-upload": "^1.0.3",
"node-sass": "^3.7.0",
"normalize.css": "^4.1.1",
"raw-loader": "^0.5.1",
"reflect-metadata": "0.1.3",
"resolve-url-loader": "^1.4.3",
"rxjs": "5.0.0-beta.6",
"rxjs": "5.0.0-beta.11",
"sass-loader": "^3.2.0",
"source-map-loader": "^0.1.5",
"string-replace-loader": "^1.0.3",
"style-loader": "^0.13.1",
"ts-helpers": "^1.1.1",
"tslint": "^3.7.4",
"tslint": "3.15.0-dev.0",
"tslint-loader": "^2.1.4",
"typescript": "^1.8.10",
"typings": "^1.0.4",
"typescript": "^2.0.0",
"url-loader": "^0.5.7",
"webpack": "^1.13.1",
"webpack": "^2.1.0-beta.21",
"webpack-md5-hash": "0.0.5",
"webpack-merge": "^0.13.0",
"webpack-merge": "^0.14.1",
"webpack-notifier": "^1.3.0",
"webtorrent": "^0.96.0",
"zone.js": "0.6.12"
"zone.js": "0.6.17"
},
"devDependencies": {
"codelyzer": "0.0.28",

8
client/src/app/account/account.component.ts
View File

@ -1,15 +1,13 @@
import { Validators } from '@angular/common';
import { } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AccountService } from './account.service';
@Component({
selector: 'my-account',
template: require('./account.component.html'),
providers: [ AccountService ],
directives: [ REACTIVE_FORM_DIRECTIVES ]
template: require('./account.component.html')
})
export class AccountComponent implements OnInit {

1
client/src/app/account/index.ts
View File

@ -1,2 +1,3 @@
export * from './account.component';
export * from './account.routes';
export * from './account.service';

4
client/src/app/admin/admin.component.ts
View File

@ -1,9 +1,7 @@
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
template: '<router-outlet></router-outlet>',
directives: [ ROUTER_DIRECTIVES ]
template: '<router-outlet></router-outlet>'
})
export class AdminComponent {

4
client/src/app/admin/admin.routes.ts
View File

@ -1,10 +1,10 @@
import { RouterConfig } from '@angular/router';
import { Routes } from '@angular/router';
import { AdminComponent } from './admin.component';
import { FriendsRoutes } from './friends';
import { UsersRoutes } from './users';
export const AdminRoutes: RouterConfig = [
export const AdminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,

14
client/src/app/admin/friends/friend-add/friend-add.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { FormControl, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { validateUrl } from '../../../shared';
@ -8,8 +8,7 @@ import { FriendService } from '../shared';
@Component({
selector: 'my-friend-add',
template: require('./friend-add.component.html'),
styles: [ require('./friend-add.component.scss') ],
directives: [ REACTIVE_FORM_DIRECTIVES ]
styles: [ require('./friend-add.component.scss') ]
})
export class FriendAddComponent implements OnInit {
friendAddForm: FormGroup;
@ -80,12 +79,13 @@ export class FriendAddComponent implements OnInit {
this.friendService.makeFriends(notEmptyUrls).subscribe(
status => {
if (status === 409) {
alert('Already made friends!');
} else {
// TODO: extractdatastatus
// if (status === 409) {
// alert('Already made friends!');
// } else {
alert('Make friends request sent!');
this.router.navigate([ '/admin/friends/list' ]);
}
// }
},
error => alert(error)
);

4
client/src/app/admin/friends/friend-list/friend-list.component.ts
View File

@ -1,13 +1,11 @@
import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { Friend, FriendService } from '../shared';
@Component({
selector: 'my-friend-list',
template: require('./friend-list.component.html'),
styles: [ require('./friend-list.component.scss') ],
directives: [ ROUTER_DIRECTIVES ]
styles: [ require('./friend-list.component.scss') ]
})
export class FriendListComponent implements OnInit {
friends: Friend[];

7
client/src/app/admin/friends/friends.component.ts
View File

@ -1,12 +1,7 @@
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { FriendService } from './shared';
@Component({
template: '<router-outlet></router-outlet>',
directives: [ ROUTER_DIRECTIVES ],
providers: [ FriendService ]
template: '<router-outlet></router-outlet>'
})
export class FriendsComponent {

4
client/src/app/admin/friends/friends.routes.ts
View File

@ -1,10 +1,10 @@
import { RouterConfig } from '@angular/router';
import { Routes } from '@angular/router';
import { FriendsComponent } from './friends.component';
import { FriendAddComponent } from './friend-add';
import { FriendListComponent } from './friend-list';
export const FriendsRoutes: RouterConfig = [
export const FriendsRoutes: Routes = [
{
path: 'friends',
component: FriendsComponent,

1
client/src/app/admin/friends/index.ts
View File

@ -1,4 +1,5 @@
export * from './friend-add';
export * from './friend-list';
export * from './shared';
export * from './friends.component';
export * from './friends.routes';

1
client/src/app/admin/index.ts
View File

@ -1,3 +1,4 @@
export * from './friends';
export * from './users';
export * from './admin.component';
export * from './admin.routes';

4
client/src/app/admin/menu-admin.component.ts
View File

@ -1,9 +1,7 @@
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'my-menu-admin',
template: require('./menu-admin.component.html'),
directives: [ ROUTER_DIRECTIVES ]
template: require('./menu-admin.component.html')
})
export class MenuAdminComponent { }

6
client/src/app/admin/users/user-add/user-add.component.ts
View File

@ -1,14 +1,12 @@
import { Validators } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { UserService } from '../shared';
@Component({
selector: 'my-user-add',
template: require('./user-add.component.html'),
directives: [ REACTIVE_FORM_DIRECTIVES ]
template: require('./user-add.component.html')
})
export class UserAddComponent implements OnInit {
userAddForm: FormGroup;

4
client/src/app/admin/users/user-list/user-list.component.ts
View File

@ -1,5 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { User } from '../../../shared';
import { UserService } from '../shared';
@ -7,8 +6,7 @@ import { UserService } from '../shared';
@Component({
selector: 'my-user-list',
template: require('./user-list.component.html'),
styles: [ require('./user-list.component.scss') ],
directives: [ ROUTER_DIRECTIVES ]
styles: [ require('./user-list.component.scss') ]
})
export class UserListComponent implements OnInit {
totalUsers: number;

7
client/src/app/admin/users/users.component.ts
View File

@ -1,12 +1,7 @@
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { UserService } from './shared';
@Component({
template: '<router-outlet></router-outlet>',
directives: [ ROUTER_DIRECTIVES ],
providers: [ UserService ]
template: '<router-outlet></router-outlet>'
})
export class UsersComponent {

4
client/src/app/admin/users/users.routes.ts
View File

@ -1,10 +1,10 @@
import { RouterConfig } from '@angular/router';
import { Routes } from '@angular/router';
import { UsersComponent } from './users.component';
import { UserAddComponent } from './user-add';
import { UserListComponent } from './user-list';
export const UsersRoutes: RouterConfig = [
export const UsersRoutes: Routes = [
{
path: 'users',
component: UsersComponent,

11
client/src/app/app.component.ts
View File

@ -1,17 +1,10 @@
import { Component } from '@angular/core';
import { Router, ROUTER_DIRECTIVES } from '@angular/router';
import { MenuAdminComponent } from './admin';
import { MenuComponent } from './menu.component';
import { RestExtractor, RestService, SearchComponent, SearchService } from './shared';
import { VideoService } from './videos';
import { Router } from '@angular/router';
@Component({
selector: 'my-app',
template: require('./app.component.html'),
styles: [ require('./app.component.scss') ],
directives: [ MenuAdminComponent, MenuComponent, ROUTER_DIRECTIVES, SearchComponent ],
providers: [ RestExtractor, RestService, VideoService, SearchService ]
styles: [ require('./app.component.scss') ]
})
export class AppComponent {

130
client/src/app/app.module.ts Normal file
View File

@ -0,0 +1,130 @@
import { NgModule, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { RouterModule } from '@angular/router';
import { removeNgStyles, createNewHosts } from '@angularclass/hmr';
import { FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';
import { ProgressbarModule } from 'ng2-bootstrap/components/progressbar';
import { PaginationModule } from 'ng2-bootstrap/components/pagination';
import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
/*
* Platform and Environment providers/directives/pipes
*/
import { ENV_PROVIDERS } from './environment';
import { routes } from './app.routes';
// App is our top level component
import { AppComponent } from './app.component';
import { AppState } from './app.service';
import { AccountComponent, AccountService } from './account';
import { LoginComponent } from './login';
import {
LoaderComponent,
VideosComponent,
VideoAddComponent,
VideoListComponent,
VideoMiniatureComponent,
VideoSortComponent,
VideoWatchComponent,
VideoService
} from './videos';
import {
FriendsComponent,
FriendAddComponent,
FriendListComponent,
FriendService,
UsersComponent,
UserAddComponent,
UserListComponent,
UserService,
AdminComponent,
MenuAdminComponent
} from './admin';
import { MenuComponent } from './menu.component';
import { AuthService, AuthHttp, RestExtractor, RestService, SearchComponent, SearchService } from './shared';
// Application wide providers
const APP_PROVIDERS = [
AppState,
{
provide: AuthHttp,
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, authService: AuthService) => {
return new AuthHttp(backend, defaultOptions, authService);
},
deps: [ XHRBackend, RequestOptions, AuthService ]
},
AuthService,
RestExtractor,
RestExtractor, RestService, VideoService, SearchService, FriendService, UserService, AccountService
];
/**
* `AppModule` is the main entry point into Angular2's bootstraping process
*/
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
BytesPipe,
FileSelectDirective,
AccountComponent,
LoginComponent,
LoaderComponent,
VideosComponent,
VideoAddComponent,
VideoListComponent,
VideoSortComponent,
VideoMiniatureComponent,
VideoWatchComponent,
FriendsComponent,
FriendAddComponent,
FriendListComponent,
UsersComponent,
UserAddComponent,
UserListComponent,
AdminComponent,
MenuAdminComponent,
MenuComponent,
SearchComponent
],
imports: [ // import Angular's modules
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
RouterModule.forRoot(routes),
ProgressbarModule,
PaginationModule
],
providers: [ // expose our Services and Providers into Angular's dependency injection
ENV_PROVIDERS,
APP_PROVIDERS
]
})
export class AppModule {
constructor(public appRef: ApplicationRef, public appState: AppState) {}
hmrOnInit(store) {
if (!store || !store.state) return;
console.log('HMR store', store);
this.appState._state = store.state;
this.appRef.tick();
delete store.state;
}
hmrOnDestroy(store) {
const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
// recreate elements
const state = this.appState._state;
store.state = state;
store.disposeOldHosts = createNewHosts(cmpLocation);
// remove styles
removeNgStyles();
}
hmrAfterDestroy(store) {
// display new elements
store.disposeOldHosts();
delete store.disposeOldHosts;
}
}

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

@ -1,11 +1,11 @@
import { RouterConfig } from '@angular/router';
import { Routes } from '@angular/router';
import { AccountRoutes } from './account';
import { LoginRoutes } from './login';
import { AdminRoutes } from './admin';
import { VideosRoutes } from './videos';
export const routes: RouterConfig = [
export const routes: Routes = [
{
path: '',
redirectTo: '/videos/list',

36
client/src/app/app.service.ts Normal file
View File

@ -0,0 +1,36 @@
import { Injectable } from '@angular/core';
@Injectable()
export class AppState {
_state = { };
constructor() { ; }
// already return a clone of the current state
get state() {
return this._state = this._clone(this._state);
}
// never allow mutation
set state(value) {
throw new Error('do not mutate the `.state` directly');
}
get(prop?: any) {
// use our state getter for the clone
const state = this.state;
return state.hasOwnProperty(prop) ? state[prop] : state;
}
set(prop: string, value: any) {
// internally mutate our state
return this._state[prop] = value;
}
_clone(object) {
// simple object clone
return JSON.parse(JSON.stringify( object ));
}
}

50
client/src/app/environment.ts Normal file
View File

@ -0,0 +1,50 @@
// Angular 2
// rc2 workaround
import { enableDebugTools, disableDebugTools } from '@angular/platform-browser';
import { enableProdMode, ApplicationRef } from '@angular/core';
// Environment Providers
let PROVIDERS = [
// common env directives
];
// Angular debug tools in the dev console
// https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md
let _decorateModuleRef = function identity(value) { return value; };
if ('production' === ENV) {
// Production
disableDebugTools();
enableProdMode();
PROVIDERS = [
...PROVIDERS,
// custom providers in production
];
} else {
_decorateModuleRef = (modRef: any) => {
const appRef = modRef.injector.get(ApplicationRef);
const cmpRef = appRef.components[0];
let _ng = (<any>window).ng;
enableDebugTools(cmpRef);
(<any>window).ng.probe = _ng.probe;
(<any>window).ng.coreTokens = _ng.coreTokens;
return modRef;
};
// Development
PROVIDERS = [
...PROVIDERS,
// custom providers in development
];
}
export const decorateModuleRef = _decorateModuleRef;
export const ENV_PROVIDERS = [
...PROVIDERS
];

1
client/src/app/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './app.module';

6
client/src/app/login/login.component.ts
View File

@ -1,14 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { Validators } from '@angular/common';
import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../shared';
@Component({
selector: 'my-login',
template: require('./login.component.html'),
directives: [ REACTIVE_FORM_DIRECTIVES ]
template: require('./login.component.html')
})
export class LoginComponent implements OnInit {

5
client/src/app/menu.component.ts
View File

@ -1,12 +1,11 @@
import { Component, OnInit } from '@angular/core';
import { Router, ROUTER_DIRECTIVES } from '@angular/router';
import { Router } from '@angular/router';
import { AuthService, AuthStatus } from './shared';
@Component({
selector: 'my-menu',
template: require('./menu.component.html'),
directives: [ ROUTER_DIRECTIVES ]
template: require('./menu.component.html')
})
export class MenuComponent implements OnInit {
isLoggedIn: boolean;

7
client/src/app/shared/search/search.component.ts
View File

@ -1,16 +1,13 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/components/dropdown';
import { Search } from './search.model';
import { SearchField } from './search-field.type';
import { SearchService } from './search.service';
@Component({
selector: 'my-search',
template: require('./search.component.html'),
directives: [ DROPDOWN_DIRECTIVES ]
selector: 'my-search',
template: require('./search.component.html')
})
export class SearchComponent implements OnInit {

11
client/src/app/videos/video-add/video-add.component.ts
View File

@ -1,20 +1,15 @@
import { Validators } from '@angular/common';
import { Component, ElementRef, OnInit } from '@angular/core';
import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
import { FileSelectDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload';
import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
import { AuthService } from '../../shared';
@Component({
selector: 'my-videos-add',
styles: [ require('./video-add.component.scss') ],
template: require('./video-add.component.html'),
directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES, REACTIVE_FORM_DIRECTIVES ],
pipes: [ BytesPipe ]
template: require('./video-add.component.html')
})
export class VideoAddComponent implements OnInit {

12
client/src/app/videos/video-list/video-list.component.ts
View File

@ -1,27 +1,19 @@
import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { ActivatedRoute, Router, ROUTER_DIRECTIVES } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination';
import {
LoaderComponent,
SortField,
Video,
VideoService
} from '../shared';
import { AuthService, AuthUser, RestPagination, Search, SearchField } from '../../shared';
import { VideoMiniatureComponent } from './video-miniature.component';
import { VideoSortComponent } from './video-sort.component';
import { SearchService } from '../../shared';
@Component({
selector: 'my-videos-list',
styles: [ require('./video-list.component.scss') ],
pipes: [ AsyncPipe ],
template: require('./video-list.component.html'),
directives: [ LoaderComponent, PAGINATION_DIRECTIVES, ROUTER_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ]
template: require('./video-list.component.html')
})
export class VideoListComponent implements OnInit, OnDestroy {

6
client/src/app/videos/video-list/video-miniature.component.ts
View File

@ -1,6 +1,4 @@
import { DatePipe } from '@angular/common';
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { SortField, Video, VideoService } from '../shared';
import { User } from '../../shared';
@ -8,9 +6,7 @@ import { User } from '../../shared';
@Component({
selector: 'my-video-miniature',
styles: [ require('./video-miniature.component.scss') ],
template: require('./video-miniature.component.html'),
directives: [ ROUTER_DIRECTIVES ],
pipes: [ DatePipe ]
template: require('./video-miniature.component.html')
})
export class VideoMiniatureComponent {

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

@ -1,18 +1,13 @@
import { Component, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
import { LoaderComponent, Video, VideoService } from '../shared';
import { Video, VideoService } from '../shared';
import { WebTorrentService } from './webtorrent.service';
@Component({
selector: 'my-video-watch',
template: require('./video-watch.component.html'),
styles: [ require('./video-watch.component.scss') ],
providers: [ WebTorrentService ],
directives: [ LoaderComponent ],
pipes: [ BytesPipe ]
styles: [ require('./video-watch.component.scss') ]
})
export class VideoWatchComponent implements OnInit, OnDestroy {

4
client/src/app/videos/videos.component.ts
View File

@ -1,9 +1,7 @@
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
template: '<router-outlet></router-outlet>',
directives: [ ROUTER_DIRECTIVES ]
template: '<router-outlet></router-outlet>'
})
export class VideosComponent {

4
client/src/app/videos/videos.routes.ts
View File

@ -1,11 +1,11 @@
import { RouterConfig } from '@angular/router';
import { Routes } from '@angular/router';
import { VideoAddComponent } from './video-add';
import { VideoListComponent } from './video-list';
import { VideosComponent } from './videos.component';
import { VideoWatchComponent } from './video-watch';
export const VideosRoutes: RouterConfig = [
export const VideosRoutes: Routes = [
{
path: 'videos',
component: VideosComponent,

118
client/src/custom-typings.d.ts vendored
View File

@ -1,15 +1,27 @@
/*
* Custom Type Definitions
* When including 3rd party modules you also need to include the type definition for the module
* if they don't provide one within the module. You can try to install it with typings
* if they don't provide one within the module. You can try to install it with @types
typings install node --save
npm install @types/node
npm install @types/lodash
* If you can't find the type definition in the registry we can make an ambient definition in
* If you can't find the type definition in the registry we can make an ambient/global definition in
* this file for now. For example
declare module "my-module" {
export function doesSomething(value: string): string;
declare module 'my-module' {
export function doesSomething(value: string): string;
}
* If you are using a CommonJS module that is using module.exports then you will have to write your
* types using export = yourObjectOrFunction with a namespace above it
* notice how we have to create a namespace that is equal to the function we're
* assigning the export to
declare module 'jwt-decode' {
function jwtDecode(token: string): any;
namespace jwtDecode {}
export = jwtDecode;
}
*
@ -17,33 +29,65 @@ declare module "my-module" {
*
declare var assert: any;
declare var _: any;
declare var $: any;
*
* If you're importing a module that uses Node.js modules which are CommonJS you need to import as
* in the files such as main.browser.ts or any file within app/
*
import * as _ from 'lodash'
* You can include your type definitions in this file until you create one for the typings registry
* see https://github.com/typings/registry
* You can include your type definitions in this file until you create one for the @types
*
*/
// support NodeJS modules without type definitions
declare module '*';
// Extra variables that live on Global that will be replaced by webpack DefinePlugin
declare var ENV: string;
declare var HMR: boolean;
declare var System: SystemJS;
interface SystemJS {
import: (path?: string) => Promise<any>;
}
interface GlobalEnvironment {
ENV;
HMR;
SystemJS: SystemJS;
System: SystemJS;
}
interface Es6PromiseLoader {
(id: string): (exportName?: string) => Promise<any>;
}
type FactoryEs6PromiseLoader = () => Es6PromiseLoader;
type FactoryPromise = () => Promise<any>;
type AsyncRoutes = {
[component: string]: Es6PromiseLoader |
Function |
FactoryEs6PromiseLoader |
FactoryPromise
};
type IdleCallbacks = Es6PromiseLoader |
Function |
FactoryEs6PromiseLoader |
FactoryPromise ;
interface WebpackModule {
hot: {
data?: any,
idle: any,
accept(dependencies?: string | string[], callback?: (updatedDependencies?: any) => void): void;
decline(dependencies?: string | string[]): void;
decline(deps?: any | string | string[]): void;
dispose(callback?: (data?: any) => void): void;
addDisposeHandler(callback?: (data?: any) => void): void;
removeDisposeHandler(callback?: (data?: any) => void): void;
@ -54,66 +98,26 @@ interface WebpackModule {
};
}
interface WebpackRequire {
context(file: string, flag?: boolean, exp?: RegExp): any;
(id: string): any;
(paths: string[], callback: (...modules: any[]) => void): void;
ensure(ids: string[], callback: (req: WebpackRequire) => void, chunkName?: string): void;
context(directory: string, useSubDirectories?: boolean, regExp?: RegExp): WebpackContext;
}
interface WebpackContext extends WebpackRequire {
keys(): string[];
}
interface ErrorStackTraceLimit {
stackTraceLimit: number;
}
// Extend typings
interface NodeRequire extends WebpackRequire {}
interface ErrorConstructor extends ErrorStackTraceLimit {}
interface NodeRequireFunction extends Es6PromiseLoader {}
interface NodeModule extends WebpackModule {}
interface Global extends GlobalEnvironment {}
declare namespace Reflect {
function decorate(decorators: ClassDecorator[], target: Function): Function;
function decorate(
decorators: (PropertyDecorator | MethodDecorator)[],
target: Object,
targetKey: string | symbol,
descriptor?: PropertyDescriptor): PropertyDescriptor;
function metadata(metadataKey: any, metadataValue: any): {
(target: Function): void;
(target: Object, propertyKey: string | symbol): void;
};
function defineMetadata(metadataKey: any, metadataValue: any, target: Object): void;
function defineMetadata(
metadataKey: any,
metadataValue: any,
target: Object,
targetKey: string | symbol): void;
function hasMetadata(metadataKey: any, target: Object): boolean;
function hasMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
function hasOwnMetadata(metadataKey: any, target: Object): boolean;
function hasOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
function getMetadata(metadataKey: any, target: Object): any;
function getMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
function getOwnMetadata(metadataKey: any, target: Object): any;
function getOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
function getMetadataKeys(target: Object): any[];
function getMetadataKeys(target: Object, targetKey: string | symbol): any[];
function getOwnMetadataKeys(target: Object): any[];
function getOwnMetadataKeys(target: Object, targetKey: string | symbol): any[];
function deleteMetadata(metadataKey: any, target: Object): boolean;
function deleteMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
}
// We need this here since there is a problem with Zone.js typings
interface Thenable<T> {
then<U>(
onFulfilled?: (value: T) => U | Thenable<U>,
onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
then<U>(
onFulfilled?: (value: T) => U | Thenable<U>,
onRejected?: (error: any) => void): Thenable<U>;
catch<U>(onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
}

49
client/src/main.ts
View File

@ -1,35 +1,20 @@
import { enableProdMode, provide } from '@angular/core';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import {
HTTP_PROVIDERS,
RequestOptions,
XHRBackend
} from '@angular/http';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { provideRouter } from '@angular/router';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { decorateModuleRef } from './app/environment';
import { bootloader } from '@angularclass/hmr';
/*
* App Module
* our top level module that holds all of our components
*/
import { AppModule } from './app';
import { routes } from './app/app.routes';
import { AuthHttp, AuthService, RestExtractor } from './app/shared';
import { AppComponent } from './app/app.component';
if (process.env.ENV === 'production') {
enableProdMode();
/*
* Bootstrap our Angular app with a top level NgModule
*/
export function main(): Promise<any> {
return platformBrowserDynamic()
.bootstrapModule(AppModule)
.then(decorateModuleRef)
.catch(err => console.error(err));
}
bootstrap(AppComponent, [
HTTP_PROVIDERS,
provide(AuthHttp, {
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, authService: AuthService) => {
return new AuthHttp(backend, defaultOptions, authService);
},
deps: [ XHRBackend, RequestOptions, AuthService ]
}),
AuthService,
RestExtractor,
provideRouter(routes),
disableDeprecatedForms(),
provideForms()
]);
bootloader(main);

23
client/src/polyfills.ts
View File

@ -6,9 +6,28 @@ require('intl/locale-data/jsonp/en.js');
import 'ie-shim'; // Internet Explorer
// Prefer CoreJS over the polyfills above
import 'core-js/es6';
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';
// see issue https://github.com/AngularClass/angular2-webpack-starter/issues/709
// import 'core-js/es6/promise';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');
import 'zone.js/dist/zone';
// Typescript emit helpers polyfill
import 'ts-helpers';

3
client/src/vendor.ts
View File

@ -12,10 +12,13 @@ import '@angular/forms';
import '@angular/http';
import '@angular/router';
import '@angularclass/hmr';
// RxJS
import 'rxjs/Observable';
import 'rxjs/Subject';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

41
client/tsconfig.json
View File

@ -3,24 +3,39 @@
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": false,
"noEmitHelpers": true
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"noEmitHelpers": true,
"strictNullChecks": false,
"baseUrl": "./src",
"paths": [
],
"lib": [
"dom",
"es6"
],
"types": [
"hammerjs",
"jasmine",
"node",
"protractor",
"selenium-webdriver",
"source-map",
"uglify-js",
"webpack"
]
},
"exclude": [
"node_modules",
"dist"
],
"awesomeTypescriptLoaderOptions": {
"forkChecker": true
"forkChecker": true,
"useWebpackText": true
},
"compileOnSave": false,
"buildOnSave": false,
"filesGlob": [
"**/*.ts",
"!node_modules/**"
],
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
"atom": { "rewriteTsconfig": false }
}

7
client/typings.json
View File

@ -1,7 +0,0 @@
{
"globalDependencies": {
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
"node": "registry:dt/node#4.0.0+20160509154515"
}
}