Reduce bundle sizes

diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index d057cd3f345ab9ffd0bbfa318522a39851d45b34..56ea110b3de1f52cec04429f4c2397b4eea792c2 100644 (file)
--- 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 26f8b9d732d7b9d8f0bb58a9eddf1d792a408c54..715207bc07ba419d7b9fe3cb6dafe9084dd8aef6 100644 (file)
--- 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 9babe556aab099634d29a4c586ed4cae75a367ca..b54f096b26770cee9886c8b28e88d0df637f91a6 100644 (file)
--- 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 abdf333e11244f4ec5d44f80dc6db4d4421a26ab..50d6039ea0fee0da0d27c75c6c988d053098a222 100644 (file)
--- 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 4b1ed0642b8cfa8a938c8b4242273412482143e2..3fe1d8f0fdbb5dba58a793d81509f846bf818614 100644 (file)
--- 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 f595fd459459ae2eb6c909c277754017fe45e9b4..88985e1ae5336f32034d74e9bbc2f1149dff3122 100644 (file)
--- 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 ce7aaea2afa45ec8f0d623f50130810c73f4ceb8..4eaf537209022d96770fe6f601a60de8ee79bb3b 100644 (file)
--- 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 8ce9c5f96c1e54a3dc253465ed481c5b78c91b83..cb6d3924541d572b7b3c09a5eded37074d2fb229 100644 (file)
--- 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 5a4e35deac3e1ce5e9599b7e396e9dc7cce07dc9..403a65930b56a13daed5fe964eab5c65a8316fcd 100644 (file)
--- 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 4daeecb889402144129095e04f9f2c4569843d43..b963e67a406ff27291db3cdbbc2e1085b13ac161 100644 (file)
--- 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 d3da7cfcff0461aec96bde7e203d00d100c7292a..58aca437bf352bcf11d80ba41d99bebf094af13e 100755 (executable)
--- 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 4dd4b418b5d43dcc3a43ed7664d8921309844114..df7ccda276feb896ff5db63cae72982137be887a 100755 (executable)
--- 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 ecd934888ae7bde88c54a51d9b53d3569106f784..c630de2c4362e392cd4ed58255be871520c8faf0 100755 (executable)
--- 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 dcbf62d3772be1ce76eda0b5643b2869aef66ac6..7fc1560aba26ef87bd10a74435d041e29a17268e 100755 (executable)
--- 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 0e70e6e51f835ac7cc2f8f794570bc7bd0d6b6cd..1e31cd57cc7321f66b46f3d96e1781eb84c095bf 100755 (executable)
--- 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 badbf3da0dacf9c11a1212c47c3732b11cffe688..da8bff1daef39db431d9187e4d8b1dc60d7f1e6b 100755 (executable)
--- 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 3b6c7574eb52dfdf484c60ec56468586c6aa19ef..31b96391c301020c0bb59f42667a6fdc4ef705b5 100644 (file)
--- 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: