mute videos automatically #201

config.js.template

@@ -25,6 +25,7 @@ const config = {
   trust_proxy: process.env.TRUST_PROXY === 'true' || false, // Enable trust_proxy if you are using reverse proxy like nginx
   trust_proxy_address: process.env.TRUST_PROXY_ADDRESS || '127.0.0.1',
   nsfw_enabled: process.env.NSFW_ENABLED !== 'true' || true, // Enable NSFW (over 18) content. If false, a warning is shown to the user before opening any NSFW post. When the NFSW content is disabled, NSFW posts are hidden from subreddits and from user page feeds. Note: Users can set this to true or false from their preferences.
+  videos_muted: process.env.VIDEOS_MUTED !== 'true' || true, // Automatically mute all videos in posts
   post_comments_sort: process.env.POST_COMMENTS_SORT || 'confidence', // "confidence" is the default sorting in Reddit. Must be one of: confidence, top, new, controversial, old, random, qa, live.
   reddit_app_id: process.env.REDDIT_APP_ID || 'ABfYqdDc9qPh1w', // If "use_reddit_oauth" config key is set to true, you have to obtain your Reddit app ID. For testing purposes it's okay to use this project's default app ID. Create your Reddit app here: https://old.reddit.com/prefs/apps/. Make sure to create an "installed app" type of app.
   domain_replacements: process.env.DOMAIN_REPLACEMENTS

routes.js

@@ -82,6 +82,16 @@ module.exports = (app, redis, fetch, RedditAPI) => {
       res.cookie('domain_instagram', domainInstagram, { maxAge: 31536000, httpOnly: true })
     }
     
+    let videosMuted = req.query.videos_muted
+    if(videosMuted) {
+      req.cookies.videos_muted = videosMuted
+      res.cookie('videos_muted', videosMuted, { maxAge: 31536000, httpOnly: true })
+    }
+    
+    if(!config.rate_limiting) {
+      return next()
+    }
+    
     const valid_reddit_starts = ['/https://old.reddit.com', '/https://reddit.com', '/https://www.reddit.com', '/old.reddit.com', '/reddit.com', '/www.reddit.com']
     for(var i = 0; i < valid_reddit_starts.length; i++) {
       if(req.url.startsWith(valid_reddit_starts[i])) {
@@ -98,10 +108,6 @@ module.exports = (app, redis, fetch, RedditAPI) => {
       }
     }
     
-    if(!config.rate_limiting) {
-      return next()
-    }
-    
     if(config.rate_limiting.enabled) {
       /**
       * This route enforces request limits based on an IP address if
@@ -153,11 +159,7 @@ module.exports = (app, redis, fetch, RedditAPI) => {
   })
 
   app.get('/resetprefs', (req, res, next) => {
-    res.clearCookie('theme')
-    res.clearCookie('flairs')
-    res.clearCookie('nsfw_enabled')
-    res.clearCookie('highlight_controversial')
-    res.clearCookie('subbed_subreddits')
+    resetPreferences(res)
     return res.redirect('/preferences')
   })
   
@@ -1347,6 +1349,7 @@ module.exports = (app, redis, fetch, RedditAPI) => {
             sortby: sortby,
             user_preferences: req.cookies,
             instance_nsfw_enabled: config.nsfw_enabled,
+            instance_videos_muted: config.videos_muted,
             post_media_max_heights: config.post_media_max_heights,
             redis_key: comments_key
           })
@@ -1393,6 +1396,7 @@ module.exports = (app, redis, fetch, RedditAPI) => {
                       sortby: sortby,
                       user_preferences: req.cookies,
                       instance_nsfw_enabled: config.nsfw_enabled,
+                      instance_videos_muted: config.videos_muted,
                       post_media_max_heights: config.post_media_max_heights,
                       redis_key: comments_key
                     })
@@ -1773,6 +1777,7 @@ module.exports = (app, redis, fetch, RedditAPI) => {
     let domain_twitter = req.body.domain_twitter
     let domain_youtube = req.body.domain_youtube
     let domain_instagram = req.body.domain_instagram
+    let videos_muted = req.body.videos_muted
 
     res.cookie('theme', theme, { maxAge: 365 * 24 * 60 * 60 * 1000, httpOnly: true })
     
@@ -1809,6 +1814,12 @@ module.exports = (app, redis, fetch, RedditAPI) => {
       show_upvoted_percentage = 'false'
     res.cookie('show_upvoted_percentage', show_upvoted_percentage, { maxAge: 365 * 24 * 60 * 60 * 1000, httpOnly: true })
     
+    if(videos_muted === 'on')
+      videos_muted = 'true'
+    else
+      videos_muted = 'false'
+    res.cookie('videos_muted', videos_muted, { maxAge: 365 * 24 * 60 * 60 * 1000, httpOnly: true })
+    
     res.cookie('domain_twitter', domain_twitter, { maxAge: 365 * 24 * 60 * 60 * 1000, httpOnly: true })
     res.cookie('domain_youtube', domain_youtube, { maxAge: 365 * 24 * 60 * 60 * 1000, httpOnly: true })
     res.cookie('domain_instagram', domain_instagram, { maxAge: 365 * 24 * 60 * 60 * 1000, httpOnly: true })
@@ -1897,6 +1908,8 @@ module.exports = (app, redis, fetch, RedditAPI) => {
     res.clearCookie('domain_twitter')
     res.clearCookie('domain_youtube')
     res.clearCookie('domain_instagram')
+    res.clearCookie('videos_muted')
   }
 }
 
+

views/post.pug

@@ -37,6 +37,14 @@ html
                     max-height: #{user_preferences.post_media_max_height}px;
                     max-width: 100%;
                 }
+          -
+            let video_muted = false
+            if(instance_videos_muted === true || user_preferences.videos_muted === 'true') {
+              video_muted = true
+            }
+            if(user_preferences.videos_muted === 'false') {
+              video_muted = false
+            }
           .info
             .score
               div.arrow
@@ -113,7 +121,7 @@ html
                     p #{post.media.embed_src}
                 else
                   .video
-                    video(controls="controls", autoplay="autoplay", loop="loop")
+                    video(controls="controls", autoplay="autoplay", loop="loop", muted=(video_muted ? true : false))
                       source(src="" + post.media.source + "", type="video/mp4")
                       |  Your browser does not support the video element.
                     a(href="" + post.media.source + "") [media]
@@ -168,7 +176,7 @@ html
                         p #{post.media.embed_src}
                 else
                   .video
-                    video(controls="controls", autoplay="autoplay", loop="loop")
+                    video(controls="controls", autoplay="autoplay", loop="loop", muted=(video_muted ? true : false))
                       source(src="" + post.media.source + "", type="video/mp4")
                       |  Your browser does not support the video element.
                     a(href="" + post.media.source + "") [media]

views/preferences.pug

@@ -96,6 +96,21 @@ html
                 input(type="checkbox", name="show_upvoted_percentage", id="show_upvoted_percentage", checked="checked")
               else
                 input(type="checkbox", name="show_upvoted_percentage", id="show_upvoted_percentage")
+          legend Media
+          .setting
+            label(for="videos_muted") Mute videos by default: 
+              -
+                let videos_muted = false
+                if(instance_config.videos_muted === true || user_preferences.videos_muted === 'true') {
+                  videos_muted = true
+                }
+                if(user_preferences.videos_muted === 'false') {
+                  videos_muted = false
+                }
+              if(videos_muted)
+                input(type="checkbox", name="videos_muted", id="videos_muted", checked="checked")
+              else
+                input(type="checkbox", name="videos_muted", id="videos_muted")
           small(class="notice") Preferences are stored client-side using cookies without any personal information.
           br
           input(type="submit", value="Save preferences")