Add ambiplayer

boards/static/css/3party/ambiplayer.css

@@ -0,0 +1,125 b''
+div.ambiplayer {
+    position: relative;
+}
+
+div.ambiplayer > * {
+    position: absolute;
+}
+
+div.ambiplayer, .ambiplayer-background {
+    width: 200px;
+    height: 131px;
+}
+
+.ambiplayer-background {
+    filter: brightness(.6);
+}
+
+.ambiplayer-input-playpause {
+    background: #333;
+    width: 50px;
+    height: 50px;
+    border-radius: 25px;
+    top: calc(50% - 25px);
+    left: calc(50% - 25px);
+    border: 1px solid #ffd37d;
+    cursor: pointer;
+    opacity: .75;
+}
+
+.ambiplayer-input-playpause:before, .ambiplayer-input-playpause:after {
+    content: "";
+    color: #ffd37d;
+    position: absolute;
+    display: block;
+    transition: border-width .1s ease, width .5s ease, height .5s ease;
+}
+
+.ambiplayer-input-playpause.ambiplayer-state-play:before, .ambiplayer-input-playpause.ambiplayer-state-play:after {
+    width: 6px;
+    height: 19px;
+    background-color: #ffd37d;
+    top: 14px;
+}
+
+.ambiplayer-input-playpause.ambiplayer-state-play:before {
+    left: 15px;
+}
+
+.ambiplayer-input-playpause.ambiplayer-state-play:after {
+    left: 27px;
+}
+
+.ambiplayer-input-playpause.ambiplayer-state-pause:before {
+    left: 18px;
+    border-style: solid;
+    border-color: transparent;
+    border-width: 13px 18px;
+    border-left-color: #ffd37d;
+    top: 11px;
+    background: transparent;
+}
+
+.ambiplayer-input-playpause.ambiplayer-state-pause:before, .ambiplayer-input-playpause.ambiplayer-state-pause:after {
+    width: 0px;
+    height: 0px;
+}
+
+.ambiplayer-input-volume {
+    transform: rotateZ(270deg);
+    width: 80px;
+    left: -15px;
+    top: 50px;
+}
+
+.ambiplayer-input-track {
+    width: 100px;
+    left: 50px;
+    bottom: calc(1em - 3px);
+}
+
+.ambiplayer-input-volume, .ambiplayer-input-track {
+    background: #333;
+    opacity: .75;
+    cursor: pointer;
+    height: 7px;
+    -webkit-appearance: none;
+    appearance: none;
+    border: 0;
+}
+
+.ambiplayer-input-volume::-webkit-progress-bar, .ambiplayer-input-track::-webkit-progress-bar {
+    background: #333;
+}
+
+.ambiplayer-input-volume:hover, .ambiplayer-input-track:hover, .ambiplayer-input-playpause:hover {
+    opacity: 1;
+}
+
+.ambiplayer-input-volume::-webkit-progress-value, .ambiplayer-input-track::-webkit-progress-value {
+    background-color: #ffd37d;
+}
+
+.ambiplayer-input-volume::-moz-progress-bar, .ambiplayer-input-track::-moz-progress-bar {
+    background-color: #ffd37d;
+}
+
+.ambiplayer-input-volume::-ms-fill, .ambiplayer-input-track::-ms-fill {
+    background-color: #ffd37d;
+}
+
+.ambiplayer-output-currenttime {
+    left: .5em;
+}
+
+.ambiplayer-output-duration {
+    right: .5em;
+}
+
+.ambiplayer > output {
+    bottom: .5em;
+    background-color: #333;
+    color: #ffd37d;
+    padding: 2px;
+    border-radius: 3px;
+}

boards/static/js/3party/ambiplayer.js

