perf(player): use private class fields and methods

Author: mihar-22

packages/react/mangle.json

@@ -49,6 +49,7 @@
     "rollup": "^4.0.0",
     "rollup-plugin-dts": "^6.0.0",
     "rollup-plugin-esbuild": "^6.1.0",
+    "tslib": "^2.6.0",
     "type-fest": "^3.8.0",
     "typescript": "^5.3.0",
     "vidstack": "workspace:*",

packages/react/package.json

@@ -3,9 +3,8 @@ import { fileURLToPath } from 'node:url';
 
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import chokidar from 'chokidar';
-import { build, transform as esbuildTransform } from 'esbuild';
+import { transform as esbuildTransform } from 'esbuild';
 import fsExtra from 'fs-extra';
-import { globbySync } from 'globby';
 import { defineConfig } from 'rollup';
 import dts from 'rollup-plugin-dts';
 import esbuildPlugin from 'rollup-plugin-esbuild';
@@ -15,9 +14,6 @@ import { copyPkgInfo } from '../../.scripts/copy-pkg-info.js';
 const MODE_WATCH = process.argv.includes('-w'),
   MODE_TYPES = process.argv.includes('--config-types');
 
-/** @type {Record<string, string | false>} */
-const MANGLE_CACHE = !MODE_TYPES ? await buildMangleCache() : {};
-
 const DIRNAME = path.dirname(fileURLToPath(import.meta.url)),
   ROOT_DIR = path.resolve(DIRNAME, '.'),
   DIST_NPM_DIR = path.resolve(ROOT_DIR, 'dist-npm'),
