Add sound toggle

package-lock.json

@@ -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",

package.json

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

src/components/Layout/Layout.js

@@ -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 ? (

src/components/Slide/Slide.js

@@ -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>

src/containers/App.js

@@ -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}