From 6c86fa286c420123a3e72acb002556d27690db5b Mon Sep 17 00:00:00 2001
From: WRadoslaw <r.wyszynski00@gmail.com>
Date: Wed, 9 Aug 2023 11:23:19 +0200
Subject: [PATCH 1/4] Initial work

---
 .../components/ListItem/ListItem.styles.ts    |   3 +
 .../src/components/ListItem/ListItem.tsx      |   9 +-
 .../_crt/VideoPicker/VideoPicker.styles.ts    |  28 ++++
 .../_crt/VideoPicker/VideoPicker.tsx          |  62 ++++++++
 .../src/components/_crt/VideoPicker/index.ts  |   1 +
 .../VideoListItem/VideoListItem.styles.ts     |  59 ++++++++
 .../_video/VideoListItem/VideoListItem.tsx    | 136 ++++++++++++++++++
 .../VideoListItem/VideoListItemLoader.tsx     |  18 +++
 .../components/_video/VideoListItem/index.ts  |   2 +
 9 files changed, 317 insertions(+), 1 deletion(-)
 create mode 100644 packages/atlas/src/components/_crt/VideoPicker/VideoPicker.styles.ts
 create mode 100644 packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx
 create mode 100644 packages/atlas/src/components/_crt/VideoPicker/index.ts
 create mode 100644 packages/atlas/src/components/_video/VideoListItem/VideoListItem.styles.ts
 create mode 100644 packages/atlas/src/components/_video/VideoListItem/VideoListItem.tsx
 create mode 100644 packages/atlas/src/components/_video/VideoListItem/VideoListItemLoader.tsx
 create mode 100644 packages/atlas/src/components/_video/VideoListItem/index.ts

