Merge pull request #22 from WillinuX-Code/webpack

Fixing app crash on WebOS 3.x

Author: WillinuX-Code

babel.config.json

@@ -0,0 +1,16 @@
+{
+    "plugins": ["@babel/plugin-transform-regenerator"],
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "targets": {
+                    "chrome": "38"
+                },
+                "useBuiltIns": "entry",
+                "corejs": "3.29.0"
+            }
+        ],
+        ["@babel/preset-react", { "runtime": "automatic" }]
+    ]
+}

package-lock.json

@@ -1,24 +1,24 @@
 {
     "name": "webos-tvheadend",
-    "version": "1.0.0",
+    "version": "0.8.1",
     "private": true,
     "homepage": "./",
     "dependencies": {
         "@enact/moonstone": "^3.3.1",
         "@procot/webostv": "^1.2.2",
+        "core-js": "^3.29.1",
         "ilib": "^14.6.2",
+        "core-js": "^3.29.1",
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
-        "react-scripts": "^4.0.1"
+        "regenerator-runtime": "^0.13.11"
     },
     "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject",
-        "webos:emu": "npm run build && ares-package build service && ares-install com.willinux.tvh.app_1.0.0_all.ipk -d emulator && ares-launch com.willinux.tvh.app -d emulator",
+        "start": "webpack serve --mode development --hot",
+        "build": "webpack --mode production",
+        "webos:emu": "npm run build && ares-package build service && ares-install com.willinux.tvh.app_${npm_package_version}_all.ipk -d emulator && ares-launch com.willinux.tvh.app -d emulator",
         "webos:emu-rm": "ares-install -d emulator --remove com.willinux.tvh.app",
-        "webos:tv": "npm run build && ares-package build service && ares-install com.willinux.tvh.app_1.0.0_all.ipk -d tv && ares-launch com.willinux.tvh.app -d tv",
+        "webos:tv": "npm run build && ares-package build service && ares-install com.willinux.tvh.app${npm_package_version}_all.ipk -d tv && ares-launch com.willinux.tvh.app -d tv",
         "webos:tv-rm": "ares-install -d tv --remove com.willinux.tvh.app",
         "inspect:emu": "ares-inspect -d emulator com.willinux.tvh.app --open",
         "inspect:tv": "ares-inspect -d tv com.willinux.tvh.app --open"
@@ -30,26 +30,39 @@
     },
     "browserslist": {
         "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
+            "chrome >= 38"
         ],
         "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
+            "chrome >= 38"
         ]
     },
     "devDependencies": {
+        "@babel/core": "^7.21.3",
+        "@babel/plugin-transform-object-assign": "^7.18.6",
+        "@babel/plugin-transform-regenerator": "^7.20.5",
+        "@babel/preset-env": "^7.20.2",
+        "@babel/preset-react": "^7.18.6",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
         "@typescript-eslint/eslint-plugin": "^4.14.0",
         "@typescript-eslint/parser": "^4.14.0",
+        "babel-loader": "^9.1.2",
+        "copy-webpack-plugin": "^11.0.0",
+        "css-loader": "^6.7.3",
         "eslint": "^7.18.0",
         "eslint-config-prettier": "^7.2.0",
         "eslint-config-react-app": "^6.0.0",
         "eslint-plugin-prettier": "^3.3.1",
         "eslint-plugin-react": "^7.22.0",
-        "prettier": "^2.2.1"
+        "html-webpack-plugin": "^5.5.0",
+        "less": "^4.1.3",
+        "less-loader": "^11.1.0",
+        "prettier": "^2.2.1",
+        "style-loader": "^3.3.2",
+        "ts-loader": "^9.4.2",
+        "typescript": "^4.9.5",
+        "webpack": "^5.76.2",
+        "webpack-cli": "^5.0.1",
+        "webpack-dev-server": "^4.12.0"
     }
 }

package.json

