chaos/VideoPlayer
1
0
Fork 0
Code Activity

[UI] Reformatting + Niconico forward / back buttons (using YouTube's icons for now)

Browse source
This commit is contained in:
NamedKitten 2018-11-29 08:25:54 +00:00
parent bdea9ade90
commit a307a01eef
21 changed files with 427 additions and 377 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
format-code.sh
View file

@ -1,5 +1,5 @@
SOURCE_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null && pwd )"
pushd $SOURCE_DIR
qmlfmt -w src/qml/*.qml
qmlfmt -w src/qml/*.qml src/qml/*/*.qml
clang-format -style mozilla -i src/*
popd

4
src/qml/ControlsBar.qml
View file

@ -30,9 +30,7 @@ Item {
}
var component = Qt.createComponent(themeName + "ButtonLayout.qml")
component.createObject(controlsBar, {
"anchors.fill": controlsBar
})
component.createObject(controlsBar, {})
}
Item {

2
src/qml/Dialogs/PlaylistDialog.qml
View file

@ -15,7 +15,7 @@ Dialog {
Connections {
target: player
enabled: true
onPlaylistChanged: function(playlist) {
onPlaylistChanged: function (playlist) {
playlistModel.clear()
for (var thing in playlist) {
var item = playlist[thing]

4
src/qml/Items/ChapterMarkerItem.qml
View file

@ -10,7 +10,9 @@ Rectangle {
Connections {
target: player
enabled: true
onChaptersChanged: {chapterMarker.destroy()}
onChaptersChanged: {
chapterMarker.destroy()
}
}
width: 4

21
src/qml/NiconicoButtonLayout.qml
View file

@ -10,6 +10,7 @@ import player 1.0
Item {
objectName: "buttonLayout"
id: layout
anchors.fill: controlsBar
PlayPauseButton {
id: playPauseButton
@ -36,21 +37,37 @@ Item {
PlaylistPrevButton {
id: playlistPrevButton
anchors.right: timeLabel.left
anchors.right: backwardButton.left
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: 16
icon.width: 16
}
BackwardButton {
id: backwardButton
anchors.right: timeLabel.left
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: 32
icon.width: 32
}
TimeLabel {
id: timeLabel
anchors.centerIn: parent
anchors.top: parent.top
anchors.bottom: parent.bottom
}
ForwardButton {
id: forwardButton
anchors.left: timeLabel.right
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: 32
icon.width: 32
}
PlaylistNextButton {
id: playlistNextButton
anchors.left: timeLabel.right
anchors.left: forwardButton.right
anchors.top: parent.top
anchors.bottom: parent.bottom
icon.height: 16

20
src/qml/UIComponents/BackwardButton.qml Normal file
View file

@ -0,0 +1,20 @@
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.11
import QtQuick.Window 2.11
import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
id: backwardButton
icon.source: "icons/" + appearance.themeName + "/backward.svg"
icon.color: appearance.buttonColor
display: AbstractButton.IconOnly
onClicked: {
player.playerCommand(Enums.Commands.Seek, "-10")
}
background: Item {
}
}

20
src/qml/UIComponents/ForwardButton.qml Normal file
View file

@ -0,0 +1,20 @@
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.11
import QtQuick.Window 2.11
import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
id: forwardButton
icon.source: "icons/" + appearance.themeName + "/forward.svg"
icon.color: appearance.buttonColor
display: AbstractButton.IconOnly
onClicked: {
player.playerCommand(Enums.Commands.Seek, "10")
}
background: Item {
}
}

6
src/qml/UIComponents/FullscreenButton.qml
View file

@ -1,4 +1,4 @@
import QtQuick 2.11
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.11
@ -7,7 +7,7 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
Button {
id: fullscreenButton
//icon.name: "fullscreen"
icon.source: "icons/" + appearance.themeName + "/fullscreen.svg"
@ -21,4 +21,4 @@ import player 1.0
background: Item {
}
}
}

4
src/qml/UIComponents/PlayPauseButton.qml
View file

@ -7,7 +7,7 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
Button {
id: playPauseButton
icon.source: "icons/" + appearance.themeName + "/pause.svg"
icon.color: appearance.buttonColor
@ -29,4 +29,4 @@ import player 1.0
}
}
}
}
}

6
src/qml/UIComponents/PlaylistNextButton.qml
View file

@ -7,8 +7,7 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
Button {
id: playlistNextButton
//icon.name: "next"
icon.source: "icons/" + appearance.themeName + "/next.svg"
@ -19,5 +18,4 @@ import player 1.0
}
background: Item {
}
}
}

4
src/qml/UIComponents/PlaylistPrevButton.qml
View file

@ -7,7 +7,6 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
id: playlistPrevButton
objectName: "playlistPrevButton"
@ -27,11 +26,10 @@ Button {
if (appearance.themeName == "YouTube") {
if (position != 0) {
visible = true
} else {
visible = false
}
}
}
}
}
}

6
src/qml/UIComponents/SettingsButton.qml
View file

@ -1,4 +1,4 @@
import QtQuick 2.11
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.11
@ -7,7 +7,7 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
Button {
id: settingsButton
//icon.name: "settings"
icon.source: "icons/" + appearance.themeName + "/settings.svg"
@ -21,4 +21,4 @@ import player 1.0
}
background: Item {
}
}
}

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

@ -7,7 +7,7 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Text {
Text {
id: timeLabel
objectName: "timeLabel"
text: "0:00 / 0:00"
@ -24,4 +24,4 @@ import player 1.0
timeLabel.text = durationString
}
}
}
}

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

@ -7,7 +7,7 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Slider {
Slider {
id: progressBar
objectName: "progressBar"
to: 1
@ -63,7 +63,7 @@ import player 1.0
z: 1
onPositionChanged: {
var a = (progressBar.to / progressBar.width ) * mouseAreaProgressBar.mouseX
var a = (progressBar.to / progressBar.width) * mouseAreaProgressBar.mouseX
hoverProgressLabel.text = utils.createTimestamp(a)
}
}
@ -77,7 +77,6 @@ import player 1.0
fun.nyanCat, mouseAreaProgressBar.containsMouse)
color: appearance.progressBackgroundColor
Rectangle {
x: (mouseAreaProgressBar.mouseX - width / 2) + progressBar.leftPadding
y: progressBackground.y - 20 - height
@ -122,19 +121,16 @@ import player 1.0
Connections {
target: player
enabled: true
onChaptersChanged: function(chapters) {
onChaptersChanged: function (chapters) {
for (var i = 0, len = chapters.length; i < len; i++) {
var component = Qt.createComponent(
"ChapterMarker.qml")
var component = Qt.createComponent("ChapterMarker.qml")
var marker = component.createObject(chapterMarkers,
{
var marker = component.createObject(chapterMarkers, {
time: chapters[i]["time"]
})
}
}
}
}
Rectangle {
@ -166,7 +162,8 @@ import player 1.0
implicitWidth: radius
radius: 12 + (progressBackground.height / 2)
color: fun.nyanCat ? "transparent" : appearance.progressSliderColor
visible: getHandleVisibility(appearance.themeName, mouseAreaProgressBar.containsMouse)
visible: getHandleVisibility(appearance.themeName,
mouseAreaProgressBar.containsMouse)
AnimatedImage {
z: 80
visible: fun.nyanCat
@ -178,4 +175,4 @@ import player 1.0
fillMode: Image.PreserveAspectFit
}
}
}
}

9
src/qml/UIComponents/VolumeButton.qml
View file

@ -7,8 +7,7 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Button {
Button {
id: volumeButton
objectName: "volumeButton"
icon.source: "icons/" + appearance.themeName + "/volume-up.svg"
@ -22,9 +21,9 @@ import player 1.0
Connections {
target: player
enabled: true
onVolumeStatusChanged: function (status){
onVolumeStatusChanged: function (status) {
if (volumeButton == null)
console.log("OwO");
console.log("OwO")
if (status == Enums.VolumeStatus.Muted) {
volumeButton.icon.source = "qrc:/icons/" + appearance.themeName + "/volume-mute.svg"
@ -35,4 +34,4 @@ import player 1.0
}
}
}
}
}

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

@ -7,19 +7,16 @@ import Qt.labs.settings 1.0
import Qt.labs.platform 1.0 as LabsPlatform
import player 1.0
Slider {
Slider {
id: volumeBar
to: 100
value: 100
palette.dark: "#f00"
implicitWidth: Math.max(
background ? background.implicitWidth : 0,
implicitWidth: Math.max(background ? background.implicitWidth : 0,
(handle ? handle.implicitWidth : 0)
+ leftPadding + rightPadding)
implicitHeight: Math.max(
background ? background.implicitHeight : 0,
implicitHeight: Math.max(background ? background.implicitHeight : 0,
(handle ? handle.implicitHeight : 0)
+ topPadding + bottomPadding)
onMoved: {
@ -29,13 +26,12 @@ import player 1.0
Connections {
target: player
enabled: true
onVolumeChanged: function (volume){
onVolumeChanged: function (volume) {
volumeBar.value = volume
}
}
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
implicitWidth: 12
implicitHeight: 12
@ -59,5 +55,4 @@ import player 1.0
color: appearance.volumeSliderBackground
}
}
}
}

1
src/qml/YouTubeButtonLayout.qml
View file

@ -10,6 +10,7 @@ import player 1.0
Item {
objectName: "buttonLayout"
id: layout
anchors.fill: controlsBar
PlaylistPrevButton {
id: playlistPrevButton

1
src/qml/icons/Niconico/backward.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M24 10V2L14 12l10 10v-8c6.6 0 12 5.4 12 12s-5.4 12-12 12-12-5.4-12-12H8c0 8.8 7.2 16 16 16s16-7.2 16-16-7.2-16-16-16zm-2.2 22h-1.7v-6.5l-2 .6v-1.4l3.5-1.3h.2V32zm8.5-3.5c0 .6-.1 1.2-.2 1.6s-.3.8-.6 1.1-.6.5-.9.7-.7.2-1.2.2-.8-.1-1.2-.2-.7-.4-.9-.7-.5-.7-.6-1.1-.2-1-.2-1.6V27c0-.6.1-1.2.2-1.6s.3-.8.6-1.1.6-.5.9-.7.7-.2 1.2-.2.8.1 1.2.2.7.4.9.7.5.7.6 1.1.2 1 .2 1.6v1.5zm-1.6-1.7c0-.4 0-.7-.1-1s-.1-.5-.2-.6-.2-.3-.4-.3-.3-.1-.5-.1-.4 0-.5.1-.3.2-.4.3-.2.4-.2.6-.1.6-.1 1v1.9c0 .4 0 .7.1 1s.1.5.2.6.2.3.4.3.3.1.5.1.4 0 .5-.1.3-.2.4-.3.2-.4.2-.6.1-.6.1-1v-1.9z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 640 B

1
src/qml/icons/Niconico/forward.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M8 26c0 8.8 7.2 16 16 16s16-7.2 16-16h-4c0 6.6-5.4 12-12 12s-12-5.4-12-12 5.4-12 12-12v8l10-10L24 2v8c-8.8 0-16 7.2-16 16zm13.7 6H20v-6.5l-2 .6v-1.4l3.5-1.3h.2V32zm8.5-3.5c0 .6-.1 1.2-.2 1.6s-.3.8-.6 1.1-.6.5-.9.7-.7.2-1.2.2-.8-.1-1.2-.2-.7-.4-.9-.7-.5-.7-.6-1.1-.2-1-.2-1.6V27c0-.6.1-1.2.2-1.6s.3-.8.6-1.1.6-.5.9-.7.7-.2 1.2-.2.8.1 1.2.2.7.4.9.7.5.7.6 1.1.2 1 .2 1.6v1.5zm-1.7-1.7c0-.4 0-.7-.1-1s-.1-.5-.2-.6-.2-.3-.4-.3-.3-.1-.5-.1-.4 0-.5.1-.3.2-.4.3-.2.4-.2.6-.1.6-.1 1v1.9c0 .4 0 .7.1 1s.1.5.2.6.2.3.4.3.3.1.5.1.4 0 .5-.1.3-.2.4-.3.2-.4.2-.6.1-.6.1-1v-1.9z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 642 B

1
src/qml/main.qml
View file

@ -45,7 +45,6 @@ Window {
property string volumeSliderBackground: "white"
}
Settings {
id: i18n
category: "I18N"

4
src/qml/qml.qrc
View file

@ -6,6 +6,8 @@
<file>MainMenu.qml</file>
<file>YouTubeButtonLayout.qml</file>
<file>NiconicoButtonLayout.qml</file>
<file alias="ForwardButton.qml">UIComponents/ForwardButton.qml</file>
<file alias="BackwardButton.qml">UIComponents/BackwardButton.qml</file>
<file alias="PlaylistPrevButton.qml">UIComponents/PlaylistPrevButton.qml</file>
<file alias="PlayPauseButton.qml">UIComponents/PlayPauseButton.qml</file>
<file alias="VideoProgress.qml">UIComponents/VideoProgress.qml</file>
@ -45,6 +47,8 @@
<file>icons/Niconico/prev.svg</file>
<file>icons/Niconico/next.svg</file>
<file>icons/Niconico/fullscreen.svg</file>
<file>icons/Niconico/forward.svg</file>
<file>icons/Niconico/backward.svg</file>
<file>icons/nyancat.gif</file>
<file>icons/rainbow.png</file>
</qresource>