diff --git a/packages/atlas/src/components/ListItem/ListItem.styles.ts b/packages/atlas/src/components/ListItem/ListItem.styles.ts
index 8e2595235b..0f930a2c34 100644
--- a/packages/atlas/src/components/ListItem/ListItem.styles.ts
+++ b/packages/atlas/src/components/ListItem/ListItem.styles.ts
@@ -126,9 +126,12 @@ type NodeContainerProps = {
   destructive?: boolean
   isHovering?: boolean
   isSelected?: boolean
+  position?: 'top' | 'bottom'
 }
 export const NodeContainer = styled.div<NodeContainerProps>`
   ${iconStyles};
+
+  align-self: ${(props) => (props.position === 'top' ? 'flex-start' : 'unset')};
 `
 
 export const SeparatorWrapper = styled.div`
diff --git a/packages/atlas/src/components/ListItem/ListItem.tsx b/packages/atlas/src/components/ListItem/ListItem.tsx
index 998be1d170..4a0dd4992a 100644
--- a/packages/atlas/src/components/ListItem/ListItem.tsx
+++ b/packages/atlas/src/components/ListItem/ListItem.tsx
@@ -44,6 +44,7 @@ export type ListItemProps = {
     title: string
     description: string
   }
+  nodeEndPosition?: 'top' | 'bottom'
 }
 
 export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
@@ -67,6 +68,7 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
       externalLink,
       isSeparator,
       isInteractive = true,
+      nodeEndPosition,
     },
     ref
   ) => {
@@ -120,7 +122,12 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
           </LabelCaptionContainer>
           {selected && <SelectedIcon />}
           {!!nodeEnd && (
-            <NodeContainer isSelected={selected} isHovering={isInteractive && isHovering} destructive={destructive}>
+            <NodeContainer
+              position={nodeEndPosition}
+              isSelected={selected}
+              isHovering={isInteractive && isHovering}
+              destructive={destructive}
+            >
               {nodeEnd}
             </NodeContainer>
           )}
diff --git a/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.styles.ts b/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.styles.ts
new file mode 100644
index 0000000000..f354b76d19
--- /dev/null
+++ b/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.styles.ts
@@ -0,0 +1,28 @@
+import styled from '@emotion/styled'
+
+import { cVar, sizes } from '@/styles'
+
+export const PlaceholderBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${sizes(6)};
+  align-items: center;
+  justify-content: center;
+  background-color: ${cVar('colorBackgroundMuted')};
+  padding: ${sizes(6)};
+`
+
+export const TextBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${sizes(2)};
+  align-items: center;
+  justify-content: center;
+  max-width: 300px;
+  text-align: center;
+`
+
+export const DialogContent = styled.div`
+  display: grid;
+  gap: ${sizes(2)};
+`
diff --git a/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx b/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx
new file mode 100644
index 0000000000..39b96d9fc9
--- /dev/null
+++ b/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx
@@ -0,0 +1,62 @@
+import { useGetBasicVideosQuery } from '@/api/queries/__generated__/videos.generated'
+import { SvgActionPlus, SvgActionSearch, SvgIllustrativeVideo } from '@/assets/icons'
+import { Text } from '@/components/Text'
+import { Button } from '@/components/_buttons/Button'
+import { DialogContent, PlaceholderBox, TextBox } from '@/components/_crt/VideoPicker/VideoPicker.styles'
+import { Input } from '@/components/_inputs/Input'
+import { DialogModal } from '@/components/_overlays/DialogModal'
+import { VideoListItem } from '@/components/_video/VideoListItem'
+
+export const VideoPicker = () => {
+  return (
+    <>
+      <SelectVideoDialog />
+      <PlaceholderBox>
+        <SvgIllustrativeVideo />
+        <TextBox>
+          <Text variant="h400" as="h4" color="colorTextStrong">
+            Token video trailer
+          </Text>
+          <Text variant="t200" as="p" color="colorText">
+            Present yourself, your idea and your project. Tell people why they should invest in you.
+          </Text>
+        </TextBox>
+        <Button variant="secondary" icon={<SvgActionPlus />} size="large">
+          Select video trailer
+        </Button>
+      </PlaceholderBox>
+    </>
+  )
+}
+
+const SelectVideoDialog = ({ id }: { id?: string }) => {
+  const { data } = useGetBasicVideosQuery({
+    variables: {
+      where: {
+        channel: {
+          id_eq: '229',
+          // ownerMember: {
+          //   id_eq: '21',
+          // },
+        },
+      },
+    },
+    // skip: !id,
+  })
+
+  return (
+    <DialogModal show>
+      <DialogContent>
+        <Text variant="h500" as="h5">
+          Select video trailer
+        </Text>
+        <Input nodeStart={<SvgActionSearch />} placeholder="Search for video" />
+        <div>
+          {data?.videos.map((video) => (
+            <VideoListItem key={video.id} variant="small" id={video.id} />
+          ))}
+        </div>
+      </DialogContent>
+    </DialogModal>
+  )
+}
diff --git a/packages/atlas/src/components/_crt/VideoPicker/index.ts b/packages/atlas/src/components/_crt/VideoPicker/index.ts
new file mode 100644
index 0000000000..5a65e95cca
--- /dev/null
+++ b/packages/atlas/src/components/_crt/VideoPicker/index.ts
@@ -0,0 +1 @@
+export * from './VideoPicker'
diff --git a/packages/atlas/src/components/_video/VideoListItem/VideoListItem.styles.ts b/packages/atlas/src/components/_video/VideoListItem/VideoListItem.styles.ts
new file mode 100644
index 0000000000..3aff6a036a
--- /dev/null
+++ b/packages/atlas/src/components/_video/VideoListItem/VideoListItem.styles.ts
@@ -0,0 +1,59 @@
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+
+import { ListItem } from '@/components/ListItem'
+import { cVar, media, sizes } from '@/styles'
+
+export const DetailsWrapper = styled.div<{ variant: 'small' | 'large' }>`
+  align-self: ${({ variant }) => (variant === 'small' ? 'center' : 'start')};
+  gap: ${({ variant }) => (variant === 'small' ? 'unset' : sizes(2))};
+  display: grid;
+  position: relative;
+  width: 100%;
+`
+
+export const ContextMenuWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  opacity: 1;
+  transition: opacity ${cVar('animationTransitionFast')};
+  ${media.sm} {
+    opacity: 0;
+  }
+`
+
+export const ThumbnailContainer = styled.div<{ variant: 'small' | 'large' }>`
+  > *:first-of-type {
+    min-width: ${({ variant }) => (variant === 'small' ? '80px' : '197px')};
+  }
+`
+
+export const StyledListItem = styled(ListItem)<{ ignoreRWD?: boolean }>`
+  :hover {
+    .video-list-item-kebab {
+      align-self: flex-start;
+      opacity: 1;
+    }
+  }
+  ${(props) =>
+    !props.ignoreRWD
+      ? css`
+          > *:first-of-type {
+            grid-column: 1/3;
+            width: 100%;
+          }
+
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto;
+          ${media.sm} {
+            grid-template-columns: auto 1fr;
+            grid-template-rows: auto;
+
+            > *:first-of-type {
+              grid-column: unset;
+            }
+          }
+        `
+      : ''}
+`
diff --git a/packages/atlas/src/components/_video/VideoListItem/VideoListItem.tsx b/packages/atlas/src/components/_video/VideoListItem/VideoListItem.tsx
new file mode 100644
index 0000000000..d8a1aab83b
--- /dev/null
+++ b/packages/atlas/src/components/_video/VideoListItem/VideoListItem.tsx
@@ -0,0 +1,136 @@
+import { FC } from 'react'
+import { CSSTransition, SwitchTransition } from 'react-transition-group'
+
+import { useBasicVideo } from '@/api/hooks/video'
+import { SvgActionMore } from '@/assets/icons'
+import { ListItemProps } from '@/components/ListItem'
+import { Pill } from '@/components/Pill'
+import { Text } from '@/components/Text'
+import { Button } from '@/components/_buttons/Button'
+import { ContextMenu } from '@/components/_overlays/ContextMenu'
+import { VideoListItemLoader } from '@/components/_video/VideoListItem/VideoListItemLoader'
+import { VideoThumbnail } from '@/components/_video/VideoThumbnail'
+import { Views } from '@/components/_video/VideoTileDetails/VideoTileDetails.styles'
+import { cVar, transitions } from '@/styles'
+import { SentryLogger } from '@/utils/logs'
+import { formatDurationShort } from '@/utils/time'
+import { formatVideoDate } from '@/utils/video'
+
+import { ContextMenuWrapper, DetailsWrapper, StyledListItem, ThumbnailContainer } from './VideoListItem.styles'
+
+type VideoListItemProps = {
+  id?: string
+  onClick?: () => void
+  isSelected?: boolean
+  variant?: 'small' | 'large'
+  className?: string
+  isInteractive?: boolean
+  menuItems?: ListItemProps[]
+}
+
+export const VideoListItem: FC<VideoListItemProps> = ({
+  id,
+  onClick,
+  isSelected,
+  className,
+  variant = 'small',
+  isInteractive = true,
+  menuItems,
+}) => {
+  const { video, loading } = useBasicVideo(id ?? '', {
+    skip: !id,
+    onError: (error) => SentryLogger.error('Failed to fetch video', 'VideoListItem', error, { video: { id } }),
+  })
+
+  return (
+    <SwitchTransition>
+      <CSSTransition
+        key={String(loading)}
+        timeout={parseInt(cVar('animationTimingFast', true))}
+        classNames={transitions.names.fade}
+      >
+        {loading ? (
+          <VideoListItemLoader variant={variant} />
+        ) : (
+          <StyledListItem
+            ignoreRWD={variant === 'small'}
+            isInteractive={isInteractive}
+            className={className}
+            onClick={onClick}
+            selected={isSelected}
+            nodeEndPosition="top"
+            nodeEnd={
+              <DetailsWrapper variant={variant}>
+                {menuItems && (
+                  <ContextMenuWrapper className="video-list-item-kebab">
+                    <ContextMenu
+                      placement="bottom-end"
+                      appendTo={document.body}
+                      items={menuItems}
+                      trigger={<Button onClick={() => null} icon={<SvgActionMore />} variant="tertiary" size="small" />}
+                    />
+                  </ContextMenuWrapper>
+                )}
+              </DetailsWrapper>
+            }
+            nodeStart={
+              <ThumbnailContainer variant={variant}>
+                <VideoThumbnail
+                  type="video"
+                  clickable={false}
+                  thumbnailUrls={video?.thumbnailPhoto?.resolvedUrls}
+                  thumbnailAlt={video ? `${video.title} by ${video.channel.title} thumbnail` : ''}
+                  slots={
+                    variant === 'large' && video?.duration
+                      ? {
+                          bottomRight: {
+                            element: (
+                              <Pill
+                                variant="overlay"
+                                label={formatDurationShort(video.duration)}
+                                title="Video duration"
+                              />
+                            ),
+                            type: 'default',
+                          },
+                        }
+                      : undefined
+                  }
+                />
+              </ThumbnailContainer>
+            }
+            label={
+              <Text
+                variant={variant === 'small' ? 't200-strong' : 'h400'}
+                as="h4"
+                color={variant === 'small' ? 'colorText' : 'colorTextStrong'}
+              >
+                {video?.title}
+              </Text>
+            }
+            caption={
+              video && (
+                <Text
+                  variant={variant === 'small' ? 't100' : 't200'}
+                  as="p"
+                  color={variant === 'small' ? 'colorText' : 'colorTextMuted'}
+                >
+                  <>
+                    {formatVideoDate(video.createdAt)} •{' '}
+                    <Views
+                      as="span"
+                      value={video.viewsNum ?? 0}
+                      format="short"
+                      color={variant === 'small' ? 'colorText' : 'colorTextMuted'}
+                    />
+                    &nbsp;views
+                  </>{' '}
+                </Text>
+              )
+            }
+          />
+        )}
+      </CSSTransition>
+    </SwitchTransition>
+  )
+}
diff --git a/packages/atlas/src/components/_video/VideoListItem/VideoListItemLoader.tsx b/packages/atlas/src/components/_video/VideoListItem/VideoListItemLoader.tsx
new file mode 100644
index 0000000000..66aa4cb00d
--- /dev/null
+++ b/packages/atlas/src/components/_video/VideoListItem/VideoListItemLoader.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react'
+
+import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
+import { sizes } from '@/styles'
+
+import { StyledListItem } from './VideoListItem.styles'
+
+export const VideoListItemLoader: FC<{ variant: 'small' | 'large' }> = ({ variant }) => {
+  return (
+    <StyledListItem
+      isInteractive={false}
+      label={<SkeletonLoader height={sizes(4)} width={variant === 'small' ? 100 : 151} />}
+      caption={<SkeletonLoader height={sizes(4)} width={variant === 'small' ? 50 : 111} />}
+      nodeStart={<SkeletonLoader height={variant === 'small' ? 50 : 111} width={variant === 'small' ? 80 : 190} />}
+      ignoreRWD={variant === 'small'}
+    />
+  )
+}
diff --git a/packages/atlas/src/components/_video/VideoListItem/index.ts b/packages/atlas/src/components/_video/VideoListItem/index.ts
new file mode 100644
index 0000000000..85d4b479a6
--- /dev/null
+++ b/packages/atlas/src/components/_video/VideoListItem/index.ts
@@ -0,0 +1,2 @@
+export * from './VideoListItem'
+export * from './VideoListItemLoader'

