Add React Jitsi custom module

web/modules/custom/react_jitsi/.gitignore

@@ -0,0 +1,33 @@
+dist
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Dependency directories
+node_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.pnp.*

web/modules/custom/react_jitsi/js/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+class Greeting extends React.Component {
+
+  render() {
+    return (
+      <h2>
+        {this.props.text}
+      </h2>
+  );
+  }
+
+}
+
+ReactDOM.render(<Greeting text="Hi from React!" />, document.getElementById('page'));

web/modules/custom/react_jitsi/mix-manifest.json

@@ -0,0 +1,4 @@
+{
+    "/dist/app.js": "/dist/app.js",
+    "/dist/app.js.map": "/dist/app.js.map"
+}

web/modules/custom/react_jitsi/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "react-jitsi",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "build": "yarn run production",
+    "develop": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=webpack.config.js",
+    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=webpack.config.js",
+    "production": "cross-env NODE_ENV=production webpack --no-progress --hide-modules --config=webpack.config.js",
+    "watch": "yarn run develop --watch"
+  },
+  "dependencies": {
+    "cross-env": "^7.0.2",
+    "laravel-mix": "^5.0.4",
+    "resolve-url-loader": "^3.1.1",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "devDependencies": {
+    "browser-sync": "^2.26.7",
+    "browser-sync-webpack-plugin": "2.2.2",
+    "husky": "^4.2.5",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  },
+  "husky": {
+    "hooks": {
+      "pre-push": "echo -e 'Husky pre-push is not yet setup.\n' "
+    }
+  }
+}

web/modules/custom/react_jitsi/react_jitsi.info.yml

@@ -0,0 +1,5 @@
+name: React Jitsi
+description: Adds a custom page to load up a React app for Jitsi Meets.
+package: Custom
+type: module
+core_version_requirement: ^8.8.0 || ^9.0

web/modules/custom/react_jitsi/react_jitsi.libraries.yml

@@ -0,0 +1,4 @@
+react_jitsi:
+  version: 1.0
+  js:
+    dist/app.js: { minified: true }

web/modules/custom/react_jitsi/react_jitsi.module

@@ -0,0 +1,10 @@
+<?php
+
+/**
+ * Implements hook_page_attachments_alter.
+ */
+function react_jitsi_page_attachments_alter(array &$attachments) {
+  if (\Drupal::service('path.current')->getPath() === '/meet') {
+    $attachments['#attached']['library'][] = 'react_jitsi/react_jitsirou';
+  }
+}

web/modules/custom/react_jitsi/react_jitsi.routing.yml

@@ -0,0 +1,7 @@
+react_jitsi.controller_react_page:
+  path: 'meet'
+  defaults:
+    _controller: '\Drupal\react_jitsi\Controller\ReactJitsiController::reactPage'
+    _title: 'Meet Remotely'
+  requirements:
+    _permission: 'access content'

web/modules/custom/react_jitsi/src/Controller/ReactJitsiController.php

@@ -0,0 +1,86 @@
+<?php
+
+namespace Drupal\react_jitsi\Controller;
+
+use Drupal\Core\Controller\ControllerBase;
+use Drupal\Core\DependencyInjection\ContainerInjectionInterface;
+use Drupal\Core\Entity\EntityTypeManagerInterface;
+use Drupal\Core\Form\FormBuilderInterface;
+use Drupal\Core\Path\CurrentPathStack;
+use Drupal\Core\Session\AccountProxyInterface;
+use Drupal\user\Entity\User;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+/**
+ * Class ReactJitsiController.
+ */
+class ReactJitsiController extends ControllerBase implements ContainerInjectionInterface {
+
+  /**
+   * The current path.
+   *
+   * @return \Drupal\Core\Path\CurrentPathStack
+   */
+  protected $currentPath;
+
+  /**
+   * @var User
+   */
+  protected $currentUser;
+
+  /**
+   * @var EntityTypeManagerInterface
+   */
+  protected $entityTypeManager;
+
+  /**
+   * @var FormBuilderInterface
+   */
+  protected $formBuilder;
+
+  /**
+   * Constructs a ReactJitsiController object
+   *
+   * @param CurrentPathStack $current_path
+   * @param AccountProxyInterface $currentUser
+   * @param EntityTypeManagerInterface $entityTypeManager
+   * @param FormBuilderInterface $formBuilder
+   */
+  public function __construct(
+    CurrentPathStack $current_path,
+    AccountProxyInterface $currentUser,
+    EntityTypeManagerInterface $entityTypeManager,
+    FormBuilderInterface $formBuilder
+  ) {
+    $this->currentPath = $current_path;
+    $this->currentUser = User::load($currentUser->id());
+    $this->entityTypeManager = $entityTypeManager;
+    $this->formBuilder = $formBuilder;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container) {
+    return new static(
+      $container->get('path.current'),
+      $container->get('current_user'),
+      $container->get('entity_type.manager'),
+      $container->get('form_builder')
+    );
+  }
+
+  /**
+   * React page.
+   *
+   * @return array
+   *   Render array.
+   */
+  public function reactPage() {
+    return [
+      '#type' => 'inline_template',
+      '#template' => '',
+    ];
+  }
+
+}

web/modules/custom/react_jitsi/webpack.config.js

@@ -0,0 +1,13 @@
+const mix = require("laravel-mix/src/index");
+
+const ComponentFactory = require("laravel-mix/src/components/ComponentFactory");
+
+new ComponentFactory().installAll();
+
+require(Mix.paths.mix());
+
+Mix.dispatch("init", Mix);
+
+const WebpackConfig = require("laravel-mix/src/builder/WebpackConfig");
+
+module.exports = new WebpackConfig().build();

web/modules/custom/react_jitsi/webpack.mix.js

@@ -0,0 +1,15 @@
+const mix = require('laravel-mix');
+const postCssVariables = require('postcss-css-variables');
+
+mix.disableNotifications()
+  .js('js/app.js', 'dist')
+  .sourceMaps()
+  .webpackConfig({
+    devtool: "source-map",
+    externals: {
+      jquery: "jQuery"
+    }
+  })
+  .browserSync({
+    proxy: 'localhost:8888'
+  });