Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 23:12:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feature: local_search & search-history v1 stable

Browse source
This commit is contained in:
kKaskak 2023-12-07 00:45:10 +02:00
parent 0d40ac9f15
commit f87444e4e5
3 changed files with 53 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
View file

@ -101,11 +101,24 @@ const SearchBar = ({ className, query, active }) => {
</Button>
}
{
searchHistory.items.length > 0 && historyActive && active ?
historyActive && active ?
<div className={styles['search-history']} onBlur={handleBlur} ref={searchHistoryRef}>
{
localSearch.searchResults.length === 0 && searchHistory.items.length === 0 ?
<div className={styles['search-history-label']}>{t('Start typing ...')}</div>
:
null
}
<div className={styles['search-history-actions']}>
<div className={styles['search-history-label']}>{t('STREMIO_TV_SEARCH_HISTORY_TITLE')}</div>
<button className={styles['search-history-clear']} onClick={() => searchHistory.clear()}>{t('CLEAR_HISTORY')}</button>
{
searchHistory.items.length > 0 ?
<React.Fragment>
<div className={styles['search-history-label']}>{t('STREMIO_TV_SEARCH_HISTORY_TITLE')}</div>
<button className={styles['search-history-clear']} onClick={() => searchHistory.clear()}>{t('CLEAR_HISTORY')}</button>
</React.Fragment>
:
null
}
</div>
<div className={styles['search-history-items']}>
{searchHistory.items.slice(0, 8).map((item, index) => {
@ -113,6 +126,17 @@ const SearchBar = ({ className, query, active }) => {
<button key={index} className={styles['search-history-item']} onClick={queryInputOnSubmit}>{item}</button>
);
})}
{
localSearch.searchResults.length > 0 ?
<div className={styles['search-history-label']}>{t('Recommendations')}</div>
:
null
}
{localSearch.searchResults.map((item, index) => {
return (
<button key={index} className={styles['search-history-item']} onClick={queryInputOnSubmit}>{item.name}</button>
);
})}
</div>
</div>
:

20
src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
View file

@ -60,22 +60,27 @@
background-color: var(--modal-background-color);
border-radius: var(--border-radius);
.search-history-label {
font-size: 0.9rem;
color: var(--primary-foreground-color);
}
.search-history-actions {
display: flex;
justify-content: space-between;
width: 100%;
opacity: 0.8;
margin-bottom: 1rem;
padding-bottom: 1rem;
.search-history-label {
font-size: 0.8rem;
font-size: 0.9rem;
color: var(--primary-foreground-color);
}
.search-history-clear {
cursor: pointer;
color: var(--primary-foreground-color);
font-size: 0.8rem;
font-size: 0.9rem;
&:hover {
opacity: 0.6;
@ -84,14 +89,21 @@
}
.search-history-items {
width: 90%;
width: 100;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
.search-history-label {
font-size: 0.9rem;
color: var(--primary-foreground-color);
margin: 1rem 0;
}
.search-history-item {
width: 90%;
color: var(--primary-foreground-color);
text-align: left;
text-decoration: none;

13
src/common/NavBar/HorizontalNavBar/SearchBar/useLocalSearch.js
View file

@ -7,9 +7,16 @@ const useModelState = require('../../../../common/useModelState');
const useLocalSearch = (query) => {
const { core } = useServices();
const { searchResults } = useModelState({ model: 'local_search' });
const action = React.useMemo(() => ({
action: 'Load',
args: {
model: 'LocalSearch',
}
}), []);
const dispatchSearch = React.useCallback(() => {
const { searchResults } = useModelState({ model: 'local_search', action });
const dispatchSearch = React.useEffect(() => {
core.transport.dispatch({
action: 'Search',
args: {
@ -17,7 +24,7 @@ const useLocalSearch = (query) => {
args: {
searchQuery: query,
maxResults: 5
},
}
},
});
}, [query]);