From d1cdb24660a64159f99e1880fd832684d172b36e Mon Sep 17 00:00:00 2001
From: WRadoslaw <r.wyszynski00@gmail.com>
Date: Wed, 9 Aug 2023 17:56:53 +0200
Subject: [PATCH 2/4] Further work on video selection

---
 .../_crt/VideoPicker/VideoPicker.styles.ts    |  26 ++++
 .../_crt/VideoPicker/VideoPicker.tsx          | 137 +++++++++++++-----
 2 files changed, 128 insertions(+), 35 deletions(-)

diff --git a/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.styles.ts b/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.styles.ts
index f354b76d19..e5fef2ea64 100644
--- a/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.styles.ts
+++ b/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.styles.ts
@@ -24,5 +24,31 @@ export const TextBox = styled.div`
 
 export const DialogContent = styled.div`
   display: grid;
+  padding: ${sizes(6)};
+`
+
+export const VideoBox = styled.div`
+  margin-bottom: ${sizes(6)};
+`
+
+export const ThumbnailContainer = styled.div`
+  position: relative;
+  height: 400px;
+`
+
+export const ThumbnailOverlay = styled.div`
+  display: grid;
+  place-items: center;
+  align-content: center;
   gap: ${sizes(2)};
+  position: absolute;
+  inset: 0;
+  background-color: #101214bf;
+  opacity: 0;
+  cursor: pointer;
+  transition: opacity 250ms ease-in-out;
+
+  :hover {
+    opacity: 1;
+  }
 `
diff --git a/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx b/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx
index 39b96d9fc9..285904e997 100644
--- a/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx
+++ b/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx
@@ -1,62 +1,129 @@
+import { useState } from 'react'
+
 import { useGetBasicVideosQuery } from '@/api/queries/__generated__/videos.generated'
-import { SvgActionPlus, SvgActionSearch, SvgIllustrativeVideo } from '@/assets/icons'
+import { SvgActionPlus, SvgActionSearch, SvgActionTrash, SvgIllustrativeVideo } from '@/assets/icons'
 import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
-import { DialogContent, PlaceholderBox, TextBox } from '@/components/_crt/VideoPicker/VideoPicker.styles'
+import {
+  DialogContent,
+  PlaceholderBox,
+  TextBox,
+  ThumbnailContainer,
+  ThumbnailOverlay,
+  VideoBox,
+} from '@/components/_crt/VideoPicker/VideoPicker.styles'
 import { Input } from '@/components/_inputs/Input'
 import { DialogModal } from '@/components/_overlays/DialogModal'
-import { VideoListItem } from '@/components/_video/VideoListItem'
+import { VideoListItem, VideoListItemLoader } from '@/components/_video/VideoListItem'
+import { ThumbnailImage } from '@/components/_video/VideoThumbnail/VideoThumbnail.styles'
+import { useDebounceValue } from '@/hooks/useDebounceValue'
+import { useUser } from '@/providers/user/user.hooks'
 
 export const VideoPicker = () => {
+  const [showPicker, setShowPicker] = useState(false)
+  const [selectedVideo, setSelectedVideo] = useState<string | null>(null)
+  const { memberId } = useUser()
+  const { data } = useGetBasicVideosQuery({
+    variables: {
+      where: {
+        id_eq: selectedVideo,
+      },
+    },
+    skip: !selectedVideo,
+  })
+  console.log('selected video: ', data?.videos)
   return (
     <>
-      <SelectVideoDialog />
-      <PlaceholderBox>
-        <SvgIllustrativeVideo />
-        <TextBox>
-          <Text variant="h400" as="h4" color="colorTextStrong">
-            Token video trailer
-          </Text>
-          <Text variant="t200" as="p" color="colorText">
-            Present yourself, your idea and your project. Tell people why they should invest in you.
-          </Text>
-        </TextBox>
-        <Button variant="secondary" icon={<SvgActionPlus />} size="large">
-          Select video trailer
-        </Button>
-      </PlaceholderBox>
+      <SelectVideoDialog
+        show={showPicker}
+        onClose={() => setShowPicker(false)}
+        onVideoSelection={(id) => {
+          setSelectedVideo(id)
+          setShowPicker(false)
+        }}
+        memberId={memberId || undefined}
+      />
+      {data?.videos[0] ? (
+        <ThumbnailContainer>
+          <ThumbnailImage resolvedUrls={data?.videos[0].thumbnailPhoto?.resolvedUrls} />
+          <ThumbnailOverlay onClick={() => setSelectedVideo(null)}>
+            <SvgActionTrash />
+            <Text variant="t300" as="p">
+              Clear selection
+            </Text>
+          </ThumbnailOverlay>
+        </ThumbnailContainer>
+      ) : (
+        <PlaceholderBox>
+          <SvgIllustrativeVideo />
+          <TextBox>
+            <Text variant="h400" as="h4" color="colorTextStrong">
+              Token video trailer
+            </Text>
+            <Text variant="t200" as="p" color="colorText">
+              Present yourself, your idea and your project. Tell people why they should invest in you.
+            </Text>
+          </TextBox>
+          <Button variant="secondary" icon={<SvgActionPlus />} onClick={() => setShowPicker(true)} size="large">
+            Select video trailer
+          </Button>
+        </PlaceholderBox>
+      )}
     </>
   )
 }
 
-const SelectVideoDialog = ({ id }: { id?: string }) => {
-  const { data } = useGetBasicVideosQuery({
+type SelectVideoDialogProps = {
+  memberId?: string
+  onVideoSelection: (id: string) => void
+  show: boolean
+  onClose: () => void
+}
+
+const SelectVideoDialog = ({ memberId, onVideoSelection, show, onClose }: SelectVideoDialogProps) => {
+  const [search, setSearch] = useState('')
+  const debouncedSearch = useDebounceValue(search)
+  const { data, loading } = useGetBasicVideosQuery({
+    notifyOnNetworkStatusChange: true,
     variables: {
       where: {
+        title_containsInsensitive: debouncedSearch,
         channel: {
-          id_eq: '229',
-          // ownerMember: {
-          //   id_eq: '21',
-          // },
+          ownerMember: {
+            id_eq: memberId,
+          },
         },
       },
+      limit: 5,
     },
-    // skip: !id,
+    skip: !memberId,
   })
 
   return (
-    <DialogModal show>
+    <DialogModal title="Select video trailer" onExitClick={onClose} show={show} noContentPadding>
       <DialogContent>
-        <Text variant="h500" as="h5">
-          Select video trailer
-        </Text>
-        <Input nodeStart={<SvgActionSearch />} placeholder="Search for video" />
-        <div>
-          {data?.videos.map((video) => (
-            <VideoListItem key={video.id} variant="small" id={video.id} />
-          ))}
-        </div>
+        <Input
+          size="large"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          nodeStart={<SvgActionSearch />}
+          placeholder="Search for video"
+        />
       </DialogContent>
+
+      <VideoBox>
+        {loading
+          ? Array.from({ length: 5 }, (_, idx) => <VideoListItemLoader key={idx} variant="small" />)
+          : data?.videos.map((video) => (
+              <VideoListItem
+                key={video.id}
+                isInteractive
+                onClick={() => onVideoSelection(video.id)}
+                variant="small"
+                id={video.id}
+              />
+            ))}
+      </VideoBox>
     </DialogModal>
   )
 }

From 41ba566979723b5a2a07501e6c2a3b558363b750 Mon Sep 17 00:00:00 2001
From: WRadoslaw <r.wyszynski00@gmail.com>
Date: Thu, 10 Aug 2023 15:42:21 +0200
Subject: [PATCH 3/4] Handle ratio

---
 .../_crt/VideoPicker/VideoPicker.styles.ts    |  39 ++++-
 .../_crt/VideoPicker/VideoPicker.tsx          | 133 +++++++++++++-----
 2 files changed, 130 insertions(+), 42 deletions(-)

diff --git a/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.styles.ts b/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.styles.ts
index e5fef2ea64..0ee2884a7e 100644
--- a/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.styles.ts
+++ b/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.styles.ts
@@ -1,15 +1,35 @@
 import styled from '@emotion/styled'
 
-import { cVar, sizes } from '@/styles'
+import { cVar, media, sizes } from '@/styles'
+
+export const MainWrapper = styled.div`
+  overflow: hidden;
+  margin-bottom: 20px;
+  position: relative;
+  min-height: 280px;
+
+  ${media.sm} {
+    padding-top: 0;
+    aspect-ratio: 16/9;
+  }
+`
 
 export const PlaceholderBox = styled.div`
