For this tutorial series, we will be crafting a video collection manager and player using MauiKit.

We won’t cover any QML or C++ stuff, but rather fully focus on how to use MauiKit controls.

Cinema


https://invent.kde.org/camiloh/cinema

We want to play videos, manage, and list the collection of videos available in the system: allowing to tag, copy, delete and share the files.

For this app, we will have three main views:

  1. player: for playback and queue list
  2. collection: for seeing all the system video collection, also allows to sort and filter
  3. tags: to quickly browse and organize the files by favorites videos, recent videos, or arbitrary tagged videos.

References

The following images sources will work as an initial design iteration for our app.

When creating the UI, we will break down the needed elements and see what Kirigami, QQC2, or MauiKit controls can do the trick.

#dailyui #057 - Video Player player videoplayer html video player html player video player html video material design daily ui material ui materialui material

https://dribbble.com/shots/2748955–dailyui-057-Video-Player

Video Player Design dribbbler dribbblers video app videoplayer video webdesign uidesign appdesign affinitydesigner madeinaffinity dailyuichallenge dailyui057 dailyui

https://dribbble.com/shots/6422784-Video-Player-Design

Opkix-2.png

https://dribbble.com/shots/7076568-Opkix-App-Videos

Notes

For simplicity, we will use qmake to deploy the app on other platforms than GNU/Linux, and for GNU/Linux CMake.

In case we might need some KF5 libraries later on:

For Windows, you can make use of Craft, for macOS the Homebrew KDE repo, and Android, you can have the KDE Android docker image and extract the required library binaries.


Requirements, Tools & Deploy Environment

You will need to have Qt installed, Kirigami and MauiKit, and depending on where you are doing the deployment and where you intend to deploy the app the requirements may change, so this is a quick overview:

if you need more info, get in touch with us on telegram or leave a comment.

Linux

Depending on which distribution you use, the packages’ names will change.

For example, for an arch-based distro, these are some needed packages:

qt5-base qt5-declarative qt5-svg qt5-quickcontrols2 kio git cmake extra-cmake-modules

For Debian based, this is a complete dependency list:

ecm qtbase5-dev build-essential git gcc g++ qtdeclarative5-dev qml-module-qtquick-controls libqt5svg5-dev qtmultimedia5-dev automake cmake qtquickcontrols2-5-dev libkf5config-dev libkf5service-dev libkf5notifications-dev libkf5kiocore5 libkf5kio-dev qml-module-qtwebengine gettext extra-cmake-modules libkf5wallet-dev qtbase5-private-dev qtwebengine5-dev libkf5wallet-dev qt5-default qt5-default libqt5websockets5-dev libtag1-dev libkf5people-dev libkf5contacts-dev libkf5coreaddons-dev libgstreamer-plugins-bad1.0-dev gstreamer1.0-plugins-ugly gstreamer1.0-plugins-good

You will need to build MauiKit from source to keep up to date with the latest features:

git clone https://invent.kde.org/kde/mauikit

cd mauikit; mkdir build; cd build

cmake .. -DCMAKE_INSTALL_PREFIX=/usr

make

sudo make install

And you can use the Kirigami system-wide installation as it is.

macOS

Read the Qt guide to set up the Qt environment.

And in the source structure of our app directory, under 3rdparty, you will need to clone mauikit and kirigami sources, since it will be linked statically with the app.

Windows

Read the Qt guide to set up the Qt environment.

A recommendation is to use the Microsoft Visual compiler and Craft Qt binaries, if possible.

And in the source structure of our app directory, under 3rdparty, you will need to clone mauikit and kirigami sources, since it will be linked statically with the app.

Android

To deploy to an Android device, you will need to have Java, JDK 8, Android NDK, and SDK and Qt binaries for Android. With Qt Creator on the kit configures options, you just set the paths to all previous requirements.

And in the source structure of our app directory, under 3rdparty, you will need to clone mauikit and kirigami sources, since it will be linked statically with the app.

IOS

You need a developer free account, and the XCode to get the IOS SDK, and to be able to deploy it to the device.

Read the QT documentation instructions on it.

And in the source structure of our app directory, under 3rdparty, you will need to clone mauikit and kirigami sources, since it will be linked statically with the app.

Structure

We will have support for Windows, Android, macOS, and GNU/Linux; therefore, we will have some other directories for the specific platform integration files.

  • src //all the sources
    • assets //images, config files, extra fonts, etc...
    • views //the user interface app views
    • models //models that will populate our views, like recent videos and tagged videos and the collection view
    • controllers //backend utils for handling tasks like remote video playing, youtube integration, subtitles handling, video playback, frames capture, and other features
  • android_files //files needed for android, like the icon assets, manifest and java sources for system integration
  • windows_files //the metadata files for creating the executable using Qt windeploy tools
  • macos_files //the icon assets and files for system integration with macOS
  • ios_files //manifest, icon assets, and native source files for system integration
  • 3rdparty //libraries and frameworks used by the app when deploying it on a platforms like Windows, IOS, Android or macOS.
    • kirigami
    • mauikit

Episode 1

You can clone the app from the repo and read the descriptions about what MauiKit is doing.

Let’s start by setting up the entry point of the app in src/main.cpp

https://invent.kde.org/camiloh/cinema/-/blob/master/src/main.cpp

Let’s check if MauiKit and Kirigami will be statically linked or not. For Windows, macOS, IOS, and Android, that use statically linked mauikit and kirigami we will use the sources under 3rdparty/mauikit and 3rdpart/kirigami

#ifdef Q_OS_ANDROID
#include <QGuiApplication>
#else
#include <QApplication>
#endif

#ifdef STATIC_KIRIGAMI
#include "3rdparty/kirigami/src/kirigamiplugin.h"
#endif

