diff --git a/client/.bootstraprc b/client/.bootstraprc new file mode 100644 index 000000000..a4d4fe689 --- /dev/null +++ b/client/.bootstraprc @@ -0,0 +1,125 @@ +--- +# Output debugging info +# loglevel: debug + +# Major version of Bootstrap: 3 or 4 +bootstrapVersion: 3 + +# If Bootstrap version 3 is used - turn on/off custom icon font path +useCustomIconFontPath: true + +# Webpack loaders, order matters +styleLoaders: + - style + - css + - sass + +# Extract styles to stand-alone css file +# Different settings for different environments can be used, +# It depends on value of NODE_ENV environment variable +# This param can also be set in webpack config: +# entry: 'bootstrap-loader/extractStyles' +extractStyles: false +# env: +# development: +# extractStyles: false +# production: +# extractStyles: true + +# Customize Bootstrap variables that get imported before the original Bootstrap variables. +# Thus original Bootstrap variables can depend on values from here. All the bootstrap +# variables are configured with !default, and thus, if you define the variable here, then +# that value is used, rather than the default. However, many bootstrap variables are derived +# from other bootstrap variables, and thus, you want to set this up before we load the +# official bootstrap versions. +# For example, _variables.scss contains: +# $input-color: $gray !default; +# This means you can define $input-color before we load _variables.scss +preBootstrapCustomizations: ./src/sass/pre-customizations.scss + +# This gets loaded after bootstrap/variables is loaded and before bootstrap is loaded. +# A good example of this is when you want to override a bootstrap variable to be based +# on the default value of bootstrap. This is pretty specialized case. Thus, you normally +# just override bootrap variables in preBootstrapCustomizations so that derived +# variables will use your definition. +# +# For example, in _variables.scss: +# $input-height: (($font-size-base * $line-height) + ($input-padding-y * 2) + ($border-width * 2)) !default; +# This means that you could define this yourself in preBootstrapCustomizations. Or you can do +# this in bootstrapCustomizations to make the input height 10% bigger than the default calculation. +# Thus you can leverage the default calculations. +# $input-height: $input-height * 1.10; +# bootstrapCustomizations: ./app/styles/bootstrap/customizations.scss + +# Import your custom styles here. You have access to all the bootstrap variables. If you require +# your sass files separately, you will not have access to the bootstrap variables, mixins, clases, etc. +# Usually this endpoint-file contains list of @imports of your application styles. +appStyles: ./src/sass/application.scss + +### Bootstrap styles +styles: + + # Mixins + mixins: true + + # Reset and dependencies + normalize: true + print: true + glyphicons: true + + # Core CSS + scaffolding: true + type: true + code: false + grid: true + tables: true + forms: true + buttons: true + + # Components + component-animations: false + dropdowns: true + button-groups: true + input-groups: true + navs: false + navbar: false + breadcrumbs: false + pagination: true + pager: false + labels: false + badges: false + jumbotron: false + thumbnails: true + alerts: false + progress-bars: true + media: true + list-group: false + panels: false + wells: false + responsive-embed: false + close: false + + # Components w/ JavaScript + modals: false + tooltip: false + popovers: false + carousel: false + + # Utility classes + utilities: true + responsive-utilities: true + +### Bootstrap scripts +scripts: + transition: false + alert: false + button: false + carousel: false + collapse: false + dropdown: false + modal: false + tooltip: false + popover: false + scrollspy: false + tab: false + affix: false diff --git a/client/.gitignore b/client/.gitignore index 81e4a1cf7..b20541002 100644 --- a/client/.gitignore +++ b/client/.gitignore @@ -1,8 +1,2 @@ -typings -app/**/*.js -app/**/*.map -app/**/*.css -stylesheets/index.css -bundles -main.js -main.js.map +dist/ +typings/ diff --git a/client/app/shared/index.ts b/client/app/shared/index.ts deleted file mode 100644 index ad3ee0098..000000000 --- a/client/app/shared/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './search/index'; -export * from './users/index' diff --git a/client/app/videos/index.ts b/client/app/videos/index.ts deleted file mode 100644 index 1c80ac5e5..000000000 --- a/client/app/videos/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './shared/index'; -export * from './video-add/index'; -export * from './video-list/index'; -export * from './video-watch/index'; diff --git a/client/config/helpers.js b/client/config/helpers.js new file mode 100644 index 000000000..24d7dae9f --- /dev/null +++ b/client/config/helpers.js @@ -0,0 +1,17 @@ +const path = require('path') + +const ROOT = path.resolve(__dirname, '..') + +console.log('root directory:', root() + '\n') + +function hasProcessFlag (flag) { + return process.argv.join('').indexOf(flag) > -1 +} + +function root (args) { + args = Array.prototype.slice.call(arguments, 0) + return path.join.apply(path, [ROOT].concat(args)) +} + +exports.hasProcessFlag = hasProcessFlag +exports.root = root diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js new file mode 100644 index 000000000..5f3f44bb1 --- /dev/null +++ b/client/config/webpack.common.js @@ -0,0 +1,261 @@ +const webpack = require('webpack') +const helpers = require('./helpers') + +/* + * Webpack Plugins + */ + +var CopyWebpackPlugin = (CopyWebpackPlugin = require('copy-webpack-plugin'), CopyWebpackPlugin.default || CopyWebpackPlugin) +const HtmlWebpackPlugin = require('html-webpack-plugin') +const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin + +/* + * Webpack Constants + */ +const METADATA = { + title: 'PeerTube', + baseUrl: '/' +} + +/* + * Webpack configuration + * + * See: http://webpack.github.io/docs/configuration.html#cli + */ +module.exports = { + /* + * Static metadata for index.html + * + * See: (custom attribute) + */ + metadata: METADATA, + + /* + * Cache generated modules and chunks to improve performance for multiple incremental builds. + * This is enabled by default in watch mode. + * You can pass false to disable it. + * + * See: http://webpack.github.io/docs/configuration.html#cache + */ + // cache: false, + + /* + * The entry point for the bundle + * Our Angular.js app + * + * See: http://webpack.github.io/docs/configuration.html#entry + */ + entry: { + 'polyfills': './src/polyfills.ts', + 'vendor': './src/vendor.ts', + 'main': './src/main.ts' + }, + + /* + * Options affecting the resolving of modules. + * + * See: http://webpack.github.io/docs/configuration.html#resolve + */ + resolve: { + /* + * An array of extensions that should be used to resolve modules. + * + * See: http://webpack.github.io/docs/configuration.html#resolve-extensions + */ + extensions: [ '', '.ts', '.js', '.scss' ], + + // Make sure root is src + root: helpers.root('src'), + + // remove other default values + modulesDirectories: [ 'node_modules' ] + + }, + + /* + * Options affecting the normal modules. + * + * See: http://webpack.github.io/docs/configuration.html#module + */ + module: { + /* + * An array of applied pre and post loaders. + * + * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders + */ + 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') + ] + } + + ], + + /* + * An array of automatically applied loaders. + * + * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to. + * This means they are not resolved relative to the configuration file. + * + * See: http://webpack.github.io/docs/configuration.html#module-loaders + */ + loaders: [ + + /* + * Typescript loader support for .ts and Angular 2 async routes via .async.ts + * + * See: https://github.com/s-panferov/awesome-typescript-loader + */ + { + test: /\.ts$/, + loader: 'awesome-typescript-loader', + exclude: [/\.(spec|e2e)\.ts$/] + }, + + /* + * Json loader support for *.json files. + * + * See: https://github.com/webpack/json-loader + */ + { + test: /\.json$/, + loader: 'json-loader' + }, + + /* + * Raw loader support for *.css files + * Returns file content as string + * + * See: https://github.com/webpack/raw-loader + */ + { + test: /\.scss$/, + exclude: /node_modules/, + loaders: [ 'raw-loader', 'sass-loader' ] + }, + + { + test: /\.(woff2?|ttf|eot|svg)$/, + loader: 'url?limit=10000&name=assets/fonts/[hash].[ext]' + }, + + /* Raw loader support for *.html + * Returns file content as string + * + * See: https://github.com/webpack/raw-loader + */ + { + test: /\.html$/, + loader: 'raw-loader', + exclude: [ helpers.root('src/index.html') ] + } + + ] + + }, + + /* + * Add additional plugins to the compiler. + * + * See: http://webpack.github.io/docs/configuration.html#plugins + */ + plugins: [ + + /* + * Plugin: ForkCheckerPlugin + * Description: Do type checking in a separate process, so webpack don't need to wait. + * + * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse + */ + 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. + * It identifies common modules and put them into a commons chunk. + * + * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin + * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app + */ + new webpack.optimize.CommonsChunkPlugin({ + name: [ 'polyfills', 'vendor' ].reverse() + }), + + /* + * Plugin: CopyWebpackPlugin + * Description: Copy files and directories in webpack. + * + * Copies project static assets. + * + * See: https://www.npmjs.com/package/copy-webpack-plugin + */ + new CopyWebpackPlugin([{ + from: 'src/assets', + to: 'assets' + }]), + + /* + * Plugin: HtmlWebpackPlugin + * Description: Simplifies creation of HTML files to serve your webpack bundles. + * This is especially useful for webpack bundles that include a hash in the filename + * which changes every compilation. + * + * See: https://github.com/ampedandwired/html-webpack-plugin + */ + new HtmlWebpackPlugin({ + template: 'src/index.html', + chunksSortMode: 'dependency' + }), + + new webpack.ProvidePlugin({ + jQuery: 'jquery', + $: 'jquery', + jquery: 'jquery' + }) + + ], + + /* + * Include polyfills or mocks for various node stuff + * Description: Node configuration + * + * See: https://webpack.github.io/docs/configuration.html#node + */ + node: { + global: 'window', + crypto: 'empty', + module: false, + clearImmediate: false, + setImmediate: false + } + +} diff --git a/client/config/webpack.dev.js b/client/config/webpack.dev.js new file mode 100644 index 000000000..19768d872 --- /dev/null +++ b/client/config/webpack.dev.js @@ -0,0 +1,159 @@ +const helpers = require('./helpers') +const webpackMerge = require('webpack-merge') // used to merge webpack configs +const commonConfig = require('./webpack.common.js') // the settings that are common to prod and dev + +/** + * Webpack Plugins + */ +const DefinePlugin = require('webpack/lib/DefinePlugin') + +/** + * Webpack Constants + */ +const ENV = process.env.ENV = process.env.NODE_ENV = 'development' +const HMR = helpers.hasProcessFlag('hot') +const METADATA = webpackMerge(commonConfig.metadata, { + host: 'localhost', + port: 3000, + ENV: ENV, + HMR: HMR +}) + +/** + * Webpack configuration + * + * See: http://webpack.github.io/docs/configuration.html#cli + */ +module.exports = webpackMerge(commonConfig, { + /** + * Merged metadata from webpack.common.js for index.html + * + * See: (custom attribute) + */ + metadata: METADATA, + + /** + * Switch loaders to debug mode. + * + * See: http://webpack.github.io/docs/configuration.html#debug + */ + debug: true, + + /** + * Developer tool to enhance debugging + * + * See: http://webpack.github.io/docs/configuration.html#devtool + * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps + */ + devtool: 'cheap-module-source-map', + + /** + * Options affecting the output of the compilation. + * + * See: http://webpack.github.io/docs/configuration.html#output + */ + output: { + /** + * The output directory as absolute path (required). + * + * See: http://webpack.github.io/docs/configuration.html#output-path + */ + path: helpers.root('dist'), + + /** + * Specifies the name of each output file on disk. + * IMPORTANT: You must not specify an absolute path here! + * + * See: http://webpack.github.io/docs/configuration.html#output-filename + */ + filename: '[name].bundle.js', + + /** + * The filename of the SourceMaps for the JavaScript files. + * They are inside the output.path directory. + * + * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename + */ + sourceMapFilename: '[name].map', + + /** The filename of non-entry chunks as relative path + * inside the output.path directory. + * + * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename + */ + chunkFilename: '[id].chunk.js', + + publicPath: '/client/' + + }, + + plugins: [ + + /** + * Plugin: DefinePlugin + * Description: Define free variables. + * Useful for having development builds with debug logging or adding global constants. + * + * Environment helpers + * + * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin + */ + // NOTE: when adding more properties, make sure you include them in custom-typings.d.ts + new DefinePlugin({ + 'ENV': JSON.stringify(METADATA.ENV), + 'HMR': METADATA.HMR, + 'process.env': { + 'ENV': JSON.stringify(METADATA.ENV), + 'NODE_ENV': JSON.stringify(METADATA.ENV), + 'HMR': METADATA.HMR + } + }) + ], + + /** + * Static analysis linter for TypeScript advanced options configuration + * Description: An extensible linter for the TypeScript language. + * + * See: https://github.com/wbuchwalter/tslint-loader + */ + tslint: { + emitErrors: false, + failOnHint: false, + resourcePath: 'src' + }, + + /** + * Webpack Development Server configuration + * Description: The webpack-dev-server is a little node.js Express server. + * The server emits information about the compilation state to the client, + * which reacts to those events. + * + * See: https://webpack.github.io/docs/webpack-dev-server.html + */ + 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 + * + * See: https://webpack.github.io/docs/configuration.html#node + */ + node: { + global: 'window', + crypto: 'empty', + process: true, + module: false, + clearImmediate: false, + setImmediate: false + } + +}) diff --git a/client/config/webpack.prod.js b/client/config/webpack.prod.js new file mode 100644 index 000000000..e69de29bb diff --git a/client/images/loading.gif b/client/images/loading.gif deleted file mode 100644 index f2a1bc0c6..000000000 Binary files a/client/images/loading.gif and /dev/null differ diff --git a/client/index.html b/client/index.html deleted file mode 100644 index 6fbcd1fa6..000000000 --- a/client/index.html +++ /dev/null @@ -1,36 +0,0 @@ - -
-`, ``, and ``.
-// $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace
-// $font-family-base: $font-family-sans-serif
-
-// $font-size-base: 14px
-// $font-size-large: ceil(($font-size-base * 1.25)) // ~18px
-// $font-size-small: ceil(($font-size-base * 0.85)) // ~12px
-
-// $font-size-h1: floor(($font-size-base * 2.6)) // ~36px
-// $font-size-h2: floor(($font-size-base * 2.15)) // ~30px
-// $font-size-h3: ceil(($font-size-base * 1.7)) // ~24px
-// $font-size-h4: ceil(($font-size-base * 1.25)) // ~18px
-// $font-size-h5: $font-size-base
-// $font-size-h6: ceil(($font-size-base * 0.85)) // ~12px
-
-//** Unit-less `line-height` for use in components like buttons.
-// $line-height-base: 1.428571429 // 20/14
-//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-// $line-height-computed: floor(($font-size-base * $line-height-base)) // ~20px
-
-//** By default, this inherits from the ``.
-// $headings-font-family: inherit
-// $headings-font-weight: 500
-// $headings-line-height: 1.1
-// $headings-color: inherit
-
-
-//== Iconography
-//
-//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
-
-//** Load fonts from this directory.
-
-// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
-// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
-// $icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/")
-
-//** File name for all font files.
-// $icon-font-name: "glyphicons-halflings-regular"
-//** Element ID within SVG icon file.
-// $icon-font-svg-id: "glyphicons_halflingsregular"
-
-
-//== Components
-//
-//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-
-// $padding-base-vertical: 6px
-// $padding-base-horizontal: 12px
-
-// $padding-large-vertical: 10px
-// $padding-large-horizontal: 16px
-
-// $padding-small-vertical: 5px
-// $padding-small-horizontal: 10px
-
-// $padding-xs-vertical: 1px
-// $padding-xs-horizontal: 5px
-
-// $line-height-large: 1.3333333 // extra decimals for Win 8.1 Chrome
-// $line-height-small: 1.5
-
-// $border-radius-base: 0;
-// $border-radius-large: 0;
-// $border-radius-small: 0;
-
-//** Global color for active items (e.g., navs or dropdowns).
-// $component-active-color: #fff
-//** Global background color for active items (e.g., navs or dropdowns).
-// $component-active-bg: $brand-primary
-
-//** Width of the `border` for generating carets that indicator dropdowns.
-// $caret-width-base: 4px
-//** Carets increase slightly in size for larger components.
-// $caret-width-large: 5px
-
-
-//== Tables
-//
-//## Customizes the `.table` component with basic values, each used across all table variations.
-
-//** Padding for ``s and ` `s.
-// $table-cell-padding: 8px
-//** Padding for cells in `.table-condensed`.
-// $table-condensed-cell-padding: 5px
-
-//** Default background color used for all tables.
-// $table-bg: transparent
-//** Background color used for `.table-striped`.
-// $table-bg-accent: #f9f9f9
-//** Background color used for `.table-hover`.
-// $table-bg-hover: #f5f5f5
-// $table-bg-active: $table-bg-hover
-
-//** Border color for table and cell borders.
-// $table-border-color: #ddd
-
-
-//== Buttons
-//
-//## For each of Bootstrap's buttons, define text, background and border color.
-
-// $btn-font-weight: normal
-
-// $btn-default-color: #333
-// $btn-default-bg: #fff
-// $btn-default-border: #ccc
-
-// $btn-primary-color: #fff
-// $btn-primary-bg: $brand-primary
-// $btn-primary-border: darken($btn-primary-bg, 5%)
-
-// $btn-success-color: #fff
-// $btn-success-bg: $brand-success
-// $btn-success-border: darken($btn-success-bg, 5%)
-
-// $btn-info-color: #fff
-// $btn-info-bg: $brand-info
-// $btn-info-border: darken($btn-info-bg, 5%)
-
-// $btn-warning-color: #fff
-// $btn-warning-bg: $brand-warning
-// $btn-warning-border: darken($btn-warning-bg, 5%)
-
-// $btn-danger-color: #fff
-// $btn-danger-bg: $brand-danger
-// $btn-danger-border: darken($btn-danger-bg, 5%)
-
-// $btn-link-disabled-color: $gray-light
-
-// Allows for customizing button radius independently from global border radius
-// $btn-border-radius-base: $border-radius-base
-// $btn-border-radius-large: $border-radius-large
-// $btn-border-radius-small: $border-radius-small
-
-
-//== Forms
-//
-//##
-
-//** `` background color
-// $input-bg: #fff
-//** `` background color
-// $input-bg-disabled: $gray-lighter
-
-//** Text color for ``s
-// $input-color: $gray
-//** `` border color
-// $input-border: #ccc
-
-// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
-//** Default `.form-control` border radius
-// This has no effect on `