@@ -0,0 +1,145 b''
+var ambiplayer_init_hook = function() {
+    $('audio.ambiplayer').each(function() {
+        $(this).data('ambiplayer-instance', new Ambiplayer(this));
+    })
+}
+
+var ambiplayer_delete_hook = function(node) {
+    $('.ambiplayer audio', node).each(function() {
+        $(this).data('ambiplayer-instance').destroy();
+    });
+}
+
+var _AMBIPLAYER_HTML_TEMPLATE =
+    '<div class="ambiplayer">'+
+    '   <div class="ambiplayer-background"></div>'+
+    '   <button class="ambiplayer-input-playpause ambiplayer-state-pause"></button>'+
+    '   <progress class="ambiplayer-input-volume"/>'+
+    '   <output class="ambiplayer-output-currenttime">0:00</output>'+
+    '   <progress class="ambiplayer-input-track"/>'+
+    '   <output class="ambiplayer-output-duration">0:00</output>'+
+    '</div>';
+
+var _timeformatter = function(seconds) {
+    var minutes = (seconds / 60)|0;
+    seconds = (seconds % 60)|0;
+    return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
+}
+
+var ambiplayer_ctx;
+
+var Ambiplayer = function(audioNode) {
+    var mediaNode = new Audio(audioNode.src);
+    this.$audioNode = $(audioNode);
+    this._state = 'pause';
+
+    this.destroy = function() {
+        mediaNode.pause();
+    }
+
+    this.$playerNode = $(_AMBIPLAYER_HTML_TEMPLATE);
+
+    audioNode.parentNode.replaceChild(this.$playerNode.get(0), audioNode);
+    this.$playerNode.get(0).appendChild(audioNode);
+    this.$audioNode.removeClass('ambiplayer').hide();
+
+    this.$background = $('.ambiplayer-background', this.$playerNode);
+    this.$playPauseButton = $('.ambiplayer-input-playpause', this.$playerNode);
+    this.$volumeControl = $('.ambiplayer-input-volume', this.$playerNode);
+    this.$trackControl = $('.ambiplayer-input-track', this.$playerNode);
+    this.$outputCurrentTime = $('.ambiplayer-output-currenttime', this.$playerNode);
+    this.$outputDuration = $('.ambiplayer-output-duration', this.$playerNode);
+
+    this.$background.css('background-image', 'url('+this.$audioNode.data('bgimage')+')');
+
+    var playpause_state_hook = function() {
+        if (this._state == 'pause') {
+            this.$playPauseButton.removeClass('ambiplayer-state-play').addClass('ambiplayer-state-pause');
+        } else {
+            this.$playPauseButton.removeClass('ambiplayer-state-pause').addClass('ambiplayer-state-play');
+        }
+    }.bind(this);
+    var audionode_state_hook = function() {
+        if (this._state == 'pause') {
+            mediaNode.pause();
+        } else {
+            mediaNode.play();
+        }
+    }.bind(this);
+
+    this.$volumeControl.attr({
+        min: 0,
+        max: 1,
+        step: 0.01
+    }).val(mediaNode.volume);
+
+    this.$trackControl.attr({
+        min: 0,
+        max: 1,
+        step: 0.001
+    }).val(0);
+
+    this.$playPauseButton.on('click', function(e) {
+        this._state = this._state == 'play' ? 'pause' : 'play';
+        playpause_state_hook();
+        audionode_state_hook();
+        return false;
+    }.bind(this));
+    this.$volumeControl.on('click', function(e) {
+        var $this = $(this);
+        mediaNode.volume = 1 - (e.pageY - $this.offset().top) / $this.width();
+        $this.val(mediaNode.volume);
+    });
+    this.$trackControl.on('click', function(e) {
+        var $this = $(this);
+        mediaNode.currentTime = mediaNode.duration * (e.pageX - $this.offset().left) / $this.width();
+    });
+
+    mediaNode.addEventListener('canplay', function() {
+        this.$outputDuration.val(_timeformatter(mediaNode.duration));
+    }.bind(this));
+    mediaNode.addEventListener('timeupdate', function() {
+        this.$trackControl.val(mediaNode.currentTime/mediaNode.duration);
+        this.$outputCurrentTime.val(_timeformatter(mediaNode.currentTime));
+    }.bind(this));
+    mediaNode.addEventListener('ended', function(e) {
+        this._state = 'pause';
+        playpause_state_hook();
+        audionode_state_hook();
+    }.bind(this));
+
+    if (!ambiplayer_ctx) {
+        ambiplayer_ctx = new AudioContext();
+    }
+    var source = ambiplayer_ctx.createMediaElementSource(mediaNode);
+    var analyser = ambiplayer_ctx.createAnalyser();
+
+    source.connect(analyser);
+    analyser.connect(ambiplayer_ctx.destination);
+
+    var frequencyBuffer = new Uint8Array(analyser.frequencyBinCount);
+    var prevAver = 0;
+
+    var ambilight_update = function() {
+        requestAnimationFrame(ambilight_update);
+        analyser.getByteFrequencyData(frequencyBuffer);
+
+        var aver = 0;
+        for (var i=0; i<analyser.frequencyBinCount; i++) {
+            aver += frequencyBuffer[i];
+        }
+        aver /= analyser.frequencyBinCount;
+
+        if (Math.abs(prevAver-aver) >=5) {
+            this.$playPauseButton.css('box-shadow', '#ffd37d 0 0 30px ' + (aver/5 |0) + 'px');
+            prevAver = aver;
+        }
+    }.bind(this)
+    ambilight_update();
+}
+
+$(function() {
+    if (AudioContext) {
+        ambiplayer_init_hook();
+    }
+})

boards/models/attachment/viewers.py

@@ -1,238 +1,255 b''
 import re
 
 from PIL import Image
 
 from django.contrib.staticfiles import finders
 from django.contrib.staticfiles.templatetags.staticfiles import static
 from django.core.files.images import get_image_dimensions
 from django.template.defaultfilters import filesizeformat
 from django.core.urlresolvers import reverse
 from django.utils.translation import ugettext_lazy as _, ungettext_lazy
 
 from boards.utils import get_domain, cached_result
 from boards import settings
 
 
 FILE_STUB_IMAGE = 'images/file.png'
 FILE_STUB_URL = 'url'
 FILE_FILEFORMAT = 'images/fileformats/{}.png'
 
 
 FILE_TYPES_VIDEO = (
     'webm',
     'mp4',
     'mpeg',
     'ogv',
 )
 FILE_TYPE_SVG = 'svg'
 FILE_TYPES_AUDIO = (
     'ogg',
     'mp3',
     'opus',
+    'flac',
 )
 FILE_TYPES_IMAGE = (
     'jpeg',
     'jpg',
     'png',
     'bmp',
     'gif',
 )
 
 PLAIN_FILE_FORMATS = {
     'zip': 'archive',
     'tar': 'archive',
     'gz': 'archive',
     'mid' : 'midi',
 }
 
 URL_PROTOCOLS = {
     'magnet': 'magnet',
 }
 
 CSS_CLASS_IMAGE = 'image'
 CSS_CLASS_THUMB = 'thumb'
 
 ABSTRACT_VIEW = '<div class="image">'\
         '{}'\
         '<div class="image-metadata"><a href="{}" download >{}, {}</a>'\
         ' <a class="file-menu" href="#" data-type="{}" data-search-url="{}" data-filename="{}">🔍 </a></div>'\
         '</div>'
 URL_VIEW = '<div class="image">' \
         '{}' \
         '<div class="image-metadata">{}</div>' \
         '</div>'
 ABSTRACT_FORMAT_VIEW = '<a href="{}">'\
         '<img class="url-image" src="{}" width="{}" height="{}"/>'\
         '</a>'
 VIDEO_FORMAT_VIEW = '<video width="200" height="150" controls src="{}"></video>'
