Merge branch 'development'

FreeTubeApp · Feb 15, 2021 · b2737df · b2737df
2 parents cc780fa + 2208002
commit b2737df
Show file tree

Hide file tree

Showing 30 changed files with 1,188 additions and 630 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -27,23 +27,36 @@
       :placeholder="placeholder"
       :disabled="disabled"
       @input="e => handleInput(e.target.value)"
+      @focus="searchState.showOptions = true"
+      @blur="handleInputBlur"
+      @keydown="e => handleKeyDown(e.keyCode)"
     >
     <font-awesome-icon
       v-if="showArrow"
       icon="arrow-right"
       class="inputAction"
       @click="handleClick"
     />
-    <datalist
-      v-if="dataList.length > 0"
-      :id="idDataList"
-    >
-      <option
-        v-for="(list, index) in dataList"
-        :key="index"
-        :value="list"
-      />
-    </datalist>
+
+    <div class="options">
+      <ul
+        v-if="inputData !== '' && dataList.length > 0 && searchState.showOptions"
+        :id="idDataList"
+        class="list"
+        @mouseenter="searchState.isPointerInList = true"
+        @mouseleave="searchState.isPointerInList = false"
+      >
+        <li
+          v-for="(list, index) in dataList"
+          :key="index"
+          :class="searchState.selectedOption == index ? 'hover': ''"
+          @click="handleOptionClick(index)"
+          @mouseenter="searchState.selectedOption = index"
+        >
+          {{ list }}
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 

diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -110,6 +110,13 @@
   margin-left: 30px;
 }
 
+.showMoreReplies {
+  margin-left: 30px;
+  font-size: 15px;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
 .getMoreComments {
   height: 10px;
   margin-top: 5px;