+  position: absolute;
   display: flex;
   flex-direction: column;
   gap: ${sizes(6)};
   align-items: center;
   justify-content: center;
   background-color: ${cVar('colorBackgroundMuted')};
-  padding: ${sizes(6)};
+  padding: ${sizes(4)};
+  top: 0;
+  width: 100%;
+  height: 100%;
+
+  ${media.sm} {
+    padding: ${sizes(6)};
+  }
 `
 
 export const TextBox = styled.div`
@@ -32,8 +52,10 @@ export const VideoBox = styled.div`
 `
 
 export const ThumbnailContainer = styled.div`
-  position: relative;
-  height: 400px;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
 `
 
 export const ThumbnailOverlay = styled.div`
@@ -46,9 +68,16 @@ export const ThumbnailOverlay = styled.div`
   background-color: #101214bf;
   opacity: 0;
   cursor: pointer;
-  transition: opacity 250ms ease-in-out;
+  transition: all ${cVar('animationTransitionFast')};
 
   :hover {
     opacity: 1;
   }
 `
+
+export const RowBox = styled.div<{ gap: number }>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: ${(props) => sizes(props.gap)};
+`
diff --git a/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx b/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx
index 285904e997..751c0cd2a3 100644
--- a/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx
+++ b/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx
@@ -1,27 +1,45 @@
 import { useState } from 'react'
 
 import { useGetBasicVideosQuery } from '@/api/queries/__generated__/videos.generated'