-AUDIO_FORMAT_VIEW = '<audio controls src="{}"></audio>'
+AUDIO_FORMAT_VIEW = '<audio controls src="{}" class="ambiplayer" data-bgimage="{}"></audio>'
 IMAGE_FORMAT_VIEW = '<a class="{}" href="{full}">' \
         '<img class="post-image-preview"' \
         ' src="{}"' \
         ' alt="{}"' \
         ' width="{}"' \
         ' height="{}"' \
         ' data-width="{}"' \
         ' data-height="{}" />' \
         '</a>'
 SVG_FORMAT_VIEW = '<a class="thumb" href="{}">'\
         '<img class="post-image-preview" width="200" height="150" src="{}" />'\
         '</a>'
 URL_FORMAT_VIEW = '<a href="{}">' \
         '<img class="url-image" src="{}" width="{}" height="{}"/>' \
         '</a>'
 
 
 def get_viewers():
     return AbstractViewer.__subclasses__()
 
 
 def get_static_dimensions(filename):
     file_path = finders.find(filename)
     return get_image_dimensions(file_path)
 
 
 # TODO Move this to utils
 def file_exists(filename):
     return finders.find(filename) is not None
 
 
 class AbstractViewer:
     def __init__(self, file, file_type, hash, url):
         self.file = file
         self.file_type = file_type
         self.hash = hash
         self.url = url
 
     @staticmethod
     def supports(file_type):
         return True
 
     def get_view(self):
         search_host = settings.get('External', 'ImageSearchHost')
         if search_host:
             if search_host.endswith('/'):
                 search_host = search_host[:-1]
             search_url = search_host + self.file.url
         else:
             search_url = ''
 
         return ABSTRACT_VIEW.format(self.get_format_view(), self.file.url,
                 self.file_type, filesizeformat(self.file.size),
                 self.file_type, search_url, self.file.name)
 
-    def get_format_view(self):
+    def get_format_image(self):
         image_name = PLAIN_FILE_FORMATS.get(self.file_type, self.file_type)
         file_name = FILE_FILEFORMAT.format(image_name)
 
         if file_exists(file_name):
             image = file_name
         else:
             image = FILE_STUB_IMAGE
 
+        return image
+
+    def get_format_view(self):
+        image = self.get_format_image()
         w, h = get_static_dimensions(image)
 
         return ABSTRACT_FORMAT_VIEW.format(self.file.url, static(image), w, h)
 
 
 class VideoViewer(AbstractViewer):
     @staticmethod
     def supports(file_type):
         return file_type in FILE_TYPES_VIDEO
 
     def get_format_view(self):
         return VIDEO_FORMAT_VIEW.format(self.file.url)
 
 
 class AudioViewer(AbstractViewer):
     @staticmethod
     def supports(file_type):
         return file_type in FILE_TYPES_AUDIO
 
+    def get_format_image(self):
+        file_name = FILE_FILEFORMAT.format(self.file_type)
+
+        if file_exists(file_name):
+            image = file_name
+        else:
+            image = FILE_STUB_IMAGE
+
+        return image
+
     def get_format_view(self):
