feat: fluid player and skip forward/back buttons

lart2150 · Nov 6, 2022 · 7bee8b4 · 7bee8b4
1 parent fd14727
commit 7bee8b4
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
       "@types/react": "^17.0.43",
       "@types/react-dom": "^17.0.14",
       "@types/video.js": "^7.3.49",
+      "@types/videojs-seek-buttons": "^2.1.0",
       "@vitejs/plugin-react": "^1.3.0",
       "eslint": "^8.10.0",
       "eslint-config-dasprid": "^0.1.8",
@@ -44,6 +45,8 @@
       "react-dom": "^17.0.2",
       "react-router-dom": "^6.2.2",
       "video.js": "^7.20.3",
+      "videojs-font": "^4.0.0",
+      "videojs-seek-buttons": "^3.0.1",
       "zod": "^3.19.1"
    }
 }
diff --git a/src/app.css b/src/app.css
@@ -0,0 +1,18 @@
+button.vjs-seek-button.skip-back {
+    font-family: VideoJS;
+    font-weight: normal;
+    font-style: normal; 
+    cursor: pointer;
+}
+button.vjs-seek-button.skip-back :before {
+    content: "\f11b"; }
+
+button.vjs-seek-button.skip-forward {
+    font-family: VideoJS;
+    font-weight: normal;
+    font-style: normal; 
+    cursor: pointer;
+}
+button.vjs-seek-button.skip-forward :before {
+    content: "\f121"; 
+}
diff --git a/src/components/Playback.tsx b/src/components/Playback.tsx
@@ -94,7 +94,7 @@ const Playback = ({openState, close, recording} : Props) : JSX.Element => {
         return <></>;
     }
 
-    const episode = recording.episodeNum.length > 0 ? `S${recording.seasonNumber} E${recording.episodeNum.join(',')} ` : '';
+    const episode = recording.episodeNum !== undefined ? `S${recording.seasonNumber} E${recording.episodeNum.join(',')} ` : '';
     const secondary = `${episode}${recording.subtitle}`;
     return (
         <Dialog

diff --git a/src/components/VideoJS.tsx b/src/components/VideoJS.tsx
@@ -1,18 +1,20 @@
-import React from 'react';
+import { useEffect, useRef } from 'react';
 import videojs from 'video.js';
+import seekButtons from 'videojs-seek-buttons';
 import 'video.js/dist/video-js.css';
+import 'videojs-font/css/videojs-icons.css';
 
 type Props = {
     options : videojs.PlayerOptions;
     onReady ?: (player : videojs.Player) => void;
 };
 
-export const VideoJS = (props : Props) => {
-    const videoRef = React.useRef<HTMLVideoElement>(null);
-    const playerRef = React.useRef<videojs.Player | null>(null);
+const VideoJS = (props : Props) => {
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const playerRef = useRef<videojs.Player | null>(null);
     const {options, onReady} = props;
 
-    React.useEffect(() => {
+    useEffect(() => {
         // Make sure Video.js player is only initialized once
         if (!playerRef.current) {
             const videoElement = videoRef.current;
@@ -24,8 +26,12 @@ export const VideoJS = (props : Props) => {
                 onReady && onReady(player);
             });
 
-            // You could update an existing player in the `else` block here
-            // on prop change, for example:
+            if (options.liveui) {
+              player.seekButtons({
+                forward: 30,
+                back: 10
+              })
+            }
         } else {
             // const player = playerRef.current;
 
@@ -35,7 +41,7 @@ export const VideoJS = (props : Props) => {
     }, [options, videoRef]);
 
     // Dispose the Video.js player when the functional component unmounts
-    React.useEffect(() => {
+    useEffect(() => {
         const player = playerRef.current;
 
         return () => {
@@ -53,7 +59,7 @@ export const VideoJS = (props : Props) => {
                 style={{
                     width: '100%',
                 }}
-                className='video-js vjs-big-play-centered'
+                className='video-js vjs-big-play-centered vjs-fluid'
             />
         </div>
     );

diff --git a/src/main.tsx b/src/main.tsx
@@ -2,6 +2,7 @@ import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
+import './app.css';
 import {createTheme, CssBaseline} from '@mui/material';
 import {ThemeProvider} from '@mui/material/styles';
 import {StrictMode} from 'react';

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -68,11 +68,9 @@ const Home = () : JSX.Element => {
             const allChannels = await rec.json();
             const channelList = allChannels.channel as Channel[];
             setChannels(channelList.filter(c => c.isReceived));
-            console.log('channels', channelList.filter(c => c.isReceived));
         });
     }, []);
 
-    console.log('uniqueCollections', uniqueCollections);
     return (
         <>
             <Container maxWidth="lg">
@@ -103,7 +101,7 @@ const Home = () : JSX.Element => {
                                 <List>
                                     {collectionRecordings.map(recording => {
                                         const recordingStart = new Date(recording.scheduledStartTime).toLocaleString();
-                                        const episode = recording.episodeNum.length > 0 ? `S${recording.seasonNumber} E${recording.episodeNum.join(',')} ` : '';
+                                        const episode = recording.episodeNum?.length !== undefined ? `S${recording.seasonNumber} E${recording.episodeNum.join(',')} ` : '';
                                         const secondary = `${episode}${recording.subtitle}`;
                                         return <ListItem disablePadding key={recording.recordingId}>
                                             <ListItemButton

diff --git a/src/types/Tivo.ts b/src/types/Tivo.ts
@@ -7,7 +7,7 @@ export type Recording = {
     seasonNumber : number;
 
     collectionTitle : string;
-    episodeNum : string[];
+    episodeNum ?: string[];
     bodyId : string;
     collectionId : string;
     recordingId : string;