Notizen und Quelltext-Änderungen für jitsi-meet-electron, 25.6.2020

20200618/firefox-javascript-option.diff

+diff -r 3155ffead6ae browser/components/preferences/main.inc.xhtml
+--- a/browser/components/preferences/main.inc.xhtml	Wed Jun 17 05:55:10 2020 +0300
++++ b/browser/components/preferences/main.inc.xhtml	Thu Jun 18 16:30:43 2020 +0200
+@@ -66,6 +66,9 @@
+           hidden="true">
+     <label><html:h2 data-l10n-id="tabs-group-header"/></label>
+ 
++    <checkbox id="javascriptEnabled" data-l10n-id="javascript-enabled"
++              preference="javascript.enabled"/>
++
+     <checkbox id="ctrlTabRecentlyUsedOrder" data-l10n-id="ctrl-tab-recently-used-order"
+               preference="browser.ctrlTab.recentlyUsedOrder"/>
+ 
+diff -r 3155ffead6ae browser/components/preferences/main.js
+--- a/browser/components/preferences/main.js	Wed Jun 17 05:55:10 2020 +0300
++++ b/browser/components/preferences/main.js	Thu Jun 18 16:30:43 2020 +0200
+@@ -131,6 +131,7 @@
+   { id: "browser.tabs.warnOnClose", type: "bool" },
+   { id: "browser.tabs.warnOnOpen", type: "bool" },
+   { id: "browser.ctrlTab.recentlyUsedOrder", type: "bool" },
++  { id: "javascript.enabled", type: "bool" },
+ 
+   // CFR
+   {
+diff -r 3155ffead6ae browser/locales/en-US/browser/preferences/preferences.ftl
+--- a/browser/locales/en-US/browser/preferences/preferences.ftl	Wed Jun 17 05:55:10 2020 +0300
++++ b/browser/locales/en-US/browser/preferences/preferences.ftl	Thu Jun 18 16:30:43 2020 +0200
+@@ -170,6 +170,9 @@
+ 
+ tabs-group-header = Tabs
+ 
++javascript-enabled =
++    .label = Enable JavaScript
++
+ ctrl-tab-recently-used-order =
+     .label = Ctrl+Tab cycles through tabs in recently used order
+     .accesskey = T

20200625/ad-20200625.txt

+Letzte Woche, 25.06.2020, 12:51:24
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+Einarbeiten in Großprojekte am Beispiel von
+:) GNU Hello
+:) Mozilla Firefox
+   :) Ergebnis: JavaScript per Optionen-Dialog ein- und ausschaltbar
+      anstatt nur über about:config
+ o Jitsi Meet Electron
+    - Quelltext: https://github.com/jitsi/jitsi-meet-electron/releases
+    - Ziel: Automatisches Verbinden mit einer URL,
+      vorzugsweise per Kommandozeilenoption,
+      analog zu: chromium https://jitsi.cvh-server.de/VNC6
+
+Zwischenlösung:
+
+diff --git a/app/features/welcome/components/Welcome.js b/app/features/welcome/components/Welcome.js
+index 4a04661..e45cdf9 100644
+--- a/app/features/welcome/components/Welcome.js
++++ b/app/features/welcome/components/Welcome.js
+@@ -135,9 +135,8 @@ class Welcome extends Component<Props, State> {
+             <Page navigation = { <Navbar /> }>
+                 <AtlasKitThemeProvider mode = 'light'>
+                     <Wrapper>
+-                        { this._renderHeader() }
+-                        { this._renderBody() }
+-                        <Onboarding section = 'welcome-page' />
++                        { this.state.url = 'https://jitsi.cvh-server.de/VNC6' }
++                        { this._onJoin() }
+                     </Wrapper>
+                 </AtlasKitThemeProvider>
+             </Page>
+
+Wie kam ich darauf?
+
+ - Vermutliche Haupt-Datei: main.js
+ - JavaScript: ereignisgesteuert programmieren
+ - Callbacks in main.js:
+    - app.on('activate', () => { ... }
+    - app.on('ready', createJitsiMeetWindow);
+   Beide rufen createJitsiMeetWindow() auf.
+ - Diese Funktion steht ebenfalls in main.js.
+ - const indexURL = URL.format({
+     pathname: path.resolve(basePath, './build/index.html'),
+     ...
+   });
+
+--> Weiter geht's in ./build/index.html.
+
+ - <script src="app.js"></script>
+
+--> Weiter geht's in ./build/app.js.
+--> Wir landen letztlich in ./app/features/welcome/components/Welcome.js.
+
+ - class Welcome enthält:
+   url, serverURL, room, ... --> :-)
+ - Die Funktion render() erzeugt letztlich den Haupt-Bildschirm der App.
+
+--> Wrapper austauschen, so daß er die Wunsch-URL anwählt
+    anstelle des sonst vorgesehenen Bildschirms.
+
+Nachteile:
+:) URL im Quelltext hardcodiert --> =8-O
+ - Verbindung wird aufgebaut, abgebaut, neu aufgebaut.
+
+Wie könnte man das besser hinkriegen?
+
+ - URL als Kommandozeilen-Parameter.
+   Klar, aber wie?
+ - Web-Suche: nichts Vielversprechendes
+
+URL über Kommandozeile spezifizieren, 25.06.2020, 15:18:26
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+Kommandozeilen-Parameter in JavaScript?
+--> process.argv
+$ npm start -- --no-sandbox
+Ergebnis:
+  [
+    '/home/peter/src/jitsi-meet-electron/node_modules/electron/dist/electron',
+    './build/main.js'
+  ]
+main.js wird von electron aus aufgerufen, kann also höchstens von dort
+seine Kommandozeilenparameter bekommen. Um die zu ändern, müßte ich in
+electron eingreifen, genaugenommen in ein Shell-Skript, das 
+"node main.js" aufruft. --> eher tiefgreifende Änderung
+
+Alternative: Umgebungsvariable
+--> process.env
+$ HELLO="Hello, world!" npm start -- --no-sandbox
+Ergebnis:
+  [
+    ...
+    HELLO: 'Hello, world!',
+    ...
+  ]
+--> Auf diese Weise ist es möglich, per Kommandozeile Informationen an main.js
+    zu übergeben.
+$ URL="https://jitsi.cvh-server.de/VNC6" npm start -- --no-sandbox
+Ergebnis:
+  [
+    ...
+    URL: 'https://jitsi.cvh-server.de/VNC6',
+    ...
+  ]
+
+Nächstes Problem: Übergabe der Information an Welcome.js
+(Welcome.js hat selbst keinen Zugriff auf process.env.)
+Lösung: Der Webseite einen Parameter mitgeben:
+"./build/index.html?url=https://.../VNC6" statt "./build/index.html"
+
+In JavaScript: Aufbau einer URL
+  file:///home/peter/src/jitsi-meet-electron/build/index.html?url=https://.../VNC6
+  `-.-'  `-------------------------.------------------------' `---------.--------'
+  protocol                      pathname                          search string
+
+Abfrage von Webseiten-Variablen von JavaScript aus:
+  var urlParams = new URLSearchParams(window.location.search);
+                                      `----------.---------'
+                                           search string
+  var directUrl = urlParams.get('url');
+Danach enthält die Variable directUrl den per URL="..." übergegbenen Wert.
+Wir speichern diesen Wert an der dafür vorgesehenen Stelle: this.state.url
+Anschließend können wir die (normalerweise: Callback-) Funktion
+this._onJoin() aufrufen, um zu dieser URL zu gehen.
+
+Danach funktioniert es:
+$ URL="https://jitsi.cvh-server.de/Test" npm start -- --no-sandbox
+Aber: nach ca. 10s verbindet sich die Software erneut.
+
+Änderungen im Quelltext:
+
+diff --git a/app/features/welcome/components/Welcome.js b/app/features/welcome/components/Welcome.js
+index f0bb138..4d3b147 100644
+--- a/app/features/welcome/components/Welcome.js
++++ b/app/features/welcome/components/Welcome.js
+@@ -100,6 +100,13 @@ class Welcome extends Component<Props, State> {
+         this._onFormSubmit = this._onFormSubmit.bind(this);
+         this._onJoin = this._onJoin.bind(this);
+         this._updateRoomname = this._updateRoomname.bind(this);
++
++        var urlParams = new URLSearchParams(window.location.search);
++        var directUrl = urlParams.get('url');
++        if (directUrl.length > 0) {
++            this.state.url = directUrl;
++            this._onJoin ();
++        }
+     }
+ 
+     /**
+diff --git a/main.js b/main.js
+index 0ca6cde..a2948e3 100644
+--- a/main.js
++++ b/main.js
+@@ -173,7 +173,8 @@ function createJitsiMeetWindow() {
+     const indexURL = URL.format({
+         pathname: path.resolve(basePath, './build/index.html'),
+         protocol: 'file:',
+-        slashes: true
++        slashes: true,
++        search: 'url=' + process.env.URL
+     });
+ 
+     // Options used when creating the main Jitsi Meet window.
+
+Verbesserung: Aufruf von this._onJoin() nicht vom Constructor aus,
+sondern von der Livecycle-Methode componentDidMount() aus.
+
+diff --git a/app/features/welcome/components/Welcome.js b/app/features/welcome/components/Welcome.js
+index f0bb138..e498dcb 100644
+--- a/app/features/welcome/components/Welcome.js
++++ b/app/features/welcome/components/Welcome.js
+@@ -111,9 +111,16 @@ class Welcome extends Component<Props, State> {
+      * @returns {void}
+      */
+     componentDidMount() {
+-        this.props.dispatch(startOnboarding('welcome-page'));
+-
+-        this._updateRoomname();
++        var urlParams = new URLSearchParams(window.location.search);
++        var directUrl = urlParams.get('url');
++        if (directUrl.length > 0) {
++            this.state.url = directUrl;
++            this._onJoin ();
++        }
++        else {
++            this.props.dispatch(startOnboarding('welcome-page'));
++            this._updateRoomname();
++        }
+     }
+ 
+     /**
+diff --git a/main.js b/main.js
+index 0ca6cde..a2948e3 100644
+--- a/main.js
++++ b/main.js
+@@ -173,7 +173,8 @@ function createJitsiMeetWindow() {
+     const indexURL = URL.format({
+         pathname: path.resolve(basePath, './build/index.html'),
+         protocol: 'file:',
+-        slashes: true
++        slashes: true,
++        search: 'url=' + process.env.URL
+     });
+ 
+     // Options used when creating the main Jitsi Meet window.
+
+Wir haben weiterhin das Problem: nach ca. 10s verbindet sich die Anwendung neu.
+
+Beobachtung: Kurze Zeit nachdem man einen Quelltext gespeichert hat,
+verbindet sich die Anwendung neu.
+Erklärung: Der server erkennt Änderungen im Code und aktualisiert dann die Seite.
+(Es wird ein neuer Build von Webpack getriggert: bable compiliert das JavaScript
+zu rückwärts-kompatiblem JavaScript.)
+--> Wir können das Problem möglicherweise ignorieren,
+    da es nur dann auftritt, wenn man den Quelltext ändert.
+
+ausführbare .AppImage-Datei erzeugen:
+$ npm run dist
+$ cd dist
+$ URL=https://jitsi.cvh-server.de/VNC6 ./jitsi-meet-x86_64.AppImage --no-sandbox
+
+--> Es funktioniert. :-)

20200625/jitsi-meet-electron-with-url-pg-20200625.diff

+diff --git a/app/features/welcome/components/Welcome.js b/app/features/welcome/components/Welcome.js
+index f0bb138..e498dcb 100644
+--- a/app/features/welcome/components/Welcome.js
++++ b/app/features/welcome/components/Welcome.js
+@@ -111,9 +111,16 @@ class Welcome extends Component<Props, State> {
+      * @returns {void}
+      */
+     componentDidMount() {
+-        this.props.dispatch(startOnboarding('welcome-page'));
+-
+-        this._updateRoomname();
++        var urlParams = new URLSearchParams(window.location.search);
++        var directUrl = urlParams.get('url');
++        if (directUrl.length > 0) {
++            this.state.url = directUrl;
++            this._onJoin ();
++        }
++        else {
++            this.props.dispatch(startOnboarding('welcome-page'));
++            this._updateRoomname();
++        }
+     }
+ 
+     /**
+diff --git a/main.js b/main.js
+index 0ca6cde..a2948e3 100644
+--- a/main.js
++++ b/main.js
+@@ -173,7 +173,8 @@ function createJitsiMeetWindow() {
+     const indexURL = URL.format({
+         pathname: path.resolve(basePath, './build/index.html'),
+         protocol: 'file:',
+-        slashes: true
++        slashes: true,
++        search: 'url=' + process.env.URL
+     });
+ 
+     // Options used when creating the main Jitsi Meet window.