Merge pull request #69 from catdad/single-stream-info

info for a single-stream file can now be displayed
catdad · May 13, 2024 · cee1807 · cee1807
2 parents 7a83445 + 001197d
commit cee1807
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/renderer/Tabs/Tabs.js b/renderer/Tabs/Tabs.js
@@ -19,7 +19,8 @@ const TABS = [
 const TabContext = createContext({});
 
 const withTabs = Component => ({ children, ...props }) => {
-  const tab = useConfigSignal('default-tab', TABS[0].name);
+  const defaultTab = TABS[0].name;
+  const tab = useConfigSignal('default-tab', defaultTab);
 
   const tabDom = Object.keys(TABS).map(name => {
     return html`<${M`Tab`} label=${name} />`;
@@ -33,17 +34,19 @@ const withTabs = Component => ({ children, ...props }) => {
     tab.value = TABS[newValue].name;
   };
 
+  const selectedTab = TABS[tab.value] || TABS[defaultTab];
+
   const TabBar = () => html`
     <div>
       <${M`AppBar`} position=static>
-        <${M`Tabs`} value=${TABS[tab.value].idx} onChange=${onTabChange} variant=scrollable scrollButtons=auto>
+        <${M`Tabs`} value=${selectedTab.idx} onChange=${onTabChange} variant=scrollable scrollButtons=auto>
           ${tabDom}
         <//>
       <//>
     </div>
   `;
 
-  const Tab = () => html`<${TABS[tab.value].Component} />`;
+  const Tab = () => html`<${selectedTab.Component} />`;
 
   return html`
     <${TabContext.Provider} value=${{ Tab, TabBar }}>

diff --git a/renderer/VideoInfo/VideoInfo.js b/renderer/VideoInfo/VideoInfo.js
@@ -15,6 +15,12 @@ const FileInput = require('../FileInput/FileInput.js');
 css('../styles/tab-panel.css');
 css('./VideoInfo.css');
 
+const fps = value => {
+  return /^[0-9]{1,}\/[0-9]{1,}$/.test(value) ?
+    +eval(value).toFixed(2) :
+    'unknown';
+};
+
 function VideoInfo() {
   const metadata = useSignal([]);
 
@@ -58,8 +64,8 @@ function VideoInfo() {
 
     const seconds = get(file, 'video.duration', 0);
     const duration = prettyMs(Number(seconds) * 1000);
-    const videoSummary = `${video.codec_name} (${video.width}x${video.height})`;
-    const audioSummary = `${audio.codec_name} (${audio.channels} channels)`;
+    const videoSummary = video ? `${video.codec_name} (${video.width}x${video.height}) (${fps(video.r_frame_rate)} fps)` : 'N/A';
+    const audioSummary = audio ? `${audio.codec_name} (${audio.channels} channels)` : 'N/A';
 
     // this object sets the order of the UI
     // yes, I know order is technically not guaranteed, but it works