chaos/VideoPlayer
1
0
Fork 0
Code Activity

[UI] Made UI more scalable.

Browse source
This commit is contained in:
NamedKitten 2018-11-30 16:42:19 +00:00
parent 5a5674b832
commit 79493a1cba
8 changed files with 72 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/qml/ControlsBar.qml
View file

@ -75,7 +75,7 @@ Item {
color: "white" color: "white"
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
font.pixelSize: Screen.height / 24 font.pixelSize: mainWindow.virtualHeight / 24
font.family: appearance.fontName font.family: appearance.fontName
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
opacity: 1 opacity: 1
@ -112,13 +112,13 @@ Item {
Item { Item {
id: controlsBar id: controlsBar
height: controlsBar.visible ? Screen.height / 24 : 0 height: controlsBar.visible ? mainWindow.virtualHeight / 24 : 0
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: parent.width / 128 anchors.rightMargin: parent.width / 128
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: parent.width / 128 anchors.leftMargin: parent.width / 128
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 2 anchors.bottomMargin: 0
visible: controlsOverlay.controlsShowing visible: controlsOverlay.controlsShowing
VideoProgress { VideoProgress {
id: progressBar id: progressBar

9
src/qml/MainMenu.qml
View file

@ -11,7 +11,7 @@ import "codes.js" as LanguageCodes
MenuBar { MenuBar {
id: menuBar id: menuBar
//width: parent.width //width: parent.width
height: Screen.height / 32 height: mainWindow.virtualHeight / 32
function anythingOpen() { function anythingOpen() {
for (var i = 0, len = menuBar.count; i < len; i++) { for (var i = 0, len = menuBar.count; i < len; i++) {
if (menuBar.menuAt(i).opened) { if (menuBar.menuAt(i).opened) {
@ -145,7 +145,7 @@ MenuBar {
id: menuBarItemText id: menuBarItemText
text: menuBarItem.text text: menuBarItem.text
font.family: appearance.fontName font.family: appearance.fontName
font.pixelSize: 14 font.pixelSize: menuBar.height / 2
font.bold: menuBarItem.highlighted font.bold: menuBarItem.highlighted
opacity: 1 opacity: 1
color: menuBarItem.highlighted ? "#5a50da" : "white" color: menuBarItem.highlighted ? "#5a50da" : "white"
@ -496,11 +496,6 @@ MenuBar {
playlistDialog.open() playlistDialog.open()
} }
} }
}
CustomMenu {
id: aboutMenuBarItem
title: translate.getTranslation("ABOUT", i18n.language)
Action { Action {
text: translate.getTranslation("ABOUT_QT", i18n.language) text: translate.getTranslation("ABOUT_QT", i18n.language)
onTriggered: { onTriggered: {

39
src/qml/NiconicoButtonLayout.qml
View file

@ -16,18 +16,16 @@ Item {
id: playPauseButton id: playPauseButton
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
height: 16 icon.height: parent.height / 2
width: 26 icon.width: parent.height / 2
icon.height: 16
icon.width: 26
} }
VolumeButton { VolumeButton {
id: volumeButton id: volumeButton
anchors.left: playPauseButton.right anchors.left: playPauseButton.right
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.height: 16 icon.height: parent.height / 2
icon.width: 16 icon.width: parent.height / 2
} }
VolumeSlider { VolumeSlider {
anchors.left: volumeButton.right anchors.left: volumeButton.right
@ -40,16 +38,17 @@ Item {
anchors.right: backwardButton.left anchors.right: backwardButton.left
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.height: 16 icon.height: parent.height / 2
icon.width: 16 icon.width: parent.height / 2
} }
BackwardButton { BackwardButton {
id: backwardButton id: backwardButton
anchors.right: timeLabel.left anchors.right: timeLabel.left
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.height: 32 icon.height: parent.height / 2
icon.width: 32 icon.width: parent.height / 2
} }
TimeLabel { TimeLabel {
id: timeLabel id: timeLabel
@ -62,16 +61,18 @@ Item {
anchors.left: timeLabel.right anchors.left: timeLabel.right
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.height: 32 icon.height: parent.height / 2
icon.width: 32 icon.width: parent.height / 2
} }
PlaylistNextButton { PlaylistNextButton {
id: playlistNextButton id: playlistNextButton
anchors.left: forwardButton.right anchors.left: forwardButton.right
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.height: 16 icon.height: parent.height / 2
icon.width: 16 icon.width: parent.height / 2
} }
FullscreenButton { FullscreenButton {
@ -79,15 +80,17 @@ Item {
anchors.right: settingsButton.left anchors.right: settingsButton.left
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.height: 16 icon.height: parent.height / 2
icon.width: 16 icon.width: parent.height / 2
} }
SettingsButton { SettingsButton {
id: settingsButton id: settingsButton
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.height: 16 icon.height: parent.height / 2
icon.width: 16 icon.width: parent.height / 2
} }
} }

2
src/qml/UIComponents/TimeLabel.qml
View file

@ -14,7 +14,7 @@ Text {
color: "white" color: "white"
padding: 2 padding: 2
font.family: appearance.fontName font.family: appearance.fontName
font.pixelSize: 14 font.pixelSize: layout.height / 2.5
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
renderType: Text.NativeRendering renderType: Text.NativeRendering
Connections { Connections {

14
src/qml/UIComponents/VideoProgress.qml
View file

@ -32,7 +32,7 @@ Slider {
} }
function getProgressBarHeight(nyan, isMouse) { function getProgressBarHeight(nyan, isMouse) {
var x = Math.max(Screen.height / 256, fun.nyanCat ? 12 : 2) var x = fun.nyanCat ? mainWindow.virtualHeight / 64 : Screen.height / 380
if (appearance.themeName == "Niconico" && !fun.nyanCat) { if (appearance.themeName == "Niconico" && !fun.nyanCat) {
return x * 2 return x * 2
} else if (isMouse & !fun.nyanCat) { } else if (isMouse & !fun.nyanCat) {
@ -78,12 +78,12 @@ Slider {
color: appearance.progressBackgroundColor color: appearance.progressBackgroundColor
Rectangle { Rectangle {
x: (mouseAreaProgressBar.mouseX - width / 2) + progressBar.leftPadding x: (mouseAreaProgressBar.mouseX - hoverProgressLabel.width / 2)
y: progressBackground.y - 20 - height y: progressBackground.y - 20 - hoverProgressLabel.height
visible: mouseAreaProgressBar.containsMouse visible: mouseAreaProgressBar.containsMouse
color: appearance.mainBackground color: appearance.mainBackground
height: 20 height: hoverProgressLabel.height
width: 50 width: hoverProgressLabel.width
z: 80 z: 80
Text { Text {
id: hoverProgressLabel id: hoverProgressLabel
@ -91,7 +91,7 @@ Slider {
color: "white" color: "white"
padding: 2 padding: 2
font.family: appearance.fontName font.family: appearance.fontName
font.pixelSize: 14 font.pixelSize: mainWindow.virtualHeight / 50
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
renderType: Text.NativeRendering renderType: Text.NativeRendering
} }
@ -168,7 +168,7 @@ Slider {
z: 80 z: 80
visible: fun.nyanCat visible: fun.nyanCat
paused: progressBar.pressed paused: progressBar.pressed
height: 30 height: mainWindow.virtualHeight / 28
id: nyanimation id: nyanimation
anchors.centerIn: parent anchors.centerIn: parent
source: "qrc:/icons/nyancat.gif" source: "qrc:/icons/nyancat.gif"

10
src/qml/UIComponents/VolumeSlider.qml
View file

@ -33,9 +33,9 @@ Slider {
handle: Rectangle { handle: Rectangle {
x: volumeBar.leftPadding + volumeBar.visualPosition * (volumeBar.availableWidth - width) x: volumeBar.leftPadding + volumeBar.visualPosition * (volumeBar.availableWidth - width)
y: volumeBar.topPadding + volumeBar.availableHeight / 2 - height / 2 y: volumeBar.topPadding + volumeBar.availableHeight / 2 - height / 2
implicitWidth: 12 implicitWidth: height
implicitHeight: 12 implicitHeight: layout.height / 2.6
radius: 12 radius: height
visible: appearance.themeName == "Niconico" ? false : true visible: appearance.themeName == "Niconico" ? false : true
color: "#f6f6f6" color: "#f6f6f6"
border.color: "#f6f6f6" border.color: "#f6f6f6"
@ -44,8 +44,8 @@ Slider {
background: Rectangle { background: Rectangle {
x: volumeBar.leftPadding x: volumeBar.leftPadding
y: volumeBar.topPadding + volumeBar.availableHeight / 2 - height / 2 y: volumeBar.topPadding + volumeBar.availableHeight / 2 - height / 2
implicitWidth: appearance.themeName == "Niconico" ? 80 : 60 implicitWidth: layout.width / 11
implicitHeight: appearance.themeName == "Niconico" ? 4 : 3 implicitHeight: appearance.themeName == "Niconico" ? layout.height / 8 : layout.height / 10
width: volumeBar.availableWidth width: volumeBar.availableWidth
height: implicitHeight height: implicitHeight
color: appearance.progressBackgroundColor color: appearance.progressBackgroundColor

15
src/qml/YouTubeButtonLayout.qml
View file

@ -11,6 +11,7 @@ Item {
objectName: "buttonLayout" objectName: "buttonLayout"
id: layout id: layout
anchors.fill: controlsBar anchors.fill: controlsBar
height: parent.height
PlaylistPrevButton { PlaylistPrevButton {
id: playlistPrevButton id: playlistPrevButton
@ -18,18 +19,25 @@ Item {
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
width: visible ? playlistNextButton.width : 0 width: visible ? playlistNextButton.width : 0
icon.height: parent.height / 2
icon.width: parent.height / 2
} }
PlayPauseButton { PlayPauseButton {
id: playPauseButton id: playPauseButton
anchors.left: playlistPrevButton.right anchors.left: playlistPrevButton.right
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.height: parent.height / 2
icon.width: parent.height / 2
} }
PlaylistNextButton { PlaylistNextButton {
id: playlistNextButton id: playlistNextButton
anchors.left: playPauseButton.right anchors.left: playPauseButton.right
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.height: parent.height / 2
icon.width: parent.height / 2
} }
VolumeButton { VolumeButton {
@ -37,12 +45,15 @@ Item {
anchors.left: playlistNextButton.right anchors.left: playlistNextButton.right
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.height: parent.height / 2
icon.width: parent.height / 2
} }
VolumeSlider { VolumeSlider {
id: volumeSlider id: volumeSlider
anchors.left: volumeButton.right anchors.left: volumeButton.right
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
height: parent.height
} }
TimeLabel { TimeLabel {
anchors.left: volumeSlider.right anchors.left: volumeSlider.right
@ -55,11 +66,15 @@ Item {
anchors.right: fullscreenButton.left anchors.right: fullscreenButton.left
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.height: parent.height / 2
icon.width: parent.height / 2
} }
FullscreenButton { FullscreenButton {
id: fullscreenButton id: fullscreenButton
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.height: parent.height / 2
icon.width: parent.height / 2
} }
} }

21
src/qml/main.qml
View file

@ -15,6 +15,8 @@ Window {
visible: true visible: true
width: 720 width: 720
height: 480 height: 480
property int virtualHeight: Screen.height * appearance.scaleFactor
property int virtualWidth: Screen.width * appearance.scaleFactor
property bool onTop: false property bool onTop: false
@ -43,6 +45,7 @@ Window {
property string progressSliderColor: "red" property string progressSliderColor: "red"
property string chapterMarkerColor: "#fc0" property string chapterMarkerColor: "#fc0"
property string volumeSliderBackground: "white" property string volumeSliderBackground: "white"
property double scaleFactor: 1.0
} }
Settings { Settings {
@ -235,6 +238,19 @@ Window {
} }
} }
Action {
onTriggered: {
appearance.scaleFactor += 0.1
}
shortcut: "Ctrl+Shift+="
}
Action {
onTriggered: {
appearance.scaleFactor -= 0.1
}
shortcut: "Ctrl+Shift+-"
}
MouseArea { MouseArea {
id: mouseAreaPlayer id: mouseAreaPlayer
z: 1000 z: 1000
@ -315,11 +331,10 @@ Window {
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 10 anchors.leftMargin: 10
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
topPadding: 4 anchors.bottomMargin: 8
bottomPadding: 4
anchors.top: parent.top anchors.top: parent.top
font.family: appearance.fontName font.family: appearance.fontName
font.pixelSize: 14 font.pixelSize: menuBar.height - (anchors.bottomMargin + anchors.topMargin)
font.bold: true font.bold: true
opacity: 1 opacity: 1
visible: controlsOverlay.controlsShowing visible: controlsOverlay.controlsShowing