client/settings: add ability to autoplay videos

client/html/post_content.tpl

@@ -12,16 +12,18 @@
 
     <% } else if (ctx.post.type === 'video') { %>
 
-        <% if ((ctx.post.flags || []).includes('loop')) { %>
+        <%= ctx.makeElement(
-            <video id='video' controls loop='loop'>
+            'video', {
-        <% } else { %>
+                controls: true,
-            <video id='video' controls>
+                loop: (ctx.post.flags || []).includes('loop'),
-        <% } %>
+                autoplay: ctx.autoplay,
-
+            },
-            <source type='<%- ctx.post.mimeType %>' src='<%- ctx.post.contentUrl %>'/>
+            ctx.makeElement('source', {
-
+                type: ctx.post.mimeType,
-            Your browser doesn't support HTML5 videos.
+                src: ctx.post.contentUrl,
-        </video>
+            }),
+            'Your browser doesn\'t support HTML5 videos.')
+        %>
 
     <% } else { console.log(new Error('Unknown post type')); } %>
 

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>

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');
         }

client/js/models/settings.js

@@ -14,6 +14,7 @@ const defaultSettings = {
     transparencyGrid: true,
     fitMode: 'fit-both',
     tagSuggestions: true,
+    autoplayVideos: false,
     postsPerPage: 42,
 };
 

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,
         });

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,
             },
         }));