Configured React using Webpack with current functionality (#28)
This commit is contained in:
Akshit Kr Nagpal
Saúl Ibarra Corretgé
parent
304f5efe3d
commit
cfcab5e007
|
|
@ -5,3 +5,5 @@ Jitsi Meet*
|
|||
# not seem to be a reason why we will want to risk being inconsistent with our
|
||||
# remaining JavaScript source code.
|
||||
!.eslintrc.js
|
||||
|
||||
build/
|
||||
|
|
@ -1,6 +1,10 @@
|
|||
module.exports = {
|
||||
'extends': [
|
||||
'eslint-config-jitsi'
|
||||
'eslint-config-jitsi',
|
||||
'plugin:react/recommended'
|
||||
],
|
||||
'plugins': [
|
||||
'react'
|
||||
],
|
||||
'rules': {
|
||||
'no-new': 1,
|
||||
|
|
|
|||
|
|
@ -13,3 +13,5 @@ node_modules/
|
|||
npm-debug.log
|
||||
|
||||
Jitsi Meet*
|
||||
|
||||
build/
|
||||
2
main.js
2
main.js
|
|
@ -15,7 +15,7 @@ const URL = require('url');
|
|||
* URL for index.html which will be our entry point.
|
||||
*/
|
||||
const indexURL = URL.format({
|
||||
pathname: path.join(__dirname, 'windows', 'jitsi-meet', 'index.html'),
|
||||
pathname: path.resolve(__dirname, './build/index.html'),
|
||||
protocol: 'file:',
|
||||
slashes: true
|
||||
});
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
17
package.json
17
package.json
|
|
@ -5,7 +5,7 @@
|
|||
"main": "main.js",
|
||||
"productName": "Jitsi Meet",
|
||||
"scripts": {
|
||||
"start": "electron .",
|
||||
"start": "webpack --config ./webpack.config.js --progress && electron ./build/main.js",
|
||||
"clean": "rm -rf node_modules",
|
||||
"lint": "eslint .",
|
||||
"pack": "electron-packager .",
|
||||
|
|
@ -30,10 +30,16 @@
|
|||
"readmeFilename": "README.md",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"jitsi-meet-electron-utils": "jitsi/jitsi-meet-electron-utils"
|
||||
"jitsi-meet-electron-utils": "jitsi/jitsi-meet-electron-utils",
|
||||
"react": "16.3.2",
|
||||
"react-dom": "16.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "6.26.3",
|
||||
"babel-eslint": "8.2.3",
|
||||
"babel-loader": "7.1.4",
|
||||
"babel-preset-env": "1.7.0",
|
||||
"babel-preset-react": "6.24.1",
|
||||
"electron": "2.0.0",
|
||||
"electron-packager": "12.0.2",
|
||||
"electron-rebuild": "1.7.3",
|
||||
|
|
@ -42,6 +48,11 @@
|
|||
"eslint-plugin-flowtype": "2.46.3",
|
||||
"eslint-plugin-import": "2.11.0",
|
||||
"eslint-plugin-jsdoc": "3.2.0",
|
||||
"precommit-hook": "3.0.0"
|
||||
"eslint-plugin-react": "7.7.0",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"node-loader": "0.6.0",
|
||||
"precommit-hook": "3.0.0",
|
||||
"webpack": "4.8.1",
|
||||
"webpack-cli": "2.1.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<style>
|
||||
body, html {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
-webkit-app-region: drag
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
|
||||
const commonConfig = {
|
||||
output: {
|
||||
path: path.resolve('./build'),
|
||||
filename: '[name].js'
|
||||
},
|
||||
node: {
|
||||
__dirname: true
|
||||
},
|
||||
mode: 'development',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
exclude: /(node_modules)/,
|
||||
loader: 'babel-loader',
|
||||
test: /\.js$/
|
||||
},
|
||||
{
|
||||
use: 'node-loader',
|
||||
test: /\.node$/
|
||||
}
|
||||
]
|
||||
},
|
||||
externals: [ {
|
||||
'jitsi-meet-electron-utils': 'require(\'jitsi-meet-electron-utils\')'
|
||||
} ],
|
||||
resolve: {
|
||||
modules: [
|
||||
path.resolve('./node_modules')
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = [
|
||||
Object.assign({
|
||||
target: 'electron-main',
|
||||
entry: { main: './main.js' }
|
||||
},
|
||||
commonConfig),
|
||||
Object.assign({
|
||||
target: 'electron-renderer',
|
||||
entry: { renderer: './windows/jitsi-meet/src/index.js' },
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
title: 'Jitsi Meet',
|
||||
template: path.resolve('./templates/index.html')
|
||||
})
|
||||
]
|
||||
},
|
||||
commonConfig)
|
||||
];
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body, html {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
-webkit-app-region: drag
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
require('./render.js');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
/* global process, JitsiMeetExternalAPI */
|
||||
const {
|
||||
RemoteControl,
|
||||
setupScreenSharingForWindow,
|
||||
setupAlwaysOnTopRender,
|
||||
setupWiFiStats
|
||||
} = require('jitsi-meet-electron-utils');
|
||||
const { jitsiMeetDomain } = require('../../config.js');
|
||||
|
||||
/**
|
||||
* Loads a script from a specific source.
|
||||
*
|
||||
* @param src the source from the which the script is to be (down)loaded
|
||||
* @param loadCallback on load callback function
|
||||
* @param errorCallback callback to be called on error loading the script
|
||||
*/
|
||||
function loadScript(
|
||||
src,
|
||||
loadCallback,
|
||||
errorCallback = console.error) {
|
||||
const script = document.createElement('script');
|
||||
|
||||
script.async = true;
|
||||
|
||||
script.onload = loadCallback;
|
||||
script.onerror = errorCallback;
|
||||
script.src = src;
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
|
||||
loadScript(`https://${jitsiMeetDomain}/external_api.js`, () => {
|
||||
const api = new JitsiMeetExternalAPI(
|
||||
process.env.JITSI_MEET_DOMAIN || jitsiMeetDomain);
|
||||
const iframe = api.getIFrame();
|
||||
|
||||
setupScreenSharingForWindow(iframe);
|
||||
new RemoteControl(iframe);
|
||||
setupAlwaysOnTopRender(api);
|
||||
setupWiFiStats(iframe);
|
||||
});
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
|
||||
import {
|
||||
RemoteControl,
|
||||
setupScreenSharingForWindow,
|
||||
setupAlwaysOnTopRender,
|
||||
setupWiFiStats
|
||||
} from 'jitsi-meet-electron-utils';
|
||||
|
||||
import { jitsiMeetDomain } from '../../../config.js';
|
||||
|
||||
/**
|
||||
* Jitsi Meet Window Component
|
||||
*/
|
||||
class JitsiMeetWindow extends React.Component {
|
||||
|
||||
/**
|
||||
* Render function of component
|
||||
* @return {ScriptElement}
|
||||
*/
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Attach the script
|
||||
*/
|
||||
componentDidMount() {
|
||||
|
||||
const script = document.createElement('script');
|
||||
|
||||
script.async = true;
|
||||
script.onload = this._onScriptLoad;
|
||||
script.onerror = console.error;
|
||||
script.src = `https://${jitsiMeetDomain}/external_api.js`;
|
||||
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
|
||||
/**
|
||||
* When the script is loaded attach utils from jitsi-meet-electron-utils
|
||||
*/
|
||||
_onScriptLoad() {
|
||||
const JitsiMeetExternalAPI = window.JitsiMeetExternalAPI;
|
||||
|
||||
const api = new JitsiMeetExternalAPI(jitsiMeetDomain);
|
||||
const iframe = api.getIFrame();
|
||||
|
||||
setupScreenSharingForWindow(iframe);
|
||||
new RemoteControl(iframe);
|
||||
setupAlwaysOnTopRender(api);
|
||||
setupWiFiStats(iframe);
|
||||
}
|
||||
}
|
||||
|
||||
render(<JitsiMeetWindow />, document.getElementById('app'));
|
||||
Loading…
Reference in New Issue