mirror of
https://github.com/netzbegruenung/jitsi-meet-electron.git
synced 2024-05-03 09:13:43 +02:00
Configured React using Webpack with current functionality (#28)
This commit is contained in:
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
|
# not seem to be a reason why we will want to risk being inconsistent with our
|
||||||
# remaining JavaScript source code.
|
# remaining JavaScript source code.
|
||||||
!.eslintrc.js
|
!.eslintrc.js
|
||||||
|
|
||||||
|
build/
|
|
@ -1,6 +1,10 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
'extends': [
|
'extends': [
|
||||||
'eslint-config-jitsi'
|
'eslint-config-jitsi',
|
||||||
|
'plugin:react/recommended'
|
||||||
|
],
|
||||||
|
'plugins': [
|
||||||
|
'react'
|
||||||
],
|
],
|
||||||
'rules': {
|
'rules': {
|
||||||
'no-new': 1,
|
'no-new': 1,
|
||||||
|
|
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -13,3 +13,5 @@ node_modules/
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
|
|
||||||
Jitsi Meet*
|
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.
|
* URL for index.html which will be our entry point.
|
||||||
*/
|
*/
|
||||||
const indexURL = URL.format({
|
const indexURL = URL.format({
|
||||||
pathname: path.join(__dirname, 'windows', 'jitsi-meet', 'index.html'),
|
pathname: path.resolve(__dirname, './build/index.html'),
|
||||||
protocol: 'file:',
|
protocol: 'file:',
|
||||||
slashes: true
|
slashes: true
|
||||||
});
|
});
|
||||||
|
|
7181
package-lock.json
generated
7181
package-lock.json
generated
File diff suppressed because it is too large
Load diff
17
package.json
17
package.json
|
@ -5,7 +5,7 @@
|
||||||
"main": "main.js",
|
"main": "main.js",
|
||||||
"productName": "Jitsi Meet",
|
"productName": "Jitsi Meet",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "electron .",
|
"start": "webpack --config ./webpack.config.js --progress && electron ./build/main.js",
|
||||||
"clean": "rm -rf node_modules",
|
"clean": "rm -rf node_modules",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"pack": "electron-packager .",
|
"pack": "electron-packager .",
|
||||||
|
@ -30,10 +30,16 @@
|
||||||
"readmeFilename": "README.md",
|
"readmeFilename": "README.md",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"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": {
|
"devDependencies": {
|
||||||
|
"babel-core": "6.26.3",
|
||||||
"babel-eslint": "8.2.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": "2.0.0",
|
||||||
"electron-packager": "12.0.2",
|
"electron-packager": "12.0.2",
|
||||||
"electron-rebuild": "1.7.3",
|
"electron-rebuild": "1.7.3",
|
||||||
|
@ -42,6 +48,11 @@
|
||||||
"eslint-plugin-flowtype": "2.46.3",
|
"eslint-plugin-flowtype": "2.46.3",
|
||||||
"eslint-plugin-import": "2.11.0",
|
"eslint-plugin-import": "2.11.0",
|
||||||
"eslint-plugin-jsdoc": "3.2.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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
19
templates/index.html
Normal file
19
templates/index.html
Normal file
|
@ -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>
|
53
webpack.config.js
Normal file
53
webpack.config.js
Normal file
|
@ -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);
|
|
||||||
});
|
|
57
windows/jitsi-meet/src/index.js
Normal file
57
windows/jitsi-meet/src/index.js
Normal file
|
@ -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 a new issue