sco/tecnologiabanana
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

migliorato lo stile

Browse Source
This commit is contained in:
matteo
2019-02-19 01:16:25 +01:00
parent 52d9ac8602
commit 5f86943496
9 changed files with 159 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+1 -1
View File
@@ -83,7 +83,7 @@ class App extends React.Component {
</Collapse>
</Col>
</Row>
<Row style={{ "maxHeight": `calc(98vh - ${this.state.playerHeight}px - 46px)` }} className='mt-1 downSection'>
<Row style={{ "maxHeight": `calc(98vh - ${this.state.playerHeight}px - 40px)` }} className='mt-2 downSection'>
<Switch>
<Route exact path='/' component={VideoList} />
<Route path={"/video/:id"} component={Suggestion} />
src/Suggestion.js
+1 -3
View File
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { Row } from 'react-bootstrap';
import { Row, Col } from 'react-bootstrap';
import { Switch, Route } from 'react-router';
import Random from './reccomenders/Random';
import Related from './reccomenders/Related';
@@ -35,7 +35,6 @@ class Suggestion extends Component {
render() {
return (
<React.Fragment>
<Row>
<Switch>
<Route path='/video/:id/vitali' component={fvitali} />
<Route path='/search/:query' component={Search} />
@@ -46,7 +45,6 @@ class Suggestion extends Component {
{/* lasciare questo per ultimo */}
<Route component={Related} />
</Switch>
</Row>
</React.Fragment>
);
}
src/VideoInfo.js
+3 -1
View File
@@ -71,7 +71,9 @@ class VideoInfo extends React.Component {
</span>
);
} else if (!isLoaded) {
return <span className="text-white">Loading...</span>;
return <div className="text-center">
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</div>;
} else {
return (
<React.Fragment>
src/VideoList.js
+31 -8
View File
@@ -1,5 +1,5 @@
import React from 'react';
import { Col, ListGroup, Card, CardDeck } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
import { Col, ListGroup, Card, CardDeck, Media } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
import axios from 'axios'; // eslint-disable-line no-unused-vars
import { Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
/*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
@@ -113,13 +113,9 @@ class VideoList extends React.Component {
</React.Fragment>
);
} else if (!isLoaded) {
return (
<React.Fragment>
<Col>
<p className="text-center">Loading...</p>
</Col>
</React.Fragment>
);
return <Col className="text-center">
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</Col>;
} else {
return (
<React.Fragment>
@@ -152,6 +148,33 @@ class VideoList extends React.Component {
</Col>
))}
</React.Fragment>
// <ul className="list-unstyled">{
// items.map(item => (
// <Link
// key={item.videoId}
// as="li" className="media mx-5 my-1 suggItem"
// to={{
// pathname: '/video/' + item.videoID,
// state: {
// artist: item.artist,
// title: item.title
// }
// }}>
// <img
// width={240}
// height={120}
// className="align-self-center mr-3"
// src={item.thumbnail}
// alt={'Thumbnail of ' + item.title}
// />
// <Media.Body>
// <h5>{item.artist} - {item.title}</h5>
// <p>{item.category}</p>
// </Media.Body>
// </Link>
// ))}</ul>
);
}
}
src/Wikipedia.js
+4 -2
View File
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
import wikijs from 'wikijs';
import wdk from 'wikidata-sdk';
import axios from 'axios';
import { Table } from 'react-bootstrap';
import { Table, Col } from 'react-bootstrap';
import moment from 'moment';
import "./css/Wikipedia.css"
@@ -220,7 +220,9 @@ class Wikipedia extends Component {
if (error) {
return <React.Fragment>Error: {error.message}</React.Fragment>;
} else if (!this.state.isLoaded) {
return <React.Fragment>Loading...</React.Fragment>;
return <Col className="text-center">
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</Col>;
} else {
return (<>
{/* {isWikiLoaded && wikipedia.desc} */}
src/css/App.css
+69 -1
View File
@@ -1,5 +1,4 @@
.upperSection{
display: fixed;
}
@@ -11,3 +10,72 @@
overflow-y: auto;
overflow-x: hidden;
}
.suggItem:hover{
background-color: #213241;
text-decoration: none;
/* color: */
}
.suggItem:hover h5{
color: #DF691A;
}
.suggItem p{
color: #FFFFFF;
}
/* LOADING ANIMATION */
.lds-ellipsis {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ellipsis div {
position: absolute;
top: 27px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 6px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 6px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 26px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 45px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(19px, 0);
}
}
src/reccomenders/Recent.js
+3 -7
View File
@@ -104,13 +104,9 @@ class Recent extends React.Component {
</React.Fragment>
);
} else if (!isLoaded) {
return (
<React.Fragment>
<Col>
<p className="text-center">Loading...</p>
</Col>
</React.Fragment>
);
return <Col className="text-center">
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</Col>;
} else {
return (
<React.Fragment>
src/reccomenders/Search.js
+24 -18
View File
@@ -1,7 +1,7 @@
import React from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { Card, Col } from 'react-bootstrap';
import { Card, Col, Media } from 'react-bootstrap';
class Search extends React.Component {
@@ -44,7 +44,8 @@ class Search extends React.Component {
// }
componentDidUpdate(prevProps, prevState) {
if (prevProps.match.params.query !== this.props.match.params.query)
if (prevProps.match.params.query !== this.props.match.params.query) {
this.setState({ isLoaded: false })
if (new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.props.match.params.query.toString()))
axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: {
@@ -68,6 +69,8 @@ class Search extends React.Component {
)
else
this.youtubeSearch();
}
}
// componentWillUnmount() {
@@ -102,31 +105,34 @@ class Search extends React.Component {
if (this.state.error) {
return <React.Fragment>{this.state.error.message} -- {this.state.error.response.data.error.errors[0].reason} </React.Fragment>;
} else if (!this.state.isLoaded) {
return <React.Fragment>Loading...</React.Fragment>;
return <Col className="text-center">
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</Col>;
} else {
return (
<React.Fragment>
{this.state.res.items.map(item => (<Col key={item.id.videoId} md="4">
<Card>
<ul className="list-unstyled">{
this.state.res.items.map(item => (
<Link
key={item.id.videoId}
as="li" className="media mx-5 my-1 suggItem"
to={{
pathname: '/video/' + item.id.videoId,
}}
>
<Card.Img
}}>
<img
width={240}
height={120}
className="align-self-center mr-3"
src={item.snippet.thumbnails.medium.url}
alt={'Thumbnail of ' + item.snippet.title}
/>
<Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white">
{item.snippet.title}
</Card.Title>
</Card.ImgOverlay>
<Media.Body>
<h5>{item.snippet.title}</h5>
<p>{item.snippet.description}</p>
<p>Reccomender: Search</p>
</Media.Body>
</Link>
</Card>
</Col>
))}
</React.Fragment>
))
}</ul>
);
}
}
src/reccomenders/fvitali.js
+2 -4
View File
@@ -79,11 +79,9 @@ class fvitali extends React.Component {
);
} else if (!isLoaded) {
return (
<React.Fragment>
<Col>
<p className="text-center">Loading...</p>
<Col className="text-center">
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</Col>
</React.Fragment>
);
} else {
return (