-        return AUDIO_FORMAT_VIEW.format(self.file.url)
+        image = self.get_format_image()
+
+        return AUDIO_FORMAT_VIEW.format(self.file.url, static(image))
 
 
 class SvgViewer(AbstractViewer):
     @staticmethod
     def supports(file_type):
         return file_type == FILE_TYPE_SVG
 
     def get_format_view(self):
         return SVG_FORMAT_VIEW.format(self.file.url, self.file.url)
 
 
 class ImageViewer(AbstractViewer):
     @staticmethod
     def supports(file_type):
         return file_type in FILE_TYPES_IMAGE
 
     def get_format_view(self):
         metadata = '{}, {}'.format(self.file.name.split('.')[-1],
                                    filesizeformat(self.file.size))
 
         try:
             width, height = get_image_dimensions(self.file.path)
         except Exception:
             # If the image is a decompression bomb, treat it as just a regular
             # file
             return super().get_format_view()
 
         preview_path = self.file.path.replace('.', '.200x150.')
         pre_width, pre_height = get_image_dimensions(preview_path)
 
         split = self.file.url.rsplit('.', 1)
         w, h = 200, 150
         thumb_url = '%s.%sx%s.%s' % (split[0], w, h, split[1])
 
         return IMAGE_FORMAT_VIEW.format(CSS_CLASS_THUMB,
                 thumb_url,
                 self.hash,
                 str(pre_width),
                 str(pre_height), str(width), str(height),
                 full=self.file.url, image_meta=metadata)
 
 
 class UrlViewer(AbstractViewer):
     @staticmethod
     def supports(file_type):
         return file_type is None
 
     def get_view(self):
         return URL_VIEW.format(self.get_format_view(), get_domain(self.url))
 
     def get_format_view(self):
         protocol = self.url.split(':')[0]
 
         domain = get_domain(self.url)
 
         if protocol in URL_PROTOCOLS:
             url_image_name = URL_PROTOCOLS.get(protocol)
         elif domain:
             url_image_name = self._find_image_for_domains(domain) or FILE_STUB_URL
         else:
             url_image_name = FILE_STUB_URL
 
         image_path = 'images/{}.png'.format(url_image_name)
         image = static(image_path)
         w, h = get_static_dimensions(image_path)
 
         return URL_FORMAT_VIEW.format(self.url, image, w, h)
 
     @cached_result()
     def _find_image_for_domains(self, domain):
         """
         Searches for the domain image for every domain level except top.
         E.g. for l3.example.co.uk it will search for l3.example.co.uk, then
         example.co.uk, then co.uk
         """
         levels = domain.split('.')
         while len(levels) > 1:
             domain = '.'.join(levels)
 
             filename = 'images/domains/{}.png'.format(domain)
             if file_exists(filename):
                 return 'domains/' + domain
             else:
                 del levels[0]
 

boards/static/js/refpopup.js

@@ -1,134 +1,140 b''
 var LOADING_MSG = "<div class=\"post\">" + gettext('Loading...') + "</div>";
 
 var CLS_PREVIEW = 'post_preview';
 
 function $X(path, root) {
     return document.evaluate(path, root || document, null, 6, null);
 }
 function $x(path, root) {
     return document.evaluate(path, root || document, null, 8, null).singleNodeValue;
 }
 
 function $del(el) {
-    if(el) el.parentNode.removeChild(el);
+    if (el) {
+        ambiplayer_delete_hook && ambiplayer_delete_hook(el);
+        el.parentNode.removeChild(el);
+    }
 }
 
 function $each(list, fn) {
     if(!list) return;
     var i = list.snapshotLength;
     if(i > 0) while(i--) fn(list.snapshotItem(i), i);
 }
 
 function mkPreview(cln, html) {
     cln.innerHTML = html;
 
+    setTimeout(function() {
+        ambiplayer_init_hook && ambiplayer_init_hook();
+    }, 0);
     addScriptsToPost($(cln));
 }
 
 function isElementInViewport (el) {
     //special bonus for those using jQuery
     if (typeof jQuery === "function" && el instanceof jQuery) {
         el = el[0];
     }
 
     var rect = el.getBoundingClientRect();
 
     return (
         rect.top >= 0 &&
         rect.left >= 0 &&
         rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
         rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
     );
 }
 
 function addRefLinkPreview(node) {
     $each($X('.//a[starts-with(text(),">>")]', node || document), function(link) {
         link.addEventListener('mouseover', showPostPreview, false);
         link.addEventListener('mouseout', delPostPreview, false);
     });
 }
 
 function showPostPreview(e) {
     var doc = document;
 
     var reflink = $(this);
     var pNum = reflink.text().match(/\d+/);
 
     if (pNum == null || pNum.length == 0) {
         return;
     }
 
     var post = $('#' + pNum);
     if (post.length > 0 && isElementInViewport(post)) {
         // If post is on the same page and visible, just highlight it
         post.addClass('highlight');
     } else {
         var x = reflink.offset().left;
         var y = reflink.offset().top;
 
         var cln = doc.createElement('div');
         cln.id = 'pstprev_' + pNum;
         cln.className = CLS_PREVIEW;
 
         cln.style.cssText = 'left:' + x + 'px; top:' + y + 'px';
 
         cln.addEventListener('mouseout', delPostPreview, false);
 
         cln.innerHTML = LOADING_MSG;
 
         if (post.length > 0) {
             // If post is on the same page but not visible, generate preview from it
-            var postClone = post.clone();
+            var postClone = post.clone(true);
             postClone.removeAttr('style');
             var postdata = postClone.wrap("<div/>").parent().html();
 
             mkPreview(cln, postdata);
         } else {
             // If post is from other page, load it
             $.ajax({
                 url: '/api/post/' + pNum + '/?truncated'
             })
             .success(function(data) {
                 var postdata = $(data).wrap("<div/>").parent().html();
 
                 //make preview
                 mkPreview(cln, postdata);
             })
             .error(function() {
                 cln.innerHTML = "<div class=\"post\">"
                     + gettext('Post not found') + "</div>";
             });
         }
 
         $del(doc.getElementById(cln.id));
 
         //add preview
         $(cln).fadeIn(200);
         $('body').append(cln);
     }
 }
 
 function delPostPreview(e) {
     var el = $x('ancestor-or-self::*[starts-with(@id,"pstprev")]', e.relatedTarget);
     if(!el) {
         $each($X('.//div[starts-with(@id,"pstprev")]'), function(clone) {
             $del(clone)
         });
     } else {
         while (el.nextSibling) {
             if (el.nextSibling.className == CLS_PREVIEW) {
                 $del(el.nextSibling);
             } else {
                 break;
             }
         }
     }
 
     $('.highlight').removeClass('highlight');
 }
 
 function addPreview() {
     $('.post').find('a').each(function() {
         showPostPreview($(this));
     });
 }

