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

@@ -29,6 +29,7 b' FILE_TYPES_AUDIO = ('
     'ogg',
     'mp3',
     'opus',
+    'flac',
 )
 FILE_TYPES_IMAGE = (
     'jpeg',
@@ -65,7 +66,7 b' 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="{}"' \
@@ -121,7 +122,7 b' class AbstractViewer:'
                 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)
 
@@ -130,6 +131,10 b' class AbstractViewer:'
         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)
@@ -149,8 +154,20 b' class AudioViewer(AbstractViewer):'
     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):

boards/static/js/refpopup.js

@@ -10,7 +10,10 b' function $x(path, root) {'
 }
 
 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) {
@@ -22,6 +25,9 b' function $each(list, fn) {'
 function mkPreview(cln, html) {
     cln.innerHTML = html;
 
+    setTimeout(function() {
+        ambiplayer_init_hook && ambiplayer_init_hook();
+    }, 0);
     addScriptsToPost($(cln));
 }
 
@@ -78,7 +84,7 b' function showPostPreview(e) {'
 
         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();
 

boards/static/js/thread.js

@@ -118,7 +118,8 b' function scrollToBottom() {'
 }
 
 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 });

boards/static/js/thread_update.js

@@ -151,6 +151,10 b' function updatePost(postHtml) {'
 
     processNewPost(post);
 
+    setTimeout(function() {
+        ambiplayer_init_hook && ambiplayer_init_hook();
+    }, 0);
+
     return type;
 }
 

boards/templates/boards/base.html

@@ -10,6 +10,7 b''
     <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 %}
@@ -71,6 +72,7 b''
 
     <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>