chrome-68 support

package.json

@@ -33,8 +33,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.10",
-    "@mantine/core": "^7.4.2",
-    "@mantine/hooks": "^7.4.2",
+    "@emotion/react": "^11.14.0",
+    "@mantine/core": "6.0.21",
+    "@mantine/hooks": "6.0.21",
     "@tabler/icons-react": "^2.46.0",
     "core-js": "^3.20.1",
     "embla-carousel-react": "^8.0.0-rc20",

src/components/Home.js → src/components/Home.jsx

@@ -3,10 +3,10 @@ import { GET_RECENT_CONFERENCES } from '../data';
 import { Center, Loader, Container, Box } from '@mantine/core';
 import { useWindowEvent, useListState } from '@mantine/hooks';
 import { useQuery } from '@apollo/client';
-import { Preview } from '../components/Preview';
-import { Player } from '../components/Player';
+import { Preview } from './Preview';
+import { Player } from './Player';
 import { handleArrowDown, handleArrowUp, handleArrowLeft, handleArrowRight } from '../helpers/helpers';
-import { EventCarousel } from '../components/EventCarousel';
+import { EventCarousel } from './EventCarousel';
 
 import '../styles.css';
 

src/helpers/helpers.js

@@ -7,18 +7,18 @@ export function getVideo(videos) {
         defaultValue: 'deu',
       });
       let recording = videos.find(
-        (s) => (s.language === language && s.mimeType === "video/mp4" && s.url)
+        (s) => (s.language === language && s.mimeType === "video/webm" && s.url)
       );
       let foundLanguage = true;
       // check if another language is available
       let otherLanguage = language === "deu" ? "eng" : "deu";
       const otherLanguageAvailable = videos.find(
-        (s) => (s.language === otherLanguage && s.mimeType === "video/mp4" && s.url)
+        (s) => (s.language === otherLanguage && s.mimeType === "video/webm" && s.url)
       );
       // video in language not found, try to find any video
       if (!recording) {
         recording = videos.find(
-          (s) => s.mimeType === "video/mp4" && s.url
+          (s) => s.mimeType === "video/webm" && s.url
         );
         foundLanguage = false;
       }

src/index.js

@@ -1,14 +1,11 @@
 import 'core-js/stable';
 
 import React from 'react';
-import '@mantine/core/styles.css';
 
-
-import { MantineProvider, createTheme } from '@mantine/core';
+import { MantineProvider } from '@mantine/core';
 import { createRoot } from 'react-dom/client';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 
-const theme = createTheme();
 
 const cache = new InMemoryCache({
   typePolicies: {
@@ -50,7 +47,7 @@ import App from './App';
 const container = document.getElementById('app');
 const root = createRoot(container); // createRoot(container!) if you use TypeScript
 root.render(
-    <MantineProvider defaultColorScheme="dark" theme={theme}>
+    <MantineProvider defaultColorScheme="dark">
       <ApolloProvider client={client}>
         <App />
       </ApolloProvider>

src/views/Main.js → src/views/Main.jsx

@@ -8,10 +8,7 @@ export default function App() {
 
   return (
     <AppShell
-      navbar={{ width: 200, breakpoint: 'sm' }}
-    >
-
-      <AppShell.Navbar p="md">
+      navbar={
         <Stack justify="center" gap={0}>
           <ActionIcon variant="subtle" color="gray" className='actionButton' disabled={true}>
             <IconSearch style={{ width: '70%', height: '70%' }} stroke={1.5} />
@@ -26,8 +23,10 @@ export default function App() {
             <IconInfoCircle style={{ width: '70%', height: '70%' }} stroke={1.5} />
           </ActionIcon>
         </Stack>
-      </AppShell.Navbar>
-      <AppShell.Main pos={"relative"}> <Home /></AppShell.Main>
+      }
+    >
+
+      <Home />
     </AppShell>
   );
 }

webpack.config.js

@@ -3,35 +3,47 @@ const webpack = require('webpack');
 const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = {
-  entry: path.resolve(__dirname, './src/index.js'),
+  entry: {
+    app: [
+      'core-js/modules/es.global-this',
+      'core-js/stable',
+      'regenerator-runtime/runtime',
+      './src/index.js'
+    ]
+  },
   devtool: false,
   module: {
     rules: [
       {
         test: /\.(ts|tsx|js|jsx|mjs)$/,
-        // exclude: /node_modules/,
         exclude: /core-js/,
         use: ['babel-loader'],
       },
       {
         test: /\.css$/i,
-        use: ['style-loader', 'css-loader'],
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1
+            }
+          }
+        ],
       },
       {
         test: /\.s[ac]ss$/i,
         use: [
-          // Creates `style` nodes from JS strings
           'style-loader',
-          // Translates CSS into CommonJS
           'css-loader',
-          // Compiles Sass to CSS
           'sass-loader',
         ],
       },
     ],
   },
   resolve: {
-    extensions: ['*', '.js', '.jsx', '.ts', '.tsx', '.mjs'],
+    extensions: ['.*', '.js', '.jsx', '.ts', '.tsx', '.mjs'],
+    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
   },
   output: {
     path: path.resolve(__dirname, './dist'),