poster hidden if no torrent source

web/src/components/Add/AddDialog.jsx

@@ -23,16 +23,17 @@ import {
   Content,
   Header,
   IconWrapper,
-  LeftSide,
+  RightSide,
   Poster,
   PosterSuggestions,
   PosterSuggestionsItem,
   PosterWrapper,
-  RightSide,
-  RightSideBottomSectionFileSelected,
-  RightSideBottomSectionNoFile,
-  RightSideTopSection,
+  LeftSide,
+  LeftSideBottomSectionFileSelected,
+  LeftSideBottomSectionNoFile,
+  LeftSideTopSection,
   TorrentIconWrapper,
+  RightSideContainer,
 } from './style'
 import { checkImageURL, getMoviePosters } from './helpers'
 
@@ -173,72 +174,7 @@ export default function AddDialog({ handleClose }) {
 
       <Content>
         <LeftSide>
-          <TextField
-            onChange={handleTitleChange}
-            value={title}
-            margin='dense'
-            label={t('Title')}
-            type='text'
-            fullWidth
-          />
-          <TextField
-            onChange={handlePosterUrlChange}
-            value={posterUrl}
-            margin='dense'
-            label={t('AddPosterLinkInput')}
-            type='url'
-            fullWidth
-          />
-
-          <PosterWrapper>
-            <Poster poster={+isPosterUrlCorrect}>
-              {isPosterUrlCorrect ? <img src={posterUrl} alt='poster' /> : <NoImageIcon />}
-            </Poster>
-
-            <PosterSuggestions>
-              {posterList
-                ?.filter(url => url !== posterUrl)
-                .slice(0, 12)
-                .map(url => (
-                  <PosterSuggestionsItem onClick={() => userChangesPosterUrl(url)} key={uuidv4()}>
-                    <img src={url} alt='poster' />
-                  </PosterSuggestionsItem>
-                ))}
-            </PosterSuggestions>
-
-            {currentLang !== 'en' && (
-              <PosterLanguageSwitch
-                onClick={() => {
-                  const newLanguage = posterSearchLanguage === 'en' ? 'ru' : 'en'
-                  setPosterSearchLanguage(newLanguage)
-                  posterSearch(title, newLanguage, { shouldRefreshMainPoster: true })
-                }}
-                showbutton={+isPosterUrlCorrect}
-                color='primary'
-                variant='contained'
-                size='small'
-              >
-                {posterSearchLanguage === 'en' ? 'EN' : 'RU'}
-              </PosterLanguageSwitch>
-            )}
-
-            <ClearPosterButton
-              showbutton={+isPosterUrlCorrect}
-              onClick={() => {
-                removePoster()
-                setIsUserInteractedWithPoster(true)
-              }}
-              color='primary'
-              variant='contained'
-              size='small'
-            >
-              {t('Clear')}
-            </ClearPosterButton>
-          </PosterWrapper>
-        </LeftSide>
-
-        <RightSide>
-          <RightSideTopSection active={isTorrentSourceActive}>
+          <LeftSideTopSection active={isTorrentSourceActive}>
             <TextField
               onChange={handleTorrentSourceChange}
               value={torrentSource}
@@ -252,10 +188,10 @@ export default function AddDialog({ handleClose }) {
               inputProps={{ autoComplete: 'off' }}
               disabled={!!selectedFile}
             />
-          </RightSideTopSection>
+          </LeftSideTopSection>
 
           {selectedFile ? (
-            <RightSideBottomSectionFileSelected>
+            <LeftSideBottomSectionFileSelected>
               <TorrentIconWrapper>
                 <TorrentIcon />
 
@@ -263,9 +199,9 @@ export default function AddDialog({ handleClose }) {
                   <CancelIcon />
                 </CancelIconWrapper>
               </TorrentIconWrapper>
-            </RightSideBottomSectionFileSelected>
+            </LeftSideBottomSectionFileSelected>
           ) : (
-            <RightSideBottomSectionNoFile isDragActive={isDragActive} {...getRootProps()}>
+            <LeftSideBottomSectionNoFile isDragActive={isDragActive} {...getRootProps()}>
               <input {...getInputProps()} />
               <div>{t('AppendFile.Or')}</div>
 
@@ -273,8 +209,77 @@ export default function AddDialog({ handleClose }) {
                 <AddItemIcon color='primary' />
                 <div>{t('AppendFile.ClickOrDrag')}</div>
               </IconWrapper>
-            </RightSideBottomSectionNoFile>
+            </LeftSideBottomSectionNoFile>
           )}
+        </LeftSide>
+
+        <RightSide>
+          <RightSideContainer isHidden={!torrentSource}>
+            <TextField
+              onChange={handleTitleChange}
+              value={title}
+              margin='dense'
+              label={t('Title')}
+              type='text'
+              fullWidth
+            />
+            <TextField
+              onChange={handlePosterUrlChange}
+              value={posterUrl}
+              margin='dense'
+              label={t('AddPosterLinkInput')}
+              type='url'
+              fullWidth
+            />
+
+            <PosterWrapper>
+              <Poster poster={+isPosterUrlCorrect}>
+                {isPosterUrlCorrect ? <img src={posterUrl} alt='poster' /> : <NoImageIcon />}
+              </Poster>
+
+              <PosterSuggestions>
+                {posterList
+                  ?.filter(url => url !== posterUrl)
+                  .slice(0, 12)
+                  .map(url => (
+                    <PosterSuggestionsItem onClick={() => userChangesPosterUrl(url)} key={uuidv4()}>
+                      <img src={url} alt='poster' />
+                    </PosterSuggestionsItem>
+                  ))}
+              </PosterSuggestions>
+
+              {currentLang !== 'en' && (
+                <PosterLanguageSwitch
+                  onClick={() => {
+                    const newLanguage = posterSearchLanguage === 'en' ? 'ru' : 'en'
+                    setPosterSearchLanguage(newLanguage)
+                    posterSearch(title, newLanguage, { shouldRefreshMainPoster: true })
+                  }}
+                  showbutton={+isPosterUrlCorrect}
+                  color='primary'
+                  variant='contained'
+                  size='small'
+                >
+                  {posterSearchLanguage === 'en' ? 'EN' : 'RU'}
+                </PosterLanguageSwitch>
+              )}
+
+              <ClearPosterButton
+                showbutton={+isPosterUrlCorrect}
+                onClick={() => {
+                  removePoster()
+                  setIsUserInteractedWithPoster(true)
+                }}
+                color='primary'
+                variant='contained'
+                size='small'
+              >
+                {t('Clear')}
+              </ClearPosterButton>
+            </PosterWrapper>
+          </RightSideContainer>
+
+          <RightSideContainer notificationMessage={t('AddTorrentSourceNotification')} isHidden={torrentSource} />
         </RightSide>
       </Content>
 

web/src/components/Add/style.js

@@ -25,24 +25,56 @@ export const Content = styled.div`
   }
 `
 
-export const LeftSide = styled.div`
-  padding: 0 20px 20px 20px;
-  border-right: 1px solid rgba(0, 0, 0, 0.12);
-`
 export const RightSide = styled.div`
-  display: flex;
-  flex-direction: column;
+  padding: 0 20px 20px 20px;
 `
 
-export const RightSideBottomSectionBasicStyles = css`
+export const RightSideContainer = styled.div`
+  ${({ isHidden, notificationMessage }) => css`
+    height: 455px;
+
+    ${notificationMessage &&
+    css`
+      position: relative;
+      white-space: nowrap;
+
+      :before {
+        font-size: 20px;
+        font-weight: 300;
+        content: '${notificationMessage}';
+        display: grid;
+        place-items: center;
+        background: #84cda7;
+        padding: 10px 15px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 5px;
+      }
+    `};
+
+    ${isHidden &&
+    css`
+      display: none;
+    `};
+  `}
+`
+export const LeftSide = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+`
+
+export const LeftSideBottomSectionBasicStyles = css`
   transition: transform 0.3s;
   padding: 20px;
   height: 100%;
   display: grid;
 `
 
-export const RightSideBottomSectionNoFile = styled.div`
-  ${RightSideBottomSectionBasicStyles}
+export const LeftSideBottomSectionNoFile = styled.div`
+  ${LeftSideBottomSectionBasicStyles}
   border: 4px dashed transparent;
   text-align: center;
 
@@ -66,8 +98,8 @@ export const RightSideBottomSectionNoFile = styled.div`
   }
 `
 
-export const RightSideBottomSectionFileSelected = styled.div`
-  ${RightSideBottomSectionBasicStyles}
+export const LeftSideBottomSectionFileSelected = styled.div`
+  ${LeftSideBottomSectionBasicStyles}
   place-items: center;
 
   @media (max-width: 930px) {
@@ -107,7 +139,7 @@ export const IconWrapper = styled.div`
   }
 `
 
-export const RightSideTopSection = styled.div`
+export const LeftSideTopSection = styled.div`
   background: #e3f2eb;
   padding: 0 20px 20px 20px;
   transition: all 0.3s;
@@ -141,11 +173,13 @@ export const PosterWrapper = styled.div`
 export const PosterSuggestions = styled.div`
   display: grid;
   grid-area: suggestions;
+  grid-auto-flow: column;
   grid-template-columns: repeat(3, max-content);
   grid-template-rows: repeat(4, max-content);
   gap: 5px;
 
   @media (max-width: 540px) {
+    grid-auto-flow: row;
     grid-template-columns: repeat(5, max-content);
   }
   @media (max-width: 375px) {
@@ -228,8 +262,6 @@ export const ClearPosterButton = styled(Button)`
 export const PosterLanguageSwitch = styled.div`
   grid-area: poster;
   z-index: 5;
-  /* justify-self: center; */
-  /* transform: translateY(-50%); */
   position: absolute;
   top: 0;
   left: 50%;
@@ -244,14 +276,9 @@ export const PosterLanguageSwitch = styled.div`
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s;
-  /* padding: 0; */
 
   ${({ showbutton }) => !showbutton && 'display: none'};
 
-  /* @media (max-width: 540px) {
-    transform: translateY(-140%);
-  } */
-
   :hover {
     filter: brightness(1.1);
   }

web/src/locales/en/translation.json

@@ -102,5 +102,6 @@
     "ClickOrDrag": "CLICK / DRAG & DROP (.torrent)"
   },
   "TorrentSourceOptions": "magnet / hash / .torrent file link",
-  "Clear": "Clear"
+  "Clear": "Clear",
+  "AddTorrentSourceNotification": "First add your torrent source"
 }

web/src/locales/ru/translation.json

@@ -102,5 +102,6 @@
     "ClickOrDrag": "НАЖМИТЕ / ПЕРЕТАЩИТЕ ФАЙЛ (.torrent)"
   },
   "TorrentSourceOptions": "магнитная ссылка / хеш / ссылка на .torrent файл",
-  "Clear": "Очистить"
+  "Clear": "Очистить",
+  "AddTorrentSourceNotification": "Сначала добавьте торрент источник"
 }