From 6cca7360eb9027e1544f7513df7da4684061ef7e Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 7 Jun 2018 16:50:33 +0200 Subject: [PATCH] Reduce bundle sizes --- .github/CONTRIBUTING.md | 1 + .../src/assets/player/peertube-link-button.ts | 1 + .../assets/player/peertube-videojs-plugin.ts | 17 +++++++++---- .../assets/player/peertube-videojs-typings.ts | 2 +- .../src/assets/player/resolution-menu-item.ts | 1 + .../src/assets/player/settings-menu-item.ts | 1 + client/src/assets/player/utils.ts | 25 +++++++++++++++++++ client/tsconfig.json | 3 ++- client/webpack/webpack.video-embed.js | 7 +++++- package.json | 3 ++- scripts/build/client.sh | 2 +- scripts/client-report.sh | 6 +++-- scripts/dev/client.sh | 2 +- scripts/dev/index.sh | 2 +- scripts/e2e.sh | 2 +- scripts/watch/server.sh | 2 +- yarn.lock | 2 +- 17 files changed, 62 insertions(+), 17 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index d057cd3f3..56ea110b3 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -133,6 +133,7 @@ with the `root` as username and `test{1,2,3}` for the password. ### Unit tests Create a PostgreSQL user **with the same name as your username** in order to avoid using the *postgres* user. + Then, we can create the databases (if they don't already exist): ``` diff --git a/client/src/assets/player/peertube-link-button.ts b/client/src/assets/player/peertube-link-button.ts index 26f8b9d73..715207bc0 100644 --- a/client/src/assets/player/peertube-link-button.ts +++ b/client/src/assets/player/peertube-link-button.ts @@ -1,3 +1,4 @@ +import * as videojs from 'video.js' import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings' import { buildVideoLink } from './utils' diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index 9babe556a..b54f096b2 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -4,9 +4,16 @@ import { VideoFile } from '../../../../shared/models/videos/video.model' import { renderVideo } from './video-renderer' import './settings-menu-button' import { PeertubePluginOptions, VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings' -import { getAverageBandwidth, getStoredMute, getStoredVolume, saveAverageBandwidth, saveMuteInStore, saveVolumeInStore } from './utils' -import minBy from 'lodash-es/minBy' -import maxBy from 'lodash-es/maxBy' +import { + getAverageBandwidth, + getStoredMute, + getStoredVolume, + saveAverageBandwidth, + saveMuteInStore, + saveVolumeInStore, + videoFileMaxByResolution, + videoFileMinByResolution +} from './utils' import * as CacheChunkStore from 'cache-chunk-store' import { PeertubeChunkStore } from './peertube-chunk-store' @@ -339,9 +346,9 @@ class PeerTubePlugin extends Plugin { }) // If the download speed is too bad, return the lowest resolution we have - if (filteredFiles.length === 0) return minBy(this.videoFiles, 'resolution.id') + if (filteredFiles.length === 0) return videoFileMinByResolution(this.videoFiles) - return maxBy(filteredFiles, 'resolution.id') + return videoFileMaxByResolution(filteredFiles) } private getAndSaveActualDownloadSpeed () { diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts index abdf333e1..50d6039ea 100644 --- a/client/src/assets/player/peertube-videojs-typings.ts +++ b/client/src/assets/player/peertube-videojs-typings.ts @@ -2,7 +2,7 @@ import * as videojs from 'video.js' import { VideoFile } from '../../../../shared/models/videos/video.model' import { PeerTubePlugin } from './peertube-videojs-plugin' -declare module 'video.js' { +declare namespace videojs { interface Player { peertube (): PeerTubePlugin } diff --git a/client/src/assets/player/resolution-menu-item.ts b/client/src/assets/player/resolution-menu-item.ts index 4b1ed0642..3fe1d8f0f 100644 --- a/client/src/assets/player/resolution-menu-item.ts +++ b/client/src/assets/player/resolution-menu-item.ts @@ -1,3 +1,4 @@ +import * as videojs from 'video.js' import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings' const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem') diff --git a/client/src/assets/player/settings-menu-item.ts b/client/src/assets/player/settings-menu-item.ts index f595fd459..88985e1ae 100644 --- a/client/src/assets/player/settings-menu-item.ts +++ b/client/src/assets/player/settings-menu-item.ts @@ -1,6 +1,7 @@ // Author: Yanko Shterev // Thanks https://github.com/yshterev/videojs-settings-menu +import * as videojs from 'video.js' import { toTitleCase } from './utils' import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings' diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts index ce7aaea2a..4eaf53720 100644 --- a/client/src/assets/player/utils.ts +++ b/client/src/assets/player/utils.ts @@ -1,4 +1,5 @@ import { is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n' +import { VideoFile } from '../../../../shared/models/videos' function toTitleCase (str: string) { return str.charAt(0).toUpperCase() + str.slice(1) @@ -97,6 +98,28 @@ function copyToClipboard (text: string) { document.body.removeChild(el) } +function videoFileMaxByResolution (files: VideoFile[]) { + let max = files[0] + + for (let i = 1; i < files.length; i++) { + const file = files[i] + if (max.resolution.id < file.resolution.id) max = file + } + + return max +} + +function videoFileMinByResolution (files: VideoFile[]) { + let min = files[0] + + for (let i = 1; i < files.length; i++) { + const file = files[i] + if (min.resolution.id > file.resolution.id) min = file + } + + return min +} + export { toTitleCase, buildVideoLink, @@ -107,6 +130,8 @@ export { saveMuteInStore, buildVideoEmbed, getStoredMute, + videoFileMaxByResolution, + videoFileMinByResolution, copyToClipboard, isMobile, bytes diff --git a/client/tsconfig.json b/client/tsconfig.json index 8ce9c5f96..cb6d39245 100644 --- a/client/tsconfig.json +++ b/client/tsconfig.json @@ -19,7 +19,8 @@ ], "baseUrl": "src", "paths": { - "@app/*": [ "app/*" ] + "@app/*": [ "app/*" ], + "video.js": [ "../node_modules/video.js/dist/alt/video.core.js" ] } } } diff --git a/client/webpack/webpack.video-embed.js b/client/webpack/webpack.video-embed.js index 5a4e35dea..403a65930 100644 --- a/client/webpack/webpack.video-embed.js +++ b/client/webpack/webpack.video-embed.js @@ -1,4 +1,5 @@ const helpers = require('./helpers') +const path = require('path') const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin const HtmlWebpackPlugin = require('html-webpack-plugin') @@ -24,7 +25,11 @@ module.exports = function () { */ extensions: [ '.ts', '.js', '.json', '.scss' ], - modules: [ helpers.root('src'), helpers.root('node_modules') ] + modules: [ helpers.root('src'), helpers.root('node_modules') ], + + alias: { + 'video.js$': path.resolve('node_modules/video.js/dist/alt/video.core.js') + } }, output: { diff --git a/package.json b/package.json index 4daeecb88..b963e67a4 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "nodemon": "nodemon", "ts-node": "ts-node", "tslint": "tslint", + "concurrently": "concurrently", "sasslint": "sass-lint --verbose --no-exit", "sasslint:fix": "sass-lint-auto-fix -c .sass-lint.yml --verbose", "mocha": "mocha", @@ -82,7 +83,7 @@ "bluebird": "^3.5.0", "body-parser": "^1.12.4", "commander": "^2.13.0", - "concurrently": "^3.1.0", + "concurrently": "^3.5.1", "config": "^1.14.0", "cors": "^2.8.1", "create-torrent": "^3.24.5", diff --git a/scripts/build/client.sh b/scripts/build/client.sh index d3da7cfcf..58aca437b 100755 --- a/scripts/build/client.sh +++ b/scripts/build/client.sh @@ -21,7 +21,7 @@ for lang in "$languages"; do rm -r "./dist/$lang/assets" done -NODE_ENV=production npm run webpack -- --config webpack/webpack.video-embed.js --mode production +NODE_ENV=production npm run webpack -- --config webpack/webpack.video-embed.js --mode production --json > "./dist/embed-stats.json" # Copy runtime locales cp -r "./src/locale/target" "./dist/locale" \ No newline at end of file diff --git a/scripts/client-report.sh b/scripts/client-report.sh index 4dd4b418b..df7ccda27 100755 --- a/scripts/client-report.sh +++ b/scripts/client-report.sh @@ -2,6 +2,8 @@ set -eu -cd client +gawk -i inplace 'BEGIN { found=0 } { if (found || $0 ~ /^{/) { found=1; print }}' ./client/dist/embed-stats.json -npm run webpack-bundle-analyzer ./dist/stats.json +npm run concurrently -- -k \ + "cd client && npm run webpack-bundle-analyzer -- -p 8888 ./dist/en_US/stats.json" \ + "cd client && npm run webpack-bundle-analyzer -- -p 8889 ./dist/embed-stats.json" \ No newline at end of file diff --git a/scripts/dev/client.sh b/scripts/dev/client.sh index ecd934888..c630de2c4 100755 --- a/scripts/dev/client.sh +++ b/scripts/dev/client.sh @@ -2,6 +2,6 @@ set -eu -NODE_ENV=test concurrently -k \ +NODE_ENV=test npm run concurrently -- -k \ "npm run watch:client" \ "npm run build:server && NODE_ENV=test npm start" diff --git a/scripts/dev/index.sh b/scripts/dev/index.sh index dcbf62d37..7fc1560ab 100755 --- a/scripts/dev/index.sh +++ b/scripts/dev/index.sh @@ -2,6 +2,6 @@ set -eu -NODE_ENV=test concurrently -k \ +NODE_ENV=test npm run concurrently -- -k \ "npm run watch:client" \ "npm run watch:server" diff --git a/scripts/e2e.sh b/scripts/e2e.sh index 0e70e6e51..1e31cd57c 100755 --- a/scripts/e2e.sh +++ b/scripts/e2e.sh @@ -10,7 +10,7 @@ npm run clean:server:test npm run webpack -- --config webpack/webpack.video-embed.js --mode development ) -concurrently -k -s first \ +npm run concurrently -- -k -s first \ "cd client && npm run ng -- e2e --port 3333" \ "NODE_ENV=test NODE_APP_INSTANCE=1 NODE_CONFIG='{ \"log\": { \"level\": \"warning\" } }' npm start" diff --git a/scripts/watch/server.sh b/scripts/watch/server.sh index badbf3da0..da8bff1da 100755 --- a/scripts/watch/server.sh +++ b/scripts/watch/server.sh @@ -7,6 +7,6 @@ mkdir -p "./client/dist" rm -r "./client/dist/locale" cp -r "./client/src/locale/target" "./client/dist/locale" -NODE_ENV=test concurrently -k \ +NODE_ENV=test npm run concurrently -- -k \ "npm run tsc -- --sourceMap && npm run nodemon -- --delay 2 --watch ./dist dist/server" \ "npm run tsc -- --sourceMap --preserveWatchOutput -w" diff --git a/yarn.lock b/yarn.lock index 3b6c7574e..31b96391c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1572,7 +1572,7 @@ concat-stream@^1.4.1, concat-stream@^1.4.6, concat-stream@^1.4.7, concat-stream@ readable-stream "^2.2.2" typedarray "^0.0.6" -concurrently@^3.1.0: +concurrently@^3.5.1: version "3.5.1" resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-3.5.1.tgz#ee8b60018bbe86b02df13e5249453c6ececd2521" dependencies: