refactor: move encode page into library segment

PHILLIPS71 · May 14, 2024 · 4ab28b5 · 4ab28b5
1 parent 0057e45
commit 4ab28b5
Show file tree

Hide file tree

Showing 9 changed files with 140 additions and 128 deletions.
diff --git a/app/src/app/(dashboard)/@dialog/default.tsx b/app/src/app/(dashboard)/@dialog/default.tsx
diff --git a/app/src/app/(dashboard)/encode/[id]/page.tsx b/app/src/app/(dashboard)/encode/[id]/page.tsx
diff --git a/app/src/app/(libraries)/library/[slug]/encode/[id]/layout.tsx b/app/src/app/(libraries)/library/[slug]/encode/[id]/layout.tsx
@@ -0,0 +1,9 @@
+import { LayoutNarrow } from '@/components/layouts'
+
+type LibraryEncodeLayoutProps = React.PropsWithChildren
+
+const LibraryEncodeLayout: React.FC<LibraryEncodeLayoutProps> = ({ children }) => (
+  <LayoutNarrow>{children}</LayoutNarrow>
+)
+
+export default LibraryEncodeLayout
diff --git a/app/src/app/(libraries)/library/[slug]/encode/[id]/page.tsx b/app/src/app/(libraries)/library/[slug]/encode/[id]/page.tsx
@@ -0,0 +1,113 @@
+'use client'
+
+import type { page_EncodedPage_Query } from '@/__generated__/page_EncodedPage_Query.graphql'
+
+import { Alert, Card, Typography } from '@giantnodes/react'
+import { IconAlertCircleFilled } from '@tabler/icons-react'
+import { notFound } from 'next/navigation'
+import { graphql, useLazyLoadQuery } from 'react-relay'
+
+import {
+  EncodeCommandWidget,
+  EncodeOperationWidget,
+  EncodeOutputWidget,
+  EncodeSizeWidget,
+} from '@/components/interfaces/encode'
+import { FileSystemBreadcrumb } from '@/components/interfaces/file-system'
+
+const QUERY = graphql`
+  query page_EncodedPage_Query($where: EncodeFilterInput) {
+    encode(where: $where) {
+      failure_reason
+      file {
+        ...FileSystemBreadcrumbFragment
+      }
+      ...EncodeOperationWidgetFragment
+      ...EncodeCommandWidgetFragment
+      ...EncodeOutputWidgetFragment
+      ...EncodeSizeWidgetFragment
+    }
+  }
+`
+
+type EncodePageProps = {
+  params: {
+    [x: string]: never
+  }
+}
+
+const EncodePage: React.FC<EncodePageProps> = ({ params }) => {
+  const query = useLazyLoadQuery<page_EncodedPage_Query>(QUERY, {
+    where: {
+      id: {
+        eq: decodeURIComponent(params.id),
+      },
+    },
+  })
+
+  if (query.encode == null) {
+    return notFound()
+  }
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-3">
+      <div className="flex flex-col grow gap-3">
+        {query.encode.failure_reason && (
+          <Alert color="danger">
+            <IconAlertCircleFilled size={16} />
+            <Alert.Body>
+              <Alert.Heading>The encode operation encountered an error</Alert.Heading>
+              <Alert.List>
+                <Alert.Item>{query.encode.failure_reason}</Alert.Item>
+              </Alert.List>
+            </Alert.Body>
+          </Alert>
+        )}
+
+        <Card>
+          <Card.Body>
+            <FileSystemBreadcrumb $key={query.encode.file} />
+          </Card.Body>
+        </Card>
+
+        <Card>
+          <Card.Header>
+            <Typography.Text>Size</Typography.Text>
+          </Card.Header>
+
+          <Card.Body className="h-56">
+            <EncodeSizeWidget $key={query.encode} />
+          </Card.Body>
+        </Card>
+
+        <Card>
+          <Card.Header>
+            <Typography.Text>Command</Typography.Text>
+          </Card.Header>
+
+          <Card.Body>
+            <EncodeCommandWidget $key={query.encode} />
+          </Card.Body>
+        </Card>
+
+        <Card>
+          <Card.Header>
+            <Typography.Text>Output</Typography.Text>
+          </Card.Header>
+
+          <Card.Body>
+            <EncodeOutputWidget $key={query.encode} />
+          </Card.Body>
+        </Card>
+      </div>
+
+      <div className="flex flex-col gap-3 min-w-80">
+        <Card>
+          <EncodeOperationWidget $key={query.encode} />
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+export default EncodePage
diff --git a/...ashboard)/@dialog/(.)encode/[id]/page.tsx → .../(...)library/[slug]/encode/[id]/page.tsx b/...ashboard)/@dialog/(.)encode/[id]/page.tsx → .../(...)library/[slug]/encode/[id]/page.tsx
diff --git a/app/src/app/@dialog/default.tsx b/app/src/app/@dialog/default.tsx
@@ -0,0 +1,3 @@
+const DialogDefault: React.FC = () => null
+
+export default DialogDefault
diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
@@ -11,13 +11,18 @@ const inter = Inter({
   variable: '--font-inter',
 })
 
-type ApplicationLayoutProps = React.PropsWithChildren
+type ApplicationLayoutProps = React.PropsWithChildren & {
+  dialog: React.ReactNode
+}
 
-const ApplicationLayout: React.FC<ApplicationLayoutProps> = ({ children }) => (
+const ApplicationLayout: React.FC<ApplicationLayoutProps> = ({ children, dialog }) => (
   <html lang="en">
     <head />
     <body className={clsx([inter.variable, 'bg-background'])}>
-      <ApplicationProviders>{children}</ApplicationProviders>
+      <ApplicationProviders>
+        {children}
+        {dialog}
+      </ApplicationProviders>
     </body>
   </html>
 )

diff --git a/app/src/components/interfaces/dashboard/encode-queue/EncodeQueue.tsx b/app/src/components/interfaces/dashboard/encode-queue/EncodeQueue.tsx
@@ -22,6 +22,9 @@ const FRAGMENT = graphql`
           id
           status
           file {
+            library {
+              slug
+            }
             path_info {
               name
             }
@@ -98,7 +101,9 @@ const EncodeQueue: React.FC<EncodeQueueProps> = ({ $key }) => {
           {(item) => (
             <Table.Row id={item.node.id}>
               <Table.Cell>
-                <Link href={`/encode/${item.node.id}`}>{item.node.file.path_info.name}</Link>
+                <Link href={`/library/${item.node.file.library.slug}/encode/${item.node.id}`}>
+                  {item.node.file.path_info.name}
+                </Link>
               </Table.Cell>
               <Table.Cell>
                 <div className="flex flex-row justify-end gap-1">

diff --git a/app/src/components/interfaces/encode/chips/EncodeDuration.tsx b/app/src/components/interfaces/encode/chips/EncodeDuration.tsx
@@ -26,6 +26,7 @@ const EncodeDuration: React.FC<EncodeDurationChipProps> = ({ $key }) => {
     switch (data.status) {
       case 'COMPLETED':
         return data.completed_at
+
       case 'CANCELLED':
         return data.cancelled_at
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const DialogDefault: React.FC = () => null

		export default DialogDefault