chrome-68 support

.github/workflows/main.yml

@@ -5,37 +5,36 @@ name: Build & Test
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v2
-      with:
-        submodules: recursive
-
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-
-    - run: yarn install --frozen-lockfile
-    - run: yarn run build
-    - run: yarn run package
-
-    - name: Upload artifact
-      uses: actions/upload-artifact@v2
-      with:
-        name: cccbib_ipk
-        path: |
-          ${{github.workspace}}/org.webosbrew.cccbib_*_all.ipk
+      - uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - run: yarn install --frozen-lockfile
+      - run: yarn run build
+      - run: yarn run package
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: cccbib_ipk
+          path: |
+            ${{github.workspace}}/org.webosbrew.cccbib_*_all.ipk

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
-dist/
+dist/
+org.webowsbrew.cccbib*

README.md

@@ -16,13 +16,17 @@ This app uses the official media.ccc.de/graphql endpoint. It is built using Reac
 - Support for conferences lazy loading.
 - Preview of the events on scroll.
 - Support for language change.
+- Smart TV Navigation with React! (Thanks to [this](https://noriginmedia.com/2019/06/24/smart-tv-navigation-with-react/) and [this](https://medium.com/@utkarsh.gupta.316/spatial-navigation-in-react-js-for-smart-tv-3aa6977a94b1).)
+- Search functionnality.
+- Watchlist.
+- Quality of Life remote button usage.
+- Configuration page for preferred languages and subtitles.
+- Substitles functionnality.
 
 ## Roadmap
 
-- ☐ Add Search functionnality.
-- ☐ Add Watchlist functionnality.
-- ☐ Add configuration page.
-- ☐ Add substitles functionnality.
+- ☐ Add Speaker page.
+- ☐ Add Info page.
 
 ##  Contributions
 
@@ -56,6 +60,8 @@ The Logo ["Voctocat"](https://morr.cc/voctocat/) is kindly provided by [Blinry](
 
 WebOS Project architecture from ["Informatic"](https://github.com/informatic/streamkatze)
 
+
+
 ## License
 
-Check LICENSE
+Check LICENSE

assets/appinfo.json

@@ -1,11 +1,11 @@
 {
     "id": "org.webosbrew.cccbib",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "vendor": "volkovmqx",
     "type": "web",
     "main": "index.html",
     "title": "CCCBib",
-    "iconColor": "#231f20",
+    "iconColor": "#000000",
     "appDescription": "media.ccc.de library application (EXPERIMENTAL)",
     "icon": "icon80.png",
     "splashBackground": "splash.png",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "org.webosbrew.cccbib",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "media.ccc.de library application (EXPERIMENTAL)",
   "main": "index.js",
   "scripts": {
@@ -16,33 +16,35 @@
   "author": "informatic",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.1",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
     "@webosose/ares-cli": "^2.2.0",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^10.2.0",
     "css-loader": "^6.5.1",
-    "postcss": "^8.4.33",
-    "postcss-preset-mantine": "^1.12.3",
+    "postcss": "^8.5.6",
+    "postcss-preset-mantine": "^1.18.0",
     "postcss-simple-vars": "^7.0.1",
     "style-loader": "^3.3.1",
-    "webpack": "^5.3.2",
+    "vite": "^7.3.0",
+    "webpack": "^5.104.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
-    "@apollo/client": "^3.8.10",
-    "@mantine/core": "^7.4.2",
-    "@mantine/hooks": "^7.4.2",
+    "@apollo/client": "^3.14.0",
+    "@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",
-    "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",
+    "core-js": "^3.47.0",
+    "embla-carousel-react": "^8.6.0",
+    "graphql": "^16.12.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.2",
+    "react-tv-player": "^1.1.13",
     "regenerator-runtime": "^0.14.1"
   }
 }

src/App.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {
+  HashRouter as Router,
+  Route,
+  Routes,
+} from 'react-router-dom';
+
+import MainView from './views/Main';
+import { OfflineBanner } from './components/OfflineBanner';
+
+const App = () => (
+  <>
+    <OfflineBanner />
+    <Router>
+      <Routes>
+        <Route exact path="/" element={<MainView />} />
+      </Routes>
+    </Router>
+  </>
+);
+
+export default App;

src/components/ConferenceView.jsx

@@ -0,0 +1,152 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Center, Loader, Container, Title } from '@mantine/core';
+import { useWindowEvent } from '@mantine/hooks';
+import { useQuery } from '@apollo/client';
+import { GET_CONFERENCE } from '../data';
+import { Preview } from './Preview';
+import { Player } from './Player';
+
+import '../styles.css';
+
+export const ConferenceView = React.memo(function ConferenceView({ conferenceId, onFocusSidebar, sidebarFocused, setIsPlayerFullscreen }) {
+  const [playerIsOpen, setPlayerIsOpen] = useState(false);
+  const [activeEvent, setActiveEvent] = useState(0);
+  const selectedItemRef = useRef(null);
+  const containerRef = useRef(null);
+
+  const { loading, error, data } = useQuery(GET_CONFERENCE, {
+    variables: { id: conferenceId },
+    fetchPolicy: 'cache-first', // Use cache for better performance
+  });
+
+  const eventsPerRow = 4;
+
+  // Scroll selected item into view with header offset
+  useEffect(() => {
+    if (selectedItemRef.current && containerRef.current) {
+      const container = containerRef.current;
+      const item = selectedItemRef.current;
+      const headerOffset = 70; // Account for sticky header
+
+      const itemTop = item.offsetTop - headerOffset;
+      const itemBottom = item.offsetTop + item.offsetHeight;
+      const containerScrollTop = container.scrollTop;
+      const containerHeight = container.clientHeight;
+
+      // Check if item is above visible area
+      if (itemTop < containerScrollTop) {
+        container.scrollTop = itemTop;
+      }
+      // Check if item is below visible area
+      else if (itemBottom > containerScrollTop + containerHeight) {
+        container.scrollTop = itemBottom - containerHeight + 20;
+      }
+    }
+  }, [activeEvent]);
+
+  // Keyboard navigation
+  useWindowEvent('keydown', (e) => {
+    if (!data || !data.conference || !data.conference.lectures) return;
+    const totalEvents = data.conference.lectures.nodes.length;
+
+    // Don't handle keyboard events when player is open (Player handles its own back/escape)
+    if (playerIsOpen) return;
+
+    // Don't handle keyboard events if sidebar is focused
+    if (sidebarFocused) return;
+
+    if (e.key === 'Enter') {
+      setPlayerIsOpen(true);
+      setIsPlayerFullscreen(true);
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      setActiveEvent((prev) => (prev + 1) % totalEvents);
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      // Check if at start of a row (leftmost position)
+      if (activeEvent % eventsPerRow === 0) {
+        onFocusSidebar();
+      } else {
+        setActiveEvent((prev) => prev - 1);
+      }
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveEvent((prev) => Math.min(prev + eventsPerRow, totalEvents - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveEvent((prev) => Math.max(prev - eventsPerRow, 0));
+    }
+  });
+
+  if (loading) {
+    return (
+      <Center h={"100vh"}>
+        <Loader color="#AAF40D" type="dots" size="xl" />
+      </Center>
+    );
+  }
+
+  if (error) {
+    return <p>Error: {error.message}</p>;
+  }
+
+  if (!data || !data.conference || !data.conference.lectures || !data.conference.lectures.nodes.length) {
+    return (
+      <Center h={"100vh"}>
+        <p>No videos found for this conference.</p>
+      </Center>
+    );
+  }
+
+  const conference = data.conference;
+  const events = conference.lectures.nodes;
+
+  if (playerIsOpen) {
+    return (
+      <div className="player-fullscreen-container">
+        <Player
+          event={events[activeEvent]}
+          conferenceTitle={conference.title}
+          onClose={() => {
+            setPlayerIsOpen(false);
+            setIsPlayerFullscreen(false);
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <Container fluid>
+      <Preview
+        event={events[activeEvent]}
+        conferenceTitle={conference.title}
+      />
+      <div className="conferenceView__container" ref={containerRef}>
+        <div className="conferenceView__header">
+          <h2 className="conferenceView__title">{conference.title}</h2>
+        </div>
+        <div className="conferenceView__grid">
+          {events.map((event, index) => (
+            <div
+              key={event.guid}
+              ref={index === activeEvent ? selectedItemRef : null}
+              className={`conferenceView__gridItem ${index === activeEvent ? 'conferenceView__gridItem--active' : ''}`}
+              onClick={() => setActiveEvent(index)}
+            >
+              <img
+                src={event.images.thumbUrl}
+                alt={event.title}
+                className="conferenceView__gridItem__img"
+                loading="lazy"
+              />
+              <div className="conferenceView__gridItem__title">{event.title}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Container>
+  );
+});
+
+export default ConferenceView;