-import { SvgActionPlus, SvgActionSearch, SvgActionTrash, SvgIllustrativeVideo } from '@/assets/icons'
+import {
+  SvgActionNewTab,
+  SvgActionPlus,
+  SvgActionSearch,
+  SvgActionTrash,
+  SvgAlertsInformative32,
+  SvgIllustrativeVideo,
+} from '@/assets/icons'
 import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
+import { Input } from '@/components/_inputs/Input'
+import { DialogModal } from '@/components/_overlays/DialogModal'
+import { VideoListItem, VideoListItemLoader } from '@/components/_video/VideoListItem'
+import { ThumbnailImage } from '@/components/_video/VideoThumbnail/VideoThumbnail.styles'
+import { absoluteRoutes } from '@/config/routes'
+import { useDebounceValue } from '@/hooks/useDebounceValue'
+import { useMediaMatch } from '@/hooks/useMediaMatch'
+import { useUser } from '@/providers/user/user.hooks'
+
 import {
   DialogContent,
+  MainWrapper,
   PlaceholderBox,
+  RowBox,
   TextBox,
   ThumbnailContainer,
   ThumbnailOverlay,
   VideoBox,
-} from '@/components/_crt/VideoPicker/VideoPicker.styles'
-import { Input } from '@/components/_inputs/Input'
-import { DialogModal } from '@/components/_overlays/DialogModal'
-import { VideoListItem, VideoListItemLoader } from '@/components/_video/VideoListItem'
-import { ThumbnailImage } from '@/components/_video/VideoThumbnail/VideoThumbnail.styles'
-import { useDebounceValue } from '@/hooks/useDebounceValue'
-import { useUser } from '@/providers/user/user.hooks'
+} from './VideoPicker.styles'
+
+type VideoPickerProps = {
+  selectedVideo: string | null
+  setSelectedVideo: (id: string | null) => void
+  className?: string
+}
 
