kayashov73/moovie-downloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

правки поехавшей разметки

Browse Source
This commit is contained in:
Kayashov.SM
2025-09-29 15:30:48 +04:00
parent 0c68dd6b6b
commit b2854a9010
5 changed files with 66 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CardCompact.js
View File

@@ -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>

96
src/components/RecommendationModal.js
View File

@@ -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>
);

3
src/contexts/client.js
View File

@@ -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;

21
src/pages/HomePage.js
View File

@@ -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>

3
src/pages/RecommendationPage.js
View File

@@ -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 скелетонов