data/ui/qml/main.qml

   1
   2 import Qt 4.7
   3
   4 import 'config.js' as Config
   5
   6 Rectangle {
   7     id: root
   8     color: "#" + config.background
   9     width: config.main_width
  10     height: config.main_height
  11
  12     function openContextMenu(items) {
  13         contextMenu.state = 'opened'
  14         contextMenu.items = [action_add_file, action_add_folder,
  15             action_play_one, action_save_playlist, action_clear_playlist, action_delete_bookmarks,
  16             action_about, action_quit]
  17     }
  18     function openAboutDialog(items) {
  19         aboutDialog.state = 'opened'
  20         aboutDialog.items = items
  21     }
  22     function set_text_x() {
  23         if (cover.source == "") {
  24             artist.x = (config.main_width - artist.width) / 2
  25             album.x = (config.main_width - album.width) / 2
  26             title_rect.x = 5
  27             title_rect.width = config.main_width - 10
  28             title.x = (config.main_width - title.width) / 2
  29         }
  30         else {
  31             artist.x = config.cover_height + 5
  32             album.x = config.cover_height + 5
  33             title_rect.x = config.cover_height + 5
  34             title_rect.width = config.main_width - cover.width - 10
  35             title.x = 0
  36         }
  37     }
  38     function start_scrolling_timer(start) {
  39         if (start)
  40             timer_scrolling.start()
  41         else {
  42             timer_scrolling.stop()
  43             set_text_x()
  44         }
  45     }
  46     function scrolling_labels() {
  47         if (cover.source == "") {
  48             title.scrolling_width = config.main_width
  49             title.scrolling_margin = 5
  50         }
  51         else {
  52             title.scrolling_width = config.main_width - cover.width
  53             title.scrolling_margin = 5 + cover.width
  54         }
  55         if (title.width > title.scrolling_width) {
  56             if (title.direction) {
  57                 title.x = title.x - 1
  58                 if (title.width + 10 < title.scrolling_width - title.x)
  59                     title.direction = false
  60             }
  61             else {
  62                 title.x = title.x + 1
  63                 if (title.x > 5)
  64                     title.direction = true
  65             }
  66         }
  67     }
  68     Timer {
  69          id: timer_back
  70          interval: config.dual_delay
  71          running: false
  72          repeat: false
  73          onTriggered: image_back.source = "gtk-goto-first-ltr.png"
  74     }
  75     Timer {
  76          id: timer_forward
  77          interval: config.dual_delay
  78          running: false
  79          repeat: false
  80          onTriggered: image_forward.source = "gtk-goto-last-ltr.png"
  81     }
  82     Timer {
  83          id: timer_scrolling
  84          interval: 100
  85          running: false
  86          repeat: true
  87          onTriggered: scrolling_labels()
  88     }
  89     Image {
  90         id: cover
  91         x: 0
  92         y: 5
  93         width: config.cover_height
  94         height: config.cover_height
  95         sourceSize.width: config.cover_height
  96         sourceSize.height: config.cover_height
  97         smooth: true
  98         source: main.cover_string
  99
 100         MouseArea {
 101             anchors.fill: parent
 102             onClicked: {action_player_play.trigger()}
 103         }
 104     }
 105     Text {
 106         id: artist
 107         x: config.cover_height + 5
 108         y: config.cover_height / 4
 109         font.pixelSize: config.font_size + 1
 110         color: "#" + config.foreground
 111         text: main.artist_string
 112     }
 113     Text {
 114         id: album
 115         x: config.cover_height + 5
 116         y: (config.cover_height / 4) + config.font_size + 21
 117         font.pixelSize: config.font_size - 1
 118         color: "#" + config.foreground
 119         text: main.album_string
 120     }
 121     Rectangle {
 122         id: title_rect
 123         width: config.main_width - 10
 124         height: config.font_size + 3
 125         x: config.cover_height + 5
 126         y: (config.cover_height / 4) + ((config.font_size*2)) + 42
 127         color: "#" + config.background
 128         clip: true
 129         Text {
 130             id: title
 131             font.pixelSize: config.font_size + 1
 132             font.weight: Font.Bold
 133             color: "#" + config.foreground
 134             text: main.title_string
 135             property bool direction
 136             direction: true
 137             property int scrolling_width
 138             property int scrolling_margin
 139         }
 140     }
 141
 142     Rectangle {
 143         id: progressBar
 144         x: 0
 145         y: config.main_height - config.button_height - config.progress_height - config.button_border_width
 146         width: config.main_width
 147         height: config.progress_height
 148         color: "#" + config.progress_bg_color
 149
 150         MouseArea {
 151             anchors.fill: parent
 152             onClicked: main.on_progress_clicked(mouseX / progressBar.width)
 153             //onClicked: console.log(mouseX / progressBar.width)
 154         }
 155         Rectangle {
 156             color: "#" + config.progress_color
 157             clip: true
 158             anchors {
 159                 top: parent.top
 160                 bottom: parent.bottom
 161                 left: parent.left
 162             }
 163             width: parent.width*main.progress
 164         }
 165     }
 166     Text {
 167         anchors.centerIn: progressBar
 168         color: "#" + config.foreground
 169         font.pixelSize: config.font_size
 170         text: main.time_string
 171         verticalAlignment: Text.AlignVCenter
 172     }
 173     Rectangle {
 174         x: 0
 175         y: config.main_height - config.button_height
 176         color: "#" + config.button_color
 177         width: config.button_width
 178         height: config.button_height
 179         border.color: "#" + config.button_border_color
 180         border.width: config.button_border_width
 181         radius: 10
 182         smooth: true
 183
 184         Image {
 185         id: image_back
 186         anchors.centerIn: parent
 187         smooth: true
 188         source: "media-skip-backward.png"
 189         }
 190         MouseArea {
 191             anchors.fill: parent
 192             onReleased: image_back.source = "media-skip-backward.png"
 193             onPressed: timer_back.start()
 194             onClicked: { if (timer_back.running == true) {
 195                              timer_back.stop()
 196                              action_player_rrewind.trigger()
 197                          }
 198                          else
 199                              action_player_skip_back.trigger()
 200                              image_back.source = "media-skip-backward.png" }
 201         }
 202     }
 203     Rectangle {
 204         x: config.button_width + config.button_border_width + 2
 205         y: config.main_height - config.button_height
 206         color: "#" + config.button_color
 207         width: config.button_width
 208         height: config.button_height
 209         border.color: "#" + config.button_border_color
 210         border.width: config.button_border_width
 211         radius: 10
 212         smooth: true
 213
 214         Image {
 215         anchors.centerIn: parent
 216         smooth: true
 217         source: "media-seek-backward.png"
 218         }
 219         MouseArea {
 220             anchors.fill: parent
 221             onClicked: action_player_rewind.trigger()
 222         }
 223     }
 224     Rectangle {
 225         x: (config.button_width + config.button_border_width + 2) * 2
 226         y: config.main_height - config.button_height
 227         color: "#" + config.button_color
 228         width: config.button_width
 229         height: config.button_height
 230         border.color: "#" + config.button_border_color
 231         border.width: config.button_border_width
 232         radius: 10
 233         smooth: true
 234
 235         Image {
 236         id: player_play
 237         anchors.centerIn: parent
 238         smooth: true
 239         source: main.play_pause_icon_path
 240         }
 241         MouseArea {
 242             anchors.fill: parent
 243             onClicked: action_player_play.trigger()
 244         }
 245     }
 246     Rectangle {
 247         x: (config.button_width + config.button_border_width + 2) * 3
 248         y: config.main_height - config.button_height
 249         color: "#" + config.button_color
 250         width: config.button_width
 251         height: config.button_height
 252         border.color: "#" + config.button_border_color
 253         border.width: config.button_border_width
 254         radius: 10
 255         smooth: true
 256
 257         Image {
 258         anchors.centerIn: parent
 259         smooth: true
 260         source: "media-seek-forward.png"
 261         }
 262         MouseArea {
 263             anchors.fill: parent
 264             onClicked: action_player_forward.trigger()
 265         }
 266     }
 267     Rectangle {
 268         x: (config.button_width + config.button_border_width + 2) * 4
 269         y: config.main_height - config.button_height
 270         color: "#" + config.button_color
 271         width: config.button_width
 272         height: config.button_height
 273         border.color: "#" + config.button_border_color
 274         border.width: config.button_border_width
 275         radius: 10
 276         smooth: true
 277
 278         Image {
 279         id: image_forward
 280         anchors.centerIn: parent
 281         smooth: true
 282         source: "media-skip-forward.png"
 283         }
 284         MouseArea {
 285             anchors.fill: parent
 286             onReleased: image_forward.source = "media-skip-forward.png"
 287             onPressed: timer_forward.start()
 288             onClicked: { if (timer_forward.running == true) {
 289                              timer_forward.stop()
 290                              action_player_fforward.trigger()
 291                          }
 292                          else
 293                              action_player_skip_forward.trigger()
 294                              image_forward.source = "media-skip-forward.png" }
 295         }
 296     }
 297     Rectangle {
 298         x: (config.button_width + config.button_border_width + 2) * 5
 299         y: config.main_height - config.button_height
 300         color: "#" + config.button_color
 301         width: config.button_width
 302         height: config.button_height
 303         border.color: "#" + config.button_border_color
 304         border.width: config.button_border_width
 305         radius: 10
 306         smooth: true
 307
 308         Image {
 309         anchors.centerIn: parent
 310         smooth: true
 311         source: "bookmark-new.png"
 312         }
 313         MouseArea {
 314             anchors.fill: parent
 315             onClicked: action_bookmark.trigger()
 316         }
 317     }
 318     ContextMenu {
 319         id: contextMenu
 320         width: parent.width
 321         opacity: 0
 322
 323         anchors {
 324             top: parent.top
 325             bottom: parent.bottom
 326         }
 327
 328         onClose: contextMenu.state = 'closed'
 329         //onResponse: controller.contextMenuResponse(index)
 330
 331         state: 'closed'
 332
 333         Behavior on opacity { NumberAnimation { duration: Config.fadeTransition } }
 334
 335         states: [
 336             State {
 337                 name: 'opened'
 338                 PropertyChanges {
 339                     target: contextMenu
 340                     opacity: 1
 341                 }
 342                 AnchorChanges {
 343                     target: contextMenu
 344                     anchors.right: root.right
 345                 }
 346             },
 347             State {
 348                 name: 'closed'
 349                 PropertyChanges {
 350                     target: contextMenu
 351                     opacity: 0
 352                 }
 353                 AnchorChanges {
 354                     target: contextMenu
 355                     anchors.right: root.left
 356                 }
 357                 StateChangeScript {
 358                     //script: controller.contextMenuClosed()
 359                 }
 360             }
 361         ]
 362
 363         transitions: Transition {
 364             AnchorAnimation { duration: Config.slowTransition }
 365         }
 366     }
 367     AboutDialog {
 368         id: aboutDialog
 369         width: parent.width
 370         opacity: 0
 371
 372         anchors {
 373             top: parent.top
 374             bottom: parent.bottom
 375         }
 376         onClose: aboutDialog.state = 'closed'
 377         state: 'closed'
 378         Behavior on opacity { NumberAnimation { duration: Config.fadeTransition } }
 379
 380         states: [
 381             State {
 382                 name: 'opened'
 383                 PropertyChanges {
 384                     target: aboutDialog
 385                     opacity: 1
 386                 }
 387                 AnchorChanges {
 388                     target: aboutDialog
 389                     anchors.right: root.right
 390                 }
 391             },
 392             State {
 393                 name: 'closed'
 394                 PropertyChanges {
 395                     target: aboutDialog
 396                     opacity: 0
 397                 }
 398                 AnchorChanges {
 399                     target: aboutDialog
 400                     anchors.right: root.left
 401                 }
 402                 StateChangeScript {
 403                     //script: controller.contextMenuClosed()
 404                 }
 405             }
 406         ]
 407         transitions: Transition {
 408             AnchorAnimation { duration: Config.slowTransition }
 409         }
 410     }
 411 }