implement slideshow mode for gallery

src/General/css/style.css

@@ -1410,20 +1410,35 @@ div.boardTitle {
   background: rgba(0,0,0,0.6) !important;
   border-radius: 3px;
 }
+.gal-buttons a {
+  color: #ffffff;
+  text-shadow: 0px 0px 1px #000000;
+}
 .gal-buttons i {
-  vertical-align: baseline;
+  display: inline-block;
-  border-top-width: .4em;
+  margin: 2px;
-  border-right-width: .25em;
+  position: relative;
-  border-left-width: .25em;
 }
-.gal-buttons .menu-button {
+.gal-start i {
+  border-left:   10px solid;
+  border-top:    6px solid transparent;
+  border-bottom: 6px solid transparent;
+  bottom: 1px;
+}
+.gal-stop i {
+  border: 5px solid;
   bottom: 2px;
-  color: #ffffff;
-  text-shadow: 0px 0px 1px #000000;
 }
-.gal-close {
+.gal-buttons.gal-playing > .gal-start,
-  color: #ffffff;
+.gal-buttons:not(.gal-playing) > .gal-stop {
-  text-shadow: 0px 0px 1px #000000;
+  display: none;
+}
+.gal-buttons .menu-button i {
+  border-top-width:   10px;
+  border-right-width: 6px;
+  border-left-width:  6px;
+  bottom: 2px;
+  vertical-align: baseline;
 }
 .gal-buttons,
 .gal-name,
@@ -1445,12 +1460,10 @@ div.boardTitle {
   color: white !important;
 }
 .gal-name:hover,
-.gal-close:hover,
+.gal-buttons a:hover {
-.gal-buttons .menu-button:hover {
   color: rgb(95, 95, 101) !important;
 }
-:root.gal-pdf .gal-close:hover,
+:root.gal-pdf .gal-buttons a:hover {
-:root.gal-pdf .gal-buttons .menu-button:hover {
   color: rgb(204, 204, 204) !important;
 }
 .gal-count {

src/General/html/Features/Gallery.html

@@ -1,14 +1,16 @@
-<div class=gal-viewport>
+<div class="gal-viewport">
-  <span class=gal-buttons>
+  <span class="gal-buttons">
-    <a class="menu-button" href="javascript:;"><i></i></a>
+    <a href="javascript:;" class="gal-start" title="Start slideshow"><i></i></a>
-    <a href=javascript:; class=gal-close>×</a>
+    <a href="javascript:;" class="gal-stop" title="Stop slideshow"><i></i></a>
+    <a href="javascript:;" class="menu-button"><i></i></a>
+    <a href="javascript:;" class="gal-close">×</a>
   </span>
-  <a class=gal-name target="_blank"></a>
+  <a class="gal-name" target="_blank"></a>
-  <span class=gal-count><span class='count'></span> / <span class='total'></span></a></span>
+  <span class="gal-count"><span class="count"></span> / <span class="total"></span></a></span>
-  <div class=gal-prev></div>
+  <div class="gal-prev"></div>
-  <div class=gal-image>
+  <div class="gal-image">
-    <a href=javascript:;><img></a>
+    <a href="javascript:;"><img></a>
   </div>
-  <div class=gal-next></div>
+  <div class="gal-next"></div>
 </div>
-<div class=gal-thumbnails></div>
+<div class="gal-thumbnails"></div>

src/Images/Gallery.coffee

@@ -17,6 +17,8 @@ Gallery =
       name: 'Gallery'
       cb:   @node
 
+  interval: 5 * $.SECOND
+
   node: ->
     return unless @file
     if Gallery.nodes
@@ -29,19 +31,21 @@ Gallery =
   build: (image) ->
     Gallery.images  = []
     nodes = Gallery.nodes = {}
+    Gallery.slideshow = false
 
     nodes.el = dialog = $.el 'div',
       id: 'a-gallery'
       innerHTML: <%= importHTML('Features/Gallery') %>
 
     nodes[key] = $ value, dialog for key, value of {
-      frame:   '.gal-image'
+      buttons: '.gal-buttons'
       name:    '.gal-name'
       count:   '.count'
       total:   '.total'
-      thumbs:  '.gal-thumbnails'
+      frame:   '.gal-image'
       next:    '.gal-image a'
       current: '.gal-image img'
+      thumbs:  '.gal-thumbnails'
     }
 
     menuButton = $ '.menu-button', dialog
@@ -52,6 +56,8 @@ Gallery =
     $.on nodes.next,              'click', cb.advance
     $.on $('.gal-prev',  dialog), 'click', cb.prev
     $.on $('.gal-next',  dialog), 'click', cb.next
+    $.on $('.gal-start', dialog), 'click', cb.start
+    $.on $('.gal-stop',  dialog), 'click', cb.stop
     $.on $('.gal-close', dialog), 'click', cb.close
 
     $.on menuButton, 'click', (e) ->
@@ -147,6 +153,7 @@ Gallery =
       nodes.current           = file
       nodes.frame.scrollTop   = 0
       nodes.next.focus()
+      Gallery.cb.setupTimer() if Gallery.slideshow
 
       # Scroll
       rect  = @getBoundingClientRect()
@@ -206,7 +213,43 @@ Gallery =
     
     pause: ->
       {current} = Gallery.nodes
-      current[if current.paused then 'play' else 'pause']() if current.nodeType is 'VIDEO'
+      current[if current.paused then 'play' else 'pause']() if current.nodeName is 'VIDEO'
+
+    setupTimer: ->
+      clearTimeout Gallery.timeoutID
+      {current} = Gallery.nodes
+      isVideo = current.nodeName is 'VIDEO'
+      Video.start current if isVideo
+      return Gallery.cb.stop() if !Gallery.images[+Gallery.nodes.current.dataset.id + 1]
+      if (if isVideo then current.readyState > 4 else current.complete) or current.nodeName is 'IFRAME'
+        Gallery.cb.startTimer()
+      else
+        $.on current, (if isVideo then 'canplaythrough' else 'load'), Gallery.cb.startTimer
+
+    startTimer: ->
+      Gallery.timeoutID = setTimeout Gallery.cb.checkTimer, Gallery.interval
+
+    checkTimer: ->
+      {current} = Gallery.nodes
+      if current.nodeName is 'VIDEO' and !current.paused
+        $.on current, 'pause', Gallery.cb.next
+        current.loop = false
+      else
+        Gallery.cb.next()
+
+    start: ->
+      $.addClass Gallery.nodes.buttons, 'gal-playing'
+      Gallery.slideshow = true
+      Gallery.cb.setupTimer()
+
+    stop: ->
+      clearTimeout Gallery.timeoutID
+      {current} = Gallery.nodes
+      $.off current, 'canplaythrough load', Gallery.cb.startTimer
+      $.off current, 'pause', Gallery.cb.next
+      current.loop = true if current.nodeName is 'VIDEO'
+      $.rmClass Gallery.nodes.buttons, 'gal-playing'
+      Gallery.slideshow = false
 
     close: ->
       Gallery.nodes.current.pause?()
@@ -216,6 +259,7 @@ Gallery =
 
       $.off d, 'keydown', Gallery.cb.keybinds
       $.on  d, 'keydown', Keybinds.keydown
+      clearTimeout Gallery.timeoutID
 
     setFitness: ->
       (if @checked then $.addClass else $.rmClass) doc, "gal-#{@name.toLowerCase().replace /\s+/g, '-'}"

src/Images/Video.coffee

@@ -9,6 +9,7 @@ Video =
       video.pause()
 
   start: (video) ->
+    return unless video.paused
     {controls} = video
     video.controls = false
     video.play()