From f9b80842f2d81c9b9ee82d5f379754f2f474c22f Mon Sep 17 00:00:00 2001
From: Jordan Phillips <jordypee27@gmail.com>
Date: Sun, 12 May 2024 11:24:32 +1000
Subject: [PATCH] feat: add flag to anchor encode output + chip color changes

---
 .../interfaces/encode/chips/EncodeSpeed.tsx      |  4 ++--
 .../encode/dialog/panels/EncodeScriptPanel.tsx   |  2 +-
 .../encode/widgets/EncodeOperationWidget.tsx     |  5 ++++-
 .../encode/widgets/EncodeOutputWidget.tsx        | 16 ++++++++++------
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/app/src/components/interfaces/encode/chips/EncodeSpeed.tsx b/app/src/components/interfaces/encode/chips/EncodeSpeed.tsx
index 5b1d6d47..b3482efb 100644
--- 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
index 8343a5eb..7cabbd26 100644
--- 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
index 05166a84..69fe1e91 100644
--- 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
index 051e2b8f..e8a12a41 100644
--- 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