-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: use separate encode chip components
- Loading branch information
1 parent
136e2bd
commit 6506c2b
Showing
15 changed files
with
305 additions
and
295 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 47 additions & 0 deletions
47
app/src/components/interfaces/encode/chips/EncodeDuration.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import type { EncodeDurationFragment$key } from '@/__generated__/EncodeDurationFragment.graphql' | ||
|
|
||
| import { Chip } from '@giantnodes/react' | ||
| import dayjs from 'dayjs' | ||
| import React from 'react' | ||
| import { graphql, useFragment } from 'react-relay' | ||
|
|
||
| const FRAGMENT = graphql` | ||
| fragment EncodeDurationFragment on Encode { | ||
| status | ||
| failed_at | ||
| cancelled_at | ||
| completed_at | ||
| created_at | ||
| } | ||
| ` | ||
|
|
||
| type EncodeDurationChipProps = { | ||
| $key: EncodeDurationFragment$key | ||
| } | ||
|
|
||
| const EncodeDuration: React.FC<EncodeDurationChipProps> = ({ $key }) => { | ||
| const data = useFragment(FRAGMENT, $key) | ||
|
|
||
| const date = React.useMemo<Date | undefined>(() => { | ||
| switch (data.status) { | ||
| case 'COMPLETED': | ||
| return data.completed_at | ||
| case 'CANCELLED': | ||
| return data.cancelled_at | ||
|
|
||
| case 'FAILED': | ||
| return data.failed_at | ||
|
|
||
| default: | ||
| return undefined | ||
| } | ||
| }, [data.cancelled_at, data.completed_at, data.failed_at, data.status]) | ||
|
|
||
| return ( | ||
| <Chip color="info" title={dayjs(date).format('L LT')}> | ||
| {dayjs.duration(dayjs(date).diff(data.created_at)).format('H[h] m[m] s[s]')} | ||
| </Chip> | ||
| ) | ||
| } | ||
|
|
||
| export default EncodeDuration |
51 changes: 51 additions & 0 deletions
51
app/src/components/interfaces/encode/chips/EncodePercent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import type { EncodePercentFragment$key } from '@/__generated__/EncodePercentFragment.graphql' | ||
|
|
||
| import { Chip } from '@giantnodes/react' | ||
| import React from 'react' | ||
| import { graphql, useFragment, useSubscription } from 'react-relay' | ||
|
|
||
| import { percent } from '@/utilities/numbers' | ||
|
|
||
| const FRAGMENT = graphql` | ||
| fragment EncodePercentFragment on Encode { | ||
| id | ||
| percent | ||
| } | ||
| ` | ||
|
|
||
| const SUBSCRIPTION = graphql` | ||
| subscription EncodePercentSubscription($where: EncodeFilterInput) { | ||
| encode_progressed(where: $where) { | ||
| ...EncodePercentFragment | ||
| } | ||
| } | ||
| ` | ||
|
|
||
| type EncodePercentProps = { | ||
| $key: EncodePercentFragment$key | ||
| } | ||
|
|
||
| const EncodePercent: React.FC<EncodePercentProps> = ({ $key }) => { | ||
| const data = useFragment(FRAGMENT, $key) | ||
|
|
||
| useSubscription({ | ||
| subscription: SUBSCRIPTION, | ||
| variables: { | ||
| variables: { | ||
| where: { | ||
| id: { | ||
| eq: data.id, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }) | ||
|
|
||
| if (data.percent == null) { | ||
| return undefined | ||
| } | ||
|
|
||
| return <Chip color="brand">{percent(data.percent)}</Chip> | ||
| } | ||
|
|
||
| export default EncodePercent |
62 changes: 62 additions & 0 deletions
62
app/src/components/interfaces/encode/chips/EncodeSpeed.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import type { EncodeSpeedFragment$key } from '@/__generated__/EncodeSpeedFragment.graphql' | ||
|
|
||
| import { Chip } from '@giantnodes/react' | ||
| import { filesize } from 'filesize' | ||
| import React from 'react' | ||
| import { graphql, useFragment, useSubscription } from 'react-relay' | ||
|
|
||
| const FRAGMENT = graphql` | ||
| fragment EncodeSpeedFragment on Encode { | ||
| id | ||
| speed { | ||
| frames | ||
| bitrate | ||
| scale | ||
| } | ||
| } | ||
| ` | ||
|
|
||
| const SUBSCRIPTION = graphql` | ||
| subscription EncodeSpeedSubscription($where: EncodeFilterInput) { | ||
| encode_speed_change(where: $where) { | ||
| ...EncodeSpeedFragment | ||
| } | ||
| } | ||
| ` | ||
|
|
||
| type EncodeSpeedProps = { | ||
| $key: EncodeSpeedFragment$key | ||
| } | ||
|
|
||
| const EncodeSpeed: React.FC<EncodeSpeedProps> = ({ $key }) => { | ||
| const data = useFragment(FRAGMENT, $key) | ||
|
|
||
| useSubscription({ | ||
| subscription: SUBSCRIPTION, | ||
| variables: { | ||
| variables: { | ||
| where: { | ||
| id: { | ||
| eq: data.id, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }) | ||
|
|
||
| if (data.speed == null) { | ||
| return undefined | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <Chip color="info">{data.speed.frames} fps</Chip> | ||
|
|
||
| <Chip color="info">{filesize(data.speed.bitrate * 0.125, { bits: true }).toLowerCase()}/s</Chip> | ||
|
|
||
| <Chip color="info">{data.speed.scale.toFixed(2)}x</Chip> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default EncodeSpeed |
76 changes: 76 additions & 0 deletions
76
app/src/components/interfaces/encode/chips/EncodeStatus.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import type { EncodeStatusFragment$key } from '@/__generated__/EncodeStatusFragment.graphql' | ||
| import type { ChipProps } from '@giantnodes/react' | ||
|
|
||
| import { Chip } from '@giantnodes/react' | ||
| import dayjs from 'dayjs' | ||
| import React from 'react' | ||
| import { graphql, useFragment } from 'react-relay' | ||
|
|
||
| const FRAGMENT = graphql` | ||
| fragment EncodeStatusFragment on Encode { | ||
| status | ||
| failed_at | ||
| cancelled_at | ||
| completed_at | ||
| } | ||
| ` | ||
|
|
||
| type EncodeStatusChipProps = { | ||
| $key: EncodeStatusFragment$key | ||
| } | ||
|
|
||
| const EncodeStatus: React.FC<EncodeStatusChipProps> = ({ $key }) => { | ||
| const data = useFragment(FRAGMENT, $key) | ||
|
|
||
| const color = React.useMemo<ChipProps['color']>(() => { | ||
| switch (data.status) { | ||
| case 'SUBMITTED': | ||
| return 'info' | ||
|
|
||
| case 'QUEUED': | ||
| return 'info' | ||
|
|
||
| case 'ENCODING': | ||
| return 'success' | ||
|
|
||
| case 'DEGRADED': | ||
| return 'warning' | ||
|
|
||
| case 'COMPLETED': | ||
| return 'success' | ||
|
|
||
| case 'CANCELLED': | ||
| return 'neutral' | ||
|
|
||
| case 'FAILED': | ||
| return 'danger' | ||
|
|
||
| default: | ||
| return 'neutral' | ||
| } | ||
| }, [data.status]) | ||
|
|
||
| const title = React.useMemo<string | undefined>(() => { | ||
| switch (data.status) { | ||
| case 'COMPLETED': | ||
| return dayjs(data.completed_at).format('L LT') | ||
|
|
||
| case 'CANCELLED': | ||
| return dayjs(data.cancelled_at).format('L LT') | ||
|
|
||
| case 'FAILED': | ||
| return dayjs(data.failed_at).format('L LT') | ||
|
|
||
| default: | ||
| return undefined | ||
| } | ||
| }, [data.cancelled_at, data.completed_at, data.failed_at, data.status]) | ||
|
|
||
| return ( | ||
| <Chip color={color} title={title}> | ||
| {data.status.toLowerCase()} | ||
| </Chip> | ||
| ) | ||
| } | ||
|
|
||
| export default EncodeStatus |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.