src/qml/Visualization.qml

0001 // SPDX-FileCopyrightText: 2020 Jonah Brüchert <jbb@kaidan.im>
0002 // SPDX-FileCopyrightText: 2020-2022 Devin Lin <espidev@gmail.com>
0003 // SPDX-License-Identifier: GPL-3.0-or-later
0004
0005 import QtQuick 2.0
0006 import QtQuick.Layouts 1.12
0007 import QtQuick.Controls 2.2 as Controls
0008 import org.kde.kirigami 2.12 as Kirigami
0009
0010 Item {
0011     id: visualization
0012
0013     property var prober
0014
0015     property int maxBarHeight
0016     property int animationIndex // which index rectangle is being expanded
0017     property var volumes: []
0018
0019     property int reservedBarWidth: Math.round(Kirigami.Units.gridUnit * 0.4)
0020
0021     // maximum volume to base off volume bar height
0022     property int maxVolumeData: 1000
0023
0024     // TODO: We need a more sophisticated algorithm to create the visualizer bars (probably using FFT)
0025     // currently we just see how much data is in a sample, which is really random and doesn't deal with spikes very well
0026     function processVolume(volume) {
0027         if (audio.metaData.audioCodec === 'Vorbis') {
0028             volume = Math.max(0, 17000 - volume);
0029         }
0030         return volume;
0031     }
0032
0033     Component.onCompleted: {
0034         visualization.prober.maxVolumes = width / reservedBarWidth;
0035     }
0036     onWidthChanged: {
0037         visualization.prober.maxVolumes = width / reservedBarWidth;
0038     }
0039
0040     Connections {
0041         target: visualization.prober
0042         function onVolumesListCleared() {
0043             visualization.maxVolumeData = 1000; // reset max
0044         }
0045         function onVolumesListAdded(volume) {
0046             visualization.maxVolumeData = Math.max(visualization.maxVolumeData, processVolume(volume));
0047         }
0048     }
0049
0050     ListView {
0051         id: list
0052         model: visualization.volumes
0053         orientation: Qt.Horizontal
0054
0055         interactive: false
0056         height: maxBarHeight
0057         anchors {
0058             verticalCenter: parent.verticalCenter
0059             left: parent.left
0060             leftMargin: 0
0061             right: parent.right
0062         }
0063         spacing: 0
0064
0065         delegate: Item {
0066             width: reservedBarWidth
0067             height: list.height
0068
0069             Rectangle {
0070                 color: Kirigami.Theme.disabledTextColor
0071                 width: Math.round(Kirigami.Units.gridUnit * 0.12)
0072                 radius: Math.round(width / 2)
0073                 height: Math.max(Math.round(Kirigami.Units.gridUnit * 0.15), maxBarHeight * processVolume(modelData) / visualization.maxVolumeData)
0074                 antialiasing: true
0075                 anchors.verticalCenter: parent.verticalCenter
0076             }
0077         }
0078     }
0079 }