boards/static/js/thread.js

@@ -1,155 +1,156 b''
 /*
  @licstart  The following is the entire license notice for the
  JavaScript code in this page.
 
 
  Copyright (C) 2013  neko259
 
  The JavaScript code in this page is free software: you can
  redistribute it and/or modify it under the terms of the GNU
  General Public License (GNU GPL) as published by the Free Software
  Foundation, either version 3 of the License, or (at your option)
  any later version.  The code is distributed WITHOUT ANY WARRANTY;
  without even the implied warranty of MERCHANTABILITY or FITNESS
  FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 
  As additional permission under GNU GPL version 3 section 7, you
  may distribute non-source (e.g., minimized or compacted) forms of
  that code without the copy of the GNU GPL normally required by
  section 4, provided you include this license notice and a URL
  through which recipients can access the Corresponding Source.
 
  @licend  The above is the entire license notice
  for the JavaScript code in this page.
  */
 
 var CLOSE_BUTTON = '#form-close-button';
 var REPLY_TO_MSG = '.reply-to-message';
 var REPLY_TO_MSG_ID = '#reply-to-message-id';
 
 var $html = $("html, body");
 
 function moveCaretToEnd(el) {
     var newPos = el.val().length;
     el[0].setSelectionRange(newPos, newPos);
 }
 
 function getForm() {
     return $('.post-form-w');
 }
 
 function resetFormPosition() {
     var form = getForm();
     form.insertAfter($('.thread'));
 
     $(CLOSE_BUTTON).hide();
     $(REPLY_TO_MSG).hide();
 }
 
 function showFormAfter(blockToInsertAfter) {
     var form = getForm();
     form.insertAfter(blockToInsertAfter);
 
     $(CLOSE_BUTTON).show();
     form.show();
     $(REPLY_TO_MSG_ID).text(blockToInsertAfter.attr('id'));
     $(REPLY_TO_MSG).show();
 }
 
 function addQuickReply(postId) {
     var blockToInsert = null;
     var textAreaJq = getPostTextarea();
     var postLinkRaw = '[post]' + postId + '[/post]'
     var textToAdd = '';
 
     if (postId != null) {
         var post = $('#' + postId);
 
         // If this is not OP, add reflink to the post. If there already is
         // the same reflink, don't add it again.
         var postText = textAreaJq.val();
         if (!post.is(':first-child') && postText.indexOf(postLinkRaw) < 0) {
             // Insert line break if none is present.
             if (postText.length > 0 && !postText.endsWith('\n') && !postText.endsWith('\r')) {
                 textToAdd += '\n';
             }
             textToAdd += postLinkRaw + '\n';
         }
 
         textAreaJq.val(textAreaJq.val()+ textToAdd);
         blockToInsert = post;
     } else {
         blockToInsert = $('.thread');
     }
     showFormAfter(blockToInsert);
 
     textAreaJq.focus();
 
     moveCaretToEnd(textAreaJq);
 }
 
 function addQuickQuote() {
     var textAreaJq = getPostTextarea();
 
     var quoteButton = $("#quote-button");
     var postId = quoteButton.attr('data-post-id');
     if (postId != null) {
         addQuickReply(postId);
     }
 
     var textToAdd = '';
     var selection = window.getSelection().toString();
     if (selection.length == 0) {
         selection = quoteButton.attr('data-text');
     }
     if (selection.length > 0) {
         textToAdd += '[quote]' + selection + '[/quote]\n';
     }
 
     textAreaJq.val(textAreaJq.val() + textToAdd);
 
     textAreaJq.focus();
 
     moveCaretToEnd(textAreaJq);
 }
 
 function scrollToBottom() {
     $html.animate({scrollTop: $html.height()}, "fast");
 }
 
 function showQuoteButton() {
-    var selection = window.getSelection().getRangeAt(0).getBoundingClientRect();
+    var windowSelection = window.getSelection();
+    var selection = windowSelection.rangeCount && windowSelection.getRangeAt(0).getBoundingClientRect();
     var quoteButton = $("#quote-button");
     if (selection.width > 0) {
         // quoteButton.offset({ top: selection.top - selection.height, left: selection.left });
         quoteButton.css({top: selection.top + $(window).scrollTop() - 30, left: selection.left});
         quoteButton.show();
 
         var text = window.getSelection().toString();
         quoteButton.attr('data-text', text);
 
         var rect = window.getSelection().getRangeAt(0).getBoundingClientRect();
         var element = $(document.elementFromPoint(rect.x, rect.y));
         var postId = null;
         if (element.hasClass('post')) {
             postId = element.attr('id');
         } else {
             var postParent = element.parents('.post');
             if (postParent.length > 0) {
                 postId = postParent.attr('id');
             }
         }
         quoteButton.attr('data-post-id', postId);
     } else {
         quoteButton.hide();
     }
 }
 
 $(document).ready(function() {
     $('body').on('mouseup', function() {
         showQuoteButton();
     });
     $("#quote-button").click(function() {
         addQuickQuote();
     })
 });

boards/static/js/thread_update.js

