youtube-voice-application/ui/CategoryBoxSearchView.qml

0001 /*
0002  *  Copyright 2018 by Aditya Mehra <aix.m@outlook.com>
0003  *
0004  *  This program is free software: you can redistribute it and/or modify
0005  *  it under the terms of the GNU General Public License as published by
0006  *  the Free Software Foundation, either version 3 of the License, or
0007  *  (at your option) any later version.
0008
0009  *  This program is distributed in the hope that it will be useful,
0010  *  but WITHOUT ANY WARRANTY; without even the implied warranty of
0011  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
0012  *  GNU General Public License for more details.
0013
0014  *  You should have received a copy of the GNU General Public License
0015  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
0016  */
0017
0018 import QtQuick 2.9
0019 import QtQuick.Layouts 1.4
0020 import QtGraphicalEffects 1.0
0021 import QtQuick.Controls 2.3
0022 import org.kde.kirigami 2.8 as Kirigami
0023 import Mycroft 1.0 as Mycroft
0024 import "+android/views" as Views
0025 import "+android/delegates" as Delegates
0026
0027 Item {
0028     property var searchListModel: sessionData.searchListBlob.videoList
0029     Layout.fillWidth: true
0030     Layout.fillHeight: true
0031
0032     onFocusChanged: {
0033         if(focus){
0034             searchBarArea.forceActiveFocus()
0035         }
0036     }
0037
0038     function searchYoutubeLiveResults(query){
0039         triggerGuiEvent("YoutubeSkill.SearchLive", {"Query": query})
0040     }
0041
0042     Rectangle {
0043         id: searchBarArea
0044         anchors.top: parent.top
0045         anchors.topMargin: Kirigami.Units.largeSpacing
0046         height: Kirigami.Units.gridUnit * 3
0047         anchors.left: parent.left
0048         anchors.right: parent.right
0049         anchors.leftMargin: Kirigami.Units.gridUnit
0050         anchors.rightMargin: Kirigami.Units.gridUnit
0051         radius: 12
0052         color: searchBarArea.activeFocus ? Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.95) : Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.95)
0053
0054         Keys.onReturnPressed: {
0055             videoQueryBox.forceActiveFocus()
0056         }
0057
0058         KeyNavigation.up: searchCatButton
0059         KeyNavigation.down: searchGridView
0060
0061         RowLayout {
0062             anchors.fill: parent
0063             TextField {
0064                 id: videoQueryBox
0065                 Layout.leftMargin: Kirigami.Units.largeSpacing
0066                 Layout.fillWidth: true
0067                 placeholderText: "Search here..."
0068                 Layout.fillHeight: true
0069                 onAccepted: {
0070                     searchYoutubeLiveResults(videoQueryBox.text)
0071                 }
0072                 KeyNavigation.down: searchGridView
0073                 KeyNavigation.right: searchVideoQuery
0074             }
0075
0076             Kirigami.Icon {
0077                 id: searchVideoQuery
0078                 Layout.preferredWidth: Kirigami.Units.gridUnit * 2
0079                 Layout.fillHeight: true
0080                 source: "search"
0081                 KeyNavigation.left: videoQueryBox
0082                 KeyNavigation.down: searchGridView
0083
0084                 Keys.onReturnPressed: {
0085                     searchYoutubeLiveResults(videoQueryBox.text)
0086                 }
0087
0088                 MouseArea {
0089                     anchors.fill: parent
0090                     onClicked: {
0091                         searchYoutubeLiveResults(videoQueryBox.text)
0092                     }
0093                 }
0094
0095                 ColorOverlay {
0096                     anchors.fill: parent
0097                     source: searchVideoQuery
0098                     color: Kirigami.Theme.highlightColor
0099                     visible: searchVideoQuery.activeFocus ? 1 : 0
0100                 }
0101             }
0102         }
0103     }
0104
0105     Views.BigTileView {
0106         id: searchGridView
0107         anchors {
0108             top: searchBarArea.bottom
0109             left: parent.left
0110             right: parent.right
0111             bottom: parent.bottom
0112             topMargin: Kirigami.Units.largeSpacing
0113         }
0114         focus: true
0115         model: searchListModel
0116         Layout.fillWidth: true
0117         Layout.fillHeight: true
0118         cellWidth: view.width / 4
0119         // FIXME: componentize more all this stuff
0120         cellHeight: cellWidth / 1.8 + Kirigami.Units.gridUnit * 5
0121         title: count > 0 ? "Search Results" : " "
0122         delegate: Delegates.ListVideoCard {
0123             width: searchGridView.cellWidth
0124             height: searchGridView.cellHeight
0125         }
0126
0127         KeyNavigation.up: searchBarArea
0128     }
0129 }