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

Merge pull request #29 from ismaelpadilla/sound

Browse Source 
Add sound toggle
This commit is contained in:
Ismael Padilla 2022-03-15 13:52:41 -03:00 committed by GitHub
commit 827bdd160e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 47 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
package-lock.json generated
View File

@ -1,12 +1,11 @@
{
"name": "reddit-slideshow",
"version": "0.1.4",
"version": "0.1.6",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "reddit-slideshow",
"version": "0.1.4",
"version": "0.1.6",
"dependencies": {
"axios": "^0.19.2",
"react": "^16.13.1",
@ -3950,6 +3949,7 @@
"dependencies": {
"anymatch": "~3.1.1",
"braces": "~3.0.2",
"fsevents": "~2.1.2",
"glob-parent": "~5.1.0",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
@ -5699,7 +5699,8 @@
"esprima": "^4.0.1",
"estraverse": "^4.2.0",
"esutils": "^2.0.2",
"optionator": "^0.8.1"
"optionator": "^0.8.1",
"source-map": "~0.6.1"
},
"bin": {
"escodegen": "bin/escodegen.js",
@ -8802,6 +8803,7 @@
"@jest/types": "^24.9.0",
"anymatch": "^2.0.0",
"fb-watchman": "^2.0.0",
"fsevents": "^1.2.7",
"graceful-fs": "^4.1.15",
"invariant": "^2.2.4",
"jest-serializer": "^24.9.0",
@ -9365,6 +9367,9 @@
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
"dependencies": {
"graceful-fs": "^4.1.6"
},
"optionalDependencies": {
"graceful-fs": "^4.1.6"
}
@ -12995,6 +13000,7 @@
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "4.3.0",
"fs-extra": "^8.1.0",
"fsevents": "2.1.2",
"html-webpack-plugin": "4.0.0-beta.11",
"identity-obj-proxy": "3.0.0",
"jest": "24.9.0",
@ -15849,8 +15855,10 @@
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz",
"integrity": "sha512-aWAgTW4MoSJzZPAicljkO1hsi1oKj/RRq/OJQh2PKI2UKL04c2Bs+MBOB+BBABHTXJpf9mCwHN7ANCvYsvY2sg==",
"dependencies": {
"chokidar": "^3.4.1",
"graceful-fs": "^4.1.2",
"neo-async": "^2.5.0"
"neo-async": "^2.5.0",
"watchpack-chokidar2": "^2.0.0"
},
"optionalDependencies": {
"chokidar": "^3.4.1",
@ -15888,6 +15896,7 @@
"anymatch": "^2.0.0",
"async-each": "^1.0.1",
"braces": "^2.3.2",
"fsevents": "^1.2.7",
"glob-parent": "^3.1.0",
"inherits": "^2.0.3",
"is-binary-path": "^1.0.0",
@ -16150,6 +16159,7 @@
"anymatch": "^2.0.0",
"async-each": "^1.0.1",
"braces": "^2.3.2",
"fsevents": "^1.2.7",
"glob-parent": "^3.1.0",
"inherits": "^2.0.3",
"is-binary-path": "^1.0.0",

2
package.json
View File

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

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

@ -95,6 +95,18 @@ const layout = (props) => {
<label htmlFor="hideUI">Hide UI</label>
</div>
</div>
<div className="infoRow">
<div className="infoElement">
<input
type="checkbox"
id="sound"
name="sound"
onChange={props.soundCheckboxHandler}
checked={props.sound}
/>
<label htmlFor="sound">Sound</label>
</div>
</div>
</div>
{props.showInfo ? (
<LeftArrowSVG
@ -128,6 +140,7 @@ const layout = (props) => {
classes={slideClasses.concat(["current"])}
key={id}
currentEndedPLaying={currentEndedPlayingHandler}
sound={props.sound}
/>
) : null}
{props.prev !== props.post ? (

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

@ -25,13 +25,13 @@ const Slide = (props) => {
// Imgur videos can be linked by using .mp4 extension instead of .gifv
if (fileExt === ".gifv") {
return (
<video autoPlay loop muted className={props.classes.join(" ") + " video"} onPlaying={endedHandler}>
<video autoPlay loop muted={!props.sound} className={props.classes.join(" ") + " video"} onPlaying={endedHandler}>
<source src={props.url.replace(".gifv", ".mp4")} type="video/mp4" />
</video>
);
} else if (fileExt === ".mp4") {
return (
<video autoPlay loop muted className={props.classes.join(" ") + " video"} onPlaying={endedHandler}>
<video autoPlay loop muted={!props.sound} className={props.classes.join(" ") + " video"} onPlaying={endedHandler}>
<source src={props.url.replace(".mp4", ".webm")} type="video/webm" />
<source src={props.url} type="video/mp4" />
</video>

16
src/containers/App.js
View File

@ -18,6 +18,7 @@ class App extends Component {
showTitle: true, // show image title at top left
showInfo: true, // show info and buttons at bottom right
auto: false, // autoplay
sound: false,
hideUI: this.hideUI,
hideUIChecked: this.hideUI,
showNSWF: true,
@ -322,6 +323,19 @@ class App extends Component {
}
};
/**
* Handle sound checkbox.
*/
soundCheckboxHandler = (event) => {
if (event.target.checked) {
this.setState({
sound: true
});
} else {
this.setState({ sound: false });
}
};
/**
* Handle hideUI checkbox.
*/
@ -409,6 +423,8 @@ class App extends Component {
infoClick={this.toggleInfoHandler}
autoPlay={this.state.auto}
autoCheckboxHandler={this.autoCheckboxHandler}
sound={this.state.sound}
soundCheckboxHandler={this.soundCheckboxHandler}
hideUI={this.state.hideUI}
hideUIChecked={this.state.hideUIChecked}
hideUICheckboxHandler={this.hideUICheckboxHandler}