Updates to "Getting Started" flow

src/appshell/appshell.qrc

@@ -23,7 +23,8 @@
         <file>qml/FirstLaunchSetup/ThemesPage.qml</file>
         <file>qml/FirstLaunchSetup/PlaybackPage.qml</file>
         <file>qml/FirstLaunchSetup/TutorialsPage.qml</file>
-        <file>qml/FirstLaunchSetup/resources/tutorials_placeholder.png</file>
+        <file>qml/FirstLaunchSetup/resources/placeholder.png</file>
+        <file>qml/FirstLaunchSetup/resources/VideoTutorials.png</file>
         <file>qml/Preferences/PreferencesPage.qml</file>
         <file>qml/Preferences/GeneralPreferencesPage.qml</file>
         <file>qml/Preferences/UpdatePreferencesPage.qml</file>

src/appshell/qml/FirstLaunchSetup/FirstLaunchSetupDialog.qml

@@ -34,7 +34,9 @@ StyledDialogView {
     contentWidth: 576
     contentHeight: 384
 
-    margins: 24
+    margins: 20
+
+    readonly property Page currentPage: pageLoader.item as Page
 
     FirstLaunchSetupModel {
         id: model
@@ -61,8 +63,8 @@ StyledDialogView {
 
     ColumnLayout {
         anchors.fill: parent
-        anchors.leftMargin: 24
-        anchors.rightMargin: 24
+        anchors.leftMargin: 28
+        anchors.rightMargin: 28
         spacing: 24
 
         PageIndicator {
@@ -72,6 +74,8 @@ StyledDialogView {
         }
 
         Loader {
+            id: pageLoader
+
             Layout.fillWidth: true
             Layout.fillHeight: true
             Layout.topMargin: -8
@@ -82,9 +86,8 @@ StyledDialogView {
             }
         }
 
-        Item {
-            Layout.fillWidth: true
-            height: childrenRect.height
+        RowLayout {
+            spacing: 12
 
             NavigationPanel {
                 id: buttonsNavigationPanel
@@ -96,27 +99,51 @@ StyledDialogView {
             }
 
             FlatButton {
-                anchors.left: parent.left
+                Layout.alignment: Qt.AlignLeft
 
                 text: qsTrc("global", "Back")
                 visible: model.canGoBack
 
                 navigation.name: "BackButton"
                 navigation.panel: buttonsNavigationPanel
-                navigation.column: 1
+                navigation.column: 3
 
                 onClicked: {
                     model.currentPageIndex--
                 }
             }
 
+            Item {
+                Layout.fillWidth: true // spacer
+            }
+
             FlatButton {
-                anchors.right: parent.right
+                id: extraButton
+
+                Layout.alignment: Qt.AlignRight
+
+                visible: root.currentPage ? Boolean(root.currentPage.extraButtonTitle) : false
+                accentButton: true
+
+                text: root.currentPage ? root.currentPage.extraButtonTitle : ""
+
+                navigation.name: "ExtraButton"
+                navigation.panel: buttonsNavigationPanel
+                navigation.column: 1
+
+                onClicked: {
+                    if (root.currentPage) {
+                        root.currentPage.extraButtonClicked()
+                    }
+                }
+            }
+
+            FlatButton {
+                Layout.alignment: Qt.AlignRight
 
                 text: model.canFinish ? qsTrc("appshell", "Finish")
-                                      : model.canSkip ? qsTrc("appshell", "Skip for now")
-                                                      : qsTrc("global", "Next")
-                accentButton: !model.canSkip
+                                      : qsTrc("global", "Next")
+                accentButton: !extraButton.visible
 
                 navigation.name: "NextButton"
                 navigation.panel: buttonsNavigationPanel

src/appshell/qml/FirstLaunchSetup/Page.qml

@@ -38,6 +38,9 @@ Item {
 
     property real titleContentSpacing: 24
 
+    property string extraButtonTitle: ""
+    signal extraButtonClicked()
+
     anchors.fill: parent
 
     Column {

src/appshell/qml/FirstLaunchSetup/PlaybackPage.qml

@@ -20,7 +20,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 import QtQuick 2.15
-import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtGraphicalEffects 1.15
 
 import MuseScore.Ui 1.0
 import MuseScore.UiComponents 1.0
@@ -28,5 +29,30 @@ import MuseScore.AppShell 1.0
 
 Page {
     title: qsTrc("appshell", "Playback")
-    explanation: qsTrc("appshell", "Enjoy better audio quality with one of our free sound libraries")
+    explanation: qsTrc("appshell", "Enjoy premium sounds for free with our Muse Symphony Orchestra library")
+
+    titleContentSpacing: 12
+
+    extraButtonTitle: qsTrc("appshell", "Download")
+
+    onExtraButtonClicked: {
+        console.log("NOT_IMPLEMENTED!")
+    }
+
+    Image {
+        id: image
+        anchors.fill: parent
+        fillMode: Image.PreserveAspectCrop
+        source: "resources/placeholder.png"
+        sourceSize: Qt.size(width * Screen.devicePixelRatio, height * Screen.devicePixelRatio)
+
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                width: image.width
+                height: image.height
+                radius: 3
+            }
+        }
+    }
 }

src/appshell/qml/FirstLaunchSetup/TutorialsPage.qml

@@ -20,6 +20,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 import QtQuick 2.15
+import QtQuick.Window 2.15
 import QtGraphicalEffects 1.15
 
 import MuseScore.Ui 1.0
@@ -36,7 +37,7 @@ Page {
         id: image
         anchors.fill: parent
         fillMode: Image.PreserveAspectCrop
-        source: "resources/tutorials_placeholder.png"
+        source: "resources/VideoTutorials.png"
         sourceSize: Qt.size(width * Screen.devicePixelRatio, height * Screen.devicePixelRatio)
 
         layer.enabled: true

src/appshell/view/firstlaunchsetup/firstlaunchsetupmodel.cpp

@@ -32,7 +32,7 @@ FirstLaunchSetupModel::FirstLaunchSetupModel(QObject* parent)
 {
     m_pages = {
         Page { "ThemesPage.qml", "musescore://home" },
-        Page { "PlaybackPage.qml", "musescore://home", /*canSkip*/ true },
+        Page { "PlaybackPage.qml", "musescore://home" },
         Page { "TutorialsPage.qml", "musescore://home?section=learn" }
     };
 }
@@ -56,7 +56,6 @@ QVariantMap FirstLaunchSetupModel::Page::toMap() const
 {
     return {
         { "url", url },
-        { "canSkip", canSkip }
     };
 }
 
@@ -79,15 +78,6 @@ bool FirstLaunchSetupModel::canGoForward() const
     return m_currentPageIndex < m_pages.size() - 1;
 }
 
-bool FirstLaunchSetupModel::canSkip() const
-{
-    if (m_currentPageIndex < 0 || m_currentPageIndex >= m_pages.size()) {
-        return false;
-    }
-
-    return m_pages.at(m_currentPageIndex).canSkip;
-}
-
 bool FirstLaunchSetupModel::canFinish() const
 {
     return m_currentPageIndex == m_pages.size() - 1;

src/appshell/view/firstlaunchsetup/firstlaunchsetupmodel.h

@@ -39,7 +39,6 @@ class FirstLaunchSetupModel : public QObject
 
     Q_PROPERTY(bool canGoBack READ canGoBack NOTIFY currentPageChanged)
     Q_PROPERTY(bool canGoForward READ canGoForward NOTIFY currentPageChanged)
-    Q_PROPERTY(bool canSkip READ canSkip NOTIFY currentPageChanged)
     Q_PROPERTY(bool canFinish READ canFinish NOTIFY currentPageChanged)
 
     INJECT(appshell, IAppShellConfiguration, configuration)
@@ -56,7 +55,6 @@ public:
 
     bool canGoBack() const;
     bool canGoForward() const;
-    bool canSkip() const;
     bool canFinish() const;
 
     Q_INVOKABLE bool askAboutClosingEarly();
@@ -73,7 +71,6 @@ private:
     struct Page {
         QString url;
         std::string backgroundUri;
-        bool canSkip = false;
 
         QVariantMap toMap() const;
     };