tv shows search added

web/src/components/Add/AddDialog.jsx

@@ -10,7 +10,7 @@ import axios from 'axios'
 import { useTranslation } from 'react-i18next'
 import { Input } from '@material-ui/core'
 import styled, { css } from 'styled-components'
-import { NoImageIcon } from 'icons'
+import { NoImageIcon, AddItemIcon } from 'icons'
 import debounce from 'lodash/debounce'
 import { v4 as uuidv4 } from 'uuid'
 
@@ -44,13 +44,58 @@ const LeftSide = styled.div`
   border-right: 1px solid rgba(0, 0, 0, 0.12);
 `
 const RightSide = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const RightSideBottomSection = styled.div`
+  transition: all 0.3s;
   padding: 20px;
+  flex: 1;
+  display: grid;
+  grid-template-rows: 100px 1fr;
+  justify-items: center;
+  cursor: pointer;
+
+  :hover {
+    svg {
+      transform: translateY(-4%);
+    }
+  }
+`
+
+const IconWrapper = styled.div`
+  display: grid;
+  justify-items: center;
+  align-content: start;
+  gap: 10px;
+
+  svg {
+    transition: all 0.3s;
+  }
+`
+
+const RightSideTopSection = styled.div`
+  background: #fff;
+  padding: 0 20px 20px 20px;
+
+  ${({ active }) =>
+    active &&
+    css`
+      + ${RightSideBottomSection} {
+        box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
+      }
+    `};
 `
 
 const PosterWrapper = styled.div`
   margin-top: 20px;
-  height: 300px;
+  /* height: 300px;
-  display: flex;
+  display: flex; */
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  grid-template-rows: 300px max-content;
+  gap: 5px;
 `
 const PosterSuggestions = styled.div`
   display: grid;
@@ -58,7 +103,7 @@ const PosterSuggestions = styled.div`
   grid-template-rows: repeat(4, calc(25% - 4px));
   grid-auto-flow: column;
   gap: 5px;
-  margin-left: 5px;
+  /* margin-left: 5px; */
 `
 const PosterSuggestionsItem = styled.div`
   cursor: pointer;
@@ -120,7 +165,7 @@ export const Poster = styled.div`
 `
 
 const getMoviePosters = movieName => {
-  const request = `${`http://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_TMDB_API_KEY}`}&query=${movieName}`
+  const request = `${`http://api.themoviedb.org/3/search/multi?api_key=${process.env.REACT_APP_TMDB_API_KEY}`}&query=${movieName}`
 
   return axios
     .get(request)
@@ -156,6 +201,7 @@ const checkImageURL = async url => {
 export default function AddDialog({ handleClose }) {
   const { t } = useTranslation()
   const [torrentSource, setTorrentSource] = useState('')
+  const [torrentSourceSelected, setTorrentSourceSelected] = useState(false)
   const [title, setTitle] = useState('')
   const [posterUrl, setPosterUrl] = useState('')
   const [isPosterUrlCorrect, setIsPosterUrlCorrect] = useState(false)
@@ -193,10 +239,9 @@ export default function AddDialog({ handleClose }) {
     [isUserInteractedWithPoster],
   )
 
-  const inputMagnet = ({ target: { value } }) => setTorrentSource(value)
+  const handleTorrentSourceChange = ({ target: { value } }) => setTorrentSource(value)
   const handleTitleChange = ({ target: { value } }) => {
     setTitle(value)
-
     delayedPosterSearch(value)
   }
   const handlePosterUrlChange = ({ target: { value } }) => {
@@ -223,6 +268,7 @@ export default function AddDialog({ handleClose }) {
 
   const userChangesPosterUrl = url => {
     setPosterUrl(url)
+    checkImageURL(url).then(setIsPosterUrlCorrect)
     setIsUserInteractedWithPoster(true)
   }
 
@@ -266,9 +312,44 @@ export default function AddDialog({ handleClose }) {
                         </PosterSuggestionsItem>
                       ))}
                   </PosterSuggestions>
+
+                  <Button
+                    style={{ justifySelf: 'center' }}
+                    onClick={removePoster}
+                    color='primary'
+                    variant='outlined'
+                    size='small'
+                    disabled={!posterUrl}
+                  >
+                    Clear
+                  </Button>
                 </PosterWrapper>
               </LeftSide>
-              <RightSide>RightSide</RightSide>
+
+              <RightSide>
+                <RightSideTopSection active={torrentSourceSelected}>
+                  <TextField
+                    onChange={handleTorrentSourceChange}
+                    value={torrentSource}
+                    margin='dense'
+                    label={t('TorrentSourceLink')}
+                    helperText='magnet / hash / torrent'
+                    type='text'
+                    fullWidth
+                    onFocus={() => setTorrentSourceSelected(true)}
+                    onBlur={() => setTorrentSourceSelected(false)}
+                    inputProps={{ autoComplete: 'off' }}
+                  />
+                </RightSideTopSection>
+                <RightSideBottomSection>
+                  <div>OR</div>
+
+                  <IconWrapper>
+                    <AddItemIcon color='primary' />
+                    <div>CLICK / DRAG & DROP</div>
+                  </IconWrapper>
+                </RightSideBottomSection>
+              </RightSide>
             </MainSectionContentWrapper>
             <ButtonWrapper>
               <Button onClick={handleClose} color='primary' variant='outlined'>

web/src/icons/index.jsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const NoImageIcon = () => (
   <svg
     height='80px'
@@ -20,3 +19,25 @@ export const NoImageIcon = () => (
     </g>
   </svg>
 )
+
+export const AddItemIcon = () => (
+  <svg
+    height='100px'
+    width='100px'
+    fill='#248a57'
+    viewBox='0 0 452 452'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <g id='#000000ff'>
+      <path
+        opacity='1.00'
+        d=' M 210.49 18.69 C 244.92 16.12 280.02 22.13 311.46 36.47 C 344.90 51.54 374.16 75.69 395.41 105.58 C 415.62 133.87 428.55 167.34 432.48 201.89 C 438.07 248.86 427.02 297.61 401.45 337.43 C 382.92 366.59 357.02 391.04 326.80 407.80 C 300.81 422.31 271.64 431.08 241.96 433.26 C 207.37 435.97 172.14 429.83 140.54 415.51 C 109.95 401.69 82.82 380.33 62.16 353.86 C 39.25 324.67 24.38 289.21 19.78 252.38 C 14.94 214.51 20.65 175.31 36.47 140.54 C 54.11 101.38 84.24 67.99 121.37 46.39 C 148.44 30.52 179.19 20.98 210.49 18.69 M 213.46 36.60 C 178.91 38.80 145.03 50.71 116.76 70.72 C 84.67 93.21 59.84 125.88 46.91 162.88 C 34.87 196.99 32.96 234.54 41.25 269.73 C 48.89 302.45 65.53 332.98 88.79 357.21 C 113.91 383.56 146.78 402.45 182.25 410.72 C 216.67 418.86 253.37 417.21 286.87 405.85 C 329.85 391.49 367.13 361.01 389.89 321.85 C 406.02 294.41 414.96 262.84 415.73 231.03 C 416.71 196.59 408.11 161.91 390.97 132.00 C 372.31 99.13 343.57 72.09 309.61 55.49 C 279.95 40.89 246.43 34.40 213.46 36.60 Z'
+      />
+      <path
+        opacity='1.00'
+        d=' M 217.02 117.63 C 223.01 117.45 228.99 117.45 234.98 117.63 C 235.16 150.72 234.93 183.81 235.09 216.89 C 268.18 217.03 301.28 216.82 334.38 216.99 C 334.57 222.99 334.57 229.00 334.38 235.01 C 301.28 235.18 268.18 234.97 235.09 235.11 C 234.93 268.19 235.16 301.28 234.98 334.37 C 228.99 334.55 223.00 334.55 217.02 334.37 C 216.84 301.28 217.07 268.19 216.92 235.11 C 183.82 234.97 150.72 235.17 117.62 235.01 C 117.43 229.00 117.43 222.99 117.62 216.99 C 150.72 216.82 183.82 217.03 216.91 216.89 C 217.07 183.81 216.84 150.72 217.02 117.63 Z'
+      />
+    </g>
+  </svg>
+)

web/src/locales/en/translation.json

@@ -38,7 +38,7 @@
   "Host": "Host",
   "Info": "Info",
   "LatestFilePlayed": "Latest file played:",
-  "MagnetOrTorrentFileLink": "Magnet or torrent file link",
+  "TorrentSourceLink": "Torrent source link",
   "Name": "Name",
   "NoTorrentsAdded": "No torrents added",
   "Offline": "Offline",
@@ -50,7 +50,7 @@
   "PiecesCount": "Pieces count",
   "PiecesLength": "Pieces length",
   "PlaylistAll": "Playlist All",
-  "AddPosterLinkInput": "Link to poster",
+  "AddPosterLinkInput": "Poster link",
   "Preload": "Preload",
   "PreloadBuffer": "Preload Buffer",
   "ReaderReadAHead": "Reader Read Ahead (5-100%)",

web/src/locales/ru/translation.json

@@ -38,7 +38,7 @@
   "Host": "Хост",
   "Info": "Инфо",
   "LatestFilePlayed": "Последний воспроизведенный файл:",
-  "MagnetOrTorrentFileLink": "Ссылка на файл торрента или magnet-ссылка",
+  "TorrentSourceLink": "Ссылка на источник торрента",
   "Name": "Название",
   "NoTorrentsAdded": "Нет торрентов",
   "Offline": "Сервер не доступен",