Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[New feature] Quote fetcher #8

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

[New feature] Quote fetcher #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6ac95d7
Added quote fetcher
Oct 2, 2019
4567e66
Change quote on variable interval
Oct 2, 2019
79efba4
Merge branch 'master' into quote_fetcher
akshat157 Oct 2, 2019
da4acfc
Update App.js
akshat157 Oct 2, 2019
ce6b765
Reset interval after each quote change
Oct 2, 2019
f996381
Merge with remote
Oct 2, 2019
617f5a5
Fixed interval time amount
Oct 2, 2019
d48fc12
Changed font sizes and text decorations
Oct 2, 2019
3d1cf2f
Media query fontsize and variable character limit
Oct 2, 2019
6972d0f
Merge branch 'master' into quote_fetcher
akshat157 Oct 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,3 +137,48 @@ button .active {
font-size: 32px;
color: white;
}

.quote {
position: absolute;
top: 6%;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 2em;
z-index: 1;
padding-bottom: 5vh;
width: 35%
}

.quote-text {
font-weight: lighter;
font-style: italic;
font-size: 3.5vh;
}

.quote-author {
position: absolute;
font-size: 2.5vh;
left: 45%;
}

@media (max-width: 767px){
.quote {
position: absolute;
top: 5%;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 2em;
z-index: 1;
padding-bottom: 5vh;
width: 30%
}

.quote-text {
font-size: 2.5vh;
}

.quote-author {
font-size: 2vh;
left: 5%;
}
}
49 changes: 41 additions & 8 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React, { Component } from 'react'
// import logo from './logo.svg';
import StyledProgressbar from './StyledProgressbar'
import Sound from 'react-sound'
import SoundComponent from './playSound'
import 'react-circular-progressbar/dist/styles.css'
import './App.css'
import StyledProgressbar from './StyledProgressbar';
import Sound from 'react-sound';
import SoundComponent from './playSound';
import 'react-circular-progressbar/dist/styles.css';
import './App.css';
import { quotes } from './quoteList';

const playButton = 'svg/play.svg'
const pauseButton = 'svg/pause.svg'
Expand All @@ -25,6 +26,8 @@ const parkImg = 'img/park.jpg'
const streamImg = 'img/stream.jpg'
const wavesImg = 'img/waves.jpg'

const QUOTE_CHANGE_INTERVAL_TIME = 15000;

class App extends Component {
constructor(props) {
super(props)
Expand All @@ -37,6 +40,8 @@ class App extends Component {
audioUrl : rainAudio, // Default
bgImg : rainImg,
desiredTime : 120, // Default
quote : quotes[0],
quoteInterval : () => this.changeQuote(),
timeHovered : false,
audioHovered : false,
volume : 100, // Default
Expand All @@ -46,6 +51,10 @@ class App extends Component {
}
}

componentDidMount() {
this.interval = setInterval(this.state.quoteInterval, QUOTE_CHANGE_INTERVAL_TIME);
}

timeSelect(x) {
this.setState({
desiredTime: x.duration,
Expand Down Expand Up @@ -109,6 +118,21 @@ class App extends Component {
}
}

changeQuote(){
const QUOTE_CHARACTER_LIMIT = window.visualViewport.width < 768 ? 90 : 150;

//Reset interval
clearInterval(this.interval);
this.interval = setInterval(this.state.quoteInterval, QUOTE_CHANGE_INTERVAL_TIME);

let newQuote = quotes[Math.floor(Math.random() * quotes.length-1)] || quotes[0];
if(newQuote.quote.length > QUOTE_CHARACTER_LIMIT)
this.changeQuote();
else
this.setState({
quote: newQuote
});

handleTimeHover(){
this.setState({
timeHovered: !this.state.timeHovered
Expand All @@ -125,7 +149,7 @@ class App extends Component {
let newVolume = event.target.value;
this.setState({
volume: this.state.mute ? this.state.volume : newVolume,
volumeIcon: this.state.mute || newVolume === 0 ? noVolumeIcon : newVolume <= 50 ? quietVolumeIcon : loudVolumeIcon
volumeIcon: this.state.mute || newVolume === 0 ? noVolumeIcon : newVolume <= 50 ? quietVolumeIcon : loudVolumeIcon,
});
}

Expand All @@ -152,8 +176,17 @@ class App extends Component {
return (
<div className="App">
<div className="bg-overlay"></div>
<div className="bg" style={{ backgroundImage: `url(${this.state.bgImg})` }} />
<div className="time-menu">{timeOptions}</div>
<div className="bg" style={{ backgroundImage: `url(${this.state.bgImg})` }} ></div>

<div onClick={this.changeQuote.bind(this)} className="quote">
<span className="quote-text">“&nbsp;{this.state.quote.quote} ”</span>
<br/>
<span className="quote-author">-&nbsp;{this.state.quote.author}</span>
</div>
<div className="time-menu">
{timeOptions}
</div>

<div className="player-container">
<img className="playPause" src={this.state.pbuttonUrl} alt="Play" onClick={ (e) => {this.playPause()} }/>

Expand Down
Loading