client/settings: add ability to autoplay videos

6 files changed, 27 insertions, 11 deletions

diff --git a/client/html/post_content.tpl b/client/html/post_content.tpl
index 90b2e99..0703ace 100644
--- a/client/html/post_content.tpl
+++ b/client/html/post_content.tpl
@@ -12,16 +12,18 @@
 
     <% } else if (ctx.post.type === 'video') { %>
 
-        <% if ((ctx.post.flags || []).includes('loop')) { %>
-            <video id='video' controls loop='loop'>
-        <% } else { %>
-            <video id='video' controls>
-        <% } %>
-
-            <source type='<%- ctx.post.mimeType %>' src='<%- ctx.post.contentUrl %>'/>
-
-            Your browser doesn't support HTML5 videos.
-        </video>
+        <%= ctx.makeElement(
+            'video', {
+                controls: true,
+                loop: (ctx.post.flags || []).includes('loop'),
+                autoplay: ctx.autoplay,
+            },
+            ctx.makeElement('source', {
+                type: ctx.post.mimeType,
+                src: ctx.post.contentUrl,
+            }),
+            'Your browser doesn\'t support HTML5 videos.')
+        %>
 
     <% } else { console.log(new Error('Unknown post type')); } %>
 
diff --git a/client/html/settings.tpl b/client/html/settings.tpl
index 3ecfd7d..9864a3d 100644
--- a/client/html/settings.tpl
+++ b/client/html/settings.tpl
@@ -56,6 +56,14 @@
                 }) %>
                 <p class='hint'>Shows a popup with suggested tags in edit forms.</p>
             </li>
+
+            <li>
+                <%= ctx.makeCheckbox({
+                    text: 'Automatically play video posts',
+                    name: 'autoplay-videos',
+                    checked: ctx.browsingSettings.autoplayVideos,
+                }) %>
+            </li>
         </ul>
 
         <div class='messages'></div>
diff --git a/client/js/controls/post_content_control.js b/client/js/controls/post_content_control.js
index e7f35e7..c13fa83 100644
--- a/client/js/controls/post_content_control.js
+++ b/client/js/controls/post_content_control.js
@@ -102,7 +102,10 @@ class PostContentControl {
     }
 
     _reinstall() {
-        const newNode = this._template({post: this._post});
+        const newNode = this._template({
+            post: this._post,
+            autoplay: settings.get().autoplayVideos,
+        });
         if (settings.get().transparencyGrid) {
             newNode.classList.add('transparency-grid');
         }
diff --git a/client/js/models/settings.js b/client/js/models/settings.js
index 3a6d9e5..beaeb4d 100644
--- a/client/js/models/settings.js
+++ b/client/js/models/settings.js
@@ -14,6 +14,7 @@ const defaultSettings = {
     transparencyGrid: true,
     fitMode: 'fit-both',
     tagSuggestions: true,
+    autoplayVideos: false,
     postsPerPage: 42,
 };
 
diff --git a/client/js/util/views.js b/client/js/util/views.js
index fb777a6..9febc7f 100644
--- a/client/js/util/views.js
+++ b/client/js/util/views.js
@@ -377,6 +377,7 @@ function getTemplate(templatePath) {
             makeUserLink:      makeUserLink,
             makeFlexboxAlign:  makeFlexboxAlign,
             makeAccessKey:     makeAccessKey,
+            makeElement:       makeElement,
             makeCssName:       misc.makeCssName,
             makeNumericInput:  makeNumericInput,
         });
diff --git a/client/js/views/settings_view.js b/client/js/views/settings_view.js
index 39a83ed..41c661e 100644
--- a/client/js/views/settings_view.js
+++ b/client/js/views/settings_view.js
@@ -35,6 +35,7 @@ class SettingsView extends events.EventTarget {
                 keyboardShortcuts: this._find('keyboard-shortcuts').checked,
                 transparencyGrid: this._find('transparency-grid').checked,
                 tagSuggestions: this._find('tag-suggestions').checked,
+                autoplayVideos: this._find('autoplay-videos').checked,
                 postsPerPage: this._find('posts-per-page').value,
             },
         }));