Update icons and themes

IAmBlackat · Sep 28, 2021 · 42c0702 · 42c0702
1 parent b91d8b5
commit 42c0702
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 16 deletions.
diff --git a/components/VideoGrid/MoveVideo.tsx b/components/VideoGrid/MoveVideo.tsx
@@ -15,7 +15,7 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react'
 import { useState } from 'react'
-import { IoSend } from 'react-icons/io5'
+import { IoReturnDownForward } from 'react-icons/io5'
 import useSWR, { useSWRConfig } from 'swr'
 import { Pod } from '../../types'
 import { getApiUrl } from '../../utils/api'
@@ -51,7 +51,12 @@ export default function MoveVideo(props: { id: string; podId: string }): JSX.Ele
 
   return (
     <>
-      <IconButton aria-label='delete-video' onClick={onOpen} size='sm' icon={<IoSend />} />
+      <IconButton
+        aria-label='delete-video'
+        onClick={onOpen}
+        size='sm'
+        icon={<IoReturnDownForward />}
+      />
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
         <ModalContent>

diff --git a/components/VideoGrid/VideoMeta.tsx b/components/VideoGrid/VideoMeta.tsx
@@ -24,6 +24,7 @@ import { getApiUrl } from '../../utils/api'
 import MoveVideo from './MoveVideo'
 import { useSWRConfig } from 'swr'
 import router from 'next/router'
+import { IoLink } from 'react-icons/io5'
 
 let timer: NodeJS.Timeout
 
@@ -36,6 +37,7 @@ export default function VideoMeta(props: { v: Video }): JSX.Element {
   const metadata = `${abbreviateNumber(v.views)} views - ${createdAt}`
 
   const shareLink = `${window?.location?.href?.split('/pods')[0]}/v/${v._id}`
+  const isOwner = v?.owner?._id === session?.id
 
   function handleTitleChange(e: ChangeEvent<HTMLInputElement>) {
     clearTimeout(timer)
@@ -74,14 +76,25 @@ export default function VideoMeta(props: { v: Video }): JSX.Element {
           {v.title}
         </Box>
       )}
-      <Flex w='100%' justify='end'>
+      <Flex w='100%' justify='space-between' align='center'>
+        <Text
+          maxW='100px'
+          fontSize='xs'
+          isTruncated
+          onClick={() => {
+            router.push(shareLink)
+          }}
+        >
+          {shareLink}
+        </Text>
         <Button
           size='xs'
+          leftIcon={<IoLink />}
           onClick={() => {
-            router.push(shareLink)
+            navigator.clipboard.writeText(shareLink)
           }}
         >
-          Link
+          Copy Link
         </Button>
       </Flex>
       <HStack spacing='12px' justify='space-between' w='100%'>
@@ -104,12 +117,10 @@ export default function VideoMeta(props: { v: Video }): JSX.Element {
             <Text fontSize='xs'>{metadata}</Text>
           </Flex>
         </Flex>
-        {v.owner._id === session?.id && (
-          <HStack spacing={1}>
-            <DeleteVideo podId={v.pod} id={v._id} />
-            <MoveVideo podId={v.pod} id={v._id} />
-          </HStack>
-        )}
+        <HStack spacing={1}>
+          {isOwner && <DeleteVideo podId={v.pod} id={v._id} />}
+          {isOwner && <MoveVideo podId={v.pod} id={v._id} />}
+        </HStack>
       </HStack>
     </VStack>
   )

diff --git a/components/VideoGrid/WatchModal.tsx b/components/VideoGrid/WatchModal.tsx
@@ -1,7 +1,7 @@
 import VideoPlayer from '../VideoPlayer'
 import { Video } from '../../types'
 import { getTidalUrl } from '../../utils/api'
-import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton } from '@chakra-ui/react'
+import { Box, Modal, ModalOverlay, ModalContent, ModalCloseButton } from '@chakra-ui/react'
 
 export default function WatchModal(props: {
   isOpen: boolean
@@ -29,11 +29,12 @@ export default function WatchModal(props: {
   }
 
   return (
-    <Modal isCentered closeOnEsc isOpen={isOpen} onClose={onClose}>
+    <Modal autoFocus={false} isCentered closeOnEsc isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent maxW='1280px'>
-        <ModalHeader>{v.title}</ModalHeader>
-        <ModalCloseButton />
+        <Box zIndex={1000}>
+          <ModalCloseButton bg='rgba(0,0,0,.3)' />
+        </Box>
         <VideoPlayer {...videoJsOptions} />
       </ModalContent>
     </Modal>

diff --git a/components/VideoPlayer.tsx b/components/VideoPlayer.tsx
@@ -18,7 +18,7 @@ export default function VideoPlayer(props: VideoJsPlayerOptions): JSX.Element {
 
   return (
     <div data-vjs-player>
-      <video ref={onVideo} className='video-js vjs-big-play-centered' playsInline />
+      <video ref={onVideo} className='vjs-bken video-js vjs-big-play-centered' playsInline />
     </div>
   )
 }
diff --git a/styles/index.css b/styles/index.css
@@ -117,3 +117,11 @@ a:active {
 video {
   outline: none;
 }
+
+.vjs-bken.video-js {
+  color: #fff;
+}
+
+.vjs-bken.video-js .vjs-control-bar {
+  background-color: rgba(0, 0, 0, 0.5);
+}