QmlDesigner: Add QtMultimedia

Add property editor sheets and item library entries for QtMultimedia.

Task-number: QDS-5147
Change-Id: Ic4fc2926e7bf5aa5376f3fd7b6b5e452034e4001
Reviewed-by: Qt CI Bot <qt_ci_bot@qt-project.org>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtMultimedia/AudioOutputSpecifics.qml

@@ -0,0 +1,37 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    AudioSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtMultimedia/AudioSection.qml

@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+Section {
+    caption: qsTr("Audio")
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    SectionLayout {
+        PropertyLabel { text: qsTr("Volume") }
+
+        SecondColumnLayout {
+            SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.volume
+                decimals: 1
+                minimumValue: 0.0
+                maximumValue: 1.0
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel { text: qsTr("Muted") }
+
+        SecondColumnLayout {
+            CheckBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.muted
+                text: backendValues.muted.valueToString
+            }
+
+            ExpandingSpacer {}
+        }
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtMultimedia/MediaPlayerSection.qml

@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+Section {
+    caption: qsTr("Media Player")
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    // TODO position property, what should be the range?!
+
+    SectionLayout {
+        PropertyLabel { text: qsTr("Playback rate") }
+
+        SecondColumnLayout {
+            SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.playbackRate
+                decimals: 1
+                minimumValue: -1000 // TODO correct range
+                maximumValue: 1000
+            }
+
+            ExpandingSpacer {}
+        }
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtMultimedia/MediaPlayerSpecifics.qml

@@ -0,0 +1,37 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    MediaPlayerSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtMultimedia/VideoSection.qml

@@ -0,0 +1,105 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+Section {
+    caption: qsTr("Video")
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    SectionLayout {
+        PropertyLabel { text: qsTr("Source") }
+
+        SecondColumnLayout {
+            UrlChooser {
+                backendValue: backendValues.source
+                filter: "*.mp4"
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel { text: qsTr("Fill mode") }
+
+        SecondColumnLayout {
+            ComboBox {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                scope: "VideoOutput"
+                model: ["Stretch", "PreserveAspectFit", "PreserveAspectCrop"]
+                backendValue: backendValues.fillMode
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel { text: qsTr("Orientation") }
+
+        SecondColumnLayout {
+            ComboBox {
+                id: orientationComboBox
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                model: [0, 90, 180, 270, 360]
+                backendValue: backendValues.orientation
+                manualMapping: true
+
+                onValueFromBackendChanged: {
+                    if (!orientationComboBox.__isCompleted)
+                        return
+
+                    orientationComboBox.syncIndexToBackendValue()
+                }
+                onCompressedActivated: {
+                    if (!orientationComboBox.__isCompleted)
+                        return
+
+                    if (orientationComboBox.block)
+                        return
+
+                    backendValues.orientation.value = orientationComboBox.model[orientationComboBox.currentIndex]
+                }
+                Component.onCompleted: orientationComboBox.syncIndexToBackendValue()
+
+                function syncIndexToBackendValue() {
+                    orientationComboBox.block = true
+                    orientationComboBox.currentIndex = orientationComboBox.model.indexOf(backendValues.orientation.value)
+                    orientationComboBox.block = false
+                }
+            }
+
+            ExpandingSpacer {}
+        }
+    }
+}
+

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtMultimedia/VideoSpecifics.qml

@@ -0,0 +1,41 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    MediaPlayerSection {}
+
+    VideoSection {}
+
+    AudioSection {}
+}

src/plugins/qmldesigner/qtquickplugin/qtquickplugin.qrc

@@ -31,6 +31,7 @@
         <file>images/text-edit-icon16.png</file>
         <file>images/text-input-icon16.png</file>
         <file>images/webview-icon16.png</file>
+        <file>source/audio.qml</file>
         <file>source/listview.qml</file>
         <file>source/listviewv2.qml</file>
         <file>source/gridview.qml</file>
@@ -83,5 +84,20 @@
         <file>images/loader-icon.png</file>
         <file>images/loader-icon@2x.png</file>
         <file>images/loader-icon16.png</file>
+        <file>images/audio-16px.png</file>
+        <file>images/audio-24px.png</file>
+        <file>images/audio-24px@2x.png</file>
+        <file>images/audio-output-16px.png</file>
+        <file>images/audio-output-24px.png</file>
+        <file>images/audio-output-24px@2x.png</file>
+        <file>images/media-player-16px.png</file>
+        <file>images/media-player-24px.png</file>
+        <file>images/media-player-24px@2x.png</file>
+        <file>images/video-16px.png</file>
+        <file>images/video-24px.png</file>
+        <file>images/video-24px@2x.png</file>
+        <file>images/video-output-16px.png</file>
+        <file>images/video-output-24px.png</file>
+        <file>images/video-output-24px@2x.png</file>
     </qresource>
 </RCC>

src/plugins/qmldesigner/qtquickplugin/quick.metainfo

@@ -501,4 +501,89 @@ MetaInfo {
             version: "2.0"
         }
     }
+
+    Type {
+        name: "QtMultimedia.MediaPlayer"
+        icon: ":/qtquickplugin/images/media-player-16px.png"
+
+        Hints {
+            visibleInNavigator: true
+            canBeDroppedInNavigator: true
+            canBeDroppedInFormEditor: false
+            canBeContainer: false
+        }
+
+        ItemLibraryEntry {
+            name: "Media Player"
+            category: "f.Qt Quick - Multimedia"
+            libraryIcon: ":/qtquickplugin/images/media-player-24px.png"
+            version: "6.0"
+            requiredImport: "QtMultimedia"
+        }
+    }
+
+    Type {
+        name: "QtMultimedia.MediaPlayer"
+        icon: ":/qtquickplugin/images/audio-16px.png"
+
+        Hints {
+            visibleInNavigator: true
+            canBeDroppedInNavigator: true
+            canBeDroppedInFormEditor: false
+            canBeContainer: false
+        }
+
+        ItemLibraryEntry {
+            name: "Audio"
+            category: "f.Qt Quick - Multimedia"
+            libraryIcon: ":/qtquickplugin/images/audio-24px.png"
+            version: "6.0"
+            requiredImport: "QtMultimedia"
+
+            QmlSource { source: ":/qtquickplugin/source/audio.qml" }
+        }
+    }
+
+    Type {
+        name: "QtMultimedia.AudioOutput"
+        icon: ":/qtquickplugin/images/audio-output-16px.png"
+
+        Hints {
+            visibleInNavigator: true
+            canBeDroppedInNavigator: true
+            canBeDroppedInFormEditor: false
+            canBeContainer: false
+        }
+
+        ItemLibraryEntry {
+            name: "Audio Output"
+            category: "f.Qt Quick - Multimedia"
+            libraryIcon: ":/qtquickplugin/images/audio-output-24px.png"
+            version: "6.0"
+            requiredImport: "QtMultimedia"
+        }
+    }
+
+    Type {
+        name: "QtMultimedia.Video"
+        icon: ":/qtquickplugin/images/video-16px.png"
+
+        Hints {
+            visibleInNavigator: true
+            canBeDroppedInNavigator: true
+            canBeDroppedInFormEditor: true
+            canBeContainer: false
+        }
+
+        ItemLibraryEntry {
+            name: "Video"
+            category: "f.Qt Quick - Multimedia"
+            libraryIcon: ":/qtquickplugin/images/video-24px.png"
+            version: "6.0"
+            requiredImport: "QtMultimedia"
+
+            Property { name: "width"; type: "int"; value: 200; }
+            Property { name: "height"; type: "int"; value: 200; }
+        }
+    }
 }

src/plugins/qmldesigner/qtquickplugin/source/audio.qml

@@ -0,0 +1,35 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtMultimedia 6.0
+
+MediaPlayer {
+    audioOutput: output
+
+    AudioOutput {
+        id: output
+    }
+}