diff --git a/src/General/css/style.css b/src/General/css/style.css index 50028a15e..a6659709e 100755 --- a/src/General/css/style.css +++ b/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; - border-top-width: .4em; - border-right-width: .25em; - border-left-width: .25em; + display: inline-block; + margin: 2px; + position: relative; } -.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 { - color: #ffffff; - text-shadow: 0px 0px 1px #000000; +.gal-buttons.gal-playing > .gal-start, +.gal-buttons:not(.gal-playing) > .gal-stop { + 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 .menu-button:hover { +.gal-buttons a:hover { color: rgb(95, 95, 101) !important; } -:root.gal-pdf .gal-close:hover, -:root.gal-pdf .gal-buttons .menu-button:hover { +:root.gal-pdf .gal-buttons a:hover { color: rgb(204, 204, 204) !important; } .gal-count { diff --git a/src/General/html/Features/Gallery.html b/src/General/html/Features/Gallery.html index f1ff31864..4ae6f4e80 100644 --- a/src/General/html/Features/Gallery.html +++ b/src/General/html/Features/Gallery.html @@ -1,14 +1,16 @@ -
- - - × +
+ + + + + × - - / -
-
- + + / +
+
+
-
+
-
+
diff --git a/src/Images/Gallery.coffee b/src/Images/Gallery.coffee index b0fe69ba6..467478048 100644 --- a/src/Images/Gallery.coffee +++ b/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, '-'}" diff --git a/src/Images/Video.coffee b/src/Images/Video.coffee index 49111afc9..97512600c 100644 --- a/src/Images/Video.coffee +++ b/src/Images/Video.coffee @@ -9,6 +9,7 @@ Video = video.pause() start: (video) -> + return unless video.paused {controls} = video video.controls = false video.play()