@@ -1,399 +1,403 b''
 /*
  @licstart  The following is the entire license notice for the
  JavaScript code in this page.
 
 
  Copyright (C) 2013-2014  neko259
 
  The JavaScript code in this page is free software: you can
  redistribute it and/or modify it under the terms of the GNU
  General Public License (GNU GPL) as published by the Free Software
  Foundation, either version 3 of the License, or (at your option)
  any later version.  The code is distributed WITHOUT ANY WARRANTY;
  without even the implied warranty of MERCHANTABILITY or FITNESS
  FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 
  As additional permission under GNU GPL version 3 section 7, you
  may distribute non-source (e.g., minimized or compacted) forms of
  that code without the copy of the GNU GPL normally required by
  section 4, provided you include this license notice and a URL
  through which recipients can access the Corresponding Source.
 
  @licend  The above is the entire license notice
  for the JavaScript code in this page.
  */
 
 var CLASS_POST = '.post';
 
 var POST_ADDED = 0;
 var POST_UPDATED = 1;
 
 // TODO These need to be syncronized with board settings.
 var JS_AUTOUPDATE_PERIOD = 20000;
 // TODO This needs to be the same for attachment download time limit.
 var POST_AJAX_TIMEOUT = 30000;
 var BLINK_SPEED = 500;
 
 var ALLOWED_FOR_PARTIAL_UPDATE = [
     'refmap',
     'post-info'
 ];
 
 var ATTR_CLASS = 'class';
 var ATTR_UID = 'data-uid';
 
 var unreadPosts = 0;
 var documentOriginalTitle = '';
 
 // Thread ID does not change, can be stored one time
 var threadId = $('div.thread').children(CLASS_POST).first().attr('id');
 var blinkColor = $('<div class="post-blink"></div>').css('background-color');
 
 /**
  * Get diff of the posts from the current thread timestamp.
  * This is required if the browser was closed and some post updates were
  * missed.
  */
 function getThreadDiff() {
     var all_posts = $('.post');
 
     var uids = '';
     var posts = all_posts;
     for (var i = 0; i < posts.length; i++) {
         uids += posts[i].getAttribute('data-uid') + ' ';
     }
 
     var data = {
         uids: uids,
         thread: threadId
     };
 
     var diffUrl = '/api/diff_thread/';
 
     $.post(diffUrl,
         data,
         function(data) {
             var updatedPosts = data.updated;
             var addedPostCount = 0;
 
             for (var i = 0; i < updatedPosts.length; i++) {
                 var postText = updatedPosts[i];
                 var post = $(postText);
 
                 if (updatePost(post) == POST_ADDED) {
                     addedPostCount++;
                 }
             }
 
             var hasMetaUpdates = updatedPosts.length > 0;
             if (hasMetaUpdates) {
                 updateMetadataPanel();
             }
 
             if (addedPostCount > 0) {
                 updateBumplimitProgress(addedPostCount);
             }
 
             if (updatedPosts.length > 0) {
                 showNewPostsTitle(addedPostCount);
             }
 
             // TODO Process removed posts if any
             $('.metapanel').attr('data-last-update', data.last_update);
 
             if (data.subscribed == 'True') {
                 var favButton = $('#thread-fav-button .not_fav');
 
                 if (favButton.length > 0) {
                     favButton.attr('value', 'unsubscribe');
                     favButton.removeClass('not_fav');
                     favButton.addClass('fav');
                 }
             }
         },
         'json'
     )
 }
 
 /**
  * Add or update the post on html page.
  */
 function updatePost(postHtml) {
     // This needs to be set on start because the page is scrolled after posts
     // are added or updated
     var bottom = isPageBottom();
 
     var post = $(postHtml);
 
     var threadBlock = $('div.thread');
 
     var postId = post.attr('id');
 
     // If the post already exists, replace it. Otherwise add as a new one.
     var existingPosts = threadBlock.children('.post[id=' + postId + ']');
 
     var type;
 
     if (existingPosts.size() > 0) {
         replacePartial(existingPosts.first(), post, false);
         post = existingPosts.first();
 
         type = POST_UPDATED;
     } else {
         post.appendTo(threadBlock);
 
         if (bottom) {
             scrollToBottom();
         }
 
         type = POST_ADDED;
     }
 
     processNewPost(post);
 
+    setTimeout(function() {
+        ambiplayer_init_hook && ambiplayer_init_hook();
+    }, 0);
+
     return type;
 }
 
 /**
  * Initiate a blinking animation on a node to show it was updated.
  */
 function blink(node) {
     node.effect('highlight', { color: blinkColor }, BLINK_SPEED);
 }
 
 function isPageBottom() {
     var scroll = $(window).scrollTop() / ($(document).height()
         - $(window).height());
 
     return scroll == 1
 }
 
 function enableJsUpdate() {
     setInterval(getThreadDiff, JS_AUTOUPDATE_PERIOD);
     return true;
 }
 
 function initAutoupdate() {
     return enableJsUpdate();
 }
 
 function getReplyCount() {
     return $('.thread').children(CLASS_POST).length
 }
 
 function getImageCount() {
     return $('.thread').find('img').length
 }
 
 /**
  * Update post count, images count and last update time in the metadata
  * panel.
  */
 function updateMetadataPanel() {
     var replyCountField = $('#reply-count');
     var imageCountField = $('#image-count');
 
     var replyCount = getReplyCount();
     replyCountField.text(replyCount);
     var imageCount = getImageCount();
     imageCountField.text(imageCount);
 
     var lastUpdate = $('.post:last').children('.post-info').first()
         .children('.pub_time').first().html();
     if (lastUpdate !== '') {
         var lastUpdateField = $('#last-update');
         lastUpdateField.html(lastUpdate);
         blink(lastUpdateField);
     }
 
     blink(replyCountField);
     blink(imageCountField);
 }
 
 /**
  * Update bumplimit progress bar
  */
 function updateBumplimitProgress(postDelta) {
     var progressBar = $('#bumplimit_progress');
     if (progressBar) {
         var postsToLimitElement = $('#left_to_limit');
 
         var oldPostsToLimit = parseInt(postsToLimitElement.text());
         var postCount = getReplyCount();
         var bumplimit = postCount - postDelta + oldPostsToLimit;
 
         var newPostsToLimit = bumplimit - postCount;
         if (newPostsToLimit <= 0) {
             $('.bar-bg').remove();
         } else {
             postsToLimitElement.text(newPostsToLimit);
             progressBar.width((100 - postCount / bumplimit * 100.0) + '%');
         }
     }
 }
 
 /**
  * Show 'new posts' text in the title if the document is not visible to a user
  */
 function showNewPostsTitle(newPostCount) {
     if (document.hidden) {
         if (documentOriginalTitle === '') {
             documentOriginalTitle = document.title;
         }
         unreadPosts = unreadPosts + newPostCount;
 
         var newTitle = null;
         if (unreadPosts > 0) {
             newTitle = '[' + unreadPosts + '] ';
         } else {
             newTitle = '* ';
         }
         newTitle += documentOriginalTitle;
 
         document.title = newTitle;
 
         document.addEventListener('visibilitychange', function() {
             if (documentOriginalTitle !== '') {
                 document.title = documentOriginalTitle;
                 documentOriginalTitle = '';
                 unreadPosts = 0;
             }
 
             document.removeEventListener('visibilitychange', null);
         });
     }
 }
 
 /**
  * Clear all entered values in the form fields
  */
 function resetForm(form) {
     form.find('input:text, input:password, input:file, select, textarea').val('');
     form.find('input:radio, input:checkbox')
              .removeAttr('checked').removeAttr('selected');
     $('.file_wrap').find('.file-thumb').remove();
     $('#preview-text').hide();
 }
 
 /**
  * When the form is posted, this method will be run as a callback
  */
 function updateOnPost(response, statusText, xhr, form) {
     var json = $.parseJSON(response);
     var status = json.status;
 
     showAsErrors(form, '');
     $('.post-form-w').unblock();
 
     if (status === 'ok') {
         resetFormPosition();
         resetForm(form);
         getThreadDiff();
         scrollToBottom();
     } else {
         var errors = json.errors;
         for (var i = 0; i < errors.length; i++) {
             var fieldErrors = errors[i];
 
             var error = fieldErrors.errors;
 
             showAsErrors(form, error);
         }
     }
 }
 
 
 /**
  * Run js methods that are usually run on the document, on the new post
  */
 function processNewPost(post) {
     addScriptsToPost(post);
     blink(post);
 }
 
 function replacePartial(oldNode, newNode, recursive) {
     if (!equalNodes(oldNode, newNode)) {
         // Update parent node attributes
         updateNodeAttr(oldNode, newNode, ATTR_CLASS);
         updateNodeAttr(oldNode, newNode, ATTR_UID);
 
         // Replace children
         var children = oldNode.children();
         if (children.length == 0) {
             oldNode.replaceWith(newNode);
         } else {
             var newChildren = newNode.children();
             newChildren.each(function(i) {
                 var newChild = newChildren.eq(i);
                 var newChildClass = newChild.attr(ATTR_CLASS);
 
                 // Update only certain allowed blocks (e.g. not images)
                 if (ALLOWED_FOR_PARTIAL_UPDATE.indexOf(newChildClass) > -1) {
                     var oldChild = oldNode.children('.' + newChildClass);
 
                     if (oldChild.length == 0) {
                         oldNode.append(newChild);
                     } else {
                         if (!equalNodes(oldChild, newChild)) {
                             if (recursive) {
                                 replacePartial(oldChild, newChild, false);
                             } else {
                                 oldChild.replaceWith(newChild);
                             }
                         }
                     }
                 }
             });
         }
     }
 }
 
 /**
  * Compare nodes by content
  */
 function equalNodes(node1, node2) {
     return node1[0].outerHTML == node2[0].outerHTML;
 }
 
 /**
  * Update attribute of a node if it has changed
  */
 function updateNodeAttr(oldNode, newNode, attrName) {
     var oldAttr = oldNode.attr(attrName);
     var newAttr = newNode.attr(attrName);
     if (oldAttr != newAttr) {
         oldNode.attr(attrName, newAttr);
     }
 }
 
 $(document).ready(function() {
     if (initAutoupdate()) {
         // Post form data over AJAX
         var threadId = $('div.thread').children('.post').first().attr('id');
 
         var form = $('#form');
 
         if (form.length > 0) {
             var options = {
                 beforeSubmit: function(arr, form, options) {
                     $('.post-form-w').block({ message: gettext('Sending message...') });
                 },
                 success: updateOnPost,
                 error: function(xhr, textStatus, errorString) {
                     var errorText = gettext('Server error: ') + textStatus;
                     if (errorString) {
                         errorText += ' / ' + errorString;
                     }
                     showAsErrors(form, errorText);
                     $('.post-form-w').unblock();
                 },
                 url: '/api/add_post/' + threadId + '/',
                 timeout: POST_AJAX_TIMEOUT
             };
 
             form.ajaxForm(options);
 
             resetForm(form);
         }
     }
 });

