React media

app/assets/javascripts/media_viewer/App.jsx

@@ -0,0 +1,8 @@
+import Button from '@mui/material/Button';
+
+export default function App() {
+  return (<div>
+    <h2>dood!</h2>
+    <Button variant="contained">Hello world</Button>
+    </div>)
+}

app/components/embed/media_with_companion_windows_component.html.erb

@@ -1,32 +1,2 @@
-<div class="sul-embed-container media-component" id='sul-embed-object' style='display:none;'>
-  <header>
-    <nav aria-label="Window navigation">
-      <button>
-        <span class="button-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></span>
-      </button>
-      <h2 class=""><%= viewer.purl_object.title %></h2>
-    </nav>
-  </header>
-
-  <div class="media-component-body" data-controller="media">
-    <div class="left-drawer">
-      Left Drawer
-    </div>
-    <div class='sul-embed-body sul-embed-media'
-      data-sul-embed-theme="<%= stylesheet_path('media.css') %>"
-      data-sul-icons="<%= stylesheet_path('sul_icons.css') %>">
-      <%= render Embed::MediaTagComponent.with_collection(purl_object.contents,
-                                                    include_transcripts:,
-                                                    druid:,
-                                                    many_primary_files:) %>
-    </div>
-    <%= render Embed::Media::MetadataComponent.new viewer: viewer %>
-    <%= render 'embed/embed_this/generic', viewer: viewer %>
-    <%= render Embed::Download::LegacyMediaComponent.new viewer: viewer %>
-    <div class="right-drawer" data-media-target="rightDrawer">
-      Right Drawer
-    </div>
-  </div>
-  <%= render Embed::FooterComponent.new viewer: viewer %>
- </div>
- <%= javascript_pack_tag('media') %>
+<div class="sul-embed-container media-component" id='sul-embed-object' style='display:none;'></div>
+<%= javascript_pack_tag('media') %>

app/javascript/packs/media.js

@@ -11,6 +11,14 @@ import { CssInjection } from '../src/modules/css_injection.js';
 // import { PopupPanels } from '../src/modules/popup_panels.js';
 import CommonViewerBehavior from '../src/modules/common_viewer_behavior.js';
 
+import { createRoot } from 'react-dom/client';
+import App from '../../assets/javascripts/media_viewer/App'
+
+const domNode = document.querySelector('.media-component');
+const root = createRoot(domNode);
+root.render(<App />);
+
+
 $(document).ready(function() {
   CssInjection.injectFontIcons();
   CssInjection.appendToHead();

babel.config.js

@@ -12,7 +12,8 @@ module.exports = function (api) {
         '@babel/preset-react',
         {
           development: isDevelopmentEnv || isTestEnv,
-          useBuiltIns: true
+          useBuiltIns: true,
+          runtime: "automatic"
         } 
       ]
     ].filter(Boolean),

config/webpack/webpack.config.js

@@ -11,7 +11,17 @@ const options = {
       }
   },
   module: {
-    rules: [{ test: /\.hbs$/, loader: "handlebars-loader" }]
+    rules: [
+      { test: /\.hbs$/, loader: "handlebars-loader" },
+      {
+        test: /\.(jsx|js)$/,
+        // include: path.resolve(__dirname, 'src'),
+        exclude: /node_modules/,
+        use: [{
+          loader: 'babel-loader',
+        }]
+      }
+    ]
   },
   plugins: [
     new webpack.IgnorePlugin({

package.json

@@ -22,10 +22,12 @@
     "@babel/preset-env": "7",
     "@babel/preset-react": "^7.18.6",
     "@babel/runtime": "7",
-    "@hotwired/stimulus": "^3.2.2",
-    "@hotwired/stimulus-webpack-helpers": "^1.0.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "^5.14.14",
+    "@mui/material": "^5.14.14",
     "babel-loader": "8",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -42,8 +44,8 @@
     "mirador-share-plugin": "^0.11.0",
     "pdfjs-dist": "^3.11.174",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.57.1",
     "shakapacker": "7",
     "terser-webpack-plugin": "5",