quality of life, remote control options and more responsiveness (#14)

* Update dependencies and refactor component imports; rename files to .jsx

* implement search, refactor code, add popular and settings

* save position when going back

* keep dom grid

* add about page, remove switzerland

* fix scroll position after list/video

* fix scroll position after list/video

* update screenshots

* keycode 460 for subtitles

* pause playback when selecting subtitles using the rc button

* add cond virtualization, remove spacer loader

* refactor css a bit

* refactor css

* adjust subtitles matrix color

* fix search css, adjust settings border radius and carousel active item

* improve startup performance and navigation responsiveness

* improve startup performance and navigation responsiveness

* improve startup performance and navigation responsiveness

* Update app version in appinfo.json

---------

Co-authored-by: Lotovic <volkovmqx@gmail.com>

Author: Saulimedes

.github/screenshots/screenshot1.png

@@ -1,3 +1,3 @@
 node_modules/
 dist/
-org.webowsbrew.cccbib*
+org.webosbrew.cccbib_*.ipk

.github/screenshots/screenshot2.png

@@ -19,14 +19,16 @@ This app uses the official media.ccc.de/graphql endpoint. It is built using Reac
 - 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.
+- Quality of Life Remote Controller Button Mapping (Thanks to [Simon34545](https://github.com/Simon34545) LG Input Keymapping overview!) inspired by Youtube/Jellyfin.
 - Configuration page for preferred languages and subtitles.
 - Substitles functionnality.
+- About Info page (in Settings on the bottom).
 
 ## Roadmap
 
 - ☐ Add Speaker page.
-- ☐ Add Info page.
+- ☐ Trigger for remote control/Home Assistant integration (Watching now/Edit Watchlist).
+- ~~☐ Jeopardy Theme song when waiting for too long.~~
 
 ##  Contributions
 

.gitignore

@@ -1,14 +1,14 @@
 {
-    "id": "org.webosbrew.cccbib",
-    "version": "1.0.1",
-    "vendor": "volkovmqx",
-    "type": "web",
-    "main": "index.html",
-    "title": "CCCBib",
-    "iconColor": "#000000",
-    "appDescription": "media.ccc.de library application (EXPERIMENTAL)",
-    "icon": "icon80.png",
-    "splashBackground": "splash.png",
-    "largeIcon": "icon130.png",
-    "disableBackHistoryAPI": true
+  "id": "org.webosbrew.cccbib",
+  "version": "1.0.2",
+  "vendor": "volkovmqx",
+  "type": "web",
+  "main": "index.html",
+  "title": "CCCBib",
+  "iconColor": "#000000",
+  "appDescription": "media.ccc.de library application (EXPERIMENTAL)",
+  "icon": "icon80.png",
+  "splashBackground": "splash.png",
+  "largeIcon": "icon130.png",
+  "disableBackHistoryAPI": true
 }

README.md

@@ -1,9 +1,11 @@
 module.exports = {
+  compact: false,
   presets: [
     [
       '@babel/preset-env',
       {
         targets: {
+          // webOS 2.0+ uses Chrome 38
           chrome: '38',
         },
         useBuiltIns: 'entry',

assets/appinfo.json

@@ -1,6 +1,6 @@
 {
   "name": "org.webosbrew.cccbib",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "media.ccc.de library application (EXPERIMENTAL)",
   "main": "index.js",
   "scripts": {
@@ -29,6 +29,7 @@
     "style-loader": "^3.3.1",
     "vite": "^7.3.0",
     "webpack": "^5.104.1",
+    "webpack-bundle-analyzer": "^5.1.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },

babel.config.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { Center, Loader, Container, Title } from '@mantine/core';
 import { useWindowEvent } from '@mantine/hooks';
 import { useQuery } from '@apollo/client';
@@ -8,7 +8,7 @@ import { Player } from './Player';
 
 import '../styles.css';
 
-export const ConferenceView = React.memo(function ConferenceView({ conferenceId, onFocusSidebar, sidebarFocused, setIsPlayerFullscreen }) {
+export const ConferenceView = React.memo(function ConferenceView({ conferenceId, onFocusSidebar, sidebarFocused, setIsPlayerFullscreen, onClose }) {
   const [playerIsOpen, setPlayerIsOpen] = useState(false);
   const [activeEvent, setActiveEvent] = useState(0);
   const selectedItemRef = useRef(null);
@@ -20,28 +20,96 @@ export const ConferenceView = React.memo(function ConferenceView({ conferenceId,
   });
 
   const eventsPerRow = 4;
+  const visibleRowBuffer = 3; // Render ±3 rows around active row
+  const itemHeight = 180; // Approximate height of each grid item in px
+
+  // Calculate visible window of events for virtual scrolling
+  const { visibleEvents, topSpacerHeight, bottomSpacerHeight } = useMemo(() => {
+    if (!data?.conference?.lectures?.nodes) {
+      return { visibleEvents: [], topSpacerHeight: 0, bottomSpacerHeight: 0 };
+    }
+
+    const events = data.conference.lectures.nodes;
+    const totalEvents = events.length;
+    const totalRows = Math.ceil(totalEvents / eventsPerRow);
+    const activeRow = Math.floor(activeEvent / eventsPerRow);
+
+    const startRow = Math.max(0, activeRow - visibleRowBuffer);
+    const endRow = Math.min(totalRows - 1, activeRow + visibleRowBuffer);
+
+    const startIndex = startRow * eventsPerRow;
+    const endIndex = Math.min(totalEvents, (endRow + 1) * eventsPerRow);
+
+    return {
+      visibleEvents: events.slice(startIndex, endIndex).map((event, i) => ({
+        ...event,
+        originalIndex: startIndex + i
+      })),
+      topSpacerHeight: startRow * itemHeight,
+      bottomSpacerHeight: Math.max(0, (totalRows - endRow - 1) * itemHeight)
+    };
+  }, [data, activeEvent, eventsPerRow, visibleRowBuffer, itemHeight]);
+
+  // Keep scroll position
+  const savedScrollPositionRef = useRef(0);
+  const playerJustClosedRef = useRef(false);
+
+  const handleScroll = useCallback(() => {
+    if (containerRef.current) {
+      savedScrollPositionRef.current = containerRef.current.scrollTop;
+    }
+  }, []);
 
-  // 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;
-      }
+    if (playerIsOpen) {
+      playerJustClosedRef.current = false;
+      return;
     }
+
+    playerJustClosedRef.current = true;
+    const resetTimeout = setTimeout(() => {
+      playerJustClosedRef.current = false;
+    }, 300);
+
+    if (savedScrollPositionRef.current > 0) {
+      const scrollTimeout = setTimeout(() => {
+        if (containerRef.current) {
+          containerRef.current.scrollTop = savedScrollPositionRef.current;
+        }
+      }, 100);
+      return () => {
+        clearTimeout(resetTimeout);
+        clearTimeout(scrollTimeout);
+      };
+    }
+
+    return () => clearTimeout(resetTimeout);
+  }, [playerIsOpen]);
+
+  useEffect(() => {
+    if (playerIsOpen) return;
+
+    const timeoutId = setTimeout(() => {
+      if (selectedItemRef.current && containerRef.current) {
+        const container = containerRef.current;
+        const item = selectedItemRef.current;
+        const headerOffset = 70;
+
+        const itemTop = item.offsetTop - headerOffset;
+        const itemBottom = item.offsetTop + item.offsetHeight;
+        const containerScrollTop = container.scrollTop;
+        const containerHeight = container.clientHeight;
+
+        if (itemTop < containerScrollTop) {
+          container.scrollTop = itemTop;
+        } else if (itemBottom > containerScrollTop + containerHeight) {
+          container.scrollTop = itemBottom - containerHeight + 20;
+        }
+        savedScrollPositionRef.current = container.scrollTop;
+      }
+    }, 50);
+
+    return () => clearTimeout(timeoutId);
   }, [activeEvent]);
 
   // Keyboard navigation
@@ -55,7 +123,12 @@ export const ConferenceView = React.memo(function ConferenceView({ conferenceId,
     // Don't handle keyboard events if sidebar is focused
     if (sidebarFocused) return;
 
-    if (e.key === 'Enter') {
+    if (e.key === 'Escape' || e.keyCode === 461) {
+      e.preventDefault();
+      if (!playerJustClosedRef.current) {
+        onClose?.();
+      }
+    } else if (e.key === 'Enter') {
       setPlayerIsOpen(true);
       setIsPlayerFullscreen(true);
     } else if (e.key === 'ArrowRight') {
@@ -101,51 +174,63 @@ export const ConferenceView = React.memo(function ConferenceView({ conferenceId,
   const conference = data.conference;
   const events = conference.lectures.nodes;
 
-  if (playerIsOpen) {
-    return (
-      <div className="player-fullscreen-container">
-        <Player
+  return (
+    <>
+      {playerIsOpen && (
+        <div className="player-fullscreen-container">
+          <Player
+            event={events[activeEvent]}
+            conferenceTitle={conference.title}
+            onClose={() => {
+              setPlayerIsOpen(false);
+              setIsPlayerFullscreen(false);
+            }}
+          />
+        </div>
+      )}
+      <Container fluid style={{ display: playerIsOpen ? 'none' : 'block' }}>
+        <Preview
           event={events[activeEvent]}
           conferenceTitle={conference.title}
-          onClose={() => {
-            setPlayerIsOpen(false);
-            setIsPlayerFullscreen(false);
-          }}
+          disableVideo={playerIsOpen}
         />
-      </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__container scrollable" ref={containerRef} onScroll={handleScroll}>
+          <div className="conferenceView__header">
+            <h2 className="conferenceView__title">{conference.title}</h2>
+          </div>
+          <div className="conferenceView__grid">
+            {topSpacerHeight > 0 && (
+              <div
+                className="conferenceView__gridSpacer"
+                style={{ height: topSpacerHeight, gridColumn: '1 / -1' }}
+              />
+            )}
+            {visibleEvents.map((event) => (
+              <div
+                key={event.guid}
+                ref={event.originalIndex === activeEvent ? selectedItemRef : null}
+                className={`conferenceView__gridItem ${event.originalIndex === activeEvent ? 'conferenceView__gridItem--active' : ''}`}
+                onClick={() => setActiveEvent(event.originalIndex)}
+              >
+                <img
+                  src={event.images.thumbUrl}
+                  alt={event.title}
+                  className="conferenceView__gridItem__img"
+                  loading="lazy"
+                />
+                <div className="conferenceView__gridItem__title">{event.title}</div>
+              </div>
+            ))}
+            {bottomSpacerHeight > 0 && (
+              <div
+                className="conferenceView__gridSpacer"
+                style={{ height: bottomSpacerHeight, gridColumn: '1 / -1' }}
               />
-              <div className="conferenceView__gridItem__title">{event.title}</div>
-            </div>
-          ))}
+            )}
+          </div>
         </div>
-      </div>
-    </Container>
+      </Container>
+    </>
   );
 });
 

package.json

@@ -5,7 +5,7 @@ import { IconWorld, IconBadgeCc } from '@tabler/icons-react';
 import { useImagePreload } from '../hooks/useImagePreload';
 
 export const EventCarousel = React.memo(function EventCarousel({ eventApis, eventRefs, events, activeEvent, ci, conferenceTitle }) {
-    const [emblaRef, emblaApi] = useEmblaCarousel({ align: 'start', startIndex: activeEvent || 0 });
+    const [emblaRef, emblaApi] = useEmblaCarousel({ align: 'start', startIndex: activeEvent || 0, duration: 15 });
 
     useEffect(() => {
       if (emblaRef && emblaApi) {

src/components/ConferenceView.jsx

@@ -4,11 +4,10 @@ import { ListView } from './ListView';
 
 import '../styles.css';
 
-export const EventsListView = React.memo(function EventsListView({ onClose, onSelectEvent, onFocusSidebar, sidebarFocused }) {
+export const EventsListView = React.memo(function EventsListView({ onClose, onSelectEvent, onFocusSidebar, sidebarFocused, selectedIndex, setSelectedIndex }) {
   const [conferences, setConferences] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const [selectedIndex, setSelectedIndex] = useState(0);
 
   useEffect(() => {
     const fetchConferences = async () => {