Added thumbnails to the Video Streams and Recordings pages

brian7704 · Oct 29, 2024 · cc10826 · cc10826
1 parent 3a0ace3
commit cc10826
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 14 deletions.
diff --git a/src/_versions.ts b/src/_versions.ts
@@ -11,10 +11,10 @@ export interface TsAppVersion {
 export const versions: TsAppVersion = {
     version: '0.0.0',
     name: 'opentakserver-ui',
-    versionDate: '2024-10-18T03:22:38.216Z',
-    gitCommitHash: 'gbc7a9ba',
-    gitCommitDate: '2024-10-18T01:32:43.000Z',
-    versionLong: '0.0.0-gbc7a9ba',
-    gitTag: 'v1.3.0',
+    versionDate: '2024-10-29T03:23:42.940Z',
+    gitCommitHash: 'g3a0ace3',
+    gitCommitDate: '2024-10-22T13:48:35.000Z',
+    versionLong: '0.0.0-g3a0ace3',
+    gitTag: 'v1.4.0rc1',
 };
 export default versions;
diff --git a/src/pages/VideoRecordings.tsx b/src/pages/VideoRecordings.tsx
@@ -3,7 +3,7 @@ import {
     Button,
     Center,
     CloseButton,
-    Flex,
+    Flex, Image,
     Modal,
     Pagination,
     Table,
@@ -23,7 +23,7 @@ import bytes_formatter from '@/bytes_formatter';
 export default function VideoRecordings() {
     const [videoStreams, setVideoStreams] = useState<TableData>({
         caption: '',
-        head: ['Username', 'Protocol', 'Address', 'Port', 'Path', 'Link'],
+        head: ['Thumbnail', 'Start Time', 'End Time', 'Duration', 'Resolution', 'In Progress', 'Path', 'File Size', 'Video Codec', 'Video Bitrate', 'Audio Codec', 'Audio Bitrate', 'Watch', 'Delete', 'Download'],
         body: [],
     });
     const [activePage, setPage] = useState(1);
@@ -34,6 +34,8 @@ export default function VideoRecordings() {
     const [videoUrl, setVideoUrl] = useState('');
     //const [player, setPlayer] = useState<PlayerReference | null>();
     const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
+    const [thumbnail, setThumbnail] = useState('');
+    const [thumbnailOpened, setThumbnailOpened] = useState(false);
 
     function getVideoRecordings() {
         axios.get(
@@ -45,12 +47,17 @@ export default function VideoRecordings() {
             if (r.status === 200) {
                 const tableData: TableData = {
                     caption: '',
-                    head: ['Start Time', 'End Time', 'Duration', 'Resolution', 'In Progress', 'Path', 'File Size', 'Video Codec', 'Video Bitrate', 'Audio Codec', 'Audio Bitrate', 'Watch', 'Delete', 'Download'],
+                    head: ['Thumbnail', 'Start Time', 'End Time', 'Duration', 'Resolution', 'In Progress', 'Path', 'File Size', 'Video Codec', 'Video Bitrate', 'Audio Codec', 'Audio Bitrate', 'Watch', 'Delete', 'Download'],
                     body: [],
                 };
 
                 r.data.results.map((row:any) => {
                     if (tableData.body !== undefined) {
+                        const thumbnail = <Image src={row.thumbnail} onClick={() => {
+                            setThumbnail(row.thumbnail);
+                            setThumbnailOpened(true);
+                        }} />
+
                         const delete_button = <Button
                           onClick={() => {
                                 setDeleteRecordingOpen(true);
@@ -85,7 +92,7 @@ export default function VideoRecordings() {
 
                         const download_button = <Button component="a" href={`${apiRoutes.getRecording}?id=${row.id}`}><IconDownload /></Button>;
 
-                        tableData.body.push([row.start_time, row.stop_time, formattedDuration,
+                        tableData.body.push([thumbnail, row.start_time, row.stop_time, formattedDuration,
                             `${row.width} x ${row.height}`, in_progress_icon, row.path, bytes_formatter(row.file_size),
                             row.video_codec, bytes_formatter(row.video_bitrate, 2, true),
                             row.audio_codec, `${bytes_formatter(row.audio_bitrate, 2, true)}`,
@@ -147,6 +154,10 @@ export default function VideoRecordings() {
                 </Center>
             </Modal>
 
+            <Modal opened={thumbnailOpened} onClose={() => setThumbnailOpened(false)} title="Thumbnail" size="xl">
+                <Image src={thumbnail} />
+            </Modal>
+
             <AspectRatio ratio={16 / 9} h="100%" display={showVideo ? 'block' : 'none'} mt="md" pb={100} mb="xl">
                 <ReactPlayer style={{ position: 'relative' }} controls url={videoUrl} width="100%" height="100%" />
                 <Button

diff --git a/src/pages/VideoStreams.tsx b/src/pages/VideoStreams.tsx
@@ -1,7 +1,7 @@
 import {
     AspectRatio,
     Button,
-    Center, CloseButton, CopyButton, Flex,
+    Center, CopyButton,
     Modal,
     Pagination,
     Switch,
@@ -10,6 +10,7 @@ import {
     TextInput,
     Tooltip,
     useComputedColorScheme,
+    Image
 } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { IconCheck, IconCircleMinus, IconPlus, IconVideo, IconX } from '@tabler/icons-react';
@@ -20,7 +21,7 @@ import { apiRoutes } from '../apiRoutes';
 export default function VideoStreams() {
     const [videoStreams, setVideoStreams] = useState<TableData>({
         caption: '',
-        head: ['Username', 'Protocol', 'Address', 'Port', 'Path', 'Link'],
+        head: ['Thumbnail', 'Username', 'Protocol', 'Address', 'Port', 'Path', 'Link'],
         body: [],
     });
     const [activePage, setPage] = useState(1);
@@ -33,6 +34,8 @@ export default function VideoStreams() {
     const [showVideo, setShowVideo] = useState(false);
     const [videoUrl, setVideoUrl] = useState('');
     const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
+    const [thumbnail, setThumbnail] = useState('');
+    const [thumbnailOpened, setThumbnailOpened] = useState(false);
 
     function setRecord(path:string, record:boolean) {
         axios.patch(
@@ -73,12 +76,16 @@ export default function VideoStreams() {
             if (r.status === 200) {
                 const tableData: TableData = {
                     caption: '',
-                    head: ['Username', 'Path', 'RTSP Link', 'WebRTC Link', 'HLS Link', 'Source', 'Ready', 'Record'],
+                    head: ['Thumbnail', 'Username', 'Path', 'RTSP Link', 'WebRTC Link', 'HLS Link', 'Source', 'Ready', 'Record'],
                     body: [],
                 };
 
                 r.data.results.map((row:any) => {
                     if (tableData.body !== undefined) {
+                        const thumbnail = <Image src={row.thumbnail} onClick={() => {
+                            setThumbnail(row.thumbnail);
+                            setThumbnailOpened(true);
+                        }} />
                         const delete_button = <Button
                           onClick={() => {
                                 setDeleteVideoOpened(true);
@@ -140,7 +147,7 @@ export default function VideoStreams() {
                         )}
                         </CopyButton>;
 
-                        tableData.body.push([row.username, row.path, rtsp_button, webrtc_button, hls_button,
+                        tableData.body.push([thumbnail, row.username, row.path, rtsp_button, webrtc_button, hls_button,
                             row.source, online_icon, record, watch_button, delete_button]);
                     }
                 });
@@ -235,7 +242,9 @@ export default function VideoStreams() {
                     <Button onClick={() => setDeleteVideoOpened(false)}>No</Button>
                 </Center>
             </Modal>
-
+            <Modal opened={thumbnailOpened} onClose={() => setThumbnailOpened(false)} title="Thumbnail" size="xl">
+                <Image src={thumbnail} />
+            </Modal>
 
                     <AspectRatio ratio={16 / 9} display={showVideo ? 'block' : 'none'} h="100%" mb="xl">
                         <iframe