fixed size bars

mdakram28 · Jan 17, 2024 · 0036dc4 · 0036dc4
1 parent 5660c05
commit 0036dc4
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 33 deletions.
diff --git a/docs/assets/index-QFeke28d.js → docs/assets/index-EqN4VRAj.js b/docs/assets/index-QFeke28d.js → docs/assets/index-EqN4VRAj.js
diff --git a/docs/index.html b/docs/index.html
@@ -13,7 +13,7 @@
     />
     <script src="https://kit.fontawesome.com/877d2cecdc.js" crossorigin="anonymous"></script>
     <title>AV1 Bitstream Parser</title>
-    <script type="module" crossorigin src="./assets/index-QFeke28d.js"></script>
+    <script type="module" crossorigin src="./assets/index-EqN4VRAj.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-2FATsEzD.css">
   </head>
   <body>

diff --git a/src/browser-util.tsx b/src/browser-util.tsx
@@ -22,3 +22,8 @@ export function downloadBlob(parts: Uint8Array[], fileName: string, mimeType: st
         return window.URL.revokeObjectURL(url);
     }, 1000);
 }
+
+
+export function mod(n: number, m: number) {
+    return ((n % m) + m) % m;
+}
diff --git a/src/components/frame-viewer.tsx b/src/components/frame-viewer.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { BitstreamExplorerContext } from "../bitstream/bitstream-explorer";
+import { mod } from "../browser-util";
 
 
 
@@ -9,25 +10,28 @@ export function FrameViewer({ config }: { config: VideoDecoderConfig }) {
     const containerRef = useRef<HTMLDivElement>(null);
     const [frames, setFrames] = useState<VideoFrame[]>([]);
     const [currentFrame, setCurrentFrame] = useState<number>(0);
-    
+
     const redraw = useCallback(() => {
         if (currentFrame >= frames.length) return;
 
-        canvasRef.current!.width = containerRef.current!.clientWidth;
-        canvasRef.current!.height = containerRef.current!.clientHeight;
-
         const canvas = canvasRef.current!;
-        const context = canvas.getContext('2d')!;
+        const container = containerRef.current!;
         const frame = frames[currentFrame];
-        console.log(frame.displayHeight, frame.displayWidth);
 
         var vRatio = frame.displayWidth / frame.displayHeight;
 
-        const w = canvas.width
-        const h = canvas.width/vRatio;
+        const w = container.clientWidth - 2;
+        const h = container.clientWidth / vRatio - 2;
+        canvas.width = w;
+        canvas.height = h;
+        // @ts-ignore
+        canvas.style.width = w;
+        // @ts-ignore
+        canvas.style.height = h;
+
+        const context = canvas.getContext('2d')!;
         context.drawImage(frame, 0, 0, w, h);
-        context.strokeStyle = "green";
-        context.strokeRect(0,0, w, h);
+
 
     }, [frames, currentFrame, containerRef]);
 
@@ -74,20 +78,42 @@ export function FrameViewer({ config }: { config: VideoDecoderConfig }) {
         return () => resizeObserver.disconnect();
     }, [containerRef.current]);
 
-    return <div className="flexv-item" ref={containerRef} style={{overflow: "hidden"}}>
+    return <div className="flexv-item" ref={containerRef} style={{ overflow: "hidden" }}>
         <div className="toolbar">
             <a data-tooltip="Previous frame" className="toolbar-item"
-                onClick={() => currentFrame > 0 && setCurrentFrame( (currentFrame - 1) % frames.length)}>
+                onClick={() => setCurrentFrame(mod(currentFrame - 1, frames.length))}>
                 <i className="fas fa-chevron-left"></i>
             </a>
             <div className="toolbar-item">
                 {currentFrame} / {frames.length}
             </div>
             <a data-tooltip="Next frame" className="toolbar-item"
-                onClick={() => setCurrentFrame((currentFrame + 1) % frames.length)}>
+                onClick={() => setCurrentFrame(mod(currentFrame + 1, frames.length))}>
                 <i className="fas fa-chevron-right"></i>
             </a>
         </div>
-        <canvas ref={canvasRef}/>
+        <canvas ref={canvasRef} tabIndex={0}
+            style={{ border: "1px solid var(--border-color)" }}
+            onKeyDown={e => {
+                if (e.key === "ArrowRight") {
+                    setCurrentFrame(mod(currentFrame + 1, frames.length))
+                } else if (e.key === "ArrowLeft") {
+                    setCurrentFrame(mod(currentFrame - 1, frames.length))
+                }
+            }} />
+
+        <br />
+        <br />
+        <div style={{ height: 7, width: "100%", borderRadius: 10, backgroundColor: "var(--secondary-color)" }}>
+            <div style={{
+                // display: "inline-block",
+                height: "100%",
+                width: (100 * currentFrame / frames.length) + "%",
+                borderTopLeftRadius: 10,
+                borderBottomLeftRadius: 10,
+                borderRight: "4px solid white",
+                backgroundColor: "var(--primary-color)"
+            }} />
+        </div>
     </div>
 }
diff --git a/src/components/syntax-table.tsx b/src/components/syntax-table.tsx
@@ -116,7 +116,7 @@ export function SyntaxTable({}: {}
 
     const maxNodeSize = useMemo(() => {
         let maxSize = 8;
-        forEachChild(root, "open_bitstream_unit", (obu) => {
+        root.children?.forEach(obu => {
             maxSize = Math.max(maxSize, obu.size);
         });
         return maxSize;

diff --git a/src/main.tsx b/src/main.tsx
@@ -7,6 +7,13 @@ import theme from './theme';
 import { BrowserRouter, HashRouter } from 'react-router-dom';
 import { MemoryRouter } from 'react-router-dom'
 
+// @ts-ignore
+Number.prototype.mod = function (n) {
+  "use strict";
+  // @ts-ignore
+  return ((this % n) + n) % n;
+};
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <>
     <HashRouter>