Reduce bundle sizes

.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):
 
 ```

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'
 

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 () {

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
   }

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')

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'
 

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

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" ]
     }
   }
 }

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: {

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",

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"

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"

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"

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"

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"
 

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"

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: