From b2854a90107aed0c271d5301a92192cc59650d95 Mon Sep 17 00:00:00 2001
From: "Kayashov.SM" <kayshovcm@answer-42.ru>
Date: Mon, 29 Sep 2025 15:30:48 +0400
Subject: [PATCH] =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B5=D1=85=D0=B0=D0=B2=D1=88=D0=B5=D0=B9=20=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B7=D0=BC=D0=B5=D1=82=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CardCompact.js         |  2 +-
 src/components/RecommendationModal.js | 96 ++++++++++++++-------------
 src/contexts/client.js                |  3 +-
 src/pages/HomePage.js                 | 21 +++---
 src/pages/RecommendationPage.js       |  3 +-
 5 files changed, 66 insertions(+), 59 deletions(-)

diff --git a/src/components/CardCompact.js b/src/components/CardCompact.js
index 40ceae5..f55c3f8 100644
--- a/src/components/CardCompact.js
+++ b/src/components/CardCompact.js
@@ -8,7 +8,7 @@ const CardCompact = ({item}) => {
         item.hasFile ? "Статус: Загружен" : "Статус: Загружается"
     ) : null;
     return (
-        <Card className="mb-auto" style={{width: '14rem'}}>
+        <Card className="mb-auto mx-auto" style={{width: '20rem'}}>
             <Card.Img variant="top" src={image}/>
             <Card.Body>
                 <Card.Title>{item.title}</Card.Title>
diff --git a/src/components/RecommendationModal.js b/src/components/RecommendationModal.js
index 5f6ad97..aaad867 100644
--- a/src/components/RecommendationModal.js
+++ b/src/components/RecommendationModal.js
@@ -1,6 +1,5 @@
 import React, {useEffect, useState} from 'react';
 import {Button, Col, Container, FormCheck, FormSelect, Modal, Row} from 'react-bootstrap';
-import axios from "axios";
 import {useToast} from "../hooks/useToast";
 import {radarr} from "../contexts/client";
 
@@ -21,6 +20,7 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
     const [monitor, setMonitor] = useState(null)
     const [film, setFilm] = useState(false)
     const {addToast} = useToast();
+    const rating = item?.ratings?.imdb?.value ?? null;
 
     useEffect(() => {
         radarr().get("api/v3/qualityprofile")
@@ -28,6 +28,7 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
                 setMovieQuality(r.data)
             })
             .catch((err) => addToast(err, 'danger'));
+        // eslint-disable-next-lint
     }, []);
 
     const handleSubmit = () => {
@@ -77,58 +78,63 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
             <Modal.Header closeButton>
                 <Modal.Title>{item.title}</Modal.Title>
             </Modal.Header>
-            <Modal.Body>
-                <Container fluid='xl'>
-                    <Row>
-                        <Col sm={{span: 3}}>
-                            <img width="100%" className='mb-3' src={item.remotePoster} alt={item.title}/>
+            <Modal.Body className="d-flex flex-column flex-md-row">
+                <Container fluid>
+                    <Row className="align-items-start">
+                        <Col md={3} className="mb-3">
+                            <img width="100%" className='mb-3' src={item.remotePoster} alt={item.title} />
                         </Col>
-                        <Col className="col-9 container text-center">
-                            <Row>
-                                <div className="col">
-                                    <p>{item.overview}</p>
-                                </div>
-                            </Row>
-                            <Row style={{width: '60%'}}>
-                                <Col>
-                                    <p style={{marginRight: '1rem'}}>Мультик</p>
-                                    <FormCheck type='switch' disabled={serial} style={{marginBottom: '1rem'}}
-                                               onChange={() => setFilm(!film)}/>
-                                    <p>Фильм</p>
-                                    <FormCheck type='checkbox' disabled={!serial}
-                                               style={{marginBottom: '1rem', marginLeft: '1rem'}}
-                                               label="Сериал"/>
-                                </Col>
-                            </Row>
-                            <Row>
-                                <Col>
-                                    <p style={{width: '50%', paddingTop: '1rem'}}>Что отслеживать</p>
-                                    <FormSelect onChange={(e) => setMonitor(e.target.value)}>
-                                        <option selected value={null}>Выберите пункт из меню</option>
-                                        {movieMonitor.map((m) => <option value={m.id} key={m.id}>{m.name}</option>)}
-                                    </FormSelect>
-                                </Col>
-                            </Row>
-                            <Row>
-                                <Col>
-                                    <p style={{width: '50%', paddingTop: '1rem'}}>Качество</p>
-                                    <FormSelect onChange={(e) => setQuality(parseInt(e.target.value))}>
-                                        <option selected value={null}>Выберете качество</option>
-                                        {movieQuality.map((quality) => <option value={quality.id}
-                                                                               key={quality.id}>{quality.name}</option>)}
-                                    </FormSelect>
-                                </Col>
-                            </Row>
+                        <Col md={9} className="d-flex flex-column">
+                            <div>
+                                <p>{item.overview}</p>
+                            </div>
+                            <div>
+                                <p>Год выпуска: {item.year}</p>
+                            </div>
+                            <div className="mb-4">
+                                <p>Рейтинг: {rating}</p>
+                            </div>
+                            <div>
+                                <Row>
+                                    <Col>
+                                        <p style={{marginRight: '1rem'}}>Мультик</p>
+                                        <FormCheck type='switch' disabled={serial} style={{marginBottom: '1rem'}}
+                                                   onChange={() => setFilm(!film)}/>
+                                        <p>Фильм</p>
+                                        <FormCheck type='checkbox' disabled={!serial}
+                                                   style={{marginBottom: '1rem', marginLeft: '1rem'}}
+                                                   label="Сериал"/>
+                                    </Col>
+                                </Row>
+                                <Row>
+                                    <Col>
+                                        <p style={{width: '50%', paddingTop: '1rem'}}>Что отслеживать</p>
+                                        <FormSelect onChange={(e) => setMonitor(e.target.value)}>
+                                            <option selected value={null}>Выберите пункт из меню</option>
+                                            {movieMonitor.map((m) => <option value={m.id} key={m.id}>{m.name}</option>)}
+                                        </FormSelect>
+                                    </Col>
+                                </Row>
+                                <Row>
+                                    <Col>
+                                        <p style={{width: '50%', paddingTop: '1rem'}}>Качество</p>
+                                        <FormSelect onChange={(e) => setQuality(parseInt(e.target.value))}>
+                                            <option selected value={null}>Выберете качество</option>
+                                            {movieQuality.map((quality) => <option value={quality.id}
+                                                                                   key={quality.id}>{quality.name}</option>)}
+                                        </FormSelect>
+                                    </Col>
+                                </Row>
+                            </div>
                         </Col>
                     </Row>
-
-                    <Button variant={'primary'} onClick={() => handleSubmit()}>Скачать</Button>
                 </Container>
             </Modal.Body>
             <Modal.Footer>
-                <Button variant="secondary" onClick={() => handleClose()}>
+            <Button variant="secondary" onClick={() => handleClose()}>
                     Закрыть
                 </Button>
+                <Button variant="primary" onClick={() => handleSubmit()}>Скачать</Button>
             </Modal.Footer>
         </Modal>
     );
diff --git a/src/contexts/client.js b/src/contexts/client.js
index 2e1590c..da06c75 100644
--- a/src/contexts/client.js
+++ b/src/contexts/client.js
@@ -1,7 +1,6 @@
 import axios from "axios";
 
-const host = "192.168.1.100:30011";
-// const host = "tracker.kayashov.keenetic.pro";
+const host = "tracker.kayashov.keenetic.pro";
 
 export const radarr = () => {
     const res = axios;
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index 3ed98e6..c71ce11 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -29,16 +29,17 @@ const Home = () => {
                     </Accordion.Header>
                     <Accordion.Body>
                         <Row className='row-cols-auto'>
-                            {loading ?
-                                (
-                                    // Отображаем 10 скелетонов
-                                    Array.from({length: 10}, (_, index) => (
-                                        <Col key={`skeleton-${index}`}>
-                                            <SkeletonCompact key={index} width={300} height={400}/>
-                                        </Col>
-                                    ))
-                                )
-                                : movies.map(rec => (
+                            {/*{loading ?*/}
+                            {/*    (*/}
+                            {/*        // Отображаем 10 скелетонов*/}
+                            {/*        Array.from({length: 10}, (_, index) => (*/}
+                            {/*            <Col key={`skeleton-${index}`}>*/}
+                            {/*                <SkeletonCompact key={index} width={300} height={400}/>*/}
+                            {/*            </Col>*/}
+                            {/*        ))*/}
+                            {/*    )*/}
+                            {/*    :*/}
+                                {movies.map(rec => (
                                     <Col key={`col-${rec.title}-${rec.year}`}>
                                         <CardCompact item={rec} key={`${rec.title}-${rec.year}`}/>
                                     </Col>
diff --git a/src/pages/RecommendationPage.js b/src/pages/RecommendationPage.js
index 302156e..a797a21 100644
--- a/src/pages/RecommendationPage.js
+++ b/src/pages/RecommendationPage.js
@@ -19,6 +19,7 @@ export function Recommendation() {
             .then((r) => setRecommendations(r.data))
             .catch((err) => addToast(err, 'danger'))
             .finally(() => setLoading(false));
+        // eslint-disable-next-lint
     }, []);
 
     function handleModal(item) {
@@ -41,7 +42,7 @@ export function Recommendation() {
     return (
         <Container className="text-center">
             <h2 className="mt-3">Рекомендации</h2>
-            <Row className='row-cols-auto'>
+            <Row>
                 {loading ?
                     (
                         // Отображаем 10 скелетонов