client/posts: implement loop video flag

client/html/post_edit_sidebar.tpl

@@ -50,10 +50,10 @@
                 <section class='flags'>
                     <label>Miscellaneous</label>
 
-                    <!-- TODO: bind state -->
                     <%= ctx.makeCheckbox({
                         text: 'Loop video',
                         name: 'loop',
+                        checked: ctx.post.flags.includes('loop'),
                     }) %>
                 </section>
             <% } %>

client/js/controllers/post_controller.js

@@ -106,6 +106,9 @@ class PostController {
         if (e.detail.safety !== undefined) {
             post.safety = e.detail.safety;
         }
+        if (e.detail.flags !== undefined) {
+            post.flags = e.detail.flags;
+        }
         if (e.detail.relations !== undefined) {
             post.relations = e.detail.relations;
         }

client/js/controls/post_edit_sidebar_control.js

@@ -51,6 +51,10 @@ class PostEditSidebarControl extends events.EventTarget {
                         .value.toLowerCase() :
                     undefined,
 
+                flags: this._loopVideoInputNode ?
+                    (this._loopVideoInputNode.checked ? ['loop'] : []) :
+                    undefined,
+
                 tags: this._tagInputNode ?
                     misc.splitByWhitespace(this._tagInputNode.value) :
                     undefined,
@@ -78,6 +82,10 @@ class PostEditSidebarControl extends events.EventTarget {
         return this._formNode.querySelector('.tags input');
     }
 
+    get _loopVideoInputNode() {
+        return this._formNode.querySelector('.flags input[name=loop]');
+    }
+
     get _relationsInputNode() {
         return this._formNode.querySelector('.relations input');
     }

client/js/models/post.js

@@ -28,6 +28,7 @@ class Post extends events.EventTarget {
         this._canvasHeight  = null;
         this._fileSize      = null;
 
+        this._flags         = [];
         this._tags          = [];
         this._notes         = [];
         this._comments      = [];
@@ -51,6 +52,7 @@ class Post extends events.EventTarget {
     get canvasHeight()   { return this._canvasHeight || 450; }
     get fileSize()       { return this._fileSize || 0; }
 
+    get flags()          { return this._flags; }
     get tags()           { return this._tags; }
     get notes()          { return this._notes; }
     get comments()       { return this._comments; }
@@ -61,6 +63,7 @@ class Post extends events.EventTarget {
     get ownFavorite()    { return this._ownFavorite; }
     get ownScore()       { return this._ownScore; }
 
+    set flags(value)     { this._flags = value; }
     set tags(value)      { this._tags = value; }
     set safety(value)    { this._safety = value; }
     set relations(value) { this._relations = value; }
@@ -108,6 +111,9 @@ class Post extends events.EventTarget {
         if (this._safety !== this._orig._safety) {
             detail.safety = this._safety;
         }
+        if (_arraysDiffer(this._flags, this._orig._flags)) {
+            detail.flags = this._flags;
+        }
         if (_arraysDiffer(this._tags, this._orig._tags)) {
             detail.tags = this._tags;
         }
@@ -212,6 +218,7 @@ class Post extends events.EventTarget {
             _canvasHeight:  response.canvasHeight,
             _fileSize:      response.fileSize,
 
+            _flags:         response.flags || [],
             _tags:          response.tags || [],
             _notes:         response.notes || [],
             _comments:      CommentList.fromResponse(response.comments || []),