-export const VideoPicker = () => {
+export const VideoPicker = ({ setSelectedVideo, selectedVideo, className }: VideoPickerProps) => {
   const [showPicker, setShowPicker] = useState(false)
-  const [selectedVideo, setSelectedVideo] = useState<string | null>(null)
+  const xsMatch = useMediaMatch('xs')
   const { memberId } = useUser()
   const { data } = useGetBasicVideosQuery({
     variables: {
@@ -31,9 +49,9 @@ export const VideoPicker = () => {
     },
     skip: !selectedVideo,
   })
-  console.log('selected video: ', data?.videos)
+
   return (
-    <>
+    <MainWrapper className={className}>
       <SelectVideoDialog
         show={showPicker}
         onClose={() => setShowPicker(false)}
@@ -60,7 +78,7 @@ export const VideoPicker = () => {
             <Text variant="h400" as="h4" color="colorTextStrong">
               Token video trailer
             </Text>
-            <Text variant="t200" as="p" color="colorText">
+            <Text variant={xsMatch ? 't200' : 't100'} as="p" color="colorText">
               Present yourself, your idea and your project. Tell people why they should invest in you.
             </Text>
           </TextBox>
@@ -69,7 +87,7 @@ export const VideoPicker = () => {
           </Button>
         </PlaceholderBox>
       )}
-    </>
+    </MainWrapper>
   )
 }
 
@@ -99,31 +117,72 @@ const SelectVideoDialog = ({ memberId, onVideoSelection, show, onClose }: Select
     skip: !memberId,
   })
 
+  const hasNoVideos = !loading && !data?.videos?.length
+
   return (
-    <DialogModal title="Select video trailer" onExitClick={onClose} show={show} noContentPadding>
-      <DialogContent>
-        <Input
-          size="large"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          nodeStart={<SvgActionSearch />}
-          placeholder="Search for video"
-        />
-      </DialogContent>
+    <DialogModal
+      title={!hasNoVideos ? 'Select video trailer' : undefined}
+      onExitClick={!hasNoVideos ? onClose : undefined}
+      show={show}
+      noContentPadding={!hasNoVideos}
+      secondaryButton={
+        hasNoVideos
+          ? {
+              text: 'Cancel',
+              onClick: onClose,
+            }
+          : undefined
+      }
+      primaryButton={
+        hasNoVideos
+          ? {
+              text: 'Upload a video',
+              to: absoluteRoutes.studio.videoWorkspace(),
+              icon: <SvgActionNewTab />,
+              iconPlacement: 'right',
+            }
+          : undefined
+      }
+    >
+      {hasNoVideos ? (
+        <RowBox gap={6}>
+          <SvgAlertsInformative32 />
+          <RowBox gap={2}>
+            <Text variant="h500" as="h5">
+              You don’t have any video uploaded yet
+            </Text>
+            <Text variant="t200" as="p" color="colorText">
+              You need to upload a video first in order to select it as a video trailer for your token.
+            </Text>
+          </RowBox>
+        </RowBox>
+      ) : (
+        <>
+          <DialogContent>
+            <Input
+              size="large"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              nodeStart={<SvgActionSearch />}
+              placeholder="Search for video"
+            />
+          </DialogContent>
 
-      <VideoBox>
-        {loading
-          ? Array.from({ length: 5 }, (_, idx) => <VideoListItemLoader key={idx} variant="small" />)
-          : data?.videos.map((video) => (
-              <VideoListItem
-                key={video.id}
-                isInteractive
-                onClick={() => onVideoSelection(video.id)}
-                variant="small"
-                id={video.id}
-              />
-            ))}
-      </VideoBox>
+          <VideoBox>
+            {loading
+              ? Array.from({ length: 5 }, (_, idx) => <VideoListItemLoader key={idx} variant="small" />)
+              : data?.videos.map((video) => (
+                  <VideoListItem
+                    key={video.id}
+                    isInteractive
+                    onClick={() => onVideoSelection(video.id)}
+                    variant="small"
+                    id={video.id}
+                  />
+                ))}
+          </VideoBox>
+        </>
+      )}
     </DialogModal>
   )
 }

