data/ui/qml/main.qml

   1
   2 import Qt 4.7
   3
   4 Rectangle {
   5     id: root
   6     color: "#" + config.background
   7     width: config.main_width
   8     height: config.main_height
   9
  10     MouseArea {
  11         anchors.fill: parent
  12         onClicked: openContextMenu()
  13     }
  14     function openContextMenu() {
  15         contextMenu.state = 'opened'
  16         contextMenu.items = [action_add_media, action_playlist, action_settings,
  17             action_play_one, action_save_playlist, action_clear_playlist, action_delete_bookmarks,
  18             action_timer, action_about, action_quit]
  19     }
  20     function openAboutDialog(items) {
  21         aboutDialog.state = 'opened'
  22         aboutDialog.items = items
  23     }
  24     function openPlaylist(open, items) {
  25         if (open)
  26             playlist.state = 'opened'
  27         playlist.items = items
  28     }
  29     function openPlaylistItemInfo(metadata) {
  30         playlistItemInfo.state = 'opened'
  31         playlistItemInfo.metadata = metadata
  32     }
  33     function openSettings() {
  34         settings.state = 'opened'
  35     }
  36     function openFilechooser(items, path, action) {
  37         filechooser.state = 'opened'
  38         filechooser.items = items
  39         filechooser.path = path
  40         if (action)
  41             filechooser.action = action
  42     }
  43     function openSleepTimer() {
  44         sleepTimer.state = 'opened'
  45     }
  46     function set_text_x() {
  47         if (cover.source == "") {
  48             artist.x = (config.main_width - artist.width) / 2
  49             album.x = (config.main_width - album.width) / 2
  50             title_rect.x = 5
  51             title_rect.width = config.main_width - 10
  52             title.x = (config.main_width - title.width) / 2
  53         }
  54         else {
  55             artist.x = config.cover_height + 5
  56             album.x = config.cover_height + 5
  57             title_rect.x = config.cover_height + 5
  58             title_rect.width = config.main_width - cover.width - 10
  59             title.x = 0
  60         }
  61     }
  62     function start_scrolling_timer(start) {
  63         if (start)
  64             timer_scrolling.start()
  65         else {
  66             timer_scrolling.stop()
  67             set_text_x()
  68         }
  69     }
  70     function scrolling_labels() {
  71         if (cover.source == "") {
  72             title.scrolling_width = config.main_width
  73             title.scrolling_margin = 5
  74         }
  75         else {
  76             title.scrolling_width = config.main_width - cover.width
  77             title.scrolling_margin = 5 + cover.width
  78         }
  79         if (title.width > title.scrolling_width) {
  80             if (title.direction) {
  81                 title.x = title.x - 1
  82                 if (title.width + 10 < title.scrolling_width - title.x)
  83                     title.direction = false
  84             }
  85             else {
  86                 title.x = title.x + 1
  87                 if (title.x > 5)
  88                     title.direction = true
  89             }
  90         }
  91     }
  92     Timer {
  93          id: timer_back
  94          interval: config.dual_delay
  95          running: false
  96          repeat: false
  97          onTriggered: button_back.image = "gtk-goto-first-ltr.png"
  98     }
  99     Timer {
 100          id: timer_forward
 101          interval: config.dual_delay
 102          running: false
 103          repeat: false
 104          onTriggered: button_forward.image = "gtk-goto-last-ltr.png"
 105     }
 106     Timer {
 107          id: timer_scrolling
 108          interval: 100
 109          running: false
 110          repeat: true
 111          onTriggered: scrolling_labels()
 112     }
 113     Image {
 114         id: cover
 115         x: 0
 116         y: 5
 117         width: config.cover_height
 118         height: config.cover_height
 119         sourceSize.width: config.cover_height
 120         sourceSize.height: config.cover_height
 121         smooth: true
 122         source: main.cover_string
 123
 124         MouseArea {
 125             anchors.fill: parent
 126             onClicked: {action_player_play.trigger()}
 127         }
 128     }
 129     Text {
 130         id: artist
 131         x: config.cover_height + 5
 132         y: config.cover_height / 4
 133         font.pixelSize: config.font_size + 1
 134         color: "#" + config.foreground
 135         text: main.artist_string
 136     }
 137     Text {
 138         id: album
 139         x: config.cover_height + 5
 140         y: (config.cover_height / 4) + config.font_size + 21
 141         font.pixelSize: config.font_size - 1
 142         color: "#" + config.foreground
 143         text: main.album_string
 144     }
 145     Rectangle {
 146         id: title_rect
 147         width: config.main_width - 10
 148         height: config.font_size + 3
 149         x: config.cover_height + 5
 150         y: (config.cover_height / 4) + ((config.font_size*2)) + 42
 151         color: "#" + config.background
 152         clip: true
 153         Text {
 154             id: title
 155             font.pixelSize: config.font_size + 1
 156             font.weight: Font.Bold
 157             color: "#" + config.foreground
 158             text: main.title_string
 159             property bool direction
 160             direction: true
 161             property int scrolling_width
 162             property int scrolling_margin
 163         }
 164     }
 165     Rectangle {
 166         id: progressBar
 167         x: 0
 168         y: config.main_height - config.button_height - config.progress_height - config.button_border_width
 169         width: config.main_width
 170         height: config.progress_height
 171         color: "#" + config.progress_bg_color
 172
 173         MouseArea {
 174             anchors.fill: parent
 175             onClicked: main.on_progress_clicked(mouseX / progressBar.width)
 176         }
 177         Rectangle {
 178             width: parent.width*main.progress
 179             color: "#" + config.progress_color
 180             clip: true
 181             anchors {
 182                 top: parent.top
 183                 bottom: parent.bottom
 184                 left: parent.left
 185             }
 186         }
 187     }
 188     Text {
 189         anchors.centerIn: progressBar
 190         color: "#" + config.foreground
 191         font.pixelSize: config.font_size
 192         text: main.time_string
 193         verticalAlignment: Text.AlignVCenter
 194     }
 195     AppButton {
 196         id: button_back
 197         x: 0
 198         y: config.main_height - config.button_height
 199         image: "media-skip-backward.png"
 200         onReleased: image = "media-skip-backward.png"
 201         onPressed: timer_back.start()
 202         onClicked: { if (timer_back.running == true) {
 203                          timer_back.stop()
 204                          action_player_rrewind.trigger()
 205                      }
 206                      else
 207                          action_player_skip_back.trigger()
 208                          image = "media-skip-backward.png"
 209         }
 210     }
 211     AppButton {
 212         x: config.button_width + config.button_border_width + 2
 213         y: config.main_height - config.button_height
 214         image: "media-seek-backward.png"
 215         onClicked: action_player_rewind.trigger()
 216     }
 217     AppButton {
 218         x: (config.button_width + config.button_border_width + 2) * 2
 219         y: config.main_height - config.button_height
 220         image: main.play_pause_icon_path
 221         onClicked: action_player_play.trigger()
 222     }
 223     AppButton {
 224         x: (config.button_width + config.button_border_width + 2) * 3
 225         y: config.main_height - config.button_height
 226         image: "media-seek-forward.png"
 227         onClicked: action_player_forward.trigger()
 228     }
 229     AppButton {
 230         id: button_forward
 231         x: (config.button_width + config.button_border_width + 2) * 4
 232         y: config.main_height - config.button_height
 233         image: "media-skip-forward.png"
 234         onReleased: image = "media-skip-forward.png"
 235         onPressed: timer_forward.start()
 236         onClicked: { if (timer_forward.running == true) {
 237                          timer_forward.stop()
 238                          action_player_fforward.trigger()
 239                      }
 240                      else
 241                          action_player_skip_forward.trigger()
 242                          image = "media-skip-forward.png"
 243         }
 244     }
 245     AppButton {
 246         x: (config.button_width + config.button_border_width + 2) * 5
 247         y: config.main_height - config.button_height
 248         image: "bookmark-new.png"
 249         onClicked: main.bookmark_callback()
 250     }
 251     ContextMenu {
 252         id: contextMenu
 253         width: parent.width
 254         opacity: 0
 255
 256         anchors {
 257             top: parent.top
 258             bottom: parent.bottom
 259         }
 260
 261         onClose: contextMenu.state = 'closed'
 262         //onResponse: controller.contextMenuResponse(index)
 263
 264         state: 'closed'
 265
 266         Behavior on opacity { NumberAnimation { duration: 300 } }
 267
 268         states: [
 269             State {
 270                 name: 'opened'
 271                 PropertyChanges {
 272                     target: contextMenu
 273                     opacity: 1
 274                 }
 275                 AnchorChanges {
 276                     target: contextMenu
 277                     anchors.right: root.right
 278                 }
 279             },
 280             State {
 281                 name: 'closed'
 282                 PropertyChanges {
 283                     target: contextMenu
 284                     opacity: 0
 285                 }
 286                 AnchorChanges {
 287                     target: contextMenu
 288                     anchors.right: root.left
 289                 }
 290                 StateChangeScript {
 291                     //script: controller.contextMenuClosed()
 292                 }
 293             }
 294         ]
 295
 296         transitions: Transition {
 297             AnchorAnimation { duration: 150 }
 298         }
 299     }
 300     AboutDialog {
 301         id: aboutDialog
 302         width: parent.width
 303         opacity: 0
 304
 305         anchors {
 306             top: parent.top
 307             bottom: parent.bottom
 308         }
 309         onClose: aboutDialog.state = 'closed'
 310         state: 'closed'
 311         Behavior on opacity { NumberAnimation { duration: 300 } }
 312
 313         states: [
 314             State {
 315                 name: 'opened'
 316                 PropertyChanges {
 317                     target: aboutDialog
 318                     opacity: 1
 319                 }
 320                 AnchorChanges {
 321                     target: aboutDialog
 322                     anchors.right: root.right
 323                 }
 324             },
 325             State {
 326                 name: 'closed'
 327                 PropertyChanges {
 328                     target: aboutDialog
 329                     opacity: 0
 330                 }
 331                 AnchorChanges {
 332                     target: aboutDialog
 333                     anchors.right: root.left
 334                 }
 335                 StateChangeScript {
 336                     //script: controller.contextMenuClosed()
 337                 }
 338             }
 339         ]
 340         transitions: Transition {
 341             AnchorAnimation { duration: 150 }
 342         }
 343     }
 344     Playlist {
 345         id: playlist
 346         width: parent.width
 347         opacity: 0
 348
 349         anchors {
 350             top: parent.top
 351             bottom: parent.bottom
 352         }
 353         onClose: playlist.state = 'closed'
 354         state: 'closed'
 355         Behavior on opacity { NumberAnimation { duration: 300 } }
 356
 357         states: [
 358             State {
 359                 name: 'opened'
 360                 PropertyChanges {
 361                     target: playlist
 362                     opacity: 1
 363                 }
 364                 AnchorChanges {
 365                     target: playlist
 366                     anchors.right: root.right
 367                 }
 368             },
 369             State {
 370                 name: 'closed'
 371                 PropertyChanges {
 372                     target: playlist
 373                     opacity: 0
 374                 }
 375                 AnchorChanges {
 376                     target: playlist
 377                     anchors.right: root.left
 378                 }
 379                 StateChangeScript {
 380                     //script: controller.contextMenuClosed()
 381                 }
 382             }
 383         ]
 384         transitions: Transition {
 385             AnchorAnimation { duration: 150 }
 386         }
 387     }
 388     PlaylistItemInfo {
 389         id: playlistItemInfo
 390         width: parent.width
 391         opacity: 0
 392
 393         anchors {
 394             top: parent.top
 395             bottom: parent.bottom
 396         }
 397         onClose: playlistItemInfo.state = 'closed'
 398         state: 'closed'
 399         Behavior on opacity { NumberAnimation { duration: 300 } }
 400
 401         states: [
 402             State {
 403                 name: 'opened'
 404                 PropertyChanges {
 405                     target: playlistItemInfo
 406                     opacity: 1
 407                 }
 408                 AnchorChanges {
 409                     target: playlistItemInfo
 410                     anchors.right: root.right
 411                 }
 412             },
 413             State {
 414                 name: 'closed'
 415                 PropertyChanges {
 416                     target: playlistItemInfo
 417                     opacity: 0
 418                 }
 419                 AnchorChanges {
 420                     target: playlistItemInfo
 421                     anchors.right: root.left
 422                 }
 423                 StateChangeScript {
 424                     //script: controller.contextMenuClosed()
 425                 }
 426             }
 427         ]
 428         transitions: Transition {
 429             AnchorAnimation { duration: 150 }
 430         }
 431     }
 432     Filechooser {
 433         id: filechooser
 434         width: parent.width
 435         opacity: 0
 436
 437         anchors {
 438             top: parent.top
 439             bottom: parent.bottom
 440         }
 441         onClose: filechooser.state = 'closed'
 442         state: 'closed'
 443         Behavior on opacity { NumberAnimation { duration: 300 } }
 444
 445         states: [
 446             State {
 447                 name: 'opened'
 448                 PropertyChanges {
 449                     target: filechooser
 450                     opacity: 1
 451                 }
 452                 AnchorChanges {
 453                     target: filechooser
 454                     anchors.right: root.right
 455                 }
 456             },
 457             State {
 458                 name: 'closed'
 459                 PropertyChanges {
 460                     target: filechooser
 461                     opacity: 0
 462                 }
 463                 AnchorChanges {
 464                     target: filechooser
 465                     anchors.right: root.left
 466                 }
 467                 StateChangeScript {
 468                     //script: controller.contextMenuClosed()
 469                 }
 470             }
 471         ]
 472         transitions: Transition {
 473             AnchorAnimation { duration: 150 }
 474         }
 475     }
 476     Settings {
 477         id: settings
 478         width: parent.width
 479         opacity: 0
 480
 481         anchors {
 482             top: parent.top
 483             bottom: parent.bottom
 484         }
 485         onClose: settings.state = 'closed'
 486         state: 'closed'
 487         Behavior on opacity { NumberAnimation { duration: 300 } }
 488
 489         states: [
 490             State {
 491                 name: 'opened'
 492                 PropertyChanges {
 493                     target: settings
 494                     opacity: 1
 495                 }
 496                 AnchorChanges {
 497                     target: settings
 498                     anchors.right: root.right
 499                 }
 500             },
 501             State {
 502                 name: 'closed'
 503                 PropertyChanges {
 504                     target: settings
 505                     opacity: 0
 506                 }
 507                 AnchorChanges {
 508                     target: settings
 509                     anchors.right: root.left
 510                 }
 511                 StateChangeScript {
 512                     //script: controller.contextMenuClosed()
 513                 }
 514             }
 515         ]
 516         transitions: Transition {
 517             AnchorAnimation { duration: 150 }
 518         }
 519     }
 520     SleepTimer {
 521         id: sleepTimer
 522         width: parent.width
 523         opacity: 0
 524
 525         anchors {
 526             top: parent.top
 527             bottom: parent.bottom
 528         }
 529         onClose: sleepTimer.state = 'closed'
 530         state: 'closed'
 531         Behavior on opacity { NumberAnimation { duration: 300 } }
 532
 533         states: [
 534             State {
 535                 name: 'opened'
 536                 PropertyChanges {
 537                     target: sleepTimer
 538                     opacity: 1
 539                 }
 540                 AnchorChanges {
 541                     target: sleepTimer
 542                     anchors.right: root.right
 543                 }
 544             },
 545             State {
 546                 name: 'closed'
 547                 PropertyChanges {
 548                     target: sleepTimer
 549                     opacity: 0
 550                 }
 551                 AnchorChanges {
 552                     target: sleepTimer
 553                     anchors.right: root.left
 554                 }
 555                 StateChangeScript {
 556                     //script: controller.contextMenuClosed()
 557                 }
 558             }
 559         ]
 560         transitions: Transition {
 561             AnchorAnimation { duration: 150 }
 562         }
 563     }
 564 }