Merge pull request #476 from jellyfin/nvv-vite

.eslintrc.js

@@ -26,8 +26,7 @@ module.exports = {
             files: ['.js', '.ts'],
             globals: {
                 $scope: 'writable',
-                cast: 'readonly',
-                PRODUCTION: 'readonly'
+                cast: 'readonly'
             }
         }
     ],

package.json

@@ -12,14 +12,8 @@
     "devDependencies": {
         "@types/chromecast-caf-receiver": "6.0.10",
         "@types/jest": "29.5.5",
-        "@types/node": "18.17.19",
-        "@types/webpack": "5.28.3",
-        "@types/webpack-dev-server": "4.7.1",
         "@typescript-eslint/eslint-plugin": "6.7.2",
         "@typescript-eslint/parser": "6.7.2",
-        "clean-webpack-plugin": "3.0.0",
-        "cross-env": "7.0.3",
-        "css-loader": "6.8.1",
         "eslint": "8.50.0",
         "eslint-config-prettier": "9.0.0",
         "eslint-import-resolver-typescript": "3.6.1",
@@ -28,24 +22,14 @@
         "eslint-plugin-json": "3.1.0",
         "eslint-plugin-prettier": "5.0.0",
         "eslint-plugin-promise": "6.1.1",
-        "html-loader": "2.1.2",
-        "html-webpack-plugin": "5.5.3",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
         "prettier": "3.0.3",
-        "source-map-loader": "3.0.2",
-        "style-loader": "3.3.3",
         "stylelint": "15.10.3",
         "stylelint-config-standard": "34.0.0",
         "ts-jest": "29.1.1",
-        "ts-loader": "9.4.4",
-        "ts-node": "10.9.1",
         "typescript": "5.2.2",
-        "url-loader": "4.1.1",
-        "webpack": "5.88.2",
-        "webpack-cli": "4.10.0",
-        "webpack-dev-server": "4.15.1",
-        "webpack-merge": "5.9.0"
+        "vite": "4.4.9"
     },
     "homepage": "https://jellyfin.org/",
     "license": "GPL-2.0-or-later",
@@ -54,13 +38,12 @@
         "url": "git+https://github.com/jellyfin/jellyfin-chromecast.git"
     },
     "scripts": {
-        "build": "cross-env TS_NODE_PROJECT=\"tsconfig-webpack.json\" webpack --config webpack.config.ts --mode=production",
+        "start": "vite",
+        "build": "vite build",
+        "test": "jest --silent",
         "lint": "npm run lint:code && npm run lint:css && npm run prettier",
         "lint:code": "eslint --ext .ts,.js,.json .",
-        "lint:css": "stylelint **/*.css",
-        "prettier": "prettier --check .",
-        "start": "cross-env TS_NODE_PROJECT=\"tsconfig-webpack.json\" webpack serve --config webpack.config.ts",
-        "test": "jest --silent",
-        "watch": "cross-env TS_NODE_PROJECT=\"tsconfig-webpack.json\" webpack --config webpack.config.ts --watch"
+        "lint:css": "stylelint src/**/*.css",
+        "prettier": "prettier --check ."
     }
 }

src/components/maincontroller.ts

@@ -904,7 +904,7 @@ controls.assignButton(
 const options = new cast.framework.CastReceiverOptions();
 
 // Global variable set by Webpack
-if (!PRODUCTION) {
+if (!import.meta.env.PROD) {
     window.castReceiverContext.setLoggerLevel(cast.framework.LoggerLevel.DEBUG);
     // Don't time out on me :(
     // This is only normally allowed for non media apps, but in this case

src/helpers.ts

@@ -43,7 +43,7 @@ export function getReportingParams(state: PlaybackState): PlaybackProgressInfo {
     return {
         AudioStreamIndex: state.audioStreamIndex,
         CanSeek: state.canSeek,
-        IsMuted: window.volume.muted,
+        IsMuted: window.volume?.muted ?? false,
         IsPaused:
             window.playerManager.getPlayerState() ===
             cast.framework.messages.PlayerState.PAUSED,
@@ -55,7 +55,7 @@ export function getReportingParams(state: PlaybackState): PlaybackProgressInfo {
         PositionTicks: Math.round(getCurrentPositionTicks(state)),
         RepeatMode: window.repeatMode,
         SubtitleStreamIndex: state.subtitleStreamIndex,
-        VolumeLevel: Math.round(window.volume.level * 100)
+        VolumeLevel: Math.round(window.volume?.level ?? 0 * 100)
     };
 }
 

src/index.html

@@ -7,6 +7,7 @@
             @import url('https://fonts.googleapis.com/css?family=Quicksand');
         </style>
         <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
+        <script type="module" src="./app.ts"></script>
     </head>
     <body>
         <div id="waiting-container-backdrop"></div>

src/types/global.d.ts

@@ -90,7 +90,6 @@ interface SupportedCommands {
 // /From commandHandler
 
 declare global {
-    export const PRODUCTION: boolean;
     export const RECEIVERVERSION: string;
     export interface Window {
         mediaElement: HTMLElement | null;

tsconfig.json

@@ -14,6 +14,6 @@
         "paths": {
             "~/*": ["./*"]
         },
-        "types": ["@types/node", "@types/chromecast-caf-receiver", "jest"]
+        "types": ["@types/chromecast-caf-receiver", "jest", "vite/client"]
     }
 }

vite.config.ts

@@ -0,0 +1,20 @@
+/* eslint-disable sort-keys */
+
+import { defineConfig } from 'vite';
+import { version } from './package.json';
+
+export default defineConfig({
+    root: 'src',
+    build: {
+        outDir: '../dist',
+        emptyOutDir: true,
+        target: 'es2015',
+        assetsInlineLimit: 0
+    },
+    server: {
+        port: 9000
+    },
+    define: {
+        RECEIVERVERSION: JSON.stringify(version)
+    }
+});