@@ -1,10 +1,10 @@
 {
     "id": "com.willinux.tvh.app",
-    "version": "1.0.0",
-    "vendor": "My Company",
+    "version": "0.8.1",
+    "vendor": "WillinuX-Code",
     "type": "web",
     "main": "index.html",
-    "title": "TVheadend",
+    "title": "TVheadend Client",
     "splashBackground": "splash.png",
     "icon": "icon.png",
     "largeIcon": "largeIcon.png",

public/appinfo.json

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <title>WebOS Client 4 TVheadend</title>
+    <title>WebOS TVheadend Client</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

public/index.html

@@ -1,6 +1,6 @@
 {
     "name": "com.willinux.tvh.app",
-    "version": "1.0.0",
+    "version": "0.8.1",
     "description": "TVHeadend webos service",
     "main": "service.js",
     "author": "Jens Willhardt",

service/package.json

@@ -81,29 +81,34 @@ const App = () => {
 
             // retrieve channel infos etc
             setIsChannelsRetrieved(false);
-            tvhDataService.retrieveM3UChannels().then((channels) => {
-                epgData.updateChannels(channels);
-                setIsChannelsRetrieved(true);
-
-                // safe persistent token if available
-                if (channels.length > 0) {
-                    safePersistentAuthToken(channels[0].getStreamUrl());
-                }
-                // preload images
-                preloadImages(channels);
-
-                // retrieve epg and update channels
-                tvhDataService.retrieveTVHEPG(0, (channels) => {
-                    // note: channels are already updated as we are working on references here
+            tvhDataService
+                .retrieveM3UChannels()
+                .then((channels) => {
                     epgData.updateChannels(channels);
+                    setIsChannelsRetrieved(true);
+
+                    // safe persistent token if available
+                    if (channels.length > 0) {
+                        safePersistentAuthToken(channels[0].getStreamUrl());
+                    }
+                    // preload images
+                    preloadImages(channels);
+
+                    // retrieve epg and update channels
+                    tvhDataService.retrieveTVHEPG(0, (channels) => {
+                        // note: channels are already updated as we are working on references here
+                        epgData.updateChannels(channels);
+                    });
+
+                    // retrieve recordings and update channels
+                    tvhDataService.retrieveUpcomingRecordings((recordings) => {
+                        epgData.updateRecordings(recordings);
+                    });
+                })
+                .catch((error) => {
+                    console.log('Failed to retrieve channels: ', error);
                 });
 
-                // retrieve recordings and update channels
-                tvhDataService.retrieveUpcomingRecordings((recordings) => {
-                    epgData.updateRecordings(recordings);
-                });
-            });
-
             setAppViewState(AppViewState.TV);
         } else {
             setAppViewState(AppViewState.SETTINGS);
@@ -114,9 +119,13 @@ const App = () => {
         try {
             // retrieve local info
             const localInfoResult = await tvhDataService.getLocaleInfo();
-            const locale = localInfoResult.settings.localeInfo.locales.UI;
-            setLocale(locale);
+            let locale = localInfoResult.settings.localeInfo.locales.UI;
             console.log('Retrieved locale info:', locale);
+            if (locale === undefined) {
+                locale = 'en-US';
+                console.log('locale fallback to:', locale);
+            }
+            setLocale(locale);
         } catch (error) {
             console.log('Failed to retrieve locale info: ', error);
         }

src/App.tsx

@@ -7,6 +7,7 @@ import kind from '@enact/core/kind';
 
 interface ButtonProps {
     source: 'confirm' | 'abort';
+    children: React.ReactNode;
 }
 
 const DialogPopup = (props: {

src/components/DialogPopup.tsx

@@ -279,10 +279,15 @@ const TV = () => {
         videoElement.appendChild(source);
 
         // Auto-play video with some (unused) error handling
-        videoElement
-            .play()
-            .then(() => setIsVideoPlaying(true))
-            .catch((error) => console.log('channel switched before it could be played', error));
+        const playPromise = videoElement.play();
+        // workarund for promise not beeing returned in webos 3.x
+        if (playPromise !== undefined) {
+            playPromise
+                .then(() => setIsVideoPlaying(true))
+                .catch((error) => console.log('channel switched before it could be played', error));
+        } else {
+            setIsVideoPlaying(true);
+        }
     };
 
     const getWidth = () => window.innerWidth;

src/components/TV.tsx

@@ -1,3 +1,5 @@
+import 'core-js/stable';
+import 'regenerator-runtime';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';

src/index.tsx

@@ -0,0 +1,2 @@
+import 'core-js/actual';
+import 'regenerator-runtime/runtime';

src/polyfills.js

@@ -95,7 +95,7 @@ export default class TVHDataService {
     private httpProxyServiceAdapter = Config.httpProxyServiceAdapter;
     private epgCacheService = new EPGCacheService();
     private webosService = new WebOSService();
-    private maxTotalEpgEntries = 10000;
+    private maxTotalEpgEntries = 20000;
     private channels: EPGChannel[] = [];
     private url?: string;
     // private profile: string;
@@ -119,7 +119,7 @@ export default class TVHDataService {
      */
     async getLocaleInfo() {
         const localeInfo = await this.webosService.getLocaleInfo();
-        // console.log('getLocaleInfo:', localeInfo);
+        console.log('getLocaleInfo:', localeInfo);
         return localeInfo;
     }
 
@@ -429,10 +429,10 @@ export default class TVHDataService {
         });
     }
 
-    retrieveTVHEPG(start: number, callback: EPGCallback) {
+    retrieveTVHEPG(start: number, callback: EPGCallback): void {
         let totalCount = 0;
 
-        return this.httpProxyServiceAdapter
+        this.httpProxyServiceAdapter
             .call<TVHEvents>({
                 url: this.url + TVHDataService.API_EPG + start,
                 user: this.user,

src/services/TVHDataService.ts

@@ -17,7 +17,7 @@ export default class WebOSService {
      */
     async getLocaleInfo() {
         const localeInfo = await this.lunaServiceAdapter.getLocaleInfo();
-        // console.log('getLocaleInfo:', localeInfo);
+        console.log('getLocaleInfo:', localeInfo);
         return localeInfo;
     }
 }

src/services/WebOSService.ts

@@ -16,7 +16,7 @@
     "moduleResolution": "node", // Resolve modules using Node.js style
     "isolatedModules": true, // Unconditionally emit imports for unresolved files
     "resolveJsonModule": true, // Include modules imported with .json extension
-    "noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
+    "noEmit": false, // Do not emit output (meaning do not compile code, only perform type checking)
     "jsx": "react", // Support JSX in .tsx files
     "sourceMap": false, // Generate corrresponding .map file
     "declaration": false, // Generate corresponding .d.ts file

tsconfig.json

@@ -0,0 +1,67 @@
+const path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    entry: {
+        polyfills: './src/polyfills.js',
+        index: './src/index.tsx'
+    },
+    output: {
+        asyncChunks: true,
+        clean: true,
+        filename: '[name].bundle.js',
+        path: path.resolve(__dirname, 'build')
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: path.join(__dirname, 'public', 'index.html')
+        }),
+        new CopyPlugin({
+            // copy appinfo and resources to build folder
+            patterns: ['public/appinfo.json', 'public/splash.png', 'public/largeIcon.png', 'public/icon.png']
+        })
+    ],
+    devServer: {
+        static: {
+            directory: path.join(__dirname, 'build')
+        },
+        port: 3000
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(m?js|jsx)$/,
+                //exclude: /node_modules/,
+                use: ['babel-loader']
+            },
+            {
+                test: /\.(ts|tsx)$/,
+                exclude: /node_modules/,
+                use: ['ts-loader']
+            },
+            {
+                test: /\.(css)$/,
+                use: ['style-loader', 'css-loader']
+            },
+            {
+                test: /\.less$/i,
+                use: [
+                    // compiles Less to CSS
+                    'style-loader',
+                    'css-loader',
+                    'less-loader'
+                ]
+            }
+        ]
+    },
+    // pass all js files through Babel
+    resolve: {
+        extensions: ['*', '.js', '.jsx', '.ts', '.tsx']
+    },
+    optimization: {
+        splitChunks: {
+            chunks: 'all'
+        }
+    }
+};