moonstar-x/reddit-slideshow
1
0
Fork 0
Code Issues Pull Requests Activity

Don't auto go to next video if current didn't end

Browse Source
This commit is contained in:
Ismael Padilla 2022-03-14 21:24:29 -03:00
parent 823f7f52eb
commit 6eb1ee9e65
5 changed files with 17186 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16951
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "reddit-slideshow", "name": "reddit-slideshow",
"version": "0.1.4", "version": "0.1.5",
"private": true, "private": true,
"dependencies": { "dependencies": {
"axios": "^0.19.2", "axios": "^0.19.2",

129
src/components/Layout/Layout.js
View File

@ -1,15 +1,16 @@
import React from 'react'; import React from "react";
import Slide from '../Slide/Slide'; import Slide from "../Slide/Slide";
import './Layout.css'; import "./Layout.css";
import { ReactComponent as PrevSlideSVG } from '../../assets/prevSlide-24px.svg'; import { ReactComponent as PrevSlideSVG } from "../../assets/prevSlide-24px.svg";
import { ReactComponent as NextSlideSVG } from '../../assets/nextSlide-24px.svg'; import { ReactComponent as NextSlideSVG } from "../../assets/nextSlide-24px.svg";
import { ReactComponent as LeftArrowSVG } from '../../assets/leftArrow-24px.svg'; import { ReactComponent as LeftArrowSVG } from "../../assets/leftArrow-24px.svg";
import { ReactComponent as RightArrowSVG } from '../../assets/rightArrow-24px.svg'; import { ReactComponent as RightArrowSVG } from "../../assets/rightArrow-24px.svg";
import { ReactComponent as GithubLogo } from '../../assets/githubLogo.svg'; import { ReactComponent as GithubLogo } from "../../assets/githubLogo.svg";
const layout = (props) => { const layout = (props) => {
const link = props.post ? props.post.link : null; const link = props.post ? props.post.link : null;
const extension = props.post ? props.post.extension : null;
const id = props.post ? props.post.id : null; const id = props.post ? props.post.id : null;
const title = props.post ? props.post.title : null; const title = props.post ? props.post.title : null;
const urlToComments = props.post ? props.post.urlToComments : null; const urlToComments = props.post ? props.post.urlToComments : null;
@ -19,71 +20,119 @@ const layout = (props) => {
// console.log('link', link); // console.log('link', link);
// console.log('post', props.post); // console.log('post', props.post);
const headerClasses = [ props.showTitle ? 'showTitle' : 'hideTitle']; const headerClasses = [props.showTitle ? "showTitle" : "hideTitle"];
const infoClasses = ['info']; const infoClasses = ["info"];
infoClasses.push( props.showInfo ? 'showInfo' : 'hideInfo' ); infoClasses.push(props.showInfo ? "showInfo" : "hideInfo");
const uiClasses = ['ui']; const uiClasses = ["ui"];
uiClasses.push( props.hideUI ? 'hideUI' : 'showUI' ); uiClasses.push(props.hideUI ? "hideUI" : "showUI");
const slideClasses = ['slide']; const slideClasses = ["slide"];
if ( props.hideUI ) { if (props.hideUI) {
slideClasses.push('hideCursor'); slideClasses.push("hideCursor");
} }
const currentEndedPlayingHandler = () => { const currentEndedPlayingHandler = () => {
props.currentEndedPlaying(); props.currentEndedPlaying();
} };
return ( return (
<div className="layout" onTouchStart={props.touchStart} onTouchEnd={props.touchEnd}> <div className="layout" onTouchStart={props.touchStart} onTouchEnd={props.touchEnd}>
<div className={ uiClasses.join(' ') }> <div className={uiClasses.join(" ")}>
<header className={headerClasses.join(' ')}> <header className={headerClasses.join(" ")}>
<h1 className="title"> <h1 className="title">{title}</h1>
{title} {props.showTitle ? (
</h1> <LeftArrowSVG
{ props.showTitle aria-label="Hide title"
? <LeftArrowSVG aria-label="Hide title" className="toggleTitleButton toggleButton" onClick={props.titleClick}/> className="toggleTitleButton toggleButton"
: <RightArrowSVG aria-label="Show title" className="toggleTitleButton toggleButton" onClick={props.titleClick}/> } onClick={props.titleClick}
/>
) : (
<RightArrowSVG
aria-label="Show title"
className="toggleTitleButton toggleButton"
onClick={props.titleClick}
/>
)}
</header> </header>
<NextSlideSVG aria-label="Next" className="navButton nextButton" onClick={ props.nextHandler }/> <NextSlideSVG aria-label="Next" className="navButton nextButton" onClick={props.nextHandler} />
<PrevSlideSVG aria-label="Previous" className="navButton prevButton" onClick={ props.prevHandler }/> <PrevSlideSVG aria-label="Previous" className="navButton prevButton" onClick={props.prevHandler} />
<div className={infoClasses.join(' ')}> <div className={infoClasses.join(" ")}>
<div className="infoButtons"> <div className="infoButtons">
<div className="infoRow"> <div className="infoRow">
<a target="_blank" className="infoElement" href= { urlToComments } rel="noopener noreferrer">Comments</a> <a target="_blank" className="infoElement" href={urlToComments} rel="noopener noreferrer">
<a target="_blank" className="infoElement" href= { link } rel="noopener noreferrer">Direct link</a> Comments
</a>
<a target="_blank" className="infoElement" href={link} rel="noopener noreferrer">
Direct link
</a>
{/*<div className="infoElement"> {/*<div className="infoElement">
<input type="checkbox" id="showNSFW" name="showNSFW" onChange={props.nsfwCheckboxHandler} checked={props.nsfwChecked}/><label htmlFor="showNSFW">NSFW</label> <input type="checkbox" id="showNSFW" name="showNSFW" onChange={props.nsfwCheckboxHandler} checked={props.nsfwChecked}/><label htmlFor="showNSFW">NSFW</label>
</div>*/} </div>*/}
</div> </div>
<div className="infoRow"> <div className="infoRow">
<div className="infoElement"> <div className="infoElement">
<input type="checkbox" id="auto" name="auto" onChange={props.autoCheckboxHandler} checked={props.autoPlay}/> <input
type="checkbox"
id="auto"
name="auto"
onChange={props.autoCheckboxHandler}
checked={props.autoPlay}
/>
<label htmlFor="auto">Auto</label> <label htmlFor="auto">Auto</label>
</div> </div>
<div className="infoElement"> <div className="infoElement">
<input type="checkbox" id="hideUI" name="hideUI" onChange={props.hideUICheckboxHandler} checked={props.hideUIChecked}/> <input
type="checkbox"
id="hideUI"
name="hideUI"
onChange={props.hideUICheckboxHandler}
checked={props.hideUIChecked}
/>
<label htmlFor="hideUI">Hide UI</label> <label htmlFor="hideUI">Hide UI</label>
</div> </div>
</div> </div>
</div> </div>
{ props.showInfo {props.showInfo ? (
? <LeftArrowSVG aria-label="Hide info panel" className="toggleInfoButton toggleButton" onClick={props.infoClick}/> <LeftArrowSVG
: <RightArrowSVG aria-label="Show info panel" className="toggleInfoButton toggleButton" onClick={props.infoClick}/> } aria-label="Hide info panel"
className="toggleInfoButton toggleButton"
onClick={props.infoClick}
/>
) : (
<RightArrowSVG
aria-label="Show info panel"
className="toggleInfoButton toggleButton"
onClick={props.infoClick}
/>
)}
</div> </div>
<a href="https://github.com/ismaelpadilla/reddit-slideshow" aria-label="Source code" target="_blank" rel="noopener noreferrer"> <a
<GithubLogo className="githubLogo"/> href="https://github.com/ismaelpadilla/reddit-slideshow"
aria-label="Source code"
target="_blank"
rel="noopener noreferrer"
>
<GithubLogo className="githubLogo" />
</a> </a>
</div> </div>
{ link ? <Slide url={ link } classes={ slideClasses.concat(['current']) } key={ id } currentEndedPLaying = { currentEndedPlayingHandler }/> : null } {link ? (
{ props.prev !== props.post ? <Slide url={ prevLink } classes={ slideClasses.concat(['prev']) } key={ prevId } /> : null } <Slide
url={link}
extension={extension}
classes={slideClasses.concat(["current"])}
key={id}
currentEndedPLaying={currentEndedPlayingHandler}
/>
) : null}
{props.prev !== props.post ? (
<Slide url={prevLink} extension={extension} classes={slideClasses.concat(["prev"])} key={prevId} />
) : null}
</div> </div>
); );
}; };

48
src/components/Slide/Slide.js
View File

@ -1,60 +1,48 @@
import React, { useState } from 'react'; import React, { useState } from "react";
import './Slide.css' import "./Slide.css";
const Slide = (props) => { const Slide = (props) => {
// how many time has the video played? // how many time has the video played?
const [loopCount, setLoopCount] = useState(0); const [loopCount, setLoopCount] = useState(0);
// get file extension const fileExt = props.extension;
const extPattern = /\.[0-9a-z]+$/i;
const match = props.url.match(extPattern); if (props.classes.includes("current")) {
const fileExt = match ? match[0] : null;
if (props.classes.includes('current')) {
console.log("Attempting to show", props.url); console.log("Attempting to show", props.url);
} }
// console.log (props.classes);
// console.log('extension', fileExt);
// console.log('domain', domain);
// imgur urls are case sensitive!
// const afterDomain = props.url.match(/[.0-9a-zA-Z]+$/)[0];
// console.log('afterdomain', afterDomain);
const endedHandler = () => { const endedHandler = () => {
if (props.classes.includes('current')) { if (props.classes.includes("current")) {
if (loopCount === 1 && props.currentEndedPLaying) { if (loopCount === 1 && props.currentEndedPLaying) {
props.currentEndedPLaying(); props.currentEndedPLaying();
} }
setLoopCount(loopCount + 1) setLoopCount(loopCount + 1);
} }
} };
if (fileExt) { if (fileExt) {
// Imgur videos can be linked by using .mp4 extension instead of .gifv // Imgur videos can be linked by using .mp4 extension instead of .gifv
if ( fileExt === ".gifv" ) { if (fileExt === ".gifv") {
return ( return (
<video autoPlay loop muted className= { props.classes.join(' ') + ' video' } onPlaying= {endedHandler} > <video autoPlay loop muted className={props.classes.join(" ") + " video"} onPlaying={endedHandler}>
<source src={ props.url.replace(".gifv", ".mp4") } type="video/mp4"/> <source src={props.url.replace(".gifv", ".mp4")} type="video/mp4" />
</video> </video>
); );
} else if ( fileExt === ".mp4" ) { } else if (fileExt === ".mp4") {
return ( return (
<video autoPlay loop muted className= { props.classes.join(' ') + ' video' } onPlaying= {endedHandler} > <video autoPlay loop muted className={props.classes.join(" ") + " video"} onPlaying={endedHandler}>
<source src={ props.url.replace('.mp4', '.webm') } type="video/webm"/> <source src={props.url.replace(".mp4", ".webm")} type="video/webm" />
<source src={ props.url } type="video/mp4"/> <source src={props.url} type="video/mp4" />
</video> </video>
); );
} }
// Regular picture // Regular picture
const mystyle= { backgroundImage:`url(${props.url})` }; const mystyle = { backgroundImage: `url(${props.url})` };
return <div style={ mystyle } className= { props.classes.join(' ') } />; return <div style={mystyle} className={props.classes.join(" ")} />;
} }
return( return <div>Something went wrong.</div>;
<div>Something went wrong.</div>
);
}; };
export default Slide; export default Slide;

276
src/containers/App.js
View File

@ -1,19 +1,19 @@
import React, { Component } from 'react'; import React, { Component } from "react";
import axios from 'axios'; import axios from "axios";
import Layout from '../components/Layout/Layout'; import Layout from "../components/Layout/Layout";
import './App.css'; import "./App.css";
class App extends Component { class App extends Component {
hideUI = false; hideUI = false;
state = { state = {
// request: '/r/pics.json', // request: '/r/pics.json',
request: window.location.pathname + '.json', request: window.location.pathname + ".json",
posts: [], posts: [],
currentPost: -1, currentPost: -1,
prevPost: 0, prevPost: 0,
currentEndedPlaying: false, currentEndedPlaying: false,
after: '', // to be sent as a part of a request, see reddit api docs after: "", // to be sent as a part of a request, see reddit api docs
awaitingResponse: false, awaitingResponse: false,
showTitle: true, // show image title at top left showTitle: true, // show image title at top left
showInfo: true, // show info and buttons at bottom right showInfo: true, // show info and buttons at bottom right
@ -21,49 +21,49 @@ class App extends Component {
hideUI: this.hideUI, hideUI: this.hideUI,
hideUIChecked: this.hideUI, hideUIChecked: this.hideUI,
showNSWF: true, showNSWF: true,
touchStartX: 0 // used for swipe gestures in mobile touchStartX: 0, // used for swipe gestures in mobile
}; };
/** /**
* This makes sure we access the right reddit url based on how the user * This makes sure we access the right reddit url based on how the user
* accesses our website. * accesses our website.
*/ */
componentDidMount = () => { componentDidMount = () => {
// Get initial posts via http, set state // Get initial posts via http, set state
if ( !this.state.awaitingResponse ) { if (!this.state.awaitingResponse) {
this.setState( { awaitingResponse: true } ); this.setState({ awaitingResponse: true });
axios.get( this.state.request ) axios
.then( .get(this.state.request)
response => { .then((response) => {
// posts are in response.data.data.children // posts are in response.data.data.children
const after = response.data.data.after; const after = response.data.data.after;
this.getPosts(response.data.data.children).then ( (posts) => this.getPosts(response.data.data.children)
{ .then((posts) => {
// console.log('after', after); // console.log('after', after);
// console.log('reduced posts', posts); // console.log('reduced posts', posts);
this.setState( { this.setState({
posts: [...posts], posts: [...posts],
after: after, after: after,
currentPost: 0, currentPost: 0,
awaitingResponse: false awaitingResponse: false,
// interval: setInterval(this.nextSlideHandler, 2000) // interval: setInterval(this.nextSlideHandler, 2000)
});
if (this.state.auto) {
this.setState({ interval: setInterval(this.nextSlideHandler, 5000) });
}
// console.log("initialized state", this.state);
}).catch(function (error) {
console.log(error);
}); });
}) if (this.state.auto) {
this.setState({ interval: setInterval(() => this.nextSlideHandler(false), 5000) });
}
// console.log("initialized state", this.state);
})
.catch(function (error) {
console.log(error);
});
})
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
}); });
} }
document.addEventListener('mousemove', this.mouseMoveHandler); document.addEventListener("mousemove", this.mouseMoveHandler);
document.addEventListener('keydown', this.keyDownHandler); document.addEventListener("keydown", this.keyDownHandler);
} };
/** /**
* Prevent unnecessary rerenders. * Prevent unnecessary rerenders.
@ -74,11 +74,11 @@ class App extends Component {
* the touch start event modifies the state but it doesn't have an impact * the touch start event modifies the state but it doesn't have an impact
* on the elements being shown. * on the elements being shown.
*/ */
if (this.state.touchStartX !== nextState.touchStartX){ if (this.state.touchStartX !== nextState.touchStartX) {
return false; return false;
} }
return true; return true;
} };
/** /**
* Handle key presses. * Handle key presses.
@ -88,9 +88,9 @@ class App extends Component {
if (event.key === "ArrowLeft" || event.code === "KeyA") { if (event.key === "ArrowLeft" || event.code === "KeyA") {
this.prevSlideHandler(); this.prevSlideHandler();
} else if (event.key === "ArrowRight" || event.code === "KeyD") { } else if (event.key === "ArrowRight" || event.code === "KeyD") {
this.nextSlideHandler(); this.nextSlideHandler(true);
} }
} };
/** /**
* Get posts from a server response * Get posts from a server response
@ -105,7 +105,7 @@ class App extends Component {
*/ */
getPosts = (children) => { getPosts = (children) => {
// Filter and map at the same time // Filter and map at the same time
const posts = children.reduce( this.filterPosts, [] ); const posts = children.reduce(this.filterPosts, []);
// Update the posts, get urls to gfycat mp4s (see updatePosts fore more info). // Update the posts, get urls to gfycat mp4s (see updatePosts fore more info).
const updatedPosts = this.updatePosts(posts); const updatedPosts = this.updatePosts(posts);
// console.log('updated posts', updatedPosts); // console.log('updated posts', updatedPosts);
@ -126,8 +126,9 @@ class App extends Component {
title: child.data.title, title: child.data.title,
id: child.data.id, id: child.data.id,
nsfw: child.data.over_18, nsfw: child.data.over_18,
urlToComments: 'https://www.reddit.com' + child.data.permalink, urlToComments: "https://www.reddit.com" + child.data.permalink,
link: filteredUrl link: filteredUrl.url,
extension: filteredUrl.extension,
}); });
} }
} }
@ -148,12 +149,12 @@ class App extends Component {
const extPattern = /\.[0-9a-z]+$/i; const extPattern = /\.[0-9a-z]+$/i;
const match = url.match(extPattern); const match = url.match(extPattern);
const fileExt = match ? match[0] : null; const fileExt = match ? match[0] : null;
const supportedExtensions = [".jpg", ".jpeg", ".png", ".bmp",".gif", ".gifv"]; const supportedExtensions = [".jpg", ".jpeg", ".png", ".bmp", ".gif", ".gifv"];
if ( domain === "gfycat.com" || supportedExtensions.includes(fileExt) ) { if (domain === "gfycat.com" || supportedExtensions.includes(fileExt)) {
return url; return { url, extension: fileExt };
} }
if ( domain === "imgur.com" ) { if (domain === "imgur.com") {
return url + ".jpg"; return { url: url + ".jpg", extension: fileExt };
} }
return null; return null;
}; };
@ -175,7 +176,7 @@ class App extends Component {
const domain = post.link.match(/:\/\/(.+)\//)[1]; const domain = post.link.match(/:\/\/(.+)\//)[1];
// In order to play gfycat videos we must get the mp4 url from the video id // In order to play gfycat videos we must get the mp4 url from the video id
if (domain === 'gfycat.com') { if (domain === "gfycat.com") {
const gfyId = post.link.match(/([.0-9a-zA-Z]+)(-|$)/)[1]; const gfyId = post.link.match(/([.0-9a-zA-Z]+)(-|$)/)[1];
/* /*
* gfyId regex clarification: sometimes gfys have dashes ('-') in their url. * gfyId regex clarification: sometimes gfys have dashes ('-') in their url.
@ -183,20 +184,31 @@ class App extends Component {
*/ */
// Wait until some images are correct so we can render something // Wait until some images are correct so we can render something
if ( counter < 3) { if (counter < 3) {
const response = await axios.get( "https://api.gfycat.com/v1/gfycats/" + gfyId ); const response = await axios.get("https://api.gfycat.com/v1/gfycats/" + gfyId);
post.link = response.data.gfyItem.mp4Url; post.link = response.data.gfyItem.mp4Url;
} else { } else {
axios.get( "https://api.gfycat.com/v1/gfycats/" + gfyId ).then( (response) => axios
{ .get("https://api.gfycat.com/v1/gfycats/" + gfyId)
.then((response) => {
post.link = response.data.gfyItem.mp4Url; post.link = response.data.gfyItem.mp4Url;
}).catch(function (error) { })
.catch(function (error) {
console.log(error); console.log(error);
}); });
} }
const extPattern = /\.[0-9a-z]+$/i;
const match = post.link.match(extPattern);
const fileExt = match ? match[0] : null;
post.extension = fileExt;
if (fileExt === ".gifv" || fileExt === ".mp4") {
post.isVideo = true;
} else {
post.isVideo = false;
}
counter++; counter++;
} }
}; }
return posts; return posts;
}; };
@ -204,11 +216,11 @@ class App extends Component {
* Go to previous slide. * Go to previous slide.
*/ */
prevSlideHandler = () => { prevSlideHandler = () => {
if ( this.state.currentPost > 0 ) { if (this.state.currentPost > 0) {
this.setState( (prevState, props) => { this.setState((prevState, props) => {
return { return {
prevPost: prevState.currentPost, prevPost: prevState.currentPost,
currentPost: prevState.currentPost -1 currentPost: prevState.currentPost - 1,
}; };
}); });
} }
@ -216,43 +228,53 @@ class App extends Component {
}; };
/** /**
* Go to next slide. * Handle nextSlide event. If it was fired manually, always go to next slide.
* If it was fired automatically and we are playing a video, go to next slide only
* if current video has finished playing.
*/ */
nextSlideHandler = (e) => { nextSlideHandler = (manual, e) => {
if ( this.state.currentPost < this.state.posts.length -1 ) { // do nothing if current video didn't end playing
this.setState( (prevState, props) => { const currentIsVideo = this.state.posts[this.state.currentPost].isVideo;
if (!manual && currentIsVideo && !this.state.currentEndedPlaying) {
console.log("Current video still playing!");
return;
}
if (this.state.currentPost < this.state.posts.length - 1) {
this.setState((prevState, props) => {
return { return {
prevPost: prevState.currentPost, prevPost: prevState.currentPost,
currentPost: prevState.currentPost +1 currentPost: prevState.currentPost + 1,
}; };
}); });
}; }
// Load more posts when close to reaching the end // Load more posts when close to reaching the end
if ( this.state.currentPost > this.state.posts.length -4 ) { if (this.state.currentPost > this.state.posts.length - 4) {
if ( !this.state.awaitingResponse ) { if (!this.state.awaitingResponse) {
this.setState( { awaitingResponse: true } ); this.setState({ awaitingResponse: true });
console.log('fetching aditional posts'); console.log("fetching aditional posts");
axios.get(this.state.request + '?after=' + this.state.after) axios
.then( .get(this.state.request + "?after=" + this.state.after)
response => { .then((response) => {
// console.log(response); // posts are in response.data.data.children // console.log(response); // posts are in response.data.data.children
const after = response.data.data.after; const after = response.data.data.after;
this.getPosts(response.data.data.children).then ( (posts) => this.getPosts(response.data.data.children)
{ .then((posts) => {
// console.log('after', after); // console.log('after', after);
// console.log('reduced posts', posts); // console.log('reduced posts', posts);
this.setState( (state, props) => { this.setState((state, props) => {
return { return {
posts: [...state.posts, ...posts], posts: [...state.posts, ...posts],
after: after, after: after,
awaitingResponse: false awaitingResponse: false,
} };
}); });
}).catch(function (error) { })
.catch(function (error) {
console.log(error); console.log(error);
}); });
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
}); });
@ -266,23 +288,23 @@ class App extends Component {
* Hide/show title at the top right. * Hide/show title at the top right.
*/ */
toggleTitleHandler = () => { toggleTitleHandler = () => {
this.setState( (state,props) => { this.setState((state, props) => {
return { return {
showTitle: ! state.showTitle showTitle: !state.showTitle,
} };
} ); });
}; };
/** /**
* Hide/show info panel at the bottom left. * Hide/show info panel at the bottom left.
*/ */
toggleInfoHandler = () => { toggleInfoHandler = () => {
console.log('toggle info'); console.log("toggle info");
this.setState( (state,props) => { this.setState((state, props) => {
return { return {
showInfo: ! state.showInfo showInfo: !state.showInfo,
} };
} ); });
}; };
/** /**
@ -292,11 +314,11 @@ class App extends Component {
if (event.target.checked) { if (event.target.checked) {
this.setState({ this.setState({
auto: true, auto: true,
interval: setInterval(this.nextSlideHandler, 5000) interval: setInterval(() => this.nextSlideHandler(false), 5000),
}); });
} else { } else {
this.setState({ auto: false }); this.setState({ auto: false });
clearInterval( this.state.interval ); clearInterval(this.state.interval);
} }
}; };
@ -307,14 +329,14 @@ class App extends Component {
if (event.target.checked) { if (event.target.checked) {
this.setState({ this.setState({
hideUI: true, hideUI: true,
hideUIChecked: true hideUIChecked: true,
}); });
} else { } else {
this.setState({ this.setState({
hideUI: false, hideUI: false,
hideUIChecked: false hideUIChecked: false,
}); });
clearInterval( this.state.interval ); clearInterval(this.state.interval);
} }
}; };
@ -323,7 +345,7 @@ class App extends Component {
*/ */
nsfwCheckboxHandler = (event) => { nsfwCheckboxHandler = (event) => {
this.setState({ showNSWF: event.target.checked }); this.setState({ showNSWF: event.target.checked });
} };
/** /**
* Handle mouse movement. * Handle mouse movement.
@ -331,10 +353,10 @@ class App extends Component {
*/ */
mouseMoveHandler = () => { mouseMoveHandler = () => {
if (this.state.hideUI) { if (this.state.hideUI) {
this.setState({ hideUI:false }); this.setState({ hideUI: false });
setTimeout( this.hideUI, 3000); setTimeout(this.hideUI, 3000);
} }
} };
/** /**
* Hide UI, this method should be called from the timer created in * Hide UI, this method should be called from the timer created in
@ -343,7 +365,7 @@ class App extends Component {
* after moving the mouse so as not to hide the UI in that case. * after moving the mouse so as not to hide the UI in that case.
*/ */
hideUI = () => { hideUI = () => {
if(this.state.hideUIChecked) { if (this.state.hideUIChecked) {
this.setState({ hideUI: true }); this.setState({ hideUI: true });
} }
}; };
@ -354,51 +376,51 @@ class App extends Component {
*/ */
touchStartHandler = (event) => { touchStartHandler = (event) => {
this.setState({ touchStartX: event.targetTouches[0].clientX }); this.setState({ touchStartX: event.targetTouches[0].clientX });
} };
/** /**
* On touch end, compare touch position to touch start (saved in state). * On touch end, compare touch position to touch start (saved in state).
* Change slides if both points are far enough. * Change slides if both points are far enough.
*/ */
touchEndHandler = (event) => { touchEndHandler = (event) => {
if ( event.changedTouches[0].clientX < this.state.touchStartX - 50 ) { if (event.changedTouches[0].clientX < this.state.touchStartX - 50) {
this.nextSlideHandler(); this.nextSlideHandler(true);
} else if ( event.changedTouches[0].clientX > this.state.touchStartX + 50) { } else if (event.changedTouches[0].clientX > this.state.touchStartX + 50) {
this.prevSlideHandler(); this.prevSlideHandler();
} }
} };
currentEndedPlayingHandler = () => { currentEndedPlayingHandler = () => {
console.log("current ended playing")
this.setState({ currentEndedPlaying: true }); this.setState({ currentEndedPlaying: true });
} };
render() { render() {
return ( return (
<div className="App"> <div className="App">
<Layout className="App" <Layout
post={ this.state.posts.length ? (this.state.posts[ this.state.currentPost ]) : null } className="App"
prev={ this.state.posts.length ? (this.state.posts[ this.state.prevPost ]) : null } post={this.state.posts.length ? this.state.posts[this.state.currentPost] : null}
prevHandler={ this.prevSlideHandler } prev={this.state.posts.length ? this.state.posts[this.state.prevPost] : null}
nextHandler={ this.nextSlideHandler } prevHandler={this.prevSlideHandler}
showTitle={ this.state.showTitle } nextHandler={(e) => this.nextSlideHandler(true, e)}
showInfo={ this.state.showInfo } showTitle={this.state.showTitle}
titleClick={ this.toggleTitleHandler } showInfo={this.state.showInfo}
infoClick={ this.toggleInfoHandler } titleClick={this.toggleTitleHandler}
autoPlay={ this.state.auto } infoClick={this.toggleInfoHandler}
autoCheckboxHandler={ this.autoCheckboxHandler } autoPlay={this.state.auto}
hideUI={ this.state.hideUI } autoCheckboxHandler={this.autoCheckboxHandler}
hideUIChecked={ this.state.hideUIChecked } hideUI={this.state.hideUI}
hideUICheckboxHandler={ this.hideUICheckboxHandler } hideUIChecked={this.state.hideUIChecked}
nsfwCheckboxHandler={ this.nsfwCheckboxHandler } hideUICheckboxHandler={this.hideUICheckboxHandler}
nsfwChecked={ this.state.showNSWF } nsfwCheckboxHandler={this.nsfwCheckboxHandler}
touchStart={ this.touchStartHandler } nsfwChecked={this.state.showNSWF}
touchEnd={ this.touchEndHandler } touchStart={this.touchStartHandler}
currentEndedPlaying={ this.currentEndedPlayingHandler } touchEnd={this.touchEndHandler}
currentEndedPlaying={this.currentEndedPlayingHandler}
/> />
</div> </div>
); );
}; }
} }
export default App; export default App;