boards/templates/boards/base.html

@@ -1,97 +1,99 b''
 {% load staticfiles %}
 {% load i18n %}
 {% load l10n %}
 {% load static from staticfiles %}
 
 <!DOCTYPE html>
 <html>
 <head>
     <link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}" media="all"/>
     <link rel="stylesheet" type="text/css" href="{% static 'css/3party/highlight.css' %}" media="all"/>
     <link rel="stylesheet" type="text/css" href="{% static 'css/3party/jquery-ui.min.css' %}" media="all"/>
     <link rel="stylesheet" type="text/css" href="{% static 'css/3party/jquery.contextMenu.min.css' %}" media="all"/>
+    <link rel="stylesheet" type="text/css" href="{% static 'css/3party/ambiplayer.css' %}" media="all"/>
     <link rel="stylesheet" type="text/css" href="{% static theme_css %}" media="all"/>
 
     {% if rss_url %}
         <link rel="alternate" type="application/rss+xml" href="{{ rss_url }}" title="{% trans 'Feed' %}"/>
     {% endif %}
 
     <link rel="icon" type="image/png"
         href="{% static 'favicon.png' %}">
 
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <meta charset="utf-8"/>
 
     {% block head %}{% endblock %}
 </head>
 <body data-image-viewer="{{ image_viewer }}"
       data-pow-difficulty="{{ pow_difficulty }}"
       data-update-script="{% static 'js/updates.js' %}">
     <script src="{% static 'js/jquery-2.2.0.min.js' %}"></script>
 
     <header class="navigation_panel">
         <a class="link" href="{% url 'landing' %}">{{ site_name }}</a>
         <a href="{% url 'index' %}" title="{% trans "All threads" %}">~~~</a>,
         {% if tags_str %}
             <form action="{% url 'index' %}" method="post" class="post-button-form">{% csrf_token %}
             {% if only_favorites %}
                 <button name="method" value="toggle_fav" class="fav">★</button>,
             {% else %}
                 <button name="method" value="toggle_fav" class="not_fav">★</button>,
             {% endif %}
             </form>
             {{ tags_str|safe }},
         {% endif %}
         <a href="{% url 'tags' %}" title="{% trans 'Tag management' %}">{% trans "tags" %}</a>,
         <a href="{% url 'search' %}" title="{% trans 'Search' %}">{% trans 'search' %}</a>,
         <a href="{% url 'feed' %}" title="{% trans 'Feed' %}">{% trans 'feed' %}</a>,
         <a href="{% url 'random' %}" title="{% trans 'Random images' %}">{% trans 'images' %}</a>{% if has_fav_threads %},
 
         <a href="{% url 'feed' %}?favorites" id="fav-panel-btn">{% trans 'favorites' %} <span id="new-fav-post-count" {% if not new_post_count %}style="display: none" {% endif %}>{{ new_post_count }}</span></a>
         {% endif %}
 
         {% if usernames %}
             <a class="right-link link" href="{% url 'notifications' %}" title="{% trans 'Notifications' %}">
                 {% trans 'Notifications' %}
                 {% ifnotequal new_notifications_count 0 %}
                     (<b>{{ new_notifications_count }}</b>)
                 {% endifnotequal %}
             </a>
         {% endif %}
 
         <a class="right-link link" href="{% url 'settings' %}">{% trans 'Settings' %}</a>
     </header>
 
     <div id="fav-panel"><div class="post">{% trans "Loading..." %}</div></div>
 
     <script src="{% static 'js/3party/jquery-ui.min.js' %}"></script>
     <script src="{% static 'js/3party/jquery.contextMenu.min.js' %}"></script>
 
     {% block content %}{% endblock %}
 
     <script src="{% static 'js/jquery.mousewheel.js' %}"></script>
     <script src="{% static 'js/3party/highlight.min.js' %}"></script>
+    <script src="{% static 'js/3party/ambiplayer.js' %}"></script>
 
     <script src="{% url 'js_info_dict' %}"></script>
 
     <script src="{% static 'js/popup.js' %}"></script>
     <script src="{% static 'js/image.js' %}"></script>
     <script src="{% static 'js/refpopup.js' %}"></script>
     <script src="{% static 'js/main.js' %}"></script>
 
     <footer class="navigation_panel">
         <b><a href="{% url "authors" %}">{{ site_name }}</a> {{ version }}</b>
         {% block metapanel %}{% endblock %}
         {% if rss_url %}
             [<a href="{{ rss_url }}">RSS</a>]
         {% endif %}
         [<a href="{% url 'admin:index' %}">{% trans 'Admin' %}</a>]
         [<a href="{% url 'index' %}?order=pub">{% trans 'New threads' %}</a>]
         {% with ppd=posts_per_day|floatformat:2 %}
             {% blocktrans %}Speed: {{ ppd }} posts per day{% endblocktrans %}
         {% endwith %}
         <a class="link" href="#top" id="up">{% trans 'Up' %}</a>
     </footer>
 
 </body>
 </html>