From 6d3b5dff64475ed6f5270e9b2d95cb9cbd19a9dc Mon Sep 17 00:00:00 2001
From: WRadoslaw <r.wyszynski00@gmail.com>
Date: Thu, 10 Aug 2023 15:45:10 +0200
Subject: [PATCH 4/4] Add playground

---
 packages/atlas/src/views/playground/PlaygroundLayout.tsx | 2 ++
 .../playground/Playgrounds/PlaygroundVideoPicker.tsx     | 9 +++++++++
 packages/atlas/src/views/playground/Playgrounds/index.ts | 1 +
 3 files changed, 12 insertions(+)
 create mode 100644 packages/atlas/src/views/playground/Playgrounds/PlaygroundVideoPicker.tsx

diff --git a/packages/atlas/src/views/playground/PlaygroundLayout.tsx b/packages/atlas/src/views/playground/PlaygroundLayout.tsx
index bcb7b4a7a5..f5d1e36ca3 100644
--- a/packages/atlas/src/views/playground/PlaygroundLayout.tsx
+++ b/packages/atlas/src/views/playground/PlaygroundLayout.tsx
@@ -18,6 +18,7 @@ import { ConnectionStatusManager } from '@/providers/connectionStatus'
 import { useUser } from '@/providers/user/user.hooks'
 import { UserProvider } from '@/providers/user/user.provider'
 import { cVar } from '@/styles'