#ifdef STATIC_MAUIKIT
#include "3rdparty/mauikit/src/mauikit.h"
#include "mauiapp.h"
#else
#include <MauiKit/mauiapp.h>
#endif

For Android, we need to check if the app has permissions to read from external storage and if not then request it, MAUIAndroid::checkRunTimePermissions() takes a list of permissions labels, for more permissions you can refer to the Android documentation:

#ifdef Q_OS_ANDROID
    QGuiApplication app(argc, argv);
    if (!MAUIAndroid::checkRunTimePermissions({"android.permission.WRITE_EXTERNAL_STORAGE"}))
        return -1;
#else
    QApplication app(argc, argv);
#endif

We will set the app information that will get picked up by the about dialogs, like name, organization, credits, icon, and extra info like a description, donation link, and website:

app.setApplicationName("cinema");
app.setApplicationVersion(CINEMA_VERSION_STRING);
app.setApplicationDisplayName("Cinema");
app.setOrganizationName("Maui");
app.setOrganizationDomain("org.maui.cinema");
app.setWindowIcon(QIcon(":/cinema.svg"));
MauiApp::instance()->setDescription("Video collection manager and player.");
MauiApp::instance()->setIconName("qrc:/cinema.svg");
MauiApp::instance()->setWebPage("https://mauikit.org");
MauiApp::instance()->setDonationPage("https://mauikit.org");
MauiApp::instance()->setReportPage("https://invent.kde.org/camiloh/cinema");
MauiApp::instance()->setCredits ({QVariantMap({{"name", "Camilo Higuita"}, {"email", "milo.h@aol.com"}, {"year", "2019-2020"}})});
MauiApp::instance()->setHandleAccounts(false);

For macOS, we can request to have the window controls to be drawn within the app:

#ifdef Q_OS_MACOS
   MAUIMacOS::removeTitlebarFromWindow();
#endif

Now let’s move on to the UI with src/main.qml, which is the file being loaded by the engine.

By now, this is what we have so far:

To implement the three views, we will use MauiKit control AppViews, and for each view a MauiKit Page, and we will enable CSD( client-side decorations) to achieve a more immersive UX when watching videos.

import org.kde.mauikit 1.0 as Maui
import org.kde.mauikit 1.1 as MauiLab
import QtQuick 2.10
import QtQuick.Controls 2.10
import org.kde.kirigami 2.8 as Kirigami
import QtQuick.Layouts 1.3

Maui.ApplicationWindow
{
    id: root

    Maui.App.enableCSD: true

    MauiLab.AppViews
    {
        id: _appViews
        anchors.fill: parent

        Maui.Page
        {
            id: _playerView
            MauiLab.AppView.title: qsTr("Player")
            MauiLab.AppView.iconName: qsTr("quickview")

            footBar.leftContent: ToolButton
            {
                icon.name: "media-playback-start"
            }

            footBar.middleContent: Slider
            {
                Layout.fillWidth: true
            }
        }

        Maui.Page
        {
            id: _collectionView
            MauiLab.AppView.title: qsTr("Collection")
            MauiLab.AppView.iconName: qsTr("folder-videos")
        }

        Maui.Page
        {
            id: _tagsView
            MauiLab.AppView.title: qsTr("Tags")
            MauiLab.AppView.iconName: qsTr("tag")
        }
    }
}

MauiKit will restore the window geometry on the desktop and set a default size by default for the first time, so no need to set the height or width of the ApplicationWindow explicitly, unless needed

Resulting with this:

And now, let’s organize the Player component a bit better, so we will use the following structure: PlayerView will have a Player control.

Player.qml will contain the player controls and do the playback, and the PlayerView will embed the Player and add extra functionality, like a queue list, possible dialogs, etc.

So now we have in src/views/player Player.qml and PlayerView.qml, so we will import that path in the main.qml and use it as the player app view:

...

import "views/player"

...

MauiLab.AppViews
{
        id: _appViews
        anchors.fill: parent

        PlayerView
        {
            id: _playerView
            MauiLab.AppView.title: qsTr("Player")
            MauiLab.AppView.iconName: qsTr("quickview")
            url: "file:///home/camilo/Videos/Marlene Dumas miss interpreted-veexrm7BLxQ.mp4"
        }

...
}

We are setting the player source URL to an arbitrary file for now.

Check the Player.qml for the simple video playback implementation, there we are using Qt built-in video player control, and some MauiKit utilities to transform the progress time to a more legible format.

So we now have this:

By using CSD and the floatingHeader and autoHideHeader, we are a bit closer to what we want:

So, what we can see in this quick first tutorial is how to use:

  • MauiKit app information,
  • AppViews control to handle the app views, and with the attached AppView properties, we can set the view title and icon.
  • MauiKit ToolBar to position elements into the left, right, or middle sides of the toolbar. (these toolbars become scrollable when the contents do not fit the available width)
  • The MauiKit Page, which by default has two MauiKit Toolbars in the header and footer named headBar and footBar, and the properties to tweak the Page toolbars behavior, like floatingHeader, floatingFooter and autohideHeader.
  • And also, we tested the CSD MauiKit implementation. Under Qt 5.14, to be able to drag the windows around, we can use the Alt key while dragging or resizing.
  • And some minor MauiKit function utilities like transform the time into a legible format

Next time we will use the MauiKit browsing views to implement the Collection view to browse the videos collection as a list with detailed information or as a grid view with thumbnails, and the backed templated model handlers, which make development quicker.

And also review integration details for mobile devices, on Android and Plasma Mobile

See you soon!

Join the discussion 2 Comments

Leave a Reply

© 2017-2020 Some Rights Reserved. Made with ♥ by Nitrux Latinoamericana S.C.