Implement the menu for viewer

viewer/CMakeLists.txt

@@ -83,6 +83,15 @@ endif ()
 # collects pag include directories.
 set(PAG_VIEWER_INCLUDES ./ src ../ ../include ../src ../third_party/tgfx/include)
 file(GLOB_RECURSE PAG_VIEWER_SOURCE_FILES src/*.*)
+list(FILTER PAG_VIEWER_SOURCE_FILES EXCLUDE REGEX src/platform/*.*)
+if (APPLE)
+    list(APPEND PAG_VIEWER_INCLUDES src/platform/mac)
+    file(GLOB_RECURSE PLATFORM_SOURCE_FILES src/platform/mac/*.*)
+elseif (WIN32)
+    list(APPEND PAG_VIEWER_INCLUDES src/platform/win)
+    file(GLOB_RECURSE PLATFORM_SOURCE_FILES src/platform/win/*.*)
+endif ()
+list(APPEND PAG_VIEWER_SOURCE_FILES ${PLATFORM_SOURCE_FILES})
 
 set(PAG_USE_QT ON)
 set(PAG_USE_RTTR ON)

viewer/qml/AboutWindow.qml

@@ -0,0 +1,143 @@
+import QtQuick
+import QtQuick.Controls
+import "components"
+
+PAGWindow {
+    id: aboutWindow
+
+    property string aboutMessage: ""
+    property string licenseMessage: ""
+    property string privacyMessage: ""
+    property string licenseUrl: ""
+    property string privacyUrl: ""
+
+    minimumWidth: width
+    maximumWidth: width
+    minimumHeight: height
+    maximumHeight: height
+    hasMenu: false
+    canResize: false
+    titleBarHeight: isWindows ? 32 : 22
+
+    PAGRectangle {
+        id: rectangle
+
+        color: "#2D2D37"
+        anchors.fill: parent
+        leftTopRadius: false
+        rightTopRadius: false
+        radius: 5
+
+        Row {
+            anchors.fill: parent
+            Item {
+                width: 30
+                height: 1
+            }
+
+            Image {
+                id: image
+                width: 80
+                height: 80
+                sourceSize.width: 160
+                sourceSize.height: 160
+                anchors.verticalCenterOffset: 0
+                anchors.verticalCenter: parent.verticalCenter
+                fillMode: Image.PreserveAspectFit
+                source: "qrc:/images/window-icon.png"
+            }
+
+            Item {
+                width: 20
+                height: 1
+            }
+
+            Column {
+                spacing: 10
+                Item {
+                    width: 1
+                    height: 20
+                }
+                Text {
+                    id: aboutText
+                    color: "#ffffff"
+                    text: aboutMessage
+                    verticalAlignment: Text.AlignVCenter
+                    font.pixelSize: 12
+                }
+                Row {
+                    visible: licenseMessage !== "" || privacyMessage !== ""
+                    height: 25
+                    spacing: 15
+
+                    Text {
+                        id: licenseText
+                        visible: licenseUrl !== ""
+                        text: licenseMessage
+                        color: "#008EFF"
+                        verticalAlignment: Text.AlignVCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                        font.pixelSize: 13
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                Qt.openUrlExternally(licenseUrl);
+                            }
+                        }
+                    }
+
+                    Text {
+                        id: privacyText
+                        visible: privacyUrl !== ""
+                        text: privacyMessage
+                        color: "#008EFF"
+                        verticalAlignment: Text.AlignVCenter
+                        anchors.topMargin: 10
+                        anchors.bottomMargin: 10
+                        anchors.verticalCenter: parent.verticalCenter
+                        font.pixelSize: 13
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                Qt.openUrlExternally(privacyUrl);
+                            }
+                        }
+                    }
+                }
+
+                Row {
+                    spacing: 0
+                    Item {
+                        width: aboutWindow.width - 75 - 70 - 100
+                        height: 1
+                    }
+                    Button {
+                        id: btnOk
+                        width: 75
+                        height: 25
+                        font.pixelSize: 12
+                        text: qsTr("Confirm")
+                        onClicked: {
+                            aboutWindow.close();
+                        }
+
+                        background: Rectangle {
+                            radius: 3
+                            color: "#3485F6"
+                        }
+                        contentItem: Text {
+                            text: btnOk.text
+                            font: btnOk.font
+                            color: "#FFFFFF"
+                            anchors.fill: parent
+                            horizontalAlignment: Text.AlignHCenter
+                            verticalAlignment: Text.AlignVCenter
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

viewer/qml/Main.qml

@@ -1,9 +1,10 @@
 import PAG
 import QtCore
 import QtQuick
-import QtQuick.Window
-import Qt.labs.platform as Lab11
+import QtQuick.Dialogs
+import Qt.labs.settings
 import "components"
+import "utils"
 
 PAGWindow {
     id: viewWindow
@@ -12,6 +13,7 @@ PAGWindow {
     height: 360
     minimumWidth: 400 + windowPadding
     minimumHeight: 320 + windowTitleBarHeight
+    hasMenu: true
     resizeHandleSize: 5
     titleBarHeight: windowTitleBarHeight
 
@@ -30,6 +32,8 @@ PAGWindow {
 
         property bool isShowVideoFrames: true
 
+        property bool isUseEnglish: true
+
         property double lastX: 0
 
         property double lastY: 0
@@ -123,24 +127,71 @@ PAGWindow {
         }
     }
 
+    FileDialog {
+        id: openPAGFileDialog
+        visible: false
+        title: qsTr("Open PAG File")
+        fileMode: FileDialog.OpenFile
+        nameFilters: ["PAG files(*.pag)"]
+        onAccepted: {
+            let filePath = openPAGFileDialog.selectedFile;
+            mainForm.pagView.setFile(filePath);
+        }
+    }
+
+    SettingsWindow {
+        id: settingsWindow
+        visible: false
+        width: 500
+        height: 160 + windowTitleBarHeight
+        title: qsTr("Settings")
+        useEnglish: settings.isUseEnglish
+        onUseEnglishChanged: {
+            if (!settingsWindow.visible || settingsWindow.useEnglish === settings.isUseEnglish) {
+                return;
+            }
+            settings.isUseEnglish = settingsWindow.useEnglish;
+        }
+    }
+
+    AboutWindow {
+        id: aboutWindow
+        visible: false
+        width: settings.isUseEnglish ? 600 : 500
+        height: 160 + windowTitleBarHeight
+        title: qsTr("About PAGViewer")
+        aboutMessage: "<b>PAGViewer</b> " + Qt.application.version + "<br><br>Copyright © 2017-present Tencent. All rights reserved."
+    }
+
     Component.onCompleted: {
         viewWindow.title = "PAGViewer";
+
+        let component = Qt.createComponent("Menu.qml");
+        let menuBar = component.createObject(viewWindow, {
+            hasPAGFile: Qt.binding(function () {
+                return mainForm.hasPAGFile;
+            }),
+            windowActive: Qt.binding(function () {
+                return viewWindow.active;
+            }),
+            isUseEnglish: Qt.binding(function () {
+                return settings.isUseEnglish;
+            }),
+            isFullScreen: Qt.binding(function () {
+                return viewWindow.visibility === Window.FullScreen;
+            })
+        });
+        menuBar.command.connect(onCommand);
     }
 
     function updateProgress() {
         let duration = mainForm.pagView.duration;
         let displayedTime = duration * mainForm.pagView.progress;
-        mainForm.controlForm.timeDisplayedText.text = msToTime(displayedTime);
+        mainForm.controlForm.timeDisplayedText.text = Utils.msToTime(displayedTime);
         mainForm.controlForm.currentFrameText.text = mainForm.pagView.currentFrame;
         mainForm.controlForm.totalFrameText.text = mainForm.pagView.totalFrame;
     }
-    function msToTime(duration) {
-        let seconds = parseInt((duration / 1000) % 60);
-        let minutes = parseInt((duration / (1000 * 60)) % 60);
-        minutes = (minutes < 10) ? "0" + minutes : minutes;
-        seconds = (seconds < 10) ? "0" + seconds : seconds;
-        return minutes + ":" + seconds;
-    }
+
     function toggleBackground(checked) {
         if (checked === undefined) {
             checked = !mainForm.isBackgroundOn;
@@ -149,12 +200,82 @@ PAGWindow {
             mainForm.isBackgroundOn = checked;
         }
     }
+
     function toggleEditPanel(willOpen) {
         if (willOpen === undefined) {
-            willOpen = !mainForm.isEditPanelOpen;
+            willOpen = !settings.isEditPanelOpen;
         }
         if (mainForm.controlForm.panelsButton.checked !== willOpen) {
             mainForm.controlForm.panelsButton.checked = willOpen;
         }
+        settings.isEditPanelOpen = willOpen;
+    }
+
+    function onCommand(command) {
+        console.log(`Get command: [${command}]`);
+        switch (command) {
+        case "open-pag-file":
+            if (mainForm.hasPAGFile) {
+                let filePath = mainForm.pagView.filePath;
+                openPAGFileDialog.currentFolder = Utils.getFileDir(filePath);
+            } else {
+                openPAGFileDialog.currentFolder = StandardPaths.writableLocation(StandardPaths.DocumentsLocation);
+            }
+            openPAGFileDialog.open();
+            break;
+        case "close-window":
+            viewWindow.close();
+            break;
+        case "open-preferences":
+            settingsWindow.visible = true;
+            settingsWindow.raise();
+            break;
+        case "first-frame":
+            mainForm.pagView.firstFrame();
+            break;
+        case "last-frame":
+            mainForm.pagView.lastFrame();
+            break;
+        case "previous-frame":
+            mainForm.pagView.previousFrame();
+            break;
+        case "next-frame":
+            mainForm.pagView.nextFrame();
+            break;
+        case "pause-or-play":
+            mainForm.pagView.isPlaying = !mainForm.pagView.isPlaying;
+            break;
+        case "toggle-background":
+            toggleBackground();
+            break;
+        case "toggle-edit-panel":
+            toggleEditPanel();
+            break;
+        case "open-help":
+            Qt.openUrlExternally("https://pag.art/#pag-player");
+            break;
+        case "open-about":
+            aboutWindow.visible = true;
+            aboutWindow.raise();
+            break;
+        case "open-feedback":
+            Qt.openUrlExternally("https://github.com/Tencent/libpag/discussions");
+            break;
+        case "open-commerce-page":
+            Qt.openUrlExternally("https://pag.io/product.html#pag-enterprise-edition");
+            break;
+        case "minimize-window":
+            viewWindow.showMinimized();
+            break;
+        case "zoom-window":
+            viewWindow.visibility = viewWindow.visibility !== Window.Maximized ? Window.Maximized : Window.AutomaticVisibility;
+            break;
+        case "fullscreen-window":
+            viewWindow.visibility = viewWindow.visibility !== Window.Maximized ? Window.Maximized : Window.AutomaticVisibility;
+            break;
+        default:
+            console.log(`Undefined command: [${command}]`);
+            break;
+        }
     }
 }