Merge pull request #1 from volkovmqx/project-alpha

Project-alpha

README.md

@@ -9,29 +9,32 @@
 
 ## Background
 
-This app uses the official media.ccc.de/graphql endpoint. It is built using React, Swiper, Mantine, React TV Player and ❤️ from Leipzig.
+This app uses the official media.ccc.de/graphql endpoint. It is built using React, Embla, Mantine, React TV Player and ❤️ from Leipzig.
 
 ## Features
 
 - Support for conferences lazy loading.
+- Preview of the events on scroll.
 - Support for language change.
 
 ## Roadmap
 
-- ☐ Switch to Swiper virtual slides to optimise the DOM
-- ☐ Add Search functionnality
+- ☐ Add Search functionnality.
+- ☐ Add Watchlist functionnality.
+- ☐ Add configuration page.
+- ☐ Add substitles functionnality.
 
 ##  Contributions
 
-Either you found a bug, optimisation strategy or want something implemented, go ahead and hack your way into the code, PRs are welcome.
+Either you found a bug, optimisation strategy or want something implemented, go ahead and hack your way into the code, PRs are welcome 🌱.
 
 
 ## Development
 
 ```sh
 yarm install
 
-# Serve development build on http://127.0.0.1:3000
+# Serve development build on http://127.0.0.1:3333
 yarn start
 
 # Production build (dumped into dist/)

assets/appinfo.json

@@ -1,6 +1,6 @@
 {
     "id": "org.webosbrew.cccbib",
-    "version": "0.1.0",
+    "version": "1.0.0",
     "vendor": "volkovmqx",
     "type": "web",
     "main": "index.html",
@@ -9,5 +9,6 @@
     "appDescription": "media.ccc.de library application (EXPERIMENTAL)",
     "icon": "icon80.png",
     "splashBackground": "splash.png",
-    "largeIcon": "icon130.png"
+    "largeIcon": "icon130.png",
+    "disableBackHistoryAPI": true
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "org.webosbrew.cccbib",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "media.ccc.de library application (EXPERIMENTAL)",
   "main": "index.js",
   "scripts": {
@@ -37,12 +37,12 @@
     "@mantine/hooks": "^7.4.2",
     "@tabler/icons-react": "^2.46.0",
     "core-js": "^3.20.1",
+    "embla-carousel-react": "^8.0.0-rc20",
     "graphql": "^16.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.2.1",
     "react-tv-player": "^1.1.4",
-    "regenerator-runtime": "^0.14.1",
-    "swiper": "^11.0.5"
+    "regenerator-runtime": "^0.14.1"
   }
 }

src/App.js

@@ -6,13 +6,11 @@ import {
 } from 'react-router-dom';
 
 import MainView from './views/Main';
-import EventView from './views/Event';
 
 const App = () => (
   <Router>
     <Routes>
       <Route exact path="/" element={<MainView />} />
-      <Route exact path="/event/:id" element={<EventView />} />
     </Routes>
   </Router>
 );

src/components/EventCarousel.js

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+import useEmblaCarousel from 'embla-carousel-react'
+import { Title } from '@mantine/core';
+
+export function EventCarousel({ eventApis, eventRefs, events, activeEvent, ci, conferenceTitle }) {
+    const [emblaRef, emblaApi] = useEmblaCarousel({align: 'start',  startIndex: activeEvent || 0});
+    useEffect(() => {
+      if (emblaRef && emblaApi) {
+        eventRefs.current[ci] = emblaRef;
+        eventApis.current[ci] = emblaApi;
+      }
+    }, [emblaRef, emblaApi]);
+
+    return (
+      <>
+      <Title size={"48px"} mb={20}>{conferenceTitle}</Title>
+      <div className="embla">
+        <div className="embla__viewport" ref={emblaRef}>
+          <div className="embla__container">
+            {events.lectures.nodes.map((e, ei) => (
+              <div className={ci === 0 && (activeEvent || 0) === ei ? 'embla__slide active' : 'embla__slide'} key={ei}>
+                <img
+                  className="embla__slide__img"
+                  src={e.images.thumbUrl}
+                  loading="lazy"
+                  alt={e.title}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      </>
+    )
+  }

src/components/Home.js

@@ -0,0 +1,103 @@
+import React, { useState, useRef, useEffect } from 'react';
+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 { handleArrowDown, handleArrowUp, handleArrowLeft, handleArrowRight } from '../helpers/helpers';
+import { EventCarousel } from '../components/EventCarousel';
+
+import '../styles.css';
+
+export const Home = () => {
+  const [playerIsOpen, setPlayerIsOpen] = useState(false)
+  const [activeSlice, setActiveSlice] = useState(0)
+  const [dataSlice, dataSliceHandlers] = useListState([]);
+  const [isLoading, setIsLoading] = useState(false)
+  const [activeEvents, setActiveEvents] = useState({ 0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 });
+
+  const { loading, error, data, fetchMore } = useQuery(GET_RECENT_CONFERENCES, {
+    variables: { offset: 0 },
+  });
+
+  useEffect(() => {
+    if (!data) return
+    if (data.conferencesRecent) {
+      if (activeSlice == 0) {
+        dataSliceHandlers.setState(data.conferencesRecent)
+      } else {
+        dataSliceHandlers.setState(data.conferencesRecent.slice(activeSlice, activeSlice + 6))
+      }
+      setIsLoading(false)
+      //setActiveSlice(activeSlice + 1)
+    }
+  }, [data])
+
+  const eventRefs = useRef([]);
+  const eventApis = useRef([]);
+
+
+  useWindowEvent('keydown', (e) => {
+    if (!data) return
+    if ((e.key === 'Escape' || e.key === 'Backspace' || e.keyCode == '461') && playerIsOpen) {
+      // close the Player
+      e.preventDefault()
+      setPlayerIsOpen(false)
+
+    } else if (e.key === 'Enter' && !playerIsOpen) {
+      // go to the Event page
+      setPlayerIsOpen(true)
+    } else if (e.key === 'ArrowRight' && !playerIsOpen) {
+      handleArrowRight(eventApis, activeEvents, activeSlice, setActiveEvents)
+    } else if (e.key === 'ArrowLeft' && !playerIsOpen) {
+      handleArrowLeft(eventApis, activeEvents, activeSlice, setActiveEvents)
+    } else if (e.key === 'ArrowDown' && !playerIsOpen) {
+
+      handleArrowDown(setActiveSlice, dataSlice, dataSliceHandlers, data, setIsLoading, fetchMore)
+    } else if (e.key === 'ArrowUp' && !playerIsOpen) {
+      handleArrowUp(setActiveSlice, dataSliceHandlers, data)
+    }
+  })
+  if (loading || dataSlice.length == 0) return <Center h={"100vh"} ><Loader color="gray" type="dots" size="xl" /></Center>;
+  if (error) return <p>Error : {error.message}</p>;
+  if (playerIsOpen) return <Player event={dataSlice[0].lectures.nodes[activeEvents[activeSlice] || 0]} conferenceTitle={dataSlice[0].title} />
+  return (
+    <Container fluid>
+      <Preview
+        event={dataSlice[0].lectures.nodes[activeEvents[activeSlice] || 0]}
+        conferenceTitle={dataSlice[0].title}
+      />
+      <div className="container">
+        <div className="embla_vertical">
+          <div className="embla__viewport">
+            <div className="embla__container embla__container_vertical">
+              {dataSlice.map((c, ci) => (
+                <div className="embla__slide" key={ci}>
+                  <EventCarousel
+                    eventRefs={eventRefs}
+                    eventApis={eventApis}
+                    events={c}
+                    activeEvent={activeEvents[ci + activeSlice]}
+                    ci={ci}
+                    conferenceTitle={c.title}
+
+                  />
+                </div>
+              ))}
+              {isLoading && (
+                <div className="embla__slide">
+                  <Box className='skeleton'>
+                    <div className='loaderContainer'>
+                      <Loader color="gray" type="dots" size="xl" />
+                    </div>
+                  </Box>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Container>
+  );
+}