change UI for no autoplay, no controls

builds/4chan-X.user.js

@@ -7606,7 +7606,7 @@
         ImageExpand.contract(this);
         return ImageExpand.expand(this);
       } else if (this.isClone && this.file.isExpanded && this.file.isVideo) {
-        return ImageExpand.setupVideo(this);
+        return ImageExpand.setupVideoControls(this);
       } else if (ImageExpand.on && !this.isHidden && (Conf['Expand spoilers'] || !this.file.isSpoiler)) {
         return ImageExpand.expand(this);
       }
@@ -7772,10 +7772,16 @@
       $.rmClass(post.file.thumb, 'expanding');
       post.file.isExpanded = true;
       if (post.file.isVideo) {
-        return ImageExpand.setupVideo(post, Conf['Autoplay']);
+        return ImageExpand.setupVideo(post);
       }
     },
     videoCB: {
+      click: function(e) {
+        if (this.paused && !this.controls) {
+          this.play();
+          return e.stopPropagation();
+        }
+      },
       mousedown: function(e) {
         if (e.button === 0) {
           return this.dataset.mousedown = 'true';
@@ -7795,23 +7801,21 @@
         }
       }
     },
-    setupVideo: function(post, play) {
+    setupVideoControls: function(post) {
       var cb, contract, eventName, file, video, _ref;
       file = post.file;
       video = file.fullImage;
-      file.videoControls = $.el('span', {
-        className: 'video-controls'
-      });
       file.thumb.parentNode.removeAttribute('href');
       file.thumb.parentNode.removeAttribute('target');
-      video.muted = !Conf['Allow Sound'];
-      video.controls = Conf['Show Controls'];
       video.dataset.mousedown = 'false';
       _ref = ImageExpand.videoCB;
       for (eventName in _ref) {
         cb = _ref[eventName];
         $.on(video, eventName, cb);
       }
+      file.videoControls = $.el('span', {
+        className: 'video-controls'
+      });
       if (Conf['Show Controls']) {
         contract = $.el('a', {
           textContent: 'contract',
@@ -7823,11 +7827,20 @@
         });
         $.add(file.videoControls, [$.tn('\u00A0'), contract]);
       }
-      if (play) {
+      return $.add(file.text, file.videoControls);
+    },
+    setupVideo: function(post) {
+      var file, video;
+      ImageExpand.setupVideoControls(post);
+      file = post.file;
+      video = file.fullImage;
+      video.muted = !Conf['Allow Sound'];
+      video.controls = Conf['Show Controls'];
+      if (Conf['Autoplay']) {
         video.controls = false;
         video.play();
         if (Conf['Show Controls']) {
-          $.asap((function() {
+          return $.asap((function() {
             return (video.readyState >= 3 && video.currentTime <= Math.max(0.1, video.duration - 0.5)) || !file.isExpanded;
           }), function() {
             if (file.isExpanded) {
@@ -7835,18 +7848,7 @@
             }
           }, 500);
         }
-      } else if (!Conf['Show Controls']) {
-        play = $.el('a', {
-          textContent: 'play',
-          href: 'javascript:;'
-        });
-        $.on(play, 'click', function(e) {
-          video[this.textContent]();
-          return this.textContent = this.textContent === 'play' ? 'pause' : 'play';
-        });
-        $.add(file.videoControls, [$.tn('\u00A0'), play]);
       }
-      return $.add(file.text, file.videoControls);
     },
     error: function() {
       var URL, post, src, timeoutID;

builds/crx/script.js

@@ -7625,7 +7625,7 @@
         ImageExpand.contract(this);
         return ImageExpand.expand(this);
       } else if (this.isClone && this.file.isExpanded && this.file.isVideo) {
-        return ImageExpand.setupVideo(this);
+        return ImageExpand.setupVideoControls(this);
       } else if (ImageExpand.on && !this.isHidden && (Conf['Expand spoilers'] || !this.file.isSpoiler)) {
         return ImageExpand.expand(this);
       }
@@ -7791,10 +7791,16 @@
       $.rmClass(post.file.thumb, 'expanding');
       post.file.isExpanded = true;
       if (post.file.isVideo) {
-        return ImageExpand.setupVideo(post, Conf['Autoplay']);
+        return ImageExpand.setupVideo(post);
       }
     },
     videoCB: {
+      click: function(e) {
+        if (this.paused && !this.controls) {
+          this.play();
+          return e.stopPropagation();
+        }
+      },
       mousedown: function(e) {
         if (e.button === 0) {
           return this.dataset.mousedown = 'true';
@@ -7814,23 +7820,21 @@
         }
       }
     },
-    setupVideo: function(post, play) {
+    setupVideoControls: function(post) {
       var cb, contract, eventName, file, video, _ref;
       file = post.file;
       video = file.fullImage;
-      file.videoControls = $.el('span', {
-        className: 'video-controls'
-      });
       file.thumb.parentNode.removeAttribute('href');
       file.thumb.parentNode.removeAttribute('target');
-      video.muted = !Conf['Allow Sound'];
-      video.controls = Conf['Show Controls'];
       video.dataset.mousedown = 'false';
       _ref = ImageExpand.videoCB;
       for (eventName in _ref) {
         cb = _ref[eventName];
         $.on(video, eventName, cb);
       }
+      file.videoControls = $.el('span', {
+        className: 'video-controls'
+      });
       if (Conf['Show Controls']) {
         contract = $.el('a', {
           textContent: 'contract',
@@ -7842,11 +7846,20 @@
         });
         $.add(file.videoControls, [$.tn('\u00A0'), contract]);
       }
-      if (play) {
+      return $.add(file.text, file.videoControls);
+    },
+    setupVideo: function(post) {
+      var file, video;
+      ImageExpand.setupVideoControls(post);
+      file = post.file;
+      video = file.fullImage;
+      video.muted = !Conf['Allow Sound'];
+      video.controls = Conf['Show Controls'];
+      if (Conf['Autoplay']) {
         video.controls = false;
         video.play();
         if (Conf['Show Controls']) {
-          $.asap((function() {
+          return $.asap((function() {
             return (video.readyState >= 3 && video.currentTime <= Math.max(0.1, video.duration - 0.5)) || !file.isExpanded;
           }), function() {
             if (file.isExpanded) {
@@ -7854,18 +7867,7 @@
             }
           }, 500);
         }
-      } else if (!Conf['Show Controls']) {
-        play = $.el('a', {
-          textContent: 'play',
-          href: 'javascript:;'
-        });
-        $.on(play, 'click', function(e) {
-          video[this.textContent]();
-          return this.textContent = this.textContent === 'play' ? 'pause' : 'play';
-        });
-        $.add(file.videoControls, [$.tn('\u00A0'), play]);
       }
-      return $.add(file.text, file.videoControls);
     },
     error: function() {
       var URL, post, src, timeoutID;

src/Images/ImageExpand.coffee

@@ -23,7 +23,7 @@ ImageExpand =
       ImageExpand.contract @
       ImageExpand.expand @
     else if @isClone and @file.isExpanded and @file.isVideo
-      ImageExpand.setupVideo @
+      ImageExpand.setupVideoControls @
     else if ImageExpand.on and !@isHidden and (Conf['Expand spoilers'] or !@file.isSpoiler)
       ImageExpand.expand @
   cb:
@@ -143,9 +143,15 @@ ImageExpand =
     $.addClass post.nodes.root, 'expanded-image'
     $.rmClass  post.file.thumb, 'expanding'
     post.file.isExpanded = true
-    ImageExpand.setupVideo post, Conf['Autoplay'] if post.file.isVideo
+    ImageExpand.setupVideo post if post.file.isVideo
 
   videoCB:
+    click: (e) ->
+      if @paused and not @controls
+        @play()
+        e.stopPropagation()
+
+    # dragging to the left contracts the video
     mousedown: (e) -> @dataset.mousedown = 'true' if e.button is 0
     mouseup: (e) -> @dataset.mousedown = 'false' if e.button is 0
     mouseover: (e) -> @dataset.mousedown = 'false'
@@ -153,43 +159,44 @@ ImageExpand =
       if @dataset.mousedown is 'true' and e.clientX <= @getBoundingClientRect().left
         ImageExpand.contract (Get.postFromNode @)
 
-  setupVideo: (post, play) ->
+  setupVideoControls: (post) ->
     {file} = post
     video = file.fullImage
-    file.videoControls = $.el 'span',
+
-      className: 'video-controls'
+    # disable link to file so native controls can work
     file.thumb.parentNode.removeAttribute 'href'
     file.thumb.parentNode.removeAttribute 'target'
-    video.muted = !Conf['Allow Sound']
+
-    video.controls = Conf['Show Controls']
+    # setup callbacks on video element
-    # drag left to contract
     video.dataset.mousedown = 'false'
     $.on video, eventName, cb for eventName, cb of ImageExpand.videoCB
+
+    # setup controls in file info
+    file.videoControls = $.el 'span',
+      className: 'video-controls'
     if Conf['Show Controls']
-      # contract link in file info
       contract = $.el 'a',
         textContent: 'contract'
         href: 'javascript:;'
         title: 'You can also contract the video by dragging it to the left.'
       $.on contract, 'click', (e) -> ImageExpand.contract post
       $.add file.videoControls, [$.tn('\u00A0'), contract]
-    if play
+    $.add file.text, file.videoControls
+
+  setupVideo: (post) ->
+    ImageExpand.setupVideoControls post
+    {file} = post
+    video = file.fullImage
+    video.muted = !Conf['Allow Sound']
+    video.controls = Conf['Show Controls']
+    if Conf['Autoplay']
       video.controls = false
       video.play()
-      # Hacky workaround for Firefox forever-loading bug
+      # Hacky workaround for Firefox forever-loading bug for very short videos
       if Conf['Show Controls']
         $.asap (-> (video.readyState >= 3 and video.currentTime <= Math.max 0.1, (video.duration - 0.5)) or !file.isExpanded), ->
           video.controls = true if file.isExpanded
         , 500
-    else unless Conf['Show Controls']
-      play = $.el 'a',
-        textContent: 'play'
-        href: 'javascript:;'
-      $.on play, 'click', (e) ->
-        video[@textContent]()
-        @textContent = if @textContent is 'play' then 'pause' else 'play'
-      $.add file.videoControls, [$.tn('\u00A0'), play]
-    $.add file.text, file.videoControls
 
   error: ->
     post = Get.postFromNode @