import VideoItem from "@/components/VideoItem.vue";
+import SearchSuggestions from "@/components/SearchSuggestions";
import { useIsMobile } from "../store";
export default {
components: {
+ SearchSuggestions,
VideoItem,
},
props: {
@@ -71,8 +85,11 @@ export default {
data() {
return {
videos: [],
+ searchText: "",
+ suggestionsVisible: false,
};
},
+
mounted() {
let region = this.getPreferenceString("region", "US");
@@ -91,6 +108,29 @@ export default {
region: region || "US",
});
},
+
+ onKeyUp(e) {
+ if (e.key === "Enter") {
+ e.target.blur();
+ this.$router.push({
+ name: "SearchResults",
+ query: { search_query: this.searchText },
+ });
+ return;
+ } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+ e.preventDefault();
+ }
+ this.$refs.searchSuggestions.onKeyUp(e);
+ },
+ onInputFocus() {
+ this.suggestionsVisible = true;
+ },
+ onInputBlur() {
+ this.suggestionsVisible = false;
+ },
+ onSearchTextChange(searchText) {
+ this.searchText = searchText;
+ },
},
};