Add inline audio clip player (m.audio) (#143)

16 files changed, 472 insertions, 93 deletions

diff --git a/CMakeLists.txt b/CMakeLists.txt
index c2d9ff58..168bda58 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -57,6 +57,7 @@ find_package(Qt5Widgets REQUIRED)
 find_package(Qt5Network REQUIRED)
 find_package(Qt5LinguistTools REQUIRED)
 find_package(Qt5Concurrent REQUIRED)
+find_package(Qt5Multimedia REQUIRED)
 
 if (APPLE)
     find_package(Qt5MacExtras REQUIRED)
@@ -157,8 +158,10 @@ set(SRC_FILES
     src/timeline/TimelineViewManager.cc
     src/timeline/TimelineItem.cc
     src/timeline/TimelineView.cc
+    src/timeline/widgets/AudioItem.cc
     src/timeline/widgets/FileItem.cc
     src/timeline/widgets/ImageItem.cc
+    src/timeline/widgets/VideoItem.cc
 
     # UI components
     src/ui/Avatar.cc
@@ -260,8 +263,10 @@ qt5_wrap_cpp(MOC_HEADERS
     include/timeline/TimelineItem.h
     include/timeline/TimelineView.h
     include/timeline/TimelineViewManager.h
+    include/timeline/widgets/AudioItem.h
     include/timeline/widgets/FileItem.h
     include/timeline/widgets/ImageItem.h
+    include/timeline/widgets/VideoItem.h
 
     # UI components
     include/ui/Avatar.h
@@ -357,11 +362,11 @@ set (NHEKO_DEPS ${SRC_FILES} ${UI_HEADERS} ${MOC_HEADERS} ${QRC} ${LANG_QRC} ${Q
 
 if(APPLE)
     add_executable (nheko ${OS_BUNDLE} ${NHEKO_DEPS})
-    target_link_libraries (nheko ${NHEKO_LIBS} Qt5::MacExtras)
+    target_link_libraries (nheko ${NHEKO_LIBS} Qt5::MacExtras Qt5::Multimedia)
 elseif(WIN32)
     add_executable (nheko ${OS_BUNDLE} ${ICON_FILE} ${NHEKO_DEPS})
-    target_link_libraries (nheko ${NTDLIB} ${NHEKO_LIBS} Qt5::WinMain)
+    target_link_libraries (nheko ${NTDLIB} ${NHEKO_LIBS} Qt5::WinMain Qt5::Multimedia)
 else()
     add_executable (nheko ${OS_BUNDLE} ${NHEKO_DEPS})
-    target_link_libraries (nheko ${NHEKO_LIBS})
+    target_link_libraries (nheko ${NHEKO_LIBS} Qt5::Multimedia)
 endif()
diff --git a/include/timeline/TimelineItem.h b/include/timeline/TimelineItem.h
index 9646405c..fe265079 100644
--- a/include/timeline/TimelineItem.h
+++ b/include/timeline/TimelineItem.h
@@ -21,20 +21,24 @@
 #include <QHBoxLayout>
 #include <QLabel>
 #include <QPainter>
+#include <QSettings>
 #include <QStyle>
 #include <QStyleOption>
 
-#include "AvatarProvider.h"
+#include "Audio.h"
 #include "Emote.h"
 #include "File.h"
 #include "Image.h"
-#include "MessageEvent.h"
 #include "Notice.h"
-#include "RoomInfoListItem.h"
 #include "Text.h"
+
+#include "AvatarProvider.h"
+#include "MessageEvent.h"
+#include "RoomInfoListItem.h"
 #include "TimelineViewManager.h"
 
 class ImageItem;
+class AudioItem;
 class FileItem;
 class Avatar;
 
@@ -65,6 +69,7 @@ public:
         // m.image
         TimelineItem(ImageItem *item, const QString &userid, bool withSender, QWidget *parent = 0);
         TimelineItem(FileItem *item, const QString &userid, bool withSender, QWidget *parent = 0);
+        TimelineItem(AudioItem *item, const QString &userid, bool withSender, QWidget *parent = 0);
 
         TimelineItem(ImageItem *img,
                      const events::MessageEvent<msgs::Image> &e,
@@ -74,6 +79,10 @@ public:
                      const events::MessageEvent<msgs::File> &e,
                      bool with_sender,
                      QWidget *parent);
+        TimelineItem(AudioItem *audio,
+                     const events::MessageEvent<msgs::Audio> &e,
+                     bool with_sender,
+                     QWidget *parent);
 
         void setUserAvatar(const QImage &pixmap);
         DescInfo descriptionMessage() const { return descriptionMsg_; }
@@ -93,6 +102,12 @@ private:
                                     const QString &msgDescription,
                                     bool withSender);
 
+        template<class Event, class Widget>
+        void setupWidgetLayout(Widget *widget,
+                               const Event &event,
+                               const QString &msgDescription,
+                               bool withSender);
+
         void generateBody(const QString &body);
         void generateBody(const QString &userid, const QString &body);
         void generateTimestamp(const QDateTime &time);
@@ -153,3 +168,44 @@ TimelineItem::setupLocalWidgetLayout(Widget *widget,
 
         mainLayout_->addLayout(widgetLayout);
 }
+
+template<class Event, class Widget>
+void
+TimelineItem::setupWidgetLayout(Widget *widget,
+                                const Event &event,
+                                const QString &msgDescription,
+                                bool withSender)
+{
+        init();
+
+        event_id_ = event.eventId();
+
+        auto timestamp   = QDateTime::fromMSecsSinceEpoch(event.timestamp());
+        auto displayName = TimelineViewManager::displayName(event.sender());
+
+        QSettings settings;
+        descriptionMsg_ = {event.sender() == settings.value("auth/user_id") ? "You" : displayName,
+                           event.sender(),
+                           msgDescription,
+                           descriptiveTime(QDateTime::fromMSecsSinceEpoch(event.timestamp()))};
+
+        generateTimestamp(timestamp);
+
+        auto widgetLayout = new QHBoxLayout();
+        widgetLayout->setContentsMargins(0, 5, 0, 0);
+        widgetLayout->addWidget(widget);
+        widgetLayout->addStretch(1);
+
+        if (withSender) {
+                generateBody(displayName, "");
+                setupAvatarLayout(displayName);
+
+                mainLayout_->addLayout(headerLayout_);
+
+                AvatarProvider::resolve(event.sender(), this);
+        } else {
+                setupSimpleLayout();
+        }
+
+        mainLayout_->addLayout(widgetLayout);
+}
diff --git a/include/timeline/TimelineView.h b/include/timeline/TimelineView.h
index 898a304e..5262d20d 100644
--- a/include/timeline/TimelineView.h
+++ b/include/timeline/TimelineView.h
@@ -27,13 +27,16 @@
 #include <QStyle>
 #include <QStyleOption>
 
+#include "Audio.h"
 #include "Emote.h"
 #include "File.h"
 #include "Image.h"
-#include "MatrixClient.h"
-#include "MessageEvent.h"
 #include "Notice.h"
 #include "Text.h"
+#include "Video.h"
+
+#include "MatrixClient.h"
+#include "MessageEvent.h"
 #include "TimelineItem.h"
 
 class FloatingButton;
diff --git a/include/timeline/widgets/AudioItem.h b/include/timeline/widgets/AudioItem.h
new file mode 100644
index 00000000..1104996f
--- /dev/null
+++ b/include/timeline/widgets/AudioItem.h
@@ -0,0 +1,111 @@
+/*
+ * nheko Copyright (C) 2017  Konstantinos Sideris <siderisk@auth.gr>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+#pragma once
+
+#include <QEvent>
+#include <QIcon>
+#include <QMediaPlayer>
+#include <QMouseEvent>
+#include <QSharedPointer>
+#include <QWidget>
+
+#include "Audio.h"
+#include "MatrixClient.h"
+#include "MessageEvent.h"
+
+namespace events = matrix::events;
+namespace msgs   = matrix::events::messages;
+
+class AudioItem : public QWidget
+{
+        Q_OBJECT
+
+        Q_PROPERTY(QColor textColor WRITE setTextColor READ textColor)
+        Q_PROPERTY(QColor iconColor WRITE setIconColor READ iconColor)
+        Q_PROPERTY(QColor backgroundColor WRITE setBackgroundColor READ backgroundColor)
+
+        Q_PROPERTY(QColor durationBackgroundColor WRITE setDurationBackgroundColor READ
+                     durationBackgroundColor)
+        Q_PROPERTY(QColor durationForegroundColor WRITE setDurationForegroundColor READ
+                     durationForegroundColor)
+
+public:
+        AudioItem(QSharedPointer<MatrixClient> client,
+                  const events::MessageEvent<msgs::Audio> &event,
+                  QWidget *parent = nullptr);
+
+        AudioItem(QSharedPointer<MatrixClient> client,
+                  const QString &url,
+                  const QString &filename,
+                  QWidget *parent = nullptr);
+
+        QSize sizeHint() const override;
+
+        void setTextColor(const QColor &color) { textColor_ = color; }
+        void setIconColor(const QColor &color) { iconColor_ = color; }
+        void setBackgroundColor(const QColor &color) { backgroundColor_ = color; }
+
+        void setDurationBackgroundColor(const QColor &color) { durationBgColor_ = color; }
+        void setDurationForegroundColor(const QColor &color) { durationFgColor_ = color; }
+
+        QColor textColor() const { return textColor_; }
+        QColor iconColor() const { return iconColor_; }
+        QColor backgroundColor() const { return backgroundColor_; }
+
+        QColor durationBackgroundColor() const { return durationBgColor_; }
+        QColor durationForegroundColor() const { return durationFgColor_; }
+
+protected:
+        void paintEvent(QPaintEvent *event) override;
+        void mousePressEvent(QMouseEvent *event) override;
+
+private slots:
+        void fileDownloaded(const QString &event_id, const QByteArray &data);
+
+private:
+        QString calculateFileSize(int nbytes) const;
+        void init();
+
+        enum class AudioState
+        {
+                Play,
+                Pause,
+        };
+
+        AudioState state_ = AudioState::Play;
+
+        QUrl url_;
+        QString text_;
+        QString readableFileSize_;
+        QString filenameToSave_;
+
+        events::MessageEvent<msgs::Audio> event_;
+        QSharedPointer<MatrixClient> client_;
+
+        QMediaPlayer *player_;
+
+        QIcon playIcon_;
+        QIcon pauseIcon_;
+
+        QColor textColor_       = QColor("white");
+        QColor iconColor_       = QColor("#38A3D8");
+        QColor backgroundColor_ = QColor("#333");
+
+        QColor durationBgColor_ = QColor("black");
+        QColor durationFgColor_ = QColor("blue");
+};
diff --git a/include/timeline/widgets/FileItem.h b/include/timeline/widgets/FileItem.h
index ebb18111..47e81867 100644
--- a/include/timeline/widgets/FileItem.h
+++ b/include/timeline/widgets/FileItem.h
@@ -30,18 +30,6 @@
 namespace events = matrix::events;
 namespace msgs   = matrix::events::messages;
 
-constexpr int MaxWidth           = 400;
-constexpr int Height             = 70;
-constexpr int IconRadius         = 22;
-constexpr int IconDiameter       = IconRadius * 2;
-constexpr int HorizontalPadding  = 12;
-constexpr int TextPadding        = 15;
-constexpr int DownloadIconRadius = IconRadius - 4;
-
-constexpr double VerticalPadding = Height - 2 * IconRadius;
-constexpr double IconYCenter     = Height / 2;
-constexpr double IconXCenter     = HorizontalPadding + IconRadius;
-
 class FileItem : public QWidget
 {
         Q_OBJECT
diff --git a/include/timeline/widgets/VideoItem.h b/include/timeline/widgets/VideoItem.h
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/include/timeline/widgets/VideoItem.h
diff --git a/resources/icons/ui/pause-symbol.png b/resources/icons/ui/pause-symbol.png
new file mode 100644
index 00000000..923d6d20
--- /dev/null
+++ b/resources/icons/ui/pause-symbol.png
Binary files differdiff --git a/resources/icons/ui/pause-symbol@2x.png b/resources/icons/ui/pause-symbol@2x.png
new file mode 100644
index 00000000..33ce6de3
--- /dev/null
+++ b/resources/icons/ui/pause-symbol@2x.png
Binary files differdiff --git a/resources/icons/ui/play-sign.png b/resources/icons/ui/play-sign.png
new file mode 100644
index 00000000..75b259ef
--- /dev/null
+++ b/resources/icons/ui/play-sign.png
Binary files differdiff --git a/resources/icons/ui/play-sign@2x.png b/resources/icons/ui/play-sign@2x.png
new file mode 100644
index 00000000..6a982ae0
--- /dev/null
+++ b/resources/icons/ui/play-sign@2x.png
Binary files differdiff --git a/resources/res.qrc b/resources/res.qrc
index 95de2ec9..d15dd04c 100644
--- a/resources/res.qrc
+++ b/resources/res.qrc
@@ -26,6 +26,10 @@
         <file>icons/ui/angle-arrow-down@2x.png</file>
         <file>icons/ui/arrow-pointing-down.png</file>
         <file>icons/ui/arrow-pointing-down@2x.png</file>
+        <file>icons/ui/play-sign.png</file>
+        <file>icons/ui/play-sign@2x.png</file>
+        <file>icons/ui/pause-symbol.png</file>
+        <file>icons/ui/pause-symbol@2x.png</file>
 
         <file>icons/emoji-categories/people.png</file>
         <file>icons/emoji-categories/people@2x.png</file>
diff --git a/src/timeline/TimelineItem.cc b/src/timeline/TimelineItem.cc
index f7dd0f6e..f55e5f4c 100644
--- a/src/timeline/TimelineItem.cc
+++ b/src/timeline/TimelineItem.cc
@@ -17,7 +17,6 @@
 
 #include <QFontDatabase>
 #include <QRegExp>
-#include <QSettings>
 #include <QTextEdit>
 
 #include "Avatar.h"
@@ -25,6 +24,7 @@
 #include "Sync.h"
 
 #include "timeline/TimelineItem.h"
+#include "timeline/widgets/AudioItem.h"
 #include "timeline/widgets/FileItem.h"
 #include "timeline/widgets/ImageItem.h"
 
@@ -128,47 +128,25 @@ TimelineItem::TimelineItem(FileItem *file, const QString &userid, bool withSende
         setupLocalWidgetLayout<FileItem>(file, userid, "sent a file", withSender);
 }
 
-/*
- * Used to display images. The avatar and the username are displayed.
- */
+TimelineItem::TimelineItem(AudioItem *audio,
+                           const QString &userid,
+                           bool withSender,
+                           QWidget *parent)
+  : QWidget{parent}
+{
+        init();
+
+        setupLocalWidgetLayout<AudioItem>(audio, userid, "sent an audio clip", withSender);
+}
+
 TimelineItem::TimelineItem(ImageItem *image,
                            const events::MessageEvent<msgs::Image> &event,
                            bool with_sender,
                            QWidget *parent)
   : QWidget(parent)
 {
-        init();
-
-        event_id_ = event.eventId();
-
-        auto timestamp   = QDateTime::fromMSecsSinceEpoch(event.timestamp());
-        auto displayName = TimelineViewManager::displayName(event.sender());
-
-        QSettings settings;
-        descriptionMsg_ = {event.sender() == settings.value("auth/user_id") ? "You" : displayName,
-                           event.sender(),
-                           " sent an image",
-                           descriptiveTime(QDateTime::fromMSecsSinceEpoch(event.timestamp()))};
-
-        generateTimestamp(timestamp);
-
-        auto imageLayout = new QHBoxLayout();
-        imageLayout->setContentsMargins(0, 5, 0, 0);
-        imageLayout->addWidget(image);
-        imageLayout->addStretch(1);
-
-        if (with_sender) {
-                generateBody(displayName, "");
-                setupAvatarLayout(displayName);
-
-                mainLayout_->addLayout(headerLayout_);
-
-                AvatarProvider::resolve(event.sender(), this);
-        } else {
-                setupSimpleLayout();
-        }
-
-        mainLayout_->addLayout(imageLayout);
+        setupWidgetLayout<events::MessageEvent<msgs::Image>, ImageItem>(
+          image, event, " sent an image", with_sender);
 }
 
 TimelineItem::TimelineItem(FileItem *file,
@@ -177,38 +155,18 @@ TimelineItem::TimelineItem(FileItem *file,
                            QWidget *parent)
   : QWidget(parent)
 {
-        init();
-
-        event_id_ = event.eventId();
-
-        auto timestamp   = QDateTime::fromMSecsSinceEpoch(event.timestamp());
-        auto displayName = TimelineViewManager::displayName(event.sender());
-
-        QSettings settings;
-        descriptionMsg_ = {event.sender() == settings.value("auth/user_id") ? "You" : displayName,
-                           event.sender(),
-                           " sent a file",
-                           descriptiveTime(QDateTime::fromMSecsSinceEpoch(event.timestamp()))};
-
-        generateTimestamp(timestamp);
-
-        auto fileLayout = new QHBoxLayout();
-        fileLayout->setContentsMargins(0, 5, 0, 0);
-        fileLayout->addWidget(file);
-        fileLayout->addStretch(1);
-
-        if (with_sender) {
-                generateBody(displayName, "");
-                setupAvatarLayout(displayName);
-
-                mainLayout_->addLayout(headerLayout_);
-
-                AvatarProvider::resolve(event.sender(), this);
-        } else {
-                setupSimpleLayout();
-        }
+        setupWidgetLayout<events::MessageEvent<msgs::File>, FileItem>(
+          file, event, " sent a file", with_sender);
+}
 
-        mainLayout_->addLayout(fileLayout);
+TimelineItem::TimelineItem(AudioItem *audio,
+                           const events::MessageEvent<msgs::Audio> &event,
+                           bool with_sender,
+                           QWidget *parent)
+  : QWidget(parent)
+{
+        setupWidgetLayout<events::MessageEvent<msgs::Audio>, AudioItem>(
+          audio, event, " sent an audio clip", with_sender);
 }
 
 /*
diff --git a/src/timeline/TimelineView.cc b/src/timeline/TimelineView.cc
index 8ccff85a..e5fd7f88 100644
--- a/src/timeline/TimelineView.cc
+++ b/src/timeline/TimelineView.cc
@@ -25,8 +25,10 @@
 #include "Sync.h"
 
 #include "timeline/TimelineView.h"
+#include "timeline/widgets/AudioItem.h"
 #include "timeline/widgets/FileItem.h"
 #include "timeline/widgets/ImageItem.h"
+#include "timeline/widgets/VideoItem.h"
 
 namespace events = matrix::events;
 namespace msgs   = matrix::events::messages;
@@ -229,22 +231,25 @@ TimelineView::parseMessageEvent(const QJsonObject &event, TimelineDirection dire
         if (ty == events::EventType::RoomMessage) {
                 events::MessageEventType msg_type = events::extractMessageEventType(event);
 
+                using Audio  = events::MessageEvent<msgs::Audio>;
                 using Emote  = events::MessageEvent<msgs::Emote>;
                 using File   = events::MessageEvent<msgs::File>;
                 using Image  = events::MessageEvent<msgs::Image>;
                 using Notice = events::MessageEvent<msgs::Notice>;
                 using Text   = events::MessageEvent<msgs::Text>;
 
-                if (msg_type == events::MessageEventType::Text) {
-                        return processMessageEvent<Text>(event, direction);
-                } else if (msg_type == events::MessageEventType::Notice) {
-                        return processMessageEvent<Notice>(event, direction);
-                } else if (msg_type == events::MessageEventType::Image) {
-                        return processMessageEvent<Image, ImageItem>(event, direction);
+                if (msg_type == events::MessageEventType::Audio) {
+                        return processMessageEvent<Audio, AudioItem>(event, direction);
                 } else if (msg_type == events::MessageEventType::Emote) {
                         return processMessageEvent<Emote>(event, direction);
                 } else if (msg_type == events::MessageEventType::File) {
                         return processMessageEvent<File, FileItem>(event, direction);
+                } else if (msg_type == events::MessageEventType::Image) {
+                        return processMessageEvent<Image, ImageItem>(event, direction);
+                } else if (msg_type == events::MessageEventType::Notice) {
+                        return processMessageEvent<Notice>(event, direction);
+                } else if (msg_type == events::MessageEventType::Text) {
+                        return processMessageEvent<Text>(event, direction);
                 } else if (msg_type == events::MessageEventType::Unknown) {
                         // TODO Handle redacted messages.
                         // Silenced for now.
diff --git a/src/timeline/widgets/AudioItem.cc b/src/timeline/widgets/AudioItem.cc
new file mode 100644
index 00000000..7c4b2d48
--- /dev/null
+++ b/src/timeline/widgets/AudioItem.cc
@@ -0,0 +1,237 @@
+/*
+ * nheko Copyright (C) 2017  Konstantinos Sideris <siderisk@auth.gr>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+#include <QBrush>
+#include <QDebug>
+#include <QDesktopServices>
+#include <QFile>
+#include <QFileDialog>
+#include <QFileInfo>
+#include <QPainter>
+#include <QPixmap>
+
+#include "timeline/widgets/AudioItem.h"
+
+namespace events = matrix::events;
+namespace msgs   = matrix::events::messages;
+
+constexpr int MaxWidth          = 400;
+constexpr int Height            = 70;
+constexpr int IconRadius        = 22;
+constexpr int IconDiameter      = IconRadius * 2;
+constexpr int HorizontalPadding = 12;
+constexpr int TextPadding       = 15;
+constexpr int ActionIconRadius  = IconRadius - 4;
+
+constexpr double VerticalPadding = Height - 2 * IconRadius;
+constexpr double IconYCenter     = Height / 2;
+constexpr double IconXCenter     = HorizontalPadding + IconRadius;
+
+void
+AudioItem::init()
+{
+        setMouseTracking(true);
+        setCursor(Qt::PointingHandCursor);
+        setAttribute(Qt::WA_Hover, true);
+
+        playIcon_.addFile(":/icons/icons/ui/play-sign.png");
+        pauseIcon_.addFile(":/icons/icons/ui/pause-symbol.png");
+
+        QList<QString> url_parts = url_.toString().split("mxc://");
+        if (url_parts.size() != 2) {
+                qDebug() << "Invalid format for image" << url_.toString();
+                return;
+        }
+
+        QString media_params = url_parts[1];
+        url_                 = QString("%1/_matrix/media/r0/download/%2")
+                 .arg(client_.data()->getHomeServer().toString(), media_params);
+
+        player_ = new QMediaPlayer;
+        player_->setMedia(QUrl(url_));
+        player_->setVolume(100);
+        player_->setNotifyInterval(1000);
+
+        connect(client_.data(), &MatrixClient::fileDownloaded, this, &AudioItem::fileDownloaded);
+        connect(player_, &QMediaPlayer::stateChanged, this, [=](QMediaPlayer::State state) {
+                if (state == QMediaPlayer::StoppedState) {
+                        state_ = AudioState::Play;
+                        player_->setMedia(QUrl(url_));
+                        update();
+                }
+        });
+}
+
+AudioItem::AudioItem(QSharedPointer<MatrixClient> client,
+                     const events::MessageEvent<msgs::Audio> &event,
+                     QWidget *parent)
+  : QWidget(parent)
+  , url_{event.msgContent().url()}
+  , text_{event.content().body()}
+  , event_{event}
+  , client_{client}
+{
+        readableFileSize_ = calculateFileSize(event.msgContent().info().size);
+
+        init();
+}
+
+AudioItem::AudioItem(QSharedPointer<MatrixClient> client,
+                     const QString &url,
+                     const QString &filename,
+                     QWidget *parent)
+  : QWidget(parent)
+  , url_{url}
+  , text_{QFileInfo(filename).fileName()}
+  , client_{client}
+{
+        readableFileSize_ = calculateFileSize(QFileInfo(filename).size());
+
+        init();
+}
+
+QString
+AudioItem::calculateFileSize(int nbytes) const
+{
+        if (nbytes < 1024)
+                return QString("%1 B").arg(nbytes);
+
+        if (nbytes < 1024 * 1024)
+                return QString("%1 KB").arg(nbytes / 1024);
+
+        return QString("%1 MB").arg(nbytes / 1024 / 1024);
+}
+
+QSize
+AudioItem::sizeHint() const
+{
+        return QSize(MaxWidth, Height);
+}
+
+void
+AudioItem::mousePressEvent(QMouseEvent *event)
+{
+        if (event->button() != Qt::LeftButton)
+                return;
+
+        auto point = event->pos();
+
+        // Click on the download icon.
+        if (QRect(HorizontalPadding, VerticalPadding / 2, IconDiameter, IconDiameter)
+              .contains(point)) {
+                if (state_ == AudioState::Play) {
+                        state_ = AudioState::Pause;
+                        player_->play();
+                } else {
+                        state_ = AudioState::Play;
+                        player_->pause();
+                }
+
+                update();
+        } else {
+                filenameToSave_ = QFileDialog::getSaveFileName(this, tr("Save File"), text_);
+
+                if (filenameToSave_.isEmpty())
+                        return;
+
+                client_->downloadFile(event_.eventId(), url_);
+        }
+}
+
+void
+AudioItem::fileDownloaded(const QString &event_id, const QByteArray &data)
+{
+        if (event_id != event_.eventId())
+                return;
+
+        try {
+                QFile file(filenameToSave_);
+
+                if (!file.open(QIODevice::WriteOnly))
+                        return;
+
+                file.write(data);
+                file.close();
+        } catch (const std::exception &ex) {
+                qDebug() << "Error while saving file to:" << ex.what();
+        }
+}
+
+void
+AudioItem::paintEvent(QPaintEvent *event)
+{
+        Q_UNUSED(event);
+
+        QPainter painter(this);
+        painter.setRenderHint(QPainter::Antialiasing);
+
+        QFont font("Open Sans");
+        font.setPixelSize(12);
+        font.setWeight(80);
+
+        QFontMetrics fm(font);
+
+        int computedWidth = std::min(
+          fm.width(text_) + 2 * IconRadius + VerticalPadding * 2 + TextPadding, (double)MaxWidth);
+
+        QPainterPath path;
+        path.addRoundedRect(QRectF(0, 0, computedWidth, Height), 10, 10);
+
+        painter.setPen(Qt::NoPen);
+        painter.fillPath(path, backgroundColor_);
+        painter.drawPath(path);
+
+        QPainterPath circle;
+        circle.addEllipse(QPoint(IconXCenter, IconYCenter), IconRadius, IconRadius);
+
+        painter.setPen(Qt::NoPen);
+        painter.fillPath(circle, iconColor_);
+        painter.drawPath(circle);
+
+        QIcon icon_;
+        if (state_ == AudioState::Play)
+                icon_ = playIcon_;
+        else
+                icon_ = pauseIcon_;
+
+        icon_.paint(&painter,
+                    QRect(IconXCenter - ActionIconRadius / 2,
+                          IconYCenter - ActionIconRadius / 2,
+                          ActionIconRadius,
+                          ActionIconRadius),
+                    Qt::AlignCenter,
+                    QIcon::Normal);
+
+        const int textStartX = HorizontalPadding + 2 * IconRadius + TextPadding;
+        const int textStartY = VerticalPadding + fm.ascent() / 2;
+
+        // Draw the filename.
+        QString elidedText =
+          fm.elidedText(text_,
+                        Qt::ElideRight,
+                        computedWidth - HorizontalPadding * 2 - TextPadding - 2 * IconRadius);
+
+        painter.setFont(font);
+        painter.setPen(QPen(textColor_));
+        painter.drawText(QPoint(textStartX, textStartY), elidedText);
+
+        // Draw the filesize.
+        font.setWeight(50);
+        painter.setFont(font);
+        painter.setPen(QPen(textColor_));
+        painter.drawText(QPoint(textStartX, textStartY + 1.5 * fm.ascent()), readableFileSize_);
+}
diff --git a/src/timeline/widgets/FileItem.cc b/src/timeline/widgets/FileItem.cc
index 8d0100c7..e70be9da 100644
--- a/src/timeline/widgets/FileItem.cc
+++ b/src/timeline/widgets/FileItem.cc
@@ -29,6 +29,18 @@
 namespace events = matrix::events;
 namespace msgs   = matrix::events::messages;
 
+constexpr int MaxWidth           = 400;
+constexpr int Height             = 70;
+constexpr int IconRadius         = 22;
+constexpr int IconDiameter       = IconRadius * 2;
+constexpr int HorizontalPadding  = 12;
+constexpr int TextPadding        = 15;
+constexpr int DownloadIconRadius = IconRadius - 4;
+
+constexpr double VerticalPadding = Height - 2 * IconRadius;
+constexpr double IconYCenter     = Height / 2;
+constexpr double IconXCenter     = HorizontalPadding + IconRadius;
+
 void
 FileItem::init()
 {
diff --git a/src/timeline/widgets/VideoItem.cc b/src/timeline/widgets/VideoItem.cc
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/src/timeline/widgets/VideoItem.cc