@@ -133,6 +129,11 @@ function defineTypesBundle() {
 function defineNPMBundle({ dev }) {
   let alias = dev ? 'dev' : 'prod';
 
+  const target = 'es2022',
+    supported = {
+      'class-static-blocks': false,
+    };
+
   let input = {
     vidstack: 'src/index.ts',
     'player/vidstack-remotion': 'src/providers/remotion/index.ts',
@@ -195,11 +196,9 @@ function defineNPMBundle({ dev }) {
       }),
       esbuildPlugin({
         tsconfig: 'tsconfig.build.json',
-        target: 'es2021',
+        target,
+        supported,
         platform: 'browser',
-        mangleProps: !dev ? /^_/ : undefined,
-        mangleCache: !dev ? MANGLE_CACHE : undefined,
-        reserveProps: !dev ? /^__/ : undefined,
         define: {
           __DEV__: dev ? 'true' : 'false',
         },
@@ -209,7 +208,8 @@ function defineNPMBundle({ dev }) {
         transform(code, id) {
           if (/node_modules.*?\.js/.test(id)) {
             return esbuildTransform(code, {
-              target: 'es2021',
+              target,
+              supported,
               platform: 'browser',
             }).then((t) => t.code);
           }
@@ -283,41 +283,3 @@ async function buildDefaultTheme() {
 
   await fsExtra.writeFile(`${themeDir}/theme.css`, defaultStyles);
 }
-
-export async function buildMangleCache() {
-  let mangleCache = JSON.parse(await fsExtra.readFile('mangle.json', 'utf-8'));
-
-  const result = await build({
-    entryPoints: globbySync('src/**', {
-      ignoreFiles: ['*.test'],
-    }),
-    target: 'esnext',
-    bundle: true,
-    minify: false,
-    mangleProps: /^_/,
-    reserveProps: /^__/,
-    mangleCache,
-    write: false,
-    outdir: 'dist-esbuild',
-    plugins: [
-      {
-        name: 'externalize',
-        setup(build) {
-          let filter = /^[^.\/]|^\.[^.\/]|^\.\.[^\/]/;
-          build.onResolve({ filter }, (args) =>
-            args.path === 'vidstack' ? undefined : { path: args.path, external: true },
-          );
-        },
-      },
-    ],
-  });
-
-  mangleCache = {
-    ...mangleCache,
-    ...result.mangleCache,
-  };
-
-  await fsExtra.writeFile('mangle.json', JSON.stringify(mangleCache, null, 2) + '\n');
-
-  return mangleCache;
-}

packages/react/rollup.config.js

@@ -24,23 +24,21 @@ export function useVideoQualityOptions({
 
   return React.useMemo(() => {
     const sortedQualities = sortVideoQualities($qualities, sort === 'descending'),
-      options = sortedQualities.map<VideoQualityOption>((_quality) => {
+      options = sortedQualities.map<VideoQualityOption>((q) => {
         return {
-          quality: _quality,
-          label: _quality.height + 'p',
-          value: getQualityValue(_quality),
+          quality: q,
+          label: q.height + 'p',
+          value: getQualityValue(q),
           bitrateText:
-            _quality.bitrate && _quality.bitrate > 0
-              ? `${(_quality.bitrate / 1000000).toFixed(2)} Mbps`
-              : null,
+            q.bitrate && q.bitrate > 0 ? `${(q.bitrate / 1000000).toFixed(2)} Mbps` : null,
           get selected() {
-            return _quality === quality();
+            return q === quality();
           },
           get autoSelected() {
             return autoQuality();
           },
           select(trigger) {
-            const index = qualities().indexOf(_quality);
+            const index = qualities().indexOf(q);
             if (index >= 0) media.remote.changeQuality(index, trigger);
           },
         };

packages/react/src/hooks/options/use-video-quality-options.ts

@@ -3,53 +3,53 @@ import { animationFrameThrottle, createDisposalBin } from 'maverick.js/std';
 import type { RemotionSrc } from './types';
 
 export class RemotionLayoutEngine {
-  protected _src: RemotionSrc | null = null;
-  protected _viewport: HTMLElement | null = null;
-  protected _canvas: HTMLElement | null = null;
-  protected _container: HTMLElement | null = null;
-  protected _disposal = createDisposalBin();
+  #src: RemotionSrc | null = null;
+  #viewport: HTMLElement | null = null;
+  #canvas: HTMLElement | null = null;
+  #container: HTMLElement | null = null;
+  #disposal = createDisposalBin();
 
   constructor() {}
 
   setSrc(src: RemotionSrc | null) {
-    this._src = src;
-    this.setContainer(this._container);
+    this.#src = src;
+    this.setContainer(this.#container);
   }
 
   setContainer(container: HTMLElement | null) {
     if (__SERVER__) return;
 
-    this._disposal.empty();
+    this.#disposal.empty();
 
-    this._container = container;
-    this._canvas = container?.parentElement ?? null;
-    this._viewport = this._canvas?.parentElement ?? null;
+    this.#container = container;
+    this.#canvas = container?.parentElement ?? null;
+    this.#viewport = this.#canvas?.parentElement ?? null;
 
-    if (this._src && this._viewport) {
-      const onResize = animationFrameThrottle(this._onResize.bind(this));
+    if (this.#src && this.#viewport) {
+      const onResize = animationFrameThrottle(this.#onResize.bind(this));
 
       onResize();
       const observer = new ResizeObserver(onResize);
-      observer.observe(this._viewport);
+      observer.observe(this.#viewport);
 
-      this._disposal.add(() => observer.disconnect());
+      this.#disposal.add(() => observer.disconnect());
     }
   }
 
   destroy() {
-    this._disposal.empty();
+    this.#disposal.empty();
   }
 
-  protected _onResize(entries?: ResizeObserverEntry[]) {
-    if (!this._viewport || !this._src) return;
+  #onResize(entries?: ResizeObserverEntry[]) {
+    if (!this.#viewport || !this.#src) return;
 
-    const rect = this._getRect(this._viewport, entries?.[0]),
-      scale = this._calcScale(rect),
-      transform = this._calcTransform(rect, scale);
+    const rect = this.#getRect(this.#viewport, entries?.[0]),
+      scale = this.#calcScale(rect),
+      transform = this.#calcTransform(rect, scale);
 
-    Object.assign(this._canvas!.style, {
-      width: this._src.compositionWidth! * scale + 'px',
-      height: this._src.compositionHeight! * scale + 'px',
+    Object.assign(this.#canvas!.style, {
+      width: this.#src.compositionWidth! * scale + 'px',
+      height: this.#src.compositionHeight! * scale + 'px',
       display: 'flex',
       flexDirection: 'column',
       position: 'absolute',
@@ -58,10 +58,10 @@ export class RemotionLayoutEngine {
       overflow: 'hidden',
     });
 
-    Object.assign(this._container!.style, {
+    Object.assign(this.#container!.style, {
       position: 'absolute',
-      width: this._src.compositionWidth + 'px',
-      height: this._src.compositionHeight + 'px',
+      width: this.#src.compositionWidth + 'px',
+      height: this.#src.compositionHeight + 'px',
       display: 'flex',
       transform: `scale(${scale})`,
       marginLeft: transform.x,
@@ -70,7 +70,7 @@ export class RemotionLayoutEngine {
     });
   }
 
-  protected _getRect(el: HTMLElement, entry?: ResizeObserverEntry): LayoutRect {
+  #getRect(el: HTMLElement, entry?: ResizeObserverEntry): LayoutRect {
     const rect = el.getBoundingClientRect();
     if (!entry) return rect;
 
@@ -91,23 +91,23 @@ export class RemotionLayoutEngine {
     };
   }
 
-  protected _calcScale(rect: LayoutRect) {
-    if (!this._src) return 0;
+  #calcScale(rect: LayoutRect) {
+    if (!this.#src) return 0;
 
-    const heightRatio = rect.height / this._src.compositionHeight!,
-      widthRatio = rect.width / this._src.compositionWidth!;
+    const heightRatio = rect.height / this.#src.compositionHeight!,
+      widthRatio = rect.width / this.#src.compositionWidth!;
 
     return Math.min(heightRatio || 0, widthRatio || 0);
   }
 
-  protected _calcTransform(rect: LayoutRect, scale: number) {
-    if (!this._src) return {};
+  #calcTransform(rect: LayoutRect, scale: number) {
+    if (!this.#src) return {};
 
     const correction = 0 - (1 - scale) / 2,
-      x = correction * this._src.compositionWidth!,
-      y = correction * this._src.compositionHeight!,
-      width = this._src.compositionWidth! * scale,
-      height = this._src.compositionHeight! * scale,
+      x = correction * this.#src.compositionWidth!,
+      y = correction * this.#src.compositionHeight!,
+      width = this.#src.compositionWidth! * scale,
+      height = this.#src.compositionHeight! * scale,
       centerX = rect.width / 2 - width / 2,
       centerY = rect.height / 2 - height / 2;