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 ? "Статус: Загружен" : "Статус: Загружается" item.hasFile ? "Статус: Загружен" : "Статус: Загружается"
) : null; ) : null;
return ( return (
<Card className="mb-auto" style={{width: '14rem'}}> <Card className="mb-auto mx-auto" style={{width: '20rem'}}>
<Card.Img variant="top" src={image}/> <Card.Img variant="top" src={image}/>
<Card.Body> <Card.Body>
<Card.Title>{item.title}</Card.Title> <Card.Title>{item.title}</Card.Title>

96
src/components/RecommendationModal.js
View File

@@ -1,6 +1,5 @@
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import {Button, Col, Container, FormCheck, FormSelect, Modal, Row} from 'react-bootstrap'; import {Button, Col, Container, FormCheck, FormSelect, Modal, Row} from 'react-bootstrap';
import axios from "axios";
import {useToast} from "../hooks/useToast"; import {useToast} from "../hooks/useToast";
import {radarr} from "../contexts/client"; import {radarr} from "../contexts/client";
@@ -21,6 +20,7 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
const [monitor, setMonitor] = useState(null) const [monitor, setMonitor] = useState(null)
const [film, setFilm] = useState(false) const [film, setFilm] = useState(false)
const {addToast} = useToast(); const {addToast} = useToast();
const rating = item?.ratings?.imdb?.value ?? null;
useEffect(() => { useEffect(() => {
radarr().get("api/v3/qualityprofile") radarr().get("api/v3/qualityprofile")
@@ -28,6 +28,7 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
setMovieQuality(r.data) setMovieQuality(r.data)
}) })
.catch((err) => addToast(err, 'danger')); .catch((err) => addToast(err, 'danger'));
// eslint-disable-next-lint
}, []); }, []);
const handleSubmit = () => { const handleSubmit = () => {
@@ -77,58 +78,63 @@ const RecommendationModal = ({show, handleClose, item, serial, handleSave}) => {
<Modal.Header closeButton> <Modal.Header closeButton>
<Modal.Title>{item.title}</Modal.Title> <Modal.Title>{item.title}</Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body className="d-flex flex-column flex-md-row">
<Container fluid='xl'> <Container fluid>
<Row> <Row className="align-items-start">
<Col sm={{span: 3}}> <Col md={3} className="mb-3">
<img width="100%" className='mb-3' src={item.remotePoster} alt={item.title}/> <img width="100%" className='mb-3' src={item.remotePoster} alt={item.title} />
</Col> </Col>
<Col className="col-9 container text-center"> <Col md={9} className="d-flex flex-column">
<Row> <div>
<div className="col"> <p>{item.overview}</p>
<p>{item.overview}</p> </div>
</div> <div>
</Row> <p>Год выпуска: {item.year}</p>
<Row style={{width: '60%'}}> </div>
<Col> <div className="mb-4">
<p style={{marginRight: '1rem'}}>Мультик</p> <p>Рейтинг: {rating}</p>
<FormCheck type='switch' disabled={serial} style={{marginBottom: '1rem'}} </div>
onChange={() => setFilm(!film)}/> <div>
<p>Фильм</p> <Row>
<FormCheck type='checkbox' disabled={!serial} <Col>
style={{marginBottom: '1rem', marginLeft: '1rem'}} <p style={{marginRight: '1rem'}}>Мультик</p>
label="Сериал"/> <FormCheck type='switch' disabled={serial} style={{marginBottom: '1rem'}}
</Col> onChange={() => setFilm(!film)}/>
</Row> <p>Фильм</p>
<Row> <FormCheck type='checkbox' disabled={!serial}
<Col> style={{marginBottom: '1rem', marginLeft: '1rem'}}
<p style={{width: '50%', paddingTop: '1rem'}}>Что отслеживать</p> label="Сериал"/>
<FormSelect onChange={(e) => setMonitor(e.target.value)}> </Col>
<option selected value={null}>Выберите пункт из меню</option> </Row>
{movieMonitor.map((m) => <option value={m.id} key={m.id}>{m.name}</option>)} <Row>
</FormSelect> <Col>
</Col> <p style={{width: '50%', paddingTop: '1rem'}}>Что отслеживать</p>
</Row> <FormSelect onChange={(e) => setMonitor(e.target.value)}>
<Row> <option selected value={null}>Выберите пункт из меню</option>
<Col> {movieMonitor.map((m) => <option value={m.id} key={m.id}>{m.name}</option>)}
<p style={{width: '50%', paddingTop: '1rem'}}>Качество</p> </FormSelect>
<FormSelect onChange={(e) => setQuality(parseInt(e.target.value))}> </Col>
<option selected value={null}>Выберете качество</option> </Row>
{movieQuality.map((quality) => <option value={quality.id} <Row>
key={quality.id}>{quality.name}</option>)} <Col>
</FormSelect> <p style={{width: '50%', paddingTop: '1rem'}}>Качество</p>
</Col> <FormSelect onChange={(e) => setQuality(parseInt(e.target.value))}>
</Row> <option selected value={null}>Выберете качество</option>
{movieQuality.map((quality) => <option value={quality.id}
key={quality.id}>{quality.name}</option>)}
</FormSelect>
</Col>
</Row>
</div>
</Col> </Col>
</Row> </Row>
<Button variant={'primary'} onClick={() => handleSubmit()}>Скачать</Button>
</Container> </Container>
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>
<Button variant="secondary" onClick={() => handleClose()}> <Button variant="secondary" onClick={() => handleClose()}>
Закрыть Закрыть
</Button> </Button>
<Button variant="primary" onClick={() => handleSubmit()}>Скачать</Button>
</Modal.Footer> </Modal.Footer>
</Modal> </Modal>
); );

3
src/contexts/client.js
View File

@@ -1,7 +1,6 @@
import axios from "axios"; 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 = () => { export const radarr = () => {
const res = axios; const res = axios;

21
src/pages/HomePage.js
View File

@@ -29,16 +29,17 @@ const Home = () => {
</Accordion.Header> </Accordion.Header>
<Accordion.Body> <Accordion.Body>
<Row className='row-cols-auto'> <Row className='row-cols-auto'>
{loading ? {/*{loading ?*/}
( {/* (*/}
// Отображаем 10 скелетонов {/* // Отображаем 10 скелетонов*/}
Array.from({length: 10}, (_, index) => ( {/* Array.from({length: 10}, (_, index) => (*/}
<Col key={`skeleton-${index}`}> {/* <Col key={`skeleton-${index}`}>*/}
<SkeletonCompact key={index} width={300} height={400}/> {/* <SkeletonCompact key={index} width={300} height={400}/>*/}
</Col> {/* </Col>*/}
)) {/* ))*/}
) {/* )*/}
: movies.map(rec => ( {/* :*/}
{movies.map(rec => (
<Col key={`col-${rec.title}-${rec.year}`}> <Col key={`col-${rec.title}-${rec.year}`}>
<CardCompact item={rec} key={`${rec.title}-${rec.year}`}/> <CardCompact item={rec} key={`${rec.title}-${rec.year}`}/>
</Col> </Col>

3
src/pages/RecommendationPage.js
View File

@@ -19,6 +19,7 @@ export function Recommendation() {
.then((r) => setRecommendations(r.data)) .then((r) => setRecommendations(r.data))
.catch((err) => addToast(err, 'danger')) .catch((err) => addToast(err, 'danger'))
.finally(() => setLoading(false)); .finally(() => setLoading(false));
// eslint-disable-next-lint
}, []); }, []);
function handleModal(item) { function handleModal(item) {
@@ -41,7 +42,7 @@ export function Recommendation() {
return ( return (
<Container className="text-center"> <Container className="text-center">
<h2 className="mt-3">Рекомендации</h2> <h2 className="mt-3">Рекомендации</h2>
<Row className='row-cols-auto'> <Row>
{loading ? {loading ?
( (
// Отображаем 10 скелетонов // Отображаем 10 скелетонов