diff --git a/package-lock.json b/package-lock.json
index 87a03367..9cb391da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12605,9 +12605,9 @@
}
},
"node-html-parser": {
- "version": "2.0.2",
- "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-2.0.2.tgz",
- "integrity": "sha512-N2000Ho9dkabvRZcyiwm6zOpdiAzxAxcJ0Z0WNoh/yXHG0YCuiK2WpNQfN+9vheLNY/h/It11Gk7uwT4QTfk9Q==",
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-2.1.0.tgz",
+ "integrity": "sha512-kbCNfqjrwHAbG+mevL8aqjwVtF0Qv66XurWHoGLOc5G9rPR1L3k602jfeczAUUBldLNnCrdsDmO5G5nqAoMW+g==",
"requires": {
"he": "1.2.0"
}
@@ -19211,9 +19211,9 @@
}
},
"yt-channel-info": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/yt-channel-info/-/yt-channel-info-1.2.0.tgz",
- "integrity": "sha512-ozNDuCjDeTkr9HcLSIypcW8gehVSsbZv4JwD1eFmhvRllG0xPccWp9hr6qPakn1TiWFUTURpV6VnT/xz1c5wkA==",
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/yt-channel-info/-/yt-channel-info-1.2.2.tgz",
+ "integrity": "sha512-nhexkiT1GYE8Oeo3vjSmUyT9Z1ymwc6XD9BAddUPIJJRhVpVytxefMhiysAmgo4QSie8It4aNZDaqpT43s+2wA==",
"requires": {
"axios": "^0.21.1",
"querystring": "^0.2.0"
@@ -19228,16 +19228,16 @@
}
},
"follow-redirects": {
- "version": "1.13.1",
- "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
- "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg=="
+ "version": "1.13.2",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.2.tgz",
+ "integrity": "sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA=="
}
}
},
"yt-comment-scraper": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/yt-comment-scraper/-/yt-comment-scraper-2.0.0.tgz",
- "integrity": "sha512-goa9Z5REPXRKddKO6MJUzaa/cBgdQPj/akIGbyb1R5KnOgl4bLy6d4nD1pVUhLkP0Z8aEqwJAMmYpPBjeXTOIg==",
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/yt-comment-scraper/-/yt-comment-scraper-3.0.1.tgz",
+ "integrity": "sha512-tRWMve+V09Tw2FpZ9dg1Nkh23uVniQGeAKzAOLfKSHmAHZF/f+4bJ/LK/oYnAj26oH034gu9Lmyy+tapAYTjiQ==",
"requires": {
"axios": "^0.21.1",
"node-html-parser": "^2.0.2"
@@ -19252,9 +19252,9 @@
}
},
"follow-redirects": {
- "version": "1.13.1",
- "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
- "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg=="
+ "version": "1.13.2",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.2.tgz",
+ "integrity": "sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA=="
}
}
},
@@ -19314,9 +19314,9 @@
"integrity": "sha512-4ZzqHIUfdPFa0Xb+8M3vsbokXooOhQuFuXa8bw4CJ5V0xWjRA/CPlZ3u0VTYoce4sUmMgoOVN7Xcj8NpUNujXA=="
},
"ytdl-core": {
- "version": "4.4.4",
- "resolved": "https://registry.npmjs.org/ytdl-core/-/ytdl-core-4.4.4.tgz",
- "integrity": "sha512-/IFJTM5RjN20q6RVaE/9rv9tKoBtx95lKZCI/pUPDiDzu9fXyuPbkVzEQJmsYEwzi0zdv4d6iJy0gHWz49o6mw==",
+ "version": "4.4.5",
+ "resolved": "https://registry.npmjs.org/ytdl-core/-/ytdl-core-4.4.5.tgz",
+ "integrity": "sha512-/ugilIF2PskxNfQgkYZ/esvkp+fiB/mOPdIExW/En+1QTbq5VeTVqgf2hETTen0Co2lHMM4eRxPaczDHTmkb7A==",
"requires": {
"m3u8stream": "^0.8.3",
"miniget": "^4.0.0",
@@ -19333,9 +19333,9 @@
}
},
"miniget": {
- "version": "4.1.0",
- "resolved": "https://registry.npmjs.org/miniget/-/miniget-4.1.0.tgz",
- "integrity": "sha512-kzhrNv5L7LlomwGmPGQsLQ2PnT1LeJJWfB0wNFGyv426gEM1gsfziBQmfkr6XOBA8EusZg9nowlNT5CbuKTjZg=="
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/miniget/-/miniget-4.2.0.tgz",
+ "integrity": "sha512-IzTOaNgBw/qEpzkPTE7X2cUVXQfSKbG8w52Emi93zb+Zya2ZFrbmavpixzebuDJD9Ku4ecbaFlC7Y1cEESzQtQ=="
},
"sax": {
"version": "1.2.4",
@@ -19345,32 +19345,32 @@
}
},
"ytpl": {
- "version": "2.0.4",
- "resolved": "https://registry.npmjs.org/ytpl/-/ytpl-2.0.4.tgz",
- "integrity": "sha512-lXm3LvFvs2RixD6PTDay5jXRhaMSo/Upw7P60/FgQFvNrgSYRwMpR3nB1v3scu84R2XcS6kuENhPD2M4x/920A==",
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/ytpl/-/ytpl-2.0.5.tgz",
+ "integrity": "sha512-8hc+f3pijaogj1yoZTCGImMDS4x0ogFPDsx1PefNQ+2EAhJMm1K4brcYT9zpJhPi9SXh+O103pEIHDw3+dAhxA==",
"requires": {
"miniget": "^4.1.0"
},
"dependencies": {
"miniget": {
- "version": "4.1.0",
- "resolved": "https://registry.npmjs.org/miniget/-/miniget-4.1.0.tgz",
- "integrity": "sha512-kzhrNv5L7LlomwGmPGQsLQ2PnT1LeJJWfB0wNFGyv426gEM1gsfziBQmfkr6XOBA8EusZg9nowlNT5CbuKTjZg=="
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/miniget/-/miniget-4.2.0.tgz",
+ "integrity": "sha512-IzTOaNgBw/qEpzkPTE7X2cUVXQfSKbG8w52Emi93zb+Zya2ZFrbmavpixzebuDJD9Ku4ecbaFlC7Y1cEESzQtQ=="
}
}
},
"ytsr": {
- "version": "3.2.2",
- "resolved": "https://registry.npmjs.org/ytsr/-/ytsr-3.2.2.tgz",
- "integrity": "sha512-0Yt00R/LfP2tlPos6xCLazdkSJYfTD15VY/2oqbZvS0Ym8+4rMyXRg0AWJlmCJIhPsTPzc1nDjZvhDo/6A0/WA==",
+ "version": "3.2.4",
+ "resolved": "https://registry.npmjs.org/ytsr/-/ytsr-3.2.4.tgz",
+ "integrity": "sha512-DyhaGgp1j3szmC2+C+eGnkebauhqowHjbdTbS2h6hXSb8n3Cr6qQzynTqTnO9xF/6WOesgSLG6+Il00hOFQLUg==",
"requires": {
"miniget": "^4.1.0"
},
"dependencies": {
"miniget": {
- "version": "4.1.0",
- "resolved": "https://registry.npmjs.org/miniget/-/miniget-4.1.0.tgz",
- "integrity": "sha512-kzhrNv5L7LlomwGmPGQsLQ2PnT1LeJJWfB0wNFGyv426gEM1gsfziBQmfkr6XOBA8EusZg9nowlNT5CbuKTjZg=="
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/miniget/-/miniget-4.2.0.tgz",
+ "integrity": "sha512-IzTOaNgBw/qEpzkPTE7X2cUVXQfSKbG8w52Emi93zb+Zya2ZFrbmavpixzebuDJD9Ku4ecbaFlC7Y1cEESzQtQ=="
}
}
},
diff --git a/package.json b/package.json
index 26b8dc16..faac5cba 100644
--- a/package.json
+++ b/package.json
@@ -46,14 +46,14 @@
"xml2json": "^0.12.0",
"youtube-chat": "^1.1.0",
"youtube-suggest": "^1.1.0",
- "yt-channel-info": "^1.2.0",
- "yt-comment-scraper": "^2.0.0",
+ "yt-channel-info": "^1.2.2",
+ "yt-comment-scraper": "^3.0.0",
"yt-dash-manifest-generator": "1.1.0",
"yt-trending-scraper": "1.1.0",
"yt-xml2vtt": "^1.2.0",
- "ytdl-core": "^4.4.4",
- "ytpl": "^2.0.4",
- "ytsr": "^3.2.2"
+ "ytdl-core": "^4.4.5",
+ "ytpl": "^2.0.5",
+ "ytsr": "^3.2.4"
},
"description": "A private YouTube client",
"devDependencies": {
diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index a87b3605..293178fa 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -82,3 +82,27 @@
.forceTextColor .inputAction:active {
background-color: var(--primary-color-active);
}
+
+.list {
+ position: absolute;
+ width: 100%;
+ list-style: none;
+ margin: 0;
+ padding: 5px 0;
+ z-index: 10;
+ border-radius: 0 0 5px 5px;
+ border: 1px #ccc solid;
+ background-color: white;
+ color: black;
+}
+
+.list li {
+ display: block;
+ padding: 0px 15px;
+ line-height: 2rem;
+}
+
+.hover {
+ background-color: #ccc;
+/* color: white; */
+}
diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
index 3b845d36..9ff3b1fb 100644
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/src/renderer/components/ft-input/ft-input.js
@@ -43,7 +43,12 @@ export default Vue.extend({
data: function () {
return {
id: '',
- inputData: ''
+ inputData: '',
+ searchState: {
+ showOptions: false,
+ selectedOption: -1,
+ isPointerInList: false
+ }
}
},
computed: {
@@ -72,10 +77,15 @@ export default Vue.extend({
},
methods: {
handleClick: function () {
+ this.searchState.showOptions = false
+ this.$emit('input', this.inputData)
this.$emit('click', this.inputData)
},
handleInput: function () {
+ if (this.isSearch &&
+ this.searchState.selectedOption !== -1 &&
+ this.inputData === this.dataList[this.searchState.selectedOption]) { return }
this.$emit('input', this.inputData)
},
@@ -89,6 +99,37 @@ export default Vue.extend({
}
})
}
+ },
+
+ handleOptionClick: function (index) {
+ this.searchState.showOptions = false
+ this.inputData = this.dataList[index]
+ this.$emit('input', this.inputData)
+ this.handleClick()
+ },
+
+ handleKeyDown: function (keyCode) {
+ if (this.dataList.length === 0) { return }
+
+ // Update selectedOption based on arrow key pressed
+ if (keyCode === 40) {
+ this.searchState.selectedOption = (this.searchState.selectedOption + 1) % this.dataList.length
+ } else if (keyCode === 38) {
+ if (this.searchState.selectedOption === -1) {
+ this.searchState.selectedOption = this.dataList.length - 1
+ } else {
+ this.searchState.selectedOption--
+ }
+ } else {
+ this.searchState.selectedOption = -1
+ }
+
+ // Update Input box value if arrow keys were pressed
+ if ((keyCode === 40 || keyCode === 38) && this.searchState.selectedOption !== -1) { this.inputData = this.dataList[this.searchState.selectedOption] }
+ },
+
+ handleInputBlur: function () {
+ if (!this.searchState.isPointerInList) { this.searchState.showOptions = false }
}
}
})
diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index 4e461a62..1d7224cc 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@@ -27,6 +27,9 @@
:placeholder="placeholder"
:disabled="disabled"
@input="e => handleInput(e.target.value)"
+ @focus="searchState.showOptions = true"
+ @blur="handleInputBlur"
+ @keydown="e => handleKeyDown(e.keyCode)"
>