+import { PlaygroundVideoPicker } from '@/views/playground/Playgrounds/PlaygroundVideoPicker'
 
 import {
   PlaygroundCaptcha,
@@ -49,6 +50,7 @@ const playgroundRoutes = [
   { path: 'input-autocomplete', element: <PlaygroundInputAutocomplete />, name: 'Input autocomplete' },
   { path: 'marketplace-carousel', element: <PlaygroundMarketplaceCarousel />, name: 'Marketplace carousel' },
   { path: 'sign-up', element: <PlaygroundSignUp />, name: 'Sign up' },
+  { path: 'video-picker', element: <PlaygroundVideoPicker />, name: 'Video picker' },
 ]
 
 const PlaygroundLayout = () => {
diff --git a/packages/atlas/src/views/playground/Playgrounds/PlaygroundVideoPicker.tsx b/packages/atlas/src/views/playground/Playgrounds/PlaygroundVideoPicker.tsx
new file mode 100644
index 0000000000..6e672a8693
--- /dev/null
+++ b/packages/atlas/src/views/playground/Playgrounds/PlaygroundVideoPicker.tsx
@@ -0,0 +1,9 @@
+import { useState } from 'react'
+
+import { VideoPicker } from '@/components/_crt/VideoPicker'
+
+export const PlaygroundVideoPicker = () => {
+  const [selectedVideo, setSelectedVideo] = useState<string | null>(null)
+
+  return <VideoPicker selectedVideo={selectedVideo} setSelectedVideo={setSelectedVideo} />
+}
diff --git a/packages/atlas/src/views/playground/Playgrounds/index.ts b/packages/atlas/src/views/playground/Playgrounds/index.ts
index e472d652ab..1c53e617c4 100644
--- a/packages/atlas/src/views/playground/Playgrounds/index.ts
+++ b/packages/atlas/src/views/playground/Playgrounds/index.ts
@@ -10,3 +10,4 @@ export * from './PlaygroundCaptcha'
 export * from './PlaygroundGoogleAuthentication'
 export * from './PlaygroundInputAutocomplete'
 export * from './PlaygroundSignUp'
+export * from './PlaygroundVideoPicker'