feat: add flag to anchor encode output + chip color changes

PHILLIPS71 · May 12, 2024 · f9b8084 · f9b8084
1 parent 6506c2b
commit f9b8084
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git a/app/src/components/interfaces/encode/chips/EncodeSpeed.tsx b/app/src/components/interfaces/encode/chips/EncodeSpeed.tsx
@@ -50,9 +50,9 @@ const EncodeSpeed: React.FC<EncodeSpeedProps> = ({ $key }) => {
 
   return (
     <>
-      <Chip color="info">{data.speed.frames} fps</Chip>
+      <Chip color="warning">{data.speed.frames} fps</Chip>
 
-      <Chip color="info">{filesize(data.speed.bitrate * 0.125, { bits: true }).toLowerCase()}/s</Chip>
+      <Chip color="success">{filesize(data.speed.bitrate * 0.125, { bits: true }).toLowerCase()}/s</Chip>
 
       <Chip color="info">{data.speed.scale.toFixed(2)}x</Chip>
     </>

diff --git a/app/src/components/interfaces/encode/dialog/panels/EncodeScriptPanel.tsx b/app/src/components/interfaces/encode/dialog/panels/EncodeScriptPanel.tsx
@@ -56,7 +56,7 @@ const EncodeScriptPanel: React.FC<EncodeScriptPanelProps> = ({ $key }) => {
         </Card.Header>
 
         <Card.Body className="overflow-y-auto">
-          <EncodeOutputWidget $key={data} />
+          <EncodeOutputWidget isAnchored $key={data} />
         </Card.Body>
       </Card>
     </>

diff --git a/app/src/components/interfaces/encode/widgets/EncodeOperationWidget.tsx b/app/src/components/interfaces/encode/widgets/EncodeOperationWidget.tsx
@@ -86,7 +86,10 @@ const EncodeOperationWidget: React.FC<EncodeOperationWidgetProps> = ({ $key }) =
             </Table.Cell>
             <Table.Cell className="text-right">
               <Typography.Text>
-                <Chip color="danger" title={dayjs(data.updated_at).format('L LT')}>
+                <Chip
+                  className="text-pink-500 bg-pink-500/20 border-pink-500"
+                  title={dayjs(data.updated_at).format('L LT')}
+                >
                   {dayjs(data.updated_at).fromNow()}
                 </Chip>
               </Typography.Text>

diff --git a/app/src/components/interfaces/encode/widgets/EncodeOutputWidget.tsx b/app/src/components/interfaces/encode/widgets/EncodeOutputWidget.tsx
@@ -1,6 +1,7 @@
 import type { EncodeOutputWidgetFragment$key } from '@/__generated__/EncodeOutputWidgetFragment.graphql'
 import type { EncodeOutputWidgetSubscription } from '@/__generated__/EncodeOutputWidgetSubscription.graphql'
 
+import React from 'react'
 import { graphql, useFragment, useSubscription } from 'react-relay'
 
 import CodeBlock from '@/components/ui/code-block/CodeBlock'
@@ -23,9 +24,10 @@ const SUBSCRIPTION = graphql`
 
 type EncodeOutputWidgetProps = {
   $key: EncodeOutputWidgetFragment$key
+  isAnchored?: boolean
 }
 
-const EncodeOutputWidget: React.FC<EncodeOutputWidgetProps> = ({ $key }) => {
+const EncodeOutputWidget: React.FC<EncodeOutputWidgetProps> = ({ $key, isAnchored }) => {
   const data = useFragment(FRAGMENT, $key)
 
   useSubscription<EncodeOutputWidgetSubscription>({
@@ -39,11 +41,13 @@ const EncodeOutputWidget: React.FC<EncodeOutputWidgetProps> = ({ $key }) => {
     },
   })
 
-  return (
-    <ScrollAnchor>
-      <CodeBlock language="powershell">{data.output}</CodeBlock>
-    </ScrollAnchor>
-  )
+  const block = React.useCallback(() => <CodeBlock language="powershell">{data.output}</CodeBlock>, [data.output])
+
+  return isAnchored ? <ScrollAnchor>{block()}</ScrollAnchor> : block()
+}
+
+EncodeOutputWidget.defaultProps = {
+  isAnchored: false,
 }
 
 export default EncodeOutputWidget