Cleanup polyfills (#3383)

_scripts/_domParser.js

@@ -0,0 +1,5 @@
+const DOMParser = window.DOMParser
+
+export {
+  DOMParser
+}

_scripts/webpack.renderer.config.js

@@ -135,6 +135,11 @@ const config = {
       vue$: 'vue/dist/vue.runtime.esm.js',
 
       'youtubei.js$': 'youtubei.js/web',
+
+      // video.js's mpd-parser uses @xmldom/xmldom so that it can support both node and web browsers
+      // as FreeTube only runs in electron and web browsers we can use the native DOMParser class, instead of the "polyfill"
+      // https://caniuse.com/mdn-api_domparser
+      '@xmldom/xmldom$': path.resolve(__dirname, '_domParser.js')
     },
     extensions: ['.js', '.vue']
   },

_scripts/webpack.web.config.js

@@ -113,11 +113,22 @@ const config = {
   plugins: [
     new webpack.DefinePlugin({
       'process.env.IS_ELECTRON': false,
-      'process.env.IS_ELECTRON_MAIN': false
+      'process.env.IS_ELECTRON_MAIN': false,
+
+      // video.js' vhs-utils supports both atob() in web browsers and Buffer in node
+      // As the FreeTube web build only runs in web browsers, we can override their check for atob() here: https://github.com/videojs/vhs-utils/blob/main/src/decode-b64-to-uint8-array.js#L3
+      // overriding that check means we don't need to include a Buffer polyfill
+      // https://caniuse.com/atob-btoa
+
+      // NOTE FOR THE FUTURE: this override won't work with vite as their define does a find and replace in the code for production builds,
+      // but uses globals in development builds to save build time, so this would replace the actual atob() function with true if used with vite
+      // this works in webpack as webpack does a find and replace in the source code for both development and production builds
+      // https://vitejs.dev/config/shared-options.html#define
+      // https://webpack.js.org/plugins/define-plugin/
+      'window.atob': true
     }),
     new webpack.ProvidePlugin({
-      process: 'process/browser',
-      Buffer: ['buffer', 'Buffer'],
+      process: 'process/browser'
     }),
     new HtmlWebpackPlugin({
       excludeChunks: ['processTaskWorker'],
@@ -133,22 +144,16 @@ const config = {
   ],
   resolve: {
     alias: {
-      vue$: 'vue/dist/vue.runtime.esm.js'
+      vue$: 'vue/dist/vue.runtime.esm.js',
+
+      // video.js's mpd-parser uses @xmldom/xmldom so that it can support both node and web browsers
+      // As FreeTube only runs in electron and web browsers, we can use the native DOMParser class, instead of the "polyfill"
+      // https://caniuse.com/mdn-api_domparser
+      '@xmldom/xmldom$': path.resolve(__dirname, '_domParser.js')
     },
     fallback: {
-      buffer: require.resolve('buffer/'),
-      dns: require.resolve('browserify/lib/_empty.js'),
-      'fs/promises': require.resolve('browserify/lib/_empty.js'),
-      http: require.resolve('stream-http'),
-      https: require.resolve('https-browserify'),
-      net: require.resolve('browserify/lib/_empty.js'),
-      os: require.resolve('os-browserify/browser.js'),
+      'fs/promises': path.resolve(__dirname, '_empty.js'),
       path: require.resolve('path-browserify'),
-      stream: require.resolve('stream-browserify'),
-      timers: require.resolve('timers-browserify'),
-      tls: require.resolve('browserify/lib/_empty.js'),
-      vm: require.resolve('vm-browserify'),
-      zlib: require.resolve('browserify-zlib')
     },
     extensions: ['.js', '.vue']
   },

package.json

@@ -57,12 +57,11 @@
     "@fortawesome/vue-fontawesome": "^2.0.10",
     "@silvermine/videojs-quality-selector": "^1.3.0",
     "autolinker": "^4.0.0",
-    "browserify": "^17.0.0",
-    "browserify-zlib": "^0.2.0",
     "electron-context-menu": "^3.6.1",
     "lodash.debounce": "^4.0.8",
     "marked": "^4.3.0",
     "nedb-promises": "^6.2.1",
+    "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "video.js": "7.21.4",
     "videojs-contrib-quality-levels": "^3.0.0",