client/posts: control over video loops on upload

Also loop videos by default

client/css/post-upload.styl

@@ -59,6 +59,10 @@ $cancel-button-color = tomato
                     display: inline-block
                     margin-right: 1em
 
+            .options div
+                display: inline-block
+                margin: 0 1em 0 0
+
             .thumbnail-wrapper
                 float: left
                 width: 12.5em

client/html/post_upload_row.tpl

@@ -44,13 +44,25 @@
         <% } %>
     </div>
 
-    <% if (ctx.canUploadAnonymously) { %>
+    <div class='options'>
-        <div class='anonymous'>
+        <% if (ctx.canUploadAnonymously) { %>
-            <%= ctx.makeCheckbox({
+            <div class='anonymous'>
-                text: 'Upload anonymously',
+                <%= ctx.makeCheckbox({
-                name: 'anonymous',
+                    text: 'Upload anonymously',
-                checked: ctx.uploadable.anonymous,
+                    name: 'anonymous',
-            }) %>
+                    checked: ctx.uploadable.anonymous,
-        </div>
+                }) %>
-    <% } %>
+            </div>
+        <% } %>
+
+        <% if (['video'].includes(ctx.uploadable.type)) { %>
+            <div class='loop-video'>
+                <%= ctx.makeCheckbox({
+                    text: 'Loop video',
+                    name: 'loop-video',
+                    checked: true,
+                }) %>
+            </div>
+        <% } %>
+    </div>
 </li>

client/js/controllers/post_upload_controller.js

@@ -51,6 +51,7 @@ class PostUploadController {
             return promise.then(() => {
                 let post = new Post();
                 post.safety = uploadable.safety;
+                post.flags = uploadable.flags;
                 if (uploadable.url) {
                     post.newContentUrl = uploadable.url;
                 } else {

client/js/views/post_upload_view.js

@@ -20,10 +20,17 @@ function _mimeTypeToPostType(mimeType) {
     }[mimeType] || 'unknown';
 }
 
+function _listen(rootNode, selector, eventType, handler) {
+    for (let node of rootNode.querySelectorAll(selector)) {
+        node.addEventListener(eventType, e => handler(e));
+    }
+}
+
 class Uploadable extends events.EventTarget {
     constructor() {
         super();
         this.safety = 'safe';
+        this.flags = ['loop'];
         this.anonymous = false;
         this.order = globalOrder;
         globalOrder++;
@@ -288,6 +295,13 @@ class PostUploadView extends events.EventTarget {
         uploadable.anonymous = e.target.checked;
     }
 
+    _evtLoopVideoCheckboxChange(e, uploadable) {
+        uploadable.flags = uploadable.flags.filter(f => f !== 'loop');
+        if (e.target.checked) {
+            uploadable.flags.push('loop');
+        }
+    }
+
     _normalizeUploadablesOrder() {
         let sortedUploadables = this._getSortedUploadables();
         for (let i = 0; i < sortedUploadables.length; i++) {
@@ -316,23 +330,19 @@ class PostUploadView extends events.EventTarget {
             {}, this._ctx, {uploadable: uploadable}));
         this._listNode.appendChild(rowNode);
 
-        for (let radioboxNode of rowNode.querySelectorAll('.safety input')) {
+        _listen(rowNode, '.safety input', 'change',
-            radioboxNode.addEventListener(
+            e => this._evtSafetyRadioboxChange(e, uploadable));
-                'change', e => this._evtSafetyRadioboxChange(e, uploadable));
+        _listen(rowNode, '.anonymous input', 'change',
-        }
+            e => this._evtAnonymityCheckboxChange(e, uploadable));
+        _listen(rowNode, '.loop-video input', 'change',
+            e => this._evtLoopVideoCheckboxChange(e, uploadable));
 
-        const anonymousCheckboxNode = rowNode.querySelector('.anonymous input');
+        _listen(rowNode, 'a.remove', 'click',
-        if (anonymousCheckboxNode) {
+            e => this._evtRemoveClick(e, uploadable));
-            anonymousCheckboxNode.addEventListener(
+        _listen(rowNode, 'a.move-up', 'click',
-                'change', e => this._evtAnonymityCheckboxChange(e, uploadable));
+            e => this._evtMoveUpClick(e, uploadable));
-        }
+        _listen(rowNode, 'a.move-down', 'click',
-
+            e => this._evtMoveDownClick(e, uploadable));
-        rowNode.querySelector('a.remove').addEventListener(
-            'click', e => this._evtRemoveClick(e, uploadable));
-        rowNode.querySelector('a.move-up').addEventListener(
-            'click', e => this._evtMoveUpClick(e, uploadable));
-        rowNode.querySelector('a.move-down').addEventListener(
-            'click', e => this._evtMoveDownClick(e, uploadable));
         uploadable.rowNode = rowNode;
     }