-
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.
Merge pull request #44 from prtcl/spike/node-transition-viewer
spike/node transition viewer
- Loading branch information
Showing
16 changed files
with
470 additions
and
809 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,13 @@ | ||
| import { type PropsWithChildren } from 'react'; | ||
| import { ProjectViewer } from './ProjectViewer'; | ||
| import { NextPrevContext, useNextPrevApi } from './hooks/useNextPrev'; | ||
| import { | ||
| ProjectViewerContext, | ||
| useProjectViewerState, | ||
| } from './hooks/useProjectViewer'; | ||
|
|
||
| const ProjectViewerProvider = (props: PropsWithChildren) => ( | ||
| export const ProjectProvider = (props: PropsWithChildren) => ( | ||
| <ProjectViewerContext.Provider value={useProjectViewerState()}> | ||
| {props.children} | ||
| <ProjectViewer /> | ||
| </ProjectViewerContext.Provider> | ||
| ); | ||
|
|
||
| const NextPrevProvider = (props: PropsWithChildren) => ( | ||
| <NextPrevContext.Provider value={useNextPrevApi()}> | ||
| {props.children} | ||
| </NextPrevContext.Provider> | ||
| ); | ||
|
|
||
| export const ProjectProvider = (props: PropsWithChildren) => ( | ||
| <ProjectViewerProvider> | ||
| <NextPrevProvider> | ||
| {props.children} | ||
| <ProjectViewer /> | ||
| </NextPrevProvider> | ||
| </ProjectViewerProvider> | ||
| ); |
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 |
|---|---|---|
| @@ -1,113 +1,59 @@ | ||
| import { useQuery } from 'convex/react'; | ||
| import { useState } from 'react'; | ||
| import useKey from 'react-use/lib/useKey'; | ||
| import { Flex, Stack, VisuallyHidden } from 'styled-system/jsx'; | ||
| import { api } from '~/convex/api'; | ||
| import { forwardRef } from 'react'; | ||
| import { createPortal } from 'react-dom'; | ||
| import { Flex, type FlexProps } from 'styled-system/jsx'; | ||
| import { ErrorBoundary } from '~/lib/errors'; | ||
| import * as Dialog from '~/ui/Dialog'; | ||
| import { IconButton } from '~/ui/IconButton'; | ||
| import { Text } from '~/ui/Text'; | ||
| import { BackIcon, ChevronLeftIcon } from '~/ui/icons'; | ||
| import { | ||
| PanelContainer, | ||
| PanelFooter, | ||
| PanelHeader, | ||
| } from './components/PanelContainer'; | ||
| import { ProjectDetails } from './components/ProjectDetails'; | ||
| import { ProjectUrl } from './components/ProjectUrl'; | ||
| import { useNextPrev, type Directions } from './hooks/useNextPrev'; | ||
| import { useProjectViewer } from './hooks/useProjectViewer'; | ||
| import { useProjectViewer, ViewerType } from './hooks/useProjectViewer'; | ||
| import { EmbedViewer } from './ui/EmbedViewer'; | ||
|
|
||
| const DetailsPanel = () => { | ||
| const { projectId, updateProjectId } = useProjectViewer(); | ||
| const project = useQuery(api.projects.loadProject, { projectId }); | ||
| const { next, prev } = useNextPrev(projectId); | ||
| const [direction, setDirection] = useState<Directions>(0); | ||
|
|
||
| const handleLeft = () => { | ||
| if (prev) { | ||
| updateProjectId(prev); | ||
| setDirection(-1); | ||
| } | ||
| }; | ||
| const handleRight = () => { | ||
| if (next) { | ||
| updateProjectId(next); | ||
| setDirection(1); | ||
| const Overlay = forwardRef<HTMLDivElement, FlexProps>( | ||
| function Overlay(props, ref) { | ||
| const { children, ...flexProps } = props; | ||
| const { closeViewer, isOpen } = useProjectViewer(); | ||
| if (!isOpen) { | ||
| return null; | ||
| } | ||
| }; | ||
| useKey('ArrowLeft', handleLeft, {}, [prev]); | ||
| useKey('ArrowRight', handleRight, {}, [next]); | ||
|
|
||
| return ( | ||
| <> | ||
| <Flex direction="column" flex={1}> | ||
| <ProjectDetails direction={direction} projectId={projectId} /> | ||
| <PanelFooter> | ||
| <ProjectUrl url={project?.url} direction={direction} /> | ||
| <Stack direction="row" gap={[0, 1]}> | ||
| <IconButton onPress={() => handleLeft()} isDisabled={prev === null}> | ||
| <ChevronLeftIcon /> | ||
| </IconButton> | ||
| <IconButton | ||
| onPress={() => handleRight()} | ||
| isDisabled={next === null} | ||
| > | ||
| <ChevronLeftIcon transform="rotate(180deg)" /> | ||
| </IconButton> | ||
| </Stack> | ||
| </PanelFooter> | ||
| return ( | ||
| <Flex | ||
| ref={ref} | ||
| position="fixed" | ||
| inset={0} | ||
| onClick={() => closeViewer()} | ||
| onTouchMove={() => closeViewer()} | ||
| {...flexProps} | ||
| > | ||
| {children} | ||
| </Flex> | ||
| <VisuallyHidden> | ||
| <Dialog.Title>{project?.title}</Dialog.Title> | ||
| </VisuallyHidden> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const NotFound = () => ( | ||
| <Flex alignItems="center" justifyContent="center" flex={1} width="100%"> | ||
| <Text>Not Found</Text> | ||
| </Flex> | ||
| ); | ||
| }, | ||
| ); | ||
|
|
||
| export const ProjectViewer = () => { | ||
| const { isOpen, closeViewer } = useProjectViewer(); | ||
| const NotFound = () => | ||
| createPortal( | ||
| <Overlay alignItems="center" bg="zinc.100/68" justifyContent="center"> | ||
| <Text>Not Found</Text> | ||
| </Overlay>, | ||
| document.body, | ||
| ); | ||
|
|
||
| export const ProjectViewer = () => { | ||
| const { isOpen, projectId, viewerType, origin } = useProjectViewer(); | ||
| return ( | ||
| <Dialog.Root isOpen={isOpen} onClose={closeViewer}> | ||
| <Dialog.Overlay /> | ||
| <Dialog.Content | ||
| borderRadius={[16, 16, 16, 12]} | ||
| height="100%" | ||
| mt="calc(env(safe-area-inset-bottom, 0px) / 2 * -1)" | ||
| maxHeight={[ | ||
| 'calc(97% - (env(safe-area-inset-bottom, 0px) * 2))', | ||
| 'calc(97% - (env(safe-area-inset-bottom, 0px) * 2))', | ||
| 'calc(96% - (env(safe-area-inset-bottom, 0px) * 2))', | ||
| '92vh', | ||
| '84vh', | ||
| ]} | ||
| maxWidth={['97%', '95%', '95vw', '92vw', '82vw', '74vw', '80rem']} | ||
| onOpenAutoFocus={(e) => e.preventDefault()} | ||
| overflow="hidden" | ||
| shadow="2xl" | ||
| width="100%" | ||
| > | ||
| <PanelContainer> | ||
| <PanelHeader> | ||
| <IconButton ml={-1} mt={-1} onPress={() => closeViewer()} size="md"> | ||
| <BackIcon | ||
| color={['zinc.500', 'zinc.500', 'zinc.400', 'zinc.300']} | ||
| size="md" | ||
| /> | ||
| </IconButton> | ||
| </PanelHeader> | ||
| <ErrorBoundary fallback={() => <NotFound />}> | ||
| <DetailsPanel /> | ||
| </ErrorBoundary> | ||
| </PanelContainer> | ||
| </Dialog.Content> | ||
| </Dialog.Root> | ||
| <ErrorBoundary fallback={() => <NotFound />}> | ||
| {createPortal( | ||
| <> | ||
| <Overlay /> | ||
| {[ViewerType.SOUND, ViewerType.VIDEO].includes(viewerType) && ( | ||
| <EmbedViewer | ||
| projectId={projectId} | ||
| isOpen={isOpen} | ||
| origin={origin} | ||
| /> | ||
| )} | ||
| </>, | ||
| document.body, | ||
| )} | ||
| </ErrorBoundary> | ||